Home Explore Help
Register Sign In
av2x
/
yaar
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: c6c1742f04
Branches Tags
yaar
/
web
/
templates
/
index.html

index.html 41 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6. <title>YAAR — YouTube Auto-Archiver and Retagger</title>
    7. 

  7. <style>
    8. 

  8.   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    9. 

  9. 

  10.   :root {
    11. 

  11.     --bg:        #0d0f12;
    12. 

  12.     --bg2:       #13161b;
    13. 

  13.     --bg3:       #1a1e26;
    14. 

  14.     --border:    #252932;
    15. 

  15.     --border2:   #313846;
    16. 

  16.     --text:      #d4d8e2;
    17. 

  17.     --muted:     #636c7e;
    18. 

  18.     --accent:    #4f8ef7;
    19. 

  19.     --accent-bg: #1a2540;
    20. 

  20.     --accent-dim:#2c3f6a;
    21. 

  21.     --green:     #3dd68c;
    22. 

  22.     --green-bg:  #0e2419;
    23. 

  23.     --amber:     #f5a623;
    24. 

  24.     --amber-bg:  #2a1f0a;
    25. 

  25.     --red:       #f05252;
    26. 

  26.     --red-bg:    #2a0e0e;
    27. 

  27.     --mono:      'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    28. 

  28.     --sans:      'Inter', system-ui, sans-serif;
    29. 

  29.     --radius:    6px;
    30. 

  30.   }
    31. 

  31. 

  32.   body { background:var(--bg); color:var(--text); font-family:var(--sans); font-size:14px; line-height:1.6; min-height:100vh; }
    33. 

  33. 

  34.   header {
    35. 

  35.     border-bottom:1px solid var(--border); padding:0 2rem; height:52px;
    36. 

  36.     display:flex; align-items:center; gap:1rem;
    37. 

  37.     position:sticky; top:0; background:var(--bg); z-index:10;
    38. 

  38.   }
    39. 

  39.   .logo { font-family:var(--mono); font-size:15px; font-weight:600; color:var(--accent); letter-spacing:.05em; }
    40. 

  40.   .logo span { color:var(--muted); font-weight:400; font-size:12px; margin-left:.5rem; }
    41. 

  41.   .header-status { margin-left:auto; font-size:12px; color:var(--muted); font-family:var(--mono); }
    42. 

  42.   .dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green); margin-right:6px; animation:pulse 2s infinite; }
    43. 

  43.   @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
    44. 

  44. 

  45.   .layout { display:grid; grid-template-columns:440px 1fr; height:calc(100vh - 52px); }
    46. 

  46. 

  47.   .panel-left { border-right:1px solid var(--border); overflow-y:auto; padding:1.5rem; display:flex; flex-direction:column; gap:1.25rem; }
    48. 

  48.   .panel-right { overflow-y:auto; padding:1.5rem; }
    49. 

  49. 

  50.   .section-label { font-size:10px; font-family:var(--mono); letter-spacing:.12em; color:var(--muted); text-transform:uppercase; margin-bottom:.6rem; }
    51. 

  51. 

  52.   .url-row { display:flex; gap:.5rem; }
    53. 

  53. 

  54.   input[type="text"], input[type="number"], select, textarea {
    55. 

  55.     background:var(--bg2); border:1px solid var(--border2); color:var(--text);
    56. 

  56.     border-radius:var(--radius); padding:.45rem .7rem; font-size:13px;
    57. 

  57.     font-family:var(--sans); width:100%; outline:none; transition:border-color .15s;
    58. 

  58.   }
    59. 

  59.   input:focus, select:focus, textarea:focus { border-color:var(--accent-dim); }
    60. 

  60.   input::placeholder, textarea::placeholder { color:var(--muted); }
    61. 

  61.   select option { background:var(--bg2); }
    62. 

  62. 

  63.   .btn {
    64. 

  64.     padding:.45rem 1rem; border-radius:var(--radius); font-size:13px; font-weight:500;
    65. 

  65.     cursor:pointer; border:none; white-space:nowrap; transition:opacity .15s,transform .1s; font-family:var(--sans);
    66. 

  66.   }
    67. 

  67.   .btn:active { transform:scale(.97); }
    68. 

  68.   .btn:disabled { opacity:.4; cursor:not-allowed; }
    69. 

  69.   .btn-probe { background:var(--bg3); color:var(--text); border:1px solid var(--border2); min-width:32px; }
    70. 

  70.   .btn-probe:hover:not(:disabled) { border-color:var(--accent-dim); }
    71. 

  71.   .btn-primary { background:var(--accent); color:#fff; width:100%; }
    72. 

  72.   .btn-primary:hover:not(:disabled) { opacity:.88; }
    73. 

  73. 

  74.   /* Preview card */
    75. 

  75.   #preview-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:.85rem; display:none; gap:.75rem; }
    76. 

  76.   #preview-card.visible { display:flex; }
    77. 

  77.   #preview-thumb { width:100px; height:56px; object-fit:cover; border-radius:4px; flex-shrink:0; background:var(--bg3); }
    78. 

  78.   .preview-meta { flex:1; min-width:0; }
    79. 

  79.   .preview-title { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px; }
    80. 

  80.   .preview-sub { font-size:11px; color:var(--muted); font-family:var(--mono); }
    81. 

  81. 

  82.   /* Type tabs */
    83. 

  83.   .type-tabs { display:flex; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:3px; }
    84. 

  84.   .type-tab { flex:1; text-align:center; padding:.35rem 0; font-size:12px; cursor:pointer; border-radius:4px; color:var(--muted); transition:all .15s; user-select:none; }
    85. 

  85.   .type-tab.active { background:var(--bg3); color:var(--text); border:1px solid var(--border2); }
    86. 

  86. 

  87.   /* Fields */
    88. 

  88.   .field { display:flex; flex-direction:column; gap:.3rem; }
    89. 

  89.   .field label { font-size:11px; color:var(--muted); }
    90. 

  90.   .row-2 { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
    91. 

  91.   .row-3 { display:grid; grid-template-columns:2fr 1fr 1fr; gap:.6rem; }
    92. 

  92. 

  93.   .type-section { display:none; flex-direction:column; gap:.75rem; }
    94. 

  94.   .type-section.active { display:flex; }
    95. 

  95. 

  96.   hr { border:none; border-top:1px solid var(--border); }
    97. 

  97. 

  98.   /* Folder picker */
    99. 

  99.   .folder-picker { display:flex; flex-direction:column; gap:.5rem; }
    100. 

  100.   .folder-row { display:flex; gap:.5rem; align-items:flex-end; }
    101. 

  101.   .folder-row select { flex:1; }
    102. 

  102.   .folder-row input  { flex:1; }
    103. 

  103.   .folder-hint { font-size:10px; color:var(--muted); font-family:var(--mono); padding:.3rem .4rem; background:var(--bg2); border:1px solid var(--border); border-radius:4px; word-break:break-all; display:none; }
    104. 

  104.   .folder-hint.visible { display:block; }
    105. 

  105. 

  106.   /* Mount banner */
    107. 

  107.   #mount-banner { display:none; font-size:11px; font-family:var(--mono); padding:.45rem .7rem; border-radius:var(--radius); border:1px solid; line-height:1.5; }
    108. 

  108.   #mount-banner.ok    { background:var(--green-bg); color:var(--green); border-color:#1a4030; }
    109. 

  109.   #mount-banner.warn  { background:var(--amber-bg); color:var(--amber); border-color:#4a350a; }
    110. 

  110.   #mount-banner.error { background:var(--red-bg);   color:var(--red);   border-color:#4a1414; }
    111. 

  111.   #mount-banner.visible { display:block; }
    112. 

  112. 

  113.   /* Path preview */
    114. 

  114.   #path-preview { font-size:11px; font-family:var(--mono); color:var(--muted); background:var(--bg2); border:1px solid var(--border); border-radius:4px; padding:.4rem .6rem; word-break:break-all; display:none; }
    115. 

  115.   #path-preview.visible { display:block; }
    116. 

  116. 

  117.   /* Probe status indicator inside URL row */
    118. 

  118.   #probe-status { font-size:11px; font-family:var(--mono); color:var(--muted); white-space:nowrap; align-self:center; min-width:60px; text-align:right; }
    119. 

  119. 

  120.   /* Jobs panel */
    121. 

  121.   .jobs-header { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
    122. 

  122.   .jobs-title { font-size:13px; font-weight:500; font-family:var(--mono); color:var(--muted); }
    123. 

  123.   .badge { font-size:10px; font-family:var(--mono); padding:1px 7px; border-radius:999px; background:var(--bg3); border:1px solid var(--border2); color:var(--muted); }
    124. 

  124.   .jobs-list { display:flex; flex-direction:column; gap:.5rem; }
    125. 

  125. 

  126.   .job-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:.8rem 1rem; transition:border-color .2s; }
    127. 

  127.   .job-card:hover { border-color:var(--border2); }
    128. 

  128.   .job-top { display:flex; align-items:flex-start; gap:.75rem; margin-bottom:.5rem; }
    129. 

  129.   .job-icon { width:28px; height:28px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; font-family:var(--mono); font-weight:600; }
    130. 

  130.   .icon-tv    { background:#0b1a2a; color:#4f8ef7; }
    131. 

  131.   .icon-film  { background:#0c1f14; color:#3dd68c; }
    132. 

  132.   .icon-music { background:#1a0c1f; color:#c084fc; }
    133. 

  133.   .job-info { flex:1; min-width:0; }
    134. 

  134.   .job-title { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px; }
    135. 

  135.   .job-sub { font-size:11px; color:var(--muted); font-family:var(--mono); }
    136. 

  136.   .job-status { font-size:10px; font-family:var(--mono); padding:2px 8px; border-radius:999px; font-weight:500; flex-shrink:0; }
    137. 

  137.   .status-queued  { background:var(--bg3);      color:var(--muted);  border:1px solid var(--border2); }
    138. 

  138.   .status-running { background:var(--accent-bg); color:var(--accent); border:1px solid var(--accent-dim); }
    139. 

  139.   .status-done    { background:var(--green-bg);  color:var(--green);  border:1px solid #1a4030; }
    140. 

  140.   .status-error   { background:var(--red-bg);    color:var(--red);    border:1px solid #4a1414; }
    141. 

  141.   .progress-bar { height:2px; background:var(--border); border-radius:999px; overflow:hidden; margin-top:.5rem; }
    142. 

  142.   .progress-fill { height:100%; background:var(--accent); border-radius:999px; transition:width .5s ease; }
    143. 

  143.   .progress-fill.done  { background:var(--green); }
    144. 

  144.   .progress-fill.error { background:var(--red); }
    145. 

  145.   .job-speed { font-size:10px; color:var(--muted); font-family:var(--mono); margin-top:.35rem; }
    146. 

  146.   .job-error { font-size:11px; color:var(--red); font-family:var(--mono); margin-top:.4rem; background:var(--red-bg); padding:.4rem .6rem; border-radius:4px; word-break:break-all; }
    147. 

  147.   .job-actions { display:flex; gap:.4rem; margin-top:.5rem; justify-content:flex-end; }
    148. 

  148.   .btn-sm { font-size:11px; font-family:var(--mono); padding:2px 10px; border-radius:4px; cursor:pointer; border:1px solid var(--border2); background:var(--bg3); color:var(--muted); transition:color .15s,border-color .15s; }
    149. 

  149.   .btn-sm:hover { color:var(--text); border-color:var(--accent-dim); }
    150. 

  150.   .btn-sm.danger:hover { color:var(--red); border-color:var(--red); }
    151. 

  151. 

  152.   .empty-state { text-align:center; color:var(--muted); padding:3rem 1rem; font-family:var(--mono); font-size:13px; }
    153. 

  153. 

  154.   #toast { position:fixed; bottom:1.5rem; right:1.5rem; background:var(--bg3); border:1px solid var(--border2); color:var(--text); padding:.6rem 1rem; border-radius:var(--radius); font-size:13px; font-family:var(--mono); opacity:0; transform:translateY(8px); transition:all .2s; pointer-events:none; z-index:100; }
    155. 

  155.   #toast.show { opacity:1; transform:translateY(0); }
    156. 

  156.   #toast.success { border-color:var(--green); color:var(--green); }
    157. 

  157.   #toast.error   { border-color:var(--red);   color:var(--red);   }
    158. 

  158. 

  159.   .spinner { display:inline-block; width:12px; height:12px; border:1.5px solid var(--border2); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; vertical-align:middle; }
    160. 

  160.   @keyframes spin { to{transform:rotate(360deg)} }
    161. 

  161. 

  162.   ::-webkit-scrollbar { width:5px; }
    163. 

  163.   ::-webkit-scrollbar-track { background:transparent; }
    164. 

  164.   ::-webkit-scrollbar-thumb { background:var(--border2); border-radius:999px; }
    165. 

  165. </style>
    166. 

  166. </head>
    167. 

  167. <body>
    168. 

  168. 

  169. <header>
    170. 

  170.   <div class="logo">YAAR<span>YouTube Auto-Archiver and Retagger</span></div>
    171. 

  171.   <div class="header-status" id="header-status"><span class="dot"></span>checking…</div>
    172. 

  172. </header>
    173. 

  173. 

  174. <div class="layout">
    175. 

  175. 

  176.   <div class="panel-left">
    177. 

  177. 

  178.     <div id="mount-banner"></div>
    179. 

  179. 

  180.     <!-- URL input -->
    181. 

  181.     <div>
    182. 

  182.       <div class="section-label">YouTube URL</div>
    183. 

  183.       <div class="url-row">
    184. 

  184.         <input type="text" id="url-input" placeholder="Paste a YouTube URL…" autocomplete="off" spellcheck="false">
    185. 

  185.         <button class="btn btn-probe" id="probe-btn" onclick="probeUrl()" title="Re-fetch metadata">↻</button>
    186. 

  186.       </div>
    187. 

  187.       <div id="probe-status" style="margin-top:.35rem;font-size:11px;font-family:var(--mono);color:var(--muted);min-height:16px;"></div>
    188. 

  188.     </div>
    189. 

  189. 

  190.     <!-- Preview card -->
    191. 

  191.     <div id="preview-card">
    192. 

  192.       <img id="preview-thumb" src="" alt="">
    193. 

  193.       <div class="preview-meta">
    194. 

  194.         <div class="preview-title" id="preview-title"></div>
    195. 

  195.         <div class="preview-sub"  id="preview-sub"></div>
    196. 

  196.       </div>
    197. 

  197.     </div>
    198. 

  198. 

  199.     <hr>
    200. 

  200. 

  201.     <!-- Archive type -->
    202. 

  202.     <div>
    203. 

  203.       <div class="section-label">Archive as</div>
    204. 

  204.       <div class="type-tabs">
    205. 

  205.         <div class="type-tab active" data-type="series" onclick="setType('series')">TV series episode</div>
    206. 

  206.         <div class="type-tab"        data-type="movie"  onclick="setType('movie')">Movie</div>
    207. 

  207.         <div class="type-tab"        data-type="music"  onclick="setType('music')">Music track</div>
    208. 

  208.       </div>
    209. 

  209.     </div>
    210. 

  210. 

  211.     <!-- Common fields -->
    212. 

  212.     <div class="field">
    213. 

  213.       <label><span id="title-label">Video title</span></label>
    214. 

  214.       <input type="text" id="title" placeholder="Auto-filled from URL">
    215. 

  215.     </div>
    216. 

  216.     <div class="row-2">
    217. 

  217.       <div class="field">
    218. 

  218.         <label><span id="author-label">Author / Channel</span></label>
    219. 

  219.         <input type="text" id="author" placeholder="Auto-filled">
    220. 

  220.       </div>
    221. 

  221.       <div class="field">
    222. 

  222.         <label>Upload date</label>
    223. 

  223.         <input type="text" id="upload_date" placeholder="YYYY-MM-DD">
    224. 

  224.       </div>
    225. 

  225.     </div>
    226. 

  226. 

  227.     <!-- ── Series type fields ── -->
    228. 

  228.     <div class="type-section active" id="series-fields">
    229. 

  229.       <hr>
    230. 

  230.       <div class="field">
    231. 

  231.         <label>Series name  <span style="color:var(--muted);font-weight:400">(Jellyfin show folder)</span></label>
    232. 

  232.         <div class="folder-row">
    233. 

  233.           <select id="series-folder-select" onchange="onSeriesFolderSelect()">
    234. 

  234.             <option value="">— choose existing —</option>
    235. 

  235.           </select>
    236. 

  236.           <input type="text" id="series" placeholder="or type a new series name" oninput="updatePathPreview()">
    237. 

  237.         </div>
    238. 

  238.       </div>
    239. 

  239.       <div class="row-3">
    240. 

  240.         <div class="field">
    241. 

  241.           <label>Episode title</label>
    242. 

  242.           <input type="text" id="episode_title" placeholder="Defaults to video title">
    243. 

  243.         </div>
    244. 

  244.         <div class="field">
    245. 

  245.           <label>Season</label>
    246. 

  246.           <input type="number" id="season" value="1" min="1" oninput="updatePathPreview()">
    247. 

  247.         </div>
    248. 

  248.         <div class="field">
    249. 

  249.           <label>Episode</label>
    250. 

  250.           <input type="number" id="episode" value="1" min="1">
    251. 

  251.         </div>
    252. 

  252.       </div>
    253. 

  253.     </div>
    254. 

  254. 

  255.     <!-- ── Movie type fields ── -->
    256. 

  256.     <div class="type-section" id="movie-fields">
    257. 

  257.       <hr>
    258. 

  258.       <div class="field">
    259. 

  259.         <label>Year  <span style="color:var(--muted);font-weight:400">(appended to filename for Jellyfin matching)</span></label>
    260. 

  260.         <input type="text" id="year" placeholder="e.g. 2024" oninput="updatePathPreview()">
    261. 

  261.       </div>
    262. 

  262.     </div>
    263. 

  263. 

  264.     <!-- ── Music type fields ── -->
    265. 

  265.     <div class="type-section" id="music-fields">
    266. 

  266.       <hr>
    267. 

  267.       <div class="field">
    268. 

  268.         <label>Artist  <span style="color:var(--muted);font-weight:400">(Jellyfin artist folder)</span></label>
    269. 

  269.         <div class="folder-row">
    270. 

  270.           <select id="artist-folder-select" onchange="onArtistFolderSelect()">
    271. 

  271.             <option value="">— choose existing —</option>
    272. 

  272.           </select>
    273. 

  273.           <input type="text" id="artist" placeholder="or type a new artist name" oninput="updatePathPreview()">
    274. 

  274.         </div>
    275. 

  275.       </div>
    276. 

  276.       <div class="row-2">
    277. 

  277.         <div class="field">
    278. 

  278.           <label>Album  <span style="color:var(--muted);font-weight:400">(optional)</span></label>
    279. 

  279.           <input type="text" id="album" placeholder="Leave blank for flat artist folder" oninput="updatePathPreview()">
    280. 

  280.         </div>
    281. 

  281.         <div class="field">
    282. 

  282.           <label>Track number  <span style="color:var(--muted);font-weight:400">(optional)</span></label>
    283. 

  283.           <input type="number" id="track" min="1" placeholder="e.g. 3" oninput="updatePathPreview()">
    284. 

  284.         </div>
    285. 

  285.       </div>
    286. 

  286.       <div class="row-2">
    287. 

  287.         <div class="field">
    288. 

  288.           <label>Year</label>
    289. 

  289.           <input type="text" id="music_year" placeholder="e.g. 2024" oninput="updatePathPreview()">
    290. 

  290.         </div>
    291. 

  291.         <div class="field">
    292. 

  292.           <label>Genre  <span style="color:var(--muted);font-weight:400">(optional)</span></label>
    293. 

  293.           <input type="text" id="genre" placeholder="e.g. Electronic">
    294. 

  294.         </div>
    295. 

  295.       </div>
    296. 

  296.       <div class="field">
    297. 

  297.         <label>
    298. 

  298.           Audio format
    299. 

  299.           <span style="color:var(--muted);font-weight:400" id="format-hint">
    300. 

  300.             (M4A/AAC — universal Jellyfin direct-play)
    301. 

  301.           </span>
    302. 

  302.         </label>
    303. 

  303.         <select id="format" onchange="onFormatChange()">
    304. 

  304.           <option value="m4a" selected>M4A (AAC in MP4 container, lossy — best Jellyfin compatibility)</option>
    305. 

  305.           <option value="aac">AAC (raw ADTS, lossy — same codec as M4A, leaner container)</option>
    306. 

  306.           <option value="opus">Opus (lossy, smaller files at same quality)</option>
    307. 

  307.           <option value="mp3">MP3 (lossy, universal compatibility incl. old hardware)</option>
    308. 

  308.           <option value="wav">WAV (uncompressed PCM — massive files, archival use only)</option>
    309. 

  309.           <option value="flac">FLAC (lossless container — see note)</option>
    310. 

  310.         </select>
    311. 

  311.       </div>
    312. 

  312.     </div>
    313. 

  313. 

  314.     <!-- Path preview -->
    315. 

  315.     <div id="path-preview"></div>
    316. 

  316. 

  317.     <hr>
    318. 

  318.     <button class="btn btn-primary" id="archive-btn" onclick="submitJob()">Archive video</button>
    319. 

  319. 

  320.   </div>
    321. 

  321. 

  322.   <!-- Right panel: queue -->
    323. 

  323.   <div class="panel-right">
    324. 

  324.     <div class="jobs-header">
    325. 

  325.       <div class="jobs-title">archive queue</div>
    326. 

  326.       <div class="badge" id="job-count">0 jobs</div>
    327. 

  327.       <div style="margin-left:auto; display:flex; gap:.4rem">
    328. 

  328.         <button class="btn-sm" id="clear-finished-btn" onclick="clearFinished()">✕ clear finished</button>
    329. 

  329.         <button class="btn-sm" onclick="refreshJobs()">↻ refresh</button>
    330. 

  330.       </div>
    331. 

  331.     </div>
    332. 

  332.     <div class="jobs-list" id="jobs-list">
    333. 

  333.       <div class="empty-state">no jobs yet — paste a URL to get started</div>
    334. 

  334.     </div>
    335. 

  335.   </div>
    336. 

  336. 

  337. </div>
    338. 

  338. 

  339. <div id="toast"></div>
    340. 

  340. 

  341. <script>
    342. 

  342. // ── State ─────────────────────────────────────────────────────────────────────
    343. 

  343. let currentType = 'series';
    344. 

  344. let probeData   = {};
    345. 

  345. let pollTimer   = null;
    346. 

  346. let mountInfo   = { root: '/nas/jellyfin', mounted: null, writable: null, subdirs: {} };
    347. 

  347. let browseData  = { Movies: [], Shows: [], Music: [] };
    348. 

  348. 

  349. // ── Init ──────────────────────────────────────────────────────────────────────
    350. 

  350. (async function init() {
    351. 

  351.   await Promise.all([checkMount(), loadBrowseData()]);
    352. 

  352.   loadJobs();
    353. 

  353. })();
    354. 

  354. 

  355. // ── Mount check ───────────────────────────────────────────────────────────────
    356. 

  356. async function checkMount() {
    357. 

  357.   try {
    358. 

  358.     const data = await fetch('/api/mounts').then(r => r.json());
    359. 

  359.     mountInfo  = data;
    360. 

  360.     const banner = document.getElementById('mount-banner');
    361. 

  361.     const hdr    = document.getElementById('header-status');
    362. 

  362. 

  363.     if (!data.mounted) {
    364. 

  364.       banner.className   = 'visible error';
    365. 

  365.       banner.textContent = `✕  ${data.root} not found — attach Proxmox bind-mount (mp0) and restart.`;
    366. 

  366.       hdr.innerHTML      = '<span class="dot" style="background:var(--red)"></span>mount missing';
    367. 

  367.       document.getElementById('archive-btn').disabled = true;
    368. 

  368.     } else if (!data.writable) {
    369. 

  369.       banner.className   = 'visible warn';
    370. 

  370.       banner.textContent = `⚠  ${data.root} is read-only — check LXC mount permissions.`;
    371. 

  371.       hdr.innerHTML      = '<span class="dot" style="background:var(--amber)"></span>read-only';
    372. 

  372.       document.getElementById('archive-btn').disabled = true;
    373. 

  373.     } else {
    374. 

  374.       const missing = ['Movies','Shows','Music'].filter(d => !data.subdirs[d]?.exists);
    375. 

  375.       if (missing.length) {
    376. 

  376.         banner.className   = 'visible warn';
    377. 

  377.         banner.textContent = `⚠  ${data.root} writable. Missing subdirs (will be created): ${missing.join(', ')}`;
    378. 

  378.         hdr.innerHTML      = '<span class="dot" style="background:var(--amber)"></span>' + data.root;
    379. 

  379.       } else {
    380. 

  380.         banner.className   = 'visible ok';
    381. 

  381.         banner.textContent = `✓  ${data.root}  —  Movies/  Shows/  Music/  detected`;
    382. 

  382.         hdr.innerHTML      = '<span class="dot"></span>' + data.root;
    383. 

  383.       }
    384. 

  384.       document.getElementById('archive-btn').disabled = false;
    385. 

  385.     }
    386. 

  386.     updatePathPreview();
    387. 

  387.   } catch(e) { console.warn('Mount check failed:', e); }
    388. 

  388. }
    389. 

  389. 

  390. // ── Browse (folder population) ────────────────────────────────────────────────
    391. 

  391. async function loadBrowseData() {
    392. 

  392.   try {
    393. 

  393.     browseData = await fetch('/api/browse').then(r => r.json());
    394. 

  394.     populateFolderSelects();
    395. 

  395.   } catch(e) { console.warn('Browse failed:', e); }
    396. 

  396. }
    397. 

  397. 

  398. function populateFolderSelects() {
    399. 

  399.   populateSelect('series-folder-select', browseData.Shows || [], '— choose existing —');
    400. 

  400.   populateSelect('artist-folder-select', browseData.Music || [], '— choose existing —');
    401. 

  401. }
    402. 

  402. 

  403. function populateSelect(id, items, placeholder) {
    404. 

  404.   const sel = document.getElementById(id);
    405. 

  405.   if (!sel) return;
    406. 

  406.   const first = sel.options[0]?.text || placeholder;
    407. 

  407.   sel.innerHTML = `<option value="">${first}</option>` +
    408. 

  408.     items.map(name => `<option value="${escAttr(name)}">${escHtml(name)}</option>`).join('');
    409. 

  409. }
    410. 

  410. 

  411. function onSeriesFolderSelect() {
    412. 

  412.   const val = document.getElementById('series-folder-select').value;
    413. 

  413.   document.getElementById('series').value = val;
    414. 

  414.   updatePathPreview();
    415. 

  415. }
    416. 

  416. 

  417. function onArtistFolderSelect() {
    418. 

  418.   const val = document.getElementById('artist-folder-select').value;
    419. 

  419.   document.getElementById('artist').value = val;
    420. 

  420.   updatePathPreview();
    421. 

  421. }
    422. 

  422. 

  423. // ── Audio format selector ─────────────────────────────────────────────────────
    424. 

  424. const FORMAT_HINTS = {
    425. 

  425.   m4a:  '(M4A/AAC — universal Jellyfin direct-play)',
    426. 

  426.   aac:  '(AAC in raw ADTS container — same codec as M4A, smaller container overhead)',
    427. 

  427.   opus: '(Opus — smaller files, well supported)',
    428. 

  428.   mp3:  '(MP3 — universal compatibility)',
    429. 

  429.   wav:  '⚠ Note: WAV is uncompressed PCM and produces very large files. YouTube source is already lossy, so WAV provides no quality gain over m4a.',
    430. 

  430.   flac: '⚠ Note: YouTube source is already lossy. FLAC just makes the file bigger; it cannot restore audio quality.',
    431. 

  431. };
    432. 

  432. 

  433. function onFormatChange() {
    434. 

  434.   const fmt  = document.getElementById('format').value;
    435. 

  435.   const hint = document.getElementById('format-hint');
    436. 

  436.   if (hint) {
    437. 

  437.     hint.textContent = FORMAT_HINTS[fmt] || '';
    438. 

  438.     hint.style.color = (fmt === 'flac' || fmt === 'wav')
    439. 

  439.       ? 'var(--amber, #f5a623)' : 'var(--muted)';
    440. 

  440.   }
    441. 

  441.   updatePathPreview();
    442. 

  442. }
    443. 

  443. 

  444. // ── Type selector ─────────────────────────────────────────────────────────────
    445. 

  445. function setType(type) {
    446. 

  446.   currentType = type;
    447. 

  447.   document.querySelectorAll('.type-tab').forEach(t =>
    448. 

  448.     t.classList.toggle('active', t.dataset.type === type));
    449. 

  449.   ['series-fields','movie-fields','music-fields'].forEach(id =>
    450. 

  450.     document.getElementById(id).classList.toggle('active', id.startsWith(type)));
    451. 

  451. 

  452.   // Repurpose the shared title/author labels for the music context
    453. 

  453.   const titleLabel  = document.getElementById('title-label');
    454. 

  454.   const authorLabel = document.getElementById('author-label');
    455. 

  455.   const archiveBtn  = document.getElementById('archive-btn');
    456. 

  456.   if (type === 'music') {
    457. 

  457.     titleLabel.textContent  = 'Track title';
    458. 

  458.     authorLabel.textContent = 'Channel  (not the artist)';
    459. 

  459.     archiveBtn.textContent  = 'Archive track';
    460. 

  460.   } else {
    461. 

  461.     titleLabel.textContent  = 'Video title';
    462. 

  462.     authorLabel.textContent = 'Author / Channel';
    463. 

  463.     archiveBtn.textContent  = 'Archive video';
    464. 

  464.   }
    465. 

  465. 

  466.   updatePathPreview();
    467. 

  467. }
    468. 

  468. 

  469. // ── URL probe — auto-fetch on paste only ─────────────────────────────────────
    470. 

  470. 

  471. /**
    472. 

  472.  * Clean tracking params from a YouTube URL.
    473. 

  473.  * Only rewrites the field when we have a COMPLETE, parseable URL —
    474. 

  474.  * never on partial input to avoid the re-trigger loop.
    475. 

  475.  */
    476. 

  476. function cleanYouTubeUrl(raw) {
    477. 

  477.   try {
    478. 

  478.     const u    = new URL(raw.trim());
    479. 

  479.     const host = u.hostname.replace(/^www\./, '');
    480. 

  480.     if (host === 'youtube.com' && u.pathname === '/watch') {
    481. 

  481.       const v = u.searchParams.get('v') || '';
    482. 

  482.       return `https://www.youtube.com/watch?v=${v}`;
    483. 

  483.     }
    484. 

  484.     if (host === 'youtu.be' || host === 'youtube.com') {
    485. 

  485.       return `${u.origin}${u.pathname}`;
    486. 

  486.     }
    487. 

  487.     return raw.trim();
    488. 

  488.   } catch { return raw.trim(); }
    489. 

  489. }
    490. 

  490. 

  491. function looksLikeYouTube(url) {
    492. 

  492.   try {
    493. 

  493.     const u    = new URL(url);
    494. 

  494.     const host = u.hostname.replace(/^www\./, '');
    495. 

  495.     if (host === 'youtu.be' && u.pathname.length > 1)                    return true;
    496. 

  496.     if (host === 'youtube.com' && u.searchParams.get('v'))               return true;
    497. 

  497.     if (host === 'youtube.com' && /^\/(shorts|live)\/\w/.test(u.pathname)) return true;
    498. 

  498.     return false;
    499. 

  499.   } catch { return false; }
    500. 

  500. }
    501. 

  501. 

  502. function setProbeStatus(msg, cls='') {
    503. 

  503.   const el = document.getElementById('probe-status');
    504. 

  504.   el.textContent  = msg;
    505. 

  505.   el.style.color  = cls === 'ok'  ? 'var(--green)' :
    506. 

  506.                     cls === 'err' ? 'var(--red)'   : 'var(--muted)';
    507. 

  507. }
    508. 

  508. 

  509. async function probeUrl(urlOverride) {
    510. 

  510.   const inputEl = document.getElementById('url-input');
    511. 

  511.   const url     = urlOverride !== undefined ? urlOverride : inputEl.value.trim();
    512. 

  512.   if (!url) { toast('Paste a YouTube URL first', 'error'); return; }
    513. 

  513. 

  514.   const btn = document.getElementById('probe-btn');
    515. 

  515.   btn.disabled  = true;
    516. 

  516.   btn.innerHTML = '<span class="spinner"></span>';
    517. 

  517.   setProbeStatus('fetching…');
    518. 

  518. 

  519.   try {
    520. 

  520.     const res  = await fetch('/api/probe', {
    521. 

  521.       method:  'POST',
    522. 

  522.       headers: {'Content-Type': 'application/json'},
    523. 

  523.       body:    JSON.stringify({ url })
    524. 

  524.     });
    525. 

  525.     const data = await res.json();
    526. 

  526.     if (!res.ok) throw new Error(data.error || 'Probe failed');
    527. 

  527. 

  528.     probeData = data;
    529. 

  529.     document.getElementById('title').value       = data.title       || '';
    530. 

  530.     document.getElementById('author').value      = data.author      || '';
    531. 

  531.     document.getElementById('upload_date').value = data.upload_date || '';
    532. 

  532.     document.getElementById('year').value        = data.year        || '';
    533. 

  533. 

  534.     document.getElementById('preview-thumb').src  = data.thumbnail || '';
    535. 

  535.     document.getElementById('preview-title').textContent = data.title || '(untitled)';
    536. 

  536.     document.getElementById('preview-sub').textContent   =
    537. 

  537.       `${data.author || ''}  ·  ${data.upload_date || ''}  ·  ${data.duration || ''}`;
    538. 

  538.     document.getElementById('preview-card').classList.add('visible');
    539. 

  539. 

  540.     setProbeStatus('✓ fetched', 'ok');
    541. 

  541.     updatePathPreview();
    542. 

  542.   } catch(e) {
    543. 

  543.     setProbeStatus('fetch failed', 'err');
    544. 

  544.     toast(e.message, 'error');
    545. 

  545.   } finally {
    546. 

  546.     btn.disabled  = false;
    547. 

  547.     btn.textContent = '↻';
    548. 

  548.   }
    549. 

  549. }
    550. 

  550. 

  551. // Paste handler — robust cross-browser approach:
    552. 

  552. // We let the browser complete the paste first (no preventDefault), then read
    553. 

  553. // the field value in a microtask. This works on desktop, mobile, and all
    554. 

  554. // browsers regardless of clipboardData availability.
    555. 

  555. document.getElementById('url-input').addEventListener('paste', function() {
    556. 

  556.   const el = this;
    557. 

  557.   setTimeout(function() {
    558. 

  558.     const raw     = el.value;
    559. 

  559.     const cleaned = cleanYouTubeUrl(raw);
    560. 

  560. 

  561.     // Update field with cleaned URL only if it changed
    562. 

  562.     if (cleaned !== raw) el.value = cleaned;
    563. 

  563. 

  564.     if (looksLikeYouTube(cleaned)) {
    565. 

  565.       setProbeStatus('fetching…');
    566. 

  566.       probeUrl(cleaned);
    567. 

  567.     }
    568. 

  568.   }, 0);
    569. 

  569. });
    570. 

  570. 

  571. // Enter key as manual fallback
    572. 

  572. document.getElementById('url-input').addEventListener('keydown', function(e) {
    573. 

  573.   if (e.key === 'Enter') probeUrl();
    574. 

  574. });
    575. 

  575. 

  576. // ── Path preview ──────────────────────────────────────────────────────────────
    577. 

  577. function getSeriesName() {
    578. 

  578.   return document.getElementById('series-folder-select').value ||
    579. 

  579.          document.getElementById('series').value.trim() ||
    580. 

  580.          'Series Name';
    581. 

  581. }
    582. 

  582. 

  583. function getArtistName() {
    584. 

  584.   return document.getElementById('artist-folder-select').value ||
    585. 

  585.          document.getElementById('artist').value.trim() ||
    586. 

  586.          'Artist Name';
    587. 

  587. }
    588. 

  588. 

  589. function updatePathPreview() {
    590. 

  590.   const root = mountInfo.root || '/nas/jellyfin';
    591. 

  591.   let path   = '';
    592. 

  592. 

  593.   if (currentType === 'movie') {
    594. 

  594.     // Flat layout: Movies/<Title> (Year).mkv  — no enclosing folder
    595. 

  595.     const title = sanitize(document.getElementById('title').value || 'Title');
    596. 

  596.     const year  = document.getElementById('year').value || 'YYYY';
    597. 

  597.     const base  = year ? `${title} (${year})` : title;
    598. 

  598.     path = `${root}/Movies/${base}.mkv`;
    599. 

  599. 

  600.   } else if (currentType === 'music') {
    601. 

  601.     // Music/<Artist>/<Album>/[NN - ]<Track>.<ext>    (album & number optional)
    602. 

  602.     const artist = sanitize(getArtistName());
    603. 

  603.     const album  = sanitize(document.getElementById('album').value || '');
    604. 

  604.     const track  = document.getElementById('track').value;
    605. 

  605.     const title  = sanitize(document.getElementById('title').value || 'Track');
    606. 

  606.     const fmtEl  = document.getElementById('format');
    607. 

  607.     const ext    = (fmtEl && fmtEl.value) || 'm4a';
    608. 

  608.     const trackPrefix = track ? `${String(track).padStart(2,'0')} - ` : '';
    609. 

  609.     const dir = album ? `${root}/Music/${artist}/${album}` : `${root}/Music/${artist}`;
    610. 

  610.     path = `${dir}/${trackPrefix}${title}.${ext}`;
    611. 

  611. 

  612.   } else {  // series
    613. 

  613.     const series  = sanitize(getSeriesName());
    614. 

  614.     const season  = String(document.getElementById('season').value || '1').padStart(2,'0');
    615. 

  615.     const episode = String(document.getElementById('episode').value || '1').padStart(2,'0');
    616. 

  616.     const epTitle = sanitize(document.getElementById('episode_title').value ||
    617. 

  617.                              document.getElementById('title').value || 'Episode Title');
    618. 

  618.     path = `${root}/Shows/${series}/Season ${season}/S${season}E${episode} - ${epTitle}.mkv`;
    619. 

  619.   }
    620. 

  620. 

  621.   const el = document.getElementById('path-preview');
    622. 

  622.   el.textContent = `→ ${path}`;
    623. 

  623.   el.classList.add('visible');
    624. 

  624. }
    625. 

  625. 

  626. function sanitize(s) {
    627. 

  627.   return String(s || '').replace(/[<>:"/\\|?*]/g, '').trim() || '…';
    628. 

  628. }
    629. 

  629. 

  630. // Live preview on common fields
    631. 

  631. ['title','author','upload_date','series','episode_title','season','episode','year',
    632. 

  632.  'artist','album','track','music_year','genre'].forEach(id => {
    633. 

  633.   const el = document.getElementById(id);
    634. 

  634.   if (el) el.addEventListener('input', updatePathPreview);
    635. 

  635. });
    636. 

  636. 

  637. // ── Submit ─────────────────────────────────────────────────────────────────────
    638. 

  638. async function submitJob() {
    639. 

  639.   const url = document.getElementById('url-input').value.trim();
    640. 

  640.   if (!url) { toast('URL is required', 'error'); return; }
    641. 

  641. 

  642.   // Year input is shared between movie ('year' field) and music ('music_year' field)
    643. 

  643.   const year = currentType === 'music'
    644. 

  644.     ? document.getElementById('music_year').value.trim()
    645. 

  645.     : document.getElementById('year').value.trim();
    646. 

  646. 

  647.   const payload = {
    648. 

  648.     url,
    649. 

  649.     media_type:    currentType,
    650. 

  650.     title:         document.getElementById('title').value.trim(),
    651. 

  651.     author:        document.getElementById('author').value.trim(),
    652. 

  652.     upload_date:   document.getElementById('upload_date').value.trim(),
    653. 

  653.     year:          year,
    654. 

  654.     description:   probeData.description || '',
    655. 

  655.     // Series fields
    656. 

  656.     folder:        currentType === 'series' ? getSeriesName() : '',
    657. 

  657.     series:        document.getElementById('series').value.trim(),
    658. 

  658.     season:        parseInt(document.getElementById('season').value) || 1,
    659. 

  659.     episode:       parseInt(document.getElementById('episode').value) || 1,
    660. 

  660.     episode_title: document.getElementById('episode_title').value.trim(),
    661. 

  661.     // Music fields
    662. 

  662.     artist:        currentType === 'music' ? getArtistName() : '',
    663. 

  663.     album:         document.getElementById('album').value.trim(),
    664. 

  664.     track:         document.getElementById('track').value.trim(),
    665. 

  665.     genre:         document.getElementById('genre').value.trim(),
    666. 

  666.     format:        currentType === 'music' ? document.getElementById('format').value : '',
    667. 

  667.   };
    668. 

  668. 

  669.   const btn = document.getElementById('archive-btn');
    670. 

  670.   const originalText = btn.textContent;
    671. 

  671.   btn.disabled  = true;
    672. 

  672.   btn.innerHTML = '<span class="spinner"></span> Queuing…';
    673. 

  673. 

  674.   try {
    675. 

  675.     const res  = await fetch('/api/archive', {
    676. 

  676.       method:  'POST',
    677. 

  677.       headers: {'Content-Type': 'application/json'},
    678. 

  678.       body:    JSON.stringify(payload)
    679. 

  679.     });
    680. 

  680.     const data = await res.json();
    681. 

  681.     if (!res.ok) throw new Error(data.error || 'Failed to queue');
    682. 

  682. 

  683.     toast(`Job ${data.job_id} queued`, 'success');
    684. 

  684.     clearForm();
    685. 

  685.     await loadBrowseData();   // refresh folder lists after potential new folder
    686. 

  686.     applySnapshot(data);      // the new job is in data.jobs with a fresh version
    687. 

  687.     startPolling();
    688. 

  688.   } catch(e) {
    689. 

  689.     toast(e.message, 'error');
    690. 

  690.   } finally {
    691. 

  691.     btn.disabled  = false;
    692. 

  692.     btn.textContent = originalText;
    693. 

  693.   }
    694. 

  694. }
    695. 

  695. 

  696. function clearForm() {
    697. 

  697.   ['url-input','title','author','upload_date','series','episode_title','year',
    698. 

  698.    'artist','album','track','music_year','genre'].forEach(id => {
    699. 

  699.     const el = document.getElementById(id);
    700. 

  700.     if (el) el.value = '';
    701. 

  701.   });
    702. 

  702.   document.getElementById('season').value  = '1';
    703. 

  703.   document.getElementById('episode').value = '1';
    704. 

  704.   const seriesSelect = document.getElementById('series-folder-select');
    705. 

  705.   if (seriesSelect) seriesSelect.value = '';
    706. 

  706.   const artistSelect = document.getElementById('artist-folder-select');
    707. 

  707.   if (artistSelect) artistSelect.value = '';
    708. 

  708.   const formatSel = document.getElementById('format');
    709. 

  709.   if (formatSel) {
    710. 

  710.     formatSel.value = 'm4a';
    711. 

  711.     onFormatChange();  // reset hint text
    712. 

  712.   }
    713. 

  713.   document.getElementById('preview-card').classList.remove('visible');
    714. 

  714.   document.getElementById('path-preview').classList.remove('visible');
    715. 

  715.   setProbeStatus('');
    716. 

  716.   probeData = {};
    717. 

  717. }
    718. 

  718. 

  719. // ── Job list ──────────────────────────────────────────────────────────────────
    720. 

  720. //
    721. 

  721. // Race-free rendering — backed by a server-side action_version counter.
    722. 

  722. //
    723. 

  723. // Every response from /api/jobs and from mutating endpoints carries an
    724. 

  724. // `action_version`. We keep the highest version we've applied locally and
    725. 

  725. // refuse to render anything older. This makes the order of fetch responses
    726. 

  726. // irrelevant: a stale poll cannot overwrite the result of a click, and a
    727. 

  727. // click's response (which always carries the freshest version, since
    728. 

  728. // mutations bump the counter before responding) always wins.
    729. 

  729. //
    730. 

  730. // Mutating endpoints also include the new job list in their response,
    731. 

  731. // so we never have to issue a follow-up GET that could race with polling.
    732. 

  732. 

  733. let lastAppliedVersion = -1;
    734. 

  734. let lastServerInstance = null;
    735. 

  735. // pollTimer is declared once in the State block near the top of this script.
    736. 

  736. 

  737. /**
    738. 

  738.  * Apply a server snapshot to the DOM, but only if it's strictly newer than
    739. 

  739.  * what's currently rendered. Stale snapshots are silently dropped.
    740. 

  740.  *
    741. 

  741.  * Accepts the shape: { server_instance: string, action_version: number, jobs: [...] }
    742. 

  742.  *
    743. 

  743.  * `server_instance` is a per-process UUID issued by the backend. Whenever it
    744. 

  744.  * changes (server restart, code reload, container redeployment), we reset
    745. 

  745.  * `lastAppliedVersion` so the fresh state is accepted even though the
    746. 

  746.  * counter started over at 0. Without this, the queue would silently freeze
    747. 

  747.  * after any backend restart until enough new actions occurred to push the
    748. 

  748.  * counter past the client's stale watermark.
    749. 

  749.  */
    750. 

  750. function applySnapshot(snapshot) {
    751. 

  751.   if (!snapshot || typeof snapshot.action_version !== 'number') return;
    752. 

  752. 

  753.   // Detect server restart and reset the version watermark.
    754. 

  754.   if (snapshot.server_instance && snapshot.server_instance !== lastServerInstance) {
    755. 

  755.     lastServerInstance = snapshot.server_instance;
    756. 

  756.     lastAppliedVersion = -1;
    757. 

  757.   }
    758. 

  758. 

  759.   if (snapshot.action_version < lastAppliedVersion) return;
    760. 

  760.   lastAppliedVersion = snapshot.action_version;
    761. 

  761.   const list = Array.isArray(snapshot.jobs) ? snapshot.jobs : [];
    762. 

  762.   renderJobsList(list);
    763. 

  763. }
    764. 

  764. 

  765. async function loadJobs() {
    766. 

  766.   try {
    767. 

  767.     const res  = await fetch('/api/jobs');
    768. 

  768.     const data = await res.json();
    769. 

  769.     applySnapshot(data);
    770. 

  770.   } catch(e) {
    771. 

  771.     // Network blip — leave the current view alone; next call retries.
    772. 

  772.   }
    773. 

  773. }
    774. 

  774. 

  775. function refreshJobs() {
    776. 

  776.   loadJobs().then(() => toast('refreshed', ''));
    777. 

  777. }
    778. 

  778. 

  779. function renderJobsList(jobs) {
    780. 

  780.   const list = document.getElementById('jobs-list');
    781. 

  781. 

  782.   // Update count badge
    783. 

  783.   document.getElementById('job-count').textContent =
    784. 

  784.     `${jobs.length} job${jobs.length !== 1 ? 's' : ''}`;
    785. 

  785. 

  786.   // Build new content in a fragment so the swap is atomic (no flash)
    787. 

  787.   if (!jobs.length) {
    788. 

  788.     const placeholder = document.createElement('div');
    789. 

  789.     placeholder.className   = 'empty-state';
    790. 

  790.     placeholder.textContent = 'no jobs yet — paste a URL to get started';
    791. 

  791.     list.replaceChildren(placeholder);
    792. 

  792.     stopPolling();
    793. 

  793.     return;
    794. 

  794.   }
    795. 

  795. 

  796.   const frag = document.createDocumentFragment();
    797. 

  797.   for (const job of jobs) {
    798. 

  798.     const wrapper = document.createElement('div');
    799. 

  799.     wrapper.innerHTML = renderJob(job).trim();
    800. 

  800.     const card = wrapper.firstChild;
    801. 

  801.     if (card) frag.appendChild(card);
    802. 

  802.   }
    803. 

  803.   list.replaceChildren(frag);
    804. 

  804. 

  805.   // Poll only when work is in progress
    806. 

  806.   const hasActive = jobs.some(j => j.status === 'running' || j.status === 'queued');
    807. 

  807.   if (hasActive) startPolling(); else stopPolling();
    808. 

  808. }
    809. 

  809. 

  810. function renderJob(j) {
    811. 

  811.   const iconClass = j.media_type === 'movie' ? 'icon-film'
    812. 

  812.                   : j.media_type === 'music' ? 'icon-music'
    813. 

  813.                   : 'icon-tv';
    814. 

  814.   const iconLabel = j.media_type === 'movie' ? '🎬'
    815. 

  815.                   : j.media_type === 'music' ? '♪'
    816. 

  816.                   : 'TV';
    817. 

  817.   const pct     = Math.round(j.progress || 0);
    818. 

  818.   const fillCls = j.status === 'done' ? 'done' : j.status === 'error' ? 'error' : '';
    819. 

  819. 

  820.   let sub;
    821. 

  821.   if (j.media_type === 'movie') {
    822. 

  822.     sub = `movie  ${j.year || ''}`;
    823. 

  823.   } else if (j.media_type === 'music') {
    824. 

  824.     sub = `${j.artist || j.author || '—'}${j.album ? '  ·  ' + j.album : ''}`;
    825. 

  825.   } else {
    826. 

  826.     sub = `${j.series || j.folder || '—'}  S${String(j.season||1).padStart(2,'0')}E${String(j.episode||1).padStart(2,'0')}`;
    827. 

  827.   }
    828. 

  828. 

  829.   const speed = j.status === 'running' && j.speed
    830. 

  830.     ? `<div class="job-speed">${escHtml(j.speed)}${j.eta ? '  · ETA ' + escHtml(j.eta) : ''}</div>` : '';
    831. 

  831.   const outPath = j.output_path
    832. 

  832.     ? `<div class="job-speed" style="word-break:break-all;margin-top:3px">${escHtml(j.output_path)}</div>` : '';
    833. 

  833.   const error = j.status === 'error' && j.error
    834. 

  834.     ? `<div class="job-error">${escHtml(String(j.error).slice(0, 400))}</div>` : '';
    835. 

  835. 

  836.   const retryBtn = j.status === 'error'
    837. 

  837.     ? `<button class="btn-sm" onclick="retryJob('${escAttr(j.id)}')">↺ retry</button>` : '';
    838. 

  838. 

  839.   return `<div class="job-card" data-job-id="${escAttr(j.id)}">
    840. 

  840.   <div class="job-top">
    841. 

  841.     <div class="job-icon ${iconClass}">${iconLabel}</div>
    842. 

  842.     <div class="job-info">
    843. 

  843.       <div class="job-title">${escHtml(j.title || j.url)}</div>
    844. 

  844.       <div class="job-sub">${escHtml(sub)} · <span style="font-size:10px;font-family:monospace">${escHtml(j.id)}</span></div>
    845. 

  845.     </div>
    846. 

  846.     <div class="job-status status-${j.status}">${j.status}</div>
    847. 

  847.   </div>
    848. 

  848.   <div class="progress-bar"><div class="progress-fill ${fillCls}" style="width:${pct}%"></div></div>
    849. 

  849.   ${speed}${outPath}${error}
    850. 

  850.   <div class="job-actions">${retryBtn}<button class="btn-sm danger" onclick="deleteJob('${escAttr(j.id)}')">✕ remove</button></div>
    851. 

  851. </div>`;
    852. 

  852. }
    853. 

  853. 

  854. async function retryJob(id) {
    855. 

  855.   try {
    856. 

  856.     const res  = await fetch(`/api/jobs/${id}/retry`, { method: 'POST' });
    857. 

  857.     const data = await res.json();
    858. 

  858.     toast(`Job ${id} retrying`, 'success');
    859. 

  859.     applySnapshot(data);
    860. 

  860.   } catch(e) {
    861. 

  861.     toast('Retry failed', 'error');
    862. 

  862.     return;
    863. 

  863.   }
    864. 

  864.   startPolling();
    865. 

  865. }
    866. 

  866. 

  867. async function deleteJob(id) {
    868. 

  868.   // Optimistic: remove the card immediately so the click feels responsive.
    869. 

  869.   // The server's response then becomes the authoritative state via applySnapshot.
    870. 

  870.   const card = document.querySelector(`.job-card[data-job-id="${cssEsc(id)}"]`);
    871. 

  871.   if (card) card.remove();
    872. 

  872.   try {
    873. 

  873.     const res  = await fetch(`/api/jobs/${id}`, { method: 'DELETE' });
    874. 

  874.     const data = await res.json();
    875. 

  875.     applySnapshot(data);
    876. 

  876.   } catch(e) {
    877. 

  877.     // Network blip — fall back to fetching fresh state
    878. 

  878.     await loadJobs();
    879. 

  879.   }
    880. 

  880. }
    881. 

  881. 

  882. async function clearFinished() {
    883. 

  883.   const btn = document.getElementById('clear-finished-btn');
    884. 

  884.   btn.disabled = true;
    885. 

  885.   try {
    886. 

  886.     const res  = await fetch('/api/jobs', { method: 'DELETE' });
    887. 

  887.     const data = await res.json();
    888. 

  888.     toast(`Cleared ${data.count || 0} finished job${data.count === 1 ? '' : 's'}`, 'success');
    889. 

  889.     applySnapshot(data);
    890. 

  890.   } catch(e) {
    891. 

  891.     toast('Clear failed', 'error');
    892. 

  892.   } finally {
    893. 

  893.     btn.disabled = false;
    894. 

  894.   }
    895. 

  895. }
    896. 

  896. 

  897. // ── Polling ───────────────────────────────────────────────────────────────────
    898. 

  898. function startPolling() { if (!pollTimer) pollTimer = setInterval(loadJobs, 2500); }
    899. 

  899. function stopPolling()  { if (pollTimer)  { clearInterval(pollTimer); pollTimer = null; } }
    900. 

  900. 

  901. // ── Toast ─────────────────────────────────────────────────────────────────────
    902. 

  902. function toast(msg, type='') {
    903. 

  903.   const el = document.getElementById('toast');
    904. 

  904.   el.textContent = msg;
    905. 

  905.   el.className   = 'show ' + type;
    906. 

  906.   setTimeout(() => el.classList.remove('show'), 3500);
    907. 

  907. }
    908. 

  908. 

  909. // ── Utils ─────────────────────────────────────────────────────────────────────
    910. 

  910. function escHtml(s) {
    911. 

  911.   return String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;')
    912. 

  912.                         .replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    913. 

  913. }
    914. 

  914. function escAttr(s) { return escHtml(s); }
    915. 

  915. 

  916. /** Escape a string for safe use in a CSS attribute selector value. */
    917. 

  917. function cssEsc(s) {
    918. 

  918.   if (window.CSS && CSS.escape) return CSS.escape(String(s ?? ''));
    919. 

  919.   return String(s ?? '').replace(/[^a-zA-Z0-9_-]/g, '\\$&');
    920. 

  920. }
    921. 

  921. </script>
    922. 

  922. </body>
    923. 

  923. </html>
    924.