diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index 1ebe93d098..cef8cb3881 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/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; diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js index 98e7c2db12..2b905c9779 100644 --- a/dashboard-ui/scripts/librarymenu.js +++ b/dashboard-ui/scripts/librarymenu.js @@ -24,7 +24,7 @@ html += '
'; - html += ''; + html += ''; html += ''; @@ -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); \ No newline at end of file diff --git a/dashboard-ui/scripts/mediacontroller.js b/dashboard-ui/scripts/mediacontroller.js index b97a79b2e1..6943a5f85d 100644 --- a/dashboard-ui/scripts/mediacontroller.js +++ b/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) { - currentPlayer = player; + self.getPlayerInfo = function () { + + 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) { @@ -26,7 +84,7 @@ }; self.shuffle = function (id) { - + currentPlayer.shuffle(id); }; @@ -80,11 +138,11 @@ }; self.getLocalPlayer = function () { - + return currentPlayer.isLocalPlayer ? - + currentPlayer : - + players.filter(function (p) { return p.isLocalPlayer; })[0]; @@ -93,9 +151,7 @@ window.MediaController = new mediaController(); - function onWebSocketMessageReceived() { - - var msg = data; + function onWebSocketMessageReceived(msg) { 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 += '
'; + html += 'Select Player:'; + + 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 += ''; + html += ''; + } + + html += '
'; + return html; + } + + function showPlayerSelection() { + + var promise = MediaController.getTargets(); + + var html = '
'; + + html += '
'; + + html += '
'; + + $(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); \ No newline at end of file diff --git a/dashboard-ui/scripts/mediaplayer.js b/dashboard-ui/scripts/mediaplayer.js index d8f3ae585b..818bcff687 100644 --- a/dashboard-ui/scripts/mediaplayer.js +++ b/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); \ No newline at end of file diff --git a/dashboard-ui/scripts/remotecontrol.js b/dashboard-ui/scripts/remotecontrol.js index 5169d8ceb6..0d133af075 100644 --- a/dashboard-ui/scripts/remotecontrol.js +++ b/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); \ No newline at end of file