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

fix: use correct stream, code safety, race conditions, update css

Browse source
This commit is contained in:
Ivan Schurawel 2022-11-14 22:29:30 -05:00 • committed by Ivan Schurawel
parent f3865f0dac
commit b1e397c4bc
4 changed files with 22 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/playback/playbackmanager.js
View file

@ -911,7 +911,7 @@ class PlaybackManager {
return null; return null;
} }
return getSubtitleStream(player, index); return self.getSubtitleStream(player, index);
} }
function getCurrentSecondarySubtitleStream(player) { function getCurrentSecondarySubtitleStream(player) {
@ -925,14 +925,14 @@ class PlaybackManager {
return null; 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 self.subtitleTracks(player).filter(function (s) {
return s.Type === 'Subtitle' && s.Index === index; return s.Type === 'Subtitle' && s.Index === index;
})[0]; })[0];
} };
self.getPlaylist = function (player) { self.getPlaylist = function (player) {
player = player || self._currentPlayer; player = player || self._currentPlayer;
@ -1536,7 +1536,7 @@ class PlaybackManager {
const currentStream = getCurrentSubtitleStream(player); const currentStream = getCurrentSubtitleStream(player);
const newStream = getSubtitleStream(player, index); const newStream = self.getSubtitleStream(player, index);
if (!currentStream && !newStream) { if (!currentStream && !newStream) {
return; return;
@ -1581,7 +1581,7 @@ class PlaybackManager {
// Also disable secondary subtitles when disabling the primary // Also disable secondary subtitles when disabling the primary
// subtitles, or if it doesn't support a secondary pair // subtitles, or if it doesn't support a secondary pair
if (selectedTrackElementIndex === -1 || !self.trackHasSecondarySubtitleSupport(newStream)) { if (selectedTrackElementIndex === -1 || !self.trackHasSecondarySubtitleSupport(newStream)) {
self.setSecondarySubtitleStreamIndex(selectedTrackElementIndex); self.setSecondarySubtitleStreamIndex(-1);
} }
getPlayerData(player).subtitleStreamIndex = index; getPlayerData(player).subtitleStreamIndex = index;
@ -1600,7 +1600,7 @@ class PlaybackManager {
const currentStream = getCurrentSecondarySubtitleStream(player); const currentStream = getCurrentSecondarySubtitleStream(player);
const newStream = getSubtitleStream(player, index); const newStream = self.getSubtitleStream(player, index);
if (!currentStream && !newStream) { if (!currentStream && !newStream) {
return; return;
@ -1644,7 +1644,7 @@ class PlaybackManager {
}; };
self.isSubtitleStreamExternal = function (index, player) { self.isSubtitleStreamExternal = function (index, player) {
const stream = getSubtitleStream(player, index); const stream = self.getSubtitleStream(player, index);
return stream ? getDeliveryMethod(stream) === 'External' : false; return stream ? getDeliveryMethod(stream) === 'External' : false;
}; };

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

@ -1068,13 +1068,13 @@ import { setBackdropTransparency, TRANSPARENCY_LEVEL } from '../../../components
* - has more than 1 subtitle track * - has more than 1 subtitle track
* - has valid secondary tracks * - has valid secondary tracks
* - primary subtitle is not off * - 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) && const currentTrackCanAddSecondarySubtitle = playbackManager.playerHasSecondarySubtitleSupport(player) &&
streams.length > 1 && streams.length > 1 &&
secondaryStreams.length > 0 && secondaryStreams.length > 0 &&
currentIndex !== -1 && currentIndex !== -1 &&
playbackManager.trackHasSecondarySubtitleSupport(streams[currentIndex + 1], player); playbackManager.trackHasSecondarySubtitleSupport(playbackManager.getSubtitleStream(player, currentIndex), player);
if (currentTrackCanAddSecondarySubtitle) { if (currentTrackCanAddSecondarySubtitle) {
const secondarySubtitleMenuItem = { const secondarySubtitleMenuItem = {

27
src/plugins/htmlVideoPlayer/plugin.js
View file

@ -229,10 +229,6 @@ function tryRemoveElement(elem) {
* @type {HTMLElement | null | undefined} * @type {HTMLElement | null | undefined}
*/ */
#secondaryTrackOffset; #secondaryTrackOffset;
/**
* @type {number | null | undefined}
*/
#subtitleVerticalPosition;
/** /**
* @type {HTMLElement | null | undefined} * @type {HTMLElement | null | undefined}
*/ */
@ -589,7 +585,7 @@ function tryRemoveElement(elem) {
} else { } else {
const trackElements = this.getTextTracks(); const trackElements = this.getTextTracks();
// if .vtt currently rendering // if .vtt currently rendering
if (trackElements.length > 0) { if (trackElements?.length > 0) {
trackElements.forEach((trackElement, index) => { trackElements.forEach((trackElement, index) => {
this.setTextTrackSubtitleOffset(trackElement, offsetValue, index); this.setTextTrackSubtitleOffset(trackElement, offsetValue, index);
}); });
@ -1142,7 +1138,6 @@ function tryRemoveElement(elem) {
this.destroyNativeTracks(videoElement, targetTrackIndex); this.destroyNativeTracks(videoElement, targetTrackIndex);
this.destroyStoredTrackInfo(targetTrackIndex); this.destroyStoredTrackInfo(targetTrackIndex);
this.#subtitleVerticalPosition = null;
this.#currentClock = null; this.#currentClock = null;
this._currentAspectRatio = null; this._currentAspectRatio = null;
@ -1333,15 +1328,11 @@ function tryRemoveElement(elem) {
* @private * @private
*/ */
renderSubtitlesWithCustomElement(videoElement, track, item, targetTextTrackIndex) { renderSubtitlesWithCustomElement(videoElement, track, item, targetTextTrackIndex) {
if (this.#subtitleVerticalPosition == null) { Promise.all([import('../../scripts/settings/userSettings'), this.fetchSubtitles(track, item)]).then((results) => {
import('../../scripts/settings/userSettings').then((userSettings) => { const [userSettings, subtitleData] = results;
const subtitleAppearance = userSettings.getSubtitleAppearanceSettings(); const subtitleAppearance = userSettings.getSubtitleAppearanceSettings();
this.#subtitleVerticalPosition = subtitleAppearance.verticalPosition; const subtitleVerticalPosition = parseInt(subtitleAppearance.verticalPosition, 10);
this.#subtitleVerticalPosition = parseInt(subtitleAppearance.verticalPosition, 10);
});
}
this.fetchSubtitles(track, item).then((data) => {
if (!this.#videoSubtitlesElem && !this.isSecondaryTrack(targetTextTrackIndex)) { if (!this.#videoSubtitlesElem && !this.isSecondaryTrack(targetTextTrackIndex)) {
let subtitlesContainer = document.querySelector('.videoSubtitles'); let subtitlesContainer = document.querySelector('.videoSubtitles');
if (!subtitlesContainer) { if (!subtitlesContainer) {
@ -1354,21 +1345,21 @@ function tryRemoveElement(elem) {
this.#videoSubtitlesElem = subtitlesContainer.querySelector('.videoSubtitlesInner'); this.#videoSubtitlesElem = subtitlesContainer.querySelector('.videoSubtitlesInner');
this.setSubtitleAppearance(subtitlesContainer, this.#videoSubtitlesElem); this.setSubtitleAppearance(subtitlesContainer, this.#videoSubtitlesElem);
videoElement.parentNode.appendChild(subtitlesContainer); videoElement.parentNode.appendChild(subtitlesContainer);
this.#currentTrackEvents = data.TrackEvents; this.#currentTrackEvents = subtitleData.TrackEvents;
} else if (!this.#videoSecondarySubtitlesElem && this.isSecondaryTrack(targetTextTrackIndex)) { } else if (!this.#videoSecondarySubtitlesElem && this.isSecondaryTrack(targetTextTrackIndex)) {
const subtitlesContainer = document.querySelector('.videoSubtitles'); const subtitlesContainer = document.querySelector('.videoSubtitles');
if (!subtitlesContainer) return; if (!subtitlesContainer) return;
const secondarySubtitlesElement = document.createElement('div'); const secondarySubtitlesElement = document.createElement('div');
secondarySubtitlesElement.classList.add('videoSecondarySubtitlesInner'); secondarySubtitlesElement.classList.add('videoSecondarySubtitlesInner');
// determine the order of the subtitles // determine the order of the subtitles
if (this.#subtitleVerticalPosition < 0) { if (subtitleVerticalPosition < 0) {
subtitlesContainer.prepend(secondarySubtitlesElement); subtitlesContainer.insertBefore(secondarySubtitlesElement, subtitlesContainer.firstChild);
} else { } else {
subtitlesContainer.appendChild(secondarySubtitlesElement); subtitlesContainer.appendChild(secondarySubtitlesElement);
} }
this.#videoSecondarySubtitlesElem = secondarySubtitlesElement; this.#videoSecondarySubtitlesElem = secondarySubtitlesElement;
this.setSubtitleAppearance(subtitlesContainer, this.#videoSecondarySubtitlesElem); this.setSubtitleAppearance(subtitlesContainer, this.#videoSecondarySubtitlesElem);
this.#currentSecondaryTrackEvents = data.TrackEvents; this.#currentSecondaryTrackEvents = subtitleData.TrackEvents;
} }
}); });
} }

7
src/plugins/htmlVideoPlayer/style.scss
View file

@ -65,20 +65,19 @@ video[controls]::-webkit-media-controls {
padding-left: env(safe-area-inset-left); padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right); padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
display: flex;
flex-direction: column;
align-items: center;
} }
.videoSubtitlesInner { .videoSubtitlesInner {
max-width: 70%; max-width: 70%;
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.8);
margin: auto;
display: inline-block;
} }
.videoSecondarySubtitlesInner { .videoSecondarySubtitlesInner {
max-width: 70%; max-width: 70%;
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.8);
margin: auto;
display: block;
min-height: 0 !important; min-height: 0 !important;
margin-top: 0.5em !important; margin-top: 0.5em !important;
margin-bottom: 0.5em !important; margin-bottom: 0.5em !important;