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

feat: add custom rendered secondary tracks

This commit is contained in:
Ivan Schurawel 2022-09-15 14:25:34 -04:00 committed by Ivan Schurawel
parent 145aea184f
commit ab993886c1
2 changed files with 88 additions and 31 deletions

View file

@ -222,10 +222,18 @@ function tryRemoveElement(elem) {
* @type {HTMLElement | null | undefined} * @type {HTMLElement | null | undefined}
*/ */
#videoSubtitlesElem; #videoSubtitlesElem;
/**
* @type {HTMLElement | null | undefined}
*/
#videoSecondarySubtitlesElem;
/** /**
* @type {any | null | undefined} * @type {any | null | undefined}
*/ */
#currentTrackEvents; #currentTrackEvents;
/**
* @type {any | null | undefined}
*/
#currentSecondaryTrackEvents;
/** /**
* @type {string[] | undefined} * @type {string[] | undefined}
*/ */
@ -977,16 +985,29 @@ function tryRemoveElement(elem) {
*/ */
destroyCustomTrack(videoElement, targetTrackIndex) { destroyCustomTrack(videoElement, targetTrackIndex) {
const destroySingleTrack = typeof targetTrackIndex === 'number'; const destroySingleTrack = typeof targetTrackIndex === 'number';
const destroyPrimaryTrack = targetTrackIndex === this._PRIMARY_TEXT_TRACK_INDEX;
const destroySecondaryTrack = targetTrackIndex === this._SECONDARY_TEXT_TRACK_INDEX;
if (destroyPrimaryTrack) {
if (this.#videoSubtitlesElem) {
tryRemoveElement(this.#videoSubtitlesElem);
this.#videoSubtitlesElem = null;
}
} else if (destroySecondaryTrack) {
if (this.#videoSecondarySubtitlesElem) {
tryRemoveElement(this.#videoSecondarySubtitlesElem);
this.#videoSecondarySubtitlesElem = null;
}
} else {
if (this.#videoSubtitlesElem) { if (this.#videoSubtitlesElem) {
const subtitlesContainer = this.#videoSubtitlesElem.parentNode; const subtitlesContainer = this.#videoSubtitlesElem.parentNode;
if (subtitlesContainer) { if (subtitlesContainer) {
tryRemoveElement(subtitlesContainer); tryRemoveElement(subtitlesContainer);
} }
this.#videoSubtitlesElem = null; this.#videoSubtitlesElem = null;
this.#videoSecondarySubtitlesElem = null;
}
} }
this.#currentTrackEvents = null;
if (videoElement) { if (videoElement) {
const allTracks = videoElement.textTracks || []; // get list of tracks const allTracks = videoElement.textTracks || []; // get list of tracks
@ -1001,7 +1022,19 @@ function tryRemoveElement(elem) {
} }
} }
if (destroyPrimaryTrack) {
this.#customTrackIndex = -1; this.#customTrackIndex = -1;
this.#currentTrackEvents = null;
} else if (destroySecondaryTrack) {
this.#customSecondaryTrackIndex = -1;
this.#currentSecondaryTrackEvents = null;
} else {
this.#customTrackIndex = -1;
this.#customSecondaryTrackIndex = -1;
this.#currentTrackEvents = null;
this.#currentSecondaryTrackEvents = null;
}
this.#currentClock = null; this.#currentClock = null;
this._currentAspectRatio = null; this._currentAspectRatio = null;
@ -1191,9 +1224,10 @@ function tryRemoveElement(elem) {
/** /**
* @private * @private
*/ */
renderSubtitlesWithCustomElement(videoElement, track, item) { renderSubtitlesWithCustomElement(videoElement, track, item, targetTextTrackIndex) {
this.fetchSubtitles(track, item).then((data) => { this.fetchSubtitles(track, item).then((data) => {
if (!this.#videoSubtitlesElem) { if (!this.#videoSubtitlesElem) {
if (!this.isSecondaryTrack(targetTextTrackIndex)) {
const subtitlesContainer = document.createElement('div'); const subtitlesContainer = document.createElement('div');
subtitlesContainer.classList.add('videoSubtitles'); subtitlesContainer.classList.add('videoSubtitles');
subtitlesContainer.innerHTML = '<div class="videoSubtitlesInner"></div>'; subtitlesContainer.innerHTML = '<div class="videoSubtitlesInner"></div>';
@ -1202,6 +1236,16 @@ function tryRemoveElement(elem) {
videoElement.parentNode.appendChild(subtitlesContainer); videoElement.parentNode.appendChild(subtitlesContainer);
this.#currentTrackEvents = data.TrackEvents; this.#currentTrackEvents = data.TrackEvents;
} }
} else if (this.isSecondaryTrack(targetTextTrackIndex)) {
const subtitlesContainer = document.querySelector('.videoSubtitles');
if (!subtitlesContainer) return;
const secondarySubtitlesElement = document.createElement('div');
secondarySubtitlesElement.classList.add('videoSecondarySubtitlesInner');
subtitlesContainer.prepend(secondarySubtitlesElement);
this.#videoSecondarySubtitlesElem = secondarySubtitlesElement;
this.setSubtitleAppearance(subtitlesContainer, this.#videoSecondarySubtitlesElem);
this.#currentSecondaryTrackEvents = data.TrackEvents;
}
}); });
} }
@ -1324,8 +1368,12 @@ function tryRemoveElement(elem) {
return; return;
} }
const trackEvents = this.#currentTrackEvents; const allTrackEvents = [this.#currentTrackEvents, this.#currentSecondaryTrackEvents];
const subtitleTextElement = this.#videoSubtitlesElem; const subtitleTextElements = [this.#videoSubtitlesElem, this.#videoSecondarySubtitlesElem];
for (let i = 0; i < allTrackEvents.length; i++) {
const trackEvents = allTrackEvents[i];
const subtitleTextElement = subtitleTextElements[i];
if (trackEvents && subtitleTextElement) { if (trackEvents && subtitleTextElement) {
const ticks = timeMs * 10000; const ticks = timeMs * 10000;
@ -1345,6 +1393,7 @@ function tryRemoveElement(elem) {
} }
} }
} }
}
/** /**
* @private * @private

View file

@ -74,6 +74,14 @@ video[controls]::-webkit-media-controls {
display: inline-block; display: inline-block;
} }
.videoSecondarySubtitlesInner {
max-width: 70%;
background-color: rgba(0, 0, 0, 0.8);
margin: auto;
display: block;
margin-bottom: 0 !important;
}
@keyframes htmlvideoplayer-zoomin { @keyframes htmlvideoplayer-zoomin {
from { from {
transform: scale3d(0.2, 0.2, 0.2); transform: scale3d(0.2, 0.2, 0.2);