136 lines
8.8 KiB
HTML
136 lines
8.8 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?v=20260827">
|
|
<link rel="stylesheet" href="css/base.css?v=20260827">
|
|
<link rel="stylesheet" href="css/components.css?v=20260827">
|
|
<link rel="stylesheet" href="css/pages.css?v=20260829">
|
|
</head>
|
|
<body class="watch-page">
|
|
<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 page--watch" id="content">
|
|
<section id="hero" class="watch-hero" aria-labelledby="heroTitle">
|
|
<div id="heroBackdrop" class="watch-hero__backdrop" aria-hidden="true"></div>
|
|
<div class="watch-hero__scrim" aria-hidden="true"></div>
|
|
<div class="watch-hero__inner">
|
|
<img id="heroTitleCard" class="watch-hero__logo" hidden alt="">
|
|
<h1 id="heroTitle" class="watch-hero__title">Loading…</h1>
|
|
<div id="heroMeta" class="watch-hero__meta"></div>
|
|
<div id="heroGenres" class="watch-hero__genres"></div>
|
|
<p id="heroOverview" class="watch-hero__overview"></p>
|
|
<div class="watch-hero__actions">
|
|
<button id="playButton" class="btn btn--primary" type="button">
|
|
<span id="playLabel">Play</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="episodeSection" class="watch-episodes" hidden>
|
|
<div class="container">
|
|
<h2 class="watch-episodes__title">Episodes</h2>
|
|
<div id="seasonTabs" class="season-tabs" role="tablist" aria-label="Seasons"></div>
|
|
<div id="episodeShelf" class="episode-shelf" role="list"></div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div id="playerOverlay" class="player-overlay" hidden>
|
|
<button id="playerClose" class="icon-btn player-overlay__close" type="button" aria-label="Close player">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
<div class="player-wrap" id="playerWrap">
|
|
<video id="video" playsinline preload="metadata"></video>
|
|
|
|
<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="Source 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>
|
|
</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 class="player-sources" id="sourcesPanel" hidden>
|
|
<div class="player-sources__head">
|
|
<span>Sources · <span id="sourcesCount"></span></span>
|
|
<button class="player-sources__close" id="sourcesClose" type="button" aria-label="Close sources">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
<div class="player-sources__list" id="sourceList"></div>
|
|
</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>
|
|
|
|
<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?v=20260827"></script>
|
|
<script src="js/config.js?v=20260827"></script>
|
|
<script src="js/api.js?v=20260827"></script>
|
|
<script src="js/storage.js?v=20260827"></script>
|
|
<script src="js/cards.js?v=20260827"></script>
|
|
<script src="js/app.js?v=20260827"></script>
|
|
<script src="js/player.js?v=20260827"></script>
|
|
<script src="js/watch.js?v=20260829"></script>
|
|
</body>
|
|
</html>
|