Merge pull request #2078 from nyanmisaka/osd-tweak

Tweak OSD duration display for narrow screen

src/controllers/playback/video/index.html

@@ -13,11 +13,11 @@
             <div class="osdTextContainer osdSecondaryMediaInfo"></div>
 
             <div class="flex flex-direction-row align-items-center">
-                <div class="osdTextContainer startTimeText" style="margin: 0 .25em 0 0;"></div>
+                <div class="osdTextContainer startTimeText osdPositionText" style="margin: 0 .25em 0 0;"></div>
                 <div class="sliderContainer flex-grow" style="margin: .5em 0 .25em;">
                     <input type="range" step=".01" min="0" max="100" value="0" is="emby-slider" class="osdPositionSlider" data-slider-keep-progress="true" />
                 </div>
-                <div class="osdTextContainer endTimeText" style="margin: 0 0 0 .25em;"></div>
+                <div class="osdTextContainer endTimeText osdDurationText" style="margin: 0 0 0 .25em;"></div>
             </div>
 
             <div class="buttons focuscontainer-x">
@@ -46,8 +46,6 @@
                 </button>
 
                 <div class="osdTimeText">
-                    <span class="osdPositionText"></span>
-                    <span class="osdDurationText"></span>
                     <span class="endsAtText"></span>
                 </div>
 

src/controllers/playback/video/index.js

@@ -764,7 +764,7 @@ import { appRouter } from '../../../components/appRouter';
                     }
 
                     if (runtimeTicks && positionTicks != null && currentRuntimeTicks && !enableProgressByTimeOfDay && currentItem.RunTimeTicks && currentItem.Type !== 'Recording') {
-                        endsAtText.innerHTML = '  -  ' + mediaInfo.getEndsAtFromPosition(runtimeTicks, positionTicks, true);
+                        endsAtText.innerHTML = '    ' + mediaInfo.getEndsAtFromPosition(runtimeTicks, positionTicks, true);
                     } else {
                         endsAtText.innerHTML = '';
                     }
@@ -774,8 +774,20 @@ import { appRouter } from '../../../components/appRouter';
                     nowPlayingPositionSlider.setBufferedRanges(bufferedRanges, runtimeTicks, positionTicks);
                 }
 
+                if (positionTicks >= 0) {
                     updateTimeText(nowPlayingPositionText, positionTicks);
-                updateTimeText(nowPlayingDurationText, runtimeTicks, true);
+                    nowPlayingPositionText.classList.remove('hide');
+                } else {
+                    nowPlayingPositionText.classList.add('hide');
+                }
+
+                const leftTicks = runtimeTicks - positionTicks;
+                if (leftTicks >= 0) {
+                    updateTimeText(nowPlayingDurationText, leftTicks);
+                    nowPlayingDurationText.classList.remove('hide');
+                } else {
+                    nowPlayingPositionText.classList.add('hide');
+                }
             }
         }
 

src/elements/emby-slider/emby-slider.css

@@ -157,7 +157,7 @@
 }
 
 .mdl-slider-background-flex {
-    background: #333;
+    background: rgba(255, 255, 255, 0.3);
     height: 0.2em;
     margin-top: -0.1em;
     width: 100%;

src/elements/emby-slider/emby-slider.js

@@ -442,7 +442,7 @@ import '../emby-input/emby-input';
             position = (position / runtime) * 100;
         }
 
-        for (const range in ranges) {
+        for (const range of ranges) {
             if (position != null) {
                 if (position >= range.end) {
                     continue;

src/plugins/htmlVideoPlayer/plugin.js

@@ -1741,13 +1741,13 @@ function tryRemoveElement(elem) {
 
     getSupportedAspectRatios() {
         return [{
-            name: 'Auto',
+            name: globalize.translate('Auto'),
             id: 'auto'
         }, {
-            name: 'Cover',
+            name: globalize.translate('AspectRatioCover'),
             id: 'cover'
         }, {
-            name: 'Fill',
+            name: globalize.translate('AspectRatioFill'),
             id: 'fill'
         }];
     }

src/strings/en-us.json

@@ -1430,6 +1430,8 @@
     "Preview": "Preview",
     "LabelMaxMuxingQueueSize": "Max muxing queue size:",
     "LabelMaxMuxingQueueSizeHelp": "Maximum number of packets that can be buffered while waiting for all streams to initialize. Try to increase it if you still encounter \"Too many packets buffered for output stream\" error in ffmpeg logs. The recommended value is 2048.",
+    "AspectRatioCover": "Cover",
+    "AspectRatioFill": "Fill",
     "Remuxing": "Remuxing",
     "RemuxHelp1": "The media is in an incompatible file container (MKV, AVI, WMV, etc) but both the video stream and audio stream are compatible with the device. The media will be repackaged losslessly on the fly before being sent to the device.",
     "RemuxHelp2": "Remux uses very little processing power with a completely lossless media quality.",

src/strings/zh-cn.json

@@ -1433,6 +1433,8 @@
     "HeaderDeleteDevices": "删除所有设备",
     "DeleteDevicesConfirmation": "您确定要删除所有设备吗？所有其他会话将被注销。用户下次登录时，设备会重新出现。",
     "DeleteAll": "删除全部",
+    "AspectRatioCover": "覆盖",
+    "AspectRatioFill": "填充",
     "Remuxing": "转封装",
     "RemuxHelp1": "该媒体的载体（mkv、avi、wmv 等）不被设备支持，但视频流和音频流均与您的设备兼容，因此媒体在串流至您的设备之前将被即时无损地再封装。",
     "RemuxHelp2": "转封装只占用很少的 CPU 资源并且媒体将被完全无损地传输。",