enki
76979d055b
Some checks are pending
CI Pipeline / Run Tests (push) Waiting to run
CI Pipeline / Lint Code (push) Waiting to run
CI Pipeline / Security Scan (push) Waiting to run
CI Pipeline / Build Docker Images (push) Blocked by required conditions
CI Pipeline / E2E Tests (push) Blocked by required conditions
156 lines
7.7 KiB
HTML
156 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Video Player - Blossom Gateway</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<script src="/static/hls.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header class="modern-header">
|
|
<div class="header-content">
|
|
<div class="header-left">
|
|
<div class="header-title">
|
|
<h1 class="gradient-text">🎥 Video Player</h1>
|
|
<p class="header-subtitle">High-Performance Streaming Platform</p>
|
|
</div>
|
|
</div>
|
|
<nav class="header-nav">
|
|
<a href="/" class="nav-link">← Back to Gateway</a>
|
|
<button id="theme-toggle" onclick="toggleTheme()" class="theme-btn">🌓</button>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="player-section">
|
|
<div class="video-container modern-card">
|
|
<video id="video-player" controls poster="/static/video-poster.svg">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
|
|
<div id="quality-selector" class="quality-selector hidden">
|
|
<label>Quality:</label>
|
|
<select id="quality-select">
|
|
<option value="auto">Auto</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="video-info modern-card">
|
|
<div class="video-details">
|
|
<h2 id="video-title" class="video-title">Loading...</h2>
|
|
<div class="video-meta">
|
|
<div class="meta-item">
|
|
<span class="meta-label">Size:</span>
|
|
<span id="video-size" class="meta-value">--</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="meta-label">Duration:</span>
|
|
<span id="video-duration" class="meta-value">--</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="meta-label">Hash:</span>
|
|
<span id="video-hash" class="meta-value hash-text">--</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="video-actions">
|
|
<button onclick="copyShareLink()" class="modern-btn primary">
|
|
📋 Copy Share Link
|
|
</button>
|
|
<button onclick="downloadVideo()" class="modern-btn secondary">
|
|
⬇️ Download
|
|
</button>
|
|
<button onclick="getTorrent()" class="modern-btn secondary">
|
|
🧲 Get Torrent
|
|
</button>
|
|
<button onclick="openWebSeed()" class="modern-btn secondary">
|
|
🌐 WebSeed
|
|
</button>
|
|
<button onclick="toggleP2P()" class="modern-btn secondary" id="p2p-toggle">
|
|
🔗 Enable P2P
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sharing-section modern-card">
|
|
<h3 class="section-title">🔗 Share This Video</h3>
|
|
<div class="share-links">
|
|
<div class="link-item">
|
|
<label class="link-label">Direct Link:</label>
|
|
<div class="link-input-group">
|
|
<input type="text" id="direct-link" readonly onclick="this.select()" class="link-input">
|
|
<button onclick="copyToClipboard('direct-link')" class="copy-btn">Copy</button>
|
|
</div>
|
|
</div>
|
|
<div class="link-item">
|
|
<label class="link-label">HLS Stream:</label>
|
|
<div class="link-input-group">
|
|
<input type="text" id="hls-link" readonly onclick="this.select()" class="link-input">
|
|
<button onclick="copyToClipboard('hls-link')" class="copy-btn">Copy</button>
|
|
</div>
|
|
</div>
|
|
<div class="link-item">
|
|
<label class="link-label">Torrent File:</label>
|
|
<div class="link-input-group">
|
|
<input type="text" id="torrent-link" readonly onclick="this.select()" class="link-input">
|
|
<button onclick="copyToClipboard('torrent-link')" class="copy-btn">Copy</button>
|
|
</div>
|
|
</div>
|
|
<div class="link-item">
|
|
<label class="link-label">Magnet Link:</label>
|
|
<div class="link-input-group">
|
|
<input type="text" id="magnet-link" readonly onclick="this.select()" class="link-input">
|
|
<button onclick="copyToClipboard('magnet-link')" class="copy-btn">Copy</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="playback-info modern-card">
|
|
<h3 class="section-title">📈 Playback Statistics</h3>
|
|
<div class="stats-grid">
|
|
<div class="stat-item">
|
|
<div class="stat-label">Current Quality:</div>
|
|
<div id="current-quality" class="stat-value">--</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">Buffer Health:</div>
|
|
<div id="buffer-health" class="stat-value">--</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">Network Speed:</div>
|
|
<div id="network-speed" class="stat-value">--</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">Dropped Frames:</div>
|
|
<div id="dropped-frames" class="stat-value">--</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">P2P Peers:</div>
|
|
<div id="p2p-peers" class="stat-value">0</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">P2P Download:</div>
|
|
<div id="p2p-download" class="stat-value">0 KB/s</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">P2P Upload:</div>
|
|
<div id="p2p-upload" class="stat-value">0 KB/s</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<div id="toast-container" class="toast-container"></div>
|
|
|
|
<script src="/static/player.js"></script>
|
|
</body>
|
|
</html> |