mirror of
https://github.com/zoriya/Kyoo.git
synced 2025-07-09 03:04:20 -04:00
Using subtitles-octopus to render subtitles
This commit is contained in:
Zoe Roux
parent
199e541997
commit
cdb3cf696c
@ -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
18
angular.json
@ -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
12
browserslist
@ -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
1128
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
57
package.json
57
package.json
@ -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,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,4 +1,3 @@
|
||||
@import "../../../libraries/subtitles.css";
|
||||
@import "vtt-subtitles";
|
||||
|
||||
.player
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -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;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -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 +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>
|
||||
|
Before Width: | Height: | Size: 365 B |
@ -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>
|
||||
|
Before Width: | Height: | Size: 298 B |
7
subtitles-octopus-fix.sh
Executable file
7
subtitles-octopus-fix.sh
Executable 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
|
||||
@ -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"
|
||||
]
|
||||
}
|
||||
@ -18,7 +18,8 @@
|
||||
"lib": [
|
||||
"es2018",
|
||||
"dom"
|
||||
]
|
||||
],
|
||||
"allowJs": true
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"fullTemplateTypeCheck": true,
|
||||
|
||||
@ -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"
|
||||
]
|
||||
}
|
||||
@ -17,10 +17,6 @@
|
||||
"severity": "warning"
|
||||
},
|
||||
"eofline": true,
|
||||
"import-blacklist": [
|
||||
true,
|
||||
"rxjs/Rx"
|
||||
],
|
||||
"import-spacing": true,
|
||||
"indent": {
|
||||
"options": [
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user