KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Chan page is nice

Browse Source
This commit is contained in:
Nicolas A. Tonne
2015-04-10 01:24:42 +02:00
parent f997de2a36
commit 00dcb03727
7 changed files with 136 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
index.php
View File

@@ -1,12 +1,11 @@
<?php <?php
if(isset($_GET['chan'])) {header('Location: '.$_GET['chan']); exit;} if(isset($_GET['chan'])) {header('Location: '.$_GET['chan']); exit;}
$list = explode("/", htmlspecialchars(strtolower($_SERVER["REQUEST_URI"]))); $list = explode("/", htmlspecialchars(strtolower($_SERVER["REQUEST_URI"])));
if($list[1]==""||!isset($list[1])||count($list)<=1){$list="";include('php/nochan.php');die();} if($list[1]==""||!isset($list[1])||count($list)<=1){$list="";include('php/nochan.php');die();}
else $list=$list[1]; else $list=$list[1];
?>
?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head> <head>
<?php include("php/header.php"); ?> <?php include("php/header.php"); ?>
@@ -19,49 +18,70 @@
<a href="//zoff.no" class="brand-logo hide-on-small-only"> <a href="//zoff.no" class="brand-logo hide-on-small-only">
<img id="zicon" src="static/images/squareicon_small.png" alt="zöff" title="Zöff"> <img id="zicon" src="static/images/squareicon_small.png" alt="zöff" title="Zöff">
</a> </a>
<div class="brand-logo center"> <div class="brand-logo">
<a href="zoff.no" class="hide-on-med-and-up">Zöff</a> <a href="//zoff.no" class="hide-on-med-and-up">Zöff</a>
<span class="hide-on-med-and-up">/</span> <span class="hide-on-med-and-up">/</span>
<span id="chan" class="chan" title="Show big URL" onclick="show()"><?php echo(ucfirst($list));?></span> <span id="chan" class="chan hide" title="Show big URL" onclick="show()"><?php echo(ucfirst($list));?></span>
</div> </div>
<form> <ul class="right">
<div class="input-field">
<input id="search" type="search" required title="Search for songs..." spellcheck="false" placeholder="Search" onsubmit="null;" autocomplete="off">
<label for="search"><i class="mdi-action-search"></i></label>
<i class="mdi-navigation-close"></i>
</div>
</form>
<ul id="nav-mobile" class="right">
<li> <li>
<a href="#" id="settings" onclick="skip();"> <a class="nav-btn" href="#" id="skip" onclick="skip();">
<i class="mdi-av-skip-next"></i> <i class="mdi-av-skip-next"></i>
Skip <span class="hover-text">Skip</span>
</a> </a>
</li> </li>
<li> <li>
<a href="#" onclick="admin();"> <a class="nav-btn" href="#" onclick="admin();" data-activates="mobile-demo" id="settings">
<i class="mdi-action-settings"></i> <i class="mdi-action-settings"></i>
Settings <span class="hover-text">Conf</span>
</a> </a>
</li> </li>
</ul> </ul>
<ul class="side-nav" id="mobile-demo"> <ul class="side-nav" id="mobile-demo">
<li><a href="sass.html">Sass</a></li> <?php include("php/panel.php");?>
<li><a href="components.html">Components</a></li>
<li><a href="javascript.html">Javascript</a></li>
<li><a href="mobile.html">Mobile</a></li>
</ul> </ul>
</div> <form id="searchform">
<div>
<input id="search" type="search" required title="Search for songs..." spellcheck="false" placeholder="Search" onsubmit="null;" autocomplete="off">
<!--<label for="search"><i class="mdi-action-search"></i></label>
<i class="mdi-navigation-close"></i>-->
</div>
</form>
</div>
</nav> </nav>
</div> </div>
</header> </header>
<main class="center-align container"> <main class="container center-align main">
<div class="section"> <div class="row">
<div class="col s12 m9 video-container">
<div id="player" class="ytplayer"></div>
</div>
<div id="playlist" class="col s12 m3">
<div id="wrapper">
<div id="list-song-html">
<div id="list-song" class="card list-song">
<a class="clickable votebg">
<div class="card-image cardbg list-image"></div>
</a>
<div class="card-content">
<p class="left-align">
<span class="flow-text truncate list-title"></span>
<span class="highlighted hide">Votes:&nbsp;</span>
<span class="list-votes hide"></span>
</p>
</div>
<div class="card-action hide">
<a id="del" onclick="vote('id','del')" class="clickable" class="waves-effect waves-orange btn-flat">Remove</a>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</main> </main>
<div id="controls"></div>
<?php include("php/footer.php"); ?> <?php include("php/footer.php"); ?>
</body> </body>
</html> </html>

3
php/nochan.php
View File

@@ -46,7 +46,6 @@ foreach($fil as $files){
} }
?> ?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head> <head>
<?php include("header.php"); ?> <?php include("header.php"); ?>
@@ -55,7 +54,7 @@ foreach($fil as $files){
<header> <header>
<nav> <nav>
<div class="nav-wrapper"> <div class="nav-wrapper">
<a href="//zoff.no" class="brand-logo hide-on-small-only"> <a href="#" class="brand-logo hide-on-small-only">
<img id="zicon" src="static/images/squareicon_small.png" alt="zöff" title="Zöff"> <img id="zicon" src="static/images/squareicon_small.png" alt="zöff" title="Zöff">
</a> </a>
<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>

69
static/css/style.css
View File

@@ -1,4 +1,4 @@
/* /*
1. Global styles 1. Global styles
2. Entry page 2. Entry page
3. Channel page 3. Channel page
@@ -17,10 +17,10 @@ body {
} }
/* global colors */ /* global colors */
footer.page-footer, footer.page-footer,
nav, .tabs .tab a, nav, .tabs .tab a,
.side-nav .collapsible-body li.active, .side-nav .collapsible-body li.active,
.side-nav.fixed .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active,
.pagination li.active{ .pagination li.active{
background-color: #2D2D2D; background-color: #2D2D2D;
} }
@@ -38,7 +38,7 @@ span.badge.new,
.progress .indeterminate, .progress .indeterminate,
.switch label input[type=checkbox]:checked + .lever:after, .switch label input[type=checkbox]:checked + .lever:after,
{ {
background-color: #2D2D2D; background-color: #2D2D2D;
} }
input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) { input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
@@ -88,33 +88,58 @@ main {
/* /*
play mdi-av-play-arrow play mdi-av-play-arrow
pause mdi-av-pause pause mdi-av-pause
remove mdi-content-clear remove mdi-content-clear
search mdi-action-search search mdi-action-search
password mdi-communication-vpn-key password mdi-communication-vpn-key
volume mdi-av-volume-up s volume mdi-av-volume-up s
kip mdi-av-skip-next kip mdi-av-skip-next
shuffle mdi-av-shuffle shuffle mdi-av-shuffle
settings mdi-action-settings settings mdi-action-settings
errors mdi-alert-warning mdi-alert-error mdi-action-info errors mdi-alert-warning mdi-alert-error mdi-action-info
success mdi-action-done success mdi-action-done
vote mdi-action-thumb-up vote mdi-action-thumb-up
hide mdi-action-visibility mdi-action-visibility-off hide mdi-action-visibility mdi-action-visibility-off
*/ */
/* INDEX PAGE */ /* INDEX PAGE */
#zicon{ #zicon{
/* width: 50px; */
/* margin: 7px 20px; */
height: 100%; height: 100%;
} transition: padding 1s ease;
.section .search {
padding-top: 2.5rem;
} }
#channels li{opacity: 0;} #channels li{opacity: 0;}
/* Channel page */ /*------------------- Channel page ---------------------------------------------------------------------------- */
#searchform{
width: 50%;
margin-left: 25%;
}
.main{
width: 100%;
max-width:99%;
margin: 0px;
padding:0px;
}
.video-container{
height: calc(100% - 64px);
}
#playlist{
padding:0px 15px;
}
.nav-btn
{
transition: background-color .2s;
min-width: 64px;
}
.nav-btn:hover{background-color:rgba(0,0,0,0.5);}
.hover-text{display:none;}
.nav-btn:hover > .hover-text {display:inline;}
.list-image{height:40px;}
.list-title{display:block;}

BIN
static/images/squareicon_small.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

45
static/js/list.js
View File

@@ -5,13 +5,14 @@ var myScroll;
var scroller = false; var scroller = false;
var showToggle =true; var showToggle =true;
var chan = $("#chan").html(); var chan = $("#chan").html();
var list_html = $("#list-song-html").html();
var hasadmin=0; var hasadmin=0;
function updateList() function updateList()
{ {
console.log("updating list"); console.log("updating list");
list = $.ajax({ type: "GET", list = $.ajax({ type: "GET",
url: "php/change.php", url: "php/change.php",
async: false async: false
}).responseText; }).responseText;
list = $.parseJSON(list); list = $.parseJSON(list);
@@ -38,23 +39,18 @@ function updateList()
$.each(list.songs, function(j, listeID){ $.each(list.songs, function(j, listeID){
var video_title=listeID.title.replace(/\\\'/g, "'").replace(/&quot;/g,"'").replace(/&amp;/g,"&"); var video_title=listeID.title.replace(/\\\'/g, "'").replace(/&quot;/g,"'").replace(/&amp;/g,"&");
var video_id = listeID.id; var video_id = listeID.id;
if(find && $.inArray(video_id, bright) == -1) brightness = "brightness"; var video_thumb = "background-image:url('http://img.youtube.com/vi/"+video_id+"/mqdefault.jpg');";
else if(find && $.inArray(video_id, bright) != -1) brightness = "brightness fullbrightness"; //var delsong = ""; if(pass_corr=="correct");
else brightness = ""; var video_votes = listeID.votes;
var video_thumb = "http://i.ytimg.com/vi/"+video_id+"/mqdefault.jpg"; $("#wrapper").append(list_html);
var odd = ""; if(j%2===0)odd=" oddlist"; var song = $("#list-song");
var delsong = ""; if(pass_corr=="correct")delsong="<input id='del' title='Remove' type='button' class='button' value='X' onclick=\"vote('"+video_id+"','del')\">"; song.find(".list-title").text(video_title);
var finalhtml="<div id='result' class='"+video_id+" result "+brightness+" lresult"+odd+"'>"+ song.find(".list-votes").text(video_votes);
"<img class='thumb lthumb' src='"+video_thumb+"'>"+ song.find(".votebg").attr("onclick", "vote('"+video_id+"','pos')");
"<div class='ltitle'>"+video_title+"</div>"+ song.find(".list-image").attr("style",video_thumb);
"<div class='votes'>"+listeID.votes+ song.attr("id",video_id);
"<a onclick=\"vote('"+video_id+"','pos');\" id='plus'>+</a>"+
"<a onclick=\"vote('"+video_id+"','neg');\" id='minus'>-</a>"+
delsong+
"</div>"+
"</div>";
$("#wrapper").append(finalhtml);
}); });
if($("#playlist").height() != $("#player").height() || (peis && $("#playlist").height() != $("#jplayer").height())) if($("#playlist").height() != $("#player").height() || (peis && $("#playlist").height() != $("#jplayer").height()))
{ {
if(!window.mobilecheck()) if(!window.mobilecheck())
@@ -95,15 +91,12 @@ function updateList()
document.getElementsByName(names[i])[0].checked = (conf[names[i]] === "true"); document.getElementsByName(names[i])[0].checked = (conf[names[i]] === "true");
document.getElementsByName(names[i])[1].checked = (conf[names[i]] === "false"); document.getElementsByName(names[i])[1].checked = (conf[names[i]] === "false");
} }
if(hasadmin) if(hasadmin)
$("#setpass").text("Channel has admin"); $("#setpass").text("Channel has admin");
else else
$("#setpass").text("Channel has no admin"); $("#setpass").text("Channel has no admin");
} }
$("#settings").css("visibility", "visible");
$("#settings").css("opacity", "0.7");
$("#wrapper").css("opacity", "1");
}, 2500); }, 2500);
} }
@@ -198,8 +191,8 @@ function show(){
function ks() function ks()
{ {
list = $.ajax({ type: "GET", list = $.ajax({ type: "GET",
url: "php/change.php", url: "php/change.php",
async: false async: false
}).responseText; }).responseText;
list = $.parseJSON(list); list = $.parseJSON(list);
@@ -213,5 +206,5 @@ function ks()
scrollY: true, scrollY: true,
interactiveScrollbars: false interactiveScrollbars: false
}); });
scroller = true; scroller = true;
} }

11
static/js/nochan.js
View File

@@ -11,14 +11,11 @@ function getCookie(cname) {
$(document).ready(function (){ $(document).ready(function (){
Materialize.showStaggeredList('#channels'); Materialize.showStaggeredList('#channels');
var deg = 0; var pad = 0;
var pr = 15;
document.getElementById("zicon").addEventListener("click", function(){ document.getElementById("zicon").addEventListener("click", function(){
deg = deg + 365; pad+=10;
pr = pr + 0.5; document.getElementById("zicon").style.paddingLeft = pad+"%";
document.getElementById("zicon").style.transform = "rotate("+deg+"deg)"; if(pad >= 100)
document.getElementById("zicon").style.width = pr+"%";
if(pr >= 60)
window.location.href = 'https://www.youtube.com/v/mK2fNG26xFg?autoplay=1&showinfo=0&autohide=1'; window.location.href = 'https://www.youtube.com/v/mK2fNG26xFg?autoplay=1&showinfo=0&autohide=1';
}); });
if(navigator.userAgent.toLowerCase().indexOf("android") > -1){ if(navigator.userAgent.toLowerCase().indexOf("android") > -1){

37
static/js/youtube.js
View File

@@ -11,7 +11,7 @@ var beginning;
var diffVideo; var diffVideo;
var serverTime; var serverTime;
var url; var url;
var response; var response;
var url; var url;
var tag; var tag;
var firstScriptTag; var firstScriptTag;
@@ -37,6 +37,7 @@ var colorThief;
$(document).ready(function() $(document).ready(function()
{ {
$("#settings").sideNav();
colorThief = new ColorThief(); colorThief = new ColorThief();
window.mobilecheck = function() { window.mobilecheck = function() {
var check = false; var check = false;
@@ -46,8 +47,6 @@ $(document).ready(function()
if(!window.mobilecheck()) if(!window.mobilecheck())
{ {
$("#change").css("opacity", "0");
$("#wrapper").css("opacity", "0");
Notification.requestPermission(); Notification.requestPermission();
} }
@@ -56,8 +55,8 @@ $(document).ready(function()
beginning = true; beginning = true;
diffVideo = false; diffVideo = false;
interval = false; interval = false;
response = $.ajax({ type: "GET", response = $.ajax({ type: "GET",
url: "php/change.php", url: "php/change.php",
async: false async: false
}).responseText; }).responseText;
//console.log(response); //console.log(response);
@@ -65,14 +64,14 @@ $(document).ready(function()
console.log(response.nowPlaying.length); console.log(response.nowPlaying.length);
conf = response.conf; conf = response.conf;
console.log(conf); console.log(conf);
try{ try{
for(var first in response.nowPlaying) break; for(var first in response.nowPlaying) break;
console.log(first); console.log(first);
response = first; response = first;
}catch(err){ }catch(err){
response = "1"; response = "1";
} }
if(window.mobilecheck()){ if(window.mobilecheck()){
//syncInterval = setInterval(getTime, 50000); //syncInterval = setInterval(getTime, 50000);
//listInterval = setInterval(updateList, 50000); //listInterval = setInterval(updateList, 50000);
@@ -135,7 +134,7 @@ function onPlayerStateChange(newState) {
console.log("new state: "+newState.data); console.log("new state: "+newState.data);
console.log("beginning: "+beginning); console.log("beginning: "+beginning);
//ytplayer.seekTo(15); //ytplayer.seekTo(15);
if((newState.data === 0 && checkEnd()) || (newState.data == 1 && checkEnd())) if((newState.data === 0 && checkEnd()) || (newState.data == 1 && checkEnd()))
{ {
console.log("nummer 1"); console.log("nummer 1");
startNextSong(); startNextSong();
@@ -226,7 +225,7 @@ function startNextSong()
} }
beginning = true; beginning = true;
setBGimage(response); setBGimage(response);
},2500); },2500);
updateList(); updateList();
changed = true; changed = true;
@@ -239,7 +238,7 @@ function startNextSong()
console.log("starter intervallen. Interval: " + interval); console.log("starter intervallen. Interval: " + interval);
}, 2500); }, 2500);
} }
} }
function getTime() function getTime()
@@ -279,7 +278,7 @@ function getTime()
} }
} }
//if(interval){syncInterval = setInterval(getTime, 5000);interval = false;} //if(interval){syncInterval = setInterval(getTime, 5000);interval = false;}
if(response != timeDifference[1]) if(response != timeDifference[1])
{ {
//clearInterval(syncInterval); //clearInterval(syncInterval);
@@ -324,8 +323,8 @@ function getTime()
function getTitle() function getTitle()
{ {
$.ajax({ type: "GET", $.ajax({ type: "GET",
url: "php/timedifference.php", url: "php/timedifference.php",
async: false, async: false,
success: function(data) { success: function(data) {
viewers = $.parseJSON(data); viewers = $.parseJSON(data);
@@ -345,7 +344,7 @@ function getTitle()
} }
function errorHandler(newState) function errorHandler(newState)
{ {
setTimeout(function(){ setTimeout(function(){
arr = $.ajax({ arr = $.ajax({
@@ -369,19 +368,19 @@ function errorHandler(newState)
},2500); },2500);
/* /*
setTimeout(function(){ setTimeout(function(){
response = $.ajax({ type: "GET", response = $.ajax({ type: "GET",
url: "change.php", url: "change.php",
async: false async: false
}).responseText; }).responseText;
var url = $.parseJSON(response); var url = $.parseJSON(response);
response = url[0][0]; response = url[0][0];
ytplayer.loadVideoById(response); ytplayer.loadVideoById(response);
},2500);*/ },2500);*/
} }
function onPlayerReady(event) { function onPlayerReady(event) {
//ytplayer = document.getElementById("myytplayer"); //ytplayer = document.getElementById("myytplayer");
// ytplayer.addEventListener("onStateChange", "onytplayerStateChange"); // ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
//ytplayer.addEventListener("onError", "errorHandler"); //ytplayer.addEventListener("onError", "errorHandler");
getTime(); getTime();
if(!window.mobilecheck()) if(!window.mobilecheck())