Updated chromecast view, volume now changes volume on chromecast

static/css/style.css

@@ -1149,11 +1149,11 @@ ul #chat-log{
     font-size:18px;
 }
 
-.castButton-active, .castButton-active:active, .castButton-active:hover, .castButton-active:focus{
+/*.castButton-active, .castButton-active:active, .castButton-active:hover, .castButton-active:focus{
   font-size: 5rem;
   margin-top: -70px;
   margin-right: 52%;
-}
+}*/
 
 .chat-link{
   -webkit-transition:color 1s;

static/js/listeners.js

@@ -39,6 +39,7 @@ var access_token_data_youtube = {};
 var youtube_authenticated = false;
 var chromecastAvailable = false;
 var color               = "808080";
+var chromecastReady = false;
 var castSession;
 
 if(localStorage.debug === undefined){
@@ -232,15 +233,17 @@ function init(){
 	$("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color));
 	$("#search").attr("placeholder", "Find song on YouTube...");
 
-
     if(chromecastAvailable){
         hide_native(1);
-    } else {
+    } else if(chromecastReady) {
-        window['__onGCastApiAvailable'] = function(isAvailable) {
-          if (isAvailable) {
         initializeCastApi();
+    } else {
+        window['__onGCastApiAvailable'] = function(loaded, errorInfo) {
+          if (loaded) {
+            initializeCastApi();
+          } else {
+          }
         }
-        };
     }
 }
 
@@ -299,37 +302,33 @@ function hide_native(way){
     $(".castButton").toggleClass("hide");
     $(".castButton-active").toggleClass("hide");
     if(way == 1){
-        $("#playpause").toggleClass("hide");
         $("#duration").toggleClass("hide");
         $("#fullscreen").toggleClass("hide");
-        $("#volume-button").toggleClass("hide");
-        $("#volume").toggleClass("hide");
         try{
             Player.player.stopVideo();
         } catch(e){}
         Player.stopInterval = true;
-        //$("#player").toggleClass("hide");
         $("#player_overlay").removeClass("hide");
-        $("#player_overlay_controls").removeClass("hide");
+        $("#player_overlay").css("display", "block");
-        //$("#player_overlay").css("display", "block");
+        $("#player_overlay").css("background", "url(https://img.youtube.com/vi/" + video_id + "/hqdefault.jpg)");
-        $("#player_overlay").css("height", "100%");
+        $("#player_overlay").css("background-position", "center");
+        $("#player_overlay").css("background-size", "100%");
+        $("#player_overlay").css("background-color", "black");
+        $("#player_overlay").css("background-repeat", "no-repeat");
+        $("#player_overlay").css("height", "calc(100% - 32px)");
+        Player.player.setVolume(100);
+        $("#volume").slider("value", 100);
         $("#player_overlay_text").toggleClass("hide");
-        $("#player_overlay_controls").css("display", "inherit");
     } else if(way == 0){
-        $("#playpause").toggleClass("hide");
         $("#duration").toggleClass("hide");
         $("#fullscreen").toggleClass("hide");
-        $("#volume-button").toggleClass("hide");
-        $("#volume").toggleClass("hide");
         Player.player.playVideo();
         Player.stopInterval = false;
         Player.durationSetter();
-        //$("#player").toggleClass("hide");
+        Player.player.setVolume(Crypt.get_volume());
+        $("#volume").slider("value", Crypt.get_volume());
         $("#player_overlay").addClass("hide");
-        $("#player_overlay_controls").addClass("hide");
-        $("#player_overlay").css("height", "100%");
         $("#player_overlay_text").toggleClass("hide");
-        $("#player_overlay_controls").css("display", "none");
         socket.emit('pos', {channel: chan.toLowerCase()});
     }
 }

static/js/nochan.js

@@ -377,4 +377,12 @@ function initfp(){
       $(".mega").prepend('<div id="snow"></div>');
       //Nochan.start_snowfall();
     }
+
+    window['__onGCastApiAvailable'] = function(loaded, errorInfo) {
+      if (loaded) {
+        chromecastReady = true;
+      } else {
+        console.log(errorInfo);
+      }
+    }
 }

static/js/player.js

@@ -160,8 +160,9 @@ var Player = {
 
     playVideo: function(){
         if(chromecastAvailable){
-            castSession.sendMessage("urn:x-cast:zoff.no", {type: "playVideo"});
+            //castSession.sendMessage("urn:x-cast:zoff.no", {type: "playVideo"});
             //socket.emit('pos', {channel: chan.toLowerCase()});
+            Playercontrols.play_pause();
         } else {
             Player.player.playVideo();
         }
@@ -169,7 +170,8 @@ var Player = {
 
     pauseVideo: function(){
         if(chromecastAvailable){
-            castSession.sendMessage("urn:x-cast:zoff.no", {type: "pauseVideo"});
+            //castSession.sendMessage("urn:x-cast:zoff.no", {type: "pauseVideo"});
+            Playercontrols.play_pause();
         } else {
             Player.player.pauseVideo();
         }
@@ -199,6 +201,14 @@ var Player = {
         }
     },
 
+    setVolume: function(vol){
+      if(chromecastAvailable){
+        castSession.setVolume(vol/100);
+      } else {
+        Player.player.setVolume(vol);
+      }
+    },
+
     sendNext: function(obj){
         if(chromecastAvailable){
             castSession.sendMessage("urn:x-cast:zoff.no", {type: "nextVideo", title: obj.title, videoId: obj.videoId});
@@ -217,6 +227,14 @@ var Player = {
     		elem.innerHTML    = title;
     		getTitleViews.innerHTML = v + " " + outPutWord;
     		elem.title        = title;
+            if(chromecastAvailable){
+                $("#player_overlay").css("background", "url(https://img.youtube.com/vi/" + video_id + "/hqdefault.jpg)");
+                $("#player_overlay").css("background-position", "center");
+                $("#player_overlay").css("background-size", "100%");
+                $("#player_overlay").css("background-color", "black");
+                $("#player_overlay").css("background-repeat", "no-repeat");
+                $("#player_overlay").css("height", "calc(100% - 32px)");
+            }
         }
         document.title    = title + " • Zöff / "+chan;
 

static/js/playercontrols.js

@@ -53,7 +53,7 @@ var Playercontrols = {
 
     play_pause: function()
     {
-
+        if(!chromecastAvailable){
         	if(Player.player.getPlayerState() == 1)
         	{
         		Player.pauseVideo();
@@ -71,10 +71,25 @@ var Playercontrols = {
                     $(".page-footer").toggleClass("padding-bottom-extra");
                 }
         	}
+        } else {
+            Playercontrols.play_pause_show();
+        }
     },
 
     play_pause_show: function()
     {
+        if(chromecastAvailable){
+            if($("#play").hasClass("hide")){
+                castSession.sendMessage("urn:x-cast:zoff.no", {type: "pauseVideo"});
+                $("#play").toggleClass("hide");
+                $("#pause").toggleClass("hide");
+            } else if($("#pause").hasClass("hide")){
+                castSession.sendMessage("urn:x-cast:zoff.no", {type: "playVideo"});
+                $("#play").toggleClass("hide");
+                $("#pause").toggleClass("hide");
+            }
+        } else {
+
             if(document.getElementById("pause").className.split(" ").length == 1){
                 $("#pause").toggleClass("hide");
                 $("#pause-overlay").toggleClass("hide");
@@ -83,6 +98,7 @@ var Playercontrols = {
                 $("#play").toggleClass("hide");
                 $("#play-overlay").toggleClass("hide");
             }
+        }
     },
 
     settings: function()
@@ -117,7 +133,7 @@ var Playercontrols = {
 
     setVolume: function(vol)
     {
-    	Player.player.setVolume(vol);
+    	Player.setVolume(vol);
         Playercontrols.choose_button(vol, false);
     	if(Player.player.isMuted())
     		Player.player.unMute();