Mercurial

comparison mrjunejune/test/snapshots/tools_hls_player.snapshot @ 258:60a876c4587a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 05:25:40 -0700
parents 30c2196d03d4
children
comparison
equal deleted inserted replaced
257:609d3c6aff4e 258:60a876c4587a
55 #themeControl:hover { 55 #themeControl:hover {
56 transform: scale(1.05); 56 transform: scale(1.05);
57 } 57 }
58 58
59 #themeToggle { 59 #themeToggle {
60 display: flex;
60 flex-direction: column; 61 flex-direction: column;
61 min-width: 4.5rem; 62 padding: 0;
62 padding: 0.35rem; 63 border: 0;
63 border-radius: 1.5rem; 64 background: transparent;
64 }
65
66 #themeName {
67 font-family: "More", sans-serif;
68 font-size: 0.65rem;
69 line-height: 1;
70 } 65 }
71 66
72 /* Professional header */ 67 /* Professional header */
73 header { 68 header {
74 margin: auto; 69 margin: auto;
75 padding: 1.5em 1em; 70 padding: 1.5em 1em;
76 font-family: "More", sans-serif; 71 font-family: "More", sans-serif;
77 box-shadow: var(--zen-shadow-sm);
78 width: 720px; 72 width: 720px;
79 max-width: calc(100% - 2em); 73 max-width: calc(100% - 2em);
80 text-align: center; 74 text-align: center;
81 } 75 }
82 76
174 filter: var(--epi-grayscale); 168 filter: var(--epi-grayscale);
175 transition: filter 0.3s ease; 169 transition: filter 0.3s ease;
176 } 170 }
177 </style> 171 </style>
178 172
179 <zen-button id="themeControl" variant="quiet"> 173 <zen-button id="themeControl" appearance="plain" size="xl">
180 <button 174 <button
181 id="themeToggle" 175 id="themeToggle"
182 type="button" 176 type="button"
183 aria-label="Change site theme" 177 aria-label="Change site theme"
184 > 178 >
188 alt="" 182 alt=""
189 src="/public/epi_all_colors.svg" 183 src="/public/epi_all_colors.svg"
190 height="50" 184 height="50"
191 width="50" 185 width="50"
192 > 186 >
193 <span id="themeName" aria-live="polite">Auto</span> 187 <span id="themeName" class="zen-visually-hidden" aria-live="polite">Auto</span>
194 </button> 188 </button>
195 </zen-button> 189 </zen-button>
196 190
197 <header> 191 <header>
198 <h1><a href="/">MrJuneJune</a></h1> 192 <h1><a href="/" data-zen-link-effect="none">MrJuneJune</a></h1>
199 </header> 193 </header>
200 <script src="/index.js"></script> 194 <script src="/index.js"></script>
201 195
202 <main> 196 <main>
203 <h1>Online HLS Player</h1> 197 <h1>Online HLS Player</h1>
204 <p>Load an HLS playlist from a URL, or try the sample stream bundled with this site.</p> 198 <p>Load an HLS playlist from a URL, or try the sample stream bundled with this site.</p>
205 199
206 <form id="hlsForm" class="hls-form"> 200 <form id="hlsForm" class="hls-form">
207 <label for="hlsUrl">Playlist URL</label> 201 <label for="hlsUrl">Playlist URL</label>
208 <div class="hls-url-row"> 202 <div class="hls-url-row">
209 <input 203 <zen-input appearance="plain" size="md">
210 id="hlsUrl" 204 <input
211 name="url" 205 id="hlsUrl"
212 type="text" 206 name="url"
213 inputmode="url" 207 type="text"
214 value="/public/hls-sample/h264-ts-stream.m3u8" 208 inputmode="url"
215 placeholder="https://example.com/stream.m3u8" 209 value="/public/hls-sample/h264-ts-stream.m3u8"
216 required 210 placeholder="https://example.com/stream.m3u8"
217 /> 211 required
218 <button type="submit">Load</button> 212 />
219 <button id="sampleButton" type="button">Sample</button> 213 </zen-input>
214 <zen-button appearance="plain" size="md">
215 <button type="submit">Load</button>
216 </zen-button>
217 <zen-button appearance="plain" size="md">
218 <button id="sampleButton" type="button">Sample</button>
219 </zen-button>
220 </div> 220 </div>
221 </form> 221 </form>
222 222
223 <fieldset class="hls-local-picker"> 223 <fieldset class="hls-local-picker">
224 <legend>Local HLS</legend> 224 <legend>Local HLS</legend>
225 <p>Select the playlist together with every init and segment file it references.</p> 225 <p>Select the playlist together with every init and segment file it references.</p>
226 <div class="hls-local-actions"> 226 <div class="hls-local-actions">
227 <label class="hls-file-button"> 227 <label class="hls-file-button">
228 Choose HLS files 228 Choose HLS files
229 <input 229 <zen-input appearance="plain" size="md">
230 id="hlsFiles" 230 <input
231 type="file" 231 id="hlsFiles"
232 accept=".m3u8,.m4s,.mp4,.ts,.aac,.vtt,.key,application/vnd.apple.mpegurl" 232 type="file"
233 multiple 233 accept=".m3u8,.m4s,.mp4,.ts,.aac,.vtt,.key,application/vnd.apple.mpegurl"
234 /> 234 multiple
235 />
236 </zen-input>
235 </label> 237 </label>
236 <label class="hls-file-button"> 238 <label class="hls-file-button">
237 Choose HLS folder 239 Choose HLS folder
238 <input 240 <zen-input appearance="plain" size="md">
239 id="hlsFolder" 241 <input
240 type="file" 242 id="hlsFolder"
241 webkitdirectory 243 type="file"
242 multiple 244 webkitdirectory
243 /> 245 multiple
246 />
247 </zen-input>
244 </label> 248 </label>
245 </div> 249 </div>
246 </fieldset> 250 </fieldset>
247 251
248 <div class="hls-player-shell"> 252 <div class="hls-player-shell">