mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

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

Browse source 
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.
This commit is contained in:
dvdandroid 2023-01-05 11:08:02 +01:00 • committed by Davide Maggio
parent 6e66e224a9
commit c33dc8cd7a
2 changed files with 40 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/controllers/playback/video/index.js
View file

@ -787,12 +787,18 @@ import { setBackdropTransparency, TRANSPARENCY_LEVEL } from '../../../components
nowPlayingPositionText.classList.add('hide'); nowPlayingPositionText.classList.add('hide');
} }
const leftTicks = runtimeTicks - positionTicks; if (userSettings.enableVideoRemainingTime()) {
if (leftTicks >= 0) { const leftTicks = runtimeTicks - positionTicks;
updateTimeText(nowPlayingDurationText, leftTicks); if (leftTicks >= 0) {
nowPlayingDurationText.classList.remove('hide'); updateTimeText(nowPlayingDurationText, leftTicks);
nowPlayingDurationText.innerHTML = '-' + nowPlayingDurationText.innerHTML;
nowPlayingDurationText.classList.remove('hide');
} else {
nowPlayingPositionText.classList.add('hide');
}
} else { } else {
nowPlayingPositionText.classList.add('hide'); updateTimeText(nowPlayingDurationText, runtimeTicks);
nowPlayingDurationText.classList.remove('hide');
} }
} }
} }
@ -871,6 +877,19 @@ import { setBackdropTransparency, TRANSPARENCY_LEVEL } from '../../../components
elem.innerHTML = html; 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() { function onSettingsButtonClick() {
const btn = this; const btn = this;
@ -1330,6 +1349,8 @@ import { setBackdropTransparency, TRANSPARENCY_LEVEL } from '../../../components
nowPlayingPositionSlider.classList.add('focusable'); nowPlayingPositionSlider.classList.add('focusable');
} }
nowPlayingDurationText.addEventListener('click', nowPlayingDurationTextClick);
view.addEventListener('viewbeforeshow', function () { view.addEventListener('viewbeforeshow', function () {
headerElement.classList.add('osdHeader'); headerElement.classList.add('osdHeader');
setBackdropTransparency(TRANSPARENCY_LEVEL.Full); setBackdropTransparency(TRANSPARENCY_LEVEL.Full);

14
src/scripts/settings/userSettings.js
View file

@ -169,6 +169,19 @@ export class UserSettings {
return toBoolean(this.get('enableNextVideoInfoOverlay', false), true); 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. * Get or set 'Theme Songs' state.
* @param {boolean|undefined} val - Flag to enable 'Theme Songs' or undefined. * @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 preferFmp4HlsContainer = currentSettings.preferFmp4HlsContainer.bind(currentSettings);
export const enableCinemaMode = currentSettings.enableCinemaMode.bind(currentSettings); export const enableCinemaMode = currentSettings.enableCinemaMode.bind(currentSettings);
export const enableNextVideoInfoOverlay = currentSettings.enableNextVideoInfoOverlay.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 enableThemeSongs = currentSettings.enableThemeSongs.bind(currentSettings);
export const enableThemeVideos = currentSettings.enableThemeVideos.bind(currentSettings); export const enableThemeVideos = currentSettings.enableThemeVideos.bind(currentSettings);
export const enableFastFadein = currentSettings.enableFastFadein.bind(currentSettings); export const enableFastFadein = currentSettings.enableFastFadein.bind(currentSettings);