mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-10-29 18:00:23 +00:00
Moved to more partials
This commit is contained in:
Kasper Rynning-Tønnesen
28
server/public/partials/channel/chat.handlebars
Normal file
28
server/public/partials/channel/chat.handlebars
Normal file
@@ -0,0 +1,28 @@
|
||||
<div id="chat-container" class="tabs_height" style="display:none;">
|
||||
<ul class="" id="chat-bar">
|
||||
<li id="chat-log">
|
||||
<ul class="inherit-height">
|
||||
<li class="active inherit-height">
|
||||
<!--<ul id="chat inherit-height">-->
|
||||
<div class="row inherit-height">
|
||||
<div class="col s12">
|
||||
<ul class="tabs chatTabs tabs-fixed-width">
|
||||
<li class="tab col s3 chat-tab-li"><a class="active chat-tab truncate" href="#channelchat">{{list_name}}</a></li>
|
||||
<li class="tab col s3 chat-tab-li"><a class="chat-tab" href="#all_chat">All</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="channelchat" class="col s12 inherit-height"><ul id="chatchannel" class="inherit-height"></ul></div>
|
||||
<div id="all_chat" class="col s12 inherit-height"><ul id="chatall" class="inherit-height"></ul></div>
|
||||
</div>
|
||||
<!--</ul>-->
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="chat-input" class="row">
|
||||
<form action="#" id="chatForm">
|
||||
<input id="text-chat-input" class="col s9" name="input" type="text" autocomplete="off" placeholder="Chat" maxlength="150" />
|
||||
<a href="#" id="chat_submit" class="btn col s2 white waves-effect"><i class="material-icons">send</i></a>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
162
server/public/partials/channel/header.handlebars
Normal file
162
server/public/partials/channel/header.handlebars
Normal file
@@ -0,0 +1,162 @@
|
||||
<header>
|
||||
<div class="navbar-fixed">
|
||||
<nav id="nav">
|
||||
<div class="nav-wrapper">
|
||||
|
||||
<div class="brand-logo truncate zbrand">
|
||||
<a href="/" class="brand-logo brand-logo-navigate">
|
||||
<img id="zicon" src="/assets/images/z.svg" alt="zoff" title="Zoff" />
|
||||
</a>
|
||||
|
||||
<span id="chan" class="chan clickable truncate" title="Show big URL">{{list_name}}</span>
|
||||
</div>
|
||||
|
||||
<ul class="title-container">
|
||||
<li class="song-title cursor-pointer truncate" id="song-title">
|
||||
Loading...
|
||||
</li>
|
||||
<li class="search-container hide" id="search-wrapper">
|
||||
<input id="search" class="search_input" type="text" title="Search for songs..." placeholder="Find song on YouTube..." onsubmit="null;" autocomplete="off" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="right control-list noselect">
|
||||
<li id="search_loader" class="valign-wrapper">
|
||||
<div id="search_loader_inner">
|
||||
<div class="preloader-wrapper small search_loader_spinner">
|
||||
<div class="spinner-layer spinner-white-only">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div><div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div><div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a class="nav-btn" href="#find" id="search-btn">
|
||||
<i class="material-icons">search</i>
|
||||
<!--<span class="hover-text">Find</span>-->
|
||||
</a>
|
||||
</li>
|
||||
<!--<li>
|
||||
<a class="nav-btn prev" href="#prev">
|
||||
<i class="material-icons">skip_previous</i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="nav-btn skip" href="#skip">
|
||||
<i class="material-icons">skip_next</i>
|
||||
<span class="hover-text">Skip</span>
|
||||
</a>
|
||||
</li>-->
|
||||
<li>
|
||||
<a class="nav-btn" href="#stir" id="shuffle">
|
||||
<i class="material-icons">shuffle</i>
|
||||
<!--<span class="hover-text">Stir</span>-->
|
||||
</a>
|
||||
</li>
|
||||
<li class="settings-hamburger" data-activates="settings-bar" id="settings">
|
||||
<!--<a class="nav-btn" href="#settings" data-activates="settings-bar" id="settings">
|
||||
<i class="material-icons">menu</i>
|
||||
</a>-->
|
||||
<div class="hamburger-sidenav">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="side-nav" id="settings-bar">
|
||||
{{> channel/panel}}
|
||||
</ul>
|
||||
<div id="results" class="search_results hide">
|
||||
<div id="temp-results-container">
|
||||
<div id="temp-results" class="result-object">
|
||||
<div id="result" class="result">
|
||||
<img class="thumb" src="/assets/images/loading.png" alt="Thumb"/>
|
||||
|
||||
<div class="search-title truncate"></div>
|
||||
<span class="result_info"></span>
|
||||
<div class="waves-effect waves-orange btn-flat" id="add-many" title="Add several videos">
|
||||
<i class="material-icons">playlist_add</i>
|
||||
</div>
|
||||
<a href="#" target="_blank" class="waves-effect waves-orange btn-flat open-externally" title="Open on YouTube">
|
||||
<i class="material-icons">open_in_new</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="empty-results-container">
|
||||
<div id="empty-results" class="valign-wrapper">
|
||||
<span class="valign">No results found..</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div id="user_password" class="modal">
|
||||
<div class="modal-content">
|
||||
<h5>Locked Channel</h5>
|
||||
<form id="user-password-channel-form">
|
||||
<div class="input-field">
|
||||
<input id="user-pass-input" name="user-pass" type="password" autocomplete="off" />
|
||||
<label for="user-pass-input" class="noselect">Password</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat close-user-password">Close</a>
|
||||
<a href="#!" class="waves-effect waves-green btn-flat submit-user-password">Submit</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="delete_song_alert" class="modal">
|
||||
<div class="modal-content">
|
||||
<h5>Delete song</h5>
|
||||
<p>Are you sure you want to delete <span id="delete_song_title"></span>?</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class="waves-effect waves-red btn-flat accept-delete right red-text">Delete</a>
|
||||
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat cancel-song-delete">Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="help" class="modal modal-fixed-footer">
|
||||
<div class="modal-content">
|
||||
<h4>Help</h4>
|
||||
<p>When listening on a channel, there are some different buttons you can click.</p>
|
||||
<p>If you click the <i class="material-icons">menu</i>, you'll open the settings panel. Here you can change channel settings, decide if you want the computer you're on can be remote-controlled, enable or disable local mode, and import playlists from YouTube.</p>
|
||||
<p>The <i class="material-icons">search</i>, opens up a search inputfield. If you start typing here, the site will automagically search for your input!</p>
|
||||
<p>If you click the button next to the search icon <i class="material-icons">skip_next</i>, you'll skip on a song. The one next to that one <i class="material-icons">shuffle</i>, is shuffling of the list.</p>
|
||||
<p>Clicking a song in the playlist, gives it a vote. If you're logged in, you'll have a delete button at your disposal.</p>
|
||||
<p>Also, whenever you're logged in, you'll have three tabs in the top of the playlist thats called "Playlist", "Suggested" and "Chat". The playlist obviously shows the playlist. But the suggested tab, shows 5 songs that YouTube recommends based on the current song. There might also be user recommended songs. To add any of these, just click them as you'd click a song to vote.</p>
|
||||
<p>If you want to listen to the channel without any "hickups", or being affected by other peoples votes, there is a local mode. By opening up the settings <i class="material-icons">menu</i>, and checking the local mode checkbox, you will be free of synced listening! This will also enable seeking in the current playing video, perfect for those songs you only like a part of!</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="embed" class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>Embed</h4>
|
||||
<p>Copy the code in the textarea, and paste on your website.</p>
|
||||
<p>
|
||||
<input type="checkbox" id="autoplay" checked="checked" />
|
||||
<label for="autoplay" class="padding_right_26">Autoplay</label>
|
||||
<label for="width_embed" class="embed-label">Width</label>
|
||||
<input type="number" value="600" id="width_embed" class="settings_embed" min="1" />
|
||||
<label for="height_embed" class="padding_left_6 embed-label">Height</label>
|
||||
<input type="number" value="300" id="height_embed" class="settings_embed" min="1" />
|
||||
<label for="color_embed" class="padding_left_6 embed-label">Color</label>
|
||||
<input type="color" id="color_embed" class="settings_embed" value="#808080" />
|
||||
</p>
|
||||
<textarea id="embed-area"></textarea>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
511
server/public/partials/channel/panel.handlebars
Executable file
511
server/public/partials/channel/panel.handlebars
Executable file
@@ -0,0 +1,511 @@
|
||||
<li class="no-padding">
|
||||
<div class="nav-btn close-settings clickable hide-on-small-only" title="Close" id="closeSettings">
|
||||
<i class="material-icons auto-margin">close</i>
|
||||
</div>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li>
|
||||
<a class="col s9 collapsible-header bold waves-effect admin-settings">
|
||||
Channel Settings
|
||||
<i class="material-icons">tune</i>
|
||||
</a>
|
||||
<div class="collapsible-body">
|
||||
<form action="#" id="adminForm" onsubmit="return false;">
|
||||
<ul>
|
||||
<li class="white-bg">
|
||||
<div class="input-field field-settings">
|
||||
<i id="admin-lock" class="material-icons prefix">lock</i>
|
||||
<input placeholder="Enter admin password" id="password" type="password" class="validate" />
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<span class="switch-text">
|
||||
Add songs
|
||||
</span>
|
||||
<div class="switch"><label>
|
||||
<span class="left-span">Anyone</span>
|
||||
<input name="addsongs" type="checkbox" class="conf" /><span class="lever"></span>
|
||||
<span class="right-span">Admin</span>
|
||||
</label></div></li>
|
||||
|
||||
<li>
|
||||
<span class="switch-text">
|
||||
Vote
|
||||
</span>
|
||||
<div class="switch"><label>
|
||||
<span class="left-span">Anyone</span>
|
||||
<input name="vote" type="checkbox" class="conf" /><span class="lever"></span>
|
||||
<span class="right-span">Admin</span>
|
||||
</label></div></li>
|
||||
|
||||
<li><span class="switch-text">
|
||||
Shuffle
|
||||
</span>
|
||||
<div class="switch"><label>
|
||||
<span class="left-span">Anyone</span>
|
||||
<input name="shuffle" type="checkbox" class="conf" /><span class="lever"></span>
|
||||
<span class="right-span">Admin</span>
|
||||
</label></div></li>
|
||||
|
||||
<li><span class="switch-text">
|
||||
Skip
|
||||
</span>
|
||||
<div class="switch"><label>
|
||||
<span class="left-span">Anyone</span>
|
||||
<input name="skip" type="checkbox" class="conf" /><span class="lever"></span>
|
||||
<span class="right-span">Admin</span>
|
||||
</label></div></li>
|
||||
|
||||
<li><span class="switch-text">
|
||||
Song length
|
||||
</span>
|
||||
<div class="switch"><label>
|
||||
<span class="left-span">Any</span>
|
||||
<input name="longsongs" type="checkbox" class="conf" /><span class="lever"></span>
|
||||
<span class="right-span">Short</span>
|
||||
</label></div></li>
|
||||
|
||||
<li><span class="switch-text">
|
||||
Type
|
||||
</span>
|
||||
<div class="switch"><label>
|
||||
<span class="left-span">Any</span>
|
||||
<input name="allvideos" type="checkbox" class="conf" /><span class="lever"></span>
|
||||
<span class="right-span">Song</span>
|
||||
</label></div></li>
|
||||
|
||||
|
||||
<li><span class="switch-text">
|
||||
Frontpage
|
||||
</span>
|
||||
<div class="switch"><label>
|
||||
<span class="left-span">Hide</span>
|
||||
<input name="frontpage" type="checkbox" class="conf" /><span class="lever"></span>
|
||||
<span class="right-span">Display</span>
|
||||
</label></div></li>
|
||||
|
||||
<li><span class="switch-text">
|
||||
After play
|
||||
</span>
|
||||
<div class="switch"><label>
|
||||
<span class="left-span">Keep</span>
|
||||
<input name="removeplay" type="checkbox" class="conf" /><span class="lever"></span>
|
||||
<span class="right-span">Remove</span>
|
||||
</label></div></li>
|
||||
<li class="user-password-li hide"><span class="switch-text">
|
||||
Channel password
|
||||
</span>
|
||||
<div class="switch"><label>
|
||||
<span class="left-span">No</span>
|
||||
<input name="userpass" type="checkbox" class="conf password_protected" /><span class="lever"></span>
|
||||
<span class="right-span">Yes</span>
|
||||
</label></div></li>
|
||||
<li class="change_user_pass hide">
|
||||
<a href="#!" class="change_user_pass_btn btn waves-effect blue">Change password</a>
|
||||
</li>
|
||||
<li class="delete-all hide">
|
||||
<a href="#" class="delete-all-songs btn red">Delete all songs</a>
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="no-padding">
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li>
|
||||
<a class="collapsible-header bold waves-effect">Channel Info
|
||||
<i class="material-icons">info_outline</i>
|
||||
</a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li>
|
||||
<form id="thumbnail_form" style="display:none;">
|
||||
<div class="input-field col s12">
|
||||
<input type="text" placeholder="Thumbnail" name="chan_thumbnail" id="chan_thumbnail" autocomplete="off" />
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<li>
|
||||
<form id="description_form" style="display:none;">
|
||||
<div class="input-field col s12">
|
||||
<input type="text" placeholder="Description" name="chan_description" id="chan_description" autocomplete="off" maxlength="100" data-length="100" />
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<li class="channel_info_container">
|
||||
<div id="thumbnail_image">
|
||||
</div>
|
||||
<div id="description_area">
|
||||
This channel doesn't have a description yet..
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="no-padding remote-panel hide-on-small-only">
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li>
|
||||
<a class="collapsible-header bold waves-effect">Remote Control
|
||||
<i class="material-icons">settings_remote</i>
|
||||
</a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="switch-text">
|
||||
Enable Remote
|
||||
</span>
|
||||
<div class="switch"><label>
|
||||
Disabled
|
||||
<input name="remote_switch" type="checkbox" class="remote_switch_class" checked /><span class="lever"></span>
|
||||
Enabled
|
||||
</label>
|
||||
</div>
|
||||
<div><a id="code-link" target="_blank">
|
||||
<img id="code-qr" alt="QR code for control" title="Link to control this Zoff player" src="https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L%7C1&chl=http://zoff.me" />
|
||||
|
||||
<h4 id="code-text">ABBADUR</h4>
|
||||
</a></div>
|
||||
<p>
|
||||
You can control this Zoff instance from another device by going to <b>https://remote.zoff.me/</b>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="no-padding offline-panel">
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li>
|
||||
<a class="collapsible-header bold waves-effect">Local Mode
|
||||
<i class="material-icons">visibility_off</i>
|
||||
</a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="switch-text">
|
||||
Local Mode
|
||||
</span>
|
||||
<div class="switch"><label>
|
||||
Disabled
|
||||
<input name="offline_switch" type="checkbox" class="offline_switch_class" /><span class="lever"></span>
|
||||
Enabled
|
||||
</label>
|
||||
</div>
|
||||
<div id="offline-info">
|
||||
By enabling local mode, you won't receive updates in position of the currently playing song, you'll be able to vote as many times as you please, and you can skip to a specific location in the song.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="no-padding show-only-mobile">
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li>
|
||||
<a class="collapsible-header bold waves-effect import-a">Remote Controller
|
||||
<i class="material-icons">settings_remote</i>
|
||||
</a>
|
||||
<div class="collapsible-body">
|
||||
<ul id="remote-mobile-container">
|
||||
<li class="white-bg">
|
||||
<p id="remote_header">Control another client</p>
|
||||
<form action="#" class="row" id="remoteform">
|
||||
<div class="input-field col s12">
|
||||
<input
|
||||
class="input-field"
|
||||
type="text"
|
||||
id="remote_channel"
|
||||
name="chan"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
maxlength="10"
|
||||
data-length="10"
|
||||
placeholder="ID to remotecontroll"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
<div id="remote-sidebar-buttons-container">
|
||||
<button id="playbutton_remote" class="remote-button waves-effect btn green" disabled>
|
||||
<i id="remote_play" class="material-icons">play_arrow</i>
|
||||
</button>
|
||||
<button id="pausebutton_remote" class="remote-button waves-effect btn gray" disabled>
|
||||
<i id="remote_pause" class="material-icons">pause</i></button>
|
||||
<button id="skipbutton_remote" class="remote-button waves-effect btn blue" disabled>
|
||||
<i id="remote_skip" class="material-icons">skip_next</i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="" id="volume-control-remote" title="Volume"></div>
|
||||
<i class="material-icons slider-vol-mobile">volume_up</i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="no-padding">
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li>
|
||||
<a class="collapsible-header bold waves-effect import-a">Import Playlist
|
||||
<i class="material-icons">keyboard_arrow_down</i>
|
||||
</a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li class="white-bg">
|
||||
<div class="input-field field-settings youtube_unclicked import-buttons">
|
||||
<a class="modal-trigger waves-effect red btn import-youtube" title="Import from YouTube playlist">
|
||||
<img src="/assets/images/youtube.png" class="youtube_logo" alt="Youtube Logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="input-field field-settings youtube_clicked">
|
||||
<form action="#" id="listImport">
|
||||
<i class="material-icons import-icon">playlist_add</i>
|
||||
<input title="Input YouTube-playlist url here!" placeholder="Enter YouTube-list URL" id="import" type="text" class="validate" autocomplete="off" />
|
||||
<div class="valign playlist_loader_padding">
|
||||
<div id="playlist_loader" class="preloader-wrapper small active hide">
|
||||
<div class="spinner-layer spinner-blue">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spinner-layer spinner-red">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spinner-layer spinner-yellow">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spinner-layer spinner-green">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
<li class="white-bg">
|
||||
<div class="input-field field-settings spotify_unauthenticated import-buttons">
|
||||
<a class="modal-trigger waves-effect green lighten btn import-spotify-auth" title="Import Spotify playlist">
|
||||
<img src="/assets/images/spotify.png" class="left spotify_logo" alt="Spotify Logo" />Spotify
|
||||
</a>
|
||||
</div>
|
||||
<div class="input-field field-settings spotify_authenticated">
|
||||
<form action="#" id="listImportSpotify">
|
||||
<i class="material-icons import-icon">playlist_add</i>
|
||||
<input title="Input Spotify-playlist url here!" placeholder="Enter Spotify-list url" id="import_spotify" type="text" class="validate" autocomplete="off" />
|
||||
<div id="playlist_loader_spotify" class="valign playlist_loader_padding hide">
|
||||
<div class="preloader-wrapper small active">
|
||||
<div class="spinner-layer spinner-blue">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spinner-layer spinner-red">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spinner-layer spinner-yellow">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spinner-layer spinner-green">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
<li class="not-imported white-bg hide">
|
||||
<div class="center-align">Not imported</div>
|
||||
<ul class="input-field field-settings not-imported-container">
|
||||
<li class="white-bg not-imported-element">
|
||||
<div class="extra-add-text truncate"></div>
|
||||
<a href="#" class="waves-effect red lighten btn right extra-button extra-button-delete">X</a>
|
||||
<a href="#" class="waves-effect green lighten btn right extra-button extra-button-search">
|
||||
<i class="material-icons search-extra">search</i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="no-padding">
|
||||
<ul class="collapsible collapsible-accordion white-bg">
|
||||
<li>
|
||||
<a class="collapsible-header bold waves-effect export-a">Export Playlist
|
||||
<i class="material-icons">keyboard_arrow_up</i>
|
||||
</a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li class="white-bg">
|
||||
<div class="input-field field-settings youtube_export_button export-buttons">
|
||||
<a class="modal-trigger waves-effect red btn export-youtube" id="listExport" title="Export to YouTube">
|
||||
<img src="/assets/images/youtube.png" class="youtube_logo" alt="Youtube Logo" />
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="white-bg">
|
||||
<div class="input-field field-settings spotify_export_button export-buttons">
|
||||
<a class="modal-trigger waves-effect green lighten btn export-spotify-auth" title="Export Spotify playlist">
|
||||
<img src="/assets/images/spotify.png" class="left spotify_logo" alt="Spotify Logo" />Spotify
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="exported-list-container white-bg hide">
|
||||
<div class="valign playlist_loader_padding">
|
||||
<div class="row">
|
||||
<div class="col s2">
|
||||
<div id="playlist_loader_export" class="preloader-wrapper small active hide">
|
||||
<div class="spinner-layer spinner-blue">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spinner-layer spinner-red">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spinner-layer spinner-yellow">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spinner-layer spinner-green">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="current_number hide col s8 offset-s2">0/0</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="white-bg">
|
||||
<div class="exported-list input-field field-settings export-buttons">
|
||||
</div>
|
||||
<li class="not-exported white-bg hide">
|
||||
<div class="center-align">Not exported songs</div>
|
||||
<ul class="input-field field-settings not-exported-container">
|
||||
<li class="white-bg not-exported-element">
|
||||
<div id="extra-export-container-text">
|
||||
<input class="extra-add-text truncate" readonly />
|
||||
</div>
|
||||
<a href="#" class="waves-effect red lighten btn right extra-button extra-button-delete">X</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<!--
|
||||
<li class="no-padding">
|
||||
<h5 id="desc-title">List description</h5>
|
||||
<span id="description"></span>
|
||||
</li>
|
||||
-->
|
||||
57
server/public/partials/channel/players.handlebars
Normal file
57
server/public/partials/channel/players.handlebars
Normal file
@@ -0,0 +1,57 @@
|
||||
<div id="video-container" class="col s12 m9 video-container no-opacity click-through">
|
||||
<div id="fireplace_player" class="ytplayer"></div>
|
||||
<div id="player" class="ytplayer"></div>
|
||||
<div id="main_components">
|
||||
<div id="player_overlay" class="hide valign-wrapper">
|
||||
<div id="playing_on">
|
||||
<div id="chromecast_icon">
|
||||
<i class="material-icons">cast</i>
|
||||
</div>
|
||||
<div id="chromecast_text"></div>
|
||||
</div>
|
||||
<div id="player_overlay_text" class="valign center-align">
|
||||
Waiting for Video
|
||||
</div>
|
||||
<div id="player_overlay_controls" class="hide valign-wrapper">
|
||||
<div id="playpause-overlay" class="valign center-align">
|
||||
<i id="play-overlay" class="material-icons hide">play_arrow</i>
|
||||
<i id="pause-overlay" class="material-icons">pause</i>
|
||||
</div>
|
||||
<div id="volume-button-overlay">
|
||||
<i id="v-mute-overlay" class="material-icons">volume_off</i>
|
||||
<i id="v-low-overlay" class="material-icons">volume_mute</i>
|
||||
<i id="v-medium-overlay" class="material-icons">volume_down</i>
|
||||
<i id="v-full-overlay" class="material-icons">volume_up</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="controls" class="noselect">
|
||||
<div class="playbar-btn prev playbar hide">
|
||||
<i class="material-icons">skip_previous</i>
|
||||
</div>
|
||||
<div id="playpause" class="playbar-btn margin-playbar">
|
||||
<i id="play" class="material-icons hide">play_arrow</i>
|
||||
<i id="pause" class="material-icons">pause</i>
|
||||
</div>
|
||||
<div class="playbar-btn skip playbar">
|
||||
<i class="material-icons">skip_next</i>
|
||||
</div>
|
||||
<div id="duration"></div>
|
||||
<div id="fullscreen" class="hide-on-small-only playbar-btn">
|
||||
<i class="material-icons">fullscreen</i>
|
||||
</div>
|
||||
<button class="castButton playbar-btn" id="castButton" is="google-cast-button"></button>
|
||||
<div id="volume-button" class="playbar-btn">
|
||||
<i id="v-mute" class="material-icons">volume_off</i>
|
||||
<i id="v-low" class="material-icons">volume_mute</i>
|
||||
<i id="v-medium" class="material-icons">volume_down</i>
|
||||
<i id="v-full" class="material-icons">volume_up</i>
|
||||
</div>
|
||||
<div class="volume-container">
|
||||
<div id="volume"></div>
|
||||
</div>
|
||||
<div id="viewers" data-position="top"></div>
|
||||
<div id="bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
30
server/public/partials/channel/playlist.handlebars
Normal file
30
server/public/partials/channel/playlist.handlebars
Normal file
@@ -0,0 +1,30 @@
|
||||
<div id="wrapper" class="tabs_height">
|
||||
<div id="list-song-html">
|
||||
<div id="list-song" class="card left-align list-song playlist-element waves-effect waves-light">
|
||||
<div class="clickable vote-container" title="Vote!">
|
||||
<a class="clickable center-align votebg">
|
||||
<span class="lazy card-image cardbg list-image" style="background-image:url('/assets/images/loading.png');">
|
||||
</span>
|
||||
<span class="card-duration">
|
||||
01:00
|
||||
</span>
|
||||
</a>
|
||||
<span class="card-content">
|
||||
<span class="flow-text truncate list-title"></span>
|
||||
<span class="vote-span">
|
||||
<span class="list-votes"></span>
|
||||
<span class="highlighted vote-text"> votes</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-action center-align list-remove">
|
||||
<a href="#" class="waves-effect btn-flat clickable more_button">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</a>
|
||||
<!--<a title="Remove song" class="waves-effect btn-flat clickable hide-on-small-only delete_button hide suggested_remove">Delete</a>
|
||||
<a title="Remove song" class="waves-effect btn-flat clickable hide-on-med-and-up delete_button hide suggested_remove"><i class="material-icons">close</i></a>-->
|
||||
</div>
|
||||
<div class="mobile-delete red">DELETE</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
8
server/public/partials/channel/suggestions.handlebars
Normal file
8
server/public/partials/channel/suggestions.handlebars
Normal file
@@ -0,0 +1,8 @@
|
||||
<div id="suggestions" class="tabs_height" style="display:none;">
|
||||
<p class="suggest-title-info">YouTube Suggests:</p>
|
||||
<div class="suggest_bar" id="suggest-song-html">
|
||||
</div>
|
||||
<p class="suggest-title-info" id="user_suggests">Users Suggests:</p>
|
||||
<div class="suggest_bar" id="user-suggest-html">
|
||||
</div>
|
||||
</div>
|
||||
23
server/public/partials/channel/tabs.handlebars
Normal file
23
server/public/partials/channel/tabs.handlebars
Normal file
@@ -0,0 +1,23 @@
|
||||
<div id="playlist" class="col s12 m3">
|
||||
<ul class="tabs playlist-tabs tabs-fixed-width" style="width:96%">
|
||||
<li class="tab col s3"><a class="playlist-tab-links playlist-link active truncate" href="#wrapper">Playlist</a></li>
|
||||
<li class="tab col s3"><a class="playlist-tab-links chat-link truncate" href="#chat">Chat<span class="new badge white hide"></span></a></li>
|
||||
</ul>
|
||||
<ul class="tabs playlist-tabs-loggedIn hide tabs-fixed-width" style="width: 96%;">
|
||||
<li class="tab col s3"><a class="playlist-tab-links playlist-link active truncate" href="#wrapper">Playlist</a></li>
|
||||
<li class="tab col s3"><a class="playlist-tab-links suggested-link truncate" href="#suggestions">Suggested<span class="new badge white hide"></span></a></li>
|
||||
<li class="tab col s3"><a class="playlist-tab-links chat-link truncate" href="#chat">Chat<span class="new badge white hide"></span></a></li>
|
||||
</ul>
|
||||
<div id="find_div" class="hide">
|
||||
<form id="find_form">
|
||||
<input type="text" name="find_value" placeholder="Find.." id="find_input" autocomplete="off" />
|
||||
<div class="num_of_found">
|
||||
<span id="num_found">0</span>/<span id="of_total_found">0</span>
|
||||
</div>
|
||||
<a href="#" id="close_find_form_button"><i class="material-icons">clear</i></a>
|
||||
</form>
|
||||
</div>
|
||||
{{> channel/playlist}}
|
||||
{{> channel/suggestions}}
|
||||
{{> channel/chat}}
|
||||
</div>
|
||||
Reference in New Issue
Block a user