improved server-whisper, user join/leave messages, layout/UI overhaul

This commit is contained in:
rainbownapkin 2022-07-10 03:31:30 +00:00
parent e7adec32d7
commit 5f97baffc6
23 changed files with 729 additions and 917 deletions

View file

@ -66,28 +66,35 @@ html(lang="en")
#motd
.clear
#announcements.row
#main.row
#videowrap.col-lg-7.col-md-7
#titles.row
p#videowrap-header
i#blindvideo.glyphicon.glyphicon-chevron-down.pointer(title="Hide Player")
span#currenttitle Nothing Playing
span#minicontrol
span#vidmute.glyphicon.glyphicon-volume-up.pointer(title="Mute")
span#vidplay.glyphicon.glyphicon-play.pointer(title="Play")
span#viddur 0:00/0:00
span#mediarefresh.playercont.glyphicon.glyphicon-retweet.pointer(title="Reload the video player")
span#flipx-video.playercont.glyphicon.glyphicon-resize-horizontal.pointer(title="Flip Player Horizontally",onclick='javascript:$("#ytapiplayer").toggleClass("mirx")')
span#flipy-video.playercont.glyphicon.glyphicon-resize-vertical.pointer(title="Flip Player Vertically",onclick='javascript:$("#ytapiplayer").toggleClass("miry")')
span#showplaylist.playercont.glyphicon.glyphicon-list.pointer(style="display: none;", title="Show playlist")
span#resize-video-larger.playercont.glyphicon.glyphicon-plus.pointer(title="Make the video larger")
span#resize-video-smaller.playercont.glyphicon.glyphicon-minus.pointer(title="Make the video smaller")
span#cinemode.playercont.glyphicon.glyphicon-film.pointer(title="Toggle Cinema Mode")
span#lockaspect.playercont.glyphicon.glyphicon-picture.pointer(style="display: none;", title="Lock to Aspect Ratio")
span#latchvid.label.label-default.pull-right.pointer(style="display: none;") Sync
span#currenttitle Nothing Playing
#chatheader
i#blindchat.glyphicon.glyphicon-chevron-down.pointer(title="Hide Chat")
span#modflair.label.label-default.pull-right.pointer Name Color
span(style="flex-grow: 2;")
span#usercount.pointer Not Connected
i#userlisttoggle.glyphicon.glyphicon-chevron-down.pull-left.pointer(title="Show/Hide Userlist")
#main.row
#videowrap
.embed-responsive.embed-responsive-16by9
#ytapiplayer.embed-responsive-item
div#subliminaltoke
img(src="/img/tokeleaf.png")
h3 Take a <a onclick="chatsmack('!toke')">Toke!</a>
#chatwrap.col-lg-5.col-md-5
#chatheader
span#modflair.label.label-default.pull-right.pointer Name Color
span(style="flex-grow: 2;")
span#usercount.pointer Not Connected
i#userlisttoggle.glyphicon.glyphicon-chevron-down.pull-left.pointer(title="Show/Hide Userlist")
#chatwrap
#chatmain
#userlist
#fpaneldiv.fpanel(style="display: none;")
@ -106,42 +113,43 @@ html(lang="en")
span.input-group-addon Registration Required!
//input#guestname.form-control(type="text", placeholder="Name")
button#chatsend.btn.btn-sm.btn-default Send
#rightcontrols.col-lg-7.col-md-7
#plcontrol.btn-group
button#showmediaurl.btn.btn-sm.btn-default(title="Add video from URL", data-toggle="collapse", data-target="#addfromurl")
span.glyphicon.glyphicon-plus
button#showsearch.btn.btn-sm.btn-default(title="Channel History + Video Search", data-toggle="collapse", data-target="#searchcontrol")
span.glyphicon.glyphicon-search
button#showplaylistmanager.btn.btn-sm.btn-default(title="Manage playlists", data-toggle="collapse", data-target="#playlistmanager")
span.glyphicon.glyphicon-list
button#scrollitm.btn.btn-sm.btn-default(title="Scroll to Current Item",onclick="javascript:scrollQueue()")
span.glyphicon.glyphicon-hand-right
button#getplaylist.btn.btn-sm.btn-default(title="Retrieve playlist links")
span.glyphicon.glyphicon-link
button#shuffleplaylist.btn.btn-sm.btn-default(title="Shuffle the playlist")
span.glyphicon.glyphicon-sort
button#clearplaylist.btn.btn-sm.btn-default(title="Clear the playlist")
span.glyphicon.glyphicon-trash
button#qlockbtn.btn.btn-sm.btn-danger(title="Playlist locked")
span.glyphicon.glyphicon-lock
#playlistauxcont
span#hideplaylist.glyphicon.glyphicon-remove.pointer(title="Close Playlist")
span#blindItems.glyphicon.glyphicon-resize-small.pointer(title="Collapse All Items")
#plmeta
span#plcount 0 items
br
span#pllength 00:00:00
//#videocontrols.btn-group.pull-right
//button#fullscreenbtn.btn.btn-sm.btn-default(title="Make the video player fullscreen")This makes no sense, all supported players already have a full screen button. Not a fan of the placement of this anywho
//span.glyphicon.glyphicon-fullscreen
//button#voteskip.btn.btn-sm.btn-default(title="Voteskip") I don't like the way this is implemented, I think a poll based voteskip feature would be better, though I think it'd be better to not do a full rip-out
//span.glyphicon.glyphicon-step-forward
//this is being removed in favor of better UI
#leftcontrols.col-lg-5.col-md-5
button#newpollbtn.btn.btn-sm.btn-default New Poll
//#leftcontrols.col-lg-5.col-md-5
//button#newpollbtn.btn.btn-sm.btn-default New Poll
#playlistrow.row
#rightpane.col-lg-7.col-md-7
#rightpane
#rightpane-inner.row
#rightcontrols
#plcontrol.btn-group
button#showmediaurl.btn.btn-sm.btn-default(title="Add video from URL", data-toggle="collapse", data-target="#addfromurl")
span.glyphicon.glyphicon-plus
button#showsearch.btn.btn-sm.btn-default(title="Channel History + Video Search", data-toggle="collapse", data-target="#searchcontrol")
span.glyphicon.glyphicon-search
button#showplaylistmanager.btn.btn-sm.btn-default(title="Manage playlists", data-toggle="collapse", data-target="#playlistmanager")
span.glyphicon.glyphicon-list
button#scrollitm.btn.btn-sm.btn-default(title="Scroll to Current Item",onclick="javascript:scrollQueue()")
span.glyphicon.glyphicon-hand-right
button#getplaylist.btn.btn-sm.btn-default(title="Retrieve playlist links")
span.glyphicon.glyphicon-link
button#shuffleplaylist.btn.btn-sm.btn-default(title="Shuffle the playlist")
span.glyphicon.glyphicon-sort
button#clearplaylist.btn.btn-sm.btn-default(title="Clear the playlist")
span.glyphicon.glyphicon-trash
button#qlockbtn.btn.btn-sm.btn-danger(title="Playlist locked")
span.glyphicon.glyphicon-lock
#playlistauxcont
span#hideplaylist.glyphicon.glyphicon-remove.pointer(title="Close Playlist")
span#blindItems.glyphicon.glyphicon-resize-small.pointer(title="Collapse All Items")
#plmeta
span#plcount 0 items
br
span#pllength 00:00:00
#searchcontrol.collapse.plcontrol-collapse.col-lg-12.col-md-12
.vertical-spacer
.input-group
@ -200,10 +208,10 @@ html(lang="en")
#queuefail.col-lg-12.col-md-12
.col-lg-12.col-md-12
ul#queue.videolist
#leftpane.col-lg-5.col-md-5
#leftpane-inner.row
#pollwrap.col-lg-12.col-md-12
#playlistmanagerwrap.col-lg-12.col-md-12
//#leftpane.col-lg-5.col-md-5
//#leftpane-inner.row
//#pollwrap.col-lg-12.col-md-12
//#playlistmanagerwrap.col-lg-12.col-md-12
#resizewrap.row
.col-lg-5.col-md-5
#videowidth.col-lg-7.col-md-7

View file

@ -31,12 +31,6 @@ mixin us-general
.col-sm-8
select#us-theme.form-control
option(value="/css/themes/fore.st.css") fore.st
//
option(value="/css/themes/light.css") Light
option(value="/css/themes/slate.css") Slate
option(value="/css/themes/bootstrap-theme.min.css") Bootstrap
option(value="/css/themes/cyborg.css") Cyborg
option(value="/css/themes/modern.css") Modern
.col-sm-4
.col-sm-8
p.text-danger Changing layouts may require refreshing to take effect.
@ -91,6 +85,7 @@ mixin us-chat
h4 Chat Preferences
form.form-horizontal(action="javascript:void(0)")
+rcheckbox("us-chat-timestamp", "Show timestamps in chat")
+rcheckbox("us-timestamp-second", "Show secdons in chat timestamps")
+rcheckbox("us-sort-rank", "Sort userlist by rank")
+rcheckbox("us-sort-afk", "Sort AFKers to bottom")
+rcheckbox("us-legacy-emote", "Use legacy Cytube emote menu")