<?php
/**
 * embed.php — Standalone embeddable player page.
 * Designed to be used inside an <iframe> on third-party sites.
 *
 * Usage:  <iframe src="https://yoursite.com/embed.php?v=video-slug"></iframe>
 */
require_once __DIR__ . '/includes/db.php';

$slug  = trim($_GET['v'] ?? '');
$video = $slug ? get_video_by_slug($slug) : null;

// Determine absolute base URL for media files.
// We need absolute URLs here because the embed lives on a foreign domain.
$scheme   = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http';
$host     = $_SERVER['HTTP_HOST'] ?? 'localhost';
$script   = dirname($_SERVER['SCRIPT_NAME'] ?? '/');
$script   = rtrim($script, '/');
$base_url = $scheme . '://' . $host . $script . '/';  // e.g. https://tyclifford.com/live/

// X-Frame-Options: allow embedding from any origin.
// If you want to restrict, change ALLOWALL to SAMEORIGIN or remove for CSP header instead.
header('X-Frame-Options: ALLOWALL');
header('Content-Security-Policy: frame-ancestors *');
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?= $video ? htmlspecialchars($video['title'], ENT_QUOTES) . ' — TyClifford.com' : 'Video Player' ?></title>
  <link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet"/>
  <script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --green:  #00e87a;
      --purple: #b060ff;
      --bg:     #09090f;
      --text:   #e8e8f8;
      --text-2: #9898c0;
      --text-3: #58587a;
    }

    html, body {
      width: 100%; height: 100%;
      background: var(--bg);
      overflow: hidden;
      font-family: 'Inter', system-ui, sans-serif;
      color: var(--text);
    }

    .player-wrap {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      background: #000;
      position: relative;
    }

    /* Top shimmer bar — matches site theme */
    .shimmer-bar {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      z-index: 10;
      background: linear-gradient(90deg,
        #ff424d, #b060ff, #00c8ff, #00e87a,
        #00c8ff, #b060ff, #ff424d);
      background-size: 300% 100%;
      animation: shimmer 5s linear infinite;
    }
    @keyframes shimmer {
      from { background-position: 0% 50%; }
      to   { background-position: 200% 50%; }
    }

    /* Video.js fills the whole container */
    .video-js {
      width: 100% !important;
      height: 100% !important;
      position: absolute !important;
      inset: 0 !important;
    }

    /* Custom VJS skin to match site */
    .video-js .vjs-big-play-button {
      background: rgba(176,96,255,.8) !important;
      border: 2px solid rgba(176,96,255,.95) !important;
      border-radius: 50% !important;
      width: 64px !important; height: 64px !important;
      top: 50% !important; left: 50% !important;
      transform: translate(-50%, -50%) !important;
      margin: 0 !important;
      line-height: 64px !important;
      transition: background .2s !important;
    }
    .video-js:hover .vjs-big-play-button {
      background: rgba(176,96,255,1) !important;
    }
    .video-js .vjs-control-bar {
      background: linear-gradient(transparent, rgba(0,0,0,.9)) !important;
      height: 3.2em !important;
    }
    .video-js .vjs-play-progress    { background: var(--green) !important; }
    .video-js .vjs-volume-level     { background: var(--green) !important; }
    .video-js .vjs-slider           { background: rgba(255,255,255,.15) !important; }
    .video-js .vjs-load-progress    { background: rgba(255,255,255,.1) !important; }
    .video-js .vjs-current-time,
    .video-js .vjs-duration,
    .video-js .vjs-time-divider     { color: rgba(255,255,255,.8) !important; font-size: .7em !important; }

    /* Title + branding overlay at top (fades out) */
    .title-overlay {
      position: absolute;
      top: 8px; left: 12px; right: 12px;
      z-index: 5;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      pointer-events: none;
      opacity: 1;
      transition: opacity .5s;
    }
    .title-overlay.hidden { opacity: 0; }

    .title-text {
      font-size: .78rem;
      font-weight: 600;
      color: #fff;
      text-shadow: 0 1px 6px rgba(0,0,0,.8);
      line-height: 1.3;
      max-width: 70%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .brand-link {
      font-family: 'Courier New', monospace;
      font-size: .6rem;
      letter-spacing: .12em;
      color: rgba(255,255,255,.55);
      text-decoration: none;
      text-shadow: 0 1px 4px rgba(0,0,0,.8);
      pointer-events: all;
      white-space: nowrap;
      transition: color .2s;
    }
    .brand-link:hover { color: var(--green); }

    /* No-video state */
    .no-video {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%; height: 100%;
      gap: .75rem;
      background: var(--bg);
    }
    .no-video p {
      font-family: 'Courier New', monospace;
      font-size: .72rem;
      color: var(--text-3);
      letter-spacing: .1em;
    }
  </style>
</head>
<body>

<div class="player-wrap" id="player-wrap">
  <div class="shimmer-bar"></div>

  <?php if ($video && !empty($video['sources'])): ?>

    <!-- Title + brand overlay -->
    <div class="title-overlay" id="title-overlay">
      <span class="title-text"><?= htmlspecialchars($video['title'], ENT_QUOTES) ?></span>
      <a class="brand-link" href="<?= $base_url ?>index.php?v=<?= urlencode($video['slug']) ?>"
         target="_blank" rel="noopener">tyclifford.com</a>
    </div>

    <video id="embed-player"
           class="video-js vjs-default-skin vjs-big-play-centered"
           controls preload="metadata"
           <?php if ($video['thumbnail']): ?>
             poster="<?= htmlspecialchars($base_url . MEDIA_URL . $video['thumbnail'], ENT_QUOTES) ?>"
           <?php endif; ?>>
      <?php foreach ($video['sources'] as $src): ?>
        <source
          src="<?= htmlspecialchars($base_url . MEDIA_URL . $src['file_path'], ENT_QUOTES) ?>"
          type="<?= htmlspecialchars($src['mime_type'], ENT_QUOTES) ?>">
      <?php endforeach; ?>
      <p class="vjs-no-js">Your browser does not support HTML5 video.</p>
    </video>

  <?php else: ?>

    <div class="no-video">
      <svg width="40" height="40" viewBox="0 0 24 24" fill="none"
           stroke="#58587a" stroke-width="1.5">
        <rect x="2" y="3" width="20" height="14" rx="2"/>
        <line x1="8" y1="21" x2="16" y2="21"/>
        <line x1="12" y1="17" x2="12" y2="21"/>
      </svg>
      <p><?= $slug ? 'video not found' : 'no video specified' ?></p>
    </div>

  <?php endif; ?>
</div>

<?php if ($video && !empty($video['sources'])): ?>
<script>
document.addEventListener('DOMContentLoaded', function () {
  var player = videojs('embed-player', {
    controls: true,
    autoplay: false,
    preload: 'metadata',
    fluid: false,
    responsive: false,
    playbackRates: [0.5, 1, 1.25, 1.5, 2],
    controlBar: {
      children: [
        'playToggle', 'volumePanel', 'currentTimeDisplay',
        'timeDivider', 'durationDisplay', 'progressControl',
        'playbackRateMenuButton', 'fullscreenToggle'
      ]
    }
  });

  // Hide title overlay once user starts playing
  var overlay = document.getElementById('title-overlay');
  player.on('play', function () {
    if (overlay) overlay.classList.add('hidden');
  });
  player.on('pause', function () {
    if (overlay) overlay.classList.remove('hidden');
  });
});
</script>
<?php endif; ?>

</body>
</html>
