121 lines
7.7 KiB
HTML
121 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">
|
|
<title>bug.tv — watch</title>
|
|
<link rel="stylesheet" href="css/tokens.css">
|
|
<link rel="stylesheet" href="css/base.css">
|
|
<link rel="stylesheet" href="css/components.css">
|
|
<link rel="stylesheet" href="css/pages.css">
|
|
</head>
|
|
<body>
|
|
<header class="site-header">
|
|
<div class="container site-header__inner">
|
|
<a class="brand" href="index.html">bug<span>.tv</span></a>
|
|
<nav class="site-header__nav" aria-label="Primary">
|
|
<a href="index.html">Home</a>
|
|
<a href="search.html">Search</a>
|
|
</nav>
|
|
<div class="site-header__actions">
|
|
<a class="icon-btn" href="search.html" aria-label="Search" title="Search">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
|
</a>
|
|
<a class="icon-btn" href="settings.html" aria-label="Settings" title="Settings">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="page" id="content">
|
|
<section id="hero" class="watch-hero container"></section>
|
|
|
|
<section id="playerSection" class="container">
|
|
<div class="player-wrap" id="playerWrap">
|
|
<video id="video" playsinline preload="metadata"></video>
|
|
|
|
<a class="player-back" href="index.html" aria-label="Back to home" title="Back to home">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
|
|
</a>
|
|
|
|
<button class="player-bigplay" id="bigPlay" type="button" aria-label="Play">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>
|
|
</button>
|
|
|
|
<div class="player-controls" id="playerControls">
|
|
<input class="pc-seek" id="pcSeek" type="range" min="0" max="1000" step="1" value="0" aria-label="Seek position">
|
|
<div class="player-controls__bar">
|
|
<button class="pc-btn" id="pcPlay" type="button" aria-label="Play or pause">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>
|
|
</button>
|
|
<button class="pc-btn" id="pcMute" type="button" aria-label="Mute or unmute">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path><path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path></svg>
|
|
</button>
|
|
<input class="pc-vol" id="pcVol" type="range" min="0" max="1" step="0.05" value="1" aria-label="Volume">
|
|
<span class="pc-time" id="pcTime">0:00 / 0:00</span>
|
|
<span class="player-controls__spacer"></span>
|
|
<button class="pc-btn pc-btn--text" id="pcCc" type="button" aria-pressed="false" aria-label="Toggle captions">CC</button>
|
|
<span class="pc-quality" id="pcQuality"></span>
|
|
<button class="pc-btn" id="pcGear" type="button" aria-label="Change source">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
|
|
</button>
|
|
<button class="pc-btn" id="pcPip" type="button" aria-label="Picture in picture">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="14" rx="2"></rect><rect x="12" y="9" width="7" height="5" rx="1" fill="currentColor" stroke="none"></rect></svg>
|
|
</button>
|
|
<button class="pc-btn" id="pcFull" type="button" aria-label="Toggle fullscreen">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="player-status" id="playerStatus" hidden>
|
|
<div class="spinner"></div>
|
|
<p>Warming up…</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="watch-toolbar">
|
|
<span class="watch-toolbar__source" id="sourceLabel"></span>
|
|
<span id="resumeNote"></span>
|
|
<span class="watch-toolbar__spacer"></span>
|
|
</div>
|
|
|
|
<div class="sources" id="sourcesPanel" hidden>
|
|
<div class="sources__head">Sources · <span id="sourcesCount"></span></div>
|
|
<div id="sourceList"></div>
|
|
</div>
|
|
|
|
<section class="episodes" id="episodes" hidden>
|
|
<div class="episodes__toolbar">
|
|
<h2 class="episodes__title">Episodes</h2>
|
|
<select class="field" id="seasonSelect" aria-label="Season"></select>
|
|
<div class="chips">
|
|
<button class="chip" id="prevEpisode" type="button">← Previous</button>
|
|
<button class="chip" id="nextEpisode" type="button">Next →</button>
|
|
</div>
|
|
</div>
|
|
<div class="episode-grid" id="episodeGrid"></div>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="container">
|
|
<span>bug.tv</span>
|
|
<span>API: <a id="apiBaseLabel" href="#" target="_blank" rel="noopener"></a></span>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="vendor/hls.min.js"></script>
|
|
<script src="js/util.js"></script>
|
|
<script src="js/config.js"></script>
|
|
<script src="js/api.js"></script>
|
|
<script src="js/storage.js"></script>
|
|
<script src="js/cards.js"></script>
|
|
<script src="js/app.js"></script>
|
|
<script src="js/player.js"></script>
|
|
<script src="js/watch.js"></script>
|
|
</body>
|
|
</html>
|