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#">
<head>
<?php include("php/header.php"); ?>
<link rel="stylesheet" type="text/css" href="static/css/controlstyle.css" />
</head>
<body>
<header>
@@ -52,11 +53,16 @@
</nav>
</div>
</header>
<main class="container center-align main">
<div class="row">
<div class="col s12 m9 video-container">
<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 id="playlist" class="col s12 m3">
<div id="wrapper">
@@ -79,7 +85,6 @@
</div>
</div>
</main>
<div id="controls"></div>
<?php include("php/footer.php"); ?>

2
php/nochan.php
View File

@@ -12,7 +12,7 @@ if(isset($_GET['chan'])){
</head>
<body>
<header>
<nav>
<nav id="fp-nav">
<div class="nav-wrapper">
<a href="#" class="brand-logo hide-on-small-only">
<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;
}
#fp-nav {
background-color:rgba(45,45,45,1);
}
main {
flex: 1 0 auto;
}
@@ -135,6 +139,11 @@ nav{
#playlist{
padding:0px 15px;
}
#player{
height:95%;
}
.nav-btn
{
transition: background-color .2s;

4
static/js/list.js
View File

@@ -32,10 +32,6 @@ socket.on("skipping", function(obj)
function populate_list(msg)
{
console.log(msg);
for(obj in msg)
{
console.log(msg[obj]);
}
$("#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)
{
ytplayer = player;
@@ -69,7 +99,7 @@ function initControls()
/*for(var i=0; i< classname.length;i++)
{
classname[i].addEventListener("click", changeQuality);
}*/
}
}
function fitToScreen()
@@ -129,7 +159,7 @@ function setVolume(vol)
//console.log(vol); //NO LOGS FOR U LOL
if(ytplayer.isMuted())
ytplayer.unMute();
if(vol == 0){
/*if(vol == 0){
$("#mute").css("background","no-repeat url(static/player.webp) -0px -403px");
}else if(vol < 33){
$("#mute").css("background","no-repeat url(static/player.webp) -0px -1457px");
@@ -193,7 +223,7 @@ function volumeOptions()
ytplayer.unMute();
vol = ytplayer.getVolume();
$("#volume").slider("value", ytplayer.getVolume());
if(vol == 0){
/*if(vol == 0){
$("#mute").css("background","no-repeat url(static/player.webp) -0px -93px");
}else if(vol < 33){
$("#mute").css("background","no-repeat url(static/player.webp) -0px -1395px");
@@ -207,7 +237,7 @@ function volumeOptions()
{
ytplayer.mute();
$("#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();
console.log(vol);
if(foo)
/*if(foo)
{
if(vol == 0 || ytplayer.isMuted()){
$("#mute").css("background","no-repeat url(static/player.webp) -0px -93px");
@@ -244,4 +274,4 @@ function hoverMute(foo)
function logQ()
{
console.log(ytplayer.getPlaybackQuality());
}
}*/

6
static/js/youtube.js
View File

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