Merge branch 'preview'

Author: pdelfan

package-lock.json

@@ -33,6 +33,7 @@
     "@uidotdev/usehooks": "^2.4.1",
     "@vercel/analytics": "^1.3.1",
     "@vercel/speed-insights": "^1.0.12",
+    "@vidstack/react": "^1.12.9",
     "browser-image-compression": "^2.0.2",
     "emoji-mart": "^5.6.0",
     "jwt-decode": "^4.0.0",

package.json

@@ -7,10 +7,12 @@ import {
   AppBskyEmbedRecordWithMedia,
   AppBskyGraphDefs,
   AppBskyFeedDefs,
+  AppBskyEmbedVideo,
 } from "@atproto/api";
 import RecordEmbed from "./RecordEmbed";
 import ListEmbed from "./ListEmbed";
 import FeedEmbed from "./FeedEmbed";
+import VideoEmbed from "./VideoEmbed";
 
 interface Props {
   content: AppBskyFeedDefs.FeedViewPost["post"]["embed"];
@@ -54,6 +56,15 @@ export default function PostEmbed(props: Props) {
           depth={depth}
         />
       );
+    } else if (AppBskyEmbedVideo.isView(content)) {
+      return (
+        <VideoEmbed
+          aspectRatio={`${content.aspectRatio?.width}/${content.aspectRatio?.height}`}          
+          playlist={content.playlist}
+          thumbnail={content.thumbnail}
+          alt={content.alt}          
+        />
+      );
     }
   };
 

src/components/dataDisplay/postEmbed/PostEmbed.tsx

@@ -0,0 +1,44 @@
+import { memo } from "react";
+import { MediaPlayer, MediaProvider, Poster } from "@vidstack/react";
+import {
+  defaultLayoutIcons,
+  DefaultVideoLayout,
+} from "@vidstack/react/player/layouts/default";
+import "@vidstack/react/player/styles/default/theme.css";
+import "@vidstack/react/player/styles/default/layouts/video.css";
+
+interface Props {
+  aspectRatio: string;
+  playlist: string;
+  thumbnail?: string;
+  alt?: string;
+}
+
+const VideoEmbed = memo(function VideoEmbed(props: Props) {
+  const { aspectRatio, playlist, thumbnail, alt } = props;
+
+  return (
+    <MediaPlayer
+      crossOrigin
+      playsInline
+      viewType="video"
+      className="mt-2 hover:brightness-90 hover:cursor-pointer"
+      src={playlist}
+      poster={thumbnail ?? ""}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <MediaProvider>
+        {alt && (
+          <Poster
+            src={thumbnail}
+            alt={alt}
+            className="absolute inset-0 block bg-black opacity-0 transition-opacity data-[visible]:opacity-100 [&>img]:w-full [&>img]:object-contain"
+          />
+        )}
+      </MediaProvider>
+      <DefaultVideoLayout thumbnails={thumbnail} icons={defaultLayoutIcons} />
+    </MediaPlayer>
+  );
+});
+
+export default VideoEmbed;