Respect NSFW flag while letting authors review their uploads

js/ui/components/VideoCard.js

@@ -16,6 +16,7 @@ export class VideoCard {
     state = {},
     ensureGlobalMoreMenuHandlers,
     onRequestCloseAllMenus,
+    nsfwContext = null,
   } = {}) {
     if (!doc) {
       throw new Error("VideoCard requires a document reference.");
@@ -72,6 +73,16 @@ export class VideoCard {
         ? onRequestCloseAllMenus
         : null;
 
+    this.nsfwContext = {
+      isNsfw: Boolean(nsfwContext?.isNsfw),
+      allowNsfw: nsfwContext?.allowNsfw !== false,
+      viewerIsOwner: nsfwContext?.viewerIsOwner === true,
+    };
+    this.shouldMaskNsfwForOwner =
+      this.nsfwContext.isNsfw &&
+      !this.nsfwContext.allowNsfw &&
+      this.nsfwContext.viewerIsOwner;
+
     this.callbacks = {
       onPlay: null,
       onEdit: null,
@@ -220,6 +231,7 @@ export class VideoCard {
       root.dataset.videoId = this.video.id;
     }
 
+    this.applyNsfwContext();
     this.applyPointerDataset();
     this.applyOwnerDataset();
     this.applySourceDatasets();
@@ -340,6 +352,10 @@ export class VideoCard {
 
     this.thumbnailEl = img;
 
+    if (this.shouldMaskNsfwForOwner) {
+      img.classList.add("video-card__thumbnail--blurred");
+    }
+
     const markThumbnailAsLoaded = () => {
       if (!thumbnailUrl) {
         return;
@@ -1257,6 +1273,29 @@ export class VideoCard {
     return container;
   }
 
+  applyNsfwContext() {
+    if (!this.root) {
+      return;
+    }
+
+    if (!this.nsfwContext?.isNsfw) {
+      if (this.root.dataset.nsfwVisibility) {
+        delete this.root.dataset.nsfwVisibility;
+      }
+      return;
+    }
+
+    if (this.shouldMaskNsfwForOwner) {
+      this.root.dataset.nsfwVisibility = "owner-only";
+      this.root.classList.add("video-card--nsfw-owner");
+      return;
+    }
+
+    this.root.dataset.nsfwVisibility = this.nsfwContext.allowNsfw
+      ? "allowed"
+      : "hidden";
+  }
+
   applyPointerDataset() {
     if (!this.root) {
       return;