Merge pull request #628 from us3r-network/F-frameVideoSupport-ttang

feat: video support

apps/u3/.vscode/settings.json

@@ -22,6 +22,7 @@
     "unpinup",
     "upsert",
     "Upvote",
+    "videojs",
     "viem",
     "Warpcast",
     "Whatsnew",

apps/u3/package.json

@@ -60,7 +60,7 @@
     "dompurify": "^2.3.10",
     "ethers": "^5.7.2",
     "formik": "^2.2.9",
-    "frames.js": "^0.7.1",
+    "frames.js": "^0.8",
     "html2canvas-strengthen": "0.0.1",
     "http-proxy-middleware": "^2.0.6",
     "immer": "^10.0.3",
@@ -114,6 +114,7 @@
     "typescript": "^5.3.3",
     "validator": "^13.11.0",
     "vaul": "^0.9.0",
+    "video.js": "^8.10.0",
     "viem": "~2.7.11",
     "wagmi": "^2.5.7",
     "web-vitals": "^2.1.4",

apps/u3/src/components/social/Embed.tsx

@@ -20,6 +20,7 @@ import ModalImg from './ModalImg';
 import U3ZoraMinter from './farcaster/U3ZoraMinter';
 import LinkModal from '../news/links/LinkModal';
 import EmbedFrameWebsite from './EmbedFrameWebsite';
+import EmbedVideo from './EmbedVideo';
 
 const ValidFrameButtonValue = [
   [0, 0, 0, 0].join(''),
@@ -119,7 +120,9 @@ export default function Embed({
           />
         </>
       )}
-      {/* {embedVideos */}
+      {embedVideos.map((video) => {
+        return <EmbedVideo key={video.url} videoUrl={video.url} />;
+      })}
       <div className="w-full max-w-[630px] space-y-2">
         {[...metadataCasts].map((item) => {
           if (item.cast === undefined) return null;

apps/u3/src/components/social/EmbedVideo.tsx

@@ -0,0 +1,9 @@
+import VideoRenderer from './VideoRender';
+
+export default function EmbedVideo({ videoUrl }: { videoUrl: string }) {
+  return (
+    <div className="max-w-96 ">
+      <VideoRenderer videoSrc={videoUrl} />;
+    </div>
+  );
+}

apps/u3/src/components/social/VideoRender.tsx

@@ -0,0 +1,92 @@
+/* eslint-disable react/destructuring-assignment */
+
+import React, { useMemo, useEffect } from 'react';
+import videojs from 'video.js';
+
+import 'video.js/dist/video-js.css';
+
+interface PlayerProps {
+  videoSrc: string;
+}
+
+const videoJSoptions: {
+  techOrder?: string[];
+  autoplay?: boolean;
+  fill?: boolean;
+  controls?: boolean;
+  responsive?: true;
+  fluid?: true;
+} = {
+  fluid: true,
+  controls: true,
+  fill: true,
+  responsive: true,
+};
+
+function handleClick(e: any) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+export default function VideoRenderer(props: PlayerProps) {
+  const videoRef = React.useRef<HTMLDivElement>(null);
+  const playerRef = React.useRef<any>(null);
+
+  const options = useMemo(
+    () => ({
+      ...videoJSoptions,
+      // video is not necessarily rewritten yet
+      sources: [
+        {
+          src: props.videoSrc ?? '',
+          type: props.videoSrc?.endsWith('.m3u8')
+            ? 'application/x-mpegURL'
+            : props.videoSrc?.endsWith('.mp4')
+            ? 'video/mp4'
+            : '',
+        },
+      ],
+    }),
+    [props.videoSrc]
+  );
+
+  useEffect(() => {
+    // Make sure Video.js player is only initialized once
+    if (!playerRef.current) {
+      // The Video.js player needs to be _inside_ the component el for React 18 Strict Mode.
+      const videoElement = document.createElement('video-js');
+
+      videoElement.classList.add('vjs-big-play-centered');
+      videoRef.current?.appendChild(videoElement);
+
+      playerRef.current = videojs(videoElement, options);
+    } else {
+      const player = playerRef.current;
+
+      player.autoplay(options.autoplay);
+      player.src(options.sources);
+    }
+  }, [options, videoRef, props]);
+
+  // Dispose the Video.js player when the functional component unmounts
+  useEffect(() => {
+    const player = playerRef.current;
+
+    return () => {
+      if (player && !player.isDisposed()) {
+        player.dispose();
+        playerRef.current = null;
+      }
+    };
+  }, [playerRef]);
+
+  return (
+    <div
+      data-vjs-player
+      onClick={handleClick}
+      className="rounded-md overflow-hidden"
+    >
+      <div ref={videoRef} />
+    </div>
+  );
+}