Added chromecastbutton

index.php

@@ -191,6 +191,10 @@
                   <div id="fullscreen">
                     <i class="mdi-navigation-fullscreen"></i>
                   </div>
+                  <button class="castButton mdi-hardware-cast tooltipped" data-position="top" data-delay="10" data-tooltip="Cast Zöff to TV" is="google-cast-button">
+                  </button>
+                  <button class="castButton-active hide mdi-hardware-cast-connected tooltipped" data-position="top" data-delay="10" data-tooltip="Stop casting" >
+                  </button>
                   <div id="volume-button">
                     <i id="v-mute" class="mdi-av-volume-off"></i>
                     <i id="v-low" class="mdi-av-volume-mute"></i>

php/header.php

@@ -33,7 +33,7 @@
   ga('send', 'pageview');
 
 </script>
-
+<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
 <script type="text/javascript" src="/static/dist/lib/jquery-2.1.3.min.js"></script>
 <script type="text/javascript" src="/static/dist/lib/jquery-ui-1.10.3.min.js"></script>
 <script type="text/javascript" src="/static/dist/lib/materialize.min.js"></script>

static/css/style.css

@@ -1113,6 +1113,18 @@ ul #chat-log{
     /*background-color:rgba(0,0,0,0.2);*/
 }
 
+.castButton, .castButton:active, .castButton:focus, .castButton:hover, .castButton-active, .castButton-active:active, .castButton-active:hover, .castButton-active:focus {
+    width: 0px;
+    height: 0px;
+    float: right;
+    margin: 0px 25px 0px -10px;
+    background: transparent;
+    border: none;
+    background: transparent;
+    border: none;
+    font-size:18px;
+}
+
 .chat-link{
   -webkit-transition:color 1s;
   -moz-transition:color 1s;

static/js/listeners.js

@@ -229,7 +229,39 @@ function init(){
 	$("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height));
 	$("#search").attr("placeholder", "Find song on YouTube...");
 
+    window['__onGCastApiAvailable'] = function(isAvailable) {
+      if (isAvailable) {
+        initializeCastApi();
       }
+    };
+}
+
+initializeCastApi = function() {
+    cast.framework.CastContext.getInstance().setOptions({
+        receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID});
+    var context = cast.framework.CastContext.getInstance();
+    context.addEventListener(
+        cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
+        function(event) {
+            console.log(event);
+            switch (event.sessionState) {
+                case cast.framework.SessionState.SESSION_STARTED:
+                    $(".castButton").toggleClass("hide");
+                    $(".castButton-active").toggleClass("hide");
+                    break;
+                case cast.framework.SessionState.SESSION_RESUMED:
+                    $(".castButton").toggleClass("hide");
+                    $(".castButton-active").toggleClass("hide");
+                    break;
+                case cast.framework.SessionState.SESSION_ENDED:
+                    $(".castButton").toggleClass("hide");
+                    $(".castButton-active").toggleClass("hide");
+                    // Update locally as necessary
+                    break;
+            }
+    })
+    $(".castButton").css("display", "inline-block");
+};
 
 function setup_no_connection_listener(){
     socket.on('connect_failed', function(){
@@ -364,6 +396,13 @@ $(document).keyup(function(e) {
   	}
 });
 
+$(document).on("click", ".castButton-active", function(e){
+    e.preventDefault();
+    var castSession = cast.framework.CastContext.getInstance().getCurrentSession();
+    // End the session and pass 'true' to indicate
+    // that receiver application should be stopped.
+    castSession.endSession(true);
+})
 
 $(document).on('click', '#cookieok', function() {
     $(this).fadeOut(function(){
@@ -931,11 +970,11 @@ function onepage_load(){
 		    	$("main").attr("class", "center-align container");
 		    	$("body").attr("id", "");
 		    	$("body").attr("style", "");
-		      	$("header").html($($(e)[57]).html());
+		      	$("header").html($($(e)[59]).html());
-		      	$($(e)[59]).insertAfter("header");
+		      	$($(e)[61]).insertAfter("header");
-		      	$($(e)[61]).insertAfter(".mega");
+		      	$($(e)[63]).insertAfter(".mega");
-		      	if(Helper.mobilecheck()) $("main").html($($(e)[65]).html());
+		      	if(Helper.mobilecheck()) $("main").html($($(e)[67]).html());
-		      	else $("main").append($($($(e)[65]).html())[0]);
+		      	else $("main").append($($($(e)[67]).html())[0]);
 		      	$(".page-footer").removeClass("padding-bottom-extra");
 		      	$(".page-footer").removeClass("padding-bottom-novideo");
 		      	$("#favicon").attr("href", "static/images/favicon.png");

static/js/nochan.js

@@ -252,11 +252,11 @@ var Nochan = {
         $(".mobile-search").remove();
         $("main").attr("class", "container center-align main");
         $("body").attr("id", "channelpage");
-        $("header").html($($(e)[57]).html());
+        $("header").html($($(e)[59]).html());
         if($("#alreadychannel").length === 0 || Helper.mobilecheck() || Player.player === undefined){
-          $("main").html($($(e)[61]).html());
+          $("main").html($($(e)[63]).html());
         } else {
-          var main = $($($($($(e)[61]).html())[0]).html());
+          var main = $($($($($(e)[65]).html())[0]).html());
           $("#main-row").append($(main[2]).wrap("<div>").parent().html());
           $("#video-container").append($($($(main[0]).html())[4]).wrap("<div>").parent().html());
           $("#main-row").append("<div id='playbar'></div>");
@@ -274,10 +274,6 @@ var Nochan = {
           fromFront = true;
           init();
         }
-        console.log($("#wrw"))
-        $("#wrapper").on("scroll", function(){
-        	console.log("scroll");
-        });
         if($("#alreadyfp").length === 0) $("head").append("<div id='alreadyfp'></div>");
 
       }