Merge pull request #1551 from jellyfin/history

Fix some style issues on item details and now playing
2025-03-30 19:56:21 +00:00 · 2020-07-14 18:02:16 +09:00 · 2020-07-14 18:02:16 +09:00 · 80c700cc71
commit 80c700cc71
parent 585b1cf5f4 ee35f089fd
14 changed files with 39 additions and 91 deletions
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@ -1468,7 +1468,7 @@ import 'programStyles';

            let additionalCardContent = '';

-            if (layoutManager.desktop) {
+            if (layoutManager.desktop && !options.disableHoverMenu) {
                additionalCardContent += getHoverMenuHtml(item, action, options);
            }

@ -1497,12 +1497,12 @@ import 'programStyles';

            const userData = item.UserData || {};

-            if (itemHelper.canMarkPlayed(item) && !options.disableHoverMenu) {
+            if (itemHelper.canMarkPlayed(item)) {
                require(['emby-playstatebutton']);
                html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover check"></span></button>';
            }

-            if (itemHelper.canRate(item) && !options.disableHoverMenu) {
+            if (itemHelper.canRate(item)) {

                const likes = userData.Likes == null ? '' : userData.Likes;

@ -1510,10 +1510,7 @@ import 'programStyles';
                html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover favorite"></span></button>';
            }

-            if (!options.disableHoverMenu) {
-                html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover more_vert"></span></button>';
-            }
-
+            html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover more_vert"></span></button>';
            html += '</div>';
            html += '</div>';

--- a/src/components/nowPlayingBar/nowPlayingBar.css
+++ b/src/components/nowPlayingBar/nowPlayingBar.css
@ -114,8 +114,6 @@

 .nowPlayingBarUserDataButtons {
    display: inline-block;
-    margin-left: 1em;
-    margin-right: 1em;
 }

 .nowPlayingBarPositionSlider::-webkit-slider-thumb {
--- a/src/components/nowPlayingBar/nowPlayingBar.js
+++ b/src/components/nowPlayingBar/nowPlayingBar.js
@ -72,7 +72,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
        if (layoutManager.mobile) {
            html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><span class="material-icons skip_next"></span></button>';
        } else {
-            html += '<button is="paper-icon-button-light" class="btnToggleContextMenu"><span class="material-icons more_vert"></span></button>';
+            html += '<button is="paper-icon-button-light" class="btnToggleContextMenu mediaButton"><span class="material-icons more_vert"></span></button>';
        }

        html += '</div>';
@ -355,7 +355,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',

    function updateRepeatModeDisplay(repeatMode) {
        toggleRepeatButtonIcon.classList.remove('repeat', 'repeat_one');
-        const cssClass = 'repeatButton-active';
+        const cssClass = 'buttonActive';

        switch (repeatMode) {
            case 'RepeatAll':
@ -375,18 +375,14 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
    }

    function updateTimeDisplay(positionTicks, runtimeTicks, bufferedRanges) {
-
        // See bindEvents for why this is necessary
        if (positionSlider && !positionSlider.dragging) {
            if (runtimeTicks) {
-
                var pct = positionTicks / runtimeTicks;
                pct *= 100;

                positionSlider.value = pct;
-
            } else {
-
                positionSlider.value = 0;
            }
        }
@ -396,9 +392,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
        }

        if (currentTimeElement) {
-
            var timeText = positionTicks == null ? '--:--' : datetime.getDisplayRunningTime(positionTicks);
-
            if (runtimeTicks) {
                timeText += ' / ' + datetime.getDisplayRunningTime(runtimeTicks);
            }
@ -606,14 +600,11 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',

    function onPlaybackStart(e, state) {
        console.debug('nowplaying event: ' + e.type);
-
        var player = this;
-
        onStateChanged.call(player, e, state);
    }

    function onRepeatModeChange() {
-
        if (!isEnabled) {
            return;
        }
@ -628,9 +619,8 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',

        let shuffleMode = playbackManager.getQueueShuffleMode();
        let context = nowPlayingBarElement;
-        const cssClass = 'shuffleQueue-active';
+        const cssClass = 'buttonActive';
        let toggleShuffleButton = context.querySelector('.btnShuffleQueue');
-
        switch (shuffleMode) {
            case 'Shuffle':
                toggleShuffleButton.classList.add(cssClass);
@ -643,7 +633,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
    }

    function showNowPlayingBar() {
-
        if (!isVisibilityAllowed) {
            hideNowPlayingBar();
            return;
--- a/src/components/remotecontrol/remotecontrol.js
+++ b/src/components/remotecontrol/remotecontrol.js
@ -359,7 +359,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
        function updateRepeatModeDisplay(repeatMode) {
            var context = dlg;
            let toggleRepeatButtons = context.querySelectorAll('.repeatToggleButton');
-            const cssClass = 'repeatButton-active';
+            const cssClass = 'buttonActive';
            let innHtml = '<span class="material-icons repeat"></span>';
            let repeatOn = true;

@ -528,7 +528,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
        function onShuffleQueueModeChange(updateView = true) {
            let shuffleMode = playbackManager.getQueueShuffleMode(this);
            let context = dlg;
-            const cssClass = 'shuffleQueue-active';
+            const cssClass = 'buttonActive';
            let shuffleButtons = context.querySelectorAll('.btnShuffleQueue');

            for (let shuffleButton of shuffleButtons) {
--- a/src/controllers/auth/login.js
+++ b/src/controllers/auth/login.js
@ -7,18 +7,10 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
        loading.show();
        apiClient.authenticateUserByName(username, password).then(function (result) {
            var user = result.User;
-            var serverId = getParameterByName('serverid');
-            var newUrl;
-
-            if (user.Policy.IsAdministrator && !serverId) {
-                newUrl = 'dashboard.html';
-            } else {
-                newUrl = 'home.html';
-            }
-
            loading.hide();
+
            Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient);
-            Dashboard.navigate(newUrl);
+            Dashboard.navigate('home.html');
        }, function (response) {
            page.querySelector('#txtManualName').value = '';
            page.querySelector('#txtManualPassword').value = '';
--- a/src/controllers/dashboard/dashboard.js
+++ b/src/controllers/dashboard/dashboard.js
@ -169,13 +169,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
    function reloadSystemInfo(view, apiClient) {
        apiClient.getSystemInfo().then(function (systemInfo) {
            view.querySelector('#serverName').innerHTML = globalize.translate('DashboardServerName', systemInfo.ServerName);
-            var localizedVersion = globalize.translate('DashboardVersionNumber', systemInfo.Version);
-
-            if (systemInfo.SystemUpdateLevel !== 'Release') {
-                localizedVersion += ' ' + systemInfo.SystemUpdateLevel;
-            }
-
-            view.querySelector('#versionNumber').innerHTML = localizedVersion;
+            view.querySelector('#versionNumber').innerHTML = globalize.translate('DashboardVersionNumber', systemInfo.Version);
            view.querySelector('#operatingSystem').innerHTML = globalize.translate('DashboardOperatingSystem', systemInfo.OperatingSystem);
            view.querySelector('#architecture').innerHTML = globalize.translate('DashboardArchitecture', systemInfo.SystemArchitecture);

--- a/src/controllers/itemDetails/index.js
+++ b/src/controllers/itemDetails/index.js
@ -53,11 +53,13 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
            user: user,
            share: true
        };
+
        return options;
    }

    function getProgramScheduleHtml(items) {
        var html = '';
+
        html += '<div is="emby-itemscontainer" class="itemsContainer vertical-list" data-contextmenu="false">';
        html += listView.getListViewHtml({
            items: items,
@ -71,6 +73,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
            moreButton: false,
            recordButton: false
        });
+
        html += '</div>';

        return html;
@ -143,7 +146,6 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
        instance._currentPlaybackMediaSources = mediaSources;

        page.querySelector('.trackSelections').classList.remove('hide');
-
        select.setLabel(globalize.translate('LabelVersion'));

        var currentValue = select.value;
@ -165,7 +167,6 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
            renderAudioSelections(page, mediaSources);
            renderSubtitleSelections(page, mediaSources);
        }
-
    }

    function renderVideoSelections(page, mediaSources) {
@ -173,9 +174,11 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
        var mediaSource = mediaSources.filter(function (m) {
            return m.Id === mediaSourceId;
        })[0];
+
        var tracks = mediaSource.MediaStreams.filter(function (m) {
            return m.Type === 'Video';
        });
+
        var select = page.querySelector('.selectVideo');
        select.setLabel(globalize.translate('LabelVideo'));
        var selectedId = tracks.length ? tracks[0].Index : -1;
@ -727,7 +730,6 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
        });

        elem.innerHTML = cardHtml;
-
        imageLoader.lazyChildren(elem);
    }

--- a/src/nowplaying.html
+++ b/src/nowplaying.html
@ -5,7 +5,7 @@
        <div class="nowPlayingInfoContainer">
            <div class="nowPlayingPageImageContainer"></div>
            <div class="nowPlayingInfoControls">
-            
+
                <div class="flex">

                    <div class="nowPlayingInfoContainerMedia">
@ -15,9 +15,9 @@
                        <div class="nowPlayingArtist nowPlayingSerie"></div>
                    </div>
                    <div class="nowPlayingPageUserDataButtonsTitle"></div>
-                    
+
                </div>
-                
+
                <div class="sliderContainer flex">
                    <div class="positionTime"></div>
                        <div class="nowPlayingPositionSliderContainer">
@ -25,20 +25,20 @@
                        </div>
                    <div class="runtime"></div>
                </div>
-                
+
                <div class="nowPlayingButtonsContainer focuscontainer-x justify-content-space-between">
-                
+
                    <div class="nowPlayingInfoButtons">

                        <button is="paper-icon-button-light" class="btnCommand btnRepeat repeatToggleButton autoSize" title="${ButtonRepeat}"
                            data-command="SetRepeatMode">
                            <span class="material-icons repeat"></span>
                        </button>
-                    
+
                        <button is="paper-icon-button-light" class="btnRewind btnNowPlayingRewind btnPlayStateCommand autoSize" title="${Rewind}">
                            <span class="material-icons replay_10"></span>
                        </button>
-                        
+
                        <button is="paper-icon-button-light" class="btnPreviousTrack btnPlayStateCommand autoSize" title="${ButtonPreviousTrack}">
                            <span class="material-icons skip_previous"></span>
                        </button>
@ -54,7 +54,7 @@
                        <button is="paper-icon-button-light" class="btnPlayStateCommand btnNextTrack autoSize" title="${ButtonNextTrack}">
                            <span class="material-icons skip_next"></span>
                        </button>
-                        
+
                        <button is="paper-icon-button-light" class="btnPlayStateCommand btnFastForward btnNowPlayingFastForward autoSize" title="${FastForward}">
                            <span class="material-icons forward_30"></span>
                        </button>
@ -66,7 +66,7 @@
                    </div>

                    <div class="nowPlayingSecondaryButtons">
-                    
+
                        <button is="paper-icon-button-light" class="btnAudioTracks videoButton btnPlayStateCommand autoSize" title="${ButtonAudioTracks}" data-command="GoToSearch">
                            <span class="material-icons audiotrack"></span>
                        </button>
@ -74,7 +74,7 @@
                        <button is="paper-icon-button-light" class="btnSubtitles videoButton btnPlayStateCommand autoSize" title="${ButtonSubtitles}" data-command="GoToSearch">
                            <span class="material-icons closed_caption"></span>
                        </button>
-                    
+
                        <div class="nowPlayingPageUserDataButtons"></div>

                        <button is="paper-icon-button-light" class="btnToggleFullscreen videoButton btnPlayStateCommand autoSize" title="${ButtonFullscreen}" data-command="ToggleFullscreen">
--- a/src/themes/appletv/theme.css
+++ b/src/themes/appletv/theme.css
@ -449,12 +449,8 @@ html {
    color: #c33;
 }

-.repeatButton-active {
-    color: #4285f4;
-}
-
-.shuffleQueue-active {
-    color: #4285f4 !important;
+.buttonActive {
+    color: #00a4dc !important;
 }

 .card:focus .cardBox.visualCardBox,
--- a/src/themes/blueradiance/theme.css
+++ b/src/themes/blueradiance/theme.css
@ -441,12 +441,8 @@ html {
    color: #c33;
 }

-.repeatButton-active {
-    color: #4285f4;
-}
-
-.shuffleQueue-active {
-    color: #4285f4 !important;
+.buttonActive {
+    color: #00a4dc !important;
 }

 .cardBox:not(.visualCardBox) .cardPadder {
--- a/src/themes/dark/theme.css
+++ b/src/themes/dark/theme.css
@ -412,12 +412,8 @@ html {
    color: #c33;
 }

-.repeatButton-active {
-    color: #4285f4;
-}
-
-.shuffleQueue-active {
-    color: #4285f4 !important;
+.buttonActive {
+    color: #00a4dc !important;
 }

 .card:focus .cardBox.visualCardBox,
--- a/src/themes/light/theme.css
+++ b/src/themes/light/theme.css
@ -427,12 +427,8 @@ html {
    color: #c33;
 }

-.repeatButton-active {
-    color: #4285f4;
-}
-
-.shuffleQueue-active {
-    color: #4285f4 !important;
+.buttonActive {
+    color: #00a4dc !important;
 }

 .cardBox:not(.visualCardBox) .cardPadder {
--- a/src/themes/purplehaze/theme.css
+++ b/src/themes/purplehaze/theme.css
@ -542,12 +542,8 @@ a[data-role=button] {
    color: #c33;
 }

-.repeatButton-active {
-    color: #4285f4;
-}
-
-.shuffleQueue-active {
-    color: #4285f4 !important;
+.buttonActive {
+    color: #00a4dc !important;
 }

 .personCard .cardScalable {
--- a/src/themes/wmc/theme.css
+++ b/src/themes/wmc/theme.css
@ -421,12 +421,8 @@ html {
    color: #c33;
 }

-.repeatButton-active {
-    color: #4285f4;
-}
-
-.shuffleQueue-active {
-    color: #4285f4 !important;
+.buttonActive {
+    color: #00a4dc !important;
 }

 .cardBox:not(.visualCardBox) .cardPadder {