Главная Обзор Помощь
Регистрация Вход
av2x
/
yaar
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Дерево: 2f3bdf2159
Ветки Метки
yaar
/
web
/
templates
/
index.html

index.html 41 KB
История Исходник

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939 
  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">(embedded tag; used for the Singles folder when no album)</span></label>
    269. 

  269.         <input type="text" id="artist" placeholder="e.g. Nujabes" oninput="updatePathPreview()">
    270. 

  270.       </div>
    271. 

  271.       <div class="row-2">
    272. 

  272.         <div class="field">
    273. 

  273.           <label>Album  <span style="color:var(--muted);font-weight:400">(folder name in Music/)</span></label>
    274. 

  274.           <input type="text" id="album" placeholder="Blank → &lt;Artist&gt; - Singles" oninput="updatePathPreview()">
    275. 

  275.         </div>
    276. 

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

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

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

  279.         </div>
    280. 

  280.       </div>
    281. 

  281.       <div class="row-2">
    282. 

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

  283.           <label>Year</label>
    284. 

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

  285.         </div>
    286. 

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

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

  288.           <input type="text" id="genre" placeholder="e.g. Electronic">
    289. 

  289.         </div>
    290. 

  290.       </div>
    291. 

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

  292.         <label>
    293. 

  293.           Audio format
    294. 

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

  295.             (M4A/AAC — universal Jellyfin direct-play)
    296. 

  296.           </span>
    297. 

  297.         </label>
    298. 

  298.         <select id="format" onchange="onFormatChange()">
    299. 

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

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

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

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

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

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

  305.         </select>
    306. 

  306.       </div>
    307. 

  307.     </div>
    308. 

  308. 

  309.     <!-- Path preview -->
    310. 

  310.     <div id="path-preview"></div>
    311. 

  311. 

  312.     <hr>
    313. 

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

  314. 

  315.   </div>
    316. 

  316. 

  317.   <!-- Right panel: queue -->
    318. 

  318.   <div class="panel-right">
    319. 

  319.     <div class="jobs-header">
    320. 

  320.       <div class="jobs-title">archive queue</div>
    321. 

  321.       <div class="badge" id="job-count">0 jobs</div>
    322. 

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

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

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

  325.       </div>
    326. 

  326.     </div>
    327. 

  327.     <div class="jobs-list" id="jobs-list">
    328. 

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

  329.     </div>
    330. 

  330.   </div>
    331. 

  331. 

  332. </div>
    333. 

  333. 

  334. <div id="toast"></div>
    335. 

  335. 

  336. <script>
    337. 

  337. // ── State ─────────────────────────────────────────────────────────────────────
    338. 

  338. let currentType = 'series';
    339. 

  339. let probeData   = {};
    340. 

  340. let pollTimer   = null;
    341. 

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

  342. let browseData  = { Movies: [], Shows: [], Music: [] };
    343. 

  343. 

  344. // ── Init ──────────────────────────────────────────────────────────────────────
    345. 

  345. (async function init() {
    346. 

  346.   await Promise.all([checkMount(), loadBrowseData()]);
    347. 

  347.   loadJobs();
    348. 

  348. })();
    349. 

  349. 

  350. // ── Mount check ───────────────────────────────────────────────────────────────
    351. 

  351. async function checkMount() {
    352. 

  352.   try {
    353. 

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

  354.     mountInfo  = data;
    355. 

  355.     const banner = document.getElementById('mount-banner');
    356. 

  356.     const hdr    = document.getElementById('header-status');
    357. 

  357. 

  358.     if (!data.mounted) {
    359. 

  359.       banner.className   = 'visible error';
    360. 

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

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

  362.       document.getElementById('archive-btn').disabled = true;
    363. 

  363.     } else if (!data.writable) {
    364. 

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

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

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

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

  368.     } else {
    369. 

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

  370.       if (missing.length) {
    371. 

  371.         banner.className   = 'visible warn';
    372. 

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

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

  374.       } else {
    375. 

  375.         banner.className   = 'visible ok';
    376. 

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

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

  378.       }
    379. 

  379.       document.getElementById('archive-btn').disabled = false;
    380. 

  380.     }
    381. 

  381.     updatePathPreview();
    382. 

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

  383. }
    384. 

  384. 

  385. // ── Browse (folder population) ────────────────────────────────────────────────
    386. 

  386. async function loadBrowseData() {
    387. 

  387.   try {
    388. 

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

  389.     populateFolderSelects();
    390. 

  390.   } catch(e) { console.warn('Browse failed:', e); }
    391. 

  391. }
    392. 

  392. 

  393. function populateFolderSelects() {
    394. 

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

  395. }
    396. 

  396. 

  397. function populateSelect(id, items, placeholder) {
    398. 

  398.   const sel = document.getElementById(id);
    399. 

  399.   if (!sel) return;
    400. 

  400.   const first = sel.options[0]?.text || placeholder;
    401. 

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

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

  403. }
    404. 

  404. 

  405. function onSeriesFolderSelect() {
    406. 

  406.   const val = document.getElementById('series-folder-select').value;
    407. 

  407.   document.getElementById('series').value = val;
    408. 

  408.   updatePathPreview();
    409. 

  409. }
    410. 

  410. 

  411. // ── Audio format selector ─────────────────────────────────────────────────────
    412. 

  412. const FORMAT_HINTS = {
    413. 

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

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

  415.   opus: '(Opus — smaller files, well supported)',
    416. 

  416.   mp3:  '(MP3 — universal compatibility)',
    417. 

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

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

  419. };
    420. 

  420. 

  421. function onFormatChange() {
    422. 

  422.   const fmt  = document.getElementById('format').value;
    423. 

  423.   const hint = document.getElementById('format-hint');
    424. 

  424.   if (hint) {
    425. 

  425.     hint.textContent = FORMAT_HINTS[fmt] || '';
    426. 

  426.     hint.style.color = (fmt === 'flac' || fmt === 'wav')
    427. 

  427.       ? 'var(--amber, #f5a623)' : 'var(--muted)';
    428. 

  428.   }
    429. 

  429.   updatePathPreview();
    430. 

  430. }
    431. 

  431. 

  432. // ── Type selector ─────────────────────────────────────────────────────────────
    433. 

  433. function setType(type) {
    434. 

  434.   currentType = type;
    435. 

  435.   document.querySelectorAll('.type-tab').forEach(t =>
    436. 

  436.     t.classList.toggle('active', t.dataset.type === type));
    437. 

  437.   ['series-fields','movie-fields','music-fields'].forEach(id =>
    438. 

  438.     document.getElementById(id).classList.toggle('active', id.startsWith(type)));
    439. 

  439. 

  440.   // Repurpose the shared title/author labels for the music context
    441. 

  441.   const titleLabel  = document.getElementById('title-label');
    442. 

  442.   const authorLabel = document.getElementById('author-label');
    443. 

  443.   const archiveBtn  = document.getElementById('archive-btn');
    444. 

  444.   if (type === 'music') {
    445. 

  445.     titleLabel.textContent  = 'Track title';
    446. 

  446.     authorLabel.textContent = 'Channel  (not the artist)';
    447. 

  447.     archiveBtn.textContent  = 'Archive track';
    448. 

  448.   } else {
    449. 

  449.     titleLabel.textContent  = 'Video title';
    450. 

  450.     authorLabel.textContent = 'Author / Channel';
    451. 

  451.     archiveBtn.textContent  = 'Archive video';
    452. 

  452.   }
    453. 

  453. 

  454.   updatePathPreview();
    455. 

  455. }
    456. 

  456. 

  457. // ── URL probe — auto-fetch on paste only ─────────────────────────────────────
    458. 

  458. 

  459. /**
    460. 

  460.  * Clean tracking params from a YouTube URL.
    461. 

  461.  * Only rewrites the field when we have a COMPLETE, parseable URL —
    462. 

  462.  * never on partial input to avoid the re-trigger loop.
    463. 

  463.  */
    464. 

  464. function cleanYouTubeUrl(raw) {
    465. 

  465.   try {
    466. 

  466.     const u    = new URL(raw.trim());
    467. 

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

  468.     if (host === 'youtube.com' && u.pathname === '/watch') {
    469. 

  469.       const v = u.searchParams.get('v') || '';
    470. 

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

  471.     }
    472. 

  472.     if (host === 'youtu.be' || host === 'youtube.com') {
    473. 

  473.       return `${u.origin}${u.pathname}`;
    474. 

  474.     }
    475. 

  475.     return raw.trim();
    476. 

  476.   } catch { return raw.trim(); }
    477. 

  477. }
    478. 

  478. 

  479. function looksLikeYouTube(url) {
    480. 

  480.   try {
    481. 

  481.     const u    = new URL(url);
    482. 

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

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

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

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

  486.     return false;
    487. 

  487.   } catch { return false; }
    488. 

  488. }
    489. 

  489. 

  490. function setProbeStatus(msg, cls='') {
    491. 

  491.   const el = document.getElementById('probe-status');
    492. 

  492.   el.textContent  = msg;
    493. 

  493.   el.style.color  = cls === 'ok'  ? 'var(--green)' :
    494. 

  494.                     cls === 'err' ? 'var(--red)'   : 'var(--muted)';
    495. 

  495. }
    496. 

  496. 

  497. async function probeUrl(urlOverride) {
    498. 

  498.   const inputEl = document.getElementById('url-input');
    499. 

  499.   const url     = urlOverride !== undefined ? urlOverride : inputEl.value.trim();
    500. 

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

  501. 

  502.   const btn = document.getElementById('probe-btn');
    503. 

  503.   btn.disabled  = true;
    504. 

  504.   btn.innerHTML = '<span class="spinner"></span>';
    505. 

  505.   setProbeStatus('fetching…');
    506. 

  506. 

  507.   try {
    508. 

  508.     const res  = await fetch('/api/probe', {
    509. 

  509.       method:  'POST',
    510. 

  510.       headers: {'Content-Type': 'application/json'},
    511. 

  511.       body:    JSON.stringify({ url })
    512. 

  512.     });
    513. 

  513.     const data = await res.json();
    514. 

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

  515. 

  516.     probeData = data;
    517. 

  517.     document.getElementById('title').value       = data.title       || '';
    518. 

  518.     document.getElementById('author').value      = data.author      || '';
    519. 

  519.     document.getElementById('upload_date').value = data.upload_date || '';
    520. 

  520.     document.getElementById('year').value        = data.year        || '';
    521. 

  521. 

  522.     document.getElementById('preview-thumb').src  = data.thumbnail || '';
    523. 

  523.     document.getElementById('preview-title').textContent = data.title || '(untitled)';
    524. 

  524.     document.getElementById('preview-sub').textContent   =
    525. 

  525.       `${data.author || ''}  ·  ${data.upload_date || ''}  ·  ${data.duration || ''}`;
    526. 

  526.     document.getElementById('preview-card').classList.add('visible');
    527. 

  527. 

  528.     setProbeStatus('✓ fetched', 'ok');
    529. 

  529.     updatePathPreview();
    530. 

  530.   } catch(e) {
    531. 

  531.     setProbeStatus('fetch failed', 'err');
    532. 

  532.     toast(e.message, 'error');
    533. 

  533.   } finally {
    534. 

  534.     btn.disabled  = false;
    535. 

  535.     btn.textContent = '↻';
    536. 

  536.   }
    537. 

  537. }
    538. 

  538. 

  539. // Paste handler — robust cross-browser approach:
    540. 

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

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

  542. // browsers regardless of clipboardData availability.
    543. 

  543. document.getElementById('url-input').addEventListener('paste', function() {
    544. 

  544.   const el = this;
    545. 

  545.   setTimeout(function() {
    546. 

  546.     const raw     = el.value;
    547. 

  547.     const cleaned = cleanYouTubeUrl(raw);
    548. 

  548. 

  549.     // Update field with cleaned URL only if it changed
    550. 

  550.     if (cleaned !== raw) el.value = cleaned;
    551. 

  551. 

  552.     if (looksLikeYouTube(cleaned)) {
    553. 

  553.       setProbeStatus('fetching…');
    554. 

  554.       probeUrl(cleaned);
    555. 

  555.     }
    556. 

  556.   }, 0);
    557. 

  557. });
    558. 

  558. 

  559. // Enter key as manual fallback
    560. 

  560. document.getElementById('url-input').addEventListener('keydown', function(e) {
    561. 

  561.   if (e.key === 'Enter') probeUrl();
    562. 

  562. });
    563. 

  563. 

  564. // ── Path preview ──────────────────────────────────────────────────────────────
    565. 

  565. function getSeriesName() {
    566. 

  566.   return document.getElementById('series-folder-select').value ||
    567. 

  567.          document.getElementById('series').value.trim() ||
    568. 

  568.          'Series Name';
    569. 

  569. }
    570. 

  570. 

  571. function getArtistName() {
    572. 

  572.   return document.getElementById('artist').value.trim() || 'Artist Name';
    573. 

  573. }
    574. 

  574. 

  575. function updatePathPreview() {
    576. 

  576.   const root = mountInfo.root || '/nas/jellyfin';
    577. 

  577.   let path   = '';
    578. 

  578. 

  579.   if (currentType === 'movie') {
    580. 

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

  581.     const title = sanitize(document.getElementById('title').value || 'Title');
    582. 

  582.     const year  = document.getElementById('year').value || 'YYYY';
    583. 

  583.     const base  = year ? `${title} (${year})` : title;
    584. 

  584.     path = `${root}/Movies/${base}.mkv`;
    585. 

  585. 

  586.   } else if (currentType === 'music') {
    587. 

  587.     // Music/<Album>/[NN - ]<Track>.<ext>, or Music/<Artist> - Singles/... when
    588. 

  588.     // no album is given. Mirrors resolve_output_dir() in app.py.
    589. 

  589.     const artist = sanitize(getArtistName());
    590. 

  590.     const album  = sanitize(document.getElementById('album').value || '');
    591. 

  591.     const track  = document.getElementById('track').value;
    592. 

  592.     const title  = sanitize(document.getElementById('title').value || 'Track');
    593. 

  593.     const fmtEl  = document.getElementById('format');
    594. 

  594.     const ext    = (fmtEl && fmtEl.value) || 'm4a';
    595. 

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

  596.     const dir = album ? `${root}/Music/${album}` : `${root}/Music/${artist} - Singles`;
    597. 

  597.     path = `${dir}/${trackPrefix}${title}.${ext}`;
    598. 

  598. 

  599.   } else {  // series
    600. 

  600.     const series  = sanitize(getSeriesName());
    601. 

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

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

  603.     const epTitle = sanitize(document.getElementById('episode_title').value ||
    604. 

  604.                              document.getElementById('title').value || 'Episode Title');
    605. 

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

  606.   }
    607. 

  607. 

  608.   const el = document.getElementById('path-preview');
    609. 

  609.   el.textContent = `→ ${path}`;
    610. 

  610.   el.classList.add('visible');
    611. 

  611. }
    612. 

  612. 

  613. function sanitize(s) {
    614. 

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

  615. }
    616. 

  616. 

  617. // Live preview on common fields
    618. 

  618. ['title','author','upload_date','series','episode_title','season','episode','year',
    619. 

  619.  'artist','album','track','music_year','genre'].forEach(id => {
    620. 

  620.   const el = document.getElementById(id);
    621. 

  621.   if (el) el.addEventListener('input', updatePathPreview);
    622. 

  622. });
    623. 

  623. 

  624. // ── Submit ─────────────────────────────────────────────────────────────────────
    625. 

  625. async function submitJob() {
    626. 

  626.   const url = document.getElementById('url-input').value.trim();
    627. 

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

  628. 

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

  630.   const year = currentType === 'music'
    631. 

  631.     ? document.getElementById('music_year').value.trim()
    632. 

  632.     : document.getElementById('year').value.trim();
    633. 

  633. 

  634.   const payload = {
    635. 

  635.     url,
    636. 

  636.     media_type:    currentType,
    637. 

  637.     title:         document.getElementById('title').value.trim(),
    638. 

  638.     author:        document.getElementById('author').value.trim(),
    639. 

  639.     upload_date:   document.getElementById('upload_date').value.trim(),
    640. 

  640.     year:          year,
    641. 

  641.     description:   probeData.description || '',
    642. 

  642.     // Series fields
    643. 

  643.     folder:        currentType === 'series' ? getSeriesName() : '',
    644. 

  644.     series:        document.getElementById('series').value.trim(),
    645. 

  645.     season:        parseInt(document.getElementById('season').value) || 1,
    646. 

  646.     episode:       parseInt(document.getElementById('episode').value) || 1,
    647. 

  647.     episode_title: document.getElementById('episode_title').value.trim(),
    648. 

  648.     // Music fields
    649. 

  649.     artist:        currentType === 'music' ? getArtistName() : '',
    650. 

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

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

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

  653.     format:        currentType === 'music' ? document.getElementById('format').value : '',
    654. 

  654.   };
    655. 

  655. 

  656.   const btn = document.getElementById('archive-btn');
    657. 

  657.   const originalText = btn.textContent;
    658. 

  658.   btn.disabled  = true;
    659. 

  659.   btn.innerHTML = '<span class="spinner"></span> Queuing…';
    660. 

  660. 

  661.   try {
    662. 

  662.     const res  = await fetch('/api/archive', {
    663. 

  663.       method:  'POST',
    664. 

  664.       headers: {'Content-Type': 'application/json'},
    665. 

  665.       body:    JSON.stringify(payload)
    666. 

  666.     });
    667. 

  667.     const data = await res.json();
    668. 

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

  669. 

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

  671.     clearForm();
    672. 

  672.     await loadBrowseData();   // refresh folder lists after potential new folder
    673. 

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

  674.     startPolling();
    675. 

  675.     // A fast job may already have advanced past the queued snapshot above.
    676. 

  676.     // Kick an immediate refresh so we catch running/done state without waiting
    677. 

  677.     // for the first poll interval.
    678. 

  678.     loadJobs();
    679. 

  679.   } catch(e) {
    680. 

  680.     toast(e.message, 'error');
    681. 

  681.   } finally {
    682. 

  682.     btn.disabled  = false;
    683. 

  683.     btn.textContent = originalText;
    684. 

  684.   }
    685. 

  685. }
    686. 

  686. 

  687. function clearForm() {
    688. 

  688.   ['url-input','title','author','upload_date','series','episode_title','year',
    689. 

  689.    'artist','album','track','music_year','genre'].forEach(id => {
    690. 

  690.     const el = document.getElementById(id);
    691. 

  691.     if (el) el.value = '';
    692. 

  692.   });
    693. 

  693.   document.getElementById('season').value  = '1';
    694. 

  694.   document.getElementById('episode').value = '1';
    695. 

  695.   const seriesSelect = document.getElementById('series-folder-select');
    696. 

  696.   if (seriesSelect) seriesSelect.value = '';
    697. 

  697.   const formatSel = document.getElementById('format');
    698. 

  698.   if (formatSel) {
    699. 

  699.     formatSel.value = 'm4a';
    700. 

  700.     onFormatChange();  // reset hint text
    701. 

  701.   }
    702. 

  702.   document.getElementById('preview-card').classList.remove('visible');
    703. 

  703.   document.getElementById('path-preview').classList.remove('visible');
    704. 

  704.   setProbeStatus('');
    705. 

  705.   probeData = {};
    706. 

  706. }
    707. 

  707. 

  708. // ── Job list ──────────────────────────────────────────────────────────────────
    709. 

  709. //
    710. 

  710. // Race-free rendering — backed by a server-side action_version counter.
    711. 

  711. //
    712. 

  712. // Every response from /api/jobs and from mutating endpoints carries an
    713. 

  713. // `action_version`. We keep the highest version we've applied locally and
    714. 

  714. // refuse to render anything older. This makes the order of fetch responses
    715. 

  715. // irrelevant: a stale poll cannot overwrite the result of a click, and a
    716. 

  716. // click's response (which always carries the freshest version, since
    717. 

  717. // mutations bump the counter before responding) always wins.
    718. 

  718. //
    719. 

  719. // Mutating endpoints also include the new job list in their response,
    720. 

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

  721. 

  722. let lastAppliedVersion = -1;
    723. 

  723. let lastServerInstance = null;
    724. 

  724. // pollTimer is declared once in the State block near the top of this script.
    725. 

  725. 

  726. /**
    727. 

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

  728.  * what's currently rendered. Stale snapshots are silently dropped.
    729. 

  729.  *
    730. 

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

  731.  *
    732. 

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

  733.  * changes (server restart, code reload, container redeployment), we reset
    734. 

  734.  * `lastAppliedVersion` so the fresh state is accepted even though the
    735. 

  735.  * counter started over at 0. Without this, the queue would silently freeze
    736. 

  736.  * after any backend restart until enough new actions occurred to push the
    737. 

  737.  * counter past the client's stale watermark.
    738. 

  738.  */
    739. 

  739. function applySnapshot(snapshot) {
    740. 

  740.   if (!snapshot || typeof snapshot.action_version !== 'number') return;
    741. 

  741. 

  742.   // Detect server restart and reset the version watermark.
    743. 

  743.   if (snapshot.server_instance && snapshot.server_instance !== lastServerInstance) {
    744. 

  744.     lastServerInstance = snapshot.server_instance;
    745. 

  745.     lastAppliedVersion = -1;
    746. 

  746.   }
    747. 

  747. 

  748.   if (snapshot.action_version < lastAppliedVersion) return;
    749. 

  749.   lastAppliedVersion = snapshot.action_version;
    750. 

  750.   const list = Array.isArray(snapshot.jobs) ? snapshot.jobs : [];
    751. 

  751.   renderJobsList(list);
    752. 

  752. }
    753. 

  753. 

  754. async function loadJobs() {
    755. 

  755.   try {
    756. 

  756.     const res  = await fetch('/api/jobs');
    757. 

  757.     const data = await res.json();
    758. 

  758.     applySnapshot(data);
    759. 

  759.   } catch(e) {
    760. 

  760.     // Network blip — leave the current view alone; next call retries.
    761. 

  761.   }
    762. 

  762. }
    763. 

  763. 

  764. function refreshJobs() {
    765. 

  765.   loadJobs().then(() => toast('refreshed', ''));
    766. 

  766. }
    767. 

  767. 

  768. function renderJobsList(jobs) {
    769. 

  769.   const list = document.getElementById('jobs-list');
    770. 

  770. 

  771.   // Update count badge
    772. 

  772.   document.getElementById('job-count').textContent =
    773. 

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

  774. 

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

  776.   if (!jobs.length) {
    777. 

  777.     const placeholder = document.createElement('div');
    778. 

  778.     placeholder.className   = 'empty-state';
    779. 

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

  780.     list.replaceChildren(placeholder);
    781. 

  781.     stopPolling();
    782. 

  782.     return;
    783. 

  783.   }
    784. 

  784. 

  785.   const frag = document.createDocumentFragment();
    786. 

  786.   for (const job of jobs) {
    787. 

  787.     const wrapper = document.createElement('div');
    788. 

  788.     wrapper.innerHTML = renderJob(job).trim();
    789. 

  789.     const card = wrapper.firstChild;
    790. 

  790.     if (card) frag.appendChild(card);
    791. 

  791.   }
    792. 

  792.   list.replaceChildren(frag);
    793. 

  793. 

  794.   // Poll only when work is in progress. When jobs exist but none are active,
    795. 

  795.   // coast through a short grace period before stopping (see requestStopPolling)
    796. 

  796.   // so a just-completed job's final state can't strand the queue.
    797. 

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

  798.   if (hasActive) startPolling(); else requestStopPolling();
    799. 

  799. }
    800. 

  800. 

  801. function renderJob(j) {
    802. 

  802.   const iconClass = j.media_type === 'movie' ? 'icon-film'
    803. 

  803.                   : j.media_type === 'music' ? 'icon-music'
    804. 

  804.                   : 'icon-tv';
    805. 

  805.   const iconLabel = j.media_type === 'movie' ? '🎬'
    806. 

  806.                   : j.media_type === 'music' ? '♪'
    807. 

  807.                   : 'TV';
    808. 

  808.   const pct     = Math.round(j.progress || 0);
    809. 

  809.   const fillCls = j.status === 'done' ? 'done' : j.status === 'error' ? 'error' : '';
    810. 

  810. 

  811.   let sub;
    812. 

  812.   if (j.media_type === 'movie') {
    813. 

  813.     sub = `movie  ${j.year || ''}`;
    814. 

  814.   } else if (j.media_type === 'music') {
    815. 

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

  816.   } else {
    817. 

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

  818.   }
    819. 

  819. 

  820.   const speed = j.status === 'running' && j.speed
    821. 

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

  822.   const outPath = j.output_path
    823. 

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

  824.   const error = j.status === 'error' && j.error
    825. 

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

  826. 

  827.   const retryBtn = j.status === 'error'
    828. 

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

  829. 

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

  831.   <div class="job-top">
    832. 

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

  833.     <div class="job-info">
    834. 

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

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

  836.     </div>
    837. 

  837.     <div class="job-status status-${j.status}">${j.status}</div>
    838. 

  838.   </div>
    839. 

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

  840.   ${speed}${outPath}${error}
    841. 

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

  842. </div>`;
    843. 

  843. }
    844. 

  844. 

  845. async function retryJob(id) {
    846. 

  846.   try {
    847. 

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

  848.     const data = await res.json();
    849. 

  849.     toast(`Job ${id} retrying`, 'success');
    850. 

  850.     applySnapshot(data);
    851. 

  851.   } catch(e) {
    852. 

  852.     toast('Retry failed', 'error');
    853. 

  853.     return;
    854. 

  854.   }
    855. 

  855.   startPolling();
    856. 

  856. }
    857. 

  857. 

  858. async function deleteJob(id) {
    859. 

  859.   // Optimistic: remove the card immediately so the click feels responsive.
    860. 

  860.   // The server's response then becomes the authoritative state via applySnapshot.
    861. 

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

  862.   if (card) card.remove();
    863. 

  863.   try {
    864. 

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

  865.     const data = await res.json();
    866. 

  866.     applySnapshot(data);
    867. 

  867.   } catch(e) {
    868. 

  868.     // Network blip — fall back to fetching fresh state
    869. 

  869.     await loadJobs();
    870. 

  870.   }
    871. 

  871. }
    872. 

  872. 

  873. async function clearFinished() {
    874. 

  874.   const btn = document.getElementById('clear-finished-btn');
    875. 

  875.   btn.disabled = true;
    876. 

  876.   try {
    877. 

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

  878.     const data = await res.json();
    879. 

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

  880.     applySnapshot(data);
    881. 

  881.   } catch(e) {
    882. 

  882.     toast('Clear failed', 'error');
    883. 

  883.   } finally {
    884. 

  884.     btn.disabled = false;
    885. 

  885.   }
    886. 

  886. }
    887. 

  887. 

  888. // ── Polling ───────────────────────────────────────────────────────────────────
    889. 

  889. // `stopPolling` doesn't halt immediately. When no job is active we keep polling
    890. 

  890. // for a few extra cycles (the grace period). This protects against a race where
    891. 

  891. // a fast job's snapshot arrives showing everything done, polling stops, but a
    892. 

  892. // later state change (or an out-of-order response) would otherwise be missed —
    893. 

  893. // which manifested as completed jobs vanishing from the queue.
    894. 

  894. let pollGrace = 0;
    895. 

  895. const POLL_GRACE_CYCLES = 3;
    896. 

  896. 

  897. function startPolling() {
    898. 

  898.   pollGrace = 0;
    899. 

  899.   if (!pollTimer) pollTimer = setInterval(loadJobs, 2500);
    900. 

  900. }
    901. 

  901. 

  902. function requestStopPolling() {
    903. 

  903.   // Called by renderJobsList when nothing is active. Coast for a few cycles
    904. 

  904.   // before actually stopping, so late updates still land.
    905. 

  905.   if (pollGrace < POLL_GRACE_CYCLES) {
    906. 

  906.     pollGrace += 1;
    907. 

  907.   } else {
    908. 

  908.     stopPolling();
    909. 

  909.   }
    910. 

  910. }
    911. 

  911. 

  912. function stopPolling() {
    913. 

  913.   if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
    914. 

  914.   pollGrace = 0;
    915. 

  915. }
    916. 

  916. 

  917. // ── Toast ─────────────────────────────────────────────────────────────────────
    918. 

  918. function toast(msg, type='') {
    919. 

  919.   const el = document.getElementById('toast');
    920. 

  920.   el.textContent = msg;
    921. 

  921.   el.className   = 'show ' + type;
    922. 

  922.   setTimeout(() => el.classList.remove('show'), 3500);
    923. 

  923. }
    924. 

  924. 

  925. // ── Utils ─────────────────────────────────────────────────────────────────────
    926. 

  926. function escHtml(s) {
    927. 

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

  928.                         .replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    929. 

  929. }
    930. 

  930. function escAttr(s) { return escHtml(s); }
    931. 

  931. 

  932. /** Escape a string for safe use in a CSS attribute selector value. */
    933. 

  933. function cssEsc(s) {
    934. 

  934.   if (window.CSS && CSS.escape) return CSS.escape(String(s ?? ''));
    935. 

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

  936. }
    937. 

  937. </script>
    938. 

  938. </body>
    939. 

  939. </html>
    940.