Audio songs: one-folder storage, version-aware download/share, GPU-checked renders

Storage structure
- All audio tracks (primary + per-language) now live in one folder per song with
  unique lowercase names ({slug}-{lang}-{id}); no more tracks/ subfolder.
- Generated renders (download video + HLS) moved into the song's local-only cache/
  subfolder, separated from source files (never synced to NAS, safe to wipe).
- tracks:reorganize artisan command (dry-run default) consolidates legacy files,
  updates DB paths, and deletes orphans + empty folders.
- CLAUDE.md documents the canonical layout as a global rule (identical local + NAS).

Version-aware download & share
- Download MP3/Video and Share now act on the version being played; ?track={id}
  is carried through share links and auto-selects audio + title + flag + about +
  OG/meta on open.

GPU + visualizer
- Setting::gpuUsable() runs a cached health probe (nvidia-smi + nvenc smoke test,
  256x144) before sending any encode to the GPU; falls back to CPU otherwise.
- Visualizer "Download Video" bakes in equal-width, cover-coloured, translucent
  frequency bars; loop-filter rebuild makes generation ~25x faster.

Image cropper
- result-callback mode + per-song cover-slide cropper in upload/edit (modal + mobile).

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

resources/views/components/image-cropper.blade.php

@@ -11,6 +11,7 @@
     $outputWidth = (int) $attributes->get('output-width', 0); // final output px width (0 = viewport size)
     $targetInput = $attributes->get('target-input', '');   // form mode: ID of file input to set result on
     $previewImg  = $attributes->get('preview-img', '');    // ID of img to update with preview
+    $resultCallback = $attributes->get('result-callback', ''); // callback mode: JS fn called with the cropped File
 @endphp
 
 @once
@@ -202,8 +203,22 @@
     var outputWidth  = {{ $outputWidth > 0 ? $outputWidth : 0 }};
     var targetInputId = '{{ $targetInput }}';   // form mode: ID of the file input to intercept
     var previewImgId  = '{{ $previewImg }}';
+    var resultCbName  = '{{ $resultCallback }}'; // callback mode: name of a global fn given the cropped File
 
-    var isFormMode = targetInputId !== '';
+    var isFormMode     = targetInputId !== '';
+    var isCallbackMode = resultCbName !== '';
+
+    // In callback mode the host function decides when to close / advance, so we
+    // never auto-close here — we just hand the File back and reset the button.
+    function deliverResult(file) {
+        if (typeof window[resultCbName] === 'function') window[resultCbName](file);
+        var sb = document.getElementById('tcSaveBtn_' + id);
+        var st = document.getElementById('tcSaveBtnText_' + id);
+        var ab = document.getElementById('tcAsIsBtn_' + id);
+        if (sb) sb.disabled = false;
+        if (ab) ab.disabled = false;
+        if (st) st.textContent = 'Crop & Save';
+    }
 
     function getCsrf() {
         var m = document.querySelector('meta[name="csrf-token"]');
@@ -343,6 +358,11 @@
         var cropOpts = outputWidth > 0 ? { type: 'base64', width: outputWidth } : { type: 'base64' };
 
         cropperInst.crop(cropOpts).then(function (base64) {
+            if (isCallbackMode) {
+                var cbName = originalFile ? originalFile.name : 'cropped.png';
+                deliverResult(base64ToFile(base64, cbName));
+                return;
+            }
             if (isFormMode) {
                 var fname = originalFile ? originalFile.name : 'cropped.png';
                 setOnTargetInput(base64ToFile(base64, fname));
@@ -370,7 +390,9 @@
     window['tcUploadAsIs_' + id] = function () {
         if (!originalFile) { window.closeCropperModal(id); return; }
 
-        if (isFormMode) {
+        if (isCallbackMode) {
+            deliverResult(originalFile);
+        } else if (isFormMode) {
             // Put the original (un-cropped) file on the target input so the form sees it.
             setOnTargetInput(originalFile);
             window.closeCropperModal(id);

resources/views/components/rich-text-editor.blade.php

@@ -0,0 +1,304 @@
+@props([
+    'name'        => '',
+    'id'          => null,
+    'value'       => '',
+    'placeholder' => 'Tell viewers about this content…',
+    'class'       => '',
+    'style'       => '',
+    'minHeight'   => '110px',
+])
+
+@php
+    $rid = $id ?: 'rte-' . \Illuminate\Support\Str::random(6);
+@endphp
+
+{{-- ── Shared CSS (once per page) ─────────────────────────────────────────── --}}
+@once('rte-styles')
+<style>
+.rte-wrap { position: relative; }
+.rte-source { display: none !important; }
+.rte-toolbar {
+    display: flex; flex-wrap: wrap; gap: 2px; align-items: center;
+    background: var(--bg-dark, #0f0f0f);
+    border: 1px solid var(--border-color, #303030); border-bottom: none;
+    border-radius: 8px 8px 0 0; padding: 5px 6px;
+}
+.rte-tbtn {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 30px; height: 30px; border: none; border-radius: 6px;
+    background: none; color: var(--text-secondary, #aaa);
+    font-size: 15px; cursor: pointer; transition: background .12s, color .12s; outline: none;
+}
+.rte-tbtn:hover { background: rgba(255,255,255,.08); color: var(--text-primary, #f1f1f1); }
+.rte-tbtn.active { background: rgba(230,30,30,.18); color: var(--brand-red, #e61e1e); }
+.rte-sep { width: 1px; height: 18px; background: var(--border-color, #303030); margin: 0 3px; flex-shrink: 0; }
+.rte-editable {
+    background: var(--bg-dark, #0f0f0f);
+    border: 1px solid var(--border-color, #303030); border-radius: 0 0 8px 8px;
+    padding: 10px 12px; color: var(--text-primary, #f1f1f1);
+    font-size: 13px; line-height: 1.6; font-family: inherit;
+    outline: none; overflow-y: auto; word-break: break-word;
+}
+.rte-editable:focus { border-color: var(--brand-red, #e61e1e); }
+.rte-editable:empty::before { content: attr(data-placeholder); color: var(--text-secondary, #777); pointer-events: none; }
+.rte-editable p { margin: 0 0 8px; }
+.rte-editable p:last-child { margin-bottom: 0; }
+.rte-editable h2 { font-size: 18px; font-weight: 700; margin: 4px 0 8px; }
+.rte-editable h3 { font-size: 15px; font-weight: 700; margin: 4px 0 6px; }
+.rte-editable ul, .rte-editable ol { margin: 0 0 8px; padding-left: 22px; }
+.rte-editable blockquote { margin: 0 0 8px; padding-left: 12px; border-left: 3px solid var(--border-color, #303030); color: var(--text-secondary, #aaa); }
+.rte-editable a { color: #3ea6ff; }
+.rte-editable a.action-btn, .rte-editable a.action-btn-primary, .rte-editable a.action-btn-danger {
+    color: inherit; text-decoration: none;
+}
+
+/* inline popover (link / button / emoji) */
+.rte-pop {
+    position: absolute; z-index: 1090; min-width: 240px;
+    background: var(--bg-secondary, #1e1e1e); border: 1px solid var(--border-color, #303030);
+    border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.55); padding: 10px;
+}
+.rte-pop[hidden] { display: none; }
+.rte-pop label { display: block; font-size: 11px; color: var(--text-secondary, #aaa); margin: 0 0 4px; }
+.rte-pop input[type=text] {
+    width: 100%; box-sizing: border-box; background: var(--bg-dark, #0f0f0f);
+    border: 1px solid var(--border-color, #303030); border-radius: 6px;
+    padding: 7px 9px; color: var(--text-primary, #f1f1f1); font-size: 13px; outline: none; margin-bottom: 8px;
+}
+.rte-pop input[type=text]:focus { border-color: var(--brand-red, #e61e1e); }
+.rte-pop-actions { display: flex; gap: 6px; justify-content: flex-end; }
+.rte-pop-btn { border: none; border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
+.rte-pop-btn.cancel { background: rgba(255,255,255,.08); color: var(--text-secondary, #aaa); }
+.rte-pop-btn.ok { background: var(--brand-red, #e61e1e); color: #fff; }
+.rte-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 180px; overflow-y: auto; }
+.rte-emoji-grid button { border: none; background: none; font-size: 18px; line-height: 1; padding: 5px; border-radius: 6px; cursor: pointer; }
+.rte-emoji-grid button:hover { background: rgba(255,255,255,.1); }
+</style>
+@endonce
+
+{{-- ── Engine (once per page) ─────────────────────────────────────────────── --}}
+@once('rte-script')
+<script>
+(function () {
+    if (window.RTE) return;
+
+    var EMOJI = ('😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 😉 😍 🥰 😘 😎 🤩 🥳 🤔 🤨 😐 😴 😭 😡 🥺 😱 '
+        + '👍 👎 👏 🙌 🙏 💪 🔥 ✨ ⭐ 🌟 💯 ✅ ❌ ❓ ❗ ❤️ 🧡 💛 💚 💙 💜 🖤 💔 💕 💖 '
+        + '🎉 🎊 🎁 🏆 🥇 ⚽ 🏀 🏈 🎵 🎶 🎬 📺 📱 💻 📷 🎤 🎮 🚀 🌍 ☀️ 🌙 ⚡ 💧 🍀').split(' ');
+
+    function saveSel(ed) {
+        var s = window.getSelection();
+        if (s && s.rangeCount && ed.contains(s.anchorNode)) ed._range = s.getRangeAt(0).cloneRange();
+    }
+    function restoreSel(ed) {
+        ed.focus();
+        if (ed._range) {
+            var s = window.getSelection();
+            s.removeAllRanges();
+            s.addRange(ed._range);
+        }
+    }
+    function exec(ed, cmd, val) { restoreSel(ed); document.execCommand(cmd, false, val || null); sync(ed); }
+    // Alignment must be emitted as CSS text-align (not the legacy align attribute,
+    // which the server sanitizer strips), so toggle styleWithCSS just for these.
+    function execAlign(ed, cmd) {
+        restoreSel(ed);
+        try { document.execCommand('styleWithCSS', false, true); } catch (e) {}
+        document.execCommand(cmd, false, null);
+        try { document.execCommand('styleWithCSS', false, false); } catch (e) {}
+        sync(ed);
+    }
+    function sync(ed) {
+        var src = ed._source;
+        var html = ed.innerHTML.trim();
+        if (html === '<br>' || html === '<div><br></div>' || html === '<p><br></p>') html = '';
+        src.value = html;
+        src.dispatchEvent(new Event('input', { bubbles: true }));
+        src.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+
+    function tbtn(icon, title, fn) {
+        var b = document.createElement('button');
+        b.type = 'button'; b.className = 'rte-tbtn'; b.title = title;
+        b.innerHTML = '<i class="bi bi-' + icon + '"></i>';
+        b.addEventListener('mousedown', function (e) { e.preventDefault(); });
+        b.addEventListener('click', function (e) { e.preventDefault(); fn(e, b); });
+        return b;
+    }
+    function sep() { var s = document.createElement('span'); s.className = 'rte-sep'; return s; }
+
+    function buildPopover(wrap, ed) {
+        var pop = document.createElement('div');
+        pop.className = 'rte-pop'; pop.hidden = true;
+        wrap.appendChild(pop);
+        document.addEventListener('click', function (e) {
+            if (!pop.hidden && !pop.contains(e.target) && !wrap.querySelector('.rte-toolbar').contains(e.target)) pop.hidden = true;
+        });
+        return pop;
+    }
+    function openPop(pop, anchorBtn, html) {
+        pop.innerHTML = html;
+        pop.hidden = false;
+        var tb = anchorBtn.closest('.rte-toolbar');
+        pop.style.top = (tb.offsetTop + tb.offsetHeight + 4) + 'px';
+        pop.style.left = Math.min(anchorBtn.offsetLeft, tb.offsetWidth - 250) + 'px';
+        var f = pop.querySelector('input[type=text]');
+        if (f) setTimeout(function () { f.focus(); }, 10);
+    }
+
+    function linkForm(pop, ed, anchorBtn, asButton) {
+        saveSel(ed);
+        var sel = window.getSelection();
+        var selText = (sel && ed.contains(sel.anchorNode)) ? sel.toString() : '';
+        openPop(pop, anchorBtn,
+            '<label>' + (asButton ? 'Button label' : 'Link text') + '</label>'
+            + '<input type="text" class="rte-f-text" value="' + selText.replace(/"/g, '&quot;') + '" placeholder="' + (asButton ? 'Click here' : 'Text to show') + '">'
+            + '<label>URL</label>'
+            + '<input type="text" class="rte-f-url" placeholder="https://…">'
+            + '<div class="rte-pop-actions"><button type="button" class="rte-pop-btn cancel">Cancel</button>'
+            + '<button type="button" class="rte-pop-btn ok">Insert</button></div>');
+        pop.querySelector('.cancel').onclick = function () { pop.hidden = true; };
+        pop.querySelector('.ok').onclick = function () {
+            var txt = pop.querySelector('.rte-f-text').value.trim();
+            var url = pop.querySelector('.rte-f-url').value.trim();
+            if (!url) { pop.querySelector('.rte-f-url').focus(); return; }
+            if (!/^([a-z][a-z0-9+.\-]*:|\/|#)/i.test(url)) url = 'https://' + url;
+            txt = txt || url;
+            var esc = function (s) { return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'); };
+            var cls = asButton ? ' class="action-btn action-btn-primary"' : '';
+            var a = '<a href="' + esc(url) + '" target="_blank"' + cls + '>' + esc(txt) + '</a>';
+            restoreSel(ed);
+            document.execCommand('insertHTML', false, a + (asButton ? '<span>&nbsp;</span>' : ''));
+            sync(ed);
+            pop.hidden = true;
+        };
+    }
+
+    function emojiForm(pop, ed, anchorBtn) {
+        saveSel(ed);
+        var grid = '<div class="rte-emoji-grid">';
+        for (var i = 0; i < EMOJI.length; i++) grid += '<button type="button" data-e="' + EMOJI[i] + '">' + EMOJI[i] + '</button>';
+        grid += '</div>';
+        openPop(pop, anchorBtn, grid);
+        pop.querySelectorAll('.rte-emoji-grid button').forEach(function (b) {
+            b.addEventListener('mousedown', function (e) { e.preventDefault(); });
+            b.addEventListener('click', function () {
+                restoreSel(ed);
+                document.execCommand('insertText', false, b.dataset.e);
+                sync(ed);
+                pop.hidden = true;
+            });
+        });
+    }
+
+    window.RTE = {
+        init: function (wrap) {
+            if (!wrap || wrap.dataset.rteReady) return;
+            var src = wrap.querySelector('.rte-source');
+            if (!src) return;
+            // Skip un-instantiated templates whose placeholders aren't filled in yet
+            // (e.g. edit-__TPL__-desc / __DESCNAME__). Closed modals are aria-hidden
+            // but must still init, so we only key off the placeholder marker here.
+            var marker = (src.id || '') + '|' + (src.getAttribute('name') || '');
+            if (marker.indexOf('__') !== -1) return;
+            wrap.dataset.rteReady = '1';
+
+            var toolbar = document.createElement('div');
+            toolbar.className = 'rte-toolbar';
+
+            var ed = document.createElement('div');
+            ed.className = 'rte-editable';
+            ed.contentEditable = 'true';
+            ed.setAttribute('data-placeholder', src.getAttribute('placeholder') || '');
+            ed.style.minHeight = wrap.dataset.minHeight || '110px';
+            ed.innerHTML = src.value || '';
+            ed._source = src;
+            src._editable = ed;
+
+            var pop = null;
+            function P() { return pop || (pop = buildPopover(wrap, ed)); }
+
+            toolbar.appendChild(tbtn('type-bold', 'Bold', function () { exec(ed, 'bold'); }));
+            toolbar.appendChild(tbtn('type-italic', 'Italic', function () { exec(ed, 'italic'); }));
+            toolbar.appendChild(tbtn('type-underline', 'Underline', function () { exec(ed, 'underline'); }));
+            toolbar.appendChild(tbtn('type-strikethrough', 'Strikethrough', function () { exec(ed, 'strikeThrough'); }));
+            toolbar.appendChild(sep());
+            toolbar.appendChild(tbtn('type-h2', 'Heading', function () {
+                var inH = document.queryCommandValue('formatBlock').toLowerCase();
+                exec(ed, 'formatBlock', (inH === 'h2' || inH === '<h2>') ? 'p' : 'h2');
+            }));
+            toolbar.appendChild(tbtn('list-ul', 'Bulleted list', function () { exec(ed, 'insertUnorderedList'); }));
+            toolbar.appendChild(tbtn('list-ol', 'Numbered list', function () { exec(ed, 'insertOrderedList'); }));
+            toolbar.appendChild(tbtn('quote', 'Quote', function () { exec(ed, 'formatBlock', 'blockquote'); }));
+            toolbar.appendChild(sep());
+            toolbar.appendChild(tbtn('text-left', 'Align left', function () { execAlign(ed, 'justifyLeft'); }));
+            toolbar.appendChild(tbtn('text-center', 'Align center', function () { execAlign(ed, 'justifyCenter'); }));
+            toolbar.appendChild(tbtn('text-right', 'Align right', function () { execAlign(ed, 'justifyRight'); }));
+            toolbar.appendChild(sep());
+            toolbar.appendChild(tbtn('link-45deg', 'Insert link', function (e, b) { linkForm(P(), ed, b, false); }));
+            toolbar.appendChild(tbtn('hand-index-thumb', 'Insert button link', function (e, b) { linkForm(P(), ed, b, true); }));
+            toolbar.appendChild(tbtn('emoji-smile', 'Insert emoji', function (e, b) { emojiForm(P(), ed, b); }));
+            toolbar.appendChild(sep());
+            toolbar.appendChild(tbtn('eraser', 'Clear formatting', function () { exec(ed, 'removeFormat'); }));
+
+            src.parentNode.insertBefore(toolbar, src);
+            src.parentNode.insertBefore(ed, src);
+
+            ed.addEventListener('input', function () { sync(ed); });
+            ed.addEventListener('keyup', function () { saveSel(ed); });
+            ed.addEventListener('mouseup', function () { saveSel(ed); });
+            ed.addEventListener('blur', function () { saveSel(ed); sync(ed); });
+            // Paste as plain text to avoid junk markup.
+            ed.addEventListener('paste', function (e) {
+                e.preventDefault();
+                var t = (e.clipboardData || window.clipboardData).getData('text/plain');
+                document.execCommand('insertText', false, t);
+                sync(ed);
+            });
+            // Keep editor in sync if external code rewrites the textarea value.
+            src.addEventListener('rte:refresh', function () { ed.innerHTML = src.value || ''; });
+
+            var form = src.closest('form');
+            if (form && !form.dataset.rteSubmitBound) {
+                form.dataset.rteSubmitBound = '1';
+                form.addEventListener('submit', function () {
+                    form.querySelectorAll('.rte-editable').forEach(function (e2) { if (e2._source) sync(e2); });
+                }, true);
+            }
+        },
+        initAll: function (root) {
+            (root || document).querySelectorAll('.rte-wrap:not([data-rte-ready])').forEach(function (w) { RTE.init(w); });
+        }
+    };
+
+    // Auto-init any editor markup added later (modals, JS-cloned track rows).
+    var mo = new MutationObserver(function (muts) {
+        for (var i = 0; i < muts.length; i++) {
+            for (var j = 0; j < muts[i].addedNodes.length; j++) {
+                var n = muts[i].addedNodes[j];
+                if (n.nodeType !== 1) continue;
+                if (n.classList && n.classList.contains('rte-wrap')) RTE.init(n);
+                if (n.querySelectorAll) n.querySelectorAll('.rte-wrap:not([data-rte-ready])').forEach(function (w) { RTE.init(w); });
+            }
+        }
+    });
+    function rteBoot() {
+        RTE.initAll();
+        if (document.body) mo.observe(document.body, { childList: true, subtree: true });
+    }
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', rteBoot);
+    } else {
+        rteBoot();
+    }
+}());
+</script>
+@endonce
+
+{{-- ── Instance ───────────────────────────────────────────────────────────── --}}
+<div class="rte-wrap {{ $class }}" data-min-height="{{ $minHeight }}" @if($style) style="{{ $style }}" @endif>
+    <textarea class="rte-source"
+              name="{{ $name }}"
+              id="{{ $rid }}"
+              placeholder="{{ $placeholder }}">{{ $value }}</textarea>
+</div>

resources/views/components/track-editor-form.blade.php

@@ -207,15 +207,10 @@
         </div>
     </div>
 
-    {{-- ── Description ────────────────────────────────────────────── --}}
+    {{-- ── Description (rich text) ────────────────────────────────── --}}
     <div class="um-field">
         <label class="um-lbl" style="font-size:10px;margin-bottom:6px;">Description @if(!$isPrimary)<span class="um-lbl-hint">optional</span>@endif</label>
-        <textarea name="{{ $descName }}"
-                  id="{{ $descId }}"
-                  class="um-input um-textarea"
-                  rows="3"
-                  style="font-size:13px;padding:9px 12px;"
-                  placeholder="Tell viewers about this content…"></textarea>
+        <x-rich-text-editor :name="$descName" :id="$descId" placeholder="Tell viewers about this content…" />
     </div>
 
     {{-- ── Video file + Thumbnail (video / match mode, primary only) ── --}}

resources/views/components/video-actions.blade.php

@@ -168,7 +168,7 @@
 
     @if ($video->isShareable())
         <button class="action-btn desktop-action"
-            onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}', '{{ route('videos.recordShare', $video) }}')">
+            onclick="shareCurrent('{{ $video->share_url }}', '{{ addslashes($video->title) }}', '{{ route('videos.recordShare', $video) }}')">
             <i class="bi bi-share"></i><span>Share</span>
         </button>
     @endif
@@ -271,7 +271,7 @@
 
             @if ($video->isShareable())
                 <button class="dropdown-item"
-                    onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}', '{{ route('videos.recordShare', $video) }}')">
+                    onclick="shareCurrent('{{ $video->share_url }}', '{{ addslashes($video->title) }}', '{{ route('videos.recordShare', $video) }}')">
                     <i class="bi bi-share"></i> Share
                 </button>
             @endif
@@ -514,6 +514,14 @@ if (!window._slideshowDlInit) {
         document.getElementById('sl-dl-cancel').textContent = 'Close';
     }
 
+    // Share the version the viewer is on: append ?track={id} so the recipient's player
+    // opens directly on that language (window._ytpTrackId; 0 = primary → plain link).
+    window.shareCurrent = function (baseUrl, title, recordUrl) {
+        var t = window._ytpTrackId || 0;
+        var url = t ? baseUrl + (baseUrl.indexOf('?') === -1 ? '?' : '&') + 'track=' + t : baseUrl;
+        if (typeof window.openShareModal === 'function') window.openShareModal(url, title, recordUrl);
+    };
+
     window.startSlideshowDownload = function (routeKey) {
         if (_currentKey && _currentKey !== routeKey) {
             // Different video — reset
@@ -521,6 +529,17 @@ if (!window._slideshowDlInit) {
             _pollTimer = null;
         }
         _currentKey = routeKey;
+
+        // Act on the version the viewer is currently playing: the visualizer toggle AND
+        // the selected language track (window._ytpTrackId; 0 = primary).
+        var vizOn   = localStorage.getItem('audioBarsOn') === '1';
+        var trackId = window._ytpTrackId || 0;
+        var _p = [];
+        if (vizOn)   _p.push('visualizer=1');
+        if (trackId) _p.push('track=' + trackId);
+        var qs    = _p.length ? '?' + _p.join('&') : '';   // generate + download
+        var qsAmp = _p.length ? '&' + _p.join('&') : '';   // appended to progress ?duration=
+
         _maxPct = 0;
         document.getElementById('sl-dl-bar').style.background = '';  // restore gradient
         document.getElementById('sl-dl-cancel').textContent = 'Cancel';
@@ -532,7 +551,7 @@ if (!window._slideshowDlInit) {
         var csrfMeta = document.querySelector('meta[name="csrf-token"]');
         var token = (typeof csrf !== 'undefined' ? csrf : '') || (csrfMeta ? csrfMeta.getAttribute('content') : '');
 
-        fetch('/videos/' + routeKey + '/slideshow/generate', {
+        fetch('/videos/' + routeKey + '/slideshow/generate' + qs, {
             method: 'POST',
             headers: { 'X-CSRF-TOKEN': token, 'Accept': 'application/json' }
         })
@@ -546,7 +565,7 @@ if (!window._slideshowDlInit) {
                 document.getElementById('sl-dl-cancel').style.display = 'none';
                 setTimeout(function () {
                     window._slideshowDlCancel();
-                    window.location.href = '/videos/' + routeKey + '/download';
+                    window.location.href = '/videos/' + routeKey + '/download' + qs;
                 }, 600);
                 return;
             }
@@ -559,7 +578,7 @@ if (!window._slideshowDlInit) {
             _setProgress(2, 'Generating video...');
 
             _pollTimer = setInterval(function () {
-                fetch('/videos/' + routeKey + '/slideshow/progress?duration=' + duration, {
+                fetch('/videos/' + routeKey + '/slideshow/progress?duration=' + duration + qsAmp, {
                     headers: { 'Accept': 'application/json' }
                 })
                 .then(function (r) { return r.json(); })
@@ -581,7 +600,7 @@ if (!window._slideshowDlInit) {
                         document.getElementById('sl-dl-cancel').style.display = 'none';
                         setTimeout(function () {
                             window._slideshowDlCancel();
-                            window.location.href = '/videos/' + routeKey + '/download';
+                            window.location.href = '/videos/' + routeKey + '/download' + qs;
                         }, 600);
                         return;
                     }