milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: add custom rendered secondary tracks

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

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

@ -222,10 +222,18 @@ function tryRemoveElement(elem) {
* @type {HTMLElement | null | undefined}
*/
#videoSubtitlesElem;
/**
* @type {HTMLElement | null | undefined}
*/
#videoSecondarySubtitlesElem;
/**
* @type {any | null | undefined}
*/
#currentTrackEvents;
/**
* @type {any | null | undefined}
*/
#currentSecondaryTrackEvents;
/**
* @type {string[] | undefined}
*/
@ -977,16 +985,29 @@ function tryRemoveElement(elem) {
*/
destroyCustomTrack(videoElement, targetTrackIndex) {
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) {
const subtitlesContainer = this.#videoSubtitlesElem.parentNode;
if (subtitlesContainer) {
tryRemoveElement(subtitlesContainer);
}
this.#videoSubtitlesElem = null;
this.#videoSecondarySubtitlesElem = null;
}
}
this.#currentTrackEvents = null;
if (videoElement) {
const allTracks = videoElement.textTracks || []; // get list of tracks
@ -1001,7 +1022,19 @@ function tryRemoveElement(elem) {
}
}
if (destroyPrimaryTrack) {
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._currentAspectRatio = null;
@ -1191,9 +1224,10 @@ function tryRemoveElement(elem) {
/**
* @private
*/
renderSubtitlesWithCustomElement(videoElement, track, item) {
renderSubtitlesWithCustomElement(videoElement, track, item, targetTextTrackIndex) {
this.fetchSubtitles(track, item).then((data) => {
if (!this.#videoSubtitlesElem) {
if (!this.isSecondaryTrack(targetTextTrackIndex)) {
const subtitlesContainer = document.createElement('div');
subtitlesContainer.classList.add('videoSubtitles');
subtitlesContainer.innerHTML = '<div class="videoSubtitlesInner"></div>';
@ -1202,6 +1236,16 @@ function tryRemoveElement(elem) {
videoElement.parentNode.appendChild(subtitlesContainer);
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;
}
const trackEvents = this.#currentTrackEvents;
const subtitleTextElement = this.#videoSubtitlesElem;
const allTrackEvents = [this.#currentTrackEvents, this.#currentSecondaryTrackEvents];
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) {
const ticks = timeMs * 10000;
@ -1345,6 +1393,7 @@ function tryRemoveElement(elem) {
}
}
}
}
/**
* @private

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

@ -74,6 +74,14 @@ video[controls]::-webkit-media-controls {
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 {
from {
transform: scale3d(0.2, 0.2, 0.2);