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]>

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

@@ -128,9 +128,9 @@ $sizeClasses = match($size) {
                     </a>
                 </li>
                 <li>
-                    <a class="dropdown-item" href="javascript:void(0)" onclick="openPlaylistModal('{{ $video->getRouteKey() }}')">
+                    <x-save-to-playlist-button :video="$video" tag="a" class="dropdown-item">
                         <i class="bi bi-bookmark"></i> Save to playlist
-                    </a>
+                    </x-save-to-playlist-button>
                 </li>
                 @if($video->allow_download)
                 <li>
@@ -957,39 +957,6 @@ function saveToWatchLater(videoId) {
     .catch(error => console.error('Error:', error));
 }
 
-// Global function to open playlist modal
-function openPlaylistModal(videoId) {
-    // Set the current video ID for the modal as global variable
-    window.currentVideoIdForModal = videoId;
-
-    // Close any open dropdown menus first
-    const activeDropdowns = document.querySelectorAll('.dropdown-menu.show');
-    activeDropdowns.forEach(function(dropdown) {
-        dropdown.classList.remove('show');
-    });
-
-    // Also close Bootstrap dropdowns by clicking the toggle
-    const dropdownToggles = document.querySelectorAll('.dropdown-toggle[aria-expanded="true"]');
-    dropdownToggles.forEach(function(toggle) {
-        toggle.click();
-    });
-
-    // Try to open the add to playlist modal
-    if (typeof openAddToPlaylistModal === 'function') {
-        openAddToPlaylistModal(videoId);
-    } else {
-        // Modal might not be loaded, try to find and show it directly
-        const modal = document.getElementById('addToPlaylistModal');
-        if (modal) {
-            modal.style.display = 'flex';
-            modal.style.opacity = '1';
-        } else {
-            // Fallback - redirect to login
-            window.location.href = '{{ route("login") }}?redirect=' + encodeURIComponent(window.location.href);
-        }
-    }
-}
-
 // Global function to add to queue
 function addToQueue(videoId) {
     showToast('Queue feature coming soon!', 'info');