From b1e397c4bcadd3514543f32eda25413b52e0c6dc Mon Sep 17 00:00:00 2001 From: Ivan Schurawel Date: Mon, 14 Nov 2022 22:29:30 -0500 Subject: [PATCH] fix: use correct stream, code safety, race conditions, update css --- src/components/playback/playbackmanager.js | 16 ++++++------- src/controllers/playback/video/index.js | 4 ++-- src/plugins/htmlVideoPlayer/plugin.js | 27 ++++++++-------------- src/plugins/htmlVideoPlayer/style.scss | 7 +++--- 4 files changed, 22 insertions(+), 32 deletions(-) diff --git a/src/components/playback/playbackmanager.js b/src/components/playback/playbackmanager.js index 9104eceb7..493df16e1 100644 --- a/src/components/playback/playbackmanager.js +++ b/src/components/playback/playbackmanager.js @@ -911,7 +911,7 @@ class PlaybackManager { return null; } - return getSubtitleStream(player, index); + return self.getSubtitleStream(player, index); } function getCurrentSecondarySubtitleStream(player) { @@ -925,14 +925,14 @@ class PlaybackManager { return null; } - return getSubtitleStream(player, index); + return self.getSubtitleStream(player, index); } - function getSubtitleStream(player, index) { + self.getSubtitleStream = function (player, index) { return self.subtitleTracks(player).filter(function (s) { return s.Type === 'Subtitle' && s.Index === index; })[0]; - } + }; self.getPlaylist = function (player) { player = player || self._currentPlayer; @@ -1536,7 +1536,7 @@ class PlaybackManager { const currentStream = getCurrentSubtitleStream(player); - const newStream = getSubtitleStream(player, index); + const newStream = self.getSubtitleStream(player, index); if (!currentStream && !newStream) { return; @@ -1581,7 +1581,7 @@ class PlaybackManager { // Also disable secondary subtitles when disabling the primary // subtitles, or if it doesn't support a secondary pair if (selectedTrackElementIndex === -1 || !self.trackHasSecondarySubtitleSupport(newStream)) { - self.setSecondarySubtitleStreamIndex(selectedTrackElementIndex); + self.setSecondarySubtitleStreamIndex(-1); } getPlayerData(player).subtitleStreamIndex = index; @@ -1600,7 +1600,7 @@ class PlaybackManager { const currentStream = getCurrentSecondarySubtitleStream(player); - const newStream = getSubtitleStream(player, index); + const newStream = self.getSubtitleStream(player, index); if (!currentStream && !newStream) { return; @@ -1644,7 +1644,7 @@ class PlaybackManager { }; self.isSubtitleStreamExternal = function (index, player) { - const stream = getSubtitleStream(player, index); + const stream = self.getSubtitleStream(player, index); return stream ? getDeliveryMethod(stream) === 'External' : false; }; diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js index 1f1006ddb..74ba461e8 100644 --- a/src/controllers/playback/video/index.js +++ b/src/controllers/playback/video/index.js @@ -1068,13 +1068,13 @@ import { setBackdropTransparency, TRANSPARENCY_LEVEL } from '../../../components * - has more than 1 subtitle track * - has valid secondary tracks * - primary subtitle is not off - * - primary subtitle has support (index + 1 because `'Off'` is index 0 in `streams` array) + * - primary subtitle has support */ const currentTrackCanAddSecondarySubtitle = playbackManager.playerHasSecondarySubtitleSupport(player) && streams.length > 1 && secondaryStreams.length > 0 && currentIndex !== -1 && - playbackManager.trackHasSecondarySubtitleSupport(streams[currentIndex + 1], player); + playbackManager.trackHasSecondarySubtitleSupport(playbackManager.getSubtitleStream(player, currentIndex), player); if (currentTrackCanAddSecondarySubtitle) { const secondarySubtitleMenuItem = { diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js index a40b99a27..bfa74fb2c 100644 --- a/src/plugins/htmlVideoPlayer/plugin.js +++ b/src/plugins/htmlVideoPlayer/plugin.js @@ -229,10 +229,6 @@ function tryRemoveElement(elem) { * @type {HTMLElement | null | undefined} */ #secondaryTrackOffset; - /** - * @type {number | null | undefined} - */ - #subtitleVerticalPosition; /** * @type {HTMLElement | null | undefined} */ @@ -589,7 +585,7 @@ function tryRemoveElement(elem) { } else { const trackElements = this.getTextTracks(); // if .vtt currently rendering - if (trackElements.length > 0) { + if (trackElements?.length > 0) { trackElements.forEach((trackElement, index) => { this.setTextTrackSubtitleOffset(trackElement, offsetValue, index); }); @@ -1142,7 +1138,6 @@ function tryRemoveElement(elem) { this.destroyNativeTracks(videoElement, targetTrackIndex); this.destroyStoredTrackInfo(targetTrackIndex); - this.#subtitleVerticalPosition = null; this.#currentClock = null; this._currentAspectRatio = null; @@ -1333,15 +1328,11 @@ function tryRemoveElement(elem) { * @private */ renderSubtitlesWithCustomElement(videoElement, track, item, targetTextTrackIndex) { - if (this.#subtitleVerticalPosition == null) { - import('../../scripts/settings/userSettings').then((userSettings) => { - const subtitleAppearance = userSettings.getSubtitleAppearanceSettings(); - this.#subtitleVerticalPosition = subtitleAppearance.verticalPosition; - this.#subtitleVerticalPosition = parseInt(subtitleAppearance.verticalPosition, 10); - }); - } + Promise.all([import('../../scripts/settings/userSettings'), this.fetchSubtitles(track, item)]).then((results) => { + const [userSettings, subtitleData] = results; + const subtitleAppearance = userSettings.getSubtitleAppearanceSettings(); + const subtitleVerticalPosition = parseInt(subtitleAppearance.verticalPosition, 10); - this.fetchSubtitles(track, item).then((data) => { if (!this.#videoSubtitlesElem && !this.isSecondaryTrack(targetTextTrackIndex)) { let subtitlesContainer = document.querySelector('.videoSubtitles'); if (!subtitlesContainer) { @@ -1354,21 +1345,21 @@ function tryRemoveElement(elem) { this.#videoSubtitlesElem = subtitlesContainer.querySelector('.videoSubtitlesInner'); this.setSubtitleAppearance(subtitlesContainer, this.#videoSubtitlesElem); videoElement.parentNode.appendChild(subtitlesContainer); - this.#currentTrackEvents = data.TrackEvents; + this.#currentTrackEvents = subtitleData.TrackEvents; } else if (!this.#videoSecondarySubtitlesElem && this.isSecondaryTrack(targetTextTrackIndex)) { const subtitlesContainer = document.querySelector('.videoSubtitles'); if (!subtitlesContainer) return; const secondarySubtitlesElement = document.createElement('div'); secondarySubtitlesElement.classList.add('videoSecondarySubtitlesInner'); // determine the order of the subtitles - if (this.#subtitleVerticalPosition < 0) { - subtitlesContainer.prepend(secondarySubtitlesElement); + if (subtitleVerticalPosition < 0) { + subtitlesContainer.insertBefore(secondarySubtitlesElement, subtitlesContainer.firstChild); } else { subtitlesContainer.appendChild(secondarySubtitlesElement); } this.#videoSecondarySubtitlesElem = secondarySubtitlesElement; this.setSubtitleAppearance(subtitlesContainer, this.#videoSecondarySubtitlesElem); - this.#currentSecondaryTrackEvents = data.TrackEvents; + this.#currentSecondaryTrackEvents = subtitleData.TrackEvents; } }); } diff --git a/src/plugins/htmlVideoPlayer/style.scss b/src/plugins/htmlVideoPlayer/style.scss index 21b204739..002614608 100644 --- a/src/plugins/htmlVideoPlayer/style.scss +++ b/src/plugins/htmlVideoPlayer/style.scss @@ -65,20 +65,19 @@ video[controls]::-webkit-media-controls { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); + display: flex; + flex-direction: column; + align-items: center; } .videoSubtitlesInner { max-width: 70%; background-color: rgba(0, 0, 0, 0.8); - margin: auto; - display: inline-block; } .videoSecondarySubtitlesInner { max-width: 70%; background-color: rgba(0, 0, 0, 0.8); - margin: auto; - display: block; min-height: 0 !important; margin-top: 0.5em !important; margin-bottom: 0.5em !important;