diff --git a/index.php b/index.php index eb690903..14bfb7bb 100755 --- a/index.php +++ b/index.php @@ -19,7 +19,6 @@
-
@@ -34,6 +33,7 @@
+
diff --git a/js/playercontrols.js b/js/playercontrols.js new file mode 100644 index 00000000..5c381059 --- /dev/null +++ b/js/playercontrols.js @@ -0,0 +1,166 @@ +function initYoutubeControls(player) +{ + if(player != undefined) + { + ytplayer = player; + initSlider(); + durationFixer = setInterval(durationSetter, 1000); + }else + { + tag = document.createElement('script'); + tag.src = "https://www.youtube.com/iframe_api"; + firstScriptTag = document.getElementsByTagName('script')[0]; + firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); + } + //elems = Array("volume", "duration", "fullscreen", "q"); + elems = Array("volume", "duration", "fullscreen"); + var container = document.getElementById("controls"); + var newElem = document.createElement("div"); + newElem.id = "playpause"; + newElem.className = "play"; + container.appendChild(newElem); + for(x = 0; x < elems.length; x++) + { + var newElem = document.createElement("div"); + newElem.id = elems[x]; + container.appendChild(newElem); + } + /*elems = Array("medium", "large", "hd1080", "auto"); + newElem = document.createElement("div"); + newElem.id = "qS"; + newElem.className = "hide"; + + for(x = 0; x < elems.length; x++) + { + var newChild = document.createElement("div"); + newChild.className = "qChange"; + newChild.name = elems[x]; + newChild.innerHTML = elems[x]; + newElem.appendChild(newChild); + } + container.appendChild(newElem);*/ + initControls() + fitToScreen(); + $(window).resize(function(){ + fitToScreen(); + }); +} + +function initControls() +{ + document.getElementById("playpause").addEventListener("click", playPause); + //document.getElementById("q").addEventListener("click", settings); + document.getElementById("fullscreen").addEventListener("click", function() + { + document.getElementById("player").webkitRequestFullscreen(); + }); + //document.getElementById("controls").style.width= $(window).width()*0.6+"px"; + var classname = document.getElementsByClassName("qChange"); + /*for(var i=0; i< classname.length;i++) + { + classname[i].addEventListener("click", changeQuality); + }*/ +} + +function fitToScreen() +{ + document.getElementById("controls").style.top = document.getElementById("player").offsetTop + $("#player").height() -30 + "px"; + document.getElementById("controls").style.left = document.getElementById("player").offsetLeft + "px"; +} + +function initSlider() +{ + $("#volume").slider({ + min: 0, + max: 100, + value: ytplayer.getVolume(), + range: "min", + animate: true, + slide: function(event, ui) { + setVolume(ui.value); + } + }); +} + +function settings() +{ + $("#qS").toggleClass("hide"); +} + +function changeQuality() +{ + wantedQ = this.getAttribute("name"); + if(ytplayer.getPlaybackQuality != wantedQ) + { + ytplayer.setPlaybackQuality(wantedQ); + } +} + +function setVolume(vol) +{ + ytplayer.setVolume(vol); + console.log(vol); + if(vol == 0){ + console.log("no volume"); + }else if(vol < 33){ + console.log("low-volume"); + }else if(vol > 33 && vol < 66){ + console.log("medium-volume"); + }else if(vol > 66){ + console.log("full-volume"); + } +} + +function playPause() +{ + console.log("playPause"); + state = ytplayer.getPlayerState(); + console.log("state: "+state); + button = document.getElementById("playpause"); + if(state == 1) + { + ytplayer.pauseVideo(); + //button.innerHTML = "Resume"; + }else if(state == 2) + { + ytplayer.playVideo(); + //button.innerHTML = "Pause"; + } +} + +function durationSetter() +{ + duration = ytplayer.getDuration(); + dMinutes = Math.floor(duration / 60); + dSeconds = duration - dMinutes * 60; + currDurr = ytplayer.getCurrentTime(); + minutes = Math.floor(currDurr / 60); + seconds = currDurr - minutes * 60; + document.getElementById("duration").innerHTML = pad(minutes)+":"+pad(seconds)+" / "+pad(dMinutes)+":"+pad(dSeconds); +} + +function pad(n) +{ + return n < 10 ? "0"+Math.floor(n) : Math.floor(n); +} + +function volumeOptions() +{ + console.log("volumeOptions"); + button = document.getElementById("volume"); + if(ytplayer.isMuted()) + { + ytplayer.unMute(); + button.innerHTML = "Mute"; + } + else + { + ytplayer.mute(); + button.innerHTML = "Unmute"; + } +} + +function logQ() +{ + console.log(ytplayer.getPlaybackQuality()); +} diff --git a/js/youtube.js b/js/youtube.js index 9e8b0884..21131c64 100755 --- a/js/youtube.js +++ b/js/youtube.js @@ -96,11 +96,12 @@ function onYouTubeIframeAPIReady() { height: window.height*0.75, width: window.width*0.6, videoId: response, - playerVars: { controls: "1" , iv_load_policy: "3", theme:"light", rel:"0", color:"white" }, + playerVars: { rel:"0", wmode:"transparent", controls: "0" , iv_load_policy: "3", theme:"light", rel:"0", color:"white"}, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange, - 'onError': errorHandler + 'onError': errorHandler, + 'onPlaybackQualityChange': logQ } }); } @@ -142,6 +143,11 @@ function onPlayerStateChange(newState) { wasPaused = true; beginning = false; } + if(newState.data == 1 || newState.data == 2) + { + $("#playpause").toggleClass("play"); + $("#playpause").toggleClass("pause"); + } } function checkEnd() @@ -316,8 +322,11 @@ function onPlayerReady(event) { //ytplayer.addEventListener("onError", "errorHandler"); getTime(); ytplayer.playVideo(); + initYoutubeControls(ytplayer) getTitle(); setBGimage(response); + initSlider(); + durationFixer = setInterval(durationSetter, 1000); } function setBGimage(id){ diff --git a/php/footer.php b/php/footer.php index 2d08052f..f1052630 100755 --- a/php/footer.php +++ b/php/footer.php @@ -2,8 +2,10 @@ © 2014 Nixo & KasperRT + + - \ No newline at end of file + diff --git a/php/header.php b/php/header.php index f1d682c9..11604c89 100755 --- a/php/header.php +++ b/php/header.php @@ -3,4 +3,5 @@ - \ No newline at end of file + +/ \ No newline at end of file diff --git a/static/controlstyle.css b/static/controlstyle.css new file mode 100644 index 00000000..15c3bafd --- /dev/null +++ b/static/controlstyle.css @@ -0,0 +1,161 @@ + +#controls +{ + height:30px; + background-color:rgba(255, 255, 255, 0.40); + position:absolute; + width:54%; +} + +#q, #fullscreen, #playpause +{ + -webkit-filter:brightness(300%); +} + +#q +{ + cursor:pointer; + float:right; + background: no-repeat url(//s.ytimg.com/yts/imgbin/player-lighthh-vflueFmNN.webp) 0 -1023px; + background-size: auto; + width: 30px; + height: 27px; +} + +#qS +{ + display: block; + background-color: white; + position: relative; + float: right; + left: 55px; + /* margin-left: -10px; */ + /* margin-top: -10px; */ + top: -280%; + width:125px; +} + +.qChange +{ + font-family:helvetica; + padding-left:5px; + padding-right:5px; + padding-bottom:3px; + cursor:pointer; + background-color:rgba(0, 0, 0, 0.54); +} + +.qChange:hover +{ + background-color:#ED207F; +} + +#fullscreen +{ + cursor:pointer; + background: no-repeat url(//s.ytimg.com/yts/imgbin/player-lighthh-vflueFmNN.webp) 0 -1054px; + background-size: auto; + width: 30px; + height: 27px; + float:right; +} + +#duration +{ + float:left; + margin-top:9px; + font-family:helvetica; + font-size:12px; +} + +#dash +{ + font-weight:bolder; +} + +#volume { + cursor:pointer; + position: absolute; + left: 200px; + margin: 12px auto; + height:4.5px; + width: 75px; + background-color:grey; + border: none; + outline: none; +} + +#volume .ui-slider-range-min { + height:4.5px; + width: 75px; + position: absolute; + background-color:#ED207F; + border: none; + outline: none; +} + +#volume .ui-slider-handle { + height:15px; + width:5px; + background-color:white; + position: absolute; + cursor: pointer; + outline: none; + border: none; +} + +.ui-slider-handle +{ + margin-top:-5px; +} + +#playpause +{ + cursor:pointer; + float:left; +} + +.play +{ + background: no-repeat url(//s.ytimg.com/yts/imgbin/player-lighthh-vflueFmNN.webp) 0 -496px; + background-size: auto; + width: 55px; + height: 27px; +} + +.pause +{ + background: no-repeat url(//s.ytimg.com/yts/imgbin/player-lighthh-vflueFmNN.webp) 0 -2139px; + background-size: auto; + width: 55px; + height: 27px; +} + +.hide +{ + display:none !important; +} + +.bgimage{ + z-index: -100; +background-size: 180%; +background-repeat: no-repeat; +background-position: center center; +background-color: #000; +background-image: url(bg.jpg); +-webkit-filter: blur(50px) brightness(0.8); +-moz-filter: blur(50px) brightness(0.8); +-ms-filter: blur(50px) brightness(0.8); +-o-filter: blur(50px) brightness(0.8); +filter: blur(50px) brightness(0.8); +position: absolute; +top: 0px; +left: 0; +width: 100%; +height: 100%; +} + +body +{ + background-color:#000; +} \ No newline at end of file diff --git a/static/style.css b/static/style.css index 6f3009b9..14b95596 100755 --- a/static/style.css +++ b/static/style.css @@ -22,7 +22,7 @@ body{background:#000; margin:0; } /*.small:hover{color: #CCC;}*/ .big{font-size:180vh; position:absolute; top:-50%; color:#330A00 !important; z-index:-1; width: 100%; overflow: hidden; display: none;} .footer a{color:rgba(254, 254, 254, 0.42); text-decoration: none;}.footer a:hover {color:#ed207f;} -.footer{font-size: 15px; position: absolute; width:99%;color:rgba(192, 192, 192, 0.42) !important; margin-top: 0px; word-spacing: 2px;} +.footer{font-size: 15px; position: absolute; width:99%;color:rgba(192, 192, 192, 0.42) !important; margin-top: 13px; word-spacing: 2px;} .bottom{bottom:10px;} #channels{width:40%; min-width: 300px; padding-top: 4%; font-size: 25px;} .channel{padding: 7px; display: inline-block; font-weight: bold; color: #C4C4C4 !important;font-size: 18px;} @@ -65,7 +65,7 @@ body{background:#000; margin:0; } #add{font-weight: normal; margin-right: 5%; margin-top: -36px;font-size: 30px;padding: 3px 45px; } #add:hover{color:red;} -#player{height: 68%; height: calc(87% - 183px); width: 60%; border-radius: 3px; box-shadow: 0 8px 11px -4px black;} +#player{height: 68%; height: calc(87% - 213px); width: 60%; border-radius: 3px; box-shadow: 0 8px 11px -4px black;} #playlist{-webkit-transition: opacity 0.5s;transition: opacity 0.5s;} .nomargin{padding: 0;margin:0;} @@ -95,6 +95,7 @@ input[type="radio"]{display: none;} @media (max-width: 1000px) { + #controls{display:none;} body{background-color: #2F2F2F;} .bgimage{display: none;} #player{width: 100%; height:45%; margin-bottom: 20px; box-shadow: none;}