This commit is contained in:
4DBug
2026-08-27 11:10:56 -05:00
parent b30b4fd8ed
commit daea02d0fc
6 changed files with 592 additions and 371 deletions
+45 -35
View File
@@ -4,12 +4,12 @@
<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=20260826">
<link rel="stylesheet" href="css/base.css?v=20260826">
<link rel="stylesheet" href="css/components.css?v=20260826">
<link rel="stylesheet" href="css/pages.css?v=20260826">
<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=20260827">
</head>
<body>
<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>
@@ -28,17 +28,40 @@
</div>
</header>
<main class="page" id="content">
<section id="hero" class="watch-hero container"></section>
<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="playerSection" class="container">
<div class="player-wrap" id="playerWrap">
<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>
<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>
@@ -90,20 +113,7 @@
<span id="resumeNote"></span>
<span class="watch-toolbar__spacer"></span>
</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>
</div>
<footer class="site-footer">
<div class="container">
@@ -113,13 +123,13 @@
</footer>
<script src="vendor/hls.min.js"></script>
<script src="js/util.js?v=20260826"></script>
<script src="js/config.js?v=20260826"></script>
<script src="js/api.js?v=20260826"></script>
<script src="js/storage.js?v=20260826"></script>
<script src="js/cards.js?v=20260826"></script>
<script src="js/app.js?v=20260826"></script>
<script src="js/player.js?v=20260826"></script>
<script src="js/watch.js?v=20260826"></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=20260827"></script>
</body>
</html>