move web client chromecast along a little further

dashboard-ui/scripts/chromecast.js

@@ -44,11 +44,6 @@
         // @type {PLAYER_STATE} A state for Cast media player
         this.castPlayerState = PLAYER_STATE.IDLE;
 
-        /* Local player variables */
-        // @type {PLAYER_STATE} A state for local media player
-        this.localPlayerState = PLAYER_STATE.IDLE;
-        // @type {HTMLElement} local player
-        this.localPlayer = null;
         // @type {Boolean} Fullscreen mode on/off
         this.fullscreen = false;
 
@@ -76,13 +71,6 @@
         this.initializeCastPlayer();
     };
 
-    /**
-     * Initialize local media player 
-     */
-    CastPlayer.prototype.initializeLocalPlayer = function () {
-        this.localPlayer = document.getElementById('itemVideo');
-    };
-
     /**
      * Initialize Cast media player 
      * Initializes the API. Note that either successCallback and errorCallback will be
@@ -119,7 +107,6 @@
      */
     CastPlayer.prototype.onInitSuccess = function () {
         console.log("init success");
-        this.updateMediaControlUI();
     };
 
     /**
@@ -140,10 +127,11 @@
         this.session = e;
         if (this.session) {
             this.deviceState = DEVICE_STATE.ACTIVE;
-            this.updateMediaControlUI();
+            
             if (this.session.media[0]) {
                 this.onMediaDiscovered('activeSession', this.session.media[0]);
             }
+            
             this.session.addUpdateListener(this.sessionUpdateListener.bind(this));
         }
     };
@@ -160,7 +148,6 @@
         if (e === 'available') {
             console.log("chromecast receiver found");
             this.hasReceivers = true;
-            this.updateMediaControlUI();
         }
         else {
             console.log("chromecast receiver list empty");
@@ -178,12 +165,8 @@
             this.castPlayerState = PLAYER_STATE.IDLE;
             this.currentMediaSession = null;
             clearInterval(this.timer);
-            this.updateDisplayMessage();
 
-            //// continue to play media locally
+            MediaController.removeActivePlayer('Chromecast');
-            //console.log("current time: " + this.currentMediaTime);
-            //this.playMediaLocally(this.currentMediaTime);
-            this.updateMediaControlUI();
         }
     };
 
@@ -208,7 +191,6 @@
         console.log("session success: " + e.sessionId);
         this.session = e;
         this.deviceState = DEVICE_STATE.ACTIVE;
-        this.updateMediaControlUI();
         this.session.addUpdateListener(this.sessionUpdateListener.bind(this));
     };
 
@@ -224,6 +206,8 @@
             message: "There was an error launching chromecast. Please ensure your device is connected to your wifi network."
 
         });
+
+        MediaController.removeActivePlayer('Chromecast');
     };
 
     /**
@@ -244,12 +228,10 @@
         this.castPlayerState = PLAYER_STATE.IDLE;
         this.currentMediaSession = null;
         clearInterval(this.timer);
-        this.updateDisplayMessage();
 
         //// continue to play media locally
         //console.log("current time: " + this.currentMediaTime);
         //this.playMediaLocally(this.currentMediaTime);
-        this.updateMediaControlUI();
     };
 
     /**
@@ -365,9 +347,6 @@
     CastPlayer.prototype.onLoadMediaError = function (e) {
         console.log("media error");
         this.castPlayerState = PLAYER_STATE.IDLE;
-        // update UIs
-        this.updateMediaControlUI();
-        this.updateDisplayMessage();
     };
 
     /**
@@ -380,9 +359,7 @@
             this.castPlayerState = PLAYER_STATE.IDLE;
         }
         console.log("updating media");
-        this.updateProgressBar(e);
+        //this.updateProgressBar(e);
-        this.updateDisplayMessage();
-        this.updateMediaControlUI();
     };
 
     /**
@@ -390,7 +367,7 @@
      * Increment media current position by 1 second 
      */
     CastPlayer.prototype.incrementMediaTime = function () {
-        if (this.castPlayerState == PLAYER_STATE.PLAYING || this.localPlayerState == PLAYER_STATE.PLAYING) {
+        if (this.castPlayerState == PLAYER_STATE.PLAYING) {
             if (this.currentMediaTime < this.currentMediaDuration) {
                 this.currentMediaTime += 1;
                 this.updateProgressBarByTimer();
@@ -408,7 +385,6 @@
     CastPlayer.prototype.playMedia = function () {
         
         if (!this.currentMediaSession) {
-            this.playMediaLocally(0);
             return;
         }
 
@@ -433,8 +409,6 @@
             default:
                 break;
         }
-        this.updateMediaControlUI();
-        this.updateDisplayMessage();
     };
 
     /**
@@ -443,7 +417,6 @@
     CastPlayer.prototype.pauseMedia = function () {
         
         if (!this.currentMediaSession) {
-            this.pauseMediaLocally();
             return;
         }
 
@@ -452,30 +425,16 @@
             this.currentMediaSession.pause(null,
               this.mediaCommandSuccessCallback.bind(this, "paused " + this.currentMediaSession.sessionId),
               this.onError.bind(this));
-            this.updateMediaControlUI();
-            this.updateDisplayMessage();
             clearInterval(this.timer);
         }
     };
 
     /**
-     * Pause media playback in local player 
+     * Stop CC playback 
-     */
-    CastPlayer.prototype.pauseMediaLocally = function () {
-        
-        this.localPlayer.pause();
-        this.localPlayerState = PLAYER_STATE.PAUSED;
-        this.updateMediaControlUI();
-        clearInterval(this.timer);
-    };
-
-    /**
-     * Stop meia playback in either Cast or local mode  
      */
     CastPlayer.prototype.stopMedia = function () {
         
         if (!this.currentMediaSession) {
-            this.stopMediaLocally();
             return;
         }
 
@@ -484,22 +443,6 @@
           this.onError.bind(this));
         this.castPlayerState = PLAYER_STATE.STOPPED;
         clearInterval(this.timer);
-
-        this.updateDisplayMessage();
-        this.updateMediaControlUI();
-    };
-
-    /**
-     * Stop media playback in local player
-     */
-    CastPlayer.prototype.stopMediaLocally = function () {
-
-        var vi = document.getElementById('video_image');
-        vi.style.display = 'block';
-        this.localPlayer.style.display = 'none';
-        this.localPlayer.stop();
-        this.localPlayerState = PLAYER_STATE.STOPPED;
-        this.updateMediaControlUI();
     };
 
     /**
@@ -507,38 +450,13 @@
      * @param {Boolean} mute A boolean  
      */
     CastPlayer.prototype.setReceiverVolume = function (mute) {
-        var p = document.getElementById("audio_bg_level");
+        
-        if (event.currentTarget.id == 'audio_bg_track') {
-            var pos = 100 - parseInt(event.offsetY);
-        }
-        else {
-            var pos = parseInt(p.clientHeight) - parseInt(event.offsetY);
-        }
         if (!this.currentMediaSession) {
-            this.localPlayer.volume = pos < 100 ? pos / 100 : 1;
-            p.style.height = pos + 'px';
-            p.style.marginTop = -pos + 'px';
             return;
         }
 
-        if (event.currentTarget.id == 'audio_bg_track' || event.currentTarget.id == 'audio_bg_level') {
-            // add a drag to avoid loud volume
-            if (pos < 100) {
-                var vScale = this.currentVolume * 100;
-                if (pos > vScale) {
-                    pos = vScale + (pos - vScale) / 2;
-                }
-                p.style.height = pos + 'px';
-                p.style.marginTop = -pos + 'px';
-                this.currentVolume = pos / 100;
-            }
-            else {
-                this.currentVolume = 1;
-            }
-        }
-
         if (!mute) {
-            this.session.setReceiverVolumeLevel(this.currentVolume,
+            this.session.setReceiverVolumeLevel(1,
               this.mediaCommandSuccessCallback.bind(this),
               this.onError.bind(this));
         }
@@ -547,36 +465,34 @@
               this.mediaCommandSuccessCallback.bind(this),
               this.onError.bind(this));
         }
-        this.updateMediaControlUI();
     };
 
     /**
-     * Mute media function in either Cast or local mode 
+     * Toggle mute CC
      */
-    CastPlayer.prototype.muteMedia = function () {
+    CastPlayer.prototype.toggleMute = function () {
         if (this.audio == true) {
-            this.audio = false;
+            this.mute();
-            document.getElementById('audio_on').style.display = 'none';
-            document.getElementById('audio_off').style.display = 'block';
-            if (this.currentMediaSession) {
-                this.setReceiverVolume(true);
-            }
-            else {
-                this.localPlayer.muted = true;
-            }
         }
         else {
-            this.audio = true;
+            this.unMute();
-            document.getElementById('audio_on').style.display = 'block';
-            document.getElementById('audio_off').style.display = 'none';
-            if (this.currentMediaSession) {
-                this.setReceiverVolume(false);
-            }
-            else {
-                this.localPlayer.muted = false;
-            }
         }
-        this.updateMediaControlUI();
+    };
+
+    /**
+     * Mute CC
+     */
+    CastPlayer.prototype.mute = function () {
+        this.audio = false;
+        this.setReceiverVolume(true);
+    };
+
+    /**
+     * Unmute CC
+     */
+    CastPlayer.prototype.unMute = function () {
+        this.audio = true;
+        this.setReceiverVolume(false);
     };
 
 
@@ -624,9 +540,6 @@
           this.onSeekSuccess.bind(this, 'media seek done'),
           this.onError.bind(this));
         this.castPlayerState = PLAYER_STATE.SEEKING;
-
-        this.updateDisplayMessage();
-        this.updateMediaControlUI();
     };
 
     /**
@@ -636,8 +549,6 @@
     CastPlayer.prototype.onSeekSuccess = function (info) {
         console.log(info);
         this.castPlayerState = PLAYER_STATE.PLAYING;
-        this.updateDisplayMessage();
-        this.updateMediaControlUI();
     };
 
     /**
@@ -659,7 +570,6 @@
             pi.style.marginLeft = -21 - PROGRESS_BAR_WIDTH + 'px';
             clearInterval(this.timer);
             this.castPlayerState = PLAYER_STATE.STOPPED;
-            this.updateDisplayMessage();
         }
         else {
             p.style.width = Math.ceil(PROGRESS_BAR_WIDTH * e.currentTime / this.currentMediaSession.media.duration + 1) + 'px';
@@ -701,60 +611,6 @@
             clearInterval(this.timer);
             this.deviceState = DEVICE_STATE.IDLE;
             this.castPlayerState = PLAYER_STATE.IDLE;
-            this.updateDisplayMessage();
-            this.updateMediaControlUI();
-        }
-    };
-
-    /**
-     * Update display message depending on cast mode by deviceState 
-     */
-    CastPlayer.prototype.updateDisplayMessage = function () {
-
-        if (this.deviceState != DEVICE_STATE.ACTIVE || this.castPlayerState == PLAYER_STATE.IDLE || this.castPlayerState == PLAYER_STATE.STOPPED) {
-
-        } else {
-        }
-
-        // this.session.receiver.friendlyName
-    };
-
-    /**
-     * Update media control UI components based on localPlayerState or castPlayerState
-     */
-    CastPlayer.prototype.updateMediaControlUI = function () {
-
-        if (!chrome || !chrome.cast) {
-            return;
-        }
-        
-
-        if (this.hasReceivers) {
-            document.getElementById("video-ccastButton").removeAttribute("style");
-            this.initializeLocalPlayer();
-        }
-
-        if (this.deviceState == DEVICE_STATE.ACTIVE) {
-            var playerState = this.castPlayerState;
-        } else {
-            var playerState = this.localPlayerState;
-        }
-
-        switch (playerState) {
-            case PLAYER_STATE.LOADED:
-            case PLAYER_STATE.PLAYING:
-                //document.getElementById("play").style.display = 'none';
-                //document.getElementById("pause").style.display = 'block';
-                break;
-            case PLAYER_STATE.PAUSED:
-            case PLAYER_STATE.IDLE:
-            case PLAYER_STATE.LOADING:
-            case PLAYER_STATE.STOPPED:
-                //document.getElementById("play").style.display = 'block';
-                //document.getElementById("pause").style.display = 'none';
-                break;
-            default:
-                break;
         }
     };
 
@@ -762,6 +618,80 @@
 
     window.CastPlayer = castPlayer;
     
+    function chromecastPlayer() {
+
+        var self = this;
+
+        self.name = 'Chromecast';
+
+        self.play = function (options) {
+
+        };
+
+        self.shuffle = function (id) {
+
+        };
+
+        self.instantMix = function (id) {
+
+        };
+
+        self.queue = function (options) {
+
+        };
+
+        self.queueNext = function (options) {
+
+        };
+
+        self.stop = function () {
+            CastPlayer.stop();
+        };
+
+        self.canQueueMediaType = function (mediaType) {
+
+            return false;
+        };
+
+        self.mute = function() {
+            CastPlayer.mute();
+        };
+
+        self.unMute = function () {
+            CastPlayer.unMute();
+        };
+
+        self.toggleMute = function () {
+            CastPlayer.toggleMute();
+        };
+
+        self.getTargets = function () {
+
+            var targets = [];
+
+            var appName = null;
+            
+            //if (CastPlayer.session && CastPlayer.session.receiver && CastPlayer.session.friendlyName) {
+            //    appName = CastPlayer.session.friendlyName;
+            //}
+
+            //if (true) {
+            //    targets.push({
+            //        name: "Chromecast",
+            //        id: "Chromecast",
+            //        playerName: self.name,
+            //        playableMediaTypes: ["Audio", "Video"],
+            //        isLocalPlayer: false,
+            //        appName: appName
+            //    });
+            //}
+
+            return targets;
+        };
+    }
+
+    MediaController.registerPlayer(new chromecastPlayer());
+
     $(document).on('headercreated', ".libraryPage", function () {
 
         var page = this;
@@ -770,4 +700,11 @@
 
     });
 
+    $(MediaController).on('playerchange', function () {
+
+        if (MediaController.getPlayerInfo().name == 'Chromecast') {
+            window.CastPlayer.launchApp();
+        }
+    });
+
 })(window, window.chrome, console);

dashboard-ui/scripts/mediacontroller.js

@@ -37,16 +37,24 @@
                 throw new Error('null player');
             }
 
-            if (!targetInfo) {
-                throw new Error('null targetInfo');
-            }
-
             currentPlayer = player;
-            currentTargetInfo = targetInfo;
+            currentTargetInfo = targetInfo || player.getCurrentTargetInfo();
 
             $(self).trigger('playerchange');
         };
 
+        self.setLocalPlayerActive = function() {
+            self.setActivePlayer(self.getLocalPlayer());
+        };
+
+        self.removeActivePlayer = function (name) {
+            
+            if (self.getPlayerInfo().name == name) {
+                self.setLocalPlayerActive();
+            }
+
+        };
+
         self.getTargets = function () {
 
             var deferred = $.Deferred();
@@ -70,6 +78,17 @@
 
                 }
 
+                targets = targets.sort(function(a,b) {
+
+                    var aVal = a.isLocalPlayer ? 0 : 1;
+                    var bVal = b.isLocalPlayer ? 0 : 1;
+
+                    aVal = aVal.toString() + a.name;
+                    bVal = bVal.toString() + b.name;
+
+                    return aVal.localeCompare(bVal);
+                });
+
                 deferred.resolveWith(null, [targets]);
             });
 
@@ -201,7 +220,7 @@
                 localPlayer.mute();
             }
             else if (cmd.Name === 'Unmute') {
-                localPlayer.unmute();
+                localPlayer.unMute();
             }
             else if (cmd.Name === 'VolumeUp') {
                 localPlayer.volumeUp();

dashboard-ui/scripts/mediaplayer.js

@@ -32,7 +32,8 @@
                 name: 'My Browser',
                 id: ApiClient.deviceId(),
                 playerName: self.name,
-                playableMediaTypes: ['Audio', 'Video']
+                playableMediaTypes: ['Audio', 'Video'],
+                isLocalPlayer: true
             }];
 
             return targets;
@@ -1159,12 +1160,16 @@
         };
 
         var getItemFields = "MediaSources,Chapters";
+
+        self.getCurrentTargetInfo = function() {
+            return self.getTargets()[0];
+        };
     }
 
     window.MediaPlayer = new mediaPlayer();
 
     window.MediaController.registerPlayer(window.MediaPlayer);
-    window.MediaController.setActivePlayer(window.MediaPlayer, window.MediaPlayer.getTargets()[0]);
+    window.MediaController.setActivePlayer(window.MediaPlayer);
 
 
 })(document, setTimeout, clearTimeout, screen, localStorage, $, setInterval, window);

dashboard-ui/scripts/pluginupdatespage.js

@@ -34,8 +34,8 @@
         var fieldId = "liPluginUpdateFielda" + fieldIndex;
 
         var enabledOptions = [
-            Globalize.translate('OptionOff'),
+            { name: Globalize.translate('OptionOff'), value: 'Off' },
-            Globalize.translate('OptionOn')
+            { name: Globalize.translate('OptionOn'), value: 'On' }
         ];
         var options = PluginUpdatesPage.getHtmlOptions(enabledOptions, (plugin.EnableAutoUpdate ? "On" : "Off"));
 
@@ -46,9 +46,9 @@
         fieldId = "liPluginUpdateFieldb" + fieldIndex;
 
         var updateOptions = [
-            Globalize.translate('OptionRelease'),
+            { name: Globalize.translate('OptionRelease'), value: 'Release' },
-            Globalize.translate('OptionBeta'),
+            { name: Globalize.translate('OptionBeta'), value: 'Beta' },
-            Globalize.translate('OptionDev')
+            { name: Globalize.translate('OptionDev'), value: 'Dev' }
         ];
         options = PluginUpdatesPage.getHtmlOptions(updateOptions, plugin.UpdateClass);
 
@@ -61,18 +61,20 @@
         elem.append(html).trigger('create');
     },
 
-    getHtmlOptions: function (names, selectedValue) {
+    getHtmlOptions: function (options, selectedValue) {
 
         var html = "";
 
-        for (var i = 0, length = names.length; i < length; i++) {
+        for (var i = 0, length = options.length; i < length; i++) {
 
-            var name = names[i];
+            var option = options[i];
+            var name = option.name;
+            var value = option.value;
 
-            if (name == selectedValue) {
+            if (value == selectedValue) {
-                html += '<option value="' + name + '" selected="selected">' + name + '</option>';
+                html += '<option value="' + value + '" selected="selected">' + name + '</option>';
             } else {
-                html += '<option value="' + name + '">' + name + '</option>';
+                html += '<option value="' + value + '">' + name + '</option>';
             }
         }
 

dashboard-ui/scripts/remotecontrol.js

@@ -468,6 +468,22 @@
             return mediaType == 'Audio' || mediaType == 'Video';
         };
 
+        self.stop = function () {
+
+        };
+
+        self.mute = function () {
+
+        };
+
+        self.unMute = function () {
+
+        };
+
+        self.toggleMute = function () {
+
+        };
+
         self.getTargets = function () {
 
             var deferred = $.Deferred();
@@ -489,7 +505,8 @@
                         id: s.Id,
                         playerName: self.name,
                         appName: s.Client,
-                        playableMediaTypes: s.PlayableMediaTypes
+                        playableMediaTypes: s.PlayableMediaTypes,
+                        isLocalPlayer: false
                     };
                 });
 

dashboard-ui/scripts/site.js

@@ -1289,7 +1289,7 @@ $(function () {
     videoPlayerHtml += '<div class="nowPlayingMediaInfo"></div>';
 
     videoPlayerHtml += '<button id="video-muteButton" class="mediaButton muteButton" title="Mute" type="button" onclick="MediaPlayer.mute();" data-icon="audio" data-iconpos="notext" data-inline="true">Mute</button>';
-    videoPlayerHtml += '<button id="video-unmuteButton" class="mediaButton unmuteButton" title="Unmute" type="button" onclick="MediaPlayer.unmute();" data-icon="volume-off" data-iconpos="notext" data-inline="true">Unmute</button>';
+    videoPlayerHtml += '<button id="video-unmuteButton" class="mediaButton unmuteButton" title="Unmute" type="button" onclick="MediaPlayer.unMute();" data-icon="volume-off" data-iconpos="notext" data-inline="true">Unmute</button>';
 
     videoPlayerHtml += '<div class="volumeSliderContainer sliderContainer">';
     videoPlayerHtml += '<input type="range" class="mediaSlider volumeSlider slider" step=".05" min="0" max="1" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
@@ -1310,8 +1310,6 @@ $(function () {
     videoPlayerHtml += '<button onclick="MediaPlayer.showChaptersFlyout();" id="video-chaptersButton" class="mediaButton chaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">Scenes</button>';
     videoPlayerHtml += '<div class="mediaFlyoutContainer"><div id="video-chaptersFlyout" style="display:none;" class="mediaPlayerFlyout chaptersFlyout"></div></div>';
 
-    videoPlayerHtml += '<button onclick="CastPlayer.initializeLocalPlayer();CastPlayer.playMedia();" id="video-ccastButton" class="mediaButton videoCCastButton" title="Cast" type="button" data-icon="ccast" data-iconpos="notext" data-inline="true" style="display: none;">Cast</button>';
-
     videoPlayerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="video-fullscreenButton" class="mediaButton fullscreenButton" title="Fullscreen" type="button" data-icon="action" data-iconpos="notext" data-inline="true">Fullscreen</button>';
 
     videoPlayerHtml += '</div>'; // video-advanced-controls
@@ -1349,7 +1347,7 @@ $(function () {
     footerHtml += '<div class="nowPlayingMediaInfo"></div>';
 
     footerHtml += '<button id="muteButton" class="mediaButton muteButton" title="Mute" type="button" onclick="MediaPlayer.mute();" data-icon="audio" data-iconpos="notext" data-inline="true">Mute</button>';
-    footerHtml += '<button id="unmuteButton" class="mediaButton unmuteButton" title="Unmute" type="button" onclick="MediaPlayer.unmute();" data-icon="volume-off" data-iconpos="notext" data-inline="true">Unmute</button>';
+    footerHtml += '<button id="unmuteButton" class="mediaButton unmuteButton" title="Unmute" type="button" onclick="MediaPlayer.unMute();" data-icon="volume-off" data-iconpos="notext" data-inline="true">Unmute</button>';
 
     footerHtml += '<div class="volumeSliderContainer sliderContainer">';
     footerHtml += '<input type="range" class="mediaSlider volumeSlider slider" step=".05" min="0" max="1" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';