CyTube/templates/channel.pug
Calvin Montgomery 5500054b84 Add resolution switcher plugin for video.js
Allows switching resolutions via the video.js UI.  Also added support on
the player side for 540p, 1440p, and 2160p videos, although the metadata
extractors have not been updated to provide these sources yet.
2017-07-01 16:54:19 -07:00

260 lines
12 KiB
Plaintext

doctype html
html(lang="en")
head
include head
+head()
link(href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css", rel="stylesheet")
link(rel="stylesheet", href="/css/video-js.css")
link(rel="stylesheet", href="/css/videojs-resolution-switcher.css")
body
#wrap
nav.navbar.navbar-inverse.navbar-fixed-top(role="navigation")
include nav
+navheader()
#nav-collapsible.collapse.navbar-collapse
- var cname = `/${channelPath}/${channelName}`
ul.nav.navbar-nav
+navdefaultlinks(cname)
li: a(href="javascript:void(0)", onclick="javascript:showUserOptions()") Options
li: a#showchansettings(href="javascript:void(0)", onclick="javascript:showChannelSettings()") Channel Settings
li.dropdown
a.dropdown-toggle(href="#", data-toggle="dropdown") Layout
b.caret
ul.dropdown-menu
li: a(href="#" onclick="javascript:chatOnly()") Chat Only
li: a(href="#" onclick="javascript:removeVideo(event)") Remove Video
+navsuperadmin(true)
+navloginlogout(cname)
section#mainpage
.container
#motdrow.row
.col-lg-12.col-md-12
#motdwrap.well
button#togglemotd.close.pull-right(type="button")
span.glyphicon.glyphicon-minus
#motd
.clear
#announcements.row
#drinkbarwrap.row
#drinkbar.col-lg-12.col-md-12
h1#drinkcount
#main.row
#chatwrap.col-lg-5.col-md-5
#chatheader
i#userlisttoggle.glyphicon.glyphicon-chevron-down.pull-left.pointer(title="Show/Hide Userlist")
span#usercount.pointer Not Connected
span#modflair.label.label-default.pull-right.pointer Name Color
#userlist
#messagebuffer.linewrap
input#chatline.form-control(type="text", maxlength="240", style="display: none")
#guestlogin.input-group
span.input-group-addon Guest login
input#guestname.form-control(type="text", placeholder="Name")
#videowrap.col-lg-7.col-md-7
p#videowrap-header
span#resize-video-smaller.glyphicon.glyphicon-minus.pointer(title="Make the video smaller")
span#resize-video-larger.glyphicon.glyphicon-plus.pointer(title="Make the video larger")
span#currenttitle Nothing Playing
.embed-responsive.embed-responsive-16by9
#ytapiplayer.embed-responsive-item
#controlsrow.row
#leftcontrols.col-lg-5.col-md-5
button#newpollbtn.btn.btn-sm.btn-default New Poll
button#emotelistbtn.btn.btn-sm.btn-default Emote List
#rightcontrols.col-lg-7.col-md-7
#plcontrol.btn-group
button#showsearch.btn.btn-sm.btn-default(title="Search for a video", data-toggle="collapse", data-target="#searchcontrol")
span.glyphicon.glyphicon-search
button#showmediaurl.btn.btn-sm.btn-default(title="Add video from URL", data-toggle="collapse", data-target="#addfromurl")
span.glyphicon.glyphicon-plus
button#showcustomembed.btn.btn-sm.btn-default(title="Embed a custom frame", data-toggle="collapse", data-target="#customembed")
span.glyphicon.glyphicon-th-large
button#showplaylistmanager.btn.btn-sm.btn-default(title="Manage playlists", data-toggle="collapse", data-target="#playlistmanager")
span.glyphicon.glyphicon-list
button#clearplaylist.btn.btn-sm.btn-default(title="Clear the playlist")
span.glyphicon.glyphicon-trash
button#shuffleplaylist.btn.btn-sm.btn-default(title="Shuffle the playlist")
span.glyphicon.glyphicon-sort
button#qlockbtn.btn.btn-sm.btn-danger(title="Playlist locked")
span.glyphicon.glyphicon-lock
#videocontrols.btn-group.pull-right
button#mediarefresh.btn.btn-sm.btn-default(title="Reload the video player")
span.glyphicon.glyphicon-retweet
button#fullscreenbtn.btn.btn-sm.btn-default(title="Make the video player fullscreen")
span.glyphicon.glyphicon-fullscreen
button#getplaylist.btn.btn-sm.btn-default(title="Retrieve playlist links")
span.glyphicon.glyphicon-link
button#voteskip.btn.btn-sm.btn-default(title="Voteskip")
span.glyphicon.glyphicon-step-forward
#playlistrow.row
#leftpane.col-lg-5.col-md-5
#leftpane-inner.row
#pollwrap.col-lg-12.col-md-12
#playlistmanagerwrap.col-lg-12.col-md-12
#rightpane.col-lg-7.col-md-7
#rightpane-inner.row
#searchcontrol.collapse.plcontrol-collapse.col-lg-12.col-md-12
.vertical-spacer
.input-group
input#library_query.form-control(type="text", placeholder="Search query")
span.input-group-btn
button#library_search.btn.btn-default Library
span.input-group-btn
button#youtube_search.btn.btn-default YouTube
.checkbox
label
input.add-temp(type="checkbox")
| Add as temporary
ul#library.videolist.col-lg-12.col-md-12
#addfromurl.collapse.plcontrol-collapse.col-lg-12.col-md-12
.vertical-spacer
.input-group
input#mediaurl.form-control(type="text", placeholder="Media URL")
span.input-group-btn
button#queue_next.btn.btn-default Next
span.input-group-btn
button#queue_end.btn.btn-default At End
.checkbox
label
input.add-temp(type="checkbox")
| Add as temporary
div#addfromurl-queue
#customembed.collapse.plcontrol-collapse.col-lg-12.col-md-12
.vertical-spacer
.input-group
input#customembed-title.form-control(type="text", placeholder="Title (optional)")
span.input-group-btn
button#ce_queue_next.btn.btn-default Next
span.input-group-btn
button#ce_queue_end.btn.btn-default At End
.checkbox
label
input.add-temp(type="checkbox")
| Add as temporary
| Paste the embed code below and click Next or At End.
| Acceptable embed codes are <code>&lt;iframe&gt;</code> and <code>&lt;object&gt;</code> tags. <strong>CUSTOM EMBEDS CANNOT BE SYNCHRONIZED.</strong>
textarea#customembed-content.input-block-level.form-control(rows="3")
#playlistmanager.collapse.plcontrol-collapse.col-lg-12.col-md-12
.vertical-spacer
.input-group
input#userpl_name.form-control(type="text", placeholder="Playlist Name")
span.input-group-btn
button#userpl_save.btn.btn-default Save
.checkbox
label
input.add-temp(type="checkbox")
| Add as temporary
ul#userpl_list.videolist
#queuefail.col-lg-12.col-md-12
.vertical-spacer
.col-lg-12.col-md-12
ul#queue.videolist
#plmeta
span#plcount 0 items
span#pllength 00:00:00
#resizewrap.row
.col-lg-5.col-md-5
#videowidth.col-lg-7.col-md-7
#sitefooter
include pagefooter
#useroptions.modal.fade(tabindex="-1", role="dialog", aria-hidden="true")
.modal-dialog
.modal-content
.modal-header
button.close(data-dismiss="modal", aria-hidden="true") &times;
h4 User Preferences
ul.nav.nav-tabs
li: a(href="#us-general", data-toggle="tab") General
li: a(href="#us-playback", data-toggle="tab") Playback
li: a(href="#us-chat", data-toggle="tab") Chat
li: a(href="#us-scriptcontrol", data-toggle="tab") Script Access
li: a(href="#us-mod", data-toggle="tab", style="") Moderator
.modal-body
.tab-content
include useroptions
+us-general()
+us-playback()
+us-chat()
+us-scripts()
+us-mod()
.modal-footer
button.btn.btn-primary(type="button", data-dismiss="modal", onclick="javascript:saveUserOptions()") Save
button.btn.btn-default(type="button", data-dismiss="modal") Close
#emotelist.modal.fade(tabindex="-1", role="dialog", aria-hidden="true")
.modal-dialog.modal-dialog-nonfluid
.modal-content
.modal-header
button.close(data-dismiss="modal", aria-hidden="true") &times;
h4 Emote List
.modal-body
.pull-left
input.emotelist-search.form-control(type="text", placeholder="Search")
.pull-right
.checkbox
label
input.emotelist-alphabetical(type="checkbox")
| Sort alphabetically
.emotelist-paginator-container
table.emotelist-table
tbody
.modal-footer
#channeloptions.modal.fade(tabindex="-1", role="dialog", aria-hidden="true")
.modal-dialog
.modal-content
.modal-header
button.close(data-dismiss="modal", aria-hidden="true") &times;
h4 Channel Settings
ul.nav.nav-tabs
li.active: a(href="#cs-miscoptions", data-toggle="tab") General Settings
li: a(href="#cs-adminoptions", data-toggle="tab") Admin Settings
li.dropdown
a#cs-edit-dd-toggle(href="#", data-toggle="dropdown") Edit
span.caret
ul.dropdown-menu
li: a(href="#cs-chatfilters", data-toggle="tab", onclick="javascript:socket.emit('requestChatFilters')") Chat Filters
li: a(href="#cs-emotes", data-toggle="tab") Emotes
li: a(href="#cs-motdeditor", data-toggle="tab", tabindex="-1") MOTD
li: a(href="#cs-csseditor", data-toggle="tab", tabindex="-1") CSS
li: a(href="#cs-jseditor", data-toggle="tab", tabindex="-1") Javascript
li: a(href="#cs-permedit", data-toggle="tab", tabindex="-1") Permissions
li: a(href="#cs-chanranks", data-toggle="tab", tabindex="-1", onclick="javascript:socket.emit('requestChannelRanks')") Moderators
li: a(href="#cs-banlist", data-toggle="tab", tabindex="-1", onclick="javascript:socket.emit('requestBanlist')") Ban list
li: a(href="#cs-chanlog", data-toggle="tab", onclick="javascript:socket.emit('readChanLog')") Log
.modal-body
.tab-content
include channeloptions
+miscoptions()
+adminoptions()
+motdeditor()
+csseditor()
+jseditor()
+banlist()
+recentjoins()
+chanranks()
+chatfilters()
+emotes()
+chanlog()
+permeditor()
.modal-footer
button.btn.btn-default(type="button", data-dismiss="modal") Close
#pmbar
include footer
+footer()
script(id="socketio-js", src=sioSource)
script(src="/js/data.js")
script(src="/js/util.js")
script(src="/js/tabcomplete.js")
script(src="/js/player.js")
script(src="/js/paginator.js")
script(src="/js/ui.js")
script(src="/js/callbacks.js")
script(defer, src="https://www.youtube.com/iframe_api")
script(defer, src="https://api.dmcdn.net/all.js")
script(defer, src="/js/sc.js")
script(defer, src="/js/froogaloop.min.js")
script(defer, src="/js/video.js")
script(defer, src="/js/videojs-contrib-hls.min.js")
script(defer, src="/js/videojs-resolution-switcher.js")
script(defer, src="https://player.twitch.tv/js/embed/v1.js")