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]

202
angular.json
View File

@ -1,108 +1,108 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"kyoo": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": [
"src/assets"
],
"styles": [
"src/styles.scss"
],
"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"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"kyoo": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "3mb",
"maximumError": "5mb"
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.json",
"aot": false,
"assets": [
"src/assets",
{
"input": "node_modules/libass-wasm/dist/js",
"glob": "subtitles-octopus-worker*",
"output": "."
}
],
"styles": [
"src/styles.scss"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
"./node_modules/hls.js/dist/hls.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "3mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "kyoo:build"
},
"configurations": {
"production": {
"browserTarget": "kyoo:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "kyoo:build"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "tsconfig.json",
"exclude": [
"**/node_modules/**"
]
}
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "kyoo:build"
},
"configurations": {
"production": {
"browserTarget": "kyoo:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "kyoo:build"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"defaultProject": "kyoo",
"cli": {
"analytics": false
}
},
"defaultProject": "kyoo",
"cli": {
"analytics": false
}
}
}

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'.

1130
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

99
package.json
View File

@ -1,47 +1,56 @@
{
"name": "kyoo",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"lint": "ng lint"
},
"private": true,
"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",
"jquery": "^3.5.1",
"ngx-infinite-scroll": "^9.1.0",
"popper.js": "^1.16.1",
"rxjs": "^6.6.3",
"zone.js": "^0.11.1"
},
"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",
"@types/video.js": "^7.3.11",
"codelyzer": "^6.0.1",
"ts-node": "~9.0.0",
"tslint": "^6.1.3",
"typescript": "~4.0.3"
}
"name": "kyoo",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"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.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.2"
},
"devDependencies": {
"@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",
"tslint": "^6.1.3",
"typescript": "~4.0.3"
}
}

8
src/app/misc/items-utils.ts
View File

@ -1,7 +1,7 @@
import {ItemType, LibraryItem} from "../models/resources/library-item";
import {Show, ShowRole} from "../models/resources/show";
import {Collection} from "../models/resources/collection";
import {People} from "../models/resources/people";
import { ItemType, LibraryItem } from "../models/resources/library-item";
import { Show, ShowRole } from "../models/resources/show";
import { Collection } from "../models/resources/collection";
import { People } from "../models/resources/people";
export class ItemsUtils
{

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

22
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
@ -106,4 +108,4 @@ mat-icon
.cdk-overlay-container
{
z-index: 2000 !important;
}
}

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"
]
}

298
tslint.json
View File

@ -1,153 +1,149 @@
{
"extends": "tslint:recommended",
"rulesDirectory": [
"codelyzer"
],
"rules": {
"align": {
"options": [
"parameters",
"statements"
]
},
"array-type": false,
"arrow-return-shorthand": true,
"curly": true,
"deprecation": {
"severity": "warning"
},
"eofline": true,
"import-blacklist": [
true,
"rxjs/Rx"
],
"import-spacing": true,
"indent": {
"options": [
"tabs"
]
},
"max-classes-per-file": false,
"max-line-length": [
true,
120
],
"member-ordering": [
true,
{
"order": [
"static-field",
"instance-field",
"static-method",
"instance-method"
]
}
],
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-empty": false,
"no-inferrable-types": [
true,
"ignore-params"
],
"no-non-null-assertion": true,
"no-redundant-jsdoc": true,
"no-switch-case-fall-through": true,
"no-var-requires": false,
"object-literal-key-quotes": [
true,
"as-needed"
],
"quotemark": [
true,
"double"
],
"semicolon": {
"options": [
"always"
]
},
"space-before-function-paren": {
"options": {
"anonymous": "never",
"asyncArrow": "always",
"constructor": "never",
"method": "never",
"named": "never"
}
},
"typedef": [
true,
"call-signature"
],
"typedef-whitespace": {
"options": [
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
},
{
"call-signature": "onespace",
"index-signature": "onespace",
"parameter": "onespace",
"property-declaration": "onespace",
"variable-declaration": "onespace"
}
]
},
"variable-name": {
"options": [
"ban-keywords",
"check-format",
"allow-pascal-case"
]
},
"whitespace": {
"options": [
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type",
"check-typecast",
"check-module"
]
},
"component-class-suffix": true,
"contextual-lifecycle": true,
"directive-class-suffix": true,
"no-conflicting-lifecycle": true,
"no-host-metadata-property": true,
"no-input-rename": true,
"no-inputs-metadata-property": true,
"no-output-native": true,
"no-output-on-prefix": true,
"no-output-rename": true,
"no-outputs-metadata-property": true,
"template-banana-in-box": true,
"template-no-negated-async": true,
"use-lifecycle-interface": true,
"use-pipe-transform-interface": true,
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
]
}
"extends": "tslint:recommended",
"rulesDirectory": [
"codelyzer"
],
"rules": {
"align": {
"options": [
"parameters",
"statements"
]
},
"array-type": false,
"arrow-return-shorthand": true,
"curly": true,
"deprecation": {
"severity": "warning"
},
"eofline": true,
"import-spacing": true,
"indent": {
"options": [
"tabs"
]
},
"max-classes-per-file": false,
"max-line-length": [
true,
120
],
"member-ordering": [
true,
{
"order": [
"static-field",
"instance-field",
"static-method",
"instance-method"
]
}
],
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-empty": false,
"no-inferrable-types": [
true,
"ignore-params"
],
"no-non-null-assertion": true,
"no-redundant-jsdoc": true,
"no-switch-case-fall-through": true,
"no-var-requires": false,
"object-literal-key-quotes": [
true,
"as-needed"
],
"quotemark": [
true,
"double"
],
"semicolon": {
"options": [
"always"
]
},
"space-before-function-paren": {
"options": {
"anonymous": "never",
"asyncArrow": "always",
"constructor": "never",
"method": "never",
"named": "never"
}
},
"typedef": [
true,
"call-signature"
],
"typedef-whitespace": {
"options": [
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
},
{
"call-signature": "onespace",
"index-signature": "onespace",
"parameter": "onespace",
"property-declaration": "onespace",
"variable-declaration": "onespace"
}
]
},
"variable-name": {
"options": [
"ban-keywords",
"check-format",
"allow-pascal-case"
]
},
"whitespace": {
"options": [
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type",
"check-typecast",
"check-module"
]
},
"component-class-suffix": true,
"contextual-lifecycle": true,
"directive-class-suffix": true,
"no-conflicting-lifecycle": true,
"no-host-metadata-property": true,
"no-input-rename": true,
"no-inputs-metadata-property": true,
"no-output-native": true,
"no-output-on-prefix": true,
"no-output-rename": true,
"no-outputs-metadata-property": true,
"template-banana-in-box": true,
"template-no-negated-async": true,
"use-lifecycle-interface": true,
"use-pipe-transform-interface": true,
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
]
}
}