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

Started on player controls, but volume slider is not complying

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2015-04-14 00:22:34 +02:00
parent d8aff2fe44
commit 5192258888
6 changed files with 57 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
index.php
View File

@@ -10,6 +10,7 @@
<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> <body>
<header> <header>
@@ -52,11 +53,16 @@
</nav> </nav>
</div> </div>
</header> </header>
<main class="container center-align main"> <main class="container center-align main">
<div class="row"> <div class="row">
<div class="col s12 m9 video-container"> <div class="col s12 m9 video-container">
<div id="player" class="ytplayer"></div> <div id="player" class="ytplayer"></div>
<div id="controls">
<div id="playpause"><i class="mdi-av-play-arrow"></i></div>
<div id="duration">00:00 / 00:00</div>
<div id="volume-button"><i class="mdi-av-volume-up"></i></div>
<div id="fullscreen"><i class="mdi-navigation-fullscreen"></i></div>
</div>
</div> </div>
<div id="playlist" class="col s12 m3"> <div id="playlist" class="col s12 m3">
<div id="wrapper"> <div id="wrapper">
@@ -79,7 +85,6 @@
</div> </div>
</div> </div>
</main> </main>
<div id="controls"></div>
<?php include("php/footer.php"); ?> <?php include("php/footer.php"); ?>

2
php/nochan.php
View File

@@ -12,7 +12,7 @@ if(isset($_GET['chan'])){
</head> </head>
<body> <body>
<header> <header>
<nav> <nav id="fp-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-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">

9
static/css/style.css
View File

@@ -52,6 +52,10 @@ nav .brand-logo{
padding-left: 20px; padding-left: 20px;
} }
#fp-nav {
background-color:rgba(45,45,45,1);
}
main { main {
flex: 1 0 auto; flex: 1 0 auto;
} }
@@ -135,6 +139,11 @@ nav{
#playlist{ #playlist{
padding:0px 15px; padding:0px 15px;
} }
#player{
height:95%;
}
.nav-btn .nav-btn
{ {
transition: background-color .2s; transition: background-color .2s;

4
static/js/list.js
View File

@@ -32,10 +32,6 @@ socket.on("skipping", function(obj)
function populate_list(msg) function populate_list(msg)
{ {
console.log(msg); console.log(msg);
for(obj in msg)
{
console.log(msg[obj]);
}
$("#wrapper").empty(); $("#wrapper").empty();

44
static/js/playercontrols.js
View File

@@ -1,5 +1,35 @@
function initYoutubeControls(player) function initControls()
{ {
setInterval(durationSetter, 1000);
}
function durationSetter()
{
if(ytplayer !== undefined && ytplayer.getDuration() !== undefined)
{
duration = ytplayer.getDuration();
dMinutes = Math.floor(duration / 60);
dSeconds = duration - dMinutes * 60;
currDurr = ytplayer.getCurrentTime();
if(currDurr > duration)
currDurr = duration;
minutes = Math.floor(currDurr / 60);
seconds = currDurr - minutes * 60;
document.getElementById("duration").innerHTML = pad(minutes)+":"+pad(seconds)+" <span id='dash'>/</span> "+pad(dMinutes)+":"+pad(dSeconds);
per = (100 / duration) * currDurr;
if(per >= 100)
per = 100;
else if(duration == 0)
per = 0;
$("#bar").width(per+"%");
}
}
function pad(n)
{
return n < 10 ? "0"+Math.floor(n) : Math.floor(n);
}
/*
if(player !== undefined) if(player !== undefined)
{ {
ytplayer = player; ytplayer = player;
@@ -69,7 +99,7 @@ function initControls()
/*for(var i=0; i< classname.length;i++) /*for(var i=0; i< classname.length;i++)
{ {
classname[i].addEventListener("click", changeQuality); classname[i].addEventListener("click", changeQuality);
}*/ }
} }
function fitToScreen() function fitToScreen()
@@ -129,7 +159,7 @@ function setVolume(vol)
//console.log(vol); //NO LOGS FOR U LOL //console.log(vol); //NO LOGS FOR U LOL
if(ytplayer.isMuted()) if(ytplayer.isMuted())
ytplayer.unMute(); ytplayer.unMute();
if(vol == 0){ /*if(vol == 0){
$("#mute").css("background","no-repeat url(static/player.webp) -0px -403px"); $("#mute").css("background","no-repeat url(static/player.webp) -0px -403px");
}else if(vol < 33){ }else if(vol < 33){
$("#mute").css("background","no-repeat url(static/player.webp) -0px -1457px"); $("#mute").css("background","no-repeat url(static/player.webp) -0px -1457px");
@@ -193,7 +223,7 @@ function volumeOptions()
ytplayer.unMute(); ytplayer.unMute();
vol = ytplayer.getVolume(); vol = ytplayer.getVolume();
$("#volume").slider("value", ytplayer.getVolume()); $("#volume").slider("value", ytplayer.getVolume());
if(vol == 0){ /*if(vol == 0){
$("#mute").css("background","no-repeat url(static/player.webp) -0px -93px"); $("#mute").css("background","no-repeat url(static/player.webp) -0px -93px");
}else if(vol < 33){ }else if(vol < 33){
$("#mute").css("background","no-repeat url(static/player.webp) -0px -1395px"); $("#mute").css("background","no-repeat url(static/player.webp) -0px -1395px");
@@ -207,7 +237,7 @@ function volumeOptions()
{ {
ytplayer.mute(); ytplayer.mute();
$("#volume").slider("value", 0); $("#volume").slider("value", 0);
$("#mute").css("background","no-repeat url(static/player.webp) -0px -93px"); //$("#mute").css("background","no-repeat url(static/player.webp) -0px -93px");
} }
} }
@@ -215,7 +245,7 @@ function hoverMute(foo)
{ {
vol = ytplayer.getVolume(); vol = ytplayer.getVolume();
console.log(vol); console.log(vol);
if(foo) /*if(foo)
{ {
if(vol == 0 || ytplayer.isMuted()){ if(vol == 0 || ytplayer.isMuted()){
$("#mute").css("background","no-repeat url(static/player.webp) -0px -93px"); $("#mute").css("background","no-repeat url(static/player.webp) -0px -93px");
@@ -244,4 +274,4 @@ function hoverMute(foo)
function logQ() function logQ()
{ {
console.log(ytplayer.getPlaybackQuality()); console.log(ytplayer.getPlaybackQuality());
} }*/

6
static/js/youtube.js
View File

@@ -128,8 +128,7 @@ function onYouTubeIframeAPIReady() {
events: { events: {
'onReady': onPlayerReady, 'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange, 'onStateChange': onPlayerStateChange,
'onError': errorHandler, 'onError': errorHandler
'onPlaybackQualityChange': logQ
} }
}); });
if(peis) if(peis)
@@ -207,7 +206,8 @@ function onPlayerReady(event) {
ytplayer.seekTo(seekTo); ytplayer.seekTo(seekTo);
} }
readyLooks(); readyLooks();
initSlider(); initControls();
//initSlider();
} }
function readyLooks() function readyLooks()