✨ Blur video on nsfw labeled content (#191)

* ✨ Blur video on nsfw labeled content * 💄 Fix video resizing
bluesky-social · Sep 19, 2024 · a9debb6 · a9debb6
1 parent 1637ab8
commit a9debb6
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/components/common/posts/PostsFeed.tsx b/components/common/posts/PostsFeed.tsx
@@ -224,12 +224,12 @@ export function PostEmbeds({ item }: { item: AppBskyFeedDefs.FeedViewPost }) {
     ? item.post.embed.media
     : item.post.embed
 
-  const imageRequiresBlur = doesLabelNeedBlur(
+  const mediaRequiresBlur = doesLabelNeedBlur(
     item.post.labels?.map(({ val }) => val),
   )
   const imageClassName = classNames(
     `border border-gray-200 rounded`,
-    imageRequiresBlur ? 'blur-sm hover:blur-none' : '',
+    mediaRequiresBlur ? 'blur-sm hover:blur-none' : '',
   )
 
   if (AppBskyEmbedVideo.isView(embed)) {
@@ -240,6 +240,7 @@ export function PostEmbeds({ item }: { item: AppBskyFeedDefs.FeedViewPost }) {
           source={embed.playlist}
           thumbnail={embed.thumbnail}
           alt={embed.alt}
+          shouldBlur={mediaRequiresBlur}
           captions={captions ? (captions as AppBskyEmbedVideo.Caption[]) : []}
         />
       </div>

diff --git a/components/common/posts/PostsTable.tsx b/components/common/posts/PostsTable.tsx
@@ -141,12 +141,12 @@ function PostEmbeds({ item }: { item: AppBskyFeedDefs.FeedViewPost }) {
   const embed = AppBskyEmbedRecordWithMedia.isView(item.post.embed)
     ? item.post.embed.media
     : item.post.embed
-  const imageRequiresBlur = doesLabelNeedBlur(
+  const mediaRequiresBlur = doesLabelNeedBlur(
     item.post.labels?.map(({ val }) => val),
   )
   const imageClassName = classNames(
     `border border-gray-200 rounded`,
-    imageRequiresBlur ? 'blur-sm hover:blur-none' : '',
+    mediaRequiresBlur ? 'blur-sm hover:blur-none' : '',
   )
 
   if (AppBskyEmbedImages.isView(embed)) {

diff --git a/components/common/video/player.tsx b/components/common/video/player.tsx
@@ -8,14 +8,17 @@ export default function VideoPlayer({
   alt,
   thumbnail,
   captions,
+  shouldBlur = false,
 }: {
   source: string
   alt?: string
   thumbnail?: string
   captions: AppBskyEmbedVideo.Caption[]
+  shouldBlur?: boolean
 }) {
   const [hls] = useState(() => new Hls())
   const [isUnsupported, setIsUnsupported] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
   const figId = useId()
   const ref = useRef<HTMLVideoElement>(null)
 
@@ -41,19 +44,28 @@ export default function VideoPlayer({
   }, [source, hls])
 
   return (
-    <figure>
+    <figure
+      className="flex-1"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
       <video
         poster={thumbnail}
         ref={ref}
-        style={{ flex: 1 }}
         playsInline
         preload="none"
         controls
         loop
         muted
         crossOrigin="anonymous"
+        className={`w-full flex-1 transition-all duration-300 ease-in-out ${
+          isHovered || !shouldBlur ? 'blur-none' : 'blur-md'
+        }`}
         aria-labelledby={alt ? figId : undefined}
       >
+        {!isHovered && shouldBlur && (
+          <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 text-white text-xl font-bold"></div>
+        )}
         {isUnsupported && (
           <p>
             Your browser does not seem to support HLS videos. Please switch to a