This commit is contained in:
4DBug
2026-08-26 18:28:49 -05:00
parent 9e93df5961
commit 145851a32e
15 changed files with 1215 additions and 272 deletions
+66 -45
View File
@@ -13,22 +13,65 @@
<header class="site-header">
<div class="container site-header__inner">
<a class="brand" href="index.html">bug<span>.tv</span></a>
<a class="site-header__nav" href="index.html">Home</a>
<a class="site-header__nav" href="search.html">Search</a>
<span class="site-header__spacer"></span>
<button class="btn btn--ghost btn--sm" id="settingsBtn" type="button">Settings</button>
<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="container page" id="content">
<section class="watch-hero" id="hero" aria-busy="true"></section>
<main class="page" id="content">
<section id="hero" class="watch-hero container"></section>
<section id="playerSection">
<div class="player-wrap">
<video id="video" controls playsinline></video>
<div class="player-status" id="playerStatus">
<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>Getting ready</p>
<p>Warming up</p>
</div>
</div>
@@ -36,23 +79,24 @@
<span class="watch-toolbar__source" id="sourceLabel"></span>
<span id="resumeNote"></span>
<span class="watch-toolbar__spacer"></span>
<button class="btn btn--sm" id="changeSourceBtn" type="button" hidden>Change source</button>
</div>
<div class="sources" id="sourcesPanel" hidden>
<div class="sources__head">Sources <span id="sourcesCount"></span></div>
<div class="sources__head">Sources · <span id="sourcesCount"></span></div>
<div id="sourceList"></div>
</div>
</section>
<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>
<button class="btn btn--sm" id="prevEpisode" type="button">Previous</button>
<button class="btn btn--sm" id="nextEpisode" type="button">Next</button>
</div>
<div class="episode-grid" id="episodeGrid"></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>
@@ -63,29 +107,6 @@
</div>
</footer>
<div class="modal-overlay" id="settingsModal" hidden>
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="settingsTitle">
<div class="modal__head">
<h2 class="modal__title" id="settingsTitle">Settings</h2>
<button class="btn btn--ghost btn--sm" id="settingsClose" type="button">Close</button>
</div>
<div class="modal__body">
<div>
<label class="field-label" for="apiBaseInput">API base URL</label>
<input class="field" id="apiBaseInput" type="url" placeholder="https://…">
<p class="modal__hint">
All requests go to this API. You can also override it for one session
by adding <code>?api=https://…</code> to any page URL.
</p>
</div>
</div>
<div class="modal__actions">
<button class="btn" id="apiBaseReset" type="button">Reset to default</button>
<button class="btn btn--primary" id="apiBaseSave" type="button">Save</button>
</div>
</div>
</div>
<script src="vendor/hls.min.js"></script>
<script src="js/util.js"></script>
<script src="js/config.js"></script>