mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge pull request #4357 from ThaUnknown/jassub
feat: migrate from JavascriptSubtitlesOctopus to JASSUB
This commit is contained in:
Bill Thornton
GitHub
commit
52c8cffc82
7 changed files with 127 additions and 89 deletions
|
|
@ -209,13 +209,9 @@ function tryRemoveElement(elem) {
|
|||
/**
|
||||
* @type {any | null | undefined}
|
||||
*/
|
||||
#currentSubtitlesOctopus;
|
||||
/**
|
||||
* @type {null | undefined}
|
||||
*/
|
||||
#currentAssRenderer;
|
||||
/**
|
||||
* @type {number | undefined}
|
||||
* @type {null | undefined}
|
||||
*/
|
||||
#customTrackIndex;
|
||||
/**
|
||||
|
|
@ -585,9 +581,9 @@ function tryRemoveElement(elem) {
|
|||
const offsetValue = parseFloat(offset);
|
||||
|
||||
// if .ass currently rendering
|
||||
if (this.#currentSubtitlesOctopus) {
|
||||
if (this.#currentAssRenderer) {
|
||||
this.updateCurrentTrackOffset(offsetValue);
|
||||
this.#currentSubtitlesOctopus.timeOffset = (this._currentPlayOptions.transcodingOffsetTicks || 0) / 10000000 + offsetValue;
|
||||
this.#currentAssRenderer.timeOffset = (this._currentPlayOptions.transcodingOffsetTicks || 0) / 10000000 + offsetValue;
|
||||
} else {
|
||||
const trackElements = this.getTextTracks();
|
||||
// if .vtt currently rendering
|
||||
|
|
@ -978,10 +974,8 @@ function tryRemoveElement(elem) {
|
|||
loading.hide();
|
||||
|
||||
seekOnPlaybackStart(this, e.target, this._currentPlayOptions.playerStartPositionTicks, () => {
|
||||
if (this.#currentSubtitlesOctopus) {
|
||||
this.#currentSubtitlesOctopus.timeOffset = (this._currentPlayOptions.transcodingOffsetTicks || 0) / 10000000 + this.#currentTrackOffset;
|
||||
this.#currentSubtitlesOctopus.resize();
|
||||
this.#currentSubtitlesOctopus.resetRenderAheadCache(false);
|
||||
if (this.#currentAssRenderer) {
|
||||
this.#currentAssRenderer.timeOffset = (this._currentPlayOptions.transcodingOffsetTicks || 0) / 10000000 + this.#currentTrackOffset;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -1169,15 +1163,9 @@ function tryRemoveElement(elem) {
|
|||
this.#currentClock = null;
|
||||
this._currentAspectRatio = null;
|
||||
|
||||
const octopus = this.#currentSubtitlesOctopus;
|
||||
if (octopus) {
|
||||
octopus.dispose();
|
||||
}
|
||||
this.#currentSubtitlesOctopus = null;
|
||||
|
||||
const renderer = this.#currentAssRenderer;
|
||||
if (renderer) {
|
||||
renderer.setEnabled(false);
|
||||
const jassub = this.#currentAssRenderer;
|
||||
if (jassub) {
|
||||
jassub.destroy();
|
||||
}
|
||||
this.#currentAssRenderer = null;
|
||||
}
|
||||
|
|
@ -1266,59 +1254,68 @@ function tryRemoveElement(elem) {
|
|||
const fallbackFontList = apiClient.getUrl('/FallbackFont/Fonts', {
|
||||
api_key: apiClient.accessToken()
|
||||
});
|
||||
const htmlVideoPlayer = this;
|
||||
const options = {
|
||||
video: videoElement,
|
||||
subUrl: getTextTrackUrl(track, item),
|
||||
fonts: avaliableFonts,
|
||||
workerUrl: `${appRouter.baseUrl()}/libraries/subtitles-octopus-worker.js`,
|
||||
legacyWorkerUrl: `${appRouter.baseUrl()}/libraries/subtitles-octopus-worker-legacy.js`,
|
||||
onError() {
|
||||
// HACK: Clear JavascriptSubtitlesOctopus: it gets disposed when an error occurs
|
||||
htmlVideoPlayer.#currentSubtitlesOctopus = null;
|
||||
|
||||
// HACK: Give JavascriptSubtitlesOctopus time to dispose itself
|
||||
setTimeout(() => {
|
||||
onErrorInternal(htmlVideoPlayer, 'mediadecodeerror');
|
||||
}, 0);
|
||||
},
|
||||
fallbackFont: 'liberation sans',
|
||||
availableFonts: { 'liberation sans': `${appRouter.baseUrl()}/default.woff2` },
|
||||
// Disabled eslint compat, but is safe as corejs3 polyfills URL
|
||||
// eslint-disable-next-line compat/compat
|
||||
workerUrl: new URL('jassub/dist/jassub-worker.js', import.meta.url),
|
||||
// eslint-disable-next-line compat/compat
|
||||
legacyWorkerUrl: new URL('jassub/dist/jassub-worker-legacy.js', import.meta.url),
|
||||
timeOffset: (this._currentPlayOptions.transcodingOffsetTicks || 0) / 10000000,
|
||||
|
||||
// new octopus options; override all, even defaults
|
||||
renderMode: 'wasm-blend',
|
||||
// new jassub options; override all, even defaults
|
||||
blendMode: 'js',
|
||||
asyncRender: true,
|
||||
// firefox implements offscreen canvas, but not according to spec which causes errors
|
||||
offscreenRender: !browser.firefox,
|
||||
// RVFC is polyfilled everywhere, but webOS 2 reports polyfill API's as functional even tho they aren't
|
||||
onDemandRender: browser.web0sVersion !== 2,
|
||||
useLocalFonts: true,
|
||||
dropAllAnimations: false,
|
||||
libassMemoryLimit: 40,
|
||||
libassGlyphLimit: 40,
|
||||
targetFps: 24,
|
||||
prescaleFactor: 0.8,
|
||||
prescaleHeightLimit: 1080,
|
||||
maxRenderHeight: 2160,
|
||||
resizeVariation: 0.2,
|
||||
renderAhead: 90
|
||||
maxRenderHeight: 2160
|
||||
};
|
||||
import('@jellyfin/libass-wasm').then(({ default: SubtitlesOctopus }) => {
|
||||
Promise.all([
|
||||
apiClient.getNamedConfiguration('encoding'),
|
||||
// Worker in Tizen 5 doesn't resolve relative path with async request
|
||||
resolveUrl(options.workerUrl),
|
||||
resolveUrl(options.legacyWorkerUrl)
|
||||
]).then(([config, workerUrl, legacyWorkerUrl]) => {
|
||||
options.workerUrl = workerUrl;
|
||||
options.legacyWorkerUrl = legacyWorkerUrl;
|
||||
// TODO: replace with `event-target-polyfill` once https://github.com/benlesh/event-target-polyfill/pull/12 or 11 is merged
|
||||
import('event-target-polyfill').then(() => {
|
||||
import('jassub').then(({ default: JASSUB }) => {
|
||||
Promise.all([
|
||||
apiClient.getNamedConfiguration('encoding'),
|
||||
// Worker in Tizen 5 doesn't resolve relative path with async request
|
||||
resolveUrl(options.workerUrl),
|
||||
resolveUrl(options.legacyWorkerUrl)
|
||||
]).then(([config, workerUrl, legacyWorkerUrl]) => {
|
||||
options.workerUrl = workerUrl;
|
||||
options.legacyWorkerUrl = legacyWorkerUrl;
|
||||
|
||||
if (config.EnableFallbackFont) {
|
||||
apiClient.getJSON(fallbackFontList).then((fontFiles = []) => {
|
||||
fontFiles.forEach(font => {
|
||||
const fontUrl = apiClient.getUrl(`/FallbackFont/Fonts/${font.Name}`, {
|
||||
api_key: apiClient.accessToken()
|
||||
const cleanup = () => {
|
||||
this.#currentAssRenderer.destroy();
|
||||
this.#currentAssRenderer = null;
|
||||
onErrorInternal(this, 'mediadecodeerror');
|
||||
};
|
||||
|
||||
if (config.EnableFallbackFont) {
|
||||
apiClient.getJSON(fallbackFontList).then((fontFiles = []) => {
|
||||
fontFiles.forEach(font => {
|
||||
const fontUrl = apiClient.getUrl(`/FallbackFont/Fonts/${font.Name}`, {
|
||||
api_key: apiClient.accessToken()
|
||||
});
|
||||
avaliableFonts.push(fontUrl);
|
||||
});
|
||||
avaliableFonts.push(fontUrl);
|
||||
this.#currentAssRenderer = new JASSUB(options);
|
||||
this.#currentAssRenderer.addEventListener('error', cleanup, { once: true });
|
||||
});
|
||||
this.#currentSubtitlesOctopus = new SubtitlesOctopus(options);
|
||||
});
|
||||
} else {
|
||||
this.#currentSubtitlesOctopus = new SubtitlesOctopus(options);
|
||||
}
|
||||
} else {
|
||||
this.#currentAssRenderer = new JASSUB(options);
|
||||
this.#currentAssRenderer.addEventListener('error', cleanup, { once: true });
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
z-index: 1000;
|
||||
}
|
||||
|
||||
.videoPlayerContainer .libassjs-canvas-parent {
|
||||
.videoPlayerContainer .JASSUB {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue