stub out remote player

dashboard-ui/css/librarybrowser.css

@@ -676,14 +676,14 @@ a.itemTag:hover {
     }
 }
 
-@media all and (min-width: 800px) {
+@media all and (min-width: 880px) {
 
     .libraryMenuButton {
         display: none;
     }
 }
 
-@media all and (max-width: 800px) {
+@media all and (max-width: 880px) {
 
     .desktopHomeLink {
         display: none;

dashboard-ui/scripts/librarymenu.js

@@ -24,7 +24,7 @@
 
         html += '<div class="viewMenuSecondary">';
 
-        html += '<button class="btnCast btnDefaultCast" type="button" data-role="none" style="display:none;"></button>';
+        html += '<button class="btnCast btnDefaultCast" type="button" data-role="none"></button>';
 
         html += '<a class="viewMenuLink btnCurrentUser" href="#" onclick="Dashboard.showUserFlyout(this);">';
 
@@ -210,6 +210,7 @@
                 });
             });
         }
+
     }).on('pageshow', ".libraryPage", function () {
 
         var page = this;
@@ -224,4 +225,23 @@
         }
     });
 
+    $(function() {
+        
+        $(MediaController).on('playerchange', function () {
+
+            var info = MediaController.getPlayerInfo();
+
+            if (info.isLocalPlayer) {
+
+                $('.btnCast').addClass('btnDefaultCast').removeClass('btnActiveCast');
+
+            } else {
+
+                $('.btnCast').removeClass('btnDefaultCast').addClass('btnActiveCast');
+            }
+        });
+
+    });
+
+
 })(window, document, jQuery);

dashboard-ui/scripts/mediacontroller.js

@@ -4,16 +4,74 @@
 
         var self = this;
         var currentPlayer;
+        var currentTargetInfo;
 
         var players = [];
 
         self.registerPlayer = function (player) {
 
             players.push(player);
+        };
 
-            if (!currentPlayer) {
+        self.getPlayerInfo = function () {
-                currentPlayer = player;
+
+            return {
+
+                name: currentPlayer.name,
+                isLocalPlayer: currentPlayer.isLocalPlayer,
+                targetInfo: currentTargetInfo
+            };
+        };
+
+        self.setActivePlayer = function (player, targetInfo) {
+
+            if (typeof (player) === 'string') {
+                player = players.filter(function (p) {
+                    return p.name == player;
+                })[0];
             }
+
+            if (!player) {
+                throw new Error('null player');
+            }
+
+            if (!targetInfo) {
+                throw new Error('null targetInfo');
+            }
+
+            currentPlayer = player;
+            currentTargetInfo = targetInfo;
+
+            $(self).trigger('playerchange');
+        };
+
+        self.getTargets = function () {
+
+            var deferred = $.Deferred();
+
+            var promises = players.map(function (p) {
+                return p.getTargets();
+            });
+
+            $.when.apply($, promises).done(function () {
+
+                var targets = [];
+
+                for (var i = 0; i < arguments.length; i++) {
+
+                    var subTargets = arguments[i];
+
+                    for (var j = 0; j < subTargets.length; j++) {
+
+                        targets.push(subTargets[j]);
+                    }
+
+                }
+
+                deferred.resolveWith(null, [targets]);
+            });
+
+            return deferred.promise();
         };
 
         self.play = function (options) {
@@ -93,9 +151,7 @@
 
     window.MediaController = new mediaController();
 
-    function onWebSocketMessageReceived() {
+    function onWebSocketMessageReceived(msg) {
-
-        var msg = data;
 
         var localPlayer = msg.MessageType === "Play" || msg.MessageType === "Play" ?
             MediaController.getLocalPlayer() :
@@ -142,4 +198,75 @@
 
     $(ApiClient).on("websocketmessage", onWebSocketMessageReceived);
 
+    function getTargetsHtml(targets) {
+
+        var playerInfo = MediaController.getPlayerInfo();
+
+        var html = '';
+        html += '<fieldset data-role="controlgroup" data-mini="true">';
+        html += '<legend>Select Player:</legend>';
+
+        for (var i = 0, length = targets.length; i < length; i++) {
+
+            var target = targets[i];
+
+            var id = 'radioPlayerTarget' + i;
+
+            var isChecked = target.id == playerInfo.targetInfo.id;
+            var checkedHtml = isChecked ? ' checked="checked"' : '';
+
+            html += '<input type="radio" class="radioSelectPlayerTarget" name="radioSelectPlayerTarget" data-playername="' + target.playerName + '" data-targetid="' + target.id + '" data-targetname="' + target.name + '" id="' + id + '" value="' + target.id + '"' + checkedHtml + '>';
+            html += '<label for="' + id + '">' + target.name + '</label>';
+        }
+
+        html += '</fieldset>';
+        return html;
+    }
+
+    function showPlayerSelection() {
+
+        var promise = MediaController.getTargets();
+
+        var html = '<div data-role="panel" data-position="right" data-display="overlay" id="playerFlyout" data-theme="b">';
+
+        html += '<div class="players"></div>';
+
+        html += '</div>';
+
+        $(document.body).append(html);
+
+        var elem = $('#playerFlyout').panel({}).trigger('create').panel("open").on("panelafterclose", function () {
+
+            $(this).off("panelafterclose").remove();
+        });
+
+        promise.done(function (targets) {
+
+            $('.players', elem).html(getTargetsHtml(targets)).trigger('create');
+
+            $('.radioSelectPlayerTarget', elem).on('change', function () {
+
+                var playerName = this.getAttribute('data-playername');
+                var targetId = this.getAttribute('data-targetid');
+                var targetName = this.getAttribute('data-targetname');
+
+                MediaController.setActivePlayer(playerName, {
+                    id: targetId,
+                    name: targetName
+
+                });
+            });
+        });
+    }
+
+    $(document).on('headercreated', ".libraryPage", function () {
+
+        var page = this;
+
+        $('.btnCast', page).on('click', function () {
+
+            showPlayerSelection();
+        });
+    });
+
 })(jQuery, window);

dashboard-ui/scripts/mediaplayer.js

@@ -24,6 +24,18 @@
         self.playlist = [];
 
         self.isLocalPlayer = true;
+        self.name = 'Html5 Player';
+
+        self.getTargets = function () {
+
+            var targets = [{
+                name: 'My Browser',
+                id: self.name,
+                playerName: self.name
+            }];
+
+            return targets;
+        };
 
         self.updateCanClientSeek = function (elem) {
             var duration = elem.duration;
@@ -1102,6 +1114,12 @@
     window.MediaPlayer = new mediaPlayer();
 
     window.MediaController.registerPlayer(window.MediaPlayer);
+    window.MediaController.setActivePlayer(window.MediaPlayer, {
+        
+        id: window.MediaPlayer.name,
+        name: window.MediaPlayer.name
+
+    });
 
 
 })(document, setTimeout, clearTimeout, screen, localStorage, $, setInterval, window);

dashboard-ui/scripts/remotecontrol.js

@@ -411,4 +411,79 @@
 
     window.RemoteControl = new remoteControl();
 
+    function remoteControlPlayer() {
+
+        var self = this;
+
+        self.name = 'Remote Control';
+
+        self.play = function (options) {
+
+        };
+
+        self.shuffle = function (id) {
+
+        };
+
+        self.instantMix = function (id) {
+
+        };
+
+        self.queue = function (options) {
+
+        };
+
+        self.queueNext = function (options) {
+
+        };
+
+        self.isPlaying = function () {
+
+        };
+
+        self.canPlayMediaType = function (mediaType) {
+
+            return false;
+        };
+
+        self.canQueueMediaType = function (mediaType) {
+
+            return false;
+        };
+
+        self.getTargets = function () {
+
+            var deferred = $.Deferred();
+
+            ApiClient.getSessions({
+
+                controllableByUserId: Dashboard.getCurrentUserId()
+
+            }).done(function (sessions) {
+                
+                var targets = sessions.filter(function(s) {
+
+                    return s.DeviceId != ApiClient.deviceId();
+
+                }).map(function(s) {
+                    return {
+                        name: s.DeviceName,
+                        id: s.Id,
+                        playerName: self.name
+                    };
+                });
+
+                deferred.resolveWith(null, [targets]);
+
+            }).fail(function() {
+                
+                deferred.reject();
+            });
+
+            return deferred.promise();
+        };
+    }
+
+    MediaController.registerPlayer(new remoteControlPlayer());
+
 })(window, document, jQuery);