fix player sizing

HolodexNet · Jun 9, 2024 · a0c9dbd · a0c9dbd
1 parent fea90c5
commit a0c9dbd
Show file tree

Hide file tree

Showing 3 changed files with 561 additions and 676 deletions.
diff --git a/packages/react/src/components/layout/PlayerWrapper.tsx b/packages/react/src/components/layout/PlayerWrapper.tsx
@@ -39,13 +39,11 @@ export const PlayerWrapper = ({
       ref={customSetPlayerRef ?? setPlayerRef}
       // pass `key` to prevent flicker issue https://github.com/CookPete/react-player/issues/413#issuecomment-395404630
       key={url}
-      style={
-        {
-          // aspectRatio: "16 / 9", uncommenting this may cause the aspect ratio to lock on certain pages such as script editor
-        }
-      }
-      // width="100%"
-      width="auto"
+      style={{
+        aspectRatio: "16 / 9", //uncommenting this may cause the aspect ratio to lock on certain pages such as script editor
+      }}
+      width="100%"
+      // width="auto"
       height="100%"
       url={url}
       controls

diff --git a/packages/react/src/routes/watch.tsx b/packages/react/src/routes/watch.tsx
@@ -60,6 +60,7 @@ export default function Watch() {
   const chatPos = useAtomValue(chatPosAtom);
   const [ref, bounds] = useMeasure({ debounce: 50, scroll: false });
 
+  const url = idToVideoURL(id, currentVideo?.link);
   return (
     <>
       <Helmet>
@@ -88,7 +89,7 @@ export default function Watch() {
                 >
                   <PlayerWrapper
                     id={currentVideo?.id}
-                    url={currentVideo?.link}
+                    url={url}
                     // className="h-full w-full"
                     // style={{ aspectRatio: theaterMode ? "" : "16 / 9" }}
                   />
@@ -99,12 +100,7 @@ export default function Watch() {
                   )}
                 </div>
               )}
-              {currentVideo && (
-                <Controlbar
-                  video={currentVideo}
-                  url={idToVideoURL(currentVideo.id, currentVideo.link)}
-                />
-              )}
+              {currentVideo && <Controlbar video={currentVideo} url={url} />}
             </div>
             <div
               className={cn("flex flex-col gap-1", {

diff --git a/packages/react/videos.tldr b/packages/react/videos.tldr