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

6
php/footer.php
View File

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

4
php/nochan.php
View File

@@ -143,7 +143,9 @@ if(isset($_GET['chan'])){
</a>
</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>
</li>
</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{
padding-left: 20px;
position: relative;
}
#fp-nav {
@@ -64,9 +65,11 @@ main {
}
nav .zbrand{
left:90px;
max-width: 22%;
overflow: hidden;
position: relative;
padding-left: 0;
margin-left: -10px;
}
.fullwidth{
@@ -92,6 +95,7 @@ nav .zbrand{
.cardbg{
background-repeat: no-repeat;
background-size: 124%;
background-size: cover;
background-position: 50% 50%;
background-color: #171717;
height: 120px;
@@ -190,6 +194,43 @@ hide mdi-action-visibility mdi-action-visibility-off
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{
height:95%;
position: relative;
@@ -333,3 +374,123 @@ hide mdi-action-visibility mdi-action-visibility-off
.collapsible-body ul li.white-bg{
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)
{
console.log(obj);
console.log("gotten new song");
video_id = obj[0][0]["id"];
conf = obj[1][0];
time = obj[2];
seekTo = time - conf["startTime"];
song_title = obj[0][0]["title"];
getTitle(song_title, viewers);
if(player_ready && !window.mobilecheck())
{
if(ytplayer.getVideoUrl().split('v=')[1] != video_id)
if(obj[0].length == 0){
console.log("Empty list");
document.getElementById('song-title').innerHTML = "Empty channel. Add some songs!"
}
else{
console.log("gotten new song");
video_id = obj[0][0]["id"];
conf = obj[1][0];
time = obj[2];
seekTo = time - conf["startTime"];
song_title = obj[0][0]["title"];
getTitle(song_title, viewers);
if(player_ready && !window.mobilecheck())
{
ytplayer.loadVideoById(video_id);
setBGimage(video_id);
notifyUser(video_id, song_title);
if(paused)
ytplayer.pauseVideo();
}else
console.log("like");
if(!paused)
ytplayer.playVideo();
if(ytplayer.getDuration() > seekTo)
ytplayer.seekTo(seekTo);
if(ytplayer.getVideoUrl().split('v=')[1] != video_id)
{
ytplayer.loadVideoById(video_id);
setBGimage(video_id);
notifyUser(video_id, song_title);
if(paused)
ytplayer.pauseVideo();
}else
console.log("like");
if(!paused)
ytplayer.playVideo();
if(ytplayer.getDuration() > seekTo)
ytplayer.seekTo(seekTo);
}
}
});
@@ -110,8 +116,8 @@ $(document).ready(function()
if($("#chan").html().toLowerCase() == "jazz")
{
loadjsfile("static/js/jazzscript.js");
peis = true;
//loadjsfile("static/js/jazzscript.js");
//peis = true;
}
}
});
@@ -141,8 +147,6 @@ function msieversion() {
}
function onYouTubeIframeAPIReady() {
$("#change").css("-webkit-transition", "opacity 1s");
$("#change").css("opacity", "1");
ytplayer = new YT.Player('player', {
height: window.height*0.75,
width: window.width*0.6,
@@ -156,9 +160,9 @@ function onYouTubeIframeAPIReady() {
});
if(peis)
{
jazz_setup();
//jazz_setup();
}
$("#player").css("opacity", "0");
}
function onPlayerStateChange(newState) {
@@ -200,14 +204,12 @@ function getTitle(titt, v)
{
var outPutWord = v > 1 ? "viewers" : "viewer";
var title= decodeURIComponent(titt);
var elem = document.getElementById('song-title');
document.title = title + " • Zöff";
if(!window.mobilecheck()){
document.getElementById('song-title').innerHTML = title + " • " + v + " " + outPutWord;
}else
{
document.getElementById("mobileTitle").innerHTML = title;
document.getElementById('song-title').innerHTML = "Search • 1 " + v + " " + outPutWord;
//document.getElementById("viewers").innerHTML = viewers[5].length + " " + outPutWord;
elem.innerHTML = title;
document.getElementById('viewers').innerHTML = v + " " + outPutWord;
elem.title = title + " • " + v + " " + outPutWord;
}
}