<!-- 1. YVPlayer Styles & Script via jsDelivr CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/your-username/yvplayer@main/yvPlayer.css" />
<script src="https://cdn.jsdelivr.net/gh/your-username/yvplayer@main/yvPlayer.js"></script>

<!-- 2. Player Element: Set data-yv-video with your YouTube ID or URL -->
<div 
  data-yv-video="M7lc1UVf-VE" 
  data-yv-theme="red"
  style="max-width: 960px; aspect-ratio: 16/9; margin: 0 auto; border-radius: 12px; overflow: hidden;"
></div>

<div id="player" style="max-width: 960px; aspect-ratio: 16/9; margin: 0 auto; border-radius: 12px; overflow: hidden;"></div>

<script src="https://www.youtube.com/iframe_api"></script>
<script src="yvPlayer.js"></script>

<script>
  window.onYouTubeIframeAPIReady = function() {
    YVPlayer.init("player", {
      defaultId: "M7lc1UVf-VE",
      theme: "red",
      autoplay: true,
      loop: false
    }).then(function() {
      console.log("YVPlayer initialized successfully!");
    });
  };
</script>

import React, { useEffect, useRef } from "react";

export function VideoPlayer({ videoId, theme = "red", customColor, autoplay = true }) {
  const containerRef = useRef(null);
  const playerIdRef = useRef("yv-" + Math.random().toString(36).substring(2, 9));

  useEffect(() => {
    const id = playerIdRef.current;
    if (typeof window === "undefined" || !window.YVPlayer) return;

    window.YVPlayer.init(id, {
      defaultId: videoId,
      theme,
      autoplay
    }).then(() => {
      if (customColor) window.YVPlayer.setTheme(id, customColor, "Custom");
    });

    return () => {
      if (window.YVPlayer?.destroy) window.YVPlayer.destroy(id);
    };
  }, [videoId, theme, customColor, autoplay]);

  return (
    <div
      id={playerIdRef.current}
      ref={containerRef}
      style={{ maxWidth: "960px", aspectRatio: "16/9", borderRadius: "14px", overflow: "hidden" }}
    />
  );
}

<template>
  <div
    :id="playerId"
    class="yvPlayer"
    :style="{ width: '100%', aspectRatio: '16 / 9', borderRadius: radius, overflow: 'hidden' }"
  ></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from "vue";

const props = defineProps({
  videoId: { type: String, required: true },
  theme: { type: String, default: "red" },
  customColor: { type: String, default: null },
  autoplay: { type: Boolean, default: true },
  pipMode: { type: String, default: "document" },
  radius: { type: String, default: "14px" }
});

const playerId = "yv-" + Math.random().toString(36).substring(2, 9);

onMounted(() => {
  if (typeof window === "undefined" || !window.YVPlayer) return;

  window.YVPlayer.init(playerId, {
    defaultId: props.videoId,
    theme: props.theme,
    customColor: props.customColor,
    autoplay: props.autoplay,
    pipMode: props.pipMode,
    storyboard: true
  });
});

watch(() => props.videoId, (newId) => {
  if (window.YVPlayer && window.YVPlayer.changeVideo) {
    window.YVPlayer.changeVideo(playerId, newId);
  }
});

watch(() => props.theme, (newTheme) => {
  if (window.YVPlayer && window.YVPlayer.setTheme) {
    window.YVPlayer.setTheme(playerId, props.customColor || newTheme, newTheme);
  }
});

onBeforeUnmount(() => {
  if (window.YVPlayer && window.YVPlayer.destroy) {
    window.YVPlayer.destroy(playerId);
  }
});
</script>

<script>
  import { onMount, onDestroy } from "svelte";

  export let videoId = "M7lc1UVf-VE";
  export let theme = "red";
  export let customColor = null;
  export let pipMode = "document";
  export let autoplay = true;

  let playerEl;
  let playerId = "yv-svelte-" + Math.random().toString(36).substring(2, 8);
  let playerReady = false;

  onMount(() => {
    if (typeof window === "undefined" || !window.YVPlayer) return;

    window.YVPlayer.init(playerId, {
      defaultId: videoId,
      theme,
      customColor,
      pipMode,
      autoplay,
      storyboard: true
    }).then(() => {
      playerReady = true;
    });
  });

  $: if (playerReady && videoId && window.YVPlayer) {
    window.YVPlayer.changeVideo(playerId, videoId);
  }

  onDestroy(() => {
    if (window.YVPlayer && window.YVPlayer.destroy) {
      window.YVPlayer.destroy(playerId);
    }
  });
</script>

<div
  bind:this={playerEl}
  id={playerId}
  class="yvPlayer"
  style="width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;"
></div>

// 1. Listen for playback start
YVPlayer.on("my-player", "play", () => {
  console.log("Playback started or resumed");
});

// 2. High-frequency timeline updates (every 250ms)
YVPlayer.on("my-player", "timeupdate", ({ currentTime, duration, progress }) => {
  console.log(`Current: ${currentTime.toFixed(1)}s / ${duration.toFixed(1)}s (${progress.toFixed(1)}%)`);
});

// 3. Picture-in-Picture mode activation
YVPlayer.on("my-player", "pipenter", ({ mode }) => {
  console.log(`Entered PiP mode: ${mode}`); // "document", "os", or "inpage"
});

// 4. Picture-in-Picture window closed
YVPlayer.on("my-player", "pipexit", () => {
  console.log("Returned to on-page player stage");
});

// 5. Volume or mute toggle
YVPlayer.on("my-player", "volumechange", ({ volume, isMuted }) => {
  console.log(`Volume: ${volume}%, Muted: ${isMuted}`);
});

// 6. Theme accent color change
YVPlayer.on("my-player", "themechange", ({ color, theme }) => {
  console.log(`Switched to theme ${theme} (${color})`);
});

<!-- 1. Declarative HTML preset theme -->
<div class="yvPlayer" id="player" data-yv-theme="purple"></div>

<!-- 2. Arbitrary Custom Brand Hex via HTML -->
<div class="yvPlayer" id="brand-player" data-yv-color="#8b5cf6"></div>

<!-- 3. Programmatic runtime theme switch (zero video interruption) -->
<script>
  // Switch to preset theme
  YVPlayer.setTheme("player", "emerald");

  // Or apply any custom 6-digit hex color
  YVPlayer.setTheme("player", "#ec4899", "Neon Pink");
</script>

// 1. Calculate overall tile index
const tileIndex = Math.floor(hoverTime / interval);
const tilesPerSheet = cols * rows;

// 2. Determine target mosaic sheet number
const sheetIndex = Math.floor(tileIndex / tilesPerSheet);

// 3. Determine exact column and row coordinates
const indexInSheet = tileIndex % tilesPerSheet;
const col = indexInSheet % cols;
const row = Math.floor(indexInSheet / cols);

// 4. Apply CSS background position offset
tooltipImg.style.backgroundImage = `url(${sheetUrl.replace("$M", sheetIndex)})`;
tooltipImg.style.backgroundPosition = `-${col * tileWidth}px -${row * tileHeight}px`;

// 1. Create native text track on hidden video element
const textTrack = nativeVideo.addTextTrack("subtitles", "English", "en");
textTrack.mode = "showing";

// 2. Parse YouTube timed text and inject VTTCue objects
captionsArray.forEach(cap => {
  const cue = new VTTCue(cap.start, cap.end, cap.text);
  cue.line = -2; // Clean placement near the bottom
  cue.size = 80;
  textTrack.addCue(cue);
});

<!-- Drop-in vertical YouTube Short with 9:16 aspect ratio -->
<div
  data-yv-video="https://www.youtube.com/shorts/YlyI2jmHEYc"
  data-yv-shorts="true"
  data-yv-theme="red"
  style="width: 100%; max-width: 400px; aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 20px; overflow: hidden;"
></div>

YVPlayer.init("shorts-player", {
  defaultId: "YlyI2jmHEYc", // YouTube Short Video ID
  shorts: true,             // Enables 9:16 vertical ratio & streamlined controls
  theme: "red",
  autoplay: true
});

// Runtime toggle
YVPlayer.setShortsMode("shorts-player", true);

<!-- Hero Section with Ambient Video Background -->
<div class="hero-container" style="position: relative; overflow: hidden; min-height: 480px;">
  
  <!-- 1. Ambient Video Layer (Zero controls, automated loop) -->
  <div 
    data-yv-video="aqz-KE-bpKQ" 
    data-yv-background="true"
    style="position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0.65;"
  ></div>

  <!-- 2. Optional Tint / Scrim Layer -->
  <div style="position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 2;"></div>

  <!-- 3. Your Foreground Content (Interactive buttons, headings, text) -->
  <div class="hero-content" style="position: relative; z-index: 3; padding: 60px 24px; text-align: center;">
    <h1>Welcome to Next-Gen Web Video</h1>
    <p>High-performance HTML5 video player built for modern developer workflows.</p>
    <button class="btn-primary">Get Started Now</button>
  </div>

</div>

YVPlayer.init("hero-bg-player", {
  defaultId: "aqz-KE-bpKQ",
  background: true, // Enables muted, looping, zero controls ambient mode
  autoplay: true
});

// Runtime toggle
YVPlayer.setBackgroundMode("hero-bg-player", true); // Enable ambient background
YVPlayer.setBackgroundMode("hero-bg-player", false); // Restore interactive controls

// ============================================================
// Cloudflare Worker: YouTube Stream & Storyboard Edge Proxy
// ============================================================
export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);

    // Handle CORS preflight
    if (request.method === "OPTIONS") {
      return new Response(null, {
        headers: {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET, HEAD, OPTIONS",
          "Access-Control-Allow-Headers": "Range, Content-Type",
          "Access-Control-Max-Age": "86400"
        }
      });
    }

    const videoId = url.searchParams.get("id");
    if (!videoId || !/^[a-zA-Z0-9_-]{11}$/.test(videoId)) {
      return new Response(JSON.stringify({ success: false, error: "Invalid video ID" }), {
        status: 400,
        headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" }
      });
    }

    // Proxy Range requests to raw YouTube streams
    if (url.pathname === "/api/stream") {
      const clientRange = request.headers.get("Range");
      const headers = new Headers({
        "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/147.0.0.0 Safari/537.36"
      });
      if (clientRange) headers.set("Range", clientRange);

      const upstream = await fetch(streamUrl, { headers });
      const respHeaders = new Headers(upstream.headers);
      respHeaders.set("Access-Control-Allow-Origin", "*");
      return new Response(upstream.body, { status: upstream.status, headers: respHeaders });
    }
  }
};

YVPlayer.init("video-stage", {
  defaultId: "M7lc1UVf-VE",
  proxyProvider: "piped",
  pipedInstance: "https://pipedapi.kavin.rocks", // Optional custom instance
  pipMode: "dual"
});

YVPlayer.init("video-stage", {
  defaultId: "M7lc1UVf-VE",
  proxyProvider: "invidious",
  invidiousInstance: "https://inv.tux.pizza"
});

YVPlayer.init("video-stage", {
  defaultId: "M7lc1UVf-VE",
  proxyProvider: "cobalt",
  cobaltInstance: "https://api.cobalt.tools"
});

# 1. Install yt-dlp dependency
pip install yt-dlp

# 2. Launch the multi-threaded proxy server
python demo/server.py

[Unit]
Description=YVPlayer Stream Proxy & Demo Server
After=network.target

[Service]
Type=simple
User=www-data
WorkingDirectory=/var/www/yvplayer
ExecStart=/usr/bin/python3 demo/server.py
Restart=always
RestartSec=3
Environment=PORT=3000

[Install]
WantedBy=multi-user.target