Merge pull request #45 from BinaryStudioAcademy/task/OV-28-add-remoti…

…on-player

OV-28: add remotion player

frontend/package.json

@@ -36,12 +36,14 @@
         "@fortawesome/free-solid-svg-icons": "6.6.0",
         "@fortawesome/react-fontawesome": "0.2.2",
         "@reduxjs/toolkit": "2.2.7",
+        "@remotion/player": "4.0.201",
         "formik": "2.4.6",
         "framer-motion": "11.3.24",
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "react-redux": "9.1.2",
         "react-router-dom": "6.26.0",
+        "remotion": "4.0.201",
         "shared": "*",
         "zod-formik-adapter": "1.3.0"
     }

frontend/src/bundles/common/components/components.ts

@@ -4,6 +4,7 @@ export { Input } from './input/input.js';
 export { Link } from './link/link.js';
 export { Loader } from './loader/loader.js';
 export { Overlay } from './overlay/overlay.js';
+export { Player } from './player/player.js';
 export { RouterProvider } from './router-provider/router-provider.js';
 export { VideoModal } from './video-modal/video-modal.js';
 export { DownloadIcon } from '@chakra-ui/icons';

frontend/src/bundles/common/components/player/player.tsx

@@ -0,0 +1,48 @@
+import { type PlayerRef, Player as LibraryPlayer } from '@remotion/player';
+import { type RefObject } from 'react';
+
+import { Box } from '~/bundles/common/components/components.js';
+
+type Properties = {
+    orientation: 'landscape' | 'portrait';
+    durationInFrames: number;
+    playerRef: RefObject<PlayerRef>;
+    VideoComponent: React.FC;
+};
+
+const Player = ({
+    orientation,
+    durationInFrames,
+    playerRef,
+    VideoComponent,
+}: Properties): JSX.Element => {
+    const size =
+        orientation === 'landscape'
+            ? { width: 1920, height: 1080 }
+            : { width: 1080, height: 1920 };
+
+    return (
+        <Box
+            height="720px"
+            width="fit-content"
+            maxWidth="100%"
+            overflow="hidden"
+            border="1px solid #FDFDFD"
+        >
+            <LibraryPlayer
+                ref={playerRef}
+                component={VideoComponent}
+                durationInFrames={durationInFrames}
+                compositionWidth={size.width}
+                compositionHeight={size.height}
+                fps={30}
+                style={{
+                    height: '100%',
+                    maxWidth: '100%',
+                }}
+            />
+        </Box>
+    );
+};
+
+export { Player };