mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-12-08 20:48:48 +00:00
Used realfavicongenerator.net to generate new favicons
This commit is contained in:
Kasper Rynning-Tønnesen
@@ -2479,7 +2479,7 @@ nav ul li:hover, nav ul li.active {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.footer-copyright {
|
.footer-copyright {
|
||||||
margin-bottom: 40px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#duration{
|
#duration{
|
||||||
|
|||||||
2
server/public/assets/dist/embed.min.js
vendored
2
server/public/assets/dist/embed.min.js
vendored
File diff suppressed because one or more lines are too long
2
server/public/assets/dist/main.min.js
vendored
2
server/public/assets/dist/main.min.js
vendored
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 6.1 KiB |
BIN
server/public/assets/images/android-chrome-192x192.png
Normal file
BIN
server/public/assets/images/android-chrome-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
server/public/assets/images/android-chrome-512x512.png
Normal file
BIN
server/public/assets/images/android-chrome-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
server/public/assets/images/apple-touch-icon.png
Normal file
BIN
server/public/assets/images/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
server/public/assets/images/favicon-16x16.png
Normal file
BIN
server/public/assets/images/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 726 B |
BIN
server/public/assets/images/favicon-32x32.png
Normal file
BIN
server/public/assets/images/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
server/public/assets/images/favicon.ico
Normal file
BIN
server/public/assets/images/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
server/public/assets/images/mstile-150x150.png
Normal file
BIN
server/public/assets/images/mstile-150x150.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 299 B |
26
server/public/assets/images/safari-pinned-tab.svg
Normal file
26
server/public/assets/images/safari-pinned-tab.svg
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||||
|
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||||
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="1024.000000pt" height="1024.000000pt" viewBox="0 0 1024.000000 1024.000000"
|
||||||
|
preserveAspectRatio="xMidYMid meet">
|
||||||
|
<metadata>
|
||||||
|
Created by potrace 1.11, written by Peter Selinger 2001-2013
|
||||||
|
</metadata>
|
||||||
|
<g transform="translate(0.000000,1024.000000) scale(0.100000,-0.100000)"
|
||||||
|
fill="#000000" stroke="none">
|
||||||
|
<path d="M4855 10233 c-394 -26 -679 -71 -1020 -158 -1295 -331 -2412 -1169
|
||||||
|
-3115 -2335 -83 -138 -254 -475 -314 -620 -161 -385 -269 -757 -335 -1155 -19
|
||||||
|
-117 -23 -146 -36 -270 -4 -33 -9 -71 -11 -85 -24 -154 -24 -766 0 -970 2 -14
|
||||||
|
7 -56 11 -95 4 -38 8 -77 10 -85 1 -8 6 -40 9 -70 4 -30 11 -77 16 -105 5 -27
|
||||||
|
12 -66 15 -85 3 -19 22 -106 41 -194 54 -241 111 -432 219 -726 34 -95 135
|
||||||
|
-321 203 -455 276 -547 649 -1040 1108 -1465 79 -74 256 -224 320 -271 32 -24
|
||||||
|
61 -46 64 -49 11 -13 182 -132 291 -203 351 -231 772 -433 1191 -571 237 -78
|
||||||
|
556 -156 783 -191 113 -17 352 -45 445 -51 205 -15 757 -8 858 10 9 2 46 7 82
|
||||||
|
11 98 10 201 24 305 41 66 11 276 57 389 85 636 160 1269 465 1808 871 325
|
||||||
|
245 606 515 892 858 127 153 329 446 452 655 389 662 622 1424 681 2226 14
|
||||||
|
199 7 727 -12 842 -2 12 -9 67 -15 122 -35 308 -117 677 -222 990 -212 637
|
||||||
|
-535 1207 -982 1730 -586 685 -1383 1220 -2251 1510 -373 125 -793 212 -1150
|
||||||
|
240 -44 4 -91 9 -105 11 -27 6 -560 11 -625 7z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -193,7 +193,7 @@ var Frontpage = {
|
|||||||
var img = new Image();
|
var img = new Image();
|
||||||
img.src = "/assets/images/thumbnails/"+id+".jpg";
|
img.src = "/assets/images/thumbnails/"+id+".jpg";
|
||||||
|
|
||||||
img.onerror = function(){ // Failed to load
|
img.onerror = function(e){ // Failed to load
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: "POST",
|
type: "POST",
|
||||||
data: {id:id},
|
data: {id:id},
|
||||||
|
|||||||
@@ -351,6 +351,10 @@ function init(){
|
|||||||
$("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color));
|
$("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color));
|
||||||
$("#search").attr("placeholder", "Find song on YouTube...");
|
$("#search").attr("placeholder", "Find song on YouTube...");
|
||||||
|
|
||||||
|
if(!$("footer").hasClass("padding-bottom-novideo")) {
|
||||||
|
$("footer").addClass("padding-bottom-novideo");
|
||||||
|
}
|
||||||
|
|
||||||
if(!/chrom(e|ium)/.test(navigator.userAgent.toLowerCase()) && !Helper.mobilecheck()){
|
if(!/chrom(e|ium)/.test(navigator.userAgent.toLowerCase()) && !Helper.mobilecheck()){
|
||||||
$(".castButton").css("display", "none");
|
$(".castButton").css("display", "none");
|
||||||
}
|
}
|
||||||
@@ -1919,7 +1923,7 @@ function onepage_load(){
|
|||||||
else $("main").append($(response.find("#main_section_frontpage")).wrap("<div>").parent().html());
|
else $("main").append($(response.find("#main_section_frontpage")).wrap("<div>").parent().html());
|
||||||
$(".page-footer").removeClass("padding-bottom-extra");
|
$(".page-footer").removeClass("padding-bottom-extra");
|
||||||
$(".page-footer").removeClass("padding-bottom-novideo");
|
$(".page-footer").removeClass("padding-bottom-novideo");
|
||||||
$("#favicon").attr("href", "/assets/images/favicon.png");
|
$("#favicon").attr("href", "/assets/images/favicon-32x32.png");
|
||||||
|
|
||||||
$(".context-menu-list").remove();
|
$(".context-menu-list").remove();
|
||||||
Helper.log(socket);
|
Helper.log(socket);
|
||||||
|
|||||||
@@ -1,16 +1,31 @@
|
|||||||
{
|
{
|
||||||
"short_name": "Zoff",
|
"short_name": "Zoff",
|
||||||
"name": "Zoff",
|
"name": "Zoff - the shared YouTube based radio",
|
||||||
"icons": [
|
"description": "A free YouTube based radio, where no registration is needed for listening to channels, or creating your own channels. ",
|
||||||
{
|
"dir": "ltr",
|
||||||
"src": "/assets/images/144x144.png",
|
"lang": "en-US",
|
||||||
"sizes": "144x144",
|
"start_url": "/",
|
||||||
"type": "image/png"
|
"display": "standalone",
|
||||||
}
|
"background_color": "#2D2D2D",
|
||||||
],
|
"theme_color": "#2D2D2D",
|
||||||
"start_url": "/",
|
"orientation": "portrait",
|
||||||
"display": "standalone",
|
"related_applications": [
|
||||||
"background_color": "#2D2D2D",
|
{
|
||||||
"theme_color": "#2D2D2D",
|
"platform": "play",
|
||||||
"orientation": "portrait"
|
"id": "zoff.me.zoff",
|
||||||
|
"url": "https://play.google.com/store/apps/details?id=zoff.me.zoff"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "/assets/images/android-chrome-192x192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/assets/images/android-chrome-512x512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,104 +1,104 @@
|
|||||||
<div id="main-container" class="channelpage noselect cursor-default">
|
<div id="main-container" class="channelpage noselect cursor-default">
|
||||||
<header>
|
<header>
|
||||||
<div class="navbar-fixed">
|
<div class="navbar-fixed">
|
||||||
<nav id="nav">
|
<nav id="nav">
|
||||||
<div class="nav-wrapper">
|
<div class="nav-wrapper">
|
||||||
|
|
||||||
<div class="brand-logo truncate zbrand">
|
<div class="brand-logo truncate zbrand">
|
||||||
<a href="/" class="brand-logo brand-logo-navigate">
|
<a href="/" class="brand-logo brand-logo-navigate">
|
||||||
<img id="zicon" src="/assets/images/z.svg" alt="zoff" title="Zoff" />
|
<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>
|
</a>
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="nav-btn" href="#skip" id="skip">
|
|
||||||
<i class="material-icons">skip_next</i>
|
|
||||||
<!--<span class="hover-text">Skip</span>-->
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="nav-btn hide-on-small-only" href="#stir" id="shuffle">
|
|
||||||
<i class="material-icons">shuffle</i>
|
|
||||||
<!--<span class="hover-text">Stir</span>-->
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="nav-btn" href="#settings" data-activates="settings-bar" id="settings">
|
|
||||||
<i class="material-icons">menu</i>
|
|
||||||
<!--<span class="hover-text">Conf</span>-->
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<ul class="side-nav" id="settings-bar">
|
|
||||||
{{> 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 id="chan" class="chan clickable truncate" title="Show big URL">{{list_name}}</span>
|
||||||
<span class="result_info"></span>
|
</div>
|
||||||
<div class="waves-effect waves-orange btn-flat" id="add-many" title="Add several videos">
|
|
||||||
<i class="material-icons">playlist_add</i>
|
<ul class="title-container">
|
||||||
</div>
|
<li class="song-title cursor-pointer truncate" id="song-title">
|
||||||
<a href="#" target="_blank" class="waves-effect waves-orange btn-flat open-externally" title="Open on YouTube">
|
Loading...
|
||||||
<i class="material-icons">open_in_new</i>
|
</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>
|
</a>
|
||||||
</div>
|
</li>
|
||||||
</div>
|
<li>
|
||||||
</div>
|
<a class="nav-btn" href="#skip" id="skip">
|
||||||
<div id="empty-results-container">
|
<i class="material-icons">skip_next</i>
|
||||||
<div id="empty-results" class="valign-wrapper">
|
<!--<span class="hover-text">Skip</span>-->
|
||||||
<span class="valign">No results found..</span>
|
</a>
|
||||||
</div>
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="nav-btn hide-on-small-only" href="#stir" id="shuffle">
|
||||||
|
<i class="material-icons">shuffle</i>
|
||||||
|
<!--<span class="hover-text">Stir</span>-->
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="nav-btn" href="#settings" data-activates="settings-bar" id="settings">
|
||||||
|
<i class="material-icons">menu</i>
|
||||||
|
<!--<span class="hover-text">Conf</span>-->
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="side-nav" id="settings-bar">
|
||||||
|
{{> 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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</nav>
|
||||||
</nav>
|
</div>
|
||||||
</div>
|
<div id="user_password" class="modal">
|
||||||
<div id="user_password" class="modal">
|
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<h5>Locked Channel</h5>
|
<h5>Locked Channel</h5>
|
||||||
<form id="user-password-channel-form">
|
<form id="user-password-channel-form">
|
||||||
<div class="input-field">
|
<div class="input-field">
|
||||||
<input id="user-pass-input" name="user-pass" type="password" autocomplete="off" />
|
<input id="user-pass-input" name="user-pass" type="password" autocomplete="off" />
|
||||||
<label for="user-pass-input" class="noselect">Password</label>
|
<label for="user-pass-input" class="noselect">Password</label>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
@@ -107,16 +107,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="delete_song_alert" class="modal">
|
<div id="delete_song_alert" class="modal">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<h5>Delete song</h5>
|
<h5>Delete song</h5>
|
||||||
<p>Are you sure you want to delete <span id="delete_song_title"></span>?</p>
|
<p>Are you sure you want to delete <span id="delete_song_title"></span>?</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<a href="#!" class="waves-effect waves-red btn-flat accept-delete right red-text">Delete</a>
|
<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>
|
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat cancel-song-delete">Cancel</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="help" class="modal modal-fixed-footer">
|
<div id="help" class="modal modal-fixed-footer">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<h4>Help</h4>
|
<h4>Help</h4>
|
||||||
<p>When listening on a channel, there are some different buttons you can click.</p>
|
<p>When listening on a channel, there are some different buttons you can click.</p>
|
||||||
@@ -133,175 +133,175 @@
|
|||||||
</div>
|
</div>
|
||||||
<div id="embed" class="modal">
|
<div id="embed" class="modal">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<h4>Embed</h4>
|
<h4>Embed</h4>
|
||||||
<p>Copy the code in the textarea, and paste on your website.</p>
|
<p>Copy the code in the textarea, and paste on your website.</p>
|
||||||
<p>
|
<p>
|
||||||
<input type="checkbox" id="autoplay" checked="checked" />
|
<input type="checkbox" id="autoplay" checked="checked" />
|
||||||
<label for="autoplay" class="padding_right_26">Autoplay</label>
|
<label for="autoplay" class="padding_right_26">Autoplay</label>
|
||||||
<label for="width_embed" class="embed-label">Width</label>
|
<label for="width_embed" class="embed-label">Width</label>
|
||||||
<input type="number" value="600" id="width_embed" class="settings_embed" min="1" />
|
<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>
|
<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" />
|
<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>
|
<label for="color_embed" class="padding_left_6 embed-label">Color</label>
|
||||||
<input type="color" id="color_embed" class="settings_embed" value="#808080" />
|
<input type="color" id="color_embed" class="settings_embed" value="#808080" />
|
||||||
</p>
|
</p>
|
||||||
<textarea id="embed-area"></textarea>
|
<textarea id="embed-area"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
|
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div id="channel-load" class="progress">
|
<div id="channel-load" class="progress">
|
||||||
<div class="indeterminate" id="channel-load-move"></div>
|
<div class="indeterminate" id="channel-load-move"></div>
|
||||||
</div>
|
</div>
|
||||||
<main class="container center-align main">
|
<main class="container center-align main">
|
||||||
<div id="main-row" class="row">
|
<div id="main-row" class="row">
|
||||||
<div id="video-container" class="col s12 m9 video-container no-opacity click-through">
|
<div id="video-container" class="col s12 m9 video-container no-opacity click-through">
|
||||||
<!--
|
<!--
|
||||||
width: calc(100% - 261px);
|
width: calc(100% - 261px);
|
||||||
display: inline;
|
display: inline;
|
||||||
-->
|
-->
|
||||||
<div id="fireplace_player" class="ytplayer"></div>
|
<div id="fireplace_player" class="ytplayer"></div>
|
||||||
<div id="player" class="ytplayer"></div>
|
<div id="player" class="ytplayer"></div>
|
||||||
<div id="main_components">
|
<div id="main_components">
|
||||||
<div id="player_overlay" class="hide valign-wrapper">
|
<div id="player_overlay" class="hide valign-wrapper">
|
||||||
<div id="playing_on"><div id="chromecast_icon">
|
<div id="playing_on"><div id="chromecast_icon">
|
||||||
<i class="material-icons">cast</i>
|
<i class="material-icons">cast</i>
|
||||||
</div>
|
</div>
|
||||||
<div id="chromecast_text"></div>
|
<div id="chromecast_text"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="player_overlay_text" class="valign center-align">
|
<div id="player_overlay_text" class="valign center-align">
|
||||||
Waiting for Video
|
Waiting for Video
|
||||||
</div>
|
</div>
|
||||||
<div id="player_overlay_controls" class="hide valign-wrapper">
|
<div id="player_overlay_controls" class="hide valign-wrapper">
|
||||||
<div id="playpause-overlay" class="valign center-align">
|
<div id="playpause-overlay" class="valign center-align">
|
||||||
<i id="play-overlay" class="material-icons hide">play_arrow</i>
|
<i id="play-overlay" class="material-icons hide">play_arrow</i>
|
||||||
<i id="pause-overlay" class="material-icons">pause</i>
|
<i id="pause-overlay" class="material-icons">pause</i>
|
||||||
</div>
|
</div>
|
||||||
<div id="volume-button-overlay">
|
<div id="volume-button-overlay">
|
||||||
<i id="v-mute-overlay" class="material-icons">volume_off</i>
|
<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-low-overlay" class="material-icons">volume_mute</i>
|
||||||
<i id="v-medium-overlay" class="material-icons">volume_down</i>
|
<i id="v-medium-overlay" class="material-icons">volume_down</i>
|
||||||
<i id="v-full-overlay" class="material-icons">volume_up</i>
|
<i id="v-full-overlay" class="material-icons">volume_up</i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="controls" class="noselect">
|
</div>
|
||||||
<div id="playpause">
|
<div id="controls" class="noselect">
|
||||||
|
<div id="playpause">
|
||||||
<i id="play" class="material-icons hide">play_arrow</i>
|
<i id="play" class="material-icons hide">play_arrow</i>
|
||||||
<i id="pause" class="material-icons">pause</i>
|
<i id="pause" class="material-icons">pause</i>
|
||||||
</div>
|
</div>
|
||||||
<div id="duration"></div>
|
<div id="duration"></div>
|
||||||
<div id="fullscreen" class="hide-on-small-only">
|
<div id="fullscreen" class="hide-on-small-only">
|
||||||
<i class="material-icons">fullscreen</i>
|
<i class="material-icons">fullscreen</i>
|
||||||
</div>
|
</div>
|
||||||
<button class="castButton" id="castButton" is="google-cast-button">
|
<button class="castButton" id="castButton" is="google-cast-button">
|
||||||
</button>
|
</button>
|
||||||
<div id="volume-button">
|
<div id="volume-button">
|
||||||
<i id="v-mute" class="material-icons">volume_off</i>
|
<i id="v-mute" class="material-icons">volume_off</i>
|
||||||
<i id="v-low" class="material-icons">volume_mute</i>
|
<i id="v-low" class="material-icons">volume_mute</i>
|
||||||
<i id="v-medium" class="material-icons">volume_down</i>
|
<i id="v-medium" class="material-icons">volume_down</i>
|
||||||
<i id="v-full" class="material-icons">volume_up</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 class="volume-container">
|
||||||
|
<div id="volume"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div id="viewers" data-position="top"></div>
|
||||||
<div id="playlist" class="col s12 m3">
|
<div id="bar"></div>
|
||||||
<!--<div id="top-button" title="Scroll to the top" class="rounded-bottom hide top-button-with-tabs hide-on-small-only">Top</div>
|
|
||||||
<div id="bottom-button" title="Scroll to the bottom" class="rounded-top hide hide-on-small-only">Bottom</div>
|
|
||||||
--><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>
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
<div id="chatPlaylist" 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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="playbar">
|
</div>
|
||||||
|
<div id="playlist" class="col s12 m3">
|
||||||
|
<!--<div id="top-button" title="Scroll to the top" class="rounded-bottom hide top-button-with-tabs hide-on-small-only">Top</div>
|
||||||
|
<div id="bottom-button" title="Scroll to the bottom" class="rounded-top hide hide-on-small-only">Bottom</div>
|
||||||
|
--><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>
|
</div>
|
||||||
</main>
|
<a href="#" id="close_find_form_button"><i class="material-icons">clear</i></a>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<div id="chatPlaylist" 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="playbar">
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -18,18 +18,18 @@
|
|||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<h4>About</h4>
|
<h4>About</h4>
|
||||||
<p>Zoff is a shared (free) YouTube based radio service, built upon the YouTube API. <br><br>
|
<p>Zoff is a shared (free) YouTube based radio service, built upon the YouTube API. <br><br>
|
||||||
Zoff is mainly a web-based service. The website uses NodeJS with Socket.IO, MongoDB and express on the backend, with JavaScript, jQuery and Materialize on the frontend.<br><br>
|
Zoff is mainly a web-based service. The website uses NodeJS with Socket.IO, MongoDB and express on the backend, with JavaScript, jQuery and Materialize on the frontend.<br><br>
|
||||||
The team consists of Kasper Rynning-Tønnesen and Nicolas Almagro Tonne, and the project has been worked on since late 2014.<br><br>
|
The team consists of Kasper Rynning-Tønnesen and Nicolas Almagro Tonne, and the project has been worked on since late 2014.<br><br>
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
<h4>Legal</h4>
|
<h4>Legal</h4>
|
||||||
<p>Copyright © 2017 <br>Nicolas Almagro Tonne and Kasper Rynning-Tønnesen
|
<p>Copyright © 2017 <br>Nicolas Almagro Tonne and Kasper Rynning-Tønnesen
|
||||||
<br><br>
|
<br><br>
|
||||||
Creative Commons License<br>
|
Creative Commons License<br>
|
||||||
Zoff is licensed under a <br><a href="http://creativecommons.org/licenses/by-nc-nd/3.0/no/">Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Norway License.</a>
|
Zoff is licensed under a <br><a href="http://creativecommons.org/licenses/by-nc-nd/3.0/no/">Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Norway License.</a>
|
||||||
<br>
|
<br>
|
||||||
Do not redistribute without permission from the developers.
|
Do not redistribute without permission from the developers.
|
||||||
<br>
|
<br>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
@@ -67,73 +67,73 @@
|
|||||||
<div class="section mega">
|
<div class="section mega">
|
||||||
<div id="mega-background"></div>
|
<div id="mega-background"></div>
|
||||||
<h5>Create a radio channel, collaborate and listen</h5>
|
<h5>Create a radio channel, collaborate and listen</h5>
|
||||||
<form class="channel-finder">
|
<form class="channel-finder">
|
||||||
<div class="input-field">
|
<div class="input-field">
|
||||||
<p class="prefix">zoff.me/</p>
|
<p class="prefix">zoff.me/</p>
|
||||||
<input
|
<input
|
||||||
class="room-namer autocomplete desktop-search"
|
class="room-namer autocomplete desktop-search"
|
||||||
type="text"
|
type="text"
|
||||||
id="autocomplete-input"
|
id="autocomplete-input"
|
||||||
name="chan"
|
name="chan"
|
||||||
placeholder="chill"
|
placeholder="chill"
|
||||||
title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
|
title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
autofocus
|
autofocus
|
||||||
required
|
required
|
||||||
pattern="[a-zA-Z0-9]+"
|
pattern="[a-zA-Z0-9]+"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
maxlength="18"
|
maxlength="18"
|
||||||
/>
|
/>
|
||||||
<button class="listen-button btn waves-effect waves-light white-text col s2">Listen</button>
|
<button class="listen-button btn waves-effect waves-light white-text col s2">Listen</button>
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<div class="pitch outline">
|
|
||||||
<div>Live & democratic playlists with YouTube Music</div>
|
|
||||||
<div>Play everywhere — No login required</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</form>
|
||||||
|
<div class="pitch outline">
|
||||||
|
<div>Live & democratic playlists with YouTube Music</div>
|
||||||
|
<div>Play everywhere — No login required</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section mobile-search">
|
<div class="section mobile-search">
|
||||||
<form class="channel-finder-mobile row" id="base">
|
<form class="channel-finder-mobile row" id="base">
|
||||||
<div class="input-field col s12">
|
<div class="input-field col s12">
|
||||||
<input
|
<input
|
||||||
class="autocomplete mobile-search"
|
class="autocomplete mobile-search"
|
||||||
type="text"
|
type="text"
|
||||||
id="searchFrontpage"
|
id="searchFrontpage"
|
||||||
name="chan"
|
name="chan"
|
||||||
title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
|
title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
required pattern="[a-zA-Z0-9]+"
|
required pattern="[a-zA-Z0-9]+"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
maxlength="18"
|
maxlength="18"
|
||||||
data-length="18"
|
data-length="18"
|
||||||
/>
|
/>
|
||||||
<label for="searchFrontpage" class="noselect">Find or create radio channel</label>
|
<label for="searchFrontpage" class="noselect">Find or create radio channel</label>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div id="channel-load" class="progress">
|
<div id="channel-load" class="progress">
|
||||||
<div class="indeterminate" id="channel-load-move"></div>
|
<div class="indeterminate" id="channel-load-move"></div>
|
||||||
</div>
|
</div>
|
||||||
<main class="center-align container">
|
<main class="center-align container">
|
||||||
<div id="main_section_frontpage" class="section">
|
<div id="main_section_frontpage" class="section">
|
||||||
<div class="col s12">
|
<div class="col s12">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="input-field col s12">
|
<div class="input-field col s12">
|
||||||
<select id="view_channels_select">
|
<select id="view_channels_select">
|
||||||
<option value="" disabled>Channels to show</option>
|
<option value="" disabled>Channels to show</option>
|
||||||
<option value="1" selected>Most Popular</option>
|
<option value="1" selected>Most Popular</option>
|
||||||
<option value="2">All Channels</option>
|
<option value="2">All Channels</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div id="preloader" class="progress">
|
<div id="preloader" class="progress">
|
||||||
<div class="indeterminate"></div>
|
<div class="indeterminate"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="channel-list-container">
|
<div id="channel-list-container">
|
||||||
|
|
||||||
<ul class="row" id="channels">
|
<ul class="row" id="channels">
|
||||||
<li id="chan-card" class="col s6 m4 l3">
|
<li id="chan-card" class="col s6 m4 l3">
|
||||||
<div class="card sticky-action">
|
<div class="card sticky-action">
|
||||||
<a class="chan-link">
|
<a class="chan-link">
|
||||||
@@ -154,8 +154,8 @@
|
|||||||
<span class="chan-link-element waves-effect waves-orange btn-flat">Listen</span>
|
<span class="chan-link-element waves-effect waves-orange btn-flat">Listen</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-reveal">
|
<div class="card-reveal">
|
||||||
<span class="card-title grey-text text-darken-4 truncate"></span>
|
<span class="card-title grey-text text-darken-4 truncate"></span>
|
||||||
<p class="description_text"></p>
|
<p class="description_text"></p>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
|
|
||||||
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||||
| Zoff |
|
| Zoff |
|
||||||
@@ -11,12 +11,12 @@
|
|||||||
<title>Zoff - the shared YouTube based radio</title>
|
<title>Zoff - the shared YouTube based radio</title>
|
||||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||||
<meta name="author" content="Nicolas 'Nixo' Almagro Tonne & Kasper 'KasperRT' Rynning-Tønnesen"/>
|
<meta name="author" content="Nicolas 'Nixo' Almagro Tonne & Kasper 'KasperRT' Rynning-Tønnesen"/>
|
||||||
<meta name="description" content="The Shared (free) YouTube radio."/>
|
<meta name="description" content="The shared (free) YouTube radio."/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
<meta name="mobile-web-app-capable" content="yes">
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
<meta name="theme-color" content="#2D2D2D" />
|
<meta name="theme-color" content="#2D2D2D" />
|
||||||
<meta property="og:image" content="https://zoff.me/assets/images/favicon.png" />
|
<meta property="og:image" content="https://zoff.me/assets/images/favicon-32x32.png" />
|
||||||
<meta property="og:url" content="https://zoff.me" />
|
<meta property="og:url" content="https://zoff.me" />
|
||||||
<meta property="og:title" content="Zoff"/>
|
<meta property="og:title" content="Zoff"/>
|
||||||
<meta property="og:description" content="The Shared (free) YouTube radio."/>
|
<meta property="og:description" content="The Shared (free) YouTube radio."/>
|
||||||
@@ -28,15 +28,18 @@
|
|||||||
<link type="text/css" rel="stylesheet" href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" />
|
<link type="text/css" rel="stylesheet" href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" />
|
||||||
<link type="text/css" rel="stylesheet" href="/assets/css/materialize.min.css" />
|
<link type="text/css" rel="stylesheet" href="/assets/css/materialize.min.css" />
|
||||||
<link rel="stylesheet" type="text/css" href="/assets/css/style.css" title="Default" />
|
<link rel="stylesheet" type="text/css" href="/assets/css/style.css" title="Default" />
|
||||||
<link rel="icon" id="favicon" type="image/png" href="/assets/images/favicon.png"/>
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png">
|
||||||
|
<link rel="icon" id="favicon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png">
|
||||||
|
<link rel="mask-icon" href="/assets/images/safari-pinned-tab.svg" color="#2d2d2d">
|
||||||
<script>
|
<script>
|
||||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||||
|
|
||||||
ga('create', '***REMOVED***', 'auto');
|
ga('create', '***REMOVED***', 'auto');
|
||||||
ga('send', 'pageview');
|
ga('send', 'pageview');
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
|
<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
|
||||||
@@ -51,80 +54,80 @@
|
|||||||
<script type="text/javascript" src="/assets/dist/lib/sha256.js"></script>
|
<script type="text/javascript" src="/assets/dist/lib/sha256.js"></script>
|
||||||
<script type="text/javascript" src="/assets/dist/lib/aes.js"></script>
|
<script type="text/javascript" src="/assets/dist/lib/aes.js"></script>
|
||||||
<script type="text/javascript" src="/assets/dist/{{javascript_file}}"></script>
|
<script type="text/javascript" src="/assets/dist/{{javascript_file}}"></script>
|
||||||
</head>
|
</head>
|
||||||
<body class="noselect">
|
<body class="noselect">
|
||||||
{{{body}}}
|
{{{body}}}
|
||||||
<div class="tap-target" data-activates="castButton">
|
<div class="tap-target" data-activates="castButton">
|
||||||
<div class="tap-target-content">
|
<div class="tap-target-content">
|
||||||
<h5>Chromecast</h5>
|
<h5>Chromecast</h5>
|
||||||
<p>This site supports chromecasting!</p>
|
<p>This site supports chromecasting!</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="contact" class="modal">
|
<div id="contact" class="modal">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<h4>Contact</h4>
|
<h4>Contact</h4>
|
||||||
<div id="contact-container">
|
<div id="contact-container">
|
||||||
<p>Found a bug, or just want to contact the team?</p>
|
<p>Found a bug, or just want to contact the team?</p>
|
||||||
<form id="contact-form" method="post" onsubmit="return false;">
|
<form id="contact-form" method="post" onsubmit="return false;">
|
||||||
<div class="input-field">
|
<div class="input-field">
|
||||||
<input id="contact-form-from" name="from" type="email" autocomplete="off" class="validate" />
|
<input id="contact-form-from" name="from" type="email" autocomplete="off" class="validate" />
|
||||||
<label for="contact-form-from" class="noselect">Email</label>
|
<label for="contact-form-from" class="noselect">Email</label>
|
||||||
</div>
|
|
||||||
<div class="input-field">
|
|
||||||
<input id="contact-form-message" name="message" type="text" autocomplete="off">
|
|
||||||
<label for="contact-form-message" class="noselect">Message</label>
|
|
||||||
</div>
|
|
||||||
<div class="valign hide" id="send-loader">
|
|
||||||
<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>
|
</div>
|
||||||
</div>
|
<div class="input-field">
|
||||||
<div class="modal-footer">
|
<input id="contact-form-message" name="message" type="text" autocomplete="off">
|
||||||
<button class="waves-effect waves-green btn-flat" id="submit-contact-form">Send</button>
|
<label for="contact-form-message" class="noselect">Message</label>
|
||||||
<a href="#!" class=" modal-action modal-close waves-effect waves-red btn-flat">Close</a>
|
</div>
|
||||||
</div>
|
<div class="valign hide" id="send-loader">
|
||||||
|
<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>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="waves-effect waves-green btn-flat" id="submit-contact-form">Send</button>
|
||||||
|
<a href="#!" class=" modal-action modal-close waves-effect waves-red btn-flat">Close</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<footer class="page-footer cursor-default">
|
<footer class="page-footer cursor-default">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
@@ -139,21 +142,21 @@
|
|||||||
Enjoy!
|
Enjoy!
|
||||||
</p>
|
</p>
|
||||||
<ul class="footer-buttons">
|
<ul class="footer-buttons">
|
||||||
<li>
|
<li>
|
||||||
<a class="modal-trigger waves-effect cyan darken-2 btn help-button-footer" title="Need help with the site?" data-target="help">
|
<a class="modal-trigger waves-effect cyan darken-2 btn help-button-footer" title="Need help with the site?" data-target="help">
|
||||||
<i class="material-icons left footer-button-icon">help_outline</i>HELP
|
<i class="material-icons left footer-button-icon">help_outline</i>HELP
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="modal-trigger waves-effect blue-grey darken-2 btn help-button-footer hide-on-small-only" id="embed-button" title="Want to embed this channel?" data-target="embed">
|
<a class="modal-trigger waves-effect blue-grey darken-2 btn help-button-footer hide-on-small-only" id="embed-button" title="Want to embed this channel?" data-target="embed">
|
||||||
<i class="material-icons left footer-button-icon">code</i>EMBED
|
<i class="material-icons left footer-button-icon">code</i>EMBED
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="modal-trigger waves-effect red darken-2 btn help-button-footer" id="contact-button" title="Contact us" data-target="contact">
|
<a class="modal-trigger waves-effect red darken-2 btn help-button-footer" id="contact-button" title="Contact us" data-target="contact">
|
||||||
<i class="material-icons left footer-button-icon">email</i>CONTACT
|
<i class="material-icons left footer-button-icon">email</i>CONTACT
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p id="latest-commit" class="grey-text text-lighten-4"></p>
|
<p id="latest-commit" class="grey-text text-lighten-4"></p>
|
||||||
</div>
|
</div>
|
||||||
@@ -171,37 +174,37 @@
|
|||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" id="donate_form">
|
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" id="donate_form">
|
||||||
<input type="hidden" name="cmd" value="_s-xclick">
|
<input type="hidden" name="cmd" value="_s-xclick">
|
||||||
<input type="hidden" name="hosted_button_id" value="JEXDYP59N5VWE">
|
<input type="hidden" name="hosted_button_id" value="JEXDYP59N5VWE">
|
||||||
<a title="Like what we made? Help us by donating (a) beer!" class="waves-effect waves-light btn orange light-blue share" onclick="document.getElementById('donate_form').submit();">
|
<a title="Like what we made? Help us by donating (a) beer!" class="waves-effect waves-light btn orange light-blue share" onclick="document.getElementById('donate_form').submit();">
|
||||||
<i class="material-icons left footer-button-icon">payment</i>Donate
|
<i class="material-icons left footer-button-icon">payment</i>Donate
|
||||||
</a>
|
</a>
|
||||||
</form>
|
</form>
|
||||||
</li>
|
|
||||||
<li class="google-play-image-list">
|
|
||||||
<a href="https://play.google.com/store/apps/details?id=zoff.me.zoff&hl=no&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1">
|
|
||||||
<img alt="Get it on Google Play" src="https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png"/></a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<div id="qr-code-link" class="hide-on-small-only">
|
|
||||||
<img id="qr-code-image-link" class="card rounded" src="//chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https://zoff.me/{{list_name}}&choe=UTF-8&chld=L%7C1" alt="QRCode for link" title="QR code for this page, for easy sharing!" />
|
|
||||||
</div>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
<li class="google-play-image-list">
|
||||||
|
<a href="https://play.google.com/store/apps/details?id=zoff.me.zoff&hl=no&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1">
|
||||||
|
<img alt="Get it on Google Play" src="https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png"/></a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div id="qr-code-link" class="hide-on-small-only">
|
||||||
|
<img id="qr-code-image-link" class="card rounded" src="//chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https://zoff.me/{{list_name}}&choe=UTF-8&chld=L%7C1" alt="QRCode for link" title="QR code for this page, for easy sharing!" />
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="footer-copyright">
|
||||||
<div class="footer-copyright">
|
<div class="container">
|
||||||
<div class="container">
|
© {{year}}
|
||||||
© {{year}}
|
<a href="http://kasperrt.no">KasperRT</a> &
|
||||||
<a href="http://kasperrt.no">KasperRT</a> &
|
<a href="http://nixo.no">Nixo</a>,
|
||||||
<a href="http://nixo.no">Nixo</a>,
|
<br>
|
||||||
<br>
|
All rights reserved
|
||||||
All rights reserved
|
<a class="right" href="https://github.com/zoff-music/">Contribute on GitHub</a>
|
||||||
<a class="right" href="https://github.com/zoff-music/">Contribute on GitHub</a>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</footer>
|
||||||
</footer>
|
<textarea class="copy_video_id" style="display:none;"></textarea>
|
||||||
<textarea class="copy_video_id" style="display:none;"></textarea>
|
</body>
|
||||||
</body>
|
</html>
|
||||||
</html>
|
|
||||||
|
|||||||
@@ -10,90 +10,90 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<ul class="right hide-on-med-and-down">
|
<ul class="right hide-on-med-and-down">
|
||||||
<li><a class="waves-effect green" title="Remote control a Zoff player" href="https://remote.zoff.me">Remote</a></li>
|
<li><a class="waves-effect green" title="Remote control a Zoff player" href="https://remote.zoff.me">Remote</a></li>
|
||||||
<li><a class="modal-trigger waves-effect waves-orange" data-target="about">About</a></li>
|
<li><a class="modal-trigger waves-effect waves-orange" data-target="about">About</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<div id="about" class="modal">
|
<div id="about" class="modal">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<h4>About</h4>
|
<h4>About</h4>
|
||||||
<p>Zoff is a shared (free) YouTube based radio service, built upon the YouTube API. <br><br>
|
<p>Zoff is a shared (free) YouTube based radio service, built upon the YouTube API. <br><br>
|
||||||
Zoff is mainly a web-based service. The website uses NodeJS with Socket.IO, MongoDB and express on the backend, with JavaScript, jQuery and Materialize on the frontend.<br><br>
|
Zoff is mainly a web-based service. The website uses NodeJS with Socket.IO, MongoDB and express on the backend, with JavaScript, jQuery and Materialize on the frontend.<br><br>
|
||||||
The team consists of Kasper Rynning-Tønnesen and Nicolas Almagro Tonne, and the project has been worked on since late 2014.<br><br>
|
The team consists of Kasper Rynning-Tønnesen and Nicolas Almagro Tonne, and the project has been worked on since late 2014.<br><br>
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
<h4>Legal</h4>
|
<h4>Legal</h4>
|
||||||
<p>Copyright © 2017 <br>Nicolas Almagro Tonne and Kasper Rynning-Tønnesen
|
<p>Copyright © 2017 <br>Nicolas Almagro Tonne and Kasper Rynning-Tønnesen
|
||||||
<br><br>
|
<br><br>
|
||||||
Creative Commons License<br>
|
Creative Commons License<br>
|
||||||
Zoff is licensed under a <br><a href="http://creativecommons.org/licenses/by-nc-nd/3.0/no/">Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Norway License.</a>
|
Zoff is licensed under a <br><a href="http://creativecommons.org/licenses/by-nc-nd/3.0/no/">Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Norway License.</a>
|
||||||
<br>
|
<br>
|
||||||
Do not redistribute without permission from the developers.
|
Do not redistribute without permission from the developers.
|
||||||
<br>
|
<br>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div id="help" class="modal">
|
||||||
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
|
<div class="modal-content">
|
||||||
|
<h4>Help</h4>
|
||||||
|
<p>To remote-control a computer, just type in the ID for that computer. (This can be found in the settings panel on the computer you want to remote control. There is also a QR code for you to scan.</p>
|
||||||
|
<p>When you've entered the ID for the computer you want to control, you'll be able to change the volume, have the controled computer vote for skipping, pause the video or play the video.</p>
|
||||||
|
<p>The input field you used to enter the ID (if you entered it), has now changed some. If you type in something here now, the controled computer will change channel!</p>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
<div id="help" class="modal">
|
|
||||||
<div class="modal-content">
|
|
||||||
<h4>Help</h4>
|
|
||||||
<p>To remote-control a computer, just type in the ID for that computer. (This can be found in the settings panel on the computer you want to remote control. There is also a QR code for you to scan.</p>
|
|
||||||
<p>When you've entered the ID for the computer you want to control, you'll be able to change the volume, have the controled computer vote for skipping, pause the video or play the video.</p>
|
|
||||||
<p>The input field you used to enter the ID (if you entered it), has now changed some. If you type in something here now, the controled computer will change channel!</p>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="center-align container remote-container">
|
<main class="center-align container remote-container">
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<h3 id="remote-text">Remote Controller</h3>
|
<h3 id="remote-text">Remote Controller</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<form id="remoteform" class="row">
|
<form id="remoteform" class="row">
|
||||||
<div class="input-field col s12">
|
<div class="input-field col s12">
|
||||||
<input
|
<input
|
||||||
class="input-field"
|
class="input-field"
|
||||||
type="text"
|
type="text"
|
||||||
id="search"
|
id="search"
|
||||||
name="chan"
|
name="chan"
|
||||||
title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
|
title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
maxlength="10"
|
maxlength="10"
|
||||||
data-length="10"
|
data-length="10"
|
||||||
/>
|
/>
|
||||||
<label for="search" id="forsearch">Type ID of host to be controlled</label>
|
<label for="search" id="forsearch">Type ID of host to be controlled</label>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="rc" id="remote-controls">
|
||||||
|
<a id="playbutton" class="remote-button chan-link waves-effect btn green">
|
||||||
|
<i id="remote_play" class="material-icons">play_arrow</i>
|
||||||
|
</a>
|
||||||
|
<a id="pausebutton" class="remote-button chan-link waves-effect btn gray">
|
||||||
|
<i id="remote_pause" class="material-icons">pause</i>
|
||||||
|
</a>
|
||||||
|
<a id="skipbutton" class="remote-button chan-link waves-effect btn blue">
|
||||||
|
<i id="remote_skip" class="material-icons">skip_next</i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="volume-elements">
|
||||||
|
<div class="rc" id="volume-control" title="Volume"></div>
|
||||||
|
<i class="material-icons slider-vol rc">volume_up</i>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
|
||||||
|
|
||||||
<div class="rc" id="remote-controls">
|
|
||||||
<a id="playbutton" class="remote-button chan-link waves-effect btn green">
|
|
||||||
<i id="remote_play" class="material-icons">play_arrow</i>
|
|
||||||
</a>
|
|
||||||
<a id="pausebutton" class="remote-button chan-link waves-effect btn gray">
|
|
||||||
<i id="remote_pause" class="material-icons">pause</i>
|
|
||||||
</a>
|
|
||||||
<a id="skipbutton" class="remote-button chan-link waves-effect btn blue">
|
|
||||||
<i id="remote_skip" class="material-icons">skip_next</i>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="volume-elements">
|
<div class="section about-remote">
|
||||||
<div class="rc" id="volume-control" title="Volume"></div>
|
<b>Here you can control another Zoff player from any device.</b>
|
||||||
<i class="material-icons slider-vol rc">volume_up</i>
|
<br>
|
||||||
|
To find the ID of your player, click the Conf <i class="material-icons">menu</i> icon on the top right of the player page, then "Remote Control".
|
||||||
|
<br>You can either scan the QR code or type the ID manually.
|
||||||
</div>
|
</div>
|
||||||
|
</main>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section about-remote">
|
|
||||||
<b>Here you can control another Zoff player from any device.</b>
|
|
||||||
<br>
|
|
||||||
To find the ID of your player, click the Conf <i class="material-icons">menu</i> icon on the top right of the player page, then "Remote Control".
|
|
||||||
<br>You can either scan the QR code or type the ID manually.
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|||||||
@@ -12,212 +12,212 @@
|
|||||||
<form action="#" id="adminForm" onsubmit="return false;">
|
<form action="#" id="adminForm" onsubmit="return false;">
|
||||||
<ul>
|
<ul>
|
||||||
<li class="white-bg">
|
<li class="white-bg">
|
||||||
<div class="input-field field-settings">
|
<div class="input-field field-settings">
|
||||||
<i id="admin-lock" class="material-icons prefix">lock</i>
|
<i id="admin-lock" class="material-icons prefix">lock</i>
|
||||||
<input placeholder="Enter admin password" id="password" type="password" class="validate" />
|
<input placeholder="Enter admin password" id="password" type="password" class="validate" />
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="switch-text">
|
<span class="switch-text">
|
||||||
Add songs
|
Add songs
|
||||||
</span>
|
</span>
|
||||||
<div class="switch"><label>
|
<div class="switch"><label>
|
||||||
<span class="left-span">Anyone</span>
|
<span class="left-span">Anyone</span>
|
||||||
<input name="addsongs" type="checkbox" class="conf" /><span class="lever"></span>
|
<input name="addsongs" type="checkbox" class="conf" /><span class="lever"></span>
|
||||||
<span class="right-span">Admin</span>
|
<span class="right-span">Admin</span>
|
||||||
</label></div></li>
|
</label></div></li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<span class="switch-text">
|
<span class="switch-text">
|
||||||
Vote
|
Vote
|
||||||
</span>
|
</span>
|
||||||
<div class="switch"><label>
|
<div class="switch"><label>
|
||||||
<span class="left-span">Anyone</span>
|
<span class="left-span">Anyone</span>
|
||||||
<input name="vote" type="checkbox" class="conf" /><span class="lever"></span>
|
<input name="vote" type="checkbox" class="conf" /><span class="lever"></span>
|
||||||
<span class="right-span">Admin</span>
|
<span class="right-span">Admin</span>
|
||||||
</label></div></li>
|
</label></div></li>
|
||||||
|
|
||||||
<li><span class="switch-text">
|
<li><span class="switch-text">
|
||||||
Shuffle
|
Shuffle
|
||||||
</span>
|
</span>
|
||||||
<div class="switch"><label>
|
<div class="switch"><label>
|
||||||
<span class="left-span">Anyone</span>
|
<span class="left-span">Anyone</span>
|
||||||
<input name="shuffle" type="checkbox" class="conf" /><span class="lever"></span>
|
<input name="shuffle" type="checkbox" class="conf" /><span class="lever"></span>
|
||||||
<span class="right-span">Admin</span>
|
<span class="right-span">Admin</span>
|
||||||
</label></div></li>
|
</label></div></li>
|
||||||
|
|
||||||
<li><span class="switch-text">
|
<li><span class="switch-text">
|
||||||
Skip
|
Skip
|
||||||
</span>
|
</span>
|
||||||
<div class="switch"><label>
|
<div class="switch"><label>
|
||||||
<span class="left-span">Anyone</span>
|
<span class="left-span">Anyone</span>
|
||||||
<input name="skip" type="checkbox" class="conf" /><span class="lever"></span>
|
<input name="skip" type="checkbox" class="conf" /><span class="lever"></span>
|
||||||
<span class="right-span">Admin</span>
|
<span class="right-span">Admin</span>
|
||||||
</label></div></li>
|
</label></div></li>
|
||||||
|
|
||||||
<li><span class="switch-text">
|
<li><span class="switch-text">
|
||||||
Song length
|
Song length
|
||||||
</span>
|
</span>
|
||||||
<div class="switch"><label>
|
<div class="switch"><label>
|
||||||
<span class="left-span">Any</span>
|
<span class="left-span">Any</span>
|
||||||
<input name="longsongs" type="checkbox" class="conf" /><span class="lever"></span>
|
<input name="longsongs" type="checkbox" class="conf" /><span class="lever"></span>
|
||||||
<span class="right-span">Short</span>
|
<span class="right-span">Short</span>
|
||||||
</label></div></li>
|
</label></div></li>
|
||||||
|
|
||||||
<li><span class="switch-text">
|
<li><span class="switch-text">
|
||||||
Type
|
Type
|
||||||
</span>
|
</span>
|
||||||
<div class="switch"><label>
|
<div class="switch"><label>
|
||||||
<span class="left-span">Any</span>
|
<span class="left-span">Any</span>
|
||||||
<input name="allvideos" type="checkbox" class="conf" /><span class="lever"></span>
|
<input name="allvideos" type="checkbox" class="conf" /><span class="lever"></span>
|
||||||
<span class="right-span">Song</span>
|
<span class="right-span">Song</span>
|
||||||
</label></div></li>
|
</label></div></li>
|
||||||
|
|
||||||
|
|
||||||
<li><span class="switch-text">
|
<li><span class="switch-text">
|
||||||
Frontpage
|
Frontpage
|
||||||
</span>
|
</span>
|
||||||
<div class="switch"><label>
|
<div class="switch"><label>
|
||||||
<span class="left-span">Hide</span>
|
<span class="left-span">Hide</span>
|
||||||
<input name="frontpage" type="checkbox" class="conf" /><span class="lever"></span>
|
<input name="frontpage" type="checkbox" class="conf" /><span class="lever"></span>
|
||||||
<span class="right-span">Display</span>
|
<span class="right-span">Display</span>
|
||||||
</label></div></li>
|
</label></div></li>
|
||||||
|
|
||||||
<li><span class="switch-text">
|
<li><span class="switch-text">
|
||||||
After play
|
After play
|
||||||
</span>
|
</span>
|
||||||
<div class="switch"><label>
|
<div class="switch"><label>
|
||||||
<span class="left-span">Keep</span>
|
<span class="left-span">Keep</span>
|
||||||
<input name="removeplay" type="checkbox" class="conf" /><span class="lever"></span>
|
<input name="removeplay" type="checkbox" class="conf" /><span class="lever"></span>
|
||||||
<span class="right-span">Remove</span>
|
<span class="right-span">Remove</span>
|
||||||
</label></div></li>
|
</label></div></li>
|
||||||
<li class="user-password-li hide"><span class="switch-text">
|
<li class="user-password-li hide"><span class="switch-text">
|
||||||
Channel password
|
Channel password
|
||||||
</span>
|
</span>
|
||||||
<div class="switch"><label>
|
<div class="switch"><label>
|
||||||
<span class="left-span">No</span>
|
<span class="left-span">No</span>
|
||||||
<input name="userpass" type="checkbox" class="conf password_protected" /><span class="lever"></span>
|
<input name="userpass" type="checkbox" class="conf password_protected" /><span class="lever"></span>
|
||||||
<span class="right-span">Yes</span>
|
<span class="right-span">Yes</span>
|
||||||
</label></div></li>
|
</label></div></li>
|
||||||
<li class="change_user_pass hide">
|
<li class="change_user_pass hide">
|
||||||
<a href="#!" class="change_user_pass_btn btn waves-effect blue">Change password</a>
|
<a href="#!" class="change_user_pass_btn btn waves-effect blue">Change password</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="delete-all hide">
|
<li class="delete-all hide">
|
||||||
<a href="#" class="delete-all-songs btn red">Delete all songs</a>
|
<a href="#" class="delete-all-songs btn red">Delete all songs</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</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>
|
</form>
|
||||||
</li>
|
</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>
|
<li>
|
||||||
<form id="description_form" style="display:none;">
|
<a class="collapsible-header bold waves-effect">Remote Control
|
||||||
<div class="input-field col s12">
|
<i class="material-icons">settings_remote</i>
|
||||||
<input type="text" placeholder="Description" name="chan_description" id="chan_description" autocomplete="off" maxlength="100" data-length="100" />
|
</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>
|
||||||
</form>
|
<div id="offline-info">
|
||||||
</li>
|
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.
|
||||||
<li class="channel_info_container">
|
</div>
|
||||||
<div id="thumbnail_image">
|
</li>
|
||||||
</div>
|
</ul>
|
||||||
<div id="description_area">
|
</div>
|
||||||
This channel doesn't have a description yet..
|
</li>
|
||||||
</div>
|
</ul>
|
||||||
</li>
|
</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>
|
<li class="no-padding show-only-mobile">
|
||||||
</a></div>
|
<ul class="collapsible collapsible-accordion">
|
||||||
<p>
|
<li>
|
||||||
You can control this Zoff instance from another device by going to <b>https://remote.zoff.me/</b>
|
<a class="collapsible-header bold waves-effect import-a">Remote Controller
|
||||||
</p>
|
<i class="material-icons">settings_remote</i>
|
||||||
</li>
|
</a>
|
||||||
</ul>
|
<div class="collapsible-body">
|
||||||
</div>
|
<ul id="remote-mobile-container">
|
||||||
</li>
|
<li class="white-bg">
|
||||||
</ul>
|
<p id="remote_header">Control another client</p>
|
||||||
</li>
|
<form action="#" class="row" id="remoteform">
|
||||||
|
<div class="input-field col s12">
|
||||||
<li class="no-padding offline-panel">
|
<input
|
||||||
<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"
|
class="input-field"
|
||||||
type="text"
|
type="text"
|
||||||
id="remote_channel"
|
id="remote_channel"
|
||||||
@@ -227,285 +227,285 @@
|
|||||||
maxlength="10"
|
maxlength="10"
|
||||||
data-length="10"
|
data-length="10"
|
||||||
placeholder="ID to remotecontroll"
|
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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
<div id="remote-sidebar-buttons-container">
|
||||||
</li>
|
<button id="playbutton_remote" class="remote-button waves-effect btn green" disabled>
|
||||||
<li class="not-imported white-bg hide">
|
<i id="remote_play" class="material-icons">play_arrow</i>
|
||||||
<div class="center-align">Not imported</div>
|
</button>
|
||||||
<ul class="input-field field-settings not-imported-container">
|
<button id="pausebutton_remote" class="remote-button waves-effect btn gray" disabled>
|
||||||
<li class="white-bg not-imported-element">
|
<i id="remote_pause" class="material-icons">pause</i></button>
|
||||||
<div class="extra-add-text truncate"></div>
|
<button id="skipbutton_remote" class="remote-button waves-effect btn blue" disabled>
|
||||||
<a href="#" class="waves-effect red lighten btn right extra-button extra-button-delete">X</a>
|
<i id="remote_skip" class="material-icons">skip_next</i>
|
||||||
<a href="#" class="waves-effect green lighten btn right extra-button extra-button-search">
|
</button>
|
||||||
<i class="material-icons search-extra">search</i></a>
|
</div>
|
||||||
|
<div class="" id="volume-control-remote" title="Volume"></div>
|
||||||
|
<i class="material-icons slider-vol-mobile">volume_up</i>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
</li>
|
||||||
</div>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="no-padding">
|
<li class="no-padding">
|
||||||
<ul class="collapsible collapsible-accordion white-bg">
|
<ul class="collapsible collapsible-accordion">
|
||||||
<li>
|
<li>
|
||||||
<a class="collapsible-header bold waves-effect export-a">Export Playlist
|
<a class="collapsible-header bold waves-effect import-a">Import Playlist
|
||||||
<i class="material-icons">keyboard_arrow_up</i>
|
<i class="material-icons">keyboard_arrow_down</i>
|
||||||
</a>
|
</a>
|
||||||
<div class="collapsible-body">
|
<div class="collapsible-body">
|
||||||
<ul>
|
<ul>
|
||||||
<li class="white-bg">
|
<li class="white-bg">
|
||||||
<div class="input-field field-settings youtube_export_button export-buttons">
|
<div class="input-field field-settings youtube_unclicked import-buttons">
|
||||||
<a class="modal-trigger waves-effect red btn export-youtube" id="listExport" title="Export to YouTube">
|
<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" />
|
<img src="/assets/images/youtube.png" class="youtube_logo" alt="Youtube Logo" />
|
||||||
</a>
|
</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>
|
||||||
<div class="current_number hide col s8 offset-s2">0/0</div>
|
<div class="input-field field-settings youtube_clicked">
|
||||||
</div>
|
<form action="#" id="listImport">
|
||||||
</div>
|
<i class="material-icons import-icon">playlist_add</i>
|
||||||
</li>
|
<input title="Input YouTube-playlist url here!" placeholder="Enter YouTube-list URL" id="import" type="text" class="validate" autocomplete="off" />
|
||||||
<li class="white-bg">
|
<div class="valign playlist_loader_padding">
|
||||||
<div class="exported-list input-field field-settings export-buttons">
|
<div id="playlist_loader" class="preloader-wrapper small active hide">
|
||||||
</div>
|
<div class="spinner-layer spinner-blue">
|
||||||
<li class="not-exported white-bg hide">
|
<div class="circle-clipper left">
|
||||||
<div class="center-align">Not exported songs</div>
|
<div class="circle"></div>
|
||||||
<ul class="input-field field-settings not-exported-container">
|
</div>
|
||||||
<li class="white-bg not-exported-element">
|
<div class="gap-patch">
|
||||||
<div id="extra-export-container-text">
|
<div class="circle"></div>
|
||||||
<input class="extra-add-text truncate" readonly />
|
</div>
|
||||||
</div>
|
<div class="circle-clipper right">
|
||||||
<a href="#" class="waves-effect red lighten btn right extra-button extra-button-delete">X</a>
|
<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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</li>
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<!--
|
<li class="no-padding">
|
||||||
<li class="no-padding">
|
<ul class="collapsible collapsible-accordion white-bg">
|
||||||
<h5 id="desc-title">List description</h5>
|
<li>
|
||||||
<span id="description"></span>
|
<a class="collapsible-header bold waves-effect export-a">Export Playlist
|
||||||
</li>
|
<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>
|
||||||
|
-->
|
||||||
|
|||||||
@@ -11,6 +11,10 @@ router.use(function(req, res, next) {
|
|||||||
next(); // make sure we go to the next routes and don't stop here
|
next(); // make sure we go to the next routes and don't stop here
|
||||||
});
|
});
|
||||||
|
|
||||||
|
router.route('/favicon.ico').get(function(req, res, next) {
|
||||||
|
res.sendFile(path.join(pathThumbnails, '/public/assets/images/favicon.ico'));
|
||||||
|
});
|
||||||
|
|
||||||
router.route('/:channel_name').get(function(req, res, next){
|
router.route('/:channel_name').get(function(req, res, next){
|
||||||
try{
|
try{
|
||||||
var url = req.headers['x-forwarded-host'] ? req.headers['x-forwarded-host'] : req.headers.host.split(":")[0];
|
var url = req.headers['x-forwarded-host'] ? req.headers['x-forwarded-host'] : req.headers.host.split(":")[0];
|
||||||
|
|||||||
Reference in New Issue
Block a user