Mercurial

diff mrjunejune/src/tools/hls_player/index.html @ 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 543df0fe7168
children
line wrap: on
line diff
--- a/mrjunejune/src/tools/hls_player/index.html	Tue Aug 04 16:49:11 2026 -0700
+++ b/mrjunejune/src/tools/hls_player/index.html	Wed Aug 05 05:25:40 2026 -0700
@@ -16,17 +16,23 @@
       <form id="hlsForm" class="hls-form">
         <label for="hlsUrl">Playlist URL</label>
         <div class="hls-url-row">
-          <input
-            id="hlsUrl"
-            name="url"
-            type="text"
-            inputmode="url"
-            value="/public/hls-sample/h264-ts-stream.m3u8"
-            placeholder="https://example.com/stream.m3u8"
-            required
-          />
-          <button type="submit">Load</button>
-          <button id="sampleButton" type="button">Sample</button>
+          <zen-input appearance="plain" size="md">
+            <input
+              id="hlsUrl"
+              name="url"
+              type="text"
+              inputmode="url"
+              value="/public/hls-sample/h264-ts-stream.m3u8"
+              placeholder="https://example.com/stream.m3u8"
+              required
+            />
+          </zen-input>
+          <zen-button appearance="plain" size="md">
+            <button type="submit">Load</button>
+          </zen-button>
+          <zen-button appearance="plain" size="md">
+            <button id="sampleButton" type="button">Sample</button>
+          </zen-button>
         </div>
       </form>
 
@@ -36,21 +42,25 @@
         <div class="hls-local-actions">
           <label class="hls-file-button">
             Choose HLS files
-            <input
-              id="hlsFiles"
-              type="file"
-              accept=".m3u8,.m4s,.mp4,.ts,.aac,.vtt,.key,application/vnd.apple.mpegurl"
-              multiple
-            />
+            <zen-input appearance="plain" size="md">
+              <input
+                id="hlsFiles"
+                type="file"
+                accept=".m3u8,.m4s,.mp4,.ts,.aac,.vtt,.key,application/vnd.apple.mpegurl"
+                multiple
+              />
+            </zen-input>
           </label>
           <label class="hls-file-button">
             Choose HLS folder
-            <input
-              id="hlsFolder"
-              type="file"
-              webkitdirectory
-              multiple
-            />
+            <zen-input appearance="plain" size="md">
+              <input
+                id="hlsFolder"
+                type="file"
+                webkitdirectory
+                multiple
+              />
+            </zen-input>
           </label>
         </div>
       </fieldset>