sabre-js / sabre.js Goto Github PK
View Code? Open in Web Editor NEWSubstation Alpha suBtitles REnderer -- A Gpu Accelerated Javascript Advanced SubStation Alpha Subtitles Renderer.
License: Other
Substation Alpha suBtitles REnderer -- A Gpu Accelerated Javascript Advanced SubStation Alpha Subtitles Renderer.
License: Other
Get pre-commit hooks working for prettier and eslint.
eslint needs to have compatibility configs for both closure compiler and prettier and.
Prettier should have the following options configured:
{
“tabWidth”: 4,
“quoteProps”: “preserve”,
“trailingComma”: “none”
}
This issue will block until we attain psychovisual equivalency to libass.
E.g. \an 8
is equivalent to \an8
, \pos ( 100 , 200 )
is equivalent to \pos(100,200)
, \fn Arial
is equivalent to \fnArial
.
We need to come up with and implement a way of doing axis dependent sizing of the outline of text and shapes in canvas-2d-text-renderer.js
and canvas-2d-shape-renderer.js
.
We need to implement unit testing of some kind into the build system.
this should preferably be done as part of the pre-commit hook
The parser simply drops leading and trailing &
s and H
s from hex strings before parsing them, they're not actually used for matching. Additionally, hex args can have a 0x
prefix (any &H
must come before that, if present).
E.g. \an(8)
is valid and equivalent to \an(8)
. If both parenthesized and non-parenthesized args are present, then the parenthesized args are treated as being first, with the non-parenthesized one treated as last. E.g. \1a0(FF)
is equivalent to \1a(FF,0)
, which is equivalent to \1aFF
, not \1a0
as you might expect.
This depends on #63, The characters should be cached before being displayed to speed up render times.
colors are mapped to the primary color.
See src/style.js:111, src/style.js:118, src/style.js:125, src/style.js:132, src/style.js:139 and src/style.js:146
Lines 109 to 149 in 4e0a42a
Style definition parsing needs to be implemented in the subtitle parser.
Hello SABRE.js Team,
I am currently exploring JavaScript libraries for my upcoming project and came across SABRE.js. Your library seems very promising and aligns well with my project's requirements. However, I am having some challenges in understanding how to get started effectively.
I kindly request if you could provide a basic demo or example that illustrates the core functionalities of SABRE.js. A simple demonstration, possibly in the form of a GitHub repository or a CodePen/JSFiddle example, would be incredibly helpful. Specifically, I am looking for examples that showcase:
This demo will not only assist me but also help other new users to understand the practical implementation of SABRE.js in a real-world scenario.
Thank you for your hard work on this library and for considering this request. I believe a basic demo would be a valuable addition to your documentation.
Best regards,
This has been fixed already, just need to publish the changes.
We need unit tests for src/subtitle-parser.js
following a similar style to the ones for src/color.js
which may be found in src/__tests__/color.test.js
including a comprehensive test of the whole parsing subsystem.
We need unit tests for src/util.js
following a similar style to the ones for src/color.js
which may be found in src/__tests__/color.test.js
Implement font selection using CSS font loading API and a CSS font loading API polyfill using @font-face and offscreen text to force loading the fonts.
This should use a still image perceptual comparison algorithm to compare output. Something similar to PSNR.
We need unit tests for src/subtitle-event.js
following a similar style to the ones for src/color.js
which may be found in src/__tests__/color.test.js
This is fixed by #50
Need 2-Pass Gaussian Blur shaders for the blurring step in the compositor.
these should be placed in a new folder inside src
called shaders
.
I'm not the best with math, so a efficient way to implement this has been an issue for me.
Underline needs adding to the text renderer.
This is a major refactor of the codebase, will take quite a bit of work.
Describe the bug
Vertical line artifacts appear on subtitles.
To Reproduce
Unknown at this time.
Expected behavior
There should be no vertical lines appearing between letters.
Screenshots and Test Cases
TODO: Add some screenshots
Desktop (please complete the following information):
We need a better designed version of the logo. Contact me on discord to discuss.
Compositor needs to be implemented.
Describe the bug
the functions at:
/src/renderer-main.js:1687
/src/renderer-main.js:1434
/src/renderer-main.js:1164
/src/renderer-main.js:1313
need to be reworked so they're more efficient and less buggy.
Additional context
The code as it is doesn't position text correctly on some of the test cases I have, we need to isolate why and optimize the collision code.
We need unit tests for src/scheduler.js
following a similar style to the ones for src/color.js
which may be found in src/__tests__/color.test.js
Reimplement and restructure the canvas2d text renderer in a more organized manner.
We need more tests for the parsing code, both unit and comprehensive tests. Comprehensive tests can be made using Aegisub. I am willing to peer program with/work with/mentor anyone who tackles this issue for hacktoberfest as it's a little more complex than some of the other ones we have available. Background as a typesetter for subtitles is useful but not needed.
We need to find a good way to grab information on a font so this can be worked around.
This issue will block until we attain psychovisual equivalency to SSA.
This is a simple change, we need someone to go through and change the functions like so:
_parseTime: {
/**
* Parses a string into a time
* @param {string} timestring the string containing the time.
* @return {number} time in seconds.
*/
value: function (timestring) {
let array = timestring.split(":");
let time = 0;
for (let i = 0; i < array.length; i++) {
if (i !== array.length - 1) {
time += global.parseInt(array[i], 10);
time *= 60;
} else {
time += global.parseFloat(array[i]);
}
}
return time;
},
writable: false
},
becomes:
_parseTime: {
/**
* Parses a string into a time
* @param {string} timestring the string containing the time.
* @return {number} time in seconds.
*/
value: function _parseTime (timestring) {
let array = timestring.split(":");
let time = 0;
for (let i = 0; i < array.length; i++) {
if (i !== array.length - 1) {
time += global.parseInt(array[i], 10);
time *= 60;
} else {
time += global.parseFloat(array[i]);
}
}
return time;
},
writable: false
},
We need to add the variable names to the functions so the debuggers can identify them.
Draw strikeout/strikethrough on text.
Yup.
We need unit tests for src/style.js
following a similar style to the ones for src/color.js
which may be found in src/__tests__/color.test.js
This issue will block until we attain psychovisual equivalency to vsfilter.
We need unit tests for src/style-override.js
following a similar style to the ones for src/color.js
which may be found in src/__tests__/color.test.js
Describe the bug
The \blur tag is to be evalutated to a size of 3*sigma+0.5. We currently evaluate it for the whole video width and height.
To Reproduce
Use the \blur tag
Expected behavior
A reasonably fast speed for the blur
Desktop (please complete the following information):
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.