update external players

dashboard-ui/scripts/externalplayer.js

@@ -1,4 +1,4 @@
-(function (window) {
+define(['paper-slider', 'paper-button'], function () {
 
     function getDeviceProfile(serverAddress, deviceId, item, startPositionTicks, maxBitrate, mediaSourceId, audioStreamIndex, subtitleStreamIndex) {
 
@@ -104,20 +104,19 @@
 
     function getVideoStreamInfo(item) {
 
-        var deferred = $.Deferred();
-
         var deviceProfile = getDeviceProfile();
         var startPosition = 0;
 
+        return new Promise(function (resolve, reject) {
+
             MediaPlayer.tryStartPlayback(deviceProfile, item, startPosition, function (mediaSource) {
 
-            playInternalPostMediaSourceSelection(item, mediaSource, startPosition, deferred);
+                playInternalPostMediaSourceSelection(item, mediaSource, startPosition).then(resolve);
+            });
         });
-
-        return deferred.promise();
     }
 
-    function playInternalPostMediaSourceSelection(item, mediaSource, startPosition, deferred) {
+    function playInternalPostMediaSourceSelection(item, mediaSource, startPosition) {
 
         Dashboard.hideLoadingMsg();
 
@@ -130,7 +129,7 @@
             }
         };
 
-        MediaPlayer.createStreamInfo('Video', item, mediaSource, startPosition).then(function (streamInfo) {
+        return MediaPlayer.createStreamInfo('Video', item, mediaSource, startPosition).then(function (streamInfo) {
 
             var currentSrc = streamInfo.url;
 
@@ -152,7 +151,7 @@
             basePlayerState.PlayState.CanSeek = false;
             basePlayerState.NowPlayingItem = MediaPlayer.getNowPlayingItemForReporting(item, mediaSource);
 
-            deferred.resolveWith(null, [streamInfo]);
+            return streamInfo;
         });
     }
 
@@ -160,15 +159,13 @@
 
         var state = basePlayerState;
 
-        state.PlayState.PositionTicks = positionTicks;
+        state.PlayState.PositionTicks = Math.round(positionTicks);
 
         return state;
     }
 
     function onPlaybackStart() {
 
-        closePlayMenu();
-
         var state = getPlayerState();
 
         var info = {
@@ -186,12 +183,7 @@
 
         }, 10000);
 
-        // Need a timeout because we can't show a popup at the same time as the previous one is closing
-        // Bumping it up to 1000 because the post play menu is hiding for some reason on android
-        setTimeout(function () {
-
         showPostPlayMenu(currentItem);
-        }, 1000);
     }
 
     function onPlaybackProgress(positionTicks) {
@@ -213,9 +205,9 @@
         var state = getPlayerState(positionTicks);
 
         var stopInfo = {
-            itemId: state.NowPlayingItem.Id,
+            ItemId: state.NowPlayingItem.Id,
-            mediaSourceId: state.PlayState.MediaSourceId,
+            MediaSourceId: state.PlayState.MediaSourceId,
-            positionTicks: state.PlayState.PositionTicks
+            PositionTicks: state.PlayState.PositionTicks
         };
 
         if (state.PlayState.LiveStreamId) {
@@ -226,12 +218,15 @@
             stopInfo.PlaySessionId = state.PlayState.PlaySessionId;
         }
 
-        ApiClient.reportPlaybackStopped(stopInfo);
-
         if (progressInterval) {
             clearInterval(progressInterval);
             progressInterval = null;
         }
+
+        // Make sure this is after progress reports have stopped
+        setTimeout(function () {
+            ApiClient.reportPlaybackStopped(stopInfo);
+        }, 1000);
     }
 
     function showPostPlayMenu(item) {
@@ -245,7 +240,7 @@
             html += '<li data-role="list-divider" style="padding: 1em;text-align:center;">' + Globalize.translate('HeaderExternalPlayerPlayback') + '</li>';
             html += '</ul>';
 
-            html += '<div style="padding:1em;">';
+            html += '<div style="padding:1.5em;">';
 
             var autoMarkWatched = item.RunTimeTicks;
 
@@ -253,29 +248,26 @@
 
                 autoMarkWatched = false;
 
-                html += '<fieldset data-role="controlgroup">';
+                html += '<label for="selectMarkAs" class="selectLabel">' + Globalize.translate('LabelMarkAs') + '</label>';
-                html += '<legend>' + Globalize.translate('LabelMarkAs') + '</legend>';
+                html += '<select id="selectMarkAs">';
-                html += '<label for="radioMarkUnwatched">' + Globalize.translate('OptionUnwatched') + '</label>';
+                html += '<option value="0">' + Globalize.translate('OptionWatched') + '</option>';
-                html += '<input type="radio" id="radioMarkUnwatched" name="radioGroupMarkPlaystate" class="radioPlaystate" />';
+                html += '<option value="1">' + Globalize.translate('OptionUnwatched') + '</option>';
-                html += '<label for="radioMarkWatched">' + Globalize.translate('OptionWatched') + '</label>';
+                html += '<option value="2">' + Globalize.translate('OptionInProgress') + '</option>';
-                html += '<input type="radio" id="radioMarkWatched" checked="checked" name="radioGroupMarkPlaystate" class="radioPlaystate" />';
+                html += '</select>';
-                html += '<label for="radioMarkInProgress">' + Globalize.translate('OptionInProgress') + '</label>';
-                html += '<input type="radio" id="radioMarkInProgress" name="radioGroupMarkPlaystate" class="radioPlaystate" />';
-                html += '</fieldset>';
 
                 html += '<br/>';
 
+                html += '<div class="fldResumePoint hide">';
                 html += '<p style="margin-top: 0;">' + Globalize.translate('LabelResumePoint') + '</p>';
 
-                html += '<div class="sliderContainer" style="display:block;margin-top:4px;">';
+                html += '<paper-slider pin step=".001" min="0" max="100" value="0" class="playstateSlider" style="display:block;margin-left:-12px;width:98%;"></paper-slider>';
-                html += '<input class="playstateSlider" type="range" step=".001" min="0" max="100" value="0" style="display:none;" data-theme="a" data-highlight="true" />';
-                html += '</div>';
                 html += '<div class="sliderValue" style="text-align:center;margin:2px 0 4px;">0:00:00</div>';
+                html += '</div>';
 
                 html += '<br/>';
             }
 
-            html += '<button type="button" class="btnDone" data-theme="b" data-icon="check">' + Globalize.translate('ButtonImDone') + '</button>';
+            html += '<paper-button class="block submit btnDone" raised>' + Globalize.translate('ButtonImDone') + '</paper-button>';
 
             html += '</div>';
 
@@ -287,42 +279,41 @@
 
                 $(this).off("popupafterclose").remove();
 
-            });
+            })[0];
 
-            $('.radioPlaystate', elem).on('change', function () {
+            $('#selectMarkAs', elem).on('change', function () {
 
-                if ($('#radioMarkInProgress', elem).checked()) {
+                if (this.value == '2') {
 
-                    $('.playstateSlider', elem).slider('enable');
+                    elem.querySelector('.fldResumePoint').classList.remove('hide');
 
                 } else {
-                    $('.playstateSlider', elem).slider('disable');
+                    elem.querySelector('.fldResumePoint').classList.add('hide');
                 }
 
             }).trigger('change');
 
             $('.btnDone', elem).on('click', function () {
 
-                $('.externalPlayerPostPlayFlyout').popup("close").remove();
-
                 var position = 0;
-
+                var playstateOption = $('#selectMarkAs', elem).val();
-                if ($('#radioMarkInProgress', elem).checked()) {
+                if (playstateOption == '2') {
 
                     var pct = $(".playstateSlider", elem).val();
                     var ticks = item.RunTimeTicks * (Number(pct) * .01);
 
                     position = ticks;
                 }
-                else if (autoMarkWatched || $('#radioMarkWatched', elem).checked()) {
+                else if (autoMarkWatched || playstateOption == '0') {
 
                     position = currentMediaSource.RunTimeTicks;
                 }
-                else if ($('#radioMarkUnwatched', elem).checked()) {
+                else if (playstateOption == '1') {
 
                     position = 0;
                 }
                 onPlaybackStopped(position);
+                $('.externalPlayerPostPlayFlyout').popup("close").remove();
             });
 
             $(".playstateSlider", elem).on("change", function (e) {
@@ -341,44 +332,22 @@
         });
     }
 
-    function closePlayMenu() {
-        $('.externalPlayerFlyout').popup("close").remove();
-    }
-
     function showMenuForItem(item, players) {
 
-        require(['jqmpopup', 'jqmlistview'], function () {
+        require(['actionsheet'], function (actionsheet) {
-            closePlayMenu();
 
-            var html = '<div data-role="popup" class="externalPlayerFlyout" data-theme="a" data-dismissible="false">';
+            actionsheet.show({
+                items: players,
+                callback: function (id) {
+                    var player = players.filter(function (p) {
+                        return p.id == id;
+                    })[0];
 
-            html += '<ul data-role="listview" style="min-width: 200px;">';
+                    if (player) {
-            html += '<li data-role="list-divider" style="padding: 1em;text-align:center;">' + Globalize.translate('HeaderSelectExternalPlayer') + '</li>';
+                        window.open(player.url, '_blank');
-            html += '</ul>';
+                        onPlaybackStart();
-
+                    }
-            html += '<div style="padding:1em;">';
+                }
-
-            html += players.map(function (p) {
-
-                return '<a href="' + p.url + '" data-role="button" data-icon="play" class="btnExternalPlayer" data-theme="b" data-mini="true">' + p.name + '</a>';
-
-            }).join('');
-
-            html += '</div>';
-
-            html += '</div>';
-
-            $(document.body).append(html);
-
-            var elem = $('.externalPlayerFlyout').popup({}).trigger('create').popup("open").on("popupafterclose", function () {
-
-                $(this).off("popupafterclose").remove();
-
-            });
-
-            $('.btnExternalPlayer', elem).on('click', function () {
-
-                ExternalPlayer.onPlaybackStart();
             });
         });
     }
@@ -401,7 +370,10 @@
     function getExternalPlayers(url, mimeType) {
 
         var players = [
-            { name: 'Vlc', url: 'vlc://' + url, id: 'vlc' }
+            {
+                name: 'Vlc', url: 'vlc://' + url, id: 'vlc',
+                ironIcon: 'airplay'
+            }
         ];
 
         return Promise.resolve(players);
@@ -422,4 +394,4 @@
         showPlayerSelectionMenu: showPlayerSelectionMenu
     };
 
-})(window);
+});

dashboard-ui/scripts/librarymenu.js

@@ -33,9 +33,7 @@
 
         html += '<paper-button class="headerButton headerButtonRight btnNotifications subdued" type="button" title="Notifications"><div class="btnNotificationsInner">0</div></paper-button>';
 
-        if (!showUserAtTop()) {
         html += '<paper-icon-button icon="person" class="headerButton headerButtonRight headerUserButton" onclick="return Dashboard.showUserFlyout(this);"></paper-icon-button>';
-        }
 
         if (!browserInfo.mobile && !Dashboard.isConnectMode()) {
             html += '<paper-icon-button icon="settings" class="headerButton headerButtonRight dashboardEntryHeaderButton" onclick="return LibraryMenu.onSettingsClicked(event);"></paper-icon-button>';
@@ -288,44 +286,14 @@
 
         var html = '';
 
-        var userAtTop = showUserAtTop();
-
         var homeHref = window.ApiClient ? 'index.html' : 'selectserver.html?showuser=1';
 
-        var hasUserImage = user.imageUrl;
-
-        if (userAtTop) {
-
-            html += '<div class="drawerUserPanel">';
-
-            var imgWidth = 40;
-
-            if (hasUserImage) {
-                var url = user.imageUrl;
-                if (user.supportsImageParams) {
-                    url += "&width=" + (imgWidth * Math.max(devicePixelRatio || 1, 2));
-                    html += '<div class="lazy drawerUserPanelUserImage" data-src="' + url + '" style="width:' + imgWidth + 'px;height:' + imgWidth + 'px;"></div>';
-                }
-            } else {
-                html += '<div class="drawerUserPanelUserImage"><iron-icon icon="person" style="width:' + imgWidth + 'px;height:' + imgWidth + 'px;"></iron-icon></div>';
-            }
-
-            html += '<div class="drawerUserPanelUserName">';
-            html += user.name;
-            html += '</div>';
-
-            html += '</div>';
-
-            html += '<a class="sidebarLink lnkMediaFolder" data-itemid="remote" href="index.html" onclick="return LibraryMenu.onLinkClicked(event, this);"><iron-icon icon="home" class="sidebarLinkIcon" style="color:#2196F3;"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonHome') + '</span></a>';
-
-        } else {
         html += '<div style="margin-top:5px;"></div>';
 
         html += '<a class="lnkMediaFolder sidebarLink" href="' + homeHref + '" onclick="return LibraryMenu.onLinkClicked(event, this);">';
         html += '<div style="background-image:url(\'css/images/mblogoicon.png\');width:' + 28 + 'px;height:' + 28 + 'px;background-size:contain;background-repeat:no-repeat;background-position:center center;border-radius:1000px;vertical-align:middle;margin:0 1.6em 0 1.5em;display:inline-block;"></div>';
         html += Globalize.translate('ButtonHome');
         html += '</a>';
-        }
 
         html += '<a class="sidebarLink lnkMediaFolder" data-itemid="remote" href="nowplaying.html" onclick="return LibraryMenu.onLinkClicked(event, this);"><iron-icon icon="tablet-android" class="sidebarLinkIcon" style="color:#673AB7;"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonRemote') + '</span></a>';
 
@@ -386,7 +354,7 @@
 
         html += '<div class="sidebarDivider"></div>';
 
-        if (user.localUser && showUserAtTop()) {
+        if (user.localUser && (AppInfo.isNativeApp && browserInfo.android)) {
             html += '<a class="sidebarLink lnkMediaFolder lnkMySettings" onclick="return LibraryMenu.onLinkClicked(event, this);" href="mypreferencesmenu.html?userId=' + user.localUser.Id + '"><iron-icon icon="settings" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonSettings') + '</span></a>';
         }
 
@@ -396,7 +364,7 @@
             html += '<a class="sidebarLink lnkMediaFolder" data-itemid="selectserver" onclick="return LibraryMenu.onLinkClicked(event, this);" href="selectserver.html?showuser=1"><iron-icon icon="wifi" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonSelectServer') + '</span></a>';
         }
 
-        if (showUserAtTop()) {
+        if (user.localUser) {
             html += '<a class="sidebarLink lnkMediaFolder" data-itemid="logout" onclick="return LibraryMenu.onLogoutClicked(this);" href="#"><iron-icon icon="lock" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonSignOut') + '</span></a>';
         }
 
@@ -556,10 +524,6 @@
         }
     }
 
-    function showUserAtTop() {
-        return false;
-    }
-
     var requiresLibraryMenuRefresh = false;
 
     function onManageServerClicked() {