re-enable mobile media controller

dashboard-ui/scripts/librarymenu.js

@@ -16,7 +16,7 @@
 
         html += '<a class="desktopHomeLink" href="index.html"><img src="css/images/mblogoicon.png" /></a>';
 
-        html += '<a class="viewMenuRemoteControlButton" href="nowplaying.html" data-role="button" data-icon="play" data-inline="true" data-iconpos="notext" title="Now Playing" style="display:none;">Remote Control</a>';
+        html += '<a class="viewMenuRemoteControlButton" href="nowplaying.html" data-role="button" data-icon="play" data-inline="true" data-iconpos="notext" title="Now Playing">Remote Control</a>';
 
         if (user.Configuration.IsAdministrator) {
             html += '<a class="editorMenuLink" href="edititemmetadata.html" data-role="button" data-icon="edit" data-inline="true" data-iconpos="notext" title="Metadata Manager">Metadata Manager</a>';

dashboard-ui/scripts/mediaplayer.js

@@ -107,26 +107,24 @@
 
                 var currentSrc = element.currentSrc;
 
+                var transcodingExtension = self.getTranscodingExtension();
+                var isStatic;
+
                 if (currentItem.MediaType == "Video") {
+
                     if (params.AudioStreamIndex != null) {
                         currentSrc = replaceQueryString(currentSrc, 'AudioStreamIndex', params.AudioStreamIndex);
                     }
                     if (params.SubtitleStreamIndex != null) {
                         currentSrc = replaceQueryString(currentSrc, 'SubtitleStreamIndex', (params.SubtitleStreamIndex == -1 ? '' : params.SubtitleStreamIndex));
                     }
-                }
 
-                var maxWidth = params.MaxWidth || getParameterByName('MaxWidth', currentSrc);
-                var audioStreamIndex = params.AudioStreamIndex == null ? getParameterByName('AudioStreamIndex', currentSrc) : params.AudioStreamIndex;
-                var subtitleStreamIndex = params.SubtitleStreamIndex == null ? getParameterByName('SubtitleStreamIndex', currentSrc) : params.SubtitleStreamIndex;
-                var videoBitrate = parseInt(getParameterByName('VideoBitrate', currentSrc) || '0');
-                var audioBitrate = parseInt(getParameterByName('AudioBitrate', currentSrc) || '0');
-                var bitrate = params.Bitrate || (videoBitrate + audioBitrate);
-
-                var transcodingExtension = self.getTranscodingExtension();
-
-                var isStatic;
-                if (currentItem.MediaType == "Video") {
+                    var maxWidth = params.MaxWidth || getParameterByName('MaxWidth', currentSrc);
+                    var audioStreamIndex = params.AudioStreamIndex == null ? getParameterByName('AudioStreamIndex', currentSrc) : params.AudioStreamIndex;
+                    var subtitleStreamIndex = params.SubtitleStreamIndex == null ? getParameterByName('SubtitleStreamIndex', currentSrc) : params.SubtitleStreamIndex;
+                    var videoBitrate = parseInt(getParameterByName('VideoBitrate', currentSrc) || '0');
+                    var audioBitrate = parseInt(getParameterByName('AudioBitrate', currentSrc) || '0');
+                    var bitrate = params.Bitrate || (videoBitrate + audioBitrate);
 
                     var finalParams = self.getFinalVideoParams(currentMediaSource, maxWidth, bitrate, audioStreamIndex, subtitleStreamIndex, transcodingExtension);
 
@@ -1176,7 +1174,9 @@
                 IsPaused: currentMediaElement.paused,
                 IsMuted: currentMediaElement.volume == 0,
                 VolumeLevel: currentMediaElement.volume * 100,
-                PositionTicks: self.getCurrentTicks()
+                PositionTicks: self.getCurrentTicks(),
+
+                CanSeek: currentMediaSource.RunTimeTicks && currentMediaSource.RunTimeTicks > 0
             });
         }
 
@@ -1186,7 +1186,7 @@
                 clearTimeout(currentProgressInterval);
                 currentProgressInterval = null;
             }
-        };
+        }
 
         function canPlayWebm() {
 

dashboard-ui/scripts/nowplayingbar.js

@@ -163,7 +163,7 @@
 
     function updatePlayerState(state) {
 
-        if (state.NowPlayingItem) {
+        if (state.NowPlayingItem && !$($.mobile.activePage).hasClass('nowPlayingPage')) {
             showNowPlayingBar();
         } else {
             hideNowPlayingBar();
@@ -231,16 +231,22 @@
         var nowPlayingItem = state.NowPlayingItem || {};
         if (!isPositionSliderActive) {
 
-            if (playState.CanSeek) {
+            if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
 
                 var pct = playState.PositionTicks / nowPlayingItem.RunTimeTicks;
                 pct *= 100;
 
-                positionSlider.val(pct).slider("enable");
+                positionSlider.val(pct);
 
             } else {
 
-                positionSlider.val(0).slider("disable");
+                positionSlider.val(0);
+            }
+
+            if (playState.CanSeek) {
+                positionSlider.slider("enable");
+            } else {
+                positionSlider.slider("disable");
             }
 
             positionSlider.slider('refresh');

dashboard-ui/scripts/nowplayingpage.js

@@ -2,6 +2,7 @@
 
     var currentPlayer;
     var lastPlayerState;
+    var isPositionSliderActive;
 
     function bindEvents(page) {
 
@@ -44,6 +45,23 @@
 
             currentPlayer.previousTrack();
         });
+
+        $('.positionSlider', page).on('slidestart', function () {
+
+            isPositionSliderActive = true;
+
+        }).on('slidestop', function () {
+
+            isPositionSliderActive = false;
+
+            if (currentPlayer && lastPlayerState) {
+
+                var newPercent = parseFloat(this.value);
+                var newPositionTicks = (newPercent / 100) * lastPlayerState.NowPlayingItem.RunTimeTicks;
+
+                currentPlayer.seek(Math.floor(newPositionTicks));
+            }
+        });
     }
 
     function onPlaybackStart(e, state) {
@@ -62,6 +80,8 @@
         player.endPlayerUpdates();
 
         onStateChanged.call(player, e, state);
+
+        $('.itemName', page).html('');
     }
 
     function onStateChanged(e, state) {
@@ -113,6 +133,96 @@
             hideButton(btnPlay);
         }
 
+        if (!isPositionSliderActive) {
+
+            var positionSlider = $('.positionSlider', page);
+
+            if (item && item.RunTimeTicks) {
+
+                var pct = playState.PositionTicks / item.RunTimeTicks;
+                pct *= 100;
+
+                positionSlider.val(pct);
+
+            } else {
+
+                positionSlider.val(0);
+            }
+            
+            if (playState.CanSeek) {
+                positionSlider.slider("enable");
+            } else {
+                positionSlider.slider("disable");
+            }
+
+            positionSlider.slider('refresh');
+        }
+
+        if (playState.PositionTicks == null) {
+            $('.positionTime', page).html('--:--');
+        } else {
+            $('.positionTime', page).html(Dashboard.getDisplayTime(playState.PositionTicks));
+        }
+
+        if (item && item.RunTimeTicks != null) {
+            $('.runtime', page).html(Dashboard.getDisplayTime(item.RunTimeTicks));
+        } else {
+            $('.runtime', page).html('--:--');
+        }
+
+        if (item && item.MediaType == 'Video') {
+            $('.videoButton', page).css('visibility', 'visible');
+        } else {
+            $('.videoButton', page).css('visibility', 'hidden');
+        }
+        
+        updateNowPlayingInfo(page, state);
+    }
+
+    var currentImgUrl;
+    function updateNowPlayingInfo(page, state) {
+
+        var item = state.NowPlayingItem;
+
+        $('.itemName', page).html(item ? MediaPlayer.getNowPlayingNameHtml(state) : '');
+
+        var url;
+
+        if (!item) {
+        }
+        else if (item.PrimaryImageTag) {
+
+            url = ApiClient.getImageUrl(item.PrimaryImageItemId, {
+                type: "Primary",
+                height: 600,
+                tag: item.PrimaryImageTag
+            });
+        }
+        else if (item.BackdropImageTag) {
+
+            url = ApiClient.getImageUrl(item.BackdropItemId, {
+                type: "Backdrop",
+                height: 600,
+                tag: item.BackdropImageTag,
+                index: 0
+            });
+
+        } else if (item.ThumbImageTag) {
+
+            url = ApiClient.getImageUrl(item.ThumbImageItemId, {
+                type: "Thumb",
+                height: 600,
+                tag: item.ThumbImageTag
+            });
+        }
+
+        if (url == currentImgUrl) {
+            return;
+        }
+
+        currentImgUrl = url;
+
+        $('.nowPlayingPageImage', page).html(url ? '<img src="' + url + '" />' : '');
     }
 
     function updateSupportedCommands(page, commands) {