From 304bd1e77a5442f614aacd2b35f330777118b2cd Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Mon, 19 Oct 2026 15:32:53 -0700
Subject: merge with upstream https://github.com/RblSb/SyncTube

---
 res/index.html | 178 ++++++++++++++++++++++++++++++++-------------------------
 1 file changed, 100 insertions(+), 78 deletions(-)

(limited to 'res/index.html')

diff --git a/res/index.html b/res/index.html
index 02ef525..3e2673a 100644
--- a/res/index.html
+++ b/res/index.html
@@ -25,7 +25,11 @@
   <main id="video">
     <!-- Player -->
     <section id="player">
-      <div id="ytapiplayer" class="embed-responsive"></div>
+      <div id="ytapiplayer" class="embed-responsive">
+        <button id="fullscreen-chat-btn" class="fullscreen-chat-btn">
+          <ion-icon name="chatbubble"></ion-icon>
+        </button>
+      </div>
       <!-- Video info -->
       <div class="info video-info">
         <header>
@@ -33,18 +37,12 @@
         </header>
         <!-- Video controls -->
         <span class="controls">
-          <button id="togglesynch" title="${toggleVideoSync}">
-            <ion-icon id="pause-indicator" name="play"></ion-icon>
-          </button>
           <button id="mediarefresh" title="${refreshPlayer}">
             <ion-icon name="refresh"></ion-icon>
           </button>
           <button id="fullscreenbtn" title="${fullscreenPlayer}">
             <ion-icon name="expand"></ion-icon>
           </button>
-          <button id="voteskip" title="${voteForSkip}">
-            <ion-icon name="play-skip-forward"></ion-icon>
-          </button>
         </span>
       </div>
     </section>
@@ -67,16 +65,36 @@
             data-target="#addfromurl" aria-expanded="false">
             <ion-icon name="add"></ion-icon>
           </button>
-          <button class="collapsed" id="showcustomembed" title="${embedCustomFrame}" data-toggle="collapse"
-            data-target="#customembed" aria-expanded="false">
-            <ion-icon name="code"></ion-icon>
-          </button>
-          <button id="shuffleplaylist" title="${shufflePlaylist}">
-            <ion-icon name="shuffle"></ion-icon>
-          </button>
-          <button id="clearplaylist" title="${clearPlaylist}">
-            <ion-icon name="close"></ion-icon>
-          </button>
+          <div class="playlist-menu-wrap">
+            <button id="playlist-menu-btn">
+              <ion-icon name="menu"></ion-icon>
+              <div id="playlist-menu-indicator" style="display: none;">
+              </div>
+            </button>
+            <div id="playlist-menu-dropdown" class="playlist-menu-dropdown" style="display: none;">
+              <button class="playlist-menu-item" id="voteskip" title="${voteForSkip}">
+                <ion-icon name="play-skip-forward"></ion-icon>
+                <span><span id="voteskip-text">${voteForSkip}</span> <span class="hotkey-hint">(Alt-S)</span></span>
+              </button>
+              <button class="playlist-menu-item" id="togglesynch" title="${disableVideoSync}">
+                <ion-icon name="unlink"></ion-icon>
+                <span>${disableVideoSync} <span class="hotkey-hint">(Alt-U)</span></span>
+              </button>
+              <button class="collapsed playlist-menu-item" id="showcustomembed" data-toggle="collapse"
+                data-target="#customembed" aria-expanded="false">
+                <ion-icon name="code"></ion-icon>
+                <span>${embedCustomFrame}</span>
+              </button>
+              <button class="playlist-menu-item" id="shuffleplaylist">
+                <ion-icon name="shuffle"></ion-icon>
+                <span>${shufflePlaylist}</span>
+              </button>
+              <button class="playlist-menu-item" id="clearplaylist">
+                <ion-icon name="close"></ion-icon>
+                <span>${clearPlaylist}</span>
+              </button>
+            </div>
+          </div>
         </span>
       </div>
       <!-- Playlist metadata -->
@@ -112,7 +130,7 @@
             <input id="voiceoverurl" type="text" placeholder="${voiceOverAudioTrackUrlOptional}">
           </div>
           <div class="checkbox-row">
-            <label class="checkbox-row-item">
+            <label class="checkbox-row-item" style="display: none;">
               <input id="add-temp" class="add-temp" type="checkbox" checked>${addAsTemporary}
             </label>
             <label class="checkbox-row-item">
@@ -131,9 +149,6 @@
           <input id="customembed-title" type="text" placeholder="${optionalTitle}">
           <textarea id="customembed-content" rows="5"
             placeholder="${pasteEmbedCodeAndClick}. &#10;${acceptableEmbedCodesAre} &lt;iframe&gt; ${or} &lt;object&gt;. &#10;${customEmbedsCannotBeSynchronized}."></textarea>
-          <label class="checkbox-row-item">
-            <input id="add-temp-embed" class="add-temp" type="checkbox" checked>${addAsTemporary}
-          </label>
           <div class="queue-buttons">
             <button id="ce_queue_next">${queueNext}</button>
             <button id="ce_queue_end">${queueLast}</button>
@@ -163,7 +178,7 @@
       <button id="userlisttoggle" title="${toggleUserList}">
         <ion-icon name="chevron-down"></ion-icon>
         <span id="usercount">${connection}...</span>
-        <ion-icon id="pause-indicator-portrait" name="play" style="display: none;"></ion-icon>
+        <ion-icon id="pause-indicator-chat" name="play" style="display: none;"></ion-icon>
       </button>
 	      <span>
 	        <button id="togglechat" title="Collapse Chat">
@@ -176,68 +191,75 @@
         </button>
       </span>
     </div>
-    <!-- User list -->
-    <div id="userlist-wrap" class="collapsible">
-      <div id="userlist"></div>
-    </div>
-    <!-- Settings list -->
-    <ul id="optionsPanel" class="collapse" aria-expanded="false">
-      <div id="optionsList" class="collapse">
-        <div>
-          <div>
-            <h4>${account}</h4>
-            <li><button id="exitBtn">${login}</button></li>
-          </div>
-          <div>
-            <h4>${general}</h4>
-            <li><button id="hotkeysBtn"><span>${hotkeys}</span></button></li>
-            <li><button id="swapLayoutBtn" title="${swapLayout}"><span>${swapLayout}</span></button></li>
-          </div>
+    <div id="chat-body">
+      <!-- User list -->
+      <div id="userlist-wrap" class="collapsible">
+        <div id="userlist"></div>
+      </div>
+      <!-- Settings list -->
+      <ul id="optionsPanel" class="collapse" aria-expanded="false">
+        <div id="optionsList" class="collapse">
           <div>
-            <h4>${video}</h4>
-            <li><button id="synchThresholdBtn"><span>${synchThreshold}</span></button></li>
-            <li><button id="setVideoUrlBtn"><span>${setVideoUrl}</span></button></li>
-            <li><button id="selectLocalVideoBtn"><span>${selectLocalVideo}</span></button></li>
-            <li><button id="removePlayerBtn"><span>${removePlayer}</span></button></li>
-            <li><a href="/admin-register"><button><span>${registerAdmin}</span></button></a></li>
-          </div>
-          <div id="adminMenu" style="display: none;">
-            <h4>${chat}</h4>
-            <li><button id="clearchatbtn"><span>${clearChat}</span></button></li>
+            <div class="options-category">
+              <h4>${account}</h4>
+              <li><button id="exitBtn">${login}</button></li>
+              <li><a href="/admin-register"><button><span>${registerAdmin}</span></button></a></li>
+            </div>
+            <div class="options-category">
+              <h4>${general}</h4>
+              <li><button id="swapLayoutBtn" title="${swapLayout}"><span>${swapLayout}</span></button></li>
+              <li><button id="pageFullscreenBtn" title="${pageFullscreen}"><span>${pageFullscreen}</span></button></li>
+              <li><button id="synchThresholdBtn"><span>${synchThreshold}</span></button></li>
+              <li><button id="hotkeysBtn"><span>${hotkeys}</span></button></li>
+            </div>
+            <div class="options-category">
+              <h4>${player}</h4>
+              <li><button id="fullscreenActionBtn"></button></li>
+              <li><button id="setVideoUrlBtn"><span>${setVideoUrl}</span></button></li>
+              <li><button id="selectLocalVideoBtn"><span>${selectLocalVideo}</span></button></li>
+              <li><button id="removePlayerBtn"><span>${removePlayer}</span></button></li>
+            </div>
+            <div id="adminMenu" class="options-category" style="display: none;">
+              <h4>${chat}</h4>
+              <li><button id="clearchatbtn"><span>${clearChat}</span></button></li>
+            </div>
           </div>
         </div>
-      </div>
-    </ul>
-    <!-- Messages -->
-    <div id="messagebuffer" style="flex-direction: column-reverse;"></div>
-    <div id="chat-inputs-wrapper">
-      <div id="dynamic-chin" class="collapsed" style="display: none;"></div>
-      <button id="scroll-to-chat-end" style="display: none; opacity: 0;" class="active">
-        <ion-icon name="arrow-down" role="img" class="md hydrated"></ion-icon>
-      </button>
-      <!-- Message input -->
-      <div id="chatbox">
-        <input id="chatline" type="text" placeholder="${chatlinePlaceholder}">
-        <button id="smilesbtn" title="${emotes}">
-          <ion-icon name="happy"></ion-icon>
+      </ul>
+      <!-- Messages -->
+      <div id="messagebuffer" style="flex-direction: column-reverse;"></div>
+      <div id="chat-inputs-wrapper">
+        <div id="dynamic-chin" class="collapsed" style="display: none;"></div>
+        <button id="scroll-to-chat-end" style="display: none; opacity: 0;" class="active">
+          <ion-icon name="arrow-down" role="img" class="md hydrated"></ion-icon>
         </button>
-      </div>
-      <div id="smiles-wrap" class="collapsible" style="display: none;">
-        <div id="smiles-list"></div>
-      </div>
-      <!-- Guest login -->
-      <div id="guestlogin" style="display: none;">
-        <label>${enterAsGuest}</label>
-        <input id="guestname" type="text" placeholder="${yourName}">
-      </div>
-      <div id="guestpassword" style="display: none;">
-        <label>${enterUserPassword}</label>
-        <div id="passwordbox">
-          <input id="guestpass" type="text" placeholder="${yourPassword}">
-          <button id="guestpass_icon">
-            <ion-icon name="eye"></ion-icon>
+        <div id="chat-commands-wrap" class="collapsible" style="display: none;">
+          <div id="chat-commands-list"></div>
+        </div>
+        <!-- Message input -->
+        <div id="chatbox">
+          <input id="chatline" type="text" placeholder="${chatlinePlaceholder}">
+          <button id="smilesbtn" title="${emotes}">
+            <ion-icon name="happy"></ion-icon>
           </button>
         </div>
+        <div id="smiles-wrap" class="collapsible" style="display: none;">
+          <div id="smiles-list"></div>
+        </div>
+        <!-- Guest login -->
+        <div id="guestlogin" style="display: none;">
+          <label>${enterAsGuest}</label>
+          <input id="guestname" type="text" placeholder="${yourName}">
+        </div>
+        <div id="guestpassword" style="display: none;">
+          <label>${enterUserPassword}</label>
+          <div id="passwordbox">
+            <input id="guestpass" type="text" placeholder="${yourPassword}">
+            <button id="guestpass_icon">
+              <ion-icon name="eye"></ion-icon>
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   </aside>
-- 
cgit v1.2.3