/home/mrjunejune/zenbu: mrjunejune/test/snapshots/tools_hls

annotate mrjunejune/test/snapshots/tools_hls_player.snapshot @ 263:ee04e4e69fed

Add functional JRPG frame and tools Add full-screen background_2 apertures, functional frame chrome, card-driven details, dual-window tools, live conversion workflows, and bounded cleanup for generated downloads. Co-authored-by: Copilot <[email protected]>

author	MrJuneJune <mrjunejune@users.noreply.github.com>
date	Thu, 06 Aug 2026 11:31:30 -0700
parents	60a876c4587a
children

rev	line source
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	1 <!doctype html>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	2 <html lang="en">
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	3 <head>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	4 <meta charset="UTF-8">
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	6 <meta name="theme-color" content="#f7f3e8">
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	7 <link rel="icon" type="image/svg+xml" href="/public/epi_all_colors.svg">
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	8 <link rel="manifest" href="/public/manifest.json">
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	9 <link rel="apple-touch-icon" href="/public/epi_all_colors.svg">
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	10
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	11 <link rel="preload" href="/public/fonts/Roboto-Regular.ttf" as="font" crossorigin>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	12 <link rel="preload" href="/public/fonts/Roboto-Thin.ttf"as="font" crossorigin>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	13
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	14 <!-- <link rel="preload" href="/public/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin> -->
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	15 <!-- <link rel="preload" href="/public/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin> -->
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	16
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	17 <!-- <link rel="preload" href="/public/fonts/more-sugar.extras.otf" as="font" type="font/otf" crossorigin> -->
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	18 <link rel="preload" href="/public/fonts/more-sugar.regular.otf" as="font" type="font/otf" crossorigin>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	19 <link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	20 <link rel="preload" href="/public/epi_all_colors.svg" as="image">
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	21
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	22 <link rel="stylesheet" href="/public/design-system/styles/tokens.css" />
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	23 <link rel="stylesheet" href="/public/design-system/styles/themes.css" />
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	24 <link rel="preload" href="/base.css" as="style" />
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	25 <link rel="stylesheet" href="/base.css" />
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	26 <link rel="stylesheet" href="/public/design-system/styles/components.css" />
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	27 <script
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	28 type="module"
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	29 src="/public/design-system/components/index.js"
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	30 ></script>
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	31
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	32 <script src="/public/pwa-register.js" defer></script>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	33
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	34 <title>HLS Player - MrJuneJune</title>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	35 <link rel="stylesheet" href="/tools/hls_player/index.css" />
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	36 <script src="/public/hls.min.js" defer></script>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	37 <script src="/tools/hls_player/hls-player.js" defer></script>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	38 </head>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	39 <body>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	40 <style>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	41 :root {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	42 --header-background: var(--white);
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	43 --header-color: var(--black);
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	44 --link-hover-accent: var(--awesome);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	45 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	46
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	47 #themeControl {
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	48 position: fixed;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	49 top: 20px;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	50 left: 20px;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	51 z-index: 1000;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	52 transition: transform 0.2s ease;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	53 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	54
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	55 #themeControl:hover {
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	56 transform: scale(1.05);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	57 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	58
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	59 #themeToggle {
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	60 display: flex;
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	61 flex-direction: column;
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	62 padding: 0;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	63 border: 0;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	64 background: transparent;
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	65 }
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	66
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	67 /* Professional header */
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	68 header {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	69 margin: auto;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	70 padding: 1.5em 1em;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	71 font-family: "More", sans-serif;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	72 width: 720px;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	73 max-width: calc(100% - 2em);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	74 text-align: center;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	75 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	76
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	77 header h1 {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	78 margin: 0;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	79 font-size: 1.8em;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	80 font-weight: 700;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	81 letter-spacing: -0.5px;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	82 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	83
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	84 header h1 a {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	85 text-decoration: none;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	86 color: var(--header-color);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	87 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	88
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	89 header h1 a::before {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	90 display: none;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	91 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	92
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	93 /* Mobile responsiveness */
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	94 @media (max-width: 720px) {
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	95 #themeControl {
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	96 top: 15px;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	97 left: 15px;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	98 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	99
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	100 header {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	101 padding: 1em;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	102 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	103
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	104 header h1 {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	105 font-size: 1.5em;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	106 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	107 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	108
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	109 @media (max-width: 480px) {
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	110 #themeControl {
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	111 top: 10px;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	112 left: 10px;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	113 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	114
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	115 #themeToggle img {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	116 height: 40px;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	117 width: 40px;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	118 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	119
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	120 header h1 {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	121 font-size: 1.3em;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	122 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	123 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	124
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	125 #logo {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	126 width: 300px;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	127 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	128
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	129 /* 1. DEFINE THE DEFAULTS (Light Mode) */
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	130 :root {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	131 --logo-invert: invert(0);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	132 --epi-grayscale: grayscale(0) brightness(1);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	133 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	134
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	135 /* 2. MANUAL DARK OVERRIDE */
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	136 html[data-zen-theme="ink"] {
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	137 --logo-invert: invert(1);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	138 --epi-grayscale: grayscale(1);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	139 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	140
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	141 /* 3. MANUAL LIGHT OVERRIDE */
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	142 html[data-zen-theme="paper"] {
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	143 --logo-invert: invert(0);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	144 --epi-grayscale: brightness(2.9) grayscale(1);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	145 }
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	146
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	147 html[data-zen-theme="playful"] {
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	148 --logo-invert: invert(0);
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	149 --epi-grayscale: saturate(1.25);
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	150 }
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	151
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	152 /* 4. SYSTEM PREFERENCE */
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	153 @media (prefers-color-scheme: dark) {
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	154 :root:not([data-zen-theme]) {
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	155 --logo-invert: invert(1);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	156 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	157 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	158
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	159 /* 5. APPLY TO ELEMENTS */
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	160 #logo {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	161 -webkit-filter: var(--logo-invert);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	162 filter: var(--logo-invert);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	163 transition: filter 0.3s ease;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	164 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	165
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	166 .epi-logo {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	167 -webkit-filter: var(--epi-grayscale);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	168 filter: var(--epi-grayscale);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	169 transition: filter 0.3s ease;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	170 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	171 </style>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	172
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	173 <zen-button id="themeControl" appearance="plain" size="xl">
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	174 <button
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	175 id="themeToggle"
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	176 type="button"
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	177 aria-label="Change site theme"
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	178 >
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	179 <img
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	180 id="epiChan"
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	181 class="epi-logo"
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	182 alt=""
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	183 src="/public/epi_all_colors.svg"
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	184 height="50"
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	185 width="50"
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	186 >
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	187 <span id="themeName" class="zen-visually-hidden" aria-live="polite">Auto</span>
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	188 </button>
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	189 </zen-button>
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	190
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	191 <header>
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	192 <h1><a href="/" data-zen-link-effect="none">MrJuneJune</a></h1>
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	193 </header>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	194 <script src="/index.js"></script>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	195
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	196 <main>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	197 <h1>Online HLS Player</h1>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	198 <p>Load an HLS playlist from a URL, or try the sample stream bundled with this site.</p>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	199
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	200 <form id="hlsForm" class="hls-form">
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	201 <label for="hlsUrl">Playlist URL</label>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	202 <div class="hls-url-row">
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	203 <zen-input appearance="plain" size="md">
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	204 <input
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	205 id="hlsUrl"
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	206 name="url"
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	207 type="text"
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	208 inputmode="url"
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	209 value="/public/hls-sample/h264-ts-stream.m3u8"
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	210 placeholder="https://example.com/stream.m3u8"
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	211 required
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	212 />
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	213 </zen-input>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	214 <zen-button appearance="plain" size="md">
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	215 <button type="submit">Load</button>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	216 </zen-button>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	217 <zen-button appearance="plain" size="md">
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	218 <button id="sampleButton" type="button">Sample</button>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	219 </zen-button>
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	220 </div>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	221 </form>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	222
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	223 <fieldset class="hls-local-picker">
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	224 <legend>Local HLS</legend>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	225 <p>Select the playlist together with every init and segment file it references.</p>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	226 <div class="hls-local-actions">
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	227 <label class="hls-file-button">
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	228 Choose HLS files
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	229 <zen-input appearance="plain" size="md">
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	230 <input
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	231 id="hlsFiles"
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	232 type="file"
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	233 accept=".m3u8,.m4s,.mp4,.ts,.aac,.vtt,.key,application/vnd.apple.mpegurl"
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	234 multiple
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	235 />
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	236 </zen-input>
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	237 </label>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	238 <label class="hls-file-button">
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	239 Choose HLS folder
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	240 <zen-input appearance="plain" size="md">
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	241 <input
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	242 id="hlsFolder"
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	243 type="file"
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	244 webkitdirectory
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	245 multiple
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	246 />
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	247 </zen-input>
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	248 </label>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	249 </div>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	250 </fieldset>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	251
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	252 <div class="hls-player-shell">
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	253 <video id="hlsVideo" controls playsinline preload="metadata"></video>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	254 <p id="hlsStatus" class="hls-status" role="status" aria-live="polite">Ready to load a playlist.</p>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	255 </div>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	256
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	257 <dl id="hlsDetails" class="hls-details" hidden>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	258 <div>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	259 <dt>Playback</dt>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	260 <dd data-detail="mode">-</dd>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	261 </div>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	262 <div>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	263 <dt>Segments</dt>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	264 <dd data-detail="segments">-</dd>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	265 </div>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	266 <div>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	267 <dt>Duration</dt>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	268 <dd data-detail="duration">-</dd>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	269 </div>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	270 <div>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	271 <dt>Codec</dt>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	272 <dd data-detail="codecs">-</dd>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	273 </div>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	274 </dl>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	275
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	276 <section class="hls-notes">
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	277 <h2>Notes</h2>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	278 <ul>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	279 <li>Remote playlists must allow cross-origin requests.</li>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	280 <li>Local loading stays in your browser; selected files are not uploaded.</li>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	281 <li>Chrome, Edge, and Firefox support MPEG-TS, fragmented MP4, live, and adaptive HLS through hls.js.</li>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	282 <li>Safari uses native HLS playback when available.</li>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	283 </ul>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	284 </section>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	285 </main>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	286 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	287 <small>© 2026 June Park</small>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	288 </div>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	289
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	290 </body>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: diff changeset	291 </html>

Mercurial

annotate mrjunejune/test/snapshots/tools_hls_player.snapshot @ 263:ee04e4e69fed