thaunknown / jassub Goto Github PK

In my scenario, users can configure style settings to modify subtitle styles and format. Among these controls, there is a Google Font picker that updates the subtitle font, and I need to preview it in real time.

Currently, I am destroying the object whenever there is a change in subtitles. In the case of a font change, I need to update the availableFonts and fonts fields accordingly. However, these fields expect a file path to the font. I attempted using a remote font CDN link, but it proved ineffective. and having all the google fonts locally is not possible.

Do you have any suggestions on how to implement this successfully?

Allow fonts to be ArrayBuffers or ArrayBuffer views, then transfer them so they are referenced instead of cloning them.
Currently this doesn't work, the postMessage throws an empty error :/

load non-fallback fonts via async, allowing the lib to load quicker when they are still being downloaded, this will probably need the font config to be reloaded too

It's literally impossible to render on canvas instead of video.
this._canvas is not setted and after the procedures on video it is checked
this._canvasParent is only defined if video is also defined, the documentation clearly states one is options when the other is defined (and for video it is actually true).

if (this._video) {
  this._canvasParent = document.createElement('div')
  this._canvasParent.className = 'JASSUB'
  this._canvasParent.style.position = 'relative'

  if (this._video.nextSibling) {
    this._video.parentNode.insertBefore(this._canvasParent, this._video.nextSibling)
  } else {
    this._video.parentNode.appendChild(this._canvasParent)
  }
} else if (!this._canvas) { // Checking thos this._canvas before it's even set..
  this.destroy('Don\'t know where to render: you should give video or canvas in options.')
}

The condition can be replaced by something like this:

if (options.canvas || options.video) {
  this._canvasParent = document.createElement('div')
  this._canvasParent.className = 'JASSUB'
  this._canvasParent.style.position = 'relative'
} else {
  this.destroy('Don\'t know where to render: you should give video or canvas in options.')
}

if (this._video) {
  if (this._video.nextSibling) {
    this._video.parentNode.insertBefore(this._canvasParent, this._video.nextSibling)
  } else {
    this._video.parentNode.appendChild(this._canvasParent)
  }
}

later, setVideo is called with or without a video element

this._boundResize = this.resize.bind(this)
this._boundTimeUpdate = this._timeupdate.bind(this)
this._boundSetRate = this.setRate.bind(this)
this.setVideo(options.video)

Erroring with this message:
Caused by: "Video element invalid!"
which can be solved by adding a check

get rid of fontconfig, and allow direct pushing of fonts. this will allow us to get rid of EMS's FS polyfill.
this doesn't work because even with fontconfig, pushing more fonts doesn't make libass detect more fonts.
maybe this is because I didn't reload the entire font config each time? will that fix it?

Destroying an instance and creating a new one on the same HTML5 player instance throws an exception in Firefox (it works fine in Chromium-based browsers).

Exception:

Uncaught DOMException: OffscreenCanvas.width setter: Cannot set width of placeholder canvas transferred to worker. jassub.js:205:10

This fixes typesetting on anamorphic videos.

use the same code as available fonts to find fonts using the local font access API

I'm trying to use Jassub on my Nextjs Typescript project but the worker seems not working

I used to import the worker in Vite like:
import workerUrl from "jassub/dist/jassub-worker?url";

but now when I converted my project to Nextjs I tried this method
workerUrl: new URL( "jassub/dist/jassub-worker", import.meta.url ),

but typescript shows:
Type 'URL' is not assignable to type 'string' and
Cannot use import statement outside a module

My function:

const renderer = new JASSUB({
      video: document.querySelector("video")!,
      subUrl: eng,
      useLocalFonts: false,
      availableFonts: { "Trebuchet MS": MainDomain + "fonts/en/trebuc.ttf" },
      fallbackFont: "Trebuchet MS",
      prescaleFactor: 3,
      fonts: [MainDomain + "fonts/en/trebuc.ttf"],
      workerUrl: new URL("jassub/dist/jassub-worker", import.meta.url),
    });

Is there a way to fix this?

I'm using YouTube player by using the videojs youtube plugin, but the Jassub just accept

I updated all my npm dependencies and encountered this issue, I can't tell why it happens

Uncaught (in promise) RangeError: WebAssembly.Table.get(): invalid index 584944 into funcref table of size 1000
    at ie (jassub-worker.js:2:9156)
    at Wr (jassub-worker.js:15:9810)
    at jassub-worker.wasm:0xa18b4
    at jassub-worker.wasm:0xa68eb
    at jassub-worker.wasm:0xea152
    at Dr (jassub-worker.js:15:10018)
    at jassub-worker.js:15:10373

Here is the context, since the stack trace is probably not that helpful:

	function xt(t, r, n) {
        f.hasOwnProperty(t) || ge("Replacing nonexistant public symbol"),
        f[t].overloadTable !== void 0 && n !== void 0 ? f[t].overloadTable[n] = r : (f[t] = r,
        f[t].argCount = n)
    }
    function Lt(t, r, n) {
        var i = dynCalls[t];
        return n && n.length ? i.apply(null, [r].concat(n)) : i.call(null, r)
    }
    var be = [];
    function ie(t) {
        var r = be[t];
        return r || (t >= be.length && (be.length = t + 1),
        be[t] = r = ue.get(t)), // Here
        r
    }
    function Ht(t, r, n) {
        if (t.includes("j"))
            return Lt(t, r, n);
        var i = ie(r).apply(null, n);
        return i
    }
    function Bt(t, r) {
        var n = [];
        return function() {
            return n.length = 0,
            Object.assign(n, arguments),
            Ht(t, r, n)
        }
    }

After searching a bit, it seems that the error is really similar to this one: jellyfin/jellyfin-web#4794 but on a modern version of chrome/firefox:

Chrome version: Version 117.0.5938.149
Firefox version: Version 118.0.1

If you need more context for this, you can take a look at this branch where I updated packages: zoriya/Kyoo@master...fix/things

It seems 73f4424 was reverted too much.

This and this are correct.

The subtitle resolution does not adapt to the video resolution leading to extremely low-quality subtitles.
So far only been observed in Firefox.

Example:

supposedly broken?

would it be possible to support ass playback via the index list provided in HLS?

Sorry for the stupid question. Awesome project BTW i have been digging for a way use ass subs in playback

Subtitles simply don't appear on chrome android anymore (could not tell from which version, it was already the case in 1.7.9 but maybe before too). This can be reproduced from this page, for example: https://thaunknown.github.io/jassub/jassub/simple/index.html

There aren't any errors, and debug messages in the console appears when the subtitle should be shown. It feels like everything is working as it should, but subtitles are not shown.

First: Thanks for this great project!

Importing the WASM worker file via import 'jassub/dist/jassub-worker.wasm?url' does not work in production because Vite adds a hash to the file name.

My workaround is using the 'vite-plugin-static-copy' to copy the file instead.

Do you know a way to get vite to not add the hash (without manually copying the file to the assets)? Otherwise I'd change the documentation.

And a small side question: Should the default.woff2 be copied as well?

We can use addFont to make a new font available, but we can't remove fonts that won't be used anymore to free resources.
Right now, I am doing this to change fonts but old one are still taking some RAM:

if (fonts) {
	for (const font of fonts) {
		subOcto.addFont(font);
	}
}

like drop all animations, but drops all \blur1 or \blur0.8 tags, way less intrusive and offers a lot of performance gain

A few months ago you changed the copyright notice in LICENSE from JavascriptSubtitlesOctopus contributors to JASSub contributors (and later spelling was adjusted to JASSUB contributors).
This directly violates the license terms which state:

[...], subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

Meaning you cannot ever legally remove someone else’s copyright notice from the software. By swapping out the copyright notice, the original one no longer appears anywhere not even in dist/js/COPYRIGHT and the header of dist/js/jassub.js.

If you wish to see yourself or JASSUB-specific contributors more prominently featured in the copyright notices to honour your work, you can still do so, but you must preserve the original notice. The easiest and foolproof way is to just add an additional Copyright (c) 2017-2021 JASSUB contributors line to LICENSE rather than replacing the existing notice.

TLDR offscreen canvas will stop updating the exposed after a few seconds after a resize, meaning if someone wants to clone the data the canvas outputs it will just keep yielding the same data, even tho the canvas itself updates, this can be worked around by constantly doing offscreenCavasContext.width = offscreenCavasContext.width but might have bad performance implications? maybe it could be used to clear the canvas like that instead?

As the title suggests, there appears to be a bug that causes subtitles to desynchronize from the video if the video is using HLS & has been seeked through.

Here's what I've tested so far:

• Syncs if HLS video without seeking
• Desyncs if HLS video and seeking
• Syncs if MP4 video without seeking
• Syncs if MP4 video and seeking

Hello, I'm trying to implement your lib instead of libass in Jellyfin Vue.

I'm facing a styling problem with the default font, text is too tight on Safari iPad and iPhone.

Do you happen to know if it is possible to fix it on my side? Parameters? Another font?

Thank you!

Issue:
The subContent option expects a file path to either a server URL or a local .ass file, making it challenging to provide the ASS script directly as a string.

Problem Description:
In my scenario, I need to provide the ASS script directly as a string in the subContent option. I was able to achieve this successfully using the weizhenye ASS library. However, the library lacks support for certain essential tags such as \k and \t, which are crucial for my use case.

Additional Notes:
Creating a temporary file is what in my mind currently, but with my use case the user can change the subtitle content and styles and should be able to get the preview immediately. hence on every change I'll need to create new .ass file. which may result in increased memory usage and doesn't look like an ideal implementation to me.

Your guidance and suggestions on resolving this issue in a more efficient manner would be highly appreciated.

Thank you.

Hello, I was trying to use custom fonts with my player but JASSUB would not render them it throwed the following error :

JASSUB: fontselect: failed to find any fallback with glyph 0x0 for font: (Arial, 400, 0)

My code:

// Font import
import font from "../../assets/fonts/JetBrainsMono-Regular.ttf";

// JASSUB initialization
let subtitleRenderer = new JASSUB({
                                video: player.current.getInternalPlayer(), // Getting internal video element from ReactPlayer
				subUrl: "url",
				workerUrl,
				wasmUrl,
				useLocalFonts: false,
				fallbackFont: "jet",
				availableFonts: {'jet': font}
			});

I am using ViteJs for bundling my react app. JASSUB also does not work with the default config as mentioned in README.md after building. JASSUB's default config tho works fine in dev mode.

Is there a way to make it work on React?
Theoretically, using like this should work:

// Subtitles
const renderer = new JASSUB({
    video: el,
    subContent: data.subtitles,
});

But he can't access the worker url, returning this worker error:

(The token '<' is from "< !DOCTYPE html >")

Basically, I can't make this work because can't access jassub-worker.js, jassub-worker.wasm, etc. by url

After jellyfin/jellyfin-web#4613 (+jellyfin/jellyfin-web#4702), JASSUB stopped working in Chrome 79 (and presumably on TVs with legacy web engines).

1.7.1

It looks like the buffer was copied incorrectly. It is updated when the event changes, but remains corrupted.
With asyncRender: false, it seems to work.

1.5.13 (for reference)

Sample
test.ass.txt

In "Burn-in" test the subtitles doesn't appear when switch to fullscreen with native fullscreen button.

This image when I click the "Fullscreen" button on the website.

If I click the native fullscreen button, subtitles are gone.

Tested on Google Chrome (120.0.6099.71 64-bit) on Windows.

Hello, I found ASS subtitle support broken in jellyfin-tizen TV app (a wrapper of jellyfin-web) after switching from the old renderer. I opened your demo page on TV browser and nothing showed up either.

Here is the table for browser version of Tizen TV and mine is 2021 - M76.

https://developer.samsung.com/smarttv/develop/specifications/web-engine-specifications.html

I tried the same 76 Chromium browser from https://vikyd.github.io/download-chromium-history-version/ on my laptop and it behaved the same, with SyntaxError raised in console.

Can you please help looking into this issue?

if available, prefer loading local fonts instead of remote fonts

Hi, I'd like to display subtitles without knowing their language/content beforehand.

Example languages: Japanese, Chinese, English

The default font provided with jassub does not support Chinese or Japanese and one big font supporting all languages is not possible I believe.

As far as my testing goes, fallbackFont only refers to a specific font in availableFonts but is not able to receive an array of fallback fonts.

If I'd like to use Noto Sans as a fallback font for example, the font family would be 'Noto Sans' but there exist .woff files for latin, greek, cyrillic, vietnamese.
And it looks like Japanese and Chinese are their own font families...

Would this be a possible addition to the lib?

edit:
Something I just found out: Noto Sans JP seems to be split into multiple .woff files. I'm not sure if these can be merged or if Japanese hits some kind of glyphs limit?

https://fonts.google.com/noto/specimen/Noto+Sans+JP
https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap%22%20rel=%22stylesheet

When the offset renderer is enabled, and you run new Jassub(...) with a video that as not started playing, this error is thrown:

Uncaught DOMException: OffscreenCanvas.width setter: Cannot set width of placeholder canvas transferred to worker.
    _render jassub.js:681
    _onmessage jassub.js:783
    onmessage jassub.js:120
    JASSUB jassub.js:120

This is my new call:

new Jassub({
	video: player.current,
	workerUrl: "/_next/static/chunks/jassub-worker.js",
	wasmUrl: "/_next/static/chunks/jassub-worker.wasm",
	legacyWasmUrl: "/_next/static/chunks/jassub-worker.wasm.js",
	subUrl: value.link,
	fonts: fonts,
});

(Since September 2023, OffscreenCanvas is stable in FF, so this is not like #10)

Overwriting the subtitle stream by calling the function setTrackByUrl does not work anymore.

Workaround (for Chromium browsers at least):
Destroying the old JASSUB instance and creating a new one (with the exact same URL).

Really awesome project! I'm really glad someone forked JSO!

That said, I was wondering, are there any plans on upstreaming the changes and performance fixes in this fork?

Hello,

As specified in #6, Vite bundles files with a hash. As jassub tries to load the WASM file from a static filename, loading it fails.

Solutions are either using the static copy plugin or disabling hashing by Vite.

I'm wondering if it'd be possible to have a parameter, such as the workerUrl one, to pass the WASM URL?

I've looked into the code, but I don't have the skills to see if it can be implemented as I don't have much experience with workers.

I don't mind if it's not implemented, just asking if it could be possible.

Thanks a lot!