KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-12-08 12:38:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

New release

Browse Source
This commit is contained in:
Nicolas A. Tonne
2014-10-09 21:21:21 +02:00
parent 5c75171af2
commit f98415c5b1
12 changed files with 209 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
.htaccess Normal file
View File

@@ -0,0 +1,12 @@
Options +FollowSymLinks
RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
RewriteCond %{REQUEST_URI} !(/$|\.)
RewriteRule (.*) %{REQUEST_URI}/ [R=301,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule /(.*)$ /$1 [L]

19
README.md
View File

@@ -1,19 +0,0 @@
Zoff
====
The shared youtube radio
## About the specific files
### change.php
Does all the serverside handling, updating lists, voting, serving the list, adding songs etc.
### Everything else
Is pretty much self explanatory. :D
The important files are:
* youtube.js
* list.js
* search.js
* change.php
* index.php

3
change.php
View File

@@ -75,7 +75,8 @@ else if(isset($_GET['vote'])){ //add vote
unset($data[3][$i]); unset($data[3][$i]);
unset($data[0][$i]); unset($data[0][$i]);
unset($data[2][$i]); unset($data[2][$i]);
$underVote = array_search($votes-1, $data[2]); $underVote = array_search($votes-1, $data[2]); #nenennenenen feiiiiiiiiiiiiiiiiil
if($underVote == 0)$underVote=1; if($underVote == 0)$underVote=1;
else if($underVote == false)$underVote=count($data[2]); else if($underVote == false)$underVote=count($data[2]);
array_splice($data[3], $underVote, 0, array($name)); array_splice($data[3], $underVote, 0, array($name));

3
channel.php
View File

@@ -1,3 +0,0 @@
<?php
echo file_exists()
?>

13
index.php
View File

@@ -9,12 +9,13 @@
</head> </head>
<body> <body>
<div class="top vcent centered"> <div class="top vcent centered">
<div id="change" class="small"><?php <div id="change" class="small">
<?php
if(isset($_GET['chan'])) header('Location: '.$_GET['chan']); if(isset($_GET['chan'])) header('Location: '.$_GET['chan']);
$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('nochan.php');die();} if($list[1]==""||!isset($list[1])||count($list)<=1){$list="";include('nochan.php');die();}
else $list=$list[1];?> else $list=$list[1];
?>
<a id="toptitle" href="/">Zöff</a> <a id="toptitle" href="/">Zöff</a>
<div id="chan" class="chan" title="Show big URL" onclick="show()"><?php echo(ucfirst($list));?></div> <div id="chan" class="chan" title="Show big URL" onclick="show()"><?php echo(ucfirst($list));?></div>
<input id="search" name="v" type="text" class="search_input innbox" spellcheck="false" placeholder="Search" onsubmit="null;" autocomplete="off"/> <input id="search" name="v" type="text" class="search_input innbox" spellcheck="false" placeholder="Search" onsubmit="null;" autocomplete="off"/>

29
list.js
View File

@@ -38,21 +38,24 @@ function updateList()
}); });
if($("#playlist").height() > $("#player").height()) if($("#playlist").height() > $("#player").height())
{ {
if(!window.mobilecheck()){ $("#playlist").css({height: $("#player").height() - $("#buttons").height()-4});} if(!window.mobilecheck())
if(scroller == false)
{ {
myScroll = new IScroll('#playlist', { $("#playlist").css({height: $("#player").height() - $("#buttons").height()-4});
mouseWheel: true, $("#playlist").css({overflow: "hidden"});
scrollbars: false, if(scroller == false)
scrollY: true, {
interactiveScrollbars: false myScroll = new IScroll('#playlist', {
}); mouseWheel: true,
scroller = true; scrollbars: false,
}else scrollY: true,
{ interactiveScrollbars: false
myScroll.refresh(); });
scroller = true;
}else
{
myScroll.refresh();
}
} }
} }
if(window.mobilecheck()) if(window.mobilecheck())
{ {

47
lists/index.php
View File

@@ -0,0 +1,47 @@
<html>
<head>
<title>Zöff</title>
<meta name="author" content="Nicolas 'Nixo' Almagro Tonne &amp; Kasper 'KasperRT' Rynning-Tønnesen">
<link rel="stylesheet" type="text/css" href="/style.css" title="Default" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="icon" type="image/png" href="/static/favicon.png"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="top vcent centered">
<div id="change" class="small"><?php
if(isset($_GET['chan'])) header('Location: '.$_GET['chan']);
$list = explode("/", htmlspecialchars(strtolower($_SERVER["REQUEST_URI"])));
if($list[1]==""||!isset($list[1])||count($list)<=1){$list="";include('nochan.php');die();}
else $list=$list[1];?>
<a id="toptitle" href="/">Zöff</a>
<div id="chan" class="chan" title="Show big URL" onclick="show()"><?php echo(ucfirst($list));?></div>
<input id="search" name="v" type="text" class="search_input innbox" spellcheck="false" placeholder="Search" onsubmit="null;" autocomplete="off"/>
<div id="results"></div>
<div class="main">
<div id="player" class="ytplayer"></div>
<div class="playlist" >
<div id="buttons" class="result">
<img src="/static/skip.png" class="skip" alt="Skip" title="Skip" onclick="skip();">
</div>
<div id="playlist">
<div id="wrapper">
</div>
</div>
</div>
</div>
</div>
<div class="footer small centered top anim">&copy; 2014 <a class="anim" href="//nixo.no">Nixo</a> &amp; <a class="anim" href="//kasperrt.no">KasperRT</a> </div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/swfobject.js"></script>
<script type="text/javascript" src="/iscroll.js"></script>
<script type="text/javascript" src="/list.js"></script>
<script type="text/javascript" src="/youtube.js"></script>
<script type="text/javascript" src="/search.js"></script>
<script type="text/javascript" src="/visualize.js"></script>
</body>
</html>

1
lists/yali.json Normal file
View File

@@ -0,0 +1 @@
[["Sb3XfrCtjVU","vMwFFENUOQk","RCB5yWVKx-Q","LS18kZR1X5I","3O1_3zBUKM8","Ms5eSsOKk14","cV9dsOJXt3g","mG6pm1WZ2uc","y6DHE_5drbM","uPOUgobWTT0","UY-NlQH8vjs","aHGcfmnDm3U","p0B26wv22ao","wyx6JDQCslE","IYH7_GzP4Tg","Ac08rCzDUB0","CRGl33OTY74","V40EjCjP3VU","L53gjP-TtGE","YLx11xq6X7Q"],[1412548839],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],["The Notorious BIG ft. Ja Rule - Old Thing Back (Matoma Remix)","Mandeh - Sandbank","Philter - Untitled","Philter - Adventure Time","Naughty Boy - La La La ft. Sam Smith","DMX - Where The Hood At (Dirty)","Notorious BIG - Juicy (Sh\u00e8mce Remix)","Sade - No Ordinary Love (R\u00c6VE ","The Notorious B.I.G. - Party ","(I Wanna) Channing All Over Your Tatum - Official Music Video","Foreground Set - Challo! (FULL)","Foreground Set - Good luck","Opeth - Eternal Rains Will Come (Audio)","LMFAO - Sexy and I Know It","Lil Jon ","M83 - Midnight City","Naughty Boy Feat. Sam Smith - La La La Remix - Shahaf Moran","Philter - The Seven Seas","Kanye West - POWER","Kanye West - Black Skinhead (Blkkk SkkkN Head) Official Video HD"],[1],[]]

43
nochan.php
View File

@@ -1,40 +1,33 @@
<?php <?php
if(isset($_GET['chan'])) if(isset($_GET['chan'])){
{
header('Location: '.$_GET['chan']); header('Location: '.$_GET['chan']);
} }
$dir = scandir('./lists'); $dir = scandir('./lists');
$channels = array(); $channels = array();
foreach($dir as $files) foreach($dir as $files){
{ if(strpos($files, '.json') !== FALSE){
//echo $files;
if(strpos($files, '.json') !== FALSE)
{
//echo "found some"
array_push($channels, ucfirst(str_replace(".json", "", $files))); array_push($channels, ucfirst(str_replace(".json", "", $files)));
//$channels = $channels . str_replace(".json", "", $files) . " ";
} }
} }
?> ?>
Zöff
<form name="ufo" action="" class="daform nomargin" id="base" method="get" onsubmit="null;" autocomplete="off">
<input id="search" name="chan" type="text" class="search_input innbox" spellcheck="false" placeholder="Type Channel Name" autofocus/>
</form>
</div>
<div id="channels">Channels: <br>
<?php
foreach($channels as $channel)
{
echo "<a class='channels' href='/".$channel."'>".$channel."</a>";
}
?>
</div></div>
<div class="footer small centered top anim">&copy; 2014 <a class="anim" href="//nixo.no">Nixo</a> &amp; <a class="anim" href="//kasperrt.no">KasperRT</a> </div> <div class="bigchan nomargin">Zöff</div>
</body> <form name="ufo" action="" class="daform nomargin" id="base" method="get" onsubmit="null;" >
<input id="search" name="chan" type="text" class="search_input innbox" spellcheck="false" placeholder="Type Channel Name" autofocus/>
</form>
</div>
<center>
<div class="channels" id="channels">Channels: <br>
<?php foreach($channels as $channel){echo "<a class='channel' href='/".$channel."'>".urldecode($channel)."</a>";} ?>
</div>
</center>
</div>
<div class="footer small centered top anim bottom">&copy; 2014 <a class="anim" href="//nixo.no">Nixo</a> &amp; <a class="anim" href="//kasperrt.no">KasperRT</a> </div>
</body>
</html> </html>

38
style.css
View File

@@ -5,7 +5,7 @@ body{background:#FFF; margin:0;}
} }
.top, .top a{color:#ed207f; text-decoration: none;} .top, .top a{color:#ed207f; text-decoration: none;}
.vcent{position: relative; top: 50%; -webkit-transform: translateY(-50%);} .vcent{position: relative; top: 50%; -webkit-transform: translateY(-50%);}
.channels{padding:10px;}
.innbox, .innbox a{ .innbox, .innbox a{
width:90%; height: 50px; border-radius:7px; border:none; font-family: 'Open Sans', sans-serif; font-size: 25px; margin-bottom: 20px; width:90%; height: 50px; border-radius:7px; border:none; font-family: 'Open Sans', sans-serif; font-size: 25px; margin-bottom: 20px;
@@ -18,7 +18,12 @@ body{background:#FFF; margin:0;}
.big{font-size:180vh; position:absolute; top:-50%; color:#330A00 !important; z-index:-1; width: 100%; overflow: hidden; display: none;} .big{font-size:180vh; position:absolute; top:-50%; color:#330A00 !important; z-index:-1; width: 100%; overflow: hidden; display: none;}
.footer a{color:#696969; text-decoration: none;}.footer a:hover {color:#ed207f;} .footer a{color:#696969; text-decoration: none;}.footer a:hover {color:#ed207f;}
.footer{font-size: 15px; position:absolute; width:99%;color:#c0c0c0 !important; margin-top: 0; word-spacing: 2px;} .footer{font-size: 15px; position:absolute; width:99%;color:#c0c0c0 !important; margin-top: 0; word-spacing: 2px;}
.nomargin{padding: 0;margin:0;} .bottom{bottom:10px;}
#channels{width:40%; min-width: 300px; padding-top: 4%; font-size: 25px;}
.channel{padding: 7px; display: inline-block; font-weight: bold; color: #646464 !important;font-size: 18px;}
.channel:hover{color:#ed207f !important;}
.anim{transition: all .20s ease-in-out; -moz-transition: all .20s ease-in-out; -webkit-transition: all .20s ease-in-out;} .anim{transition: all .20s ease-in-out; -moz-transition: all .20s ease-in-out; -webkit-transition: all .20s ease-in-out;}
.chan{color:#CCC; cursor:pointer; display: inline;} .chan{color:#CCC; cursor:pointer; display: inline;}
.bigchan{color: #ed207f; font-size: 10vw; padding-top: 25%;} .bigchan{color: #ed207f; font-size: 10vw; padding-top: 25%;}
@@ -26,35 +31,52 @@ body{background:#FFF; margin:0;}
#buttons{cursor: default; text-align: right;} #buttons{cursor: default; text-align: right;}
.skip{cursor: pointer; height: 25px; padding:8px 21px 0 0;} .skip{cursor: pointer; height: 25px; padding:8px 21px 0 0;}
#results{position:absolute; background-color: white; font-size: 14px; width:90%; margin-left: 5%; margin-top:-5px; z-index: 1; } #results{position:absolute; background-color: white; font-size: 14px; width:90%; margin-left: 5%; margin-top:-5px; z-index: 1; font-family: sans-serif;}
.result{border: 1px solid #EEE; border-bottom:none; padding: 3px 0 3px 10%; text-align: left; height: 40px; cursor: pointer;} .result{border-bottom:none; padding: 3px 0 3px 10%; text-align: left; height: 55px; cursor: pointer;}
.result:hover{background-color: #DDD;} .result:hover{background-color: #DDD;}
#title{ padding-left: 20%; padding-top:10px; max-width: 76%; color:#ed207f;} #title{ padding-left: 20%; padding-top:10px; max-width: 76%; color:#ed207f; height: 36px;}
.result_info{color:#888; font-size: 12px; float:right;} .result_info{color:#888; font-size: 12px; float:right;}
.thumb{height: 40px; width:80px; float: left;} .thumb{height: 40px; width:80px; float: left;}
.main{width:90%; margin: 0 auto 0 auto;} .main{width:90%; margin: 0 auto 0 auto;}
.playlist{background-color: #DADADA; width:20%; margin-left: 0px; display: inline-block; font-size: 14px; border-radius: 3px; vertical-align: top; overflow: hidden; height: calc(87% - 183px); border-bottom:solid #c9c9c9 4px;} .playlist{background-color: #DADADA; width:20%; margin-left: 0px; display: inline-block; font-size: 14px; border-radius: 3px; vertical-align: top; /*overflow: hidden;*/ height: calc(87% - 183px); border-bottom:solid #c9c9c9 4px;}
.lresult{padding:0; height: 60px; border-top: none; cursor: default; background-color: #DADADA;} .lresult{padding:0; height: 60px; border-top: none; cursor: default; background-color: #DADADA;}
.lthumb{height: 60px; margin-right: 10px; display: inline;} .lthumb{height: 60px; margin-right: 10px; display: inline;}
.ltitle{ color:#ed207f; overflow: hidden; height: 60px; } .ltitle{ color:#ed207f; overflow: hidden; height: 60px; }
.oddlist{background-color: #EEE;} .oddlist{background-color: #EEE;}
.votes{float: right; position: relative; margin-top: -1.4em; padding:0 3 0 4; background-color: #333; border-radius: 3px;} .votes{float: right; position: relative; margin-top: -1.4em; padding:0 3 0 4; background-color: rgba(50,50,50,0.45); color:#000; border-radius: 1px;}
#plus, #minus {text-decoration: none; color:white; margin-left: 2px; padding-left: 3px; padding-right: 3px; } #plus, #minus {text-decoration: none; color:white; margin-left: 2px; padding-left: 3px; padding-right: 3px; }
#plus:hover,#minus:hover{background-color: #111;} #plus:hover,#minus:hover{background-color: #111;}
#player{height: 68%; height: calc(87% - 183px); width: 78%; border-radius: 3px; border-bottom:solid #c9c9c9 4px;} #player{height: 68%; height: calc(87% - 183px); width: 78%; border-radius: 3px; border-bottom:solid #c9c9c9 4px;}
#playlist{} #playlist{}
.nomargin{padding: 0;margin:0;}
@media (max-width: 1000px) { @media (max-width: 1000px) {
#player{width: 100%; height:45%; margin-bottom: 20px;} #player{width: 100%; height:45%; margin-bottom: 20px;}
.playlist{width: 100%;} .playlist{width: 100%;}
.lresult{font-size: 40px; height: 90px; font-size: 50px;} .lresult{font-size: 40px; height: 90px; font-size: 50px;}
.votes{font-size: 42px; padding-right: 8px; height: 89px; line-height: 89px; padding-left: 20px; border-radius: 15px;} .votes{font-size: 42px; padding-right: 8px; height: 89px; line-height: 89px; padding-left: 20px; border-radius: 1px;}
.lthumb{height: 90px;} .lthumb{height: 90px;}
#plus,#minus{padding-left: 24px; margin-left: 0; padding-right: 24px;} #plus,#minus{padding-left: 24px; margin-left: 0; padding-right: 24px;}
#plus{border-right:solid 3px rgb(172, 172, 172);} #plus{border-right:solid 3px rgb(172, 172, 172);}
#search{text-align: left; height: 100px; font-size: 40px; border: solid 2px #ccc;}
#buttons{text-align: center; height: 80px;}
.skip{height: 50px;}
.vcent{
top: inherit;
-webkit-transform: translateY(0%);
}
#title{
font-size: 30px;
font-weight: bold;
overflow: hidden;
padding-left: 2%;
padding-top: 0;
}
.footer{font-size: 40px; margin-top: 150px;}
} }
@-webkit-keyframes fadein{from {opacity:0;}to{opacity:1;}}@keyframes fadein{from{opacity:0;}to{opacity:1;}}@-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}@-o-keyframes fadein{from{opacity:0;}to{opacity:1;}} @-webkit-keyframes fadein{from {opacity:0;}to{opacity:1;}}@keyframes fadein{from{opacity:0;}to{opacity:1;}}@-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}@-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}

124
youtube.js
View File

@@ -59,9 +59,14 @@ $(document).ready(function()
tag.src = "https://www.youtube.com/iframe_api"; tag.src = "https://www.youtube.com/iframe_api";
firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
syncInterval = setInterval(getTime, 5000); if(window.mobilecheck()){
listInterval = setInterval(updateList, 10000); syncInterval = setInterval(getTime, 50000);
if(window.mobilecheck()){document.getElementById("search").blur();} listInterval = setInterval(updateList, 50000);
document.getElementById("search").blur();
}else{
syncInterval = setInterval(getTime, 5000);
listInterval = setInterval(updateList, 10000);
}
}); });
function onYouTubeIframeAPIReady() { function onYouTubeIframeAPIReady() {
@@ -100,11 +105,13 @@ function onPlayerStateChange(newState) {
console.log("nummer 1"); console.log("nummer 1");
startNextSong(); startNextSong();
ytplayer.pauseVideo(); ytplayer.pauseVideo();
wasPaused = false;
}else if(newState.data == 1 && (wasPaused && !beginning)) }else if(newState.data == 1 && (wasPaused && !beginning))
{ {
console.log("unpaused"); console.log("unpaused");
beginning = false; beginning = false;
wasPaused = false; wasPaused = false;
syncInterval = setInterval(getTime, 5000);
getTime(); getTime();
}else if(newState.data == 2) }else if(newState.data == 2)
{ {
@@ -136,7 +143,7 @@ function checkEnd()
function startNextSong() function startNextSong()
{ {
clearInterval(syncInterval);
//console.log(getTime()); //console.log(getTime());
if(checkEnd() && !changed) if(checkEnd() && !changed)
{ {
@@ -156,74 +163,79 @@ function startNextSong()
getTitle(response); getTitle(response);
ytplayer.loadVideoById(response); ytplayer.loadVideoById(response);
beginning = true; beginning = true;
syncInterval = setInterval(getTime, 5000);
},2500); },2500);
updateList(); updateList();
changed = true changed = true
setTimeout(function() { setTimeout(function() {
changed = false; changed = false;
syncInterval = setInterval(getTime, 5000);
interval = true;
console.log("starter intervallen. Interval: " + interval);
}, 2500); }, 2500);
} }
} }
function getTime() function getTime()
{ {
console.log("utenfor if test" + wasPaused);
if(!wasPaused) if(!wasPaused)
{ {
console.log("sjekker om brukeren spolte"); console.log("sjekker om brukeren spolte");
$.ajax({ $.ajax({
type: 'get', type: 'get',
url: 'timedifference.php', url: 'timedifference.php',
data: "abcde", data: "abcde",
async: false, async: false,
success: function(data) { success: function(data) {
timeDifference = $.parseJSON(data); timeDifference = $.parseJSON(data);
}
});
console.log("current song: "+response);
console.log("song in database: "+timeDifference[1]);
if(parseInt(timeDifference[2]) + 1> ytplayer.getCurrentTime() + parseInt(timeDifference[3]) && ytplayer.getPlayerState() == 0)
{
return true;
}else if(ytplayer.getCurrentTime() + parseInt(timeDifference[3]) > parseInt(timeDifference[2]) + 5 || (ytplayer.getCurrentTime() + parseInt(timeDifference[3]) < parseInt(timeDifference[2]) - 5 && ytplayer.getPlayerState() != 0 && ytplayer.getPlayerState() != 3))
{
if(parseInt(timeDifference[0]) > ytplayer.getDuration())
{
console.log("burde ikke søke, men hoppe til neste sang");
} }
ytplayer.seekTo(timeDifference[0]); });
ytplayer.pauseVideo(); console.log("current song: "+response);
ytplayer.playVideo(); console.log("song in database: "+timeDifference[1]);
getTitle(); if(parseInt(timeDifference[2]) + 1> ytplayer.getCurrentTime() + parseInt(timeDifference[3]) && ytplayer.getPlayerState() == 0)
return false; {
} return true;
//if(interval){syncInterval = setInterval(getTime, 5000);interval = false;} }else if(ytplayer.getCurrentTime() + parseInt(timeDifference[3]) > parseInt(timeDifference[2]) + 5 || (ytplayer.getCurrentTime() + parseInt(timeDifference[3]) < parseInt(timeDifference[2]) - 5 && ytplayer.getPlayerState() != 0 && ytplayer.getPlayerState() != 3))
{
if(parseInt(timeDifference[0]) > ytplayer.getDuration())
{
console.log("burde ikke søke, men hoppe til neste sang");
}
ytplayer.seekTo(timeDifference[0]);
ytplayer.pauseVideo();
ytplayer.playVideo();
getTitle();
return false;
}
//if(interval){syncInterval = setInterval(getTime, 5000);interval = false;}
if(response != timeDifference[1]) if(response != timeDifference[1])
{ {
clearInterval(syncInterval); clearInterval(syncInterval);
console.log("forskjellige videoer!!"); console.log("forskjellige videoer!!");
ytplayer.pauseVideo(); ytplayer.pauseVideo();
ytplayer.loadVideoById(timeDifference[1]); ytplayer.loadVideoById(timeDifference[1]);
setTimeout(function(){ setTimeout(function(){
//console.log(response); //console.log(response);
diffVideo = true; diffVideo = true;
beginning = true; beginning = true;
$.ajax({ $.ajax({
type: "POST", type: "POST",
url: "change.php", url: "change.php",
async: false, async: false,
data: "thisUrl=123abcprompeprompe&act=save", data: "thisUrl=123abcprompeprompe&act=save",
success: function(data) success: function(data)
{ {
response = timeDifference[1]; response = timeDifference[1];
getTitle(); getTitle();
} }
}); });
syncInterval = setInterval(getTime, 5000); syncInterval = setInterval(getTime, 5000);
},2500); },2500);
} }
} }
} }