Using subtitles-octopus to render subtitles

.editorconfig

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

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",
+                            "./node_modules/hls.js/dist/hls.js"
-              "./src/libraries/subtitles.js"
                         ]
                     },
                     "configurations": {
@@ -88,11 +92,7 @@
                 "lint": {
                     "builder": "@angular-devkit/build-angular:tslint",
                     "options": {
-            "tsConfig": [
+                        "tsConfig": "tsconfig.json",
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
                         "exclude": [
                             "**/node_modules/**"
                         ]

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

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/animations": "^10.2.0",
-    "@angular/cdk": "^10.2.3",
+        "@angular/cdk": "^10.2.5",
-    "@angular/common": "^10.1.4",
+        "@angular/common": "^10.2.0",
-    "@angular/compiler": "^10.1.4",
+        "@angular/compiler": "^10.2.0",
-    "@angular/core": "^10.1.4",
+        "@angular/core": "^10.2.0",
-    "@angular/forms": "^10.1.4",
+        "@angular/forms": "^10.2.0",
-    "@angular/material": "^10.2.3",
+        "@angular/material": "^10.2.5",
-    "@angular/platform-browser": "^10.1.4",
+        "@angular/platform-browser": "^10.2.0",
-    "@angular/platform-browser-dynamic": "^10.1.4",
+        "@angular/platform-browser-dynamic": "^10.2.0",
-    "@angular/router": "^10.1.4",
+        "@angular/router": "^10.2.0",
-    "angular-auth-oidc-client": "11.2.0",
+        "angular-auth-oidc-client": "11.2.1",
-    "bootstrap": "^4.5.2",
+        "bootstrap": "^4.5.3",
-    "detect-browser": "^5.1.1",
+        "detect-browser": "^5.2.0",
-    "hls.js": "^0.14.13",
+        "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-devkit/build-angular": "^0.1002.0",
-    "@angular/cli": "^10.1.4",
+        "@angular/cli": "^10.2.0",
-    "@angular/compiler-cli": "^10.1.4",
+        "@angular/compiler-cli": "^10.2.0",
-    "@angular/language-service": "^10.1.4",
+        "@angular/language-service": "^10.2.0",
-    "@types/bootstrap": "^4.5.0",
+        "@types/bootstrap": "^5.0.0",
-    "@types/hls.js": "^0.13.1",
+        "@types/hls.js": "^0.13.2",
-    "@types/jquery": "^3.5.1",
+        "@types/jquery": "^3.5.3",
-    "@types/node": "^14.11.2",
+        "@types/node": "^14.14.2",
         "@types/video.js": "^7.3.11",
         "codelyzer": "^6.0.1",
         "ts-node": "~9.0.0",

src/app/misc/items-utils.ts

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

src/app/pages/player/player.component.scss

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

src/app/pages/player/player.component.ts

@@ -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";

src/libraries/subtitles.css

@@ -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;
-}

src/styles.scss

@@ -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'),
+	src: local("Material Icons"),
-		local('MaterialIcons-Regular'),
+	     local("MaterialIcons-Regular"),
-		url(/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
+	     url(/iconfont/MaterialIcons-Regular.woff2) format("woff2"),
-		url(/iconfont/MaterialIcons-Regular.woff) format('woff'),
+	     url(/iconfont/MaterialIcons-Regular.woff) format("woff"),
-		url(/iconfont/MaterialIcons-Regular.ttf) format('truetype');
+	     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

static/account.svg

@@ -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>

static/more.svg

@@ -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>

subtitles-octopus-fix.sh

@@ -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

tsconfig.app.json

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

tsconfig.json

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

tsconfig.spec.json

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

tslint.json

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