Merge pull request #1611 from PR0M3TH3AN/codex/add-embed-button-and-functionality

Add Embed action to Video Modal

components/video-modal.html

@@ -452,6 +452,25 @@
                       </svg>
                       <span class="video-modal__action-label">Share</span>
                     </button>
+                    <button
+                      id="embedBtn"
+                      type="button"
+                      class="video-modal__action-button focus-ring accent-action-button"
+                      aria-label="Embed video"
+                    >
+                      <svg
+                        class="video-modal__action-icon icon-image"
+                        viewBox="0 0 24 24"
+                        aria-hidden="true"
+                        focusable="false"
+                      >
+                        <path
+                          fill="currentColor"
+                          d="M9.4 16.4 5 12l4.4-4.4-1.4-1.4L2.2 12l5.8 5.8 1.4-1.4Zm5.2 0L19 12l-4.4-4.4 1.4-1.4 5.8 5.8-5.8 5.8-1.4-1.4Z"
+                        />
+                      </svg>
+                      <span class="video-modal__action-label">Embed</span>
+                    </button>
                     <div class="relative" data-more-menu-wrapper="true">
                       <button
                         id="modalMoreBtn"

js/ui/components/VideoModal.js

@@ -152,6 +152,7 @@ export class VideoModal {
     this.creatorNpub = null;
     this.copyMagnetBtn = null;
     this.shareBtn = null;
+    this.embedBtn = null;
     this.modalZapBtn = null;
     this.modalMoreBtn = null;
     this.reactionButtons = {
@@ -297,6 +298,7 @@ export class VideoModal {
 
     this.handleCopyRequest = this.handleCopyRequest.bind(this);
     this.handleShareRequest = this.handleShareRequest.bind(this);
+    this.handleEmbedRequest = this.handleEmbedRequest.bind(this);
     this.handleCreatorNavigation = this.handleCreatorNavigation.bind(this);
     this.handleModalMoreButtonClick = this.handleModalMoreButtonClick.bind(this);
     this.handleReactionClick = this.handleReactionClick.bind(this);
@@ -631,6 +633,7 @@ export class VideoModal {
     this.creatorNpub = playerModal.querySelector("#creatorNpub") || null;
     this.copyMagnetBtn = playerModal.querySelector("#copyMagnetBtn") || null;
     this.shareBtn = playerModal.querySelector("#shareBtn") || null;
+    this.embedBtn = playerModal.querySelector("#embedBtn") || null;
     this.modalZapBtn = playerModal.querySelector("#modalZapBtn") || null;
     this.modalMoreBtn = playerModal.querySelector("#modalMoreBtn") || null;
     this.reactionsController.initialize({ playerModal });
@@ -723,6 +726,7 @@ export class VideoModal {
     this.setZapVisibility(false);
     this.setCopyEnabled(false);
     this.setShareEnabled(false);
+    this.setEmbedEnabled(false);
     this.resetStats();
 
     this.attachAmbientGlow();
@@ -2232,6 +2236,9 @@ export class VideoModal {
       this.shareBtn.dataset.modalMenuHandler = "true";
       this.shareBtn.addEventListener("click", this.handleShareRequest);
     }
+    if (this.embedBtn) {
+      this.embedBtn.addEventListener("click", this.handleEmbedRequest);
+    }
 
     if (this.modalZapBtn) {
       this.modalZapBtn.addEventListener("click", (event) => {
@@ -2804,8 +2811,10 @@ export class VideoModal {
       (typeof video?.magnet === "string" && video.magnet.trim()) ||
         video?.torrentSupported
     );
+    const hasPointer = this.hasResolvablePointer(video);
 
     this.setShareEnabled(hasUrl || hasMagnet);
+    this.setEmbedEnabled(hasPointer);
 
     if (!this.sourceToggleContainer) {
       return;
@@ -2865,6 +2874,15 @@ export class VideoModal {
     }
   }
 
+  handleEmbedRequest(event) {
+    event?.preventDefault?.();
+    event?.stopPropagation?.();
+    if (this.embedBtn?.disabled) {
+      return;
+    }
+    this.dispatch("video:embed", { video: this.activeVideo });
+  }
+
   handleCreatorNavigation(event) {
     event?.preventDefault?.();
     this.dispatch("creator:navigate", { video: this.activeVideo });
@@ -3685,6 +3703,52 @@ export class VideoModal {
     this.shareBtn.classList.toggle("cursor-not-allowed", !enabled);
   }
 
+  setEmbedEnabled(enabled) {
+    if (!this.embedBtn) {
+      return;
+    }
+    this.embedBtn.disabled = !enabled;
+    this.embedBtn.setAttribute("aria-disabled", (!enabled).toString());
+    this.embedBtn.classList.toggle("opacity-50", !enabled);
+    this.embedBtn.classList.toggle("cursor-not-allowed", !enabled);
+  }
+
+  hasResolvablePointer(video) {
+    const candidateInfo =
+      video && typeof video.pointerInfo === "object" ? video.pointerInfo : null;
+    let pointer = candidateInfo?.pointer ?? null;
+    let key =
+      typeof candidateInfo?.key === "string" && candidateInfo.key
+        ? candidateInfo.key
+        : typeof candidateInfo?.pointerKey === "string" && candidateInfo.pointerKey
+          ? candidateInfo.pointerKey
+          : "";
+
+    if (!pointer) {
+      pointer = video?.pointer ?? video?.pointerTag ?? null;
+    }
+
+    if (!key) {
+      const keyCandidates = [
+        video?.pointerKey,
+        video?.pointerId,
+        video?.pointerIdentifier,
+      ];
+      for (const candidateKey of keyCandidates) {
+        if (typeof candidateKey === "string" && candidateKey.trim()) {
+          key = candidateKey.trim();
+          break;
+        }
+      }
+    }
+
+    if (!key && pointer) {
+      key = this.derivePointerKeyFromInput(pointer);
+    }
+
+    return Boolean(key);
+  }
+
   setZapVisibility(visible, options = {}) {
     let config;
     if (typeof visible === "object" && visible !== null) {