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">Library</span><span class="subject-meta mono" id="meta"></span></div>
  <div class="actions">

    <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 class="lib-main">
  <p class="lib-intro">Every video an AI showed you in this container. Click one to watch it, from where you left off.</p>
  <ul id="lib" class="list lib-list"></ul>
</main>
<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/icons.js"></script>
<script src="static/ui.js"></script>
<script>
(async () => {
  const st = await UI.api('state'); UI.header(st); UI.initSettings();
  const draw = (items) => {
    const ul = document.getElementById('lib'); ul.innerHTML = '';
    if (!items.length) { ul.innerHTML = '<li class="empty">Nothing yet. An AI runs: adom-video play &lt;file&gt;</li>'; return; }
    items.forEach((x) => {
      const li = document.createElement('li'); if (!x.exists) li.classList.add('gone');
      const a = document.createElement('span'); a.className = 'lib-title'; a.textContent = x.title;
      const p = document.createElement('span'); p.className = 'lib-path mono'; p.textContent = x.path;
      li.append(a, p); li.setAttribute('data-tooltip', x.exists ? 'Watch ' + x.title : 'The file is gone: ' + x.path);
      li.onclick = () => (location.href = 'watch/' + x.id); ul.appendChild(li);
    });
  };
  draw(st.library);
  UI.connect({ library: (d) => draw(d.items), ui: (d) => UI.uiCommon(d) });
})();
</script>
</body>
</html>