KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2026-01-07 01:55:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated materialize to v0.98 and made changes accordingly

Browse Source 
- Made improvements to how the remotecontroller on mobile looks
- Added thumbnails some places
- Started using googles new material font because of materializecss
This commit is contained in:
Kasper Rynning-Tønnesen
2017-01-28 18:16:57 +01:00
parent da45f27cd1
commit 3d4ed9b66c
49 changed files with 375 additions and 14640 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8139
public/css/materialize.css vendored
View File

File diff suppressed because it is too large Load Diff

8
public/css/materialize.min.css vendored
View File

File diff suppressed because one or more lines are too long

211
public/css/style.css
View File

@@ -40,6 +40,7 @@
cursor: default; cursor: default;
color: white; color: white;
padding:0; padding:0;
line-height: 36px;
} }
#playing_on{ #playing_on{
@@ -52,7 +53,7 @@
color: rgba(255,255,255, 0.8); color: rgba(255,255,255, 0.8);
} }
#playing_on #chromecast_icon{ #playing_on #chromecast_icon i{
font-size:70px; font-size:70px;
} }
@@ -95,6 +96,7 @@
.next_page_hide, .next_page, .last_page, .last_page_hide{ .next_page_hide, .next_page, .last_page, .last_page_hide{
padding:0 10px; padding:0 10px;
float:right; float:right;
display: flex;
} }
.settings_embed:focus{ .settings_embed:focus{
@@ -148,17 +150,20 @@
.extra-button{ .extra-button{
margin: 0 4px !important; margin: 0 4px !important;
padding: 0px !important; padding: 0px !important;
display: inline-block; width: 37px;
width: 37px; height: 40px !important;
height: 40px !important; line-height: 40px !important;
line-height: 40px !important; color: white !important;
color: white !important; display: flex !important;
justify-content: center;
} }
.search-extra{ .search-extra{
height: 40px !important; height: 40px !important;
line-height: 40px !important; line-height: 40px !important;
margin: 0 !important;
color: white !important;
} }
.import-spotify-auth, .import-youtube, .export-spotify-auth, .export-youtube, .exported-playlist{ .import-spotify-auth, .import-youtube, .export-spotify-auth, .export-youtube, .exported-playlist{
@@ -166,6 +171,7 @@
height:40px !important; height:40px !important;
line-height: 40px !important; line-height: 40px !important;
margin: 0 4rem 0 0 !important; margin: 0 4rem 0 0 !important;
width: 76%;
} }
.import-spotify-auth{ .import-spotify-auth{
@@ -190,10 +196,6 @@
display: none; display: none;
} }
.youtube_clicked{
display: none;
}
#chatPlaylist{ #chatPlaylist{
overflow: hidden; overflow: hidden;
} }
@@ -403,6 +405,10 @@ nav, .tabs .tab a,
background-color: #2D2D2D; background-color: #2D2D2D;
} }
.tabs .tab a{
padding: 0px;
}
.secondary-content, .secondary-content,
.dropdown-content li > a, .dropdown-content li > span, .dropdown-content li > a, .dropdown-content li > span,
.input-field .prefix.active, .input-field .prefix.active,
@@ -420,6 +426,23 @@ input[type=text]:focus:not([readonly]) + label, input[type=password]:focus:not([
.field-settings{ .field-settings{
margin-left: 25px !important; margin-left: 25px !important;
color: rgb(68,68,68); color: rgb(68,68,68);
display: flex;
align-items: center;
height: 64px !important;
}
.not-imported-container{
display: block;
height: 100% !important;
}
.not-exported-container{
display: block !important;
margin-left: 0px !important;
}
.youtube_clicked{
display: none;
} }
.import-icon{ .import-icon{
@@ -427,16 +450,18 @@ input[type=text]:focus:not([readonly]) + label, input[type=password]:focus:not([
} }
#import, #import_spotify{ #import, #import_spotify{
width:65%; width: 65%;
padding-left:35px; padding-left: 35px;
color:rgb(68,68,68); color: rgb(68,68,68);
border-bottom: 1px solid lightgrey; border-bottom: 1px solid lightgrey;
padding-bottom: 10px; padding-bottom: 0px;
height: 64px;
} }
#password{ #password{
width:84%; width: 84%;
margin-left:10px; margin-left: 10px;
margin-bottom: 0;
} }
span.badge.new, span.badge.new,
@@ -628,7 +653,7 @@ hide mdi-action-visibility mdi-action-visibility-off
@font-face { @font-face {
font-family:"futura-pt"; font-family:"futura-pt";
src:url('../font/futura.woff2') format('woff2'),url('../font/futura.woff') format('woff'); src:url('../fonts/futura.woff2') format('woff2'),url('../fonts/futura.woff') format('woff');
font-style:normal;font-weight:300; font-style:normal;font-weight:300;
} }
@@ -878,6 +903,21 @@ hide mdi-action-visibility mdi-action-visibility-off
/*------------------- Channel page ---------------------------------------------------------------------------- */ /*------------------- Channel page ---------------------------------------------------------------------------- */
.collapsible-header{
font-weight: 400 !important;
height: 64px !important;
line-height: 64px !important;
display: flex !important;
align-items: center;
justify-content: flex-end;
flex-direction: row-reverse;
}
.collapsible-body{
padding: 0rem;
}
.suggest_thumb { .suggest_thumb {
width:25%; width:25%;
float:left; float:left;
@@ -1194,10 +1234,6 @@ ul #chat-log{
width: 100%; width: 100%;
} }
#viewers{
width: initial;
padding-right: 3%;
}
#playlist{ #playlist{
/*padding:0px 15px;*/ /*padding:0px 15px;*/
flex:1; flex:1;
@@ -1206,16 +1242,27 @@ ul #chat-log{
/*background-color:rgba(0,0,0,0.2);*/ /*background-color:rgba(0,0,0,0.2);*/
} }
.castButton, .castButton:active, .castButton:focus, .castButton:hover, .castButton-active, .castButton-active:active, .castButton-active:hover, .castButton-active:focus { .castButton{
width: 0px; display:none !important;
height: 0px; }
.castButton-unactive, .castButton-unactive:active, .castButton-unactive:focus, .castButton-unactive:hover, .castButton-active, .castButton-active:active, .castButton-active:hover, .castButton-active:focus {
width: 33px;
height: 33px;
float: right; float: right;
margin: 0px 25px 0px -10px; /*margin: 0px 25px 0px -10px;*/
background: transparent; background: transparent;
border: none; border: none;
background: transparent; background: transparent;
color: white;
border: none; border: none;
font-size:18px; font-size:18px;
padding-right: 1%;
}
.castButton-unactive i, .castButton-active i{
font-size: 20px;
margin-top: 3px;
} }
/*.castButton-active, .castButton-active:active, .castButton-active:hover, .castButton-active:focus{ /*.castButton-active, .castButton-active:active, .castButton-active:hover, .castButton-active:focus{
@@ -1247,13 +1294,17 @@ ul #chat-log{
transition: background-color .2s; transition: background-color .2s;
min-width: 64px; min-width: 64px;
float:right; float:right;
text-align: center;
} }
.nav-btn:hover{background-color:rgba(0,0,0,0.6);} .nav-btn:hover{background-color:rgba(0,0,0,0.6);}
.hover-text{display:none;} .hover-text{display:none;}
.nav-btn:hover > .hover-text {display:inline;} .nav-btn:hover > .hover-text {
display: flex;
justify-content: center;
}
nav ul li:hover, nav ul li.active { nav ul li:hover, nav ul li.active {
background-color: rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.1);
} }
.list-image, .list-suggested-image{ .list-image, .list-suggested-image{
@@ -1267,7 +1318,8 @@ nav ul li:hover, nav ul li.active {
} }
.list-image:after { .list-image:after {
font-family: "Material-Design-Icons"; font-family: "Material Icons";
content:"thumb_up";
speak: none; speak: none;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@@ -1275,7 +1327,6 @@ nav ul li:hover, nav ul li.active {
text-transform: none; text-transform: none;
text-rendering: auto; text-rendering: auto;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
content: "\e686";
color: white; color: white;
font-size: -webkit-xxx-large; font-size: -webkit-xxx-large;
position: absolute; position: absolute;
@@ -1292,7 +1343,7 @@ nav ul li:hover, nav ul li.active {
} }
.list-suggested-image:after { .list-suggested-image:after {
font-family: "Material-Design-Icons"; font-family: "Material Icons";
speak: none; speak: none;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@@ -1300,7 +1351,7 @@ nav ul li:hover, nav ul li.active {
text-transform: none; text-transform: none;
text-rendering: auto; text-rendering: auto;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
content: "\e625";/*"\e800";*/ content: "check";
color:white; color:white;
font-size: calc(100vh / 15); font-size: calc(100vh / 15);
position:absolute; position:absolute;
@@ -1372,11 +1423,13 @@ nav ul li:hover, nav ul li.active {
} }
#add-many i{ line-height: 36px !important;} #add-many i{ line-height: 36px !important;}
#results{ #results{
background-color: rgba(0,0,0,0.8); background-color: rgba(0,0,0,0.8);
margin-top: -27px; position: absolute;
max-height: calc(100vh - 64px); width: 100%;
overflow: overlay; top: 64px;
overflow-x: hidden; max-height: calc(100vh - 64px);
overflow: overlay;
overflow-x: hidden;
} }
.result:hover, .hoverResults { .result:hover, .hoverResults {
background-color: rgba(0,0,0,0.4); background-color: rgba(0,0,0,0.4);
@@ -1388,9 +1441,9 @@ nav ul li:hover, nav ul li.active {
.list-remove{ .list-remove{
width: 70px; width: 70px;
margin-top: -6%; margin-top: -19px;
font-size: 12px; font-size: 12px;
height: 20px; height: 0px;
display: inline-table; display: inline-table;
float: right; float: right;
padding-left: 10px; padding-left: 10px;
@@ -1398,16 +1451,19 @@ nav ul li:hover, nav ul li.active {
.list-song .card-action{ .list-song .card-action{
border-top:none !important; border-top:none !important;
background: transparent;
} }
#del, #del_suggested, #del_user_suggested{ #del, #del_suggested, #del_user_suggested{
position: absolute; position: absolute;
text-align: right; text-align: right;
right: 0%; right: -35%;
bottom: -31%; top: 45%;
height: 19px;
line-height: normal; line-height: normal;
padding: 2px 12px; padding: 2px 12px;
color: white; color: white;
background: transparent;
width: initial; width: initial;
border-top: 1px solid rgba(160,160,160,0.2); border-top: 1px solid rgba(160,160,160,0.2);
} }
@@ -1559,6 +1615,10 @@ nav ul li:hover, nav ul li.active {
margin-left:10px; margin-left:10px;
} }
#volume-button{
margin-top:2px;
}
#playpause:hover, #volume-button:hover, #fullscreen:hover #playpause:hover, #volume-button:hover, #fullscreen:hover
{ {
color:rgba(255,255,255,0.5); color:rgba(255,255,255,0.5);
@@ -1569,6 +1629,7 @@ nav ul li:hover, nav ul li.active {
float:right; float:right;
color:white; color:white;
margin-right:15px; margin-right:15px;
margin-top: 2px;
} }
#duration, #viewers #duration, #viewers
@@ -1579,14 +1640,22 @@ nav ul li:hover, nav ul li.active {
margin-left:15px; margin-left:15px;
} }
#viewers{ #viewers {
float: right; float: right;
height: 32px;
line-height: 33px;
display: flex;
align-items: center;
margin: 0px;
padding-right:1%;
} }
#play, #pause, #volume-button, #fullscreen #play, #pause, #volume-button, #fullscreen
{ {
font-size:20px; font-size: 30px;
cursor:pointer; cursor:pointer;
height: 33px;
line-height: 31px;
} }
#volume { #volume {
@@ -1685,6 +1754,14 @@ nav ul li:hover, nav ul li.active {
right: 0; right: 0;
} }
#remote-sidebar-buttons-container{
text-align: center;
}
.slider-vol{
display:none !important;
}
#frontpage-viewer-counter{ #frontpage-viewer-counter{
right: 0px; right: 0px;
width: 62px; width: 62px;
@@ -1780,13 +1857,14 @@ nav ul li:hover, nav ul li.active {
margin-top: inherit; margin-top: inherit;
} }
#play, #pause, #volume-button, #fullscreen { #play, #pause, #volume-button i, #fullscreen i, .castButton-unactive i, .castButton-active i{
font-size: 31px; font-size: 31px;
font-size: 31px !important;
margin-top: 8px;
} }
.castButton, .castButton:active, .castButton:focus, .castButton:hover, .castButton-active, .castButton-active:active, .castButton-active:hover, .castButton-active:focus{ .castButton-unactive, .castButton-active{
font-size: 28px; margin-right: 10px;
margin: 0 33px 0 0px;
} }
#viewers, #volume{ #viewers, #volume{
@@ -1868,7 +1946,7 @@ nav ul li:hover, nav ul li.active {
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.42); text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.42);
} }
.control-list li a{ min-width: 0px; width: 37px; padding: 0 0 0 5px;} .control-list li a{ min-width: 0px; width: 37px; padding: 0 0 0 0px;}
nav .zbrand{ nav .zbrand{
-webkit-transform:initial; -webkit-transform:initial;
@@ -1974,6 +2052,11 @@ nav ul li:hover, nav ul li.active {
line-height:21px; line-height:21px;
} }
.remote-button i{
height: 36px !important;
line-height: 36px !important;
}
#remote-controls { #remote-controls {
font-size:50px !important; font-size:50px !important;
} }
@@ -1987,8 +2070,16 @@ nav ul li:hover, nav ul li.active {
text-transform: uppercase; text-transform: uppercase;
} }
#code-link{ #code-link{
height: auto; height: auto !important;
text-align: center; text-align: center;
display: block !important;
}
.remote-panel p {
padding: 0 42px;
color: #000;
text-align: center;
line-height: initial;
} }
@@ -2035,16 +2126,22 @@ nav ul li:hover, nav ul li.active {
} }
#volume-control-remote{ #volume-control-remote{
float:none; float: none;
width:75%; width: 70%;
margin:auto; margin:auto;
margin-top:40px; margin-left: 10px;
margin-right: 0;
margin-top: 30px;
height: 10px;
border-radius: 4px;
margin-bottom: 20px;
} }
#volume-control-remote .ui-slider-range-min{ #volume-control-remote .ui-slider-range-min{
margin-left:0px; margin-left:0px;
margin-top:-4px; margin-top: 0px;
height:10px; height:10px;
background: black;
} }
#volume-control-remote .ui-slider-handle{ #volume-control-remote .ui-slider-handle{
@@ -2052,11 +2149,15 @@ nav ul li:hover, nav ul li.active {
margin-top:-3px; margin-top:-3px;
background: #2d2d2d; background: #2d2d2d;
border:none; border:none;
display: none;
} }
.slider-vol{ .slider-vol{
float: left; float: right;
color: black;
font-size: 22px; font-size: 22px;
margin-right: 20px;
margin-top: 6px;
} }
.about-remote{ .about-remote{

4
public/dist/embed.min.js vendored
View File

File diff suppressed because one or more lines are too long

103
public/dist/lib/cache-polyfill.js vendored
View File

@@ -1,103 +0,0 @@
/**
* Copyright 2015 Google Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/
(function() {
var nativeAddAll = Cache.prototype.addAll;
var userAgent = navigator.userAgent.match(/(Firefox|Chrome)\/(\d+\.)/);
// Has nice behavior of `var` which everyone hates
if (userAgent) {
var agent = userAgent[1];
var version = parseInt(userAgent[2]);
}
if (
nativeAddAll && (!userAgent ||
(agent === 'Firefox' && version >= 46) ||
(agent === 'Chrome' && version >= 50)
)
) {
return;
}
Cache.prototype.addAll = function addAll(requests) {
var cache = this;
// Since DOMExceptions are not constructable:
function NetworkError(message) {
this.name = 'NetworkError';
this.code = 19;
this.message = message;
}
NetworkError.prototype = Object.create(Error.prototype);
return Promise.resolve().then(function() {
if (arguments.length < 1) throw new TypeError();
// Simulate sequence<(Request or USVString)> binding:
var sequence = [];
requests = requests.map(function(request) {
if (request instanceof Request) {
return request;
}
else {
return String(request); // may throw TypeError
}
});
return Promise.all(
requests.map(function(request) {
if (typeof request === 'string') {
request = new Request(request);
}
var scheme = new URL(request.url).protocol;
if (scheme !== 'http:' && scheme !== 'https:') {
throw new NetworkError("Invalid scheme");
}
return fetch(request.clone());
})
);
}).then(function(responses) {
// If some of the responses has not OK-eish status,
// then whole operation should reject
if (responses.some(function(response) {
return !response.ok;
})) {
throw new NetworkError('Incorrect response status');
}
// TODO: check that requests don't overwrite one another
// (don't think this is possible to polyfill due to opaque responses)
return Promise.all(
responses.map(function(response, i) {
return cache.put(requests[i], response);
})
);
}).then(function() {
return undefined;
});
};
Cache.prototype.add = function add(request) {
return this.addAll([request]);
};
}());

1
public/dist/lib/jquery.lazyload.js vendored
View File

@@ -1 +0,0 @@
!function(a,b,c,d){var e=a(b);a.fn.lazyload=function(f){function j(){var b=0;g.each(function(){var c=a(this);if(!i.skip_invisible||c.is(":visible"))if(a.abovethetop(this,i)||a.leftofbegin(this,i));else if(a.belowthefold(this,i)||a.rightoffold(this,i)){if(++b>i.failure_limit)return!1}else c.trigger("appear"),b=0})}var h,g=this,i={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!1,appear:null,load:null,placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"};return f&&(d!==f.failurelimit&&(f.failure_limit=f.failurelimit,delete f.failurelimit),d!==f.effectspeed&&(f.effect_speed=f.effectspeed,delete f.effectspeed),a.extend(i,f)),h=i.container===d||i.container===b?e:a(i.container),0===i.event.indexOf("scroll")&&h.bind(i.event,function(){return j()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,(c.attr("src")===d||c.attr("src")===!1)&&c.is("img")&&c.attr("src",i.placeholder),c.one("appear",function(){if(!this.loaded){if(i.appear){var d=g.length;i.appear.call(b,d,i)}a("<img />").bind("load",function(){var d=c.attr("data-"+i.data_attribute);c.hide(),c.is("img")?c.attr("src",d):c.css("background-image","url('"+d+"')"),c[i.effect](i.effect_speed),b.loaded=!0;var e=a.grep(g,function(a){return!a.loaded});if(g=a(e),i.load){var f=g.length;i.load.call(b,f,i)}}).attr("src",c.attr("data-"+i.data_attribute))}}),0!==i.event.indexOf("scroll")&&c.bind(i.event,function(){b.loaded||c.trigger("appear")})}),e.bind("resize",function(){j()}),/(?:iphone|ipod|ipad).*os 5/gi.test(navigator.appVersion)&&e.bind("pageshow",function(b){b.originalEvent&&b.originalEvent.persisted&&g.each(function(){a(this).trigger("appear")})}),a(c).ready(function(){j()}),this},a.belowthefold=function(c,f){var g;return g=f.container===d||f.container===b?(b.innerHeight?b.innerHeight:e.height())+e.scrollTop():a(f.container).offset().top+a(f.container).height(),g<=a(c).offset().top-f.threshold},a.rightoffold=function(c,f){var g;return g=f.container===d||f.container===b?e.width()+e.scrollLeft():a(f.container).offset().left+a(f.container).width(),g<=a(c).offset().left-f.threshold},a.abovethetop=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollTop():a(f.container).offset().top,g>=a(c).offset().top+f.threshold+a(c).height()},a.leftofbegin=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollLeft():a(f.container).offset().left,g>=a(c).offset().left+f.threshold+a(c).width()},a.inviewport=function(b,c){return!(a.rightoffold(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.abovethetop(b,c))},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})}(jQuery,window,document);

1
public/dist/lib/jquery.scrollstop.js vendored
View File

@@ -1 +0,0 @@
!function(){var a=jQuery.event.special,b="D"+ +new Date,c="D"+(+new Date+1);a.scrollstart={setup:function(){var c,d=function(b){var d=this,e=arguments;c?clearTimeout(c):(b.type="scrollstart",jQuery.event.dispatch.apply(d,e)),c=setTimeout(function(){c=null},a.scrollstop.latency)};jQuery(this).bind("scroll",d).data(b,d)},teardown:function(){jQuery(this).unbind("scroll",jQuery(this).data(b))}},a.scrollstop={latency:300,setup:function(){var b,d=function(c){var d=this,e=arguments;b&&clearTimeout(b),b=setTimeout(function(){b=null,c.type="scrollstop",jQuery.event.dispatch.apply(d,e)},a.scrollstop.latency)};jQuery(this).bind("scroll",d).data(c,d)},teardown:function(){jQuery(this).unbind("scroll",jQuery(this).data(c))}}}();

6179
public/dist/lib/materialize.js vendored
View File

File diff suppressed because one or more lines are too long

14
public/dist/lib/materialize.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
public/dist/main.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
public/dist/remote.min.js vendored
View File

@@ -1 +1 @@
!function(){var e=!0;mobilecheck=function(){var e=!1;return function(t){(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(t)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(t.substr(0,4)))&&(e=!0)}(navigator.userAgent||navigator.vendor||window.opera),e},$(document).ready(function(){document.title="Zöff Remote",setTimeout(function(){$("#search").focus()},500);var e={"sync disconnect on unload":!0,secure:!0};"remote.zoff.no"==window.location.hostname?add="https://zoff.no":add="localhost",socket=io.connect(add+":8080",e),id=window.location.pathname.split("/")[1],id&&(id=id.toLowerCase(),t.control()),git_info=$.ajax({type:"GET",url:"https://api.github.com/repos/zoff-music/zoff/commits",async:!1}).responseText,git_info=$.parseJSON(git_info),$("#latest-commit").html("Latest Commit: <br>"+git_info[0].commit.author.date.substring(0,10)+": "+git_info[0].committer.login+"<br><a href='"+git_info[0].html_url+"'>"+git_info[0].sha.substring(0,10)+"</a>: "+git_info[0].commit.message+"<br")}),$("#playbutton").on("click",function(){socket.emit("id",{id:id,type:"play",value:"mock"})}),$("#pausebutton").on("click",function(){socket.emit("id",{id:id,type:"pause",value:"mock"})}),$("#skipbutton").on("click",function(){socket.emit("id",{id:id,type:"skip",value:"mock"})}),$("#remoteform").on("submit",function(){t.control()});var t={control:function(){e?(id||(id=document.getElementById("remoteform").chan.value,window.history.pushState("object or string","Title","/"+id)),document.getElementById("remoteform").chan.value="",e=!1,$(".rc").css("display","block"),$("#remote-text").text("Controlling "+id.toUpperCase()),document.getElementById("search").setAttribute("length","18"),document.getElementById("search").setAttribute("maxlength","18"),$("#forsearch").html("Type new channel name to change to"),$("#volume-control").slider({min:0,max:100,value:100,range:"min",animate:!0,stop:function(e,t){socket.emit("id",{id:id,type:"volume",value:t.value})}})):(socket.emit("id",{id:id,type:"channel",value:$("#search").val().toLowerCase()}),$("#search").val(""))}}}(); !function(){var e=!0;mobilecheck=function(){var e=!1;return function(t){(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(t)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(t.substr(0,4)))&&(e=!0)}(navigator.userAgent||navigator.vendor||window.opera),e},$(document).ready(function(){document.title="Zöff Remote",setTimeout(function(){$("#search").focus()},500);var e={"sync disconnect on unload":!0,secure:!0};$("#about").modal(),$("#contact").modal(),"remote.zoff.no"==window.location.hostname?add="https://zoff.no":add="localhost",socket=io.connect(add+":8080",e),id=window.location.pathname.split("/")[1],id&&(id=id.toLowerCase(),t.control()),git_info=$.ajax({type:"GET",url:"https://api.github.com/repos/zoff-music/zoff/commits",async:!1}).responseText,git_info=$.parseJSON(git_info),$("#latest-commit").html("Latest Commit: <br>"+git_info[0].commit.author.date.substring(0,10)+": "+git_info[0].committer.login+"<br><a href='"+git_info[0].html_url+"'>"+git_info[0].sha.substring(0,10)+"</a>: "+git_info[0].commit.message+"<br")}),$("#playbutton").on("click",function(){socket.emit("id",{id:id,type:"play",value:"mock"})}),$("#pausebutton").on("click",function(){socket.emit("id",{id:id,type:"pause",value:"mock"})}),$("#skipbutton").on("click",function(){socket.emit("id",{id:id,type:"skip",value:"mock"})}),$("#remoteform").on("submit",function(){t.control()});var t={control:function(){e?(id||(id=document.getElementById("remoteform").chan.value,window.history.pushState("object or string","Title","/"+id)),document.getElementById("remoteform").chan.value="",e=!1,$(".rc").css("display","block"),$("#remote-text").text("Controlling "+id.toUpperCase()),document.getElementById("search").setAttribute("length","18"),document.getElementById("search").setAttribute("maxlength","18"),$("#forsearch").html("Type new channel name to change to"),$("#volume-control").slider({min:0,max:100,value:100,range:"min",animate:!0,stop:function(e,t){socket.emit("id",{id:id,type:"volume",value:t.value})}})):(socket.emit("id",{id:id,type:"channel",value:$("#search").val().toLowerCase()}),$("#search").val(""))}}}();

0
public/font/futura.woff → public/fonts/futura.woff
View File

0
public/font/futura.woff2 → public/fonts/futura.woff2
View File

0
public/font/material-design-icons/LICENSE.txt → public/fonts/material-design-icons/LICENSE.txt
View File

0
public/font/material-design-icons/Material-Design-Icons.eot → public/fonts/material-design-icons/Material-Design-Icons.eot
View File

0
public/font/material-design-icons/Material-Design-Icons.svg → public/fonts/material-design-icons/Material-Design-Icons.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 322 KiB

After

Width:  |  Height:  |  Size: 322 KiB

0
public/font/material-design-icons/Material-Design-Icons.ttf → public/fonts/material-design-icons/Material-Design-Icons.ttf
View File

0
public/font/material-design-icons/Material-Design-Icons.woff → public/fonts/material-design-icons/Material-Design-Icons.woff
View File

0
public/font/material-design-icons/Material-Design-Icons.woff2 → public/fonts/material-design-icons/Material-Design-Icons.woff2
View File

0
public/font/open_sans.woff → public/fonts/open_sans.woff
View File

0
public/font/roboto/Roboto-Bold.ttf → public/fonts/roboto/Roboto-Bold.ttf
View File

0
public/font/roboto/Roboto-Bold.woff → public/fonts/roboto/Roboto-Bold.woff
View File

0
public/font/roboto/Roboto-Bold.woff2 → public/fonts/roboto/Roboto-Bold.woff2
View File

0
public/font/roboto/Roboto-Light.ttf → public/fonts/roboto/Roboto-Light.ttf
View File

0
public/font/roboto/Roboto-Light.woff → public/fonts/roboto/Roboto-Light.woff
View File

0
public/font/roboto/Roboto-Light.woff2 → public/fonts/roboto/Roboto-Light.woff2
View File

0
public/font/roboto/Roboto-Medium.ttf → public/fonts/roboto/Roboto-Medium.ttf
View File

0
public/font/roboto/Roboto-Medium.woff → public/fonts/roboto/Roboto-Medium.woff
View File

0
public/font/roboto/Roboto-Medium.woff2 → public/fonts/roboto/Roboto-Medium.woff2
View File

0
public/font/roboto/Roboto-Regular.ttf → public/fonts/roboto/Roboto-Regular.ttf
View File

0
public/font/roboto/Roboto-Regular.woff → public/fonts/roboto/Roboto-Regular.woff
View File

0
public/font/roboto/Roboto-Regular.woff2 → public/fonts/roboto/Roboto-Regular.woff2
View File

0
public/font/roboto/Roboto-Thin.ttf → public/fonts/roboto/Roboto-Thin.ttf
View File

0
public/font/roboto/Roboto-Thin.woff → public/fonts/roboto/Roboto-Thin.woff
View File

0
public/font/roboto/Roboto-Thin.woff2 → public/fonts/roboto/Roboto-Thin.woff2
View File

35
public/js/admin.js
View File

@@ -83,7 +83,15 @@ var Admin = {
} }
$(".card-action").removeClass("hide"); $(".card-action").removeClass("hide");
$("#admin-lock").removeClass("mdi-action-lock"); $("#admin-lock").addClass("clickable");
$("#admin-lock").html("lock_open");
if(!Helper.mobilecheck()){
$('#admin-lock').tooltip({
delay: 5,
position: "left",
tooltip: "Logout"
});
}
$("#password").val(""); $("#password").val("");
$("#password").attr("placeholder", "Change channel password"); $("#password").attr("placeholder", "Change channel password");
//if(!Helper.mobilecheck()){ //if(!Helper.mobilecheck()){
@@ -95,8 +103,17 @@ var Admin = {
//$("#wrapper").toggleClass("tabs_height"); //$("#wrapper").toggleClass("tabs_height");
//} //}
if(!Helper.contains($("#admin-lock").attr("class").split(" "), "mdi-action-lock-open")) if($("#admin-lock").html() != "lock_open"){
$("#admin-lock").addClass("mdi-action-lock-open clickable"); $("#admin-lock").addClass("clickable");
$("#admin-lock").html("lock_open");
if(!Helper.mobilecheck()){
$('#admin-lock').tooltip({
delay: 5,
position: "left",
tooltip: "Logout"
});
}
}
$('ul.playlist-tabs-loggedIn').tabs('select_tab', $(".playlist-tabs li a.active").attr("href").substring(1)); $('ul.playlist-tabs-loggedIn').tabs('select_tab', $(".playlist-tabs li a.active").attr("href").substring(1));
}, },
@@ -144,8 +161,12 @@ var Admin = {
$("input[name="+names[i]+"]").attr("disabled", true); $("input[name="+names[i]+"]").attr("disabled", true);
} }
if(!Helper.contains($("#admin-lock").attr("class").split(" "), "mdi-action-lock")){ if($("#admin-lock").html() != "lock"){
$("#admin-lock").addClass("mdi-action-lock"); $("#admin-lock").removeClass("clickable");
$("#admin-lock").html("lock");
if(!Helper.mobilecheck()){
$('#admin-lock').tooltip('remove');
}
} }
if(!Helper.contains($(".playlist-tabs-loggedIn").attr("class").split(" "), "hide")){ if(!Helper.contains($(".playlist-tabs-loggedIn").attr("class").split(" "), "hide")){
@@ -166,7 +187,7 @@ var Admin = {
} else { } else {
$('ul.playlist-tabs').tabs('select_tab', $(".playlist-tabs-loggedIn li a.active").attr("href").substring(1)); $('ul.playlist-tabs').tabs('select_tab', $(".playlist-tabs-loggedIn li a.active").attr("href").substring(1));
} }
$("#admin-lock").removeClass("mdi-action-lock-open clickable"); $("#admin-lock").removeClass("clickable");
$("#password").attr("placeholder", "Enter channel password"); $("#password").attr("placeholder", "Enter channel password");
//$("#top-button").removeClass("top-button-with-tabs"); //$("#top-button").removeClass("top-button-with-tabs");
}, },
@@ -200,7 +221,7 @@ var Admin = {
} }
if((hasadmin)){ if((hasadmin)){
if($(".mdi-action-lock").length === 0) Admin.display_logged_out(); if($("#admin-lock").html() != "lock") Admin.display_logged_out();
}else if(!hasadmin && Crypt.get_pass(chan.toLowerCase()) === undefined){ }else if(!hasadmin && Crypt.get_pass(chan.toLowerCase()) === undefined){
if(!Helper.contains($(".playlist-tabs").attr("class").split(" "), "hide")) { if(!Helper.contains($(".playlist-tabs").attr("class").split(" "), "hide")) {
$(".playlist-tabs-loggedIn").removeClass("hide"); $(".playlist-tabs-loggedIn").removeClass("hide");

6
public/js/frontpage.js
View File

@@ -250,7 +250,7 @@ var Frontpage = {
set_viewers: function(viewers){ set_viewers: function(viewers){
//if(viewers > 0){ //if(viewers > 0){
//var to_add = viewers > 1 ? "listeners" : "listener"; //var to_add = viewers > 1 ? "listeners" : "listener";
$("#frontpage-viewer-counter").html("<i class='mdi-action-visibility frontpage-viewers'></i>" + viewers); $("#frontpage-viewer-counter").html("<i class='material-icons frontpage-viewers'>visibility</i>" + viewers);
//} //}
}, },
@@ -366,6 +366,10 @@ function initfp(){
setup_playlist_listener(); setup_playlist_listener();
} }
$("#about").modal();
$("#help").modal();
$("#contact").modal();
Helper.log("----"); Helper.log("----");
Helper.log("Sending frontpage_lists"); Helper.log("Sending frontpage_lists");
Helper.log("Socket", socket); Helper.log("Socket", socket);

80
public/js/list.js
View File

@@ -124,7 +124,7 @@ var List = {
} }
}); });
if($("#wrapper").children().length > List.can_fit && !$("#pageButtons").length){ if($("#wrapper").children().length > List.can_fit && !$("#pageButtons").length){
$('<div id="pageButtons"><span class="first_page_hide btn-flat">|<</span><a class="first_page waves-effect waves-light btn-flat">|<</a><span class="prev_page_hide btn-flat">< prev</span><a class="prev_page waves-effect waves-light btn-flat">< prev</a> <span id="pageNumber" class="btn-flat">1</span> <a class="last_page waves-effect waves-light btn-flat">>|</a><span class="last_page_hide btn-flat">>|</span><a class="next_page waves-effect waves-light btn-flat">next ></a><span class="next_page_hide btn-flat">next ></span></div>').insertAfter("#wrapper"); $('<div id="pageButtons"><span class="first_page_hide btn-flat"><i class="material-icons">first_page</i></span><a class="first_page waves-effect waves-light btn-flat"><i class="material-icons">first_page</i></a><span class="prev_page_hide btn-flat"><i class="material-icons">navigate_before</i> prev</span><a class="prev_page waves-effect waves-light btn-flat"><i class="material-icons">navigate_before</i> prev</a> <span id="pagenumber">1</span> <a class="last_page waves-effect waves-light btn-flat"><i class="material-icons">last_page</i></a><span class="last_page_hide btn-flat"><i class="material-icons">last_page</i></span><a class="next_page waves-effect waves-light btn-flat">next <i class="material-icons">navigate_next</i></a><span class="next_page_hide btn-flat">next <i class="material-icons">navigate_next</i></span></div>').insertAfter("#wrapper");
$(".prev_page").css("display", "none"); $(".prev_page").css("display", "none");
$(".first_page").css("display", "none"); $(".first_page").css("display", "none");
$(".next_page_hide").css("display","none"); $(".next_page_hide").css("display","none");
@@ -136,13 +136,13 @@ var List = {
$(".last_page").removeClass("hide"); $(".last_page").removeClass("hide");
}*/ }*/
} else if(!$("#pageButtons").length){ } else if(!$("#pageButtons").length){
$('<div id="pageButtons"><span class="first_page_hide btn-flat">|<</span><a class="first_page waves-effect waves-light btn-flat">|<</a><span class="prev_page_hide btn-flat">< prev</span><a class="prev_page waves-effect waves-light btn-flat">< prev</a> <span id="pageNumber" class="btn-flat">1</span> <a class="last_page waves-effect waves-light btn-flat">>|</a><span class="last_page_hide btn-flat">>|</span><a class="next_page waves-effect waves-light btn-flat">next ></a><span class="next_page_hide btn-flat">next ></span></div>').insertAfter("#wrapper"); $('<div id="pageButtons"><span class="first_page_hide btn-flat"><i class="material-icons">first_page</i></span><a class="first_page waves-effect waves-light btn-flat"><i class="material-icons">first_page</i></a><span class="prev_page_hide btn-flat"><i class="material-icons">navigate_before</i> prev</span><a class="prev_page waves-effect waves-light btn-flat"><i class="material-icons">navigate_before</i> prev</a> <span id="pagenumber">1</span> <a class="last_page waves-effect waves-light btn-flat"><i class="material-icons">last_page</i></a><span class="last_page_hide btn-flat"><i class="material-icons">last_page</i></span><a class="next_page waves-effect waves-light btn-flat">next <i class="material-icons">navigate_next</i></a><span class="next_page_hide btn-flat">next <i class="material-icons">navigate_next</i></span></div>').insertAfter("#wrapper");
$(".prev_page").css("display", "none"); $(".prev_page").css("display", "none");
$(".next_page").css("display", "none"); $(".next_page").css("display", "none");
$(".last_page").css("display", "none"); $(".last_page").css("display", "none");
$(".first_page").css("display", "none"); $(".first_page").css("display", "none");
$(".next_page_hide").css("display","inline-block"); $(".next_page_hide").css("display","flex");
$(".prev_page_hide").css("display","inline-block"); $(".prev_page_hide").css("display","flex");
} }
List.dynamicContentPage(-10); List.dynamicContentPage(-10);
@@ -160,15 +160,15 @@ var List = {
List.empty = true; List.empty = true;
$("#wrapper").append("<span id='empty-channel-message'>The playlist is empty.</span>"); $("#wrapper").append("<span id='empty-channel-message'>The playlist is empty.</span>");
if(!$("#pageButtons").length){ if(!$("#pageButtons").length){
$('<div id="pageButtons"><span class="first_page_hide btn-flat">|<</span><a class="first_page waves-effect waves-light btn-flat">|<</a><span class="prev_page_hide btn-flat">< prev</span><a class="prev_page waves-effect waves-light btn-flat">< prev</a> <span id="pageNumber" class="btn-flat">1</span> <a class="last_page waves-effect waves-light btn-flat">>|</a><span class="last_page_hide btn-flat">>|</span><a class="next_page waves-effect waves-light btn-flat">next ></a><span class="next_page_hide btn-flat">next ></span></div>').insertAfter("#wrapper"); $('<div id="pageButtons"><span class="first_page_hide btn-flat"><i class="material-icons">first_page</i></span><a class="first_page waves-effect waves-light btn-flat"><i class="material-icons">first_page</i></a><span class="prev_page_hide btn-flat"><i class="material-icons">navigate_before</i> prev</span><a class="prev_page waves-effect waves-light btn-flat"><i class="material-icons">navigate_before</i> prev</a> <span id="pagenumber">1</span> <a class="last_page waves-effect waves-light btn-flat"><i class="material-icons">last_page</i></a><span class="last_page_hide btn-flat"><i class="material-icons">last_page</i></span><a class="next_page waves-effect waves-light btn-flat">next <i class="material-icons">navigate_next</i></a><span class="next_page_hide btn-flat">next <i class="material-icons">navigate_next</i></span></div>').insertAfter("#wrapper");
} }
$(".prev_page").css("display", "none"); $(".prev_page").css("display", "none");
$(".next_page").css("display", "none"); $(".next_page").css("display", "none");
$(".last_page").css("display", "none"); $(".last_page").css("display", "none");
$(".last_page_hide").css("display", "inline-block"); $(".last_page_hide").css("display", "flex");
$(".first_page").css("display", "none"); $(".first_page").css("display", "none");
$(".next_page_hide").css("display","inline-block"); $(".next_page_hide").css("display","flex");
$(".prev_page_hide").css("display","inline-block"); $(".prev_page_hide").css("display","flex");
} }
$("#settings").css("visibility", "visible"); $("#settings").css("visibility", "visible");
$("#settings").css("opacity", "1"); $("#settings").css("opacity", "1");
@@ -182,16 +182,16 @@ var List = {
List.page = page; List.page = page;
$("#wrapper").children().slice(List.page, List.page + List.can_fit).show(); $("#wrapper").children().slice(List.page, List.page + List.can_fit).show();
if(List.page > 0 && $(".prev_page").css("display") == "none"){ if(List.page > 0 && $(".prev_page").css("display") == "none"){
$(".prev_page").css("display", "inline-block"); $(".prev_page").css("display", "flex");
$(".prev_page_hide").css("display", "none"); $(".prev_page_hide").css("display", "none");
$(".first_page").css("display", "inline-block"); $(".first_page").css("display", "flex");
$(".first_page_hide").css("display", "none"); $(".first_page_hide").css("display", "none");
} }
if(List.page + List.can_fit >= $("#wrapper").children().length){ if(List.page + List.can_fit >= $("#wrapper").children().length){
$(".next_page_hide").css("display", "inline-block"); $(".next_page_hide").css("display", "flex");
$(".next_page").css("display", "none"); $(".next_page").css("display", "none");
$(".last_page_hide").css("display", "inline-block"); $(".last_page_hide").css("display", "flex");
$(".last_page").css("display", "none"); $(".last_page").css("display", "none");
} }
@@ -205,16 +205,16 @@ var List = {
List.page = List.page + List.can_fit; List.page = List.page + List.can_fit;
$("#wrapper").children().slice(List.page, List.page + List.can_fit).show(); $("#wrapper").children().slice(List.page, List.page + List.can_fit).show();
if(List.page > 0 && $(".prev_page").css("display") == "none"){ if(List.page > 0 && $(".prev_page").css("display") == "none"){
$(".prev_page").css("display", "inline-block"); $(".prev_page").css("display", "flex");
$(".prev_page_hide").css("display", "none"); $(".prev_page_hide").css("display", "none");
$(".first_page").css("display", "inline-block"); $(".first_page").css("display", "flex");
$(".first_page_hide").css("display", "none"); $(".first_page_hide").css("display", "none");
} }
if(List.page + List.can_fit >= $("#wrapper").children().length){ if(List.page + List.can_fit >= $("#wrapper").children().length){
$(".next_page_hide").css("display", "inline-block"); $(".next_page_hide").css("display", "flex");
$(".next_page").css("display", "none"); $(".next_page").css("display", "none");
$(".last_page_hide").css("display", "inline-block"); $(".last_page_hide").css("display", "flex");
$(".last_page").css("display", "none"); $(".last_page").css("display", "none");
} }
//$("#wrapper").scrollTop(0); //$("#wrapper").scrollTop(0);
@@ -224,16 +224,16 @@ var List = {
$("#wrapper").children().slice(List.page, List.page + List.can_fit).show(); $("#wrapper").children().slice(List.page, List.page + List.can_fit).show();
if(List.page > 0 && $(".prev_page").css("display") == "none"){ if(List.page > 0 && $(".prev_page").css("display") == "none"){
$(".prev_page").css("display", "inline-block"); $(".prev_page").css("display", "flex");
$(".prev_page_hide").css("display", "none"); $(".prev_page_hide").css("display", "none");
$(".first_page").css("display", "inline-block"); $(".first_page").css("display", "flex");
$(".first_page_hide").css("display", "none"); $(".first_page_hide").css("display", "none");
} }
if(List.page + List.can_fit >= $("#wrapper").children().length){ if(List.page + List.can_fit >= $("#wrapper").children().length){
$(".next_page_hide").css("display", "inline-block"); $(".next_page_hide").css("display", "flex");
$(".next_page").css("display", "none"); $(".next_page").css("display", "none");
$(".last_page_hide").css("display", "inline-block"); $(".last_page_hide").css("display", "flex");
$(".last_page").css("display", "none"); $(".last_page").css("display", "none");
} }
} else if(way==-10){ } else if(way==-10){
@@ -242,21 +242,21 @@ var List = {
$("#wrapper").children().slice(List.page, List.page + List.can_fit).show(); $("#wrapper").children().slice(List.page, List.page + List.can_fit).show();
if(List.page == 0 && $(".prev_page").css("display") != "none"){ if(List.page == 0 && $(".prev_page").css("display") != "none"){
$(".prev_page").css("display", "none"); $(".prev_page").css("display", "none");
$(".prev_page_hide").css("display", "inline-block"); $(".prev_page_hide").css("display", "flex");
$(".first_page").css("display", "none"); $(".first_page").css("display", "none");
$(".first_page_hide").css("display", "inline-block"); $(".first_page_hide").css("display", "flex");
} else if($(".prev_page").css("display") == "none"){ } else if($(".prev_page").css("display") == "none"){
$(".prev_page_hide").css("display", "inline-block"); $(".prev_page_hide").css("display", "flex");
$(".first_page_hide").css("display", "inline-block"); $(".first_page_hide").css("display", "flex");
} else { } else {
$(".prev_page_hide").css("display", "none"); $(".prev_page_hide").css("display", "none");
$(".first_page_hide").css("display", "none"); $(".first_page_hide").css("display", "none");
} }
if(List.page + List.can_fit < $("#wrapper").children().length){ if(List.page + List.can_fit < $("#wrapper").children().length){
$(".next_page_hide").css("display", "none"); $(".next_page_hide").css("display", "none");
$(".next_page").css("display", "inline-block"); $(".next_page").css("display", "flex");
$(".last_page_hide").css("display", "none"); $(".last_page_hide").css("display", "none");
$(".last_page").css("display", "inline-block"); $(".last_page").css("display", "flex");
} }
} else { } else {
$("#wrapper").children().slice(List.page - List.can_fit, List.page).show(); $("#wrapper").children().slice(List.page - List.can_fit, List.page).show();
@@ -265,12 +265,12 @@ var List = {
//$("#wrapper").scrollTop(0); //$("#wrapper").scrollTop(0);
if(List.page == 0 && $(".prev_page").css("display") != "none"){ if(List.page == 0 && $(".prev_page").css("display") != "none"){
$(".prev_page").css("display", "none"); $(".prev_page").css("display", "none");
$(".prev_page_hide").css("display", "inline-block"); $(".prev_page_hide").css("display", "flex");
$(".first_page").css("display", "none"); $(".first_page").css("display", "none");
$(".first_page_hide").css("display", "inline-block"); $(".first_page_hide").css("display", "flex");
} else if($(".prev_page").css("display") == "none"){ } else if($(".prev_page").css("display") == "none"){
$(".prev_page_hide").css("display", "inline-block"); $(".prev_page_hide").css("display", "flex");
$(".first_page_hide").css("display", "inline-block"); $(".first_page_hide").css("display", "flex");
} else { } else {
$(".prev_page_hide").css("display", "none"); $(".prev_page_hide").css("display", "none");
$(".first_page_hide").css("display", "none"); $(".first_page_hide").css("display", "none");
@@ -278,9 +278,9 @@ var List = {
if(List.page + List.can_fit < $("#wrapper").children().length){ if(List.page + List.can_fit < $("#wrapper").children().length){
$(".next_page_hide").css("display", "none"); $(".next_page_hide").css("display", "none");
$(".next_page").css("display", "inline-block"); $(".next_page").css("display", "flex");
$(".last_page_hide").css("display", "none"); $(".last_page_hide").css("display", "none");
$(".last_page").css("display", "inline-block"); $(".last_page").css("display", "flex");
} }
} }
$("#pageNumber").html((List.page / List.can_fit) + 1); $("#pageNumber").html((List.page / List.can_fit) + 1);
@@ -306,9 +306,9 @@ var List = {
if($("#wrapper").children().length > List.page + List.can_fit){ if($("#wrapper").children().length > List.page + List.can_fit){
$(".next_page_hide").css("display", "none"); $(".next_page_hide").css("display", "none");
$(".next_page").removeClass("hide"); $(".next_page").removeClass("hide");
$(".next_page").css("display", "inline-block"); $(".next_page").css("display", "flex");
} else { } else {
$(".next_page_hide").css("display", "inline-block"); $(".next_page_hide").css("display", "flex");
$(".next_page").css("display", "none"); $(".next_page").css("display", "none");
} }
} }
@@ -333,14 +333,14 @@ var List = {
if(List.page >= $("#wrapper").children().length - 1){ if(List.page >= $("#wrapper").children().length - 1){
List.dynamicContentPage(-1); List.dynamicContentPage(-1);
$(".next_page_hide").css("display", "inline-block"); $(".next_page_hide").css("display", "flex");
$(".next_page").css("display", "none"); $(".next_page").css("display", "none");
$(".last_page_hide").css("display", "inline-block"); $(".last_page_hide").css("display", "flex");
$(".last_page").css("display", "none"); $(".last_page").css("display", "none");
} else if(List.page + List.can_fit + 1 >= $("#wrapper").children().length - 1){ } else if(List.page + List.can_fit + 1 >= $("#wrapper").children().length - 1){
$(".next_page_hide").css("display", "inline-block"); $(".next_page_hide").css("display", "flex");
$(".next_page").css("display", "none"); $(".next_page").css("display", "none");
$(".last_page_hide").css("display", "inline-block"); $(".last_page_hide").css("display", "flex");
$(".last_page").css("display", "none"); $(".last_page").css("display", "none");
} }
setTimeout(function() setTimeout(function()
@@ -355,7 +355,7 @@ var List = {
if(List.page >= $("#wrapper").children().length){ if(List.page >= $("#wrapper").children().length){
List.dynamicContentPage(-1); List.dynamicContentPage(-1);
} else if(List.page + List.can_fit >= $("#wrapper").children().length){ } else if(List.page + List.can_fit >= $("#wrapper").children().length){
$(".next_page_hide").css("display", "inline-block"); $(".next_page_hide").css("display", "flex");
$(".next_page").css("display", "none"); $(".next_page").css("display", "none");
}*/ }*/
if(chromecastAvailable){ if(chromecastAvailable){
@@ -385,7 +385,7 @@ var List = {
$("#suggested-"+deleted).remove(); $("#suggested-"+deleted).remove();
if(List.page + List.can_fit < $("#wrapper").children().length + 1){ if(List.page + List.can_fit < $("#wrapper").children().length + 1){
//$(".next_page_hide").css("display", "none"); //$(".next_page_hide").css("display", "none");
//$(".next_page").css("display", "inline-block"); //$(".next_page").css("display", "flex");
} }
if(List.page >= $("#wrapper").children().length){ if(List.page >= $("#wrapper").children().length){
List.dynamicContentPage(-1); List.dynamicContentPage(-1);

35
public/js/listeners.js
View File

@@ -162,6 +162,9 @@ function init(){
$('.collapsible').collapsible({ $('.collapsible').collapsible({
accordion : true // A setting that changes the collapsible behavior to expandable instead of the default accordion style accordion : true // A setting that changes the collapsible behavior to expandable instead of the default accordion style
}); });
$("#help").modal();
$("#contact").modal();
$("#embed").modal();
spotify_is_authenticated(spotify_authenticated); spotify_is_authenticated(spotify_authenticated);
@@ -259,7 +262,7 @@ function init(){
$("#search").attr("placeholder", "Find song on YouTube..."); $("#search").attr("placeholder", "Find song on YouTube...");
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-unactive").css("display", "none");
} }
if(chromecastAvailable){ if(chromecastAvailable){
@@ -285,7 +288,7 @@ initializeCastApi = function() {
receiverApplicationId: "E6856E24", receiverApplicationId: "E6856E24",
autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED}); autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED});
var context = cast.framework.CastContext.getInstance(); var context = cast.framework.CastContext.getInstance();
$(".castButton").css("display", "block"); //$(".castButton-unactive").css("display", "block");
context.addEventListener( context.addEventListener(
cast.framework.CastContextEventType.SESSION_STATE_CHANGED, cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
function(event) { function(event) {
@@ -333,14 +336,18 @@ initializeCastApi = function() {
break; break;
} }
}); });
Helper.log(cast.framework.CastContext.getInstance().getCastState()); var cast_state = cast.framework.CastContext.getInstance();
if(cast.framework.CastContext.getInstance().getCastState() == "NO_DEVICES_AVAILABLE"){ cast_state.addEventListener(cast.framework.CastContextEventType.CAST_STATE_CHANGED, function(event){
$(".castButton").css("display", "none"); if(event.castState == "NOT_CONNECTED"){
} $(".castButton-unactive").css("display", "block");
} else if(event.castState == "NO_DEVICES_AVAILABLE"){
$(".castButton-unactive").css("display", "none");
}
});
}; };
function hide_native(way){ function hide_native(way){
$(".castButton").toggleClass("hide"); $(".castButton-unactive").toggleClass("hide");
$(".castButton-active").toggleClass("hide"); $(".castButton-active").toggleClass("hide");
if(way == 1){ if(way == 1){
$("#duration").toggleClass("hide"); $("#duration").toggleClass("hide");
@@ -600,12 +607,12 @@ $(document).keyup(function(e) {
if(Helper.contains($("#song-title").attr("class").split(" "), "hide")) if(Helper.contains($("#song-title").attr("class").split(" "), "hide"))
$("#song-title").toggleClass("hide"); $("#song-title").toggleClass("hide");
if($("#search-btn i").attr('class') == "mdi-navigation-close") if($("#search-btn i").html() == "close")
{ {
$("#search-btn i").toggleClass("mdi-navigation-close"); //$("#search-btn i").html("mdi-navigation-close");
$("#search-btn i").toggleClass("mdi-action-search"); $("#search-btn i").html("search");
} }
if(!Helper.contains($("#search-container").attr("class").split(" "), "hide")){ if(!Helper.contains($(".search-container").attr("class").split(" "), "hide")){
$("#results").toggleClass("hide"); $("#results").toggleClass("hide");
} }
} }
@@ -633,13 +640,17 @@ $(document).on("click", "#playpause-overlay", function(){
} }
}); });
$(document).on("click", ".castButton-unactive", function(e){
$(".castButton").trigger("click");
});
$(document).on("click", ".castButton-active", function(e){ $(document).on("click", ".castButton-active", function(e){
e.preventDefault(); e.preventDefault();
var castSession = cast.framework.CastContext.getInstance().getCurrentSession(); var castSession = cast.framework.CastContext.getInstance().getCurrentSession();
// End the session and pass 'true' to indicate // End the session and pass 'true' to indicate
// that receiver application should be stopped. // that receiver application should be stopped.
castSession.endSession(true); castSession.endSession(true);
}) });
$(document).on('click', '#cookieok', function() { $(document).on('click', '#cookieok', function() {
$(this).fadeOut(function(){ $(this).fadeOut(function(){

3
public/js/mobileremote.js
View File

@@ -18,7 +18,8 @@ var Mobile_remote = {
$("#remote_channel").val(""); $("#remote_channel").val("");
$("#remote_channel").attr("placeholder", "Change channel"); $("#remote_channel").attr("placeholder", "Change channel");
$("#remote_header").html("Controlling " + id); $("#remote_header").html("Controlling " + id);
$("#volume-control-remote").css("display", "block"); $("#volume-control-remote").css("display", "inline-block");
$(".slider-vol").attr("style", "display: inline-block !important");
}, },
set_channel: function(channel_name) { set_channel: function(channel_name) {

2
public/js/player.js
View File

@@ -281,7 +281,7 @@ var Player = {
getTitle: function(titt, v) getTitle: function(titt, v)
{ {
var outPutWord = "<i class='mdi-action-visibility'></i>"//v > 1 ? "viewers" : "viewer"; var outPutWord = "<i class='material-icons'>visibility</i>"//v > 1 ? "viewers" : "viewer";
var title = decodeURIComponent(titt); var title = decodeURIComponent(titt);
if(window.location.pathname != "/"){ if(window.location.pathname != "/"){
var elem = document.getElementById('song-title'); var elem = document.getElementById('song-title');

4
public/js/remotecontroller.js
View File

@@ -13,6 +13,10 @@ $(document).ready(function (){
'sync disconnect on unload':true, 'sync disconnect on unload':true,
'secure': true 'secure': true
}; };
$("#about").modal();
$("#contact").modal();
if(window.location.hostname == "remote.zoff.no") add = "https://zoff.no"; if(window.location.hostname == "remote.zoff.no") add = "https://zoff.no";
else add = "localhost"; else add = "localhost";
socket = io.connect(add + ':8080', connection_options); socket = io.connect(add + ':8080', connection_options);

8
public/js/search.js
View File

@@ -12,8 +12,12 @@ var Search = {
$("#song-title").toggleClass("hide"); $("#song-title").toggleClass("hide");
//$("#results").toggleClass("hide"); //$("#results").toggleClass("hide");
$("#results").empty(); $("#results").empty();
$("#search-btn i").toggleClass("mdi-navigation-close"); if($("#search-btn i").html() == "close"){
$("#search-btn i").toggleClass("mdi-action-search"); $("#search-btn i").html("search");
} else {
$("#search-btn i").html("close");
}
//$("#search-btn i").html("search");
$("#search").focus(); $("#search").focus();
}, },

54
public/php/channel.php
View File

@@ -75,25 +75,25 @@
</li> </li>
<li> <li>
<a class="nav-btn" href="#find" id="search-btn"> <a class="nav-btn" href="#find" id="search-btn">
<i class="mdi-action-search"></i> <i class="material-icons">search</i>
<span class="hover-text">Find</span> <span class="hover-text">Find</span>
</a> </a>
</li> </li>
<li> <li>
<a class="nav-btn" href="#skip" id="skip"> <a class="nav-btn" href="#skip" id="skip">
<i class="mdi-av-skip-next"></i> <i class="material-icons">skip_next</i>
<span class="hover-text">Skip</span> <span class="hover-text">Skip</span>
</a> </a>
</li> </li>
<li> <li>
<a class="nav-btn hide-on-small-only" href="#stir" id="shuffle"> <a class="nav-btn hide-on-small-only" href="#stir" id="shuffle">
<i class="mdi-av-shuffle"></i> <i class="material-icons">shuffle</i>
<span class="hover-text">Stir</span> <span class="hover-text">Stir</span>
</a> </a>
</li> </li>
<li> <li>
<a class="nav-btn" href="#settings" data-activates="settings-bar" id="settings"> <a class="nav-btn" href="#settings" data-activates="settings-bar" id="settings">
<i class="mdi-image-dehaze"></i> <i class="material-icons">menu</i>
<span class="hover-text">Conf</span> <span class="hover-text">Conf</span>
</a> </a>
</li> </li>
@@ -111,7 +111,7 @@
<span class="result_info"></span> <span class="result_info"></span>
<div class="waves-effect waves-orange btn-flat" id="add-many" title="Add several videos"> <div class="waves-effect waves-orange btn-flat" id="add-many" title="Add several videos">
<i class="mdi-av-playlist-add"></i> <i class="material-icons">playlist_add</i>
</div> </div>
</div> </div>
</div> </div>
@@ -125,7 +125,7 @@
</div> </div>
</nav> </nav>
</div> </div>
<div id="help" class="modal"> <div id="help" class="modal modal-fixed-footer">
<div class="modal-content"> <div class="modal-content">
<h4>So you need help?</h4> <h4>So you need 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>
@@ -175,7 +175,7 @@
<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="mdi-hardware-cast-connected"></i> <i class="material-icons">cast</i>
</div> </div>
<div id="chromecast_text"></div> <div id="chromecast_text"></div>
</div> </div>
@@ -184,35 +184,39 @@
</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="mdi-av-play-arrow hide"></i> <i id="play-overlay" class="material-icons hide">play_arrow</i>
<i id="pause-overlay" class="mdi-av-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="mdi-av-volume-off"></i> <i id="v-mute-overlay" class="material-icons">volume_off</i>
<i id="v-low-overlay" class="mdi-av-volume-mute"></i> <i id="v-low-overlay" class="material-icons">volume_mute</i>
<i id="v-medium-overlay" class="mdi-av-volume-down"></i> <i id="v-medium-overlay" class="material-icons">volume_down</i>
<i id="v-full-overlay" class="mdi-av-volume-up"></i> <i id="v-full-overlay" class="material-icons">volume_up</i>
</div> </div>
</div> </div>
</div> </div>
<div id="controls" class="noselect"> <div id="controls" class="noselect">
<div id="playpause"> <div id="playpause">
<i id="play" class="mdi-av-play-arrow hide"></i> <i id="play" class="material-icons hide">play_arrow</i>
<i id="pause" class="mdi-av-pause"></i> <i id="pause" class="material-icons">pause</i>
</div> </div>
<div id="duration"></div> <div id="duration"></div>
<div id="fullscreen"> <div id="fullscreen">
<i class="mdi-navigation-fullscreen"></i> <i class="material-icons">fullscreen</i>
</div> </div>
<button class="castButton mdi-hardware-cast tooltipped" style="" data-position="top" data-delay="5" data-tooltip="Cast Zöff to TV" is="google-cast-button"> <button class="castButton-unactive tooltipped" style="display:none;" data-position="top" data-delay="5" data-tooltip="Cast Zöff to TV">
<i class="material-icons">cast</i>
</button> </button>
<button class="castButton-active hide mdi-hardware-cast-connected tooltipped" data-position="top" data-delay="5" data-tooltip="Stop casting" > <button class="castButton" is="google-cast-button">
</button>
<button class="castButton-active hide tooltipped" data-position="top" data-delay="5" data-tooltip="Stop casting" >
<i class="material-icons">cast_connected</i>
</button> </button>
<div id="volume-button"> <div id="volume-button">
<i id="v-mute" class="mdi-av-volume-off"></i> <i id="v-mute" class="material-icons">volume_off</i>
<i id="v-low" class="mdi-av-volume-mute"></i> <i id="v-low" class="material-icons">volume_mute</i>
<i id="v-medium" class="mdi-av-volume-down"></i> <i id="v-medium" class="material-icons">volume_down</i>
<i id="v-full" class="mdi-av-volume-up"></i> <i id="v-full" class="material-icons">volume_up</i>
</div> </div>
<div id="volume"></div> <div id="volume"></div>
<div id="viewers" data-position="top" data-delay="5" class="tooltipped" data-tooltip="Viewers"></div> <div id="viewers" data-position="top" data-delay="5" class="tooltipped" data-tooltip="Viewers"></div>
@@ -223,11 +227,11 @@
<div id="playlist" class="col s12 m3"> <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="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> <div id="bottom-button" title="Scroll to the bottom" class="rounded-top hide hide-on-small-only">Bottom</div>
<ul class="tabs playlist-tabs" style="width:96%"> <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 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</a></li> <li class="tab col s3"><a class="playlist-tab-links chat-link truncate" href="#chat">Chat</a></li>
</ul> </ul>
<ul class="tabs playlist-tabs-loggedIn hide" style="width: 96%;"> <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 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</a></li> <li class="tab col s3"><a class="playlist-tab-links suggested-link truncate" href="#suggestions">Suggested</a></li>
<li class="tab col s3"><a class="playlist-tab-links chat-link truncate" href="#chat">Chat</a></li> <li class="tab col s3"><a class="playlist-tab-links chat-link truncate" href="#chat">Chat</a></li>
@@ -274,7 +278,7 @@
<!--<ul id="chat inherit-height">--> <!--<ul id="chat inherit-height">-->
<div class="row inherit-height"> <div class="row inherit-height">
<div class="col s12"> <div class="col s12">
<ul class="tabs chatTabs"> <ul class="tabs chatTabs tabs-fixed-width">
<li class="tab col s3 chat-tab-li"><a class="active chat-tab truncate" href="#channelchat"><?php echo $list; ?></a></li> <li class="tab col s3 chat-tab-li"><a class="active chat-tab truncate" href="#channelchat"><?php echo $list; ?></a></li>
<li class="tab col s3 chat-tab-li"><a class="chat-tab" href="#all_chat">All</a></li> <li class="tab col s3 chat-tab-li"><a class="chat-tab" href="#all_chat">All</a></li>
</ul> </ul>

14
public/php/controller.php
View File

@@ -14,11 +14,11 @@
<a href="//zoff.no" class="brand-logo hide-on-med-and-up">Zöff</a> <a href="//zoff.no" class="brand-logo hide-on-med-and-up">Zöff</a>
<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 Zöff player" href="https://remote.zoff.no">Remote</a></li> <li><a class="waves-effect green" title="Remote control a Zöff player" href="https://remote.zoff.no">Remote</a></li>
<li><a class="modal-trigger waves-effect waves-orange" onclick="$('#about').openModal()">About</a></li> <li><a class="modal-trigger waves-effect waves-orange" onclick="$('#about').modal('open')">About</a></li>
</ul> </ul>
</div> </div>
</nav> </nav>
<div id="about" class="modal"> <div id="about" class="modal modal-fixed-footer">
<div class="modal-content"> <div class="modal-content">
<h4>About</h4> <h4>About</h4>
<p>Zöff is a shared (free) YouTube based radio service, built upon the YouTube API. <br><br> <p>Zöff is a shared (free) YouTube based radio service, built upon the YouTube API. <br><br>
@@ -76,17 +76,17 @@
<div class="rc" id="remote-controls"> <div class="rc" id="remote-controls">
<a id="playbutton" class="remote-button chan-link waves-effect btn green"> <a id="playbutton" class="remote-button chan-link waves-effect btn green">
<i id="remote_play" class="mdi-av-play-arrow"></i> <i id="remote_play" class="material-icons">play_arrow</i>
</a> </a>
<a id="pausebutton" class="remote-button chan-link waves-effect btn gray"> <a id="pausebutton" class="remote-button chan-link waves-effect btn gray">
<i id="remote_pause" class="mdi-av-pause"></i> <i id="remote_pause" class="material-icons">pause</i>
</a> </a>
<a id="skipbutton" class="remote-button chan-link waves-effect btn blue"> <a id="skipbutton" class="remote-button chan-link waves-effect btn blue">
<i id="remote_skip" class="mdi-av-skip-next"></i> <i id="remote_skip" class="material-icons">skip_next</i>
</a> </a>
</div> </div>
<i class="mdi-av-volume-up slider-vol rc"></i> <i class="material-icons slider-vol rc">volume_up</i>
<div class="rc" id="volume-control" title="Volume"></div> <div class="rc" id="volume-control" title="Volume"></div>
</div> </div>
@@ -94,7 +94,7 @@
<div class="section about-remote"> <div class="section about-remote">
<b>Here you can control another Zöff player from any device.</b> <b>Here you can control another Zöff player from any device.</b>
<br> <br>
To find the ID of your player, click the Conf <i class="mdi-action-settings"></i> icon on the top right of the player page, then "Remote Control". 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. <br>You can either scan the QR code or type the ID manually.
</div> </div>
</main> </main>

14
public/php/footer.php
View File

@@ -77,18 +77,18 @@
</p> </p>
<ul id="footer-buttons"> <ul id="footer-buttons">
<li> <li>
<a class="modal-trigger waves-effect cyan darken-2 btn help-button-footer" title="Need help with the site?" onclick="$('#help').openModal()"> <a class="modal-trigger waves-effect cyan darken-2 btn help-button-footer" title="Need help with the site?" onclick="$('#help').modal('open')">
<i class="mdi-action-info left footer-button-icon"></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?" onclick="$('#embed').openModal()"> <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?" onclick="$('#embed').modal('open')">
<i class="mdi-image-navigate-before left footer-button-icon left-embed"></i><i class="mdi-image-navigate-next left footer-button-icon right-embed"></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" onclick="$('#contact').openModal()"> <a class="modal-trigger waves-effect red darken-2 btn help-button-footer" id="contact-button" title="Contact us" onclick="$('#contact').modal('open')">
<i class="mdi-communication-email left footer-button-icon"></i>CONTACT <i class="material-icons left footer-button-icon">email</i>CONTACT
</a> </a>
</li> </li>
</ul> </ul>
@@ -114,7 +114,7 @@
<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="mdi-action-payment left footer-button-icon"></i>Donate <i class="material-icons left footer-button-icon">payment</i>Donate
</a> </a>
</form> </form>
<p class="hide-on-small-only"> <p class="hide-on-small-only">

10
public/php/frontpage.php
View File

@@ -24,11 +24,11 @@ if(isset($_GET['chan'])){
<ul class="right hide-on-med-and-down"> <ul class="right hide-on-med-and-down">
<li><a class="header-buttons waves-effect waves-cyan" id="offline-mode" title="Offline mode" href="#">Private</a></li> <li><a class="header-buttons waves-effect waves-cyan" id="offline-mode" title="Offline mode" href="#">Private</a></li>
<li><a class="header-buttons waves-effect waves-green" title="Remote control a Zöff player" href="https://remote.zoff.no">Remote</a></li> <li><a class="header-buttons waves-effect waves-green" title="Remote control a Zöff player" href="https://remote.zoff.no">Remote</a></li>
<li><a class="header-buttons modal-trigger waves-effect waves-orange" onclick="$('#about').openModal()">About</a></li> <li><a class="header-buttons modal-trigger waves-effect waves-orange" onclick="$('#about').modal('open')">About</a></li>
</ul> </ul>
</div> </div>
</nav> </nav>
<div id="about" class="modal"> <div id="about" class="modal modal-fixed-footer">
<div class="modal-content"> <div class="modal-content">
<h4>About</h4> <h4>About</h4>
<p>Zöff is a shared (free) YouTube based radio service, built upon the YouTube API. <br><br> <p>Zöff is a shared (free) YouTube based radio service, built upon the YouTube API. <br><br>
@@ -49,7 +49,7 @@ if(isset($_GET['chan'])){
<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>
<div id="donation" class="modal"> <div id="donation" class="modal modal-fixed-footer">
<div class="modal-content"> <div class="modal-content">
<h4>Thanks!</h4> <h4>Thanks!</h4>
<p>Thanks for your donation, we love you &lt;3 <p>Thanks for your donation, we love you &lt;3
@@ -63,7 +63,7 @@ if(isset($_GET['chan'])){
<a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">I'm awesome! (Close)</a> <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">I'm awesome! (Close)</a>
</div> </div>
</div> </div>
<div id="help" class="modal"> <div id="help" class="modal modal-fixed-footer">
<div class="modal-content"> <div class="modal-content">
<h4>So you need help?</h4> <h4>So you need help?</h4>
<p>At the center of the site, you'll see a input field. This is meant to navigate to new or existing channels. If you input something here that doesn't exist, a new channel will be create at the blink of an eye! Remember to put a password on the list you've created, so no one else takes it from you! (It's on a first come, first serve basis). When you're ready to proceed, just click the listen button!</p> <p>At the center of the site, you'll see a input field. This is meant to navigate to new or existing channels. If you input something here that doesn't exist, a new channel will be create at the blink of an eye! Remember to put a password on the list you've created, so no one else takes it from you! (It's on a first come, first serve basis). When you're ready to proceed, just click the listen button!</p>
@@ -143,7 +143,7 @@ if(isset($_GET['chan'])){
<a class="chan-link"> <a class="chan-link">
<div class="chan-bg card-image cardbg"></div> <div class="chan-bg card-image cardbg"></div>
<div class="card-content"> <div class="card-content">
<i class="mdi-action-star-rate pin"></i> <i class="material-icons pin">star_rate</i>
<p class="left-align"> <p class="left-align">
<span class="chan-name flow-text truncate"></span> <span class="chan-name flow-text truncate"></span>
<br> <br>

1
public/php/header.php
View File

@@ -21,6 +21,7 @@
<meta property="fb:app_id" content="1581693815380949" /> <meta property="fb:app_id" content="1581693815380949" />
<link rel="manifest" href="/manifest.json"> <link rel="manifest" href="/manifest.json">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css"> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="/public/css/materialize.min.css" /> <link type="text/css" rel="stylesheet" href="/public/css/materialize.min.css" />
<link rel="stylesheet" type="text/css" href="/public/css/style.css" title="Default" /> <link rel="stylesheet" type="text/css" href="/public/css/style.css" title="Default" />
<link rel="icon" id="favicon" type="image/png" href="/public/images/favicon.png"/> <link rel="icon" id="favicon" type="image/png" href="/public/images/favicon.png"/>

63
public/php/panel.php
View File

@@ -1,19 +1,19 @@
<li class="no-padding"> <li class="no-padding">
<ul class="collapsible collapsible-accordion"> <ul class="collapsible collapsible-accordion">
<div class="nav-btn close-settings clickable" title="Close" id="closeSettings"> <div class="nav-btn close-settings clickable" title="Close" id="closeSettings">
<i class="mdi-navigation-close auto-margin"></i> <i class="material-icons auto-margin">close</i>
</div> </div>
<li> <li>
<a class="col s9 collapsible-header bold waves-effect admin-settings"> <a class="col s9 collapsible-header bold waves-effect admin-settings">
Channel Settings Channel Settings
<i class="mdi-image-tune"></i> <i class="material-icons">tune</i>
</a> </a>
<div class="collapsible-body"> <div class="collapsible-body">
<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="mdi-action-lock" title="Click to log out"></i> <i id="admin-lock" class="material-icons">lock</i>
<input placeholder="Enter channel password" id="password" type="password" class="validate" /> <input placeholder="Enter channel password" id="password" type="password" class="validate" />
</div> </div>
</li> </li>
@@ -102,7 +102,7 @@
<ul class="collapsible collapsible-accordion"> <ul class="collapsible collapsible-accordion">
<li> <li>
<a class="collapsible-header bold waves-effect">Remote Control <a class="collapsible-header bold waves-effect">Remote Control
<i class="mdi-action-settings-remote"></i> <i class="material-icons">settings_remote</i>
</a> </a>
<div class="collapsible-body"> <div class="collapsible-body">
<ul> <ul>
@@ -115,14 +115,15 @@
<input name="remote_switch" type="checkbox" class="remote_switch_class" checked /><span class="lever"></span> <input name="remote_switch" type="checkbox" class="remote_switch_class" checked /><span class="lever"></span>
Enabled Enabled
</label> </label>
</div> </div>
<a id="code-link" target="_blank"> <div><a id="code-link" target="_blank">
<img id="code-qr" alt="QR code for control" title="Link to control this Zöff player" src="https://chart.googleapis.com/chart?chs=221x221&amp;cht=qr&amp;choe=UTF-8&amp;chld=L%7C1&amp;chl=http://zoff.no" /> <img id="code-qr" alt="QR code for control" title="Link to control this Zöff player" src="https://chart.googleapis.com/chart?chs=221x221&amp;cht=qr&amp;choe=UTF-8&amp;chld=L%7C1&amp;chl=http://zoff.no" />
<h4 id="code-text">ABBADUR</h4>
</a> <h4 id="code-text">ABBADUR</h4>
<a> </a></div>
<p>
You can control this Zöff instance from another device by going to <b>https://remote.zoff.no/</b> You can control this Zöff instance from another device by going to <b>https://remote.zoff.no/</b>
</a> </p>
</li> </li>
</ul> </ul>
</div> </div>
@@ -134,13 +135,13 @@
<ul class="collapsible collapsible-accordion"> <ul class="collapsible collapsible-accordion">
<li> <li>
<a class="collapsible-header bold waves-effect">Private Mode <a class="collapsible-header bold waves-effect">Private Mode
<i class="mdi-action-visibility-off"></i> <i class="material-icons">visibility_off</i>
</a> </a>
<div class="collapsible-body"> <div class="collapsible-body">
<ul> <ul>
<li> <li>
<span class="switch-text"> <span class="switch-text">
Enable Local Private Mode
</span> </span>
<div class="switch"><label> <div class="switch"><label>
Disabled Disabled
@@ -162,7 +163,7 @@
<ul class="collapsible collapsible-accordion"> <ul class="collapsible collapsible-accordion">
<li> <li>
<a class="collapsible-header bold waves-effect import-a">Remote Controller <a class="collapsible-header bold waves-effect import-a">Remote Controller
<i class="mdi-action-settings-remote"></i> <i class="material-icons">settings_remote</i>
</a> </a>
<div class="collapsible-body"> <div class="collapsible-body">
<ul id="remote-mobile-container"> <ul id="remote-mobile-container">
@@ -183,16 +184,18 @@
/> />
</div> </div>
</form> </form>
<button id="playbutton_remote" class="remote-button waves-effect btn green" disabled> <div id="remote-sidebar-buttons-container">
<i id="remote_play" class="mdi-av-play-arrow"></i> <button id="playbutton_remote" class="remote-button waves-effect btn green" disabled>
</button> <i id="remote_play" class="material-icons">play_arrow</i>
<button id="pausebutton_remote" class="remote-button waves-effect btn gray" disabled> </button>
<i id="remote_pause" class="mdi-av-pause"></i></button> <button id="pausebutton_remote" class="remote-button waves-effect btn gray" disabled>
<button id="skipbutton_remote" class="remote-button waves-effect btn blue" disabled> <i id="remote_pause" class="material-icons">pause</i></button>
<i id="remote_skip" class="mdi-av-skip-next"></i> <button id="skipbutton_remote" class="remote-button waves-effect btn blue" disabled>
</button> <i id="remote_skip" class="material-icons">skip_next</i>
<i class="mdi-av-volume-up slider-vol"></i> </button>
</div>
<div class="" id="volume-control-remote" title="Volume"></div> <div class="" id="volume-control-remote" title="Volume"></div>
<i class="material-icons slider-vol">volume_up</i>
</li> </li>
</ul> </ul>
</div> </div>
@@ -204,7 +207,7 @@
<ul class="collapsible collapsible-accordion"> <ul class="collapsible collapsible-accordion">
<li> <li>
<a class="collapsible-header bold waves-effect import-a">Import Playlist <a class="collapsible-header bold waves-effect import-a">Import Playlist
<i class="mdi-hardware-keyboard-arrow-down"></i> <i class="material-icons">keyboard_arrow_down</i>
</a> </a>
<div class="collapsible-body"> <div class="collapsible-body">
<ul> <ul>
@@ -216,7 +219,7 @@
</div> </div>
<div class="input-field field-settings youtube_clicked"> <div class="input-field field-settings youtube_clicked">
<form action="#" id="listImport"> <form action="#" id="listImport">
<i class="mdi-av-playlist-add import-icon"></i> <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" /> <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 class="valign playlist_loader_padding">
<div id="playlist_loader" class="preloader-wrapper small active hide"> <div id="playlist_loader" class="preloader-wrapper small active hide">
@@ -280,10 +283,10 @@
</div> </div>
<div class="input-field field-settings spotify_authenticated"> <div class="input-field field-settings spotify_authenticated">
<form action="#" id="listImportSpotify"> <form action="#" id="listImportSpotify">
<i class="mdi-av-playlist-add import-icon"></i> <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" /> <input title="Input Spotify-playlist url here!" placeholder="Enter Spotify-list url" id="import_spotify" type="text" class="validate" autocomplete="off" />
<div class="valign playlist_loader_padding"> <div id="playlist_loader_spotify" class="valign playlist_loader_padding hide">
<div id="playlist_loader_spotify" class="preloader-wrapper small active hide"> <div class="preloader-wrapper small active">
<div class="spinner-layer spinner-blue"> <div class="spinner-layer spinner-blue">
<div class="circle-clipper left"> <div class="circle-clipper left">
<div class="circle"></div> <div class="circle"></div>
@@ -343,7 +346,7 @@
<div class="extra-add-text truncate"></div> <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 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"> <a href="#" class="waves-effect green lighten btn right extra-button extra-button-search">
<i class="mdi-action-search search-extra"></i></a> <i class="material-icons search-extra">search</i></a>
</li> </li>
</ul> </ul>
</li> </li>
@@ -357,7 +360,7 @@
<ul class="collapsible collapsible-accordion white-bg"> <ul class="collapsible collapsible-accordion white-bg">
<li> <li>
<a class="collapsible-header bold waves-effect export-a">Export Playlist <a class="collapsible-header bold waves-effect export-a">Export Playlist
<i class="mdi-hardware-keyboard-arrow-up"></i> <i class="material-icons">keyboard_arrow_up</i>
</a> </a>
<div class="collapsible-body"> <div class="collapsible-body">
<ul> <ul>
@@ -367,8 +370,6 @@
<img src="/public/images/youtube.png" class="youtube_logo" alt="Youtube Logo" /> <img src="/public/images/youtube.png" class="youtube_logo" alt="Youtube Logo" />
</a> </a>
</div> </div>
<div class="input-field field-settings">
</div>
</li> </li>
<li class="white-bg"> <li class="white-bg">
<div class="input-field field-settings spotify_export_button export-buttons"> <div class="input-field field-settings spotify_export_button export-buttons">