Merge pull request #811 from grafixeyehero/nowplaying-tvmode

Fix nowplaying  for tv mode

src/components/appRouter.js

@@ -14,6 +14,9 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
         },
         showSettings: function () {
             show('/settings/settings.html');
+        },
+        showNowPlaying: function () {
+            show("/nowplaying.html");
         }
     };
 

src/components/remotecontrol/remotecontrol.js

@@ -1,4 +1,4 @@
-define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageLoader", "playbackManager", "nowPlayingHelper", "events", "connectionManager", "apphost", "globalize", "cardStyle", "emby-itemscontainer", "css!./remotecontrol.css", "emby-ratingbutton"], function (browser, datetime, backdrop, libraryBrowser, listView, imageLoader, playbackManager, nowPlayingHelper, events, connectionManager, appHost, globalize) {
+define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageLoader", "playbackManager", "nowPlayingHelper", "events", "connectionManager", "apphost", "globalize", "layoutManager", "userSettings", "cardStyle", "emby-itemscontainer", "css!./remotecontrol.css", "emby-ratingbutton"], function (browser, datetime, backdrop, libraryBrowser, listView, imageLoader, playbackManager, nowPlayingHelper, events, connectionManager, appHost, globalize, layoutManager, userSettings) {
     "use strict";
 
     function showAudioMenu(context, player, button, item) {
@@ -228,6 +228,11 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
             buttonVisible(context.querySelector(".btnFastForward"), null != item);
             var positionSlider = context.querySelector(".nowPlayingPositionSlider");
 
+            if (positionSlider && item && item.RunTimeTicks) {
+                positionSlider.setKeyboardSteps(userSettings.skipBackLength() * 1000000 / item.RunTimeTicks,
+                    userSettings.skipForwardLength() * 1000000 / item.RunTimeTicks);
+            }
+
             if (positionSlider && !positionSlider.dragging) {
                 positionSlider.disabled = !playState.CanSeek;
                 var isProgressClear = state.MediaSource && null == state.MediaSource.RunTimeTicks;
@@ -693,6 +698,12 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
             context.querySelector(".sendMessageForm").addEventListener("submit", onMessageSubmit);
             context.querySelector(".typeTextForm").addEventListener("submit", onSendStringSubmit);
             events.on(playbackManager, "playerchange", onPlayerChange);
+
+            if (layoutManager.tv) {
+                var positionSlider = context.querySelector(".nowPlayingPositionSlider");
+                positionSlider.classList.add("focusable");
+                positionSlider.enableKeyboardDragging();
+            }
         }
 
         function onDialogClosed(e) {

src/nowplaying.html

@@ -12,7 +12,7 @@
                     <input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" data-slider-keep-progress="true" />
                 </div>
 
-                <div class="nowPlayingInfoButtons">
+                <div class="nowPlayingInfoButtons focuscontainer-x">
                     <button is="paper-icon-button-light" class="btnPreviousTrack btnPlayStateCommand autoSize" title="${ButtonPreviousTrack}">
                         <i class="material-icons skip_previous"></i>
                     </button>

src/scripts/librarymenu.js

@@ -12,6 +12,7 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
         html += "</div>";
         html += '<div class="headerRight">';
         html += '<span class="headerSelectedPlayer"></span>';
+        html += '<button is="paper-icon-button-light" class="headerAudioPlayerButton audioPlayerButton headerButton headerButtonRight hide"><i class="material-icons music_note"></i></button>';
         html += '<button is="paper-icon-button-light" class="headerCastButton castButton headerButton headerButtonRight hide"><i class="material-icons">cast</i></button>';
         html += '<button type="button" is="paper-icon-button-light" class="headerButton headerButtonRight headerSearchButton hide"><i class="material-icons">search</i></button>';
         html += '<button is="paper-icon-button-light" class="headerButton headerButtonRight headerUserButton hide"><i class="material-icons">person</i></button>';
@@ -27,6 +28,7 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
         headerHomeButton = skinHeader.querySelector(".headerHomeButton");
         headerUserButton = skinHeader.querySelector(".headerUserButton");
         headerCastButton = skinHeader.querySelector(".headerCastButton");
+        headerAudioPlayerButton = skinHeader.querySelector(".headerAudioPlayerButton");
         headerSearchButton = skinHeader.querySelector(".headerSearchButton");
 
         lazyLoadViewMenuBarImages();
@@ -116,6 +118,10 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
         Dashboard.navigate("home.html");
     }
 
+    function showAudioPlayer() {
+        return appRouter.showNowPlaying();
+    }
+
     function bindMenuEvents() {
         mainDrawerButton = document.querySelector(".mainDrawerButton");
 
@@ -140,9 +146,27 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
             headerCastButton.addEventListener("click", onCastButtonClicked);
         }
 
+        headerAudioPlayerButton.addEventListener("click", showAudioPlayer);
+
         if (layoutManager.mobile) {
             initHeadRoom(skinHeader);
         }
+        events.on(playbackManager, 'playbackstart', onPlaybackStart);
+        events.on(playbackManager, 'playbackstop', onPlaybackStop);
+    }
+
+    function onPlaybackStart(e) {
+        if (playbackManager.isPlayingAudio() && layoutManager.tv) {
+            headerAudioPlayerButton.classList.remove("hide");
+        } else {
+            headerAudioPlayerButton.classList.add("hide");
+        }
+    }
+
+    function onPlaybackStop(e, stopInfo) {
+        if (stopInfo.nextMediaType != 'Audio') {
+            headerAudioPlayerButton.classList.add("hide");
+        }
     }
 
     function onCastButtonClicked() {
@@ -763,6 +787,7 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
     var currentUser;
     var headerCastButton;
     var headerSearchButton;
+    var headerAudioPlayerButton;
     var enableLibraryNavDrawer = !layoutManager.tv;
     var skinHeader = document.querySelector(".skinHeader");
     var requiresUserRefresh = true;

src/scripts/site.js

@@ -989,10 +989,6 @@ var AppInfo = {};
                 Dashboard.navigate("mypreferencesmenu.html");
             };
 
-            appRouter.showNowPlaying = function () {
-                Dashboard.navigate("nowplaying.html");
-            };
-
             appRouter.setTitle = function (title) {
                 LibraryMenu.setTitle(title);
             };