Fix visibility of CDN/P2P toggle in video modal

Moved the `.video-modal__source-toggle-container` out of the `.video-modal__stats` container (which is hidden when not in P2P mode) to a permanent location in the modal layout. This ensures the toggle remains visible regardless of the active playback source, allowing users to switch between CDN and P2P even if the P2P stats panel is hidden. The toggle logic in `VideoModal.js` correctly handles the visibility of the toggle buttons themselves based on source availability.
This commit is contained in:
google-labs-jules[bot] committed 2026-01-15 01:39:20 +00:00
1 parent b9171e9e05
commit e3b5d95e23
1 file changed
+27 -26
+27 -26
View File
@@ -120,6 +120,33 @@
</div>
</div>
<div class="video-modal__source-toggle-container watch-container" data-source-toggle-container hidden>
<div class="inline-flex rounded-lg bg-overlay-panel-soft p-1">
<button
type="button"
class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors focus-ring"
data-source-toggle="url"
aria-pressed="true"
>
<span class="flex items-center gap-2">
<span>CDN</span>
<span class="text-xs opacity-70" data-active-servers-count>1 server</span>
</span>
</button>
<button
type="button"
class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors focus-ring"
data-source-toggle="torrent"
aria-pressed="false"
>
<span class="flex items-center gap-2">
<span>P2P</span>
<span class="text-xs opacity-70" data-active-peers-count>0 peers</span>
</span>
</button>
</div>
</div>
<div
class="watch-container"
data-video-stats-container
@@ -129,32 +156,6 @@
class="video-modal__stats rounded-2xl border border-border border-opacity-20 bg-surface px-6 py-5 shadow-sm"
data-video-stats
>
<div class="video-modal__source-toggle-container mb-4" data-source-toggle-container hidden>
<div class="inline-flex rounded-lg bg-overlay-panel-soft p-1">
<button
type="button"
class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors focus-ring"
data-source-toggle="url"
aria-pressed="true"
>
<span class="flex items-center gap-2">
<span>CDN</span>
<span class="text-xs opacity-70" data-active-servers-count>1 server</span>
</span>
</button>
<button
type="button"
class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors focus-ring"
data-source-toggle="torrent"
aria-pressed="false"
>
<span class="flex items-center gap-2">
<span>P2P</span>
<span class="text-xs opacity-70" data-active-peers-count>0 peers</span>
</span>
</button>
</div>
</div>
<div class="video-modal__progress">
<progress
id="modalProgress"