Fix player UI: sports Highlights pane, scrubber knob, volume knob, description + save-to-playlist

Player/UI fixes:
- Sports (match) Highlights pane: move the toggle click-handler script out of
  the always-false @if(false ...) legacy block so the "Highlights" button opens,
  and emit videoId/isOwner with @json instead of {{ json_encode() }} (escaped
  quotes crashed the data/tab/CRUD block once route keys became hashid strings).
- Progress scrubber knob (video + audio players): center on the track line with
  translate(-50%, -50%); drop the margin-top hack that floated it above the line.
- Music player volume: give the slider wrap height so overflow:hidden no longer
  crops the knob; add a subtle thumb shadow for visibility.
- Music language menu: cap height to available space above the header, sticky
  header, internal scroll; keep controls from auto-hiding while the menu is open.
- Description box: re-check "Show more" overflow at every settle point (fonts,
  images, rAF, tab reopen) so SPA autonext keeps the expand button.

Also bundles pending work: save-to-playlist button component, playlist/channel
views, PlaylistController + NasSyncService, and component-usage tracker updates.

Co-Authored-By: Claude Opus 4.8 <[email protected]>
This commit is contained in:
ghassanandClaude Opus 4.8 committed 2026-07-28 22:12:58 +03:00
1 parent 80948efff7
commit 6b43a7060a
14 files changed
+236 -136

No files matched your search

+12 -1
View File
@@ -631,7 +631,15 @@ document.addEventListener('DOMContentLoaded', function () {
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeEditPlaylistModal(); });
});
function openEditPlaylistModal() { const m = document.getElementById('editPlaylistModal'); if (m) m.style.display = 'flex'; }
function openEditPlaylistModal() {
// Reset transient state every time the modal opens so flags from a previous
// open (e.g. the user clicked X then closed without saving) don't leak.
window._removePlThumb = false;
const fi = document.getElementById('playlistThumbnailInput');
if (fi) fi.value = '';
const m = document.getElementById('editPlaylistModal');
if (m) m.style.display = 'flex';
}
// Auto-open the edit modal when arriving with #edit (e.g. from playlist-card menu).
@if($canEdit ?? false)
if (window.location.hash === '#edit') {
@@ -645,6 +653,9 @@ function handleThumbUpload(input) {
const file = input.files[0];
if (!file.type.startsWith('image/')) { showToast('Please select an image file', 'error'); return; }
if (file.size > 20 * 1024 * 1024) { showToast('Image must be under 20 MB', 'error'); return; }
// Picking a new file cancels any pending "remove" intent — otherwise the
// controller would receive both `thumbnail` and `remove_thumbnail=1`.
window._removePlThumb = false;
const reader = new FileReader();
reader.onload = e => {
document.getElementById('playlistThumbnailPreview').src = e.target.result;