Adding tap-target for chromecast-button when first time seeing the chromecast available icon

server/public/assets/css/style.css

@@ -1472,7 +1472,7 @@ ul #chat-log{
     color: white;
     border: none;
     font-size:18px;
-    padding-right: 1%;
+    /*padding-right: 1%;*/
 }
 
 .castButton-unactive i, .castButton-active i{
@@ -1725,6 +1725,15 @@ nav ul li:hover, nav ul li.active {
   width: 10%;
 }
 
+.tap-target {
+  color:white;
+  background-color: #2d2d2d;
+}
+
+.tap-target-wave::before, .tap-target-wave::after {
+  background-color:grey;
+}
+
 .playlist-element .list-remove a {
   color: white !important;
   margin-right: 0px !important;

server/public/assets/js/listeners.js

@@ -61,6 +61,7 @@ var found_array 				= [];
 var found_array_index 			= 0;
 var castSession;
 var width_timeout;
+var tap_target_timeout;
 
 if(localStorage.debug === undefined){
 	var debug = false;
@@ -437,6 +438,14 @@ initializeCastApi = function() {
 
 	if(cast_ready_connect){
 		$(".castButton-unactive").css("display", "block");
+		if(!localStorage.getItem("_chSeen")) {
+			$(".castButton-unactive").css("display", "block");
+			$('.tap-target').tapTarget('open');
+			localStorage.setItem("_chSeen", false);
+			tap_target_timeout = setTimeout(function() {
+				$('.tap-target').tapTarget('close');
+			}, 4000);
+		}
 	}
 
 	var cast_state = cast.framework.CastContext.getInstance();
@@ -1703,7 +1712,8 @@ function onepage_load(){
 		$('#chan_thumbnail').tooltip("remove");
 		$('#admin-lock').tooltip("remove");
 		$("#seekToDuration").remove();
-
+		$('.tap-target').tapTarget('close');
+		clearTimeout(tap_target_timeout);
 		$.ajax({
 			url: "/",
 			success: function(e){

server/public/layouts/channel.handlebars

@@ -186,7 +186,7 @@
                   <div id="fullscreen" class="hide-on-small-only">
                     <i class="material-icons">fullscreen</i>
                   </div>
-                  <button class="castButton-unactive tooltipped" style="display:none;">
+                  <button class="castButton-unactive tooltipped" id="google-cast-button" style="display:none;">
                     <i class="material-icons">cast</i>
                   </button>
                   <button class="castButton" is="google-cast-button">
@@ -294,3 +294,10 @@
         </div>
     </main>
 </div>
+
+<div class="tap-target" data-activates="google-cast-button">
+    <div class="tap-target-content">
+      <h5>Chromecast</h5>
+      <p>This site supports chromecasting!</p>
+    </div>
+  </div>