Upgrade for Liqvid 2.1

.eslintrc.json

@@ -52,6 +52,7 @@
       }
     }],
 
+    "react/react-in-jsx-scope": "off",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "off",
 

.gitignore

@@ -10,5 +10,8 @@ node_modules
 *.png
 *.svg
 
+# generated files
+dist
+
 # certificate
 /ssl

lib/HelpControl.tsx

@@ -88,7 +88,7 @@ function HelpDialog(props: DialogProps) {
 
   return ReactDOM.createPortal(
     <div className="rp-help-dialog" style={props.style}>
-      <button onClick={props.closeDialog}>&times;</button>
+      <button aria-label="Close" onClick={props.closeDialog}>&times;</button>
 
       <div className="rp-help-tables">
         <table>

lib/Link.tsx

@@ -1,7 +1,4 @@
-import * as React from "react";
-import {Player} from "liqvid";
-
 export default function Link(props: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
   const {children, ...attrs} = props;
-  return <a target="_blank" {...attrs}>{children}</a>
+  return <a target="_blank" rel="noreferrer" {...attrs}>{children}</a>
 }

lib/LoadingScreen.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 /**
   Display a loading screen while ractive-player is not-ready.
 */

lib/ShowMarkerName.tsx

@@ -1,27 +1,24 @@
-import * as React from "react";
+import {useMarkerUpdate, useScript, Utils} from "liqvid";
 
-import {Player, Utils, usePlayer} from "liqvid";
 const {anyHover} = Utils.mobile;
 const {useForceUpdate} = Utils.react;
 
+const style: React.CSSProperties = {
+  backgroundColor: "#1A69B5",
+  fontFamily: `"Roboto Slab", sans-serif`,
+  lineHeight: "36px",
+  padding: "0 .5em",
+  userSelect: "all",
+  verticalAlign: "top"
+};
+
 export default function ShowMarkerName() {
   if (!anyHover)
     return null;
-  const {script} = usePlayer();
-  const forceUpdate = useForceUpdate();
-
-  React.useEffect(() => {
-    script.hub.on("markerupdate", forceUpdate);
-  }, []);
+
+  const script = useScript();
 
-  const style: React.CSSProperties = {
-    backgroundColor: "#1A69B5",
-    fontFamily: `"Roboto Slab", sans-serif`,
-    lineHeight: "36px",
-    padding: "0 .5em",
-    userSelect: "all",
-    verticalAlign: "top"
-  };
+  useMarkerUpdate(useForceUpdate(), []);
 
   return (
     <span className="rp-marker-name" key="show-marker-name" style={style}>

lib/remember-volume.ts

@@ -6,16 +6,18 @@ Remember volume settings between views.
 This is disabled by default due to GPDR.
 */
 
-export default (playback: Playback) => {
+export function rememberVolume(playback: Playback) {
   const storage = window.localStorage;
 
   // restore volume settings
-  playback.volume = parseFloat(storage.getItem("ractive volume") || "1");
-  playback.muted = "true" === (storage.getItem("ractive muted") || "false");
+  playback.volume = parseFloat(storage.getItem("liqvid volume") || "1");
+  playback.muted = "true" === (storage.getItem("liqvid muted") || "false");
 
   // save volume settings
-  playback.hub.on("volumechange", () => {
-    storage.setItem("ractive muted", playback.muted.toString());
-    storage.setItem("ractive volume", playback.volume.toString());
+  playback.on("volumechange", () => {
+    storage.setItem("liqvid muted", playback.muted.toString());
+    storage.setItem("liqvid volume", playback.volume.toString());
   });
 }
+
+export default rememberVolume;

lib/seekonload.ts

@@ -8,9 +8,11 @@ const rgx = new RegExp(
   ")"
 );
 
-export default (playback: Playback) => {
+export function seekOnLoad(playback: Playback) => {
   const $_ = parent.location.search.match(rgx);
   if ($_) {
     playback.seek($_[1]);
   }
 };
+
+export default seekOnLoad;

liqvid.config.ts

@@ -0,0 +1,33 @@
+// liqvid.config.ts
+import type {LiqvidConfig} from "@liqvid/cli";
+
+const os = require("os");
+
+const config: LiqvidConfig = {
+  audio: {
+    transcribe: {
+      "input": "./dist/audio/audio.webm",
+      "captions": "./dist/captions.vtt",
+      "transcript": "./dist/transcript.json",
+      "apiKey": "ho6IutFyHawhFGGID3vU2PEz7_46-WKHTr6zhPNDU7e_",
+      "apiUrl": "https://api.us-south.speech-to-text.watson.cloud.ibm.com/instances/ad816af7-c138-4671-8c42-7e4e7fdd5151"
+    }
+  },
+  render: {
+    audioFile: "./dist/audio/audio.webm",
+    concurrency: os.cpus().length,
+    imageFormat: "png"
+  },
+  thumbs: {
+    url: "http://localhost:3000/dist",
+    browserHeight: 800,
+    browserWidth: 1280,
+    concurrency: os.cpus().length,
+    frequency: 1,
+    imageFormat: "png",
+    // make sure the output pattern matches the imageFormat
+    output: "./dist/thumbs/%s.png"
+  }
+};
+
+module.exports = config;