fix props with forwarded ref

components/Video/Video.tsx

@@ -14,7 +14,7 @@ const Player = styled(ReactPlayer, {
   left: 0,
 
   "& video": {
-    borderRadius: theme.radii.rounded,
+    borderRadius: theme.radii.corner,
   },
 });
 
@@ -31,50 +31,53 @@ export type VideoProps = Partial<FilePlayerProps> & {
   className?: string;
 };
 
-const Video = ({ src, autoplay, className, ...rest }: VideoProps) => {
+const Video = ({ src, autoplay = false, className, ...rest }: VideoProps) => {
   // fix hydration issues: https://github.com/cookpete/react-player/issues/1428
   const hasMounted = useHasMounted();
 
-  const files: FilePlayerProps["url"] = [
-    // @ts-ignore
-    src.webm && {
-      src: src.webm,
-      type: "video/webm",
-    },
-    // @ts-ignore
-    src.mp4 && {
-      src: src.mp4,
-      type: "video/mp4",
-    },
-  ];
-
-  const config: FilePlayerProps["config"] = {
-    attributes: {
-      controlsList: "nodownload",
-      preload: "metadata",
-      poster: src.image, // thumbnail
-      autoPlay: autoplay,
-      loop: !!autoplay,
-      muted: !!autoplay, // no sound when autoplaying
-      controls: !autoplay, // only show controls when not autoplaying
+  const playerProps: FilePlayerProps = {
+    url: [],
+    config: {
+      attributes: {
+        controlsList: "nodownload",
+        preload: "metadata",
+        poster: src?.image, // thumbnail
+        autoPlay: autoplay,
+        loop: autoplay,
+        muted: autoplay, // no sound when autoplaying
+        controls: !autoplay, // only show controls when not autoplaying
+      },
+      tracks: [],
     },
   };
 
-  if (src.vtt) {
-    config.tracks = [
-      {
-        kind: "subtitles",
-        src: src.vtt,
-        srcLang: "en",
-        label: "English",
-        default: true,
-      },
-    ];
+  if (src?.webm) {
+    // @ts-ignore
+    playerProps.url?.push({
+      src: src.webm,
+      type: "video/webm",
+    });
+  }
+  if (src?.mp4) {
+    // @ts-ignore
+    playerProps.url?.push({
+      src: src.mp4,
+      type: "video/mp4",
+    });
+  }
+  if (src?.vtt) {
+    playerProps.config?.tracks?.push({
+      kind: "subtitles",
+      src: src.vtt,
+      srcLang: "en",
+      label: "English",
+      default: true,
+    });
   }
 
   return (
     <Wrapper className={className}>
-      {hasMounted && <Player width="100%" height="100%" url={files} config={{ file: config }} {...rest} />}
+      {hasMounted && <Player width="100%" height="100%" {...playerProps} {...rest} />}
     </Wrapper>
   );
 };