Added toggle to show/hide remaining video time in video player

Toggle applied to the remaining time label of the video player and added
`-` as a prefix of the remaining time, both behaviours like in VLC.

Toggle preference as user setting.

src/controllers/playback/video/index.js

@@ -787,13 +787,19 @@ import { setBackdropTransparency, TRANSPARENCY_LEVEL } from '../../../components
                     nowPlayingPositionText.classList.add('hide');
                 }
 
+                if (userSettings.enableVideoRemainingTime()) {
                     const leftTicks = runtimeTicks - positionTicks;
                     if (leftTicks >= 0) {
                         updateTimeText(nowPlayingDurationText, leftTicks);
+                        nowPlayingDurationText.innerHTML = '-' + nowPlayingDurationText.innerHTML;
                         nowPlayingDurationText.classList.remove('hide');
                     } else {
                         nowPlayingPositionText.classList.add('hide');
                     }
+                } else {
+                    updateTimeText(nowPlayingDurationText, runtimeTicks);
+                    nowPlayingDurationText.classList.remove('hide');
+                }
             }
         }
 
@@ -871,6 +877,19 @@ import { setBackdropTransparency, TRANSPARENCY_LEVEL } from '../../../components
             elem.innerHTML = html;
         }
 
+        function nowPlayingDurationTextClick() {
+            if (userSettings.enableVideoRemainingTime()) {
+                userSettings.enableVideoRemainingTime(false);
+            } else {
+                userSettings.enableVideoRemainingTime(true);
+            }
+            // immediately update the text, without waiting for the next tick update or if the player is paused
+            const state = playbackManager.getPlayerState(currentPlayer);
+            const playState = state.PlayState;
+            const nowPlayingItem = state.NowPlayingItem;
+            updateTimeDisplay(playState.PositionTicks, nowPlayingItem.RunTimeTicks, playState.PlaybackStartTimeTicks, playState.PlaybackRate, playState.BufferedRanges || []);
+        }
+
         function onSettingsButtonClick() {
             const btn = this;
 
@@ -1330,6 +1349,8 @@ import { setBackdropTransparency, TRANSPARENCY_LEVEL } from '../../../components
             nowPlayingPositionSlider.classList.add('focusable');
         }
 
+        nowPlayingDurationText.addEventListener('click', nowPlayingDurationTextClick);
+
         view.addEventListener('viewbeforeshow', function () {
             headerElement.classList.add('osdHeader');
             setBackdropTransparency(TRANSPARENCY_LEVEL.Full);

src/scripts/settings/userSettings.js

@@ -169,6 +169,19 @@ export class UserSettings {
         return toBoolean(this.get('enableNextVideoInfoOverlay', false), true);
     }
 
+    /**
+     * Get or set 'Video Remaining/Total Time' state.
+     * @param {boolean|undefined} val - Flag to enable 'Video Remaining/Total Time' or undefined.
+     * @return {boolean} 'Video Remaining/Total Time' state.
+     */
+    enableVideoRemainingTime(val) {
+        if (val !== undefined) {
+            return this.set('enableVideoRemainingTime', val.toString());
+        }
+
+        return toBoolean(this.get('enableVideoRemainingTime', false), true);
+    }
+
     /**
      * Get or set 'Theme Songs' state.
      * @param {boolean|undefined} val - Flag to enable 'Theme Songs' or undefined.
@@ -580,6 +593,7 @@ export const allowedAudioChannels = currentSettings.allowedAudioChannels.bind(cu
 export const preferFmp4HlsContainer = currentSettings.preferFmp4HlsContainer.bind(currentSettings);
 export const enableCinemaMode = currentSettings.enableCinemaMode.bind(currentSettings);
 export const enableNextVideoInfoOverlay = currentSettings.enableNextVideoInfoOverlay.bind(currentSettings);
+export const enableVideoRemainingTime = currentSettings.enableVideoRemainingTime.bind(currentSettings);
 export const enableThemeSongs = currentSettings.enableThemeSongs.bind(currentSettings);
 export const enableThemeVideos = currentSettings.enableThemeVideos.bind(currentSettings);
 export const enableFastFadein = currentSettings.enableFastFadein.bind(currentSettings);