CC-3418: Live Stream: Merge current "On-Air" indicator and "Listen"

button with new stream source indicator

- Initial commit

airtime_mvc/application/views/scripts/partialviews/header.phtml

@@ -20,6 +20,14 @@
         <div class="progress-show" id='progress-show' style="width:0%;"></div>
       </div>
     </div>
+  <div class="source-info-block">
+    <ul>
+      <li>Source Streams</li>
+      <li><div id="airtime_connection" class="source-connection off"></div>Airtime<div class="line-to-on-air"></div></li>
+      <li><div id="live_dj_connection" class="source-connection off"></div>Live DJ<div class="line-to-on-air"></div><a href="#" id="live_dj" class="source-switch-button"><span><?php echo $this->live_dj_switch?></span></a><div class="line-to-switch"></div></li>
+      <li><div id="master_dj_connection" class="source-connection off"></div>Master DJ<div class="line-to-on-air"></div><a href="#" id="master_dj" class="source-switch-button"><span><?php echo $this->master_dj_switch?></span></a><div class="line-to-switch"></div></li>
+    </ul>
+  </div>
   <div class="on-air-block">
     <div class="on-air-info off" id="on-air-info">ON AIR</div>
     <a href="#" class="listen-control-button"><span>Listen</span></a>
@@ -31,14 +39,6 @@
       <li class="time-zone"><span id="time-zone"></span></li>
     </ul>
   </div>
-  <div class="source-info-block">
-    <ul>
-      <li>Source Streams</li>
-      <li><div id="airtime_connection" class="source-connection off"></div>Airtime</li>
-      <li><div id="live_dj_connection" class="source-connection off"></div>Live DJ<a href="#" id="live_dj" class="source-switch-button"><span><?php echo $this->live_dj_switch?></span></a></li>
-      <li><div id="master_dj_connection" class="source-connection off"></div>Master DJ<a href="#" id="master_dj" class="source-switch-button"><span><?php echo $this->master_dj_switch?></span></a></li>
-    </ul>
-  </div>
   <div class="personal-block">
     <ul>
       <li><span class="name"><?php echo $this->user ?></span> | <a href="/Login/logout">Logout</a></li>

airtime_mvc/public/css/styles.css

@@ -291,7 +291,6 @@ select {
 
 .source-info-block {
     padding:0 14px 0 2px;
-    background:url(images/masterpanel_spacer.png) no-repeat right 0;
     min-width:150px;
 }
 
@@ -433,6 +432,24 @@ select {
     float: left;
 }
 
+.line-to-switch {
+	float: right;
+	width: 10px;
+	height:6px;
+    border:1px solid #242424;
+    border-width:1px 1px 0 1px;
+	background:#FFFFFF
+}
+
+.line-to-on-air {
+    float: right;
+    height:6px;
+    border:1px solid #242424;
+    border-width:1px 1px 0 1px;
+    width: 10px;
+    background:#FFFFFF
+}
+
 /* END Master Panel */
 
 

airtime_mvc/public/js/airtime/dashboard/playlist.js

@@ -13,6 +13,10 @@ var currentElem;
 var serverUpdateInterval = 5000;
 var uiUpdateInterval = 200;
 
+var master_dj_on_air = false;
+var live_dj_on_air = false;
+var airtime_on_air = false;
+
 //var timezoneOffset = 0;
 
 //set to "development" if we are developing :). Useful to disable alerts
@@ -31,6 +35,8 @@ function secondsTimer(){
         estimatedSchedulePosixTime = date.getTime() - localRemoteTimeOffset;
         updateProgressBarValue();
         updatePlaybar();
+        controlOnAirLight();
+        controlSwitchLight();
     }
     setTimeout(secondsTimer, uiUpdateInterval);
 }
@@ -74,13 +80,16 @@ function updateProgressBarValue(){
             songPercentDone = 0;        
             currentSong = null;
         } else {
+            var airtime_connection = $("#airtime_connection") 
             if (currentSong.media_item_played == "t" && currentShow.length > 0){
-                $('#on-air-info').attr("class", "on-air-info on");
+                //$('#on-air-info').attr("class", "on-air-info on");
-                $("#airtime_connection").attr("class", "source-connection on");
+                airtime_connection.attr("class", "source-connection on");
+                airtime_on_air = true;
             }
             else{
-                $('#on-air-info').attr("class", "on-air-info off");
+                //$('#on-air-info').attr("class", "on-air-info off");
-                $("#airtime_connection").attr("class", "source-connection off");
+                airtime_on_air = false;
+                airtime_connection.attr("class", "source-connection off");
             }
             $('#progress-show').attr("class", "progress-show");
         }
@@ -223,25 +232,96 @@ function parseItems(obj){
     localRemoteTimeOffset = date.getTime() - schedulePosixTime;
 }
 
+function changeLineToWhite(div){
+    div.css("background", "#FFFFFF")
+}
+
+function changeLineToRed(div){
+    div.css("background", "#D40000")
+}
+
+function ColorOnSourceConnection(div){
+    div.attr("class", "source-connection on");
+    changeLineToRed(div.parent().find(".line-to-switch"))
+}
+
+function ColorOnSourceDisconnection(div){
+    div.attr("class", "source-connection off");
+    changeLineToWhite(div.parent().find(".line-to-switch"))
+}
+
 function parseSourceStatus(obj){
+    var live_div = $("#live_dj_connection")
+    var master_div = $("#master_dj_connection")
+    
     if(obj.live_dj_source == false){
-        $("#live_dj_connection").attr("class", "source-connection off");
+        ColorOnSourceDisconnection(live_div)
     }else{
-        $("#live_dj_connection").attr("class", "source-connection on");
+        ColorOnSourceConnection(live_div)
     }
     
     if(obj.master_dj_source == false){
-        $("#master_dj_connection").attr("class", "source-connection off");
+        ColorOnSourceDisconnection(master_div)
     }else{
-        $("#master_dj_connection").attr("class", "source-connection on");
+        ColorOnSourceConnection(master_div)
     }
 }
 
 function parseSwitchStatus(obj){
+    var live_div = $("#live_dj_connection")
+    var master_div = $("#master_dj_connection")
+    
+    if(obj.live_dj_source == "on" && obj.master_dj_source == "off"){
+        //changeLineToRed(live_div.parent().find(".line-to-on-air"))
+        live_dj_on_air = true;
+    }else{
+        //changeLineToWhite(live_div.parent().find(".line-to-on-air"))
+        live_dj_on_air = false;
+    }
+    
+    if(obj.master_dj_source == "on"){
+        //changeLineToRed(master_div.parent().find(".line-to-on-air"))
+        master_dj_on_air = true;
+    }else{
+        master_dj_on_air = false;
+        //changeLineToWhite(master_div.parent().find(".line-to-on-air"))
+    }
     $("#live_dj.source-switch-button").find("span").html(obj.live_dj_source)
     $("#master_dj.source-switch-button").find("span").html(obj.master_dj_source)
 }
 
+function controlOnAirLight(){
+    if(airtime_on_air || live_dj_on_air || master_dj_on_air){
+        $('#on-air-info').attr("class", "on-air-info on");
+    }else{
+        $('#on-air-info').attr("class", "on-air-info off");
+    }
+}
+
+function controlSwitchLight(){
+    var live_div = $("#live_dj_connection")
+    var master_div = $("#master_dj_connection")
+    var airtime_div = $("#airtime_connection")
+    
+    if(airtime_on_air && !live_dj_on_air && !master_dj_on_air){
+        changeLineToRed(airtime_div.parent().find(".line-to-on-air"))
+        changeLineToWhite(live_div.parent().find(".line-to-on-air"))
+        changeLineToWhite(master_div.parent().find(".line-to-on-air"))
+    }else if(live_dj_on_air && !master_dj_on_air){
+        changeLineToWhite(airtime_div.parent().find(".line-to-on-air"))
+        changeLineToRed(live_div.parent().find(".line-to-on-air"))
+        changeLineToWhite(master_div.parent().find(".line-to-on-air"))
+    }else if(master_dj_on_air){
+        changeLineToWhite(airtime_div.parent().find(".line-to-on-air"))
+        changeLineToWhite(live_div.parent().find(".line-to-on-air"))
+        changeLineToRed(master_div.parent().find(".line-to-on-air"))
+    }else{
+        changeLineToWhite(airtime_div.parent().find(".line-to-on-air"))
+        changeLineToWhite(live_div.parent().find(".line-to-on-air"))
+        changeLineToWhite(master_div.parent().find(".line-to-on-air"))
+    }
+}
+
 function getScheduleFromServer(){
     $.ajax({ url: "/Schedule/get-current-playlist/format/json", dataType:"json", success:function(data){
                 parseItems(data.entries);