Adom Video Player

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Video Player</title>
<link rel="icon" type="image/svg+xml" href="../favicon.svg">
<link rel="stylesheet" href="../static/player.css">
</head>
<body>
<header class="app-header">
  <div class="brand" id="brand" tabindex="0" aria-label="About Video Player">
    <span class="brand-icon" id="brand-icon"></span><span class="app-name">Video Player</span><span class="app-sub">seekable playback</span>
  </div>
  <div class="vsep"></div>
  <div class="subject"><span class="subject-name" id="title">Loading</span><span class="subject-meta mono" id="meta"></span></div>
  <div class="actions">
    <a class="icon-btn" id="download" download aria-label="Download" data-tooltip="Download this file to your computer" data-icon="download"></a>
    <button class="icon-btn" id="copy" aria-label="Copy link" data-tooltip="Copy a link to this player page" data-icon="link"></button>
    <button class="icon-btn" id="sc-btn" aria-label="Keyboard shortcuts" data-icon="keyboard"></button>
    <button class="icon-btn" id="settings-btn" aria-label="Settings" data-tooltip="Settings: autoplay, resume, default speed, where videos open, idle shutdown. Stored on this machine."><img src="../static/icons/settings-cog-outline.svg" width="18" height="18" alt=""></button>
  </div>
</header>
<div class="popover" id="brand-pop"></div>
<main>
  <section class="stage" id="stage"></section>
  <aside>
    <h2>Chapters</h2>
    <ol id="chapters" class="list"><li class="empty">No chapters. An AI adds them with adom-video play --chapters.</li></ol>
    <h2>Library</h2>
    <ul id="library" class="list"></ul>
  </aside>
</main>
<div class="popover sc-pop" id="sc-pop"><table>
        <tr><td>Space or K</td><td>Play or pause</td></tr>
        <tr><td>J / L</td><td>Back or forward 10 seconds</td></tr>
        <tr><td>&#8592; / &#8594;</td><td>Back or forward 5 seconds</td></tr>
        <tr><td>&#8593; / &#8595;</td><td>Volume up or down 5%</td></tr>
        <tr><td>M</td><td>Mute or unmute</td></tr>
        <tr><td>0 to 9</td><td>Jump to 0% to 90%</td></tr>
        <tr><td>Home / End</td><td>Start or end</td></tr>
        <tr><td>, / .</td><td>Previous or next frame (while paused)</td></tr>
        <tr><td>&lt; / &gt;</td><td>Slower or faster (0.25x to 4x)</td></tr>
        <tr><td>Hold the mouse</td><td>2x while held on the video</td></tr>
        <tr><td>Ctrl+&#8592; / Ctrl+&#8594;</td><td>Previous or next chapter</td></tr>
        <tr><td>Shift+N / Shift+P</td><td>Next or previous video in the library</td></tr>
        <tr><td>C</td><td>Captions on or off</td></tr>
        <tr><td>+ / -</td><td>Caption size</td></tr>
        <tr><td>O / W</td><td>Caption text / background opacity</td></tr>
        <tr><td>F or double-click</td><td>Fullscreen</td></tr>
        <tr><td>I</td><td>Picture-in-picture</td></tr>
        <tr><td>H</td><td>Clean frame: hide everything for a screenshot</td></tr>
        <tr><td>R</td><td>Loop</td></tr>
        <tr><td>?</td><td>Shortcuts sheet on the video</td></tr>
        <tr><td>Esc</td><td>Close a menu, leave clean frame, or leave fullscreen</td></tr>
  </table><div class="sc-foot">The same keys as YouTube. Press ? for this list on the video.</div></div>
<dialog id="settings" aria-label="Settings">
  <div class="dlg-head"><h3>Settings</h3><button class="icon-btn" id="settings-close" aria-label="Close settings" data-tooltip="Close settings (Esc)" data-icon="close"></button></div>
  <div class="dlg-body" id="settings-body"></div>
  <footer class="settings-footer">
    <p class="footer-note">Settings are stored on this machine and apply to every video. Restoring returns every option above to its default.</p>
    <button class="restore-btn" id="restore" data-tooltip="Return every setting to its default. Your library and saved positions are kept." data-icon="restore" data-icon-size="16"> Restore defaults</button>
  </footer>
</dialog>

<script src="../static/adom-video.js"></script>
<script src="../static/icons.js"></script>
<script src="../static/ui.js"></script>
<script src="../static/player.js"></script>
</body>
</html>