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

Added fading and hopefully a better userexperience

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2015-02-12 23:20:46 +01:00
parent f85c6bbfe0
commit e109ed3f0b
3 changed files with 24 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
js/youtube.js
View File

@@ -61,7 +61,7 @@ $(document).ready(function()
response = "1"; response = "1";
} }
/*
$.ajax({ $.ajax({
type: 'get', type: 'get',
url: 'php/timedifference.php', url: 'php/timedifference.php',
@@ -72,7 +72,7 @@ $(document).ready(function()
} }
}); });
console.log("timediff:"+timeDifference[0]); console.log("timediff:"+timeDifference[0]);
*/
if(window.mobilecheck()){ if(window.mobilecheck()){
//syncInterval = setInterval(getTime, 50000); //syncInterval = setInterval(getTime, 50000);
@@ -94,6 +94,7 @@ $(document).ready(function()
}); });
function onYouTubeIframeAPIReady() { function onYouTubeIframeAPIReady() {
$("#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,
@@ -106,6 +107,8 @@ function onYouTubeIframeAPIReady() {
'onPlaybackQualityChange': logQ 'onPlaybackQualityChange': logQ
} }
}); });
$("#player").css("opacity", "0");
initYoutubeControls(ytplayer);
} }
function onPlayerStateChange(newState) { function onPlayerStateChange(newState) {
@@ -347,9 +350,11 @@ function onPlayerReady(event) {
getTime(); getTime();
if(!window.mobilecheck()) if(!window.mobilecheck())
{ {
$("#player").css("opacity", "1");
$("#controls").css("opacity", "1");
//$("#player").fadeIn();
ytplayer.playVideo(); ytplayer.playVideo();
} }
initYoutubeControls(ytplayer);
readyLooks(); readyLooks();
initSlider(); initSlider();
//durationFixer = setInterval(durationSetter, 1000); //durationFixer = setInterval(durationSetter, 1000);

3
static/controlstyle.css
View File

@@ -1,6 +1,7 @@
#controls #controls
{ {
opacity:0;
height:30px; height:30px;
background-color:rgba(255, 255, 255, 0.25); background-color:rgba(255, 255, 255, 0.25);
position:absolute; position:absolute;
@@ -11,6 +12,8 @@
-ms-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0); transform: translate3d(0,0,0);
-webkit-transition:opacity 1s;
transition: opacity 1s;
} }
#q, #fullscreen, #playpause #q, #fullscreen, #playpause

13
static/style.css
View File

@@ -35,6 +35,11 @@ body {
-webkit-transform:translateY(-54%) -webkit-transform:translateY(-54%)
} }
#change {
opacity:0;
-webkit-transition: opacity 1s;
}
/*#change{ display: table-cell; vertical-align: middle;}*/ /*#change{ display: table-cell; vertical-align: middle;}*/
::-webkit-input-placeholder { ::-webkit-input-placeholder {
color:#FEFEFE color:#FEFEFE
@@ -369,6 +374,8 @@ body {
} }
#player { #player {
-webkit-transition: opacity 1s;
transition: opacity 1s;
height:68%; height:68%;
height:calc(87% - 213px); height:calc(87% - 213px);
width:60%; width:60%;
@@ -376,6 +383,10 @@ body {
/*box-shadow: 0 8px 11px -4px black;*/ /*box-shadow: 0 8px 11px -4px black;*/
} }
iframe {
-webkit-transition:opacity 1s;
}
#playlist { #playlist {
-webkit-transition:height .5s; -webkit-transition:height .5s;
transition:height .5s transition:height .5s
@@ -656,7 +667,7 @@ body {
#toptitle { #toptitle {
color:#fff; color:#fff;
font-weight:700; font-weight:700;
text-shadow:0 0 12px rgba(0,0,0,0.5) text-shadow:0 0 12px rgba(0,0,0,0.5);
} }
#mobile-banner { #mobile-banner {