diff options
Diffstat (limited to 'res/index.html')
| -rw-r--r-- | res/index.html | 178 |
1 files changed, 100 insertions, 78 deletions
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}. ${acceptableEmbedCodesAre} <iframe> ${or} <object>. ${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> |