Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-07-09 03:04:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Using subtitles-octopus to render subtitles

Browse Source
This commit is contained in:
Zoe Roux 2020-10-26 03:03:20 +01:00
parent 199e541997
commit cdb3cf696c
18 changed files with 865 additions and 4405 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.editorconfig
View File

@ -3,9 +3,10 @@ root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
indent_style = tab
indent_size = 4
insert_final_newline = true
max_line_length = 120
trim_trailing_whitespace = true
[*.md]

18
angular.json
View File

@ -21,10 +21,15 @@
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"tsConfig": "tsconfig.json",
"aot": false,
"assets": [
"src/assets"
"src/assets",
{
"input": "node_modules/libass-wasm/dist/js",
"glob": "subtitles-octopus-worker*",
"output": "."
}
],
"styles": [
"src/styles.scss"
@ -32,8 +37,7 @@
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
"./node_modules/hls.js/dist/hls.js",
"./src/libraries/subtitles.js"
"./node_modules/hls.js/dist/hls.js"
]
},
"configurations": {
@ -88,11 +92,7 @@
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"tsConfig": "tsconfig.json",
"exclude": [
"**/node_modules/**"
]

12
browserslist
View File

@ -1,12 +0,0 @@
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# You can see what browsers were selected by your queries by running:
# npx browserslist
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.

1128
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

57
package.json
View File

@ -5,39 +5,48 @@
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"lint": "ng lint"
"lint": "ng lint",
"postinstall": "./subtitles-octopus-fix.sh"
},
"private": true,
"browserslist": [
"> 0.5%",
"last 2 versions",
"Firefox ESR",
"not dead",
"not IE 9-11"
],
"dependencies": {
"@angular/animations": "^10.1.4",
"@angular/cdk": "^10.2.3",
"@angular/common": "^10.1.4",
"@angular/compiler": "^10.1.4",
"@angular/core": "^10.1.4",
"@angular/forms": "^10.1.4",
"@angular/material": "^10.2.3",
"@angular/platform-browser": "^10.1.4",
"@angular/platform-browser-dynamic": "^10.1.4",
"@angular/router": "^10.1.4",
"angular-auth-oidc-client": "11.2.0",
"bootstrap": "^4.5.2",
"detect-browser": "^5.1.1",
"hls.js": "^0.14.13",
"@angular/animations": "^10.2.0",
"@angular/cdk": "^10.2.5",
"@angular/common": "^10.2.0",
"@angular/compiler": "^10.2.0",
"@angular/core": "^10.2.0",
"@angular/forms": "^10.2.0",
"@angular/material": "^10.2.5",
"@angular/platform-browser": "^10.2.0",
"@angular/platform-browser-dynamic": "^10.2.0",
"@angular/router": "^10.2.0",
"angular-auth-oidc-client": "11.2.1",
"bootstrap": "^4.5.3",
"detect-browser": "^5.2.0",
"hls.js": "^0.14.16",
"jquery": "^3.5.1",
"libass-wasm": "^4.0.0",
"ngx-infinite-scroll": "^9.1.0",
"popper.js": "^1.16.1",
"rxjs": "^6.6.3",
"zone.js": "^0.11.1"
"zone.js": "^0.11.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.1001.4",
"@angular/cli": "^10.1.4",
"@angular/compiler-cli": "^10.1.4",
"@angular/language-service": "^10.1.4",
"@types/bootstrap": "^4.5.0",
"@types/hls.js": "^0.13.1",
"@types/jquery": "^3.5.1",
"@types/node": "^14.11.2",
"@angular-devkit/build-angular": "^0.1002.0",
"@angular/cli": "^10.2.0",
"@angular/compiler-cli": "^10.2.0",
"@angular/language-service": "^10.2.0",
"@types/bootstrap": "^5.0.0",
"@types/hls.js": "^0.13.2",
"@types/jquery": "^3.5.3",
"@types/node": "^14.14.2",
"@types/video.js": "^7.3.11",
"codelyzer": "^6.0.1",
"ts-node": "~9.0.0",

1
src/app/pages/player/player.component.scss
View File

@ -1,4 +1,3 @@
@import "../../../libraries/subtitles.css";
@import "vtt-subtitles";
.player

23
src/app/pages/player/player.component.ts
View File

@ -22,8 +22,8 @@ import {
} from "./playbackMethodDetector";
import { AppComponent } from "../../app.component";
import { Track, WatchItem } from "../../models/watch-item";
import SubtitlesOctopus from "libass-wasm/dist/js/subtitles-octopus.js"
declare var SubtitleManager: any;
@Pipe({
name: "formatTime",
@ -151,6 +151,7 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
displayStats: boolean = false;
private subtitlesManager: SubtitlesOctopus;
private hlsPlayer: Hls = new Hls();
private oidcSecurity: OidcSecurityService;
constructor(private route: ActivatedRoute,
@ -220,6 +221,8 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
ngOnDestroy()
{
if (this.subtitlesManager)
this.subtitlesManager.dispose();
if (this.isFullScreen)
document.exitFullscreen();
@ -439,7 +442,8 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
duration: 750,
panelClass: "info-panel"
});
SubtitleManager.remove(this.player);
if (this.subtitlesManager)
this.subtitlesManager.freeTrack();
this.removeHtmlTrack();
}
else
@ -453,10 +457,21 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
this.removeHtmlTrack();
if (subtitle.codec == "ass")
SubtitleManager.add(this.player, `subtitle/${subtitle.slug}`, true);
{
if (!this.subtitlesManager)
{
this.subtitlesManager = new SubtitlesOctopus({
video: this.player,
subUrl: `subtitle/${subtitle.slug}`
});
}
else
this.subtitlesManager.setTrackByUrl(`subtitle/${subtitle.slug}`);
}
else if (subtitle.codec == "subrip")
{
SubtitleManager.remove(this.player);
if (this.subtitlesManager)
this.subtitlesManager.freeTrack();
let track = document.createElement("track");
track.kind = "subtitles";

23
src/libraries/subtitles.css
View File

@ -1,23 +0,0 @@
.subtitle_container {
line-height: normal;
position: absolute;
pointer-events: none;
transform-origin: 0 0 0;
top: 0;
left: 0;
}
.subtitle_container text, .subtitle_container path {
dominant-baseline: text-before-edge;
text-anchor: start;
transform-box: view-box;
paint-order: stroke;
position: absolute;
top: 0;
left: 0;
}
.subtitle_container tspan {
white-space: pre;
}
.subtitle_container mask path {
fill: white;
}

3399
src/libraries/subtitles.js
View File

File diff suppressed because it is too large Load Diff

20
src/styles.scss
View File

@ -30,7 +30,7 @@ h6
//Material Angular Configuration
@import '~@angular/material/theming';
@import "~@angular/material/theming";
@include mat-core();
$primary: (default: #0a1128);
@ -51,21 +51,23 @@ $theme: mat-dark-theme($primary, $accent);
}
//Material Icons
//noinspection CssUnknownTarget
@font-face {
font-family: 'Material Icons';
font-family: "Material Icons";
font-style: normal;
font-weight: 400;
src: url(/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
url(/iconfont/MaterialIcons-Regular.woff) format('woff'),
url(/iconfont/MaterialIcons-Regular.ttf) format('truetype');
src: local("Material Icons"),
local("MaterialIcons-Regular"),
url(/iconfont/MaterialIcons-Regular.woff2) format("woff2"),
url(/iconfont/MaterialIcons-Regular.woff) format("woff"),
url(/iconfont/MaterialIcons-Regular.ttf) format("truetype");
}
//noinspection CssNoGenericFontName
.material-icons
{
font-family: 'Material Icons';
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
@ -83,7 +85,7 @@ $theme: mat-dark-theme($primary, $accent);
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
font-feature-settings: "liga";
}
mat-icon

1
static/account.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 365 B

1
static/more.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="#ffffff"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 298 B

7
subtitles-octopus-fix.sh Executable file
View File

@ -0,0 +1,7 @@
#!/usr/bin/bash
LINE_204=" self.video.addEventListener(\\\"loadedmetadata\\\", function listener(e) {"
LINE_205=" e.target.removeEventListener(e.type, listener);"
sed -i "204s/.*/$LINE_204/" node_modules/libass-wasm/dist/js/subtitles-octopus.js
sed -i "205s/.*/$LINE_205/" node_modules/libass-wasm/dist/js/subtitles-octopus.js

18
tsconfig.app.json
View File

@ -1,18 +0,0 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.ts"
],
"exclude": [
"src/test.ts",
"src/**/*.spec.ts"
]
}

3
tsconfig.json
View File

@ -18,7 +18,8 @@
"lib": [
"es2018",
"dom"
]
],
"allowJs": true
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,

18
tsconfig.spec.json
View File

@ -1,18 +0,0 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine",
"node"
]
},
"files": [
"src/test.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}

4
tslint.json
View File

@ -17,10 +17,6 @@
"severity": "warning"
},
"eofline": true,
"import-blacklist": [
true,
"rxjs/Rx"
],
"import-spacing": true,
"indent": {
"options": [