Using subtitles-octopus to render subtitles

src/app/misc/items-utils.ts

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

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'),
-		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;
-}
+}