From e3b5d95e23dbb77a7387dd3cf1459bd447231708 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 15 Jan 2026 01:39:20 +0000
Subject: [PATCH] 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.
---
 components/video-modal.html | 53 +++++++++++++++++++------------------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/components/video-modal.html b/components/video-modal.html
index 56d1f716..97ac4479 100644
--- a/components/video-modal.html
+++ b/components/video-modal.html
@@ -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"