Add embed video modal

js/ui/ModalManager.js

@@ -6,6 +6,7 @@ import { showLoginRequiredToZapNotification } from "../payments/zapNotifications
 import { VideoModal } from "./components/VideoModal.js";
 import { RevertModal } from "./components/RevertModal.js";
 import { ShareNostrModal } from "./components/ShareNostrModal.js";
+import { EmbedVideoModal } from "./components/EmbedVideoModal.js";
 import initUploadModal from "./initUploadModal.js";
 import initEditModal from "./initEditModal.js";
 import initDeleteModal from "./initDeleteModal.js";
@@ -51,6 +52,7 @@ export default class ModalManager {
 
     this.eventDetailsModal = null;
     this.shareNostrModal = null;
+    this.embedVideoModal = null;
 
     this.zapController = null;
   }
@@ -181,6 +183,18 @@ export default class ModalManager {
     });
     app.shareNostrModal = this.shareNostrModal;
 
+    this.embedVideoModal = new EmbedVideoModal({
+      removeTrackingScripts,
+      container: modalContainer,
+      document: doc,
+      getShareUrl: (eventId) => app.buildShareUrlFromEventId(eventId),
+      callbacks: {
+        showSuccess: (message) => app.showSuccess(message),
+        showError: (message) => app.showError(message),
+      },
+    });
+    app.embedVideoModal = this.embedVideoModal;
+
     this.videoModal =
       (typeof this.ui.videoModal === "function"
         ? this.ui.videoModal({ app })
@@ -269,6 +283,31 @@ export default class ModalManager {
       this.videoModalHandlers.share,
     );
 
+    this.videoModalHandlers.embed = (event) => {
+      const detail = event?.detail || {};
+      const targetVideo =
+        detail && typeof detail.video === "object"
+          ? detail.video
+          : app.currentVideo || null;
+      if (!targetVideo) {
+        app.showError("No video is available to embed.");
+        return;
+      }
+      Promise.resolve(
+        this.embedVideoModal?.open({
+          video: targetVideo,
+          triggerElement: event?.target || null,
+        }),
+      ).catch((error) => {
+        devLogger.error("[ModalManager] Failed to open embed modal:", error);
+        app.showError("Unable to open the embed modal.");
+      });
+    };
+    this.videoModal.addEventListener(
+      "video:embed",
+      this.videoModalHandlers.embed,
+    );
+
     this.videoModalHandlers.moderationOverride = (event) => {
       const detail = event?.detail || {};
       const targetVideo =
@@ -721,6 +760,18 @@ export default class ModalManager {
       app.shareNostrModal = null;
     }
 
+    if (this.embedVideoModal && typeof this.embedVideoModal.close === "function") {
+      try {
+        this.embedVideoModal.close();
+      } catch (error) {
+        devLogger.warn("[ModalManager] Failed to close embed modal:", error);
+      }
+    }
+    this.embedVideoModal = null;
+    if (app.embedVideoModal) {
+      app.embedVideoModal = null;
+    }
+
     if (this.revertModal && this.revertConfirmHandler) {
       try {
         this.revertModal.removeEventListener(
@@ -793,6 +844,9 @@ export default class ModalManager {
           case "share":
             eventName = "video:share";
             break;
+          case "embed":
+            eventName = "video:embed";
+            break;
           case "moderationOverride":
             eventName = "video:moderation-override";
             break;
@@ -886,6 +940,7 @@ export default class ModalManager {
     app.videoModal = null;
     app.eventDetailsModal = null;
     app.zapController = null;
+    app.embedVideoModal = null;
 
     this.uploadModal = null;
     this.uploadModalEvents = null;
@@ -903,5 +958,6 @@ export default class ModalManager {
     this.videoModalHandlers = {};
     this.eventDetailsModal = null;
     this.zapController = null;
+    this.embedVideoModal = null;
   }
 }