Propagate video tags into modal metadata updates

js/app.js

@@ -23,6 +23,7 @@ import {
 import { attachHealthBadges } from "./gridHealth.js";
 import { attachUrlHealthBadges } from "./urlHealthObserver.js";
 import { updateVideoCardSourceVisibility } from "./utils/cardSourceVisibility.js";
+import { collectVideoTags } from "./utils/videoTags.js";
 import { ADMIN_INITIAL_EVENT_BLACKLIST } from "./lists.js";
 import { userBlocks } from "./userBlocks.js";
 import { relayManager } from "./relayManager.js";
@@ -7772,6 +7773,9 @@ class Application {
 
     this.decorateVideoModeration(this.currentVideo);
 
+    const modalTags = collectVideoTags(this.currentVideo);
+    this.currentVideo.displayTags = modalTags;
+
     if (Number.isFinite(knownPostedAt)) {
       this.cacheVideoRootCreatedAt(this.currentVideo, knownPostedAt);
     } else if (this.currentVideo.rootCreatedAt) {
@@ -7875,6 +7879,7 @@ class Application {
         title: video.title || "Untitled",
         description: video.description || "No description available.",
         timestamps: timestampPayload,
+        tags: modalTags,
         creator: {
           name: creatorProfile.name,
           avatarUrl: creatorProfile.picture,
@@ -8086,7 +8091,10 @@ class Application {
       editedAt,
     });
 
-    this.videoModal.updateMetadata({ timestamps: payload });
+    const modalTags = collectVideoTags(video);
+    video.displayTags = modalTags;
+
+    this.videoModal.updateMetadata({ timestamps: payload, tags: modalTags });
   }
 
   async playVideoWithoutEvent(options = {}) {
@@ -8096,6 +8104,7 @@ class Application {
       title = "Untitled",
       description = "",
       trigger,
+      tags: rawTags,
     } = options || {};
     const hasTrigger = Object.prototype.hasOwnProperty.call(
       options || {},
@@ -8118,6 +8127,10 @@ class Application {
     const magnetSupported = isValidMagnetUri(usableMagnet);
     const sanitizedMagnet = magnetSupported ? usableMagnet : "";
 
+    const modalTags = collectVideoTags({
+      nip71: { hashtags: rawTags },
+    });
+
     this.zapController?.setVisibility(false);
     this.zapController?.resetState();
 
@@ -8140,6 +8153,7 @@ class Application {
       lightningAddress: null,
       pointer: null,
       pointerKey: null,
+      displayTags: modalTags,
     };
 
     this.decorateVideoModeration(this.currentVideo);
@@ -8156,6 +8170,7 @@ class Application {
         title: title || "Untitled",
         description: description || "No description available.",
         timestamp: "",
+        tags: modalTags,
         creator: {
           name: "Unknown",
           avatarUrl: "assets/svg/default-profile.svg",

js/utils/videoTimestamps.js

@@ -1,3 +1,5 @@
+import { collectVideoTags } from "./videoTags.js";
+
 export function getVideoRootIdentifier(video) {
   if (!video || typeof video !== "object") {
     return "";
@@ -79,6 +81,8 @@ export function syncActiveVideoRootTimestamp({
   }
 
   activeVideo.rootCreatedAt = normalized;
+  const modalTags = collectVideoTags(activeVideo);
+  activeVideo.displayTags = modalTags;
 
   const editedAt = Number.isFinite(activeVideo.lastEditedAt)
     ? Math.floor(activeVideo.lastEditedAt)
@@ -95,7 +99,7 @@ export function syncActiveVideoRootTimestamp({
       postedAt: normalized,
       editedAt,
     });
-    videoModal.updateMetadata({ timestamps: payload });
+    videoModal.updateMetadata({ timestamps: payload, tags: modalTags });
   }
 
   return true;