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

many good

Browse Source
This commit is contained in:
Nicolas A. Tonne
2015-04-19 17:48:13 +02:00
parent 2dcd3baad1
commit d9af601d5f
6 changed files with 218 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
index.php
View File

@@ -10,32 +10,31 @@
<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"); ?>
<link rel="stylesheet" type="text/css" href="static/css/controlstyle.css" />
</head> </head>
<body id="channelpage"> <body id="channelpage">
<header> <header>
<div class="navbar-fixed"> <div class="navbar-fixed">
<nav id="nav"> <nav id="nav">
<div class="nav-wrapper"> <div class="nav-wrapper">
<a href="/" class="brand-logo hide-on-small-only"> <a href="/" class="brand-logo hide-on-med-and-down">
<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 truncate zbrand"> <div class="brand-logo truncate zbrand">
<a href="//zoff.no" class="hide-on-med-and-up">Zöff</a> <a href="//zoff.no" class="hide-on-large-only">Zöff</a>
<span class="hide-on-med-and-up">/</span> <span class="hide-on-large-only">/</span>
<span id="chan" class="chan clickable" title="Show big URL" onclick="show()"><?php echo(ucfirst($list));?></span> <span id="chan" class="chan clickable" title="Show big URL" onclick="show()"><?php echo(ucfirst($list));?></span>
</div> </div>
<div class="container">
<ul class="row"> <ul class="title-container hide-on-med-and-down">
<li class="col s6" id="song-title"> <li class="col s9" id="song-title">
</li> Loading...
<!--<li> </li>
<input id="search" class="search_input" type="search" required title="Search for songs..." spellcheck="false" placeholder="Search" onsubmit="null;" autocomplete="off"> <li class="search-container">
</li>--> <input id="search" class="search_input" type="search" required title="Search for songs..." spellcheck="false" placeholder="Search" onsubmit="null;" autocomplete="off">
</ul> </li>
</div> </ul>
<ul class="right"> <ul class="right control-list">
<li> <li>
<a class="nav-btn" href="#" id="search-btn" onclick=""> <a class="nav-btn" href="#" id="search-btn" onclick="">
<i class="mdi-action-search"></i> <i class="mdi-action-search"></i>
@@ -89,6 +88,7 @@
<div id="fullscreen"> <div id="fullscreen">
<i class="mdi-navigation-fullscreen"></i> <i class="mdi-navigation-fullscreen"></i>
</div> </div>
<div id="viewers"></div>
<div id="bar"></div> <div id="bar"></div>
</div> </div>
</div> </div>

6
php/footer.php
View File

@@ -56,15 +56,17 @@
socket.emit('list', '<?php echo $list; ?>,'+guid); socket.emit('list', '<?php echo $list; ?>,'+guid);
</script> </script>
<script type="text/javascript" src="static/js/lib/iscroll-min.js"></script>
<script type="text/javascript" src="static/js/list.js"></script> <script type="text/javascript" src="static/js/list.js"></script>
<script type="text/javascript" src="static/js/searchlist.js"></script> <script type="text/javascript" src="static/js/searchlist.js"></script>
<script type="text/javascript" src="static/js/playercontrols.js"></script> <script type="text/javascript" src="static/js/playercontrols.js"></script>
<script type="text/javascript" src="static/js/youtube.js"></script> <script type="text/javascript" src="static/js/youtube.js"></script>
<script type="text/javascript" src="static/js/search.js"></script> <script type="text/javascript" src="static/js/search.js"></script>
<script type="text/javascript" src="static/js/admin.js"></script> <script type="text/javascript" src="static/js/admin.js"></script>
<script type="text/javascript" src="static/js/lib/color-thief.min.js"></script>
<script type="text/javascript" src="static/js/lib/materialize.js"></script> <script type="text/javascript" src="static/js/lib/materialize.js"></script>
<script type="text/javascript" src="static/js/lib/color-thief.min.js"></script>
<script type="text/javascript" src="static/js/lib/iscroll-min.js"></script>
<!-- Piwik tracking --> <!-- Piwik tracking -->
<script type="text/javascript"> <script type="text/javascript">
var _paq = _paq || []; var _paq = _paq || [];

4
php/nochan.php
View File

@@ -143,7 +143,9 @@ if(isset($_GET['chan'])){
</a> </a>
</p> </p>
<p> <p>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=http://zoff.no/<?php echo $list; ?>&choe=UTF-8&chld=L|1" alt="QRCode for link" title="QRCode"> <a href="https://chart.googleapis.com/chart?chs=500x500&cht=qr&chl=http://zoff.no/<?php echo $list; ?>&choe=UTF-8&chld=L|1" >
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=http://zoff.no/<?php echo $list; ?>&choe=UTF-8&chld=L|1" alt="QRCode for link" title="QR code for this page, for easy sharing!">
</a>
</p> </p>
</li> </li>
</ul> </ul>

112
static/css/controlstyle.css
View File

@@ -1,112 +0,0 @@
#controls
{
opacity:0;
height:5%;
background-color:rgba(255, 255, 255, 0.1);
width:100%;
}
#playpause, #duration, #volume-button
{
float:left;
color:white;
}
#playpause, #volume-button
{
margin-left:10px;
}
#playpause:hover, #volume-button:hover, #fullscreen:hover
{
color:rgba(255,255,255,0.5);
}
#fullscreen
{
float:right;
color:white;
margin-right:15px;
}
#duration
{
margin-top:5px;
font-family:"Roboto", sans-serif;
font-weight:300;
margin-left:15px;
}
#play, #pause, #volume-button, #fullscreen
{
font-size:20px;
cursor:pointer;
}
#volume {
cursor:pointer;
float:left;
position: relative;
left: 10px;
margin: 13px auto;
height:5px;
width: 75px;
background-color:rgba(0, 0, 0, 0.5);
border: none;
outline: none;
border-radius: 2px;
}
#volume .ui-slider-range-min {
height:5px;
width: 75px;
position: absolute;
background-color:rgba(255, 255, 255, 0.8);
border: none;
outline: none;
border-radius: 2px;
}
#volume .ui-slider-handle {
height:15px;
width:5px;
background-color:white;
position: absolute;
cursor: pointer;
outline: none;
border: none;
display: none;
}
.ui-slider-handle
{
margin-top:-5px;
}
.play
{
background-size: auto;
width: 55px;
height: 27px;
}
.pause
{
background-size: auto;
width: 55px;
height: 27px;
}
.hide
{
display:none !important;
}
#bar
{
height:100%;
background-color:rgba(0,0,0,0.5);
-webkit-transition: width 1s ease;
transition: width 1s ease;
}

163
static/css/style.css
View File

@@ -50,6 +50,7 @@ input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly
nav .brand-logo{ nav .brand-logo{
padding-left: 20px; padding-left: 20px;
position: relative;
} }
#fp-nav { #fp-nav {
@@ -64,9 +65,11 @@ main {
} }
nav .zbrand{ nav .zbrand{
left:90px;
max-width: 22%; max-width: 22%;
overflow: hidden; overflow: hidden;
position: relative;
padding-left: 0;
margin-left: -10px;
} }
.fullwidth{ .fullwidth{
@@ -92,6 +95,7 @@ nav .zbrand{
.cardbg{ .cardbg{
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 124%; background-size: 124%;
background-size: cover;
background-position: 50% 50%; background-position: 50% 50%;
background-color: #171717; background-color: #171717;
height: 120px; height: 120px;
@@ -190,6 +194,43 @@ hide mdi-action-visibility mdi-action-visibility-off
padding:0px 15px; padding:0px 15px;
} }
.control-list{
position: fixed;
top:0;
right:0;
}
.title-container{
width: 65%;
width: calc(90% - 256px - 130px);
padding-left: 30px;
display: inline-block;
height: 100%;
overflow: hidden;
}
.title-container li{
height:100%;
height: 64px;
width: 500px;
padding: 0 15px;
}
.search-container{
width: 35% !important;
display: block;
}
#song-title{
font-size: 22px;
font-weight: 300;
}
#viewers{
width: initial;
padding-right: 3%;
}
#player{ #player{
height:95%; height:95%;
position: relative; position: relative;
@@ -333,3 +374,123 @@ hide mdi-action-visibility mdi-action-visibility-off
.collapsible-body ul li.white-bg{ .collapsible-body ul li.white-bg{
background-color:white !important; background-color:white !important;
} }
/************** Youtube controls **************/
#controls
{
opacity:0;
height:5%;
background-color:rgba(255, 255, 255, 0.1);
width:100%;
color:white;
}
#playpause, #duration, #volume-button
{
float:left;
color:white;
}
#playpause, #volume-button
{
margin-left:10px;
}
#playpause:hover, #volume-button:hover, #fullscreen:hover
{
color:rgba(255,255,255,0.5);
}
#fullscreen
{
float:right;
color:white;
margin-right:15px;
}
#duration, #viewers
{
margin-top:5px;
font-family:"Roboto", sans-serif;
font-weight:300;
margin-left:15px;
}
#viewers{
float: right;
}
#play, #pause, #volume-button, #fullscreen
{
font-size:20px;
cursor:pointer;
}
#volume {
cursor:pointer;
float:left;
position: relative;
left: 10px;
margin: 13px auto;
height:5px;
width: 75px;
background-color:rgba(0, 0, 0, 0.5);
border: none;
outline: none;
border-radius: 2px;
}
#volume .ui-slider-range-min {
height:5px;
width: 75px;
position: absolute;
background-color:rgba(255, 255, 255, 0.8);
border: none;
outline: none;
border-radius: 2px;
}
#volume .ui-slider-handle {
height:15px;
width:5px;
background-color:white;
position: absolute;
cursor: pointer;
outline: none;
border: none;
display: none;
}
.ui-slider-handle
{
margin-top:-5px;
}
.play
{
background-size: auto;
width: 55px;
height: 27px;
}
.pause
{
background-size: auto;
width: 55px;
height: 27px;
}
.hide
{
display:none !important;
}
#bar
{
height:100%;
background-color:rgba(0,0,0,0.5);
-webkit-transition: width 1s ease;
transition: width 1s ease;
}

68
static/js/youtube.js
View File

@@ -47,28 +47,34 @@ var playing = false;
socket.on(chan.toLowerCase()+",np", function(obj) socket.on(chan.toLowerCase()+",np", function(obj)
{ {
console.log(obj); console.log(obj);
console.log("gotten new song"); if(obj[0].length == 0){
video_id = obj[0][0]["id"]; console.log("Empty list");
conf = obj[1][0]; document.getElementById('song-title').innerHTML = "Empty channel. Add some songs!"
time = obj[2]; }
seekTo = time - conf["startTime"]; else{
song_title = obj[0][0]["title"]; console.log("gotten new song");
getTitle(song_title, viewers); video_id = obj[0][0]["id"];
if(player_ready && !window.mobilecheck()) conf = obj[1][0];
{ time = obj[2];
if(ytplayer.getVideoUrl().split('v=')[1] != video_id) seekTo = time - conf["startTime"];
song_title = obj[0][0]["title"];
getTitle(song_title, viewers);
if(player_ready && !window.mobilecheck())
{ {
ytplayer.loadVideoById(video_id); if(ytplayer.getVideoUrl().split('v=')[1] != video_id)
setBGimage(video_id); {
notifyUser(video_id, song_title); ytplayer.loadVideoById(video_id);
if(paused) setBGimage(video_id);
ytplayer.pauseVideo(); notifyUser(video_id, song_title);
}else if(paused)
console.log("like"); ytplayer.pauseVideo();
if(!paused) }else
ytplayer.playVideo(); console.log("like");
if(ytplayer.getDuration() > seekTo) if(!paused)
ytplayer.seekTo(seekTo); ytplayer.playVideo();
if(ytplayer.getDuration() > seekTo)
ytplayer.seekTo(seekTo);
}
} }
}); });
@@ -110,8 +116,8 @@ $(document).ready(function()
if($("#chan").html().toLowerCase() == "jazz") if($("#chan").html().toLowerCase() == "jazz")
{ {
loadjsfile("static/js/jazzscript.js"); //loadjsfile("static/js/jazzscript.js");
peis = true; //peis = true;
} }
} }
}); });
@@ -141,8 +147,6 @@ function msieversion() {
} }
function onYouTubeIframeAPIReady() { function onYouTubeIframeAPIReady() {
$("#change").css("-webkit-transition", "opacity 1s");
$("#change").css("opacity", "1");
ytplayer = new YT.Player('player', { ytplayer = new YT.Player('player', {
height: window.height*0.75, height: window.height*0.75,
width: window.width*0.6, width: window.width*0.6,
@@ -156,9 +160,9 @@ function onYouTubeIframeAPIReady() {
}); });
if(peis) if(peis)
{ {
jazz_setup(); //jazz_setup();
} }
$("#player").css("opacity", "0");
} }
function onPlayerStateChange(newState) { function onPlayerStateChange(newState) {
@@ -200,14 +204,12 @@ function getTitle(titt, v)
{ {
var outPutWord = v > 1 ? "viewers" : "viewer"; var outPutWord = v > 1 ? "viewers" : "viewer";
var title= decodeURIComponent(titt); var title= decodeURIComponent(titt);
var elem = document.getElementById('song-title');
document.title = title + " • Zöff"; document.title = title + " • Zöff";
if(!window.mobilecheck()){ if(!window.mobilecheck()){
document.getElementById('song-title').innerHTML = title + " • " + v + " " + outPutWord; elem.innerHTML = title;
}else document.getElementById('viewers').innerHTML = v + " " + outPutWord;
{ elem.title = title + " • " + v + " " + outPutWord;
document.getElementById("mobileTitle").innerHTML = title;
document.getElementById('song-title').innerHTML = "Search • 1 " + v + " " + outPutWord;
//document.getElementById("viewers").innerHTML = viewers[5].length + " " + outPutWord;
} }
} }