Improve imsc typing

src/util/ttml/ismc.ts → @types/imsc/index.d.ts

@@ -24,14 +24,10 @@
  * POSSIBILITY OF SUCH DAMAGE.
  */
 
-import * as isd from './isd';
-import * as doc from './doc';
-import * as html from './html';
-
 export interface TtmlDocument {
-    getMediaTimeEvents(): number[],
+    getMediaTimeEvents(): number[];
 
-    getMediaTimeRange(): number[]
+    getMediaTimeRange(): number[];
 }
 
 export type ISD = unknown;
@@ -43,28 +39,28 @@ export type ISDState = unknown;
 export interface MetadataHandler {
     /**
      * Called when the opening tag of an element node is encountered.
-     * @param {string} ns Namespace URI of the element
-     * @param {string} name Local name of the element
-     * @param {Attribute[]} attributes List of attributes, each consisting of a `uri`, `name` and `value`
+     * @param ns Namespace URI of the element
+     * @param name Local name of the element
+     * @param attributes List of attributes, each consisting of a `uri`, `name` and `value`
      */
-    onOpenTag(ns: string, name: string, attributes: Attribute[]): void,
+    onOpenTag(ns: string, name: string, attributes: Attribute[]): void;
 
     /**
      * Called when the closing tag of an element node is encountered.
      */
-    onCloseTag(): void,
+    onCloseTag(): void;
 
     /**
      * Called when a text node is encountered.
-     * @param {string} contents Contents of the text node
+     * @param contents Contents of the text node
      */
-    onText(contents: string): void,
+    onText(contents: string): void;
 }
 
 export interface Attribute {
-    uri: string,
-    name: string,
-    value: string
+    uri: string;
+    name: string;
+    value: string;
 }
 
 /**
@@ -79,13 +75,13 @@ export interface Attribute {
  * and returns a single <pre>boolean</pre>, which terminates processing if <pre>true</pre>.
  */
 export interface ErrorHandler {
-    info(error: string): boolean
+    info(error: string): boolean;
 
-    warn(error: string): boolean
+    warn(error: string): boolean;
 
-    error(error: string): boolean
+    error(error: string): boolean;
 
-    fatal(error: string): boolean
+    fatal(error: string): boolean;
 }
 
 /**
@@ -95,22 +91,22 @@ export interface ErrorHandler {
  * representation of the document change. `metadataHandler` allows the caller to
  * be called back when nodes are present in <metadata> elements.
  */
-type fromXML = (
+export function fromXML(
     xmlstring: string,
     errorHandler?: ErrorHandler,
-    metadataHandler?: MetadataHandler
-) => TtmlDocument | null;
+    metadataHandler?: MetadataHandler,
+): TtmlDocument | null;
 
 /**
  * Creates a canonical representation of an IMSC1 document returned by <pre>imscDoc.fromXML()</pre>
  * at a given absolute offset in seconds. This offset does not have to be one of the values returned
  * by <pre>getMediaTimeEvents()</pre>.
  */
-type generateISD = (
+export function generateISD(
     tt: TtmlDocument,
     offset?: number,
-    errorHandler?: ErrorHandler,
-) => ISD;
+    errorHandler?: ErrorHandler
+): ISD;
 
 /**
  * Renders an ISD object (returned by <pre>generateISD()</pre>) into a
@@ -128,7 +124,7 @@ type generateISD = (
  * is called for the next ISD, otherwise <code>previousISDState</code> should be set to
  * <code>null</code>.
  */
-type renderHTML = (
+export function renderHTML(
     isd: ISD,
     element: HTMLElement,
     /**
@@ -141,12 +137,5 @@ type renderHTML = (
     displayForcedOnlyMode?: boolean,
     errorHandler?: ErrorHandler,
     previousISDState?: ISDState,
-    enableRollUp?: boolean
-) => ISDState;
-
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-export const generateISD: generateISD = isd.generateISD;
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-export const fromXML: fromXML = doc.fromXML;
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-export const renderHTML: renderHTML = html.render;
+    enableRollUp?: boolean,
+): ISDState;

package.json

@@ -3,27 +3,29 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/jest-dom": "^5.11.8",
     "@testing-library/react": "^11.2.2",
-    "@testing-library/user-event": "^12.2.2",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^14.14.10",
+    "@testing-library/user-event": "^12.6.0",
+    "@types/jest": "^26.0.19",
+    "@types/node": "^14.14.19",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "@types/react-router": "^5.1.8",
-    "@types/react-router-dom": "^5.1.6",
-    "dashjs": "^3.1.3",
+    "@types/react-router": "^5.1.9",
+    "@types/react-router-dom": "^5.1.7",
+    "dashjs": "^3.2.0",
     "immer": "^8.0.0",
+    "imsc": "^1.1.1",
+    "libjass": "^0.11.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-jss": "^10.5.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
-    "react-sweet-state": "^2.4.4",
+    "react-sweet-state": "^2.5.1",
     "resize-observer-polyfill": "^1.5.1",
     "sax": "1.2.4",
-    "typescript": "^4.1.2"
+    "typescript": "^4.1.3"
   },
   "scripts": {
     "start": "react-scripts start",

src/global.d.ts

-declare module "imsc" {
-    export interface TtmlDocument {
-        getMediaTimeEvents(): number[],
-        getMediaTimeRange(): number[]
-    }
-
-    export type ISD = unknown;
-    export type ISDState = unknown;
-
-    export interface MetadataHandler {
-        onOpenTag(ns: string, name: string, attributes: Attribute[]): void,
-
-        onCloseTag(): void,
-
-        onText(contents: string): void,
-    }
-
-    export interface Attribute {
-        uri: string,
-        name: string,
-        value: string
-    }
-
-    export interface ErrorHandler {
-        info(error: string): boolean
-
-        warn(error: string): boolean
-
-        error(error: string): boolean
-
-        fatal(error: string): boolean
-    }
-
-    export function fromXML(
-        xmlstring: string,
-        errorHandler?: ErrorHandler,
-        metadataHandler?: MetadataHandler
-    ): TtmlDocument;
-
-    export function generateISD(
-        tt: TtmlDocument,
-        offset?: number,
-        errorHandler?: ErrorHandler,
-    ): ISD;
-
-    export function renderHTML(
-        isd: ISD,
-        element: HTMLElement,
-        imgResolver?: (backgroundUri: string) => string,
-        height?: number,
-        width?: number,
-        displayForcedOnlyMode?: boolean,
-        errorHandler?: ErrorHandler,
-        previousISDState?: ISDState,
-        enableRollUp?: boolean
-    ): ISDState;
-}

src/routes/player/Player.tsx

@@ -14,9 +14,9 @@ import {PlayerApi} from "./video/PlayerApi";
 import {useAudioTracks} from "../../util/media/useAudioTracks";
 import {useDebugInfo} from "../../util/media/useDebugInfo";
 import {Subtitle} from "../../api/models/Subtitle";
-import {TtmlRenderer} from "./subtitles/TtmlRenderer";
 import {MousePosition} from "../../util/mouse/MousePosition";
 import {VideoProvider} from "./video/VideoContext";
+import {SubtitleRenderer} from "./subtitles/SubtitleRenderer";
 
 interface Props {
     meta: ContentMeta,
@@ -67,7 +67,7 @@ export function Player(
                             autoPlay={true}
                             ref={setPlayerApi}
                         />
-                        <TtmlRenderer
+                        <SubtitleRenderer
                             className={classes.subtitleCanvas}
                             videoElement={playerApi?.getVideoElement() || null}
                             subtitle={subtitle}

src/routes/player/subtitles/SubtitleRenderer.tsx

@@ -15,7 +15,7 @@ export function SubtitleRenderer(
     switch (props.subtitle?.format) {
         case "ttml":
             return (<TtmlRenderer {...props} />);
-        //case "ass": return (<AssRendered {...props} />);
+        //case "ass": return (<AssRenderer {...props} />);
         default:
             return (<Fragment/>);
     }

src/routes/player/subtitles/TtmlHelper.ts

-import {fromXML, generateISD, renderHTML, TtmlDocument} from "../../../util/ttml/ismc";
+import {fromXML, generateISD, renderHTML, TtmlDocument} from "imsc";
 
 interface TtmlState {
     target: HTMLElement | null,

src/util/ttml/names.js

-/* 
- * Copyright (c) 2016, Pierre-Anthony Lemieux <pal@sandflow.com>
- * All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are met:
- *
- * * Redistributions of source code must retain the above copyright notice, this
- *   list of conditions and the following disclaimer.
- * * Redistributions in binary form must reproduce the above copyright notice,
- *   this list of conditions and the following disclaimer in the documentation
- *   and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
- * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
- * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
- * POSSIBILITY OF SUCH DAMAGE.
- */
-export const ns_tt = "http://www.w3.org/ns/ttml";
-export const ns_tts = "http://www.w3.org/ns/ttml#styling";
-export const ns_ttp = "http://www.w3.org/ns/ttml#parameter";
-export const ns_xml = "http://www.w3.org/XML/1998/namespace";
-export const ns_itts = "http://www.w3.org/ns/ttml/profile/imsc1#styling";
-export const ns_ittp = "http://www.w3.org/ns/ttml/profile/imsc1#parameter";
-export const ns_smpte = "http://www.smpte-ra.org/schemas/2052-1/2010/smpte-tt";
-export const ns_ebutts = "urn:ebu:tt:style";