- Embed

2026-06-04 08:22:37 -04:00
parent cc03ea530b
commit a2a02e5e02
3 changed files with 389 additions and 2 deletions
@@ -17,6 +17,12 @@ $per_page = (int)setting('catalogue_per_page', '10');
 $page     = max(1, (int)($_GET['page'] ?? 1));
 $paged    = get_videos_paginated($page, $per_page);

+// Build absolute base URL used for embed snippet generation
+$_scheme   = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http';
+$_host     = $_SERVER['HTTP_HOST'] ?? 'localhost';
+$_script   = rtrim(dirname($_SERVER['SCRIPT_NAME'] ?? '/'), '/');
+$_base_url = $_scheme . '://' . $_host . $_script . '/';
+
 render_head('Media — TyClifford.com', '
  /* ── Catalogue grid ── */
  .cat-section { display:flex; flex-direction:column; gap:1rem; }
@@ -141,6 +147,61 @@ render_head('Media — TyClifford.com', '
  /* pagination row */
  .cat-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
  .cat-count   { font-family:"Share Tech Mono",monospace; font-size:.65rem; color:var(--text-3); letter-spacing:.06em; }
+
+  /* ── Embed panel ── */
+  .embed-panel {
+    border-top:1px solid var(--border);
+    overflow:hidden;
+    max-height:0;
+    transition:max-height .35s cubic-bezier(.4,0,.2,1), padding .35s;
+    padding:0 1.1rem;
+  }
+  .embed-panel.open { max-height:320px; padding:.9rem 1.1rem; }
+  .embed-panel-inner { display:flex; flex-direction:column; gap:.75rem; }
+  .embed-label { font-family:"Share Tech Mono",monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
+  .embed-code-wrap { position:relative; }
+  .embed-code {
+    display:block; width:100%;
+    background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--r);
+    padding:.65rem .85rem; padding-right:5.5rem;
+    font-family:"Share Tech Mono",monospace; font-size:.68rem; color:var(--text-2);
+    white-space:nowrap; overflow-x:auto; line-height:1.6;
+    resize:none; cursor:text;
+    scrollbar-width:thin;
+  }
+  .embed-copy-btn {
+    position:absolute; right:.4rem; top:50%; transform:translateY(-50%);
+    padding:.32rem .7rem; font-size:.65rem; font-weight:600;
+    background:rgba(176,96,255,.15); color:var(--purple);
+    border:1px solid rgba(176,96,255,.35); border-radius:calc(var(--r) - 1px);
+    cursor:pointer; font-family:"Share Tech Mono",monospace; letter-spacing:.06em;
+    transition:background .2s, color .2s;
+    white-space:nowrap;
+  }
+  .embed-copy-btn:hover  { background:rgba(176,96,255,.28); }
+  .embed-copy-btn.copied { background:rgba(0,232,122,.15); color:var(--green); border-color:rgba(0,232,122,.35); }
+  .embed-row { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
+  .embed-direct-link {
+    font-family:"Share Tech Mono",monospace; font-size:.65rem; color:var(--text-3);
+    text-decoration:none; border-bottom:1px solid rgba(255,255,255,.1);
+    transition:color .15s, border-color .15s;
+  }
+  .embed-direct-link:hover { color:var(--green); border-color:rgba(0,232,122,.4); }
+  .embed-preview-link {
+    font-family:"Share Tech Mono",monospace; font-size:.65rem; color:var(--purple);
+    text-decoration:none; border-bottom:1px solid rgba(176,96,255,.2);
+    transition:color .15s;
+  }
+  .embed-preview-link:hover { color:#c880ff; }
+  .embed-toggle-btn {
+    display:inline-flex; align-items:center; gap:.4rem;
+    font-family:"Share Tech Mono",monospace; font-size:.65rem; letter-spacing:.08em;
+    color:var(--text-3); background:transparent; border:1px solid var(--border-2);
+    border-radius:var(--r); padding:.35rem .7rem; cursor:pointer;
+    transition:color .2s, border-color .2s, background .2s;
+  }
+  .embed-toggle-btn:hover { color:var(--text-2); border-color:var(--purple); background:rgba(176,96,255,.07); }
+  .embed-toggle-btn.active { color:var(--purple); border-color:var(--purple); background:rgba(176,96,255,.1); }
 ');
 ?>
 <main class="page" role="main">
@@ -181,7 +242,44 @@ render_head('Media — TyClifford.com', '
        <span><?= format_duration((int)$video['duration']) ?></span>
      <?php endif; ?>
    </p>
+    <?php if ($video): ?>
+      <button class="embed-toggle-btn" id="embed-toggle" aria-expanded="false" aria-controls="embed-panel">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+        Embed
+      </button>
+    <?php endif; ?>
  </div>
+
+  <?php if ($video):
+    $embed_url   = $_base_url . 'embed.php?v=' . urlencode($video['slug']);
+    $iframe_code = '<iframe src="' . $embed_url . '" width="560" height="315" frameborder="0" allowfullscreen allow="fullscreen"></iframe>';
+  ?>
+  <div class="embed-panel" id="embed-panel" role="region" aria-label="Embed code">
+    <div class="embed-panel-inner">
+      <div class="form-group" style="gap:.35rem;">
+        <span class="embed-label">iframe embed code</span>
+        <div class="embed-code-wrap">
+          <code class="embed-code" id="embed-code-iframe"><?= h($iframe_code) ?></code>
+          <button class="embed-copy-btn" data-target="embed-code-iframe" onclick="copyEmbed(this)">Copy</button>
+        </div>
+      </div>
+      <div class="embed-row">
+        <span class="embed-label">Direct player URL —</span>
+        <a class="embed-direct-link" href="<?= h($embed_url) ?>" target="_blank" rel="noopener">
+          <?= h($embed_url) ?>
+        </a>
+        <a class="embed-preview-link" href="<?= h($embed_url) ?>" target="_blank" rel="noopener">
+          ↗ Preview
+        </a>
+      </div>
+      <div>
+        <span class="embed-label" style="color:var(--text-3);font-size:.58rem;">
+          Recommended: width="560" height="315" — any 16:9 size works. Add style="border:0;border-radius:6px" for no border.
+        </span>
+      </div>
+    </div>
+  </div>
+  <?php endif; ?>
 </section>

 <!-- ═══════════════════════════ VIDEO CATALOGUE ═══════════════════════════ -->
@@ -305,7 +403,50 @@ document.addEventListener('DOMContentLoaded', function() {
      }
    });
  }
+
+  // Embed panel toggle
+  var toggleBtn = document.getElementById('embed-toggle');
+  var panel     = document.getElementById('embed-panel');
+  if (toggleBtn && panel) {
+    toggleBtn.addEventListener('click', function() {
+      var open = panel.classList.toggle('open');
+      toggleBtn.classList.toggle('active', open);
+      toggleBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
+    });
+  }
 });
+
+// Copy embed code to clipboard
+function copyEmbed(btn) {
+  var targetId = btn.getAttribute('data-target');
+  var el = document.getElementById(targetId);
+  if (!el) return;
+  var text = el.textContent || el.innerText;
+  navigator.clipboard.writeText(text).then(function() {
+    btn.textContent = 'Copied!';
+    btn.classList.add('copied');
+    setTimeout(function() {
+      btn.textContent = 'Copy';
+      btn.classList.remove('copied');
+    }, 2000);
+  }).catch(function() {
+    // Fallback for older browsers
+    var ta = document.createElement('textarea');
+    ta.value = text;
+    ta.style.position = 'fixed';
+    ta.style.opacity = '0';
+    document.body.appendChild(ta);
+    ta.select();
+    document.execCommand('copy');
+    document.body.removeChild(ta);
+    btn.textContent = 'Copied!';
+    btn.classList.add('copied');
+    setTimeout(function() {
+      btn.textContent = 'Copy';
+      btn.classList.remove('copied');
+    }, 2000);
+  });
+}
 </script>
 </body>
 </html>