mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-12-07 20:18:49 +00:00
340 lines
18 KiB
Handlebars
Executable File
340 lines
18 KiB
Handlebars
Executable File
|
|
<div class="nav-btn close-settings clickable" title="Close" id="closeSettings">
|
|
<i class="material-icons auto-margin">close</i>
|
|
</div>
|
|
<ul class="collapsible collapsible-accordion settings-collapsible">
|
|
{{> channel/settings}}
|
|
<li class="no-padding active">
|
|
<div class="collapsible-header bold waves-effect">Channel Info
|
|
<i class="material-icons">info_outline</i>
|
|
</div>
|
|
<div class="collapsible-body info_collapsible">
|
|
<ul>
|
|
<li class="channel_info_container">
|
|
<div id="thumbnail_image">
|
|
</div>
|
|
<div id="description_area">
|
|
This channel doesn't have a description yet.
|
|
</div>
|
|
</li>
|
|
<li class="white-bg info_change_li hide">
|
|
<div class="row info_change_button_container">
|
|
<a href="#" class="info_change_button col s8 offset-s2 btn orange waves-effect">Change</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="no-padding hide-on-small-only intelligent-accordion">
|
|
<div class="collapsible-header bold waves-effect">Intelligent Playlist
|
|
<i class="material-icons">sentiment_satisfied_alt</i>
|
|
</div>
|
|
<div class="collapsible-body info_collapsible">
|
|
<ul>
|
|
<li>
|
|
<span class="switch-text">
|
|
Intelligent
|
|
</span>
|
|
<div class="switch">
|
|
<label>
|
|
Disabled
|
|
<input name="intelligent_switch" type="checkbox" class="intelligent_switch_class" checked /><span class="lever"></span>
|
|
Enabled
|
|
</label>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col s10 offset-s1">
|
|
<p class="initial-line-height">
|
|
When enabling intelligent playlist, playlist elements are not updated when the playlist is in focus. This helps with playlists with many listeners, making changes to the list at the same time.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
{{#unless client}}
|
|
<li class="no-padding remote-panel hide-on-small-only">
|
|
<div class="collapsible-header bold waves-effect">Remote Control
|
|
<i class="material-icons">settings_remote</i>
|
|
</div>
|
|
<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>
|
|
<li class="no-padding offline-panel">
|
|
<div class="collapsible-header bold waves-effect">Local Mode
|
|
<i class="material-icons">visibility_off</i>
|
|
</div>
|
|
<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>
|
|
<li class="no-padding host-mode-panel hide-on-small-only">
|
|
<div class="collapsible-header bold waves-effect">Host Mode
|
|
<i class="material-icons">hearing</i>
|
|
</div>
|
|
<div class="collapsible-body">
|
|
<ul>
|
|
<li>
|
|
<span class="switch-text">
|
|
Host Mode
|
|
</span>
|
|
<div class="switch">
|
|
<label>
|
|
Disabled
|
|
<input name="host_switch" type="checkbox" class="host_switch_class" /><span class="lever"></span>
|
|
Enabled
|
|
</label>
|
|
</div>
|
|
<div id="host-info">
|
|
By enabling host mode, the channel will go inn fullscreen, this computer can not click any of the vote buttons/remove songs, and the skip-button will be removed. The only things displayed will be the video and the playlist.
|
|
<br>
|
|
<br>
|
|
This mode could be usefull when playing music from a channel at a party, and not wanting anyone to have to interact with the computer.
|
|
<br>
|
|
<br>
|
|
To exit host mode, click ESC.
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="no-padding show-only-mobile mobile-remote-panel">
|
|
<div class="collapsible-header bold waves-effect import-a">Remote Controller
|
|
<i class="material-icons">settings_remote</i>
|
|
</div>
|
|
<div class="collapsible-body">
|
|
<ul id="remote-mobile-container">
|
|
<li class="white-bg container">
|
|
<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>
|
|
|
|
<li class="no-padding import-panel">
|
|
<div class="collapsible-header bold waves-effect import-a">Import Playlist
|
|
<i class="material-icons">keyboard_arrow_down</i>
|
|
</div>
|
|
<div class="collapsible-body">
|
|
<ul>
|
|
<li class="white-bg">
|
|
<div class="input-field field-settings youtube_unclicked import-buttons">
|
|
<a class="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">
|
|
{{> spinner}}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</li>
|
|
<li class="white-bg">
|
|
<div class="input-field field-settings spotify_unauthenticated import-buttons">
|
|
<a class="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">
|
|
{{> spinner}}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</li>
|
|
<li class="white-bg">
|
|
<div class="input-field field-settings soundcloud-import-button import-buttons">
|
|
<a class="waves-effect btn import-soundcloud" title="Import SoundCloud playlist">
|
|
<img src="https://developers.soundcloud.com/assets/logo_big_white-65c2b096da68dd533db18b9f07d14054.png" class="left soundcloud_logo" alt="SoundCloud Logo" />
|
|
<span>SoundCloud</span>
|
|
</a>
|
|
</div>
|
|
<div class="input-field field-settings soundcloud_authenticated hide">
|
|
<form action="#" id="listImportSoundCloud">
|
|
<i class="material-icons import-icon">playlist_add</i>
|
|
<input title="Input SoundCloud-playlist url here!" placeholder="Enter SoundCloud-list url" id="import_soundcloud" type="text" class="validate" autocomplete="off" />
|
|
<p class="soundcloud-disclaimer">If you want to add a private list, remember to add the secret token at the end!</p>
|
|
</form>
|
|
<div id="playlist_loader_soundcloud" class="valign playlist_loader_padding hide">
|
|
<div class="preloader-wrapper small active">
|
|
{{> spinner}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="white-bg">
|
|
<div class="input-field field-settings import-buttons import-zoff-container">
|
|
<a class="waves-effect zoff-color lighten btn import-zoff" title="Import Zoff playlist">
|
|
<img src="/assets/images/z.svg" class="left zoff-logo zoff-image-import" alt="Zoff Logo" />Zoff
|
|
</a>
|
|
</div>
|
|
<div class="input-field field-settings zoff_add_field hide">
|
|
<form action="#" id="listImportZoff">
|
|
<i class="material-icons import-icon">playlist_add</i>
|
|
<input title="Input Zoff-playlist name here!" placeholder="Enter Zoff-list" id="import_zoff" type="text" class="validate" autocomplete="off" />
|
|
<div id="playlist_loader_zoff" class="valign playlist_loader_padding hide">
|
|
<div class="preloader-wrapper small active">
|
|
{{> spinner}}
|
|
</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>
|
|
|
|
<li class="no-padding export-panel">
|
|
<div class="collapsible-header bold waves-effect export-a">Export Playlist
|
|
<i class="material-icons">keyboard_arrow_up</i>
|
|
</div>
|
|
<div class="collapsible-body">
|
|
<ul>
|
|
<li class="white-bg">
|
|
<div class="input-field field-settings youtube_export_button export-buttons">
|
|
<a class="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="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="white-bg">
|
|
<div class="input-field field-settings soundcloud-export-button export-buttons">
|
|
<a class="waves-effect btn export-soundcloud" title="Export to SoundCloud">
|
|
<img src="https://developers.soundcloud.com/assets/logo_big_white-65c2b096da68dd533db18b9f07d14054.png" class="left soundcloud_logo" alt="SoundCloud Logo" />
|
|
<span>SoundCloud</span>
|
|
</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">
|
|
{{> spinner}}
|
|
</div>
|
|
</div>
|
|
<div class="current_number hide col s8 offset-s2">0/0</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="white-bg not-exported-height">
|
|
<div class="exported-list input-field field-settings export-buttons">
|
|
</div>
|
|
<ul>
|
|
<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>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
{{/unless}}
|
|
</ul>
|