Include example in docs

.github/workflows/main.yml

@@ -16,6 +16,8 @@ jobs:
         run: yarn install --frozen-lockfile
       - name: Build documentation
         run: yarn docs:build
+      - name: Build example
+        run: yarn example:build && cp -r example docs/example
       - name: Publish
         uses: peaceiris/actions-gh-pages@v3
         with:

README.md

@@ -11,10 +11,8 @@ yarn add @alugha/player
 
 ## Example
 
-You can find an interactive example in `example/`.
-Execution of the example requires `yarn`.
-First install the development dependencies with `yarn install`.
-Then run `yarn example`
+You can find an interactive example on <https://alugha.github.io/player/example/>.
+The code for the example is located at <https://github.com/alugha/player/tree/main/example>.
 
 ## Usage
 

example/main.js

@@ -12,8 +12,8 @@ function println(message) {
   logs.textContent = message + "\n" + logs.textContent;
 }
 
-player.on("ready", () => {
-  println("Event: ready");
+player.on("ready", (ready) => {
+  println("Event: ready " + JSON.stringify(ready, null, 2));
 });
 
 player.on("play", () => {
@@ -28,20 +28,37 @@ player.on("ended", () => {
   println("Event: ended");
 });
 
+// this can be a bit chatty for a demo, so it's disabled
+/*
 player.on("timeupdate", ({ seconds, duration }) => {
-  println("Event: timeupdate " + JSON.stringify({ seconds, duration }));
+  println(
+    "Event: timeupdate " + JSON.stringify({ seconds, duration }, null, 2),
+  );
 });
+*/
 
 player.on("progress", ({ percent }) => {
-  println("Event: progress " + JSON.stringify({ percent }));
+  println("Event: progress " + JSON.stringify({ percent }, null, 2));
 });
 
 player.on("seeked", () => {
   println("Event: seeked");
 });
 
-player.on("error", () => {
-  println("Event: erorr");
+player.on("error", (error) => {
+  println("Event: error " + JSON.stringify(error, null, 2));
+});
+
+player.on("videochange", (video) => {
+  println("Event: videochange " + JSON.stringify(video, null, 2));
+});
+
+player.on("audiotrackchange", (track) => {
+  println("Event: audiotrackchange " + JSON.stringify(track, null, 2));
+});
+
+player.on("texttrackchange", (track) => {
+  println("Event: texttrackchange " + JSON.stringify(track, null, 2));
 });
 
 document.getElementById("btn-seek").addEventListener("click", () => {

package.json

@@ -35,7 +35,8 @@
     "compile": "yarn compile:esm && yarn compile:cjs",
     "compile:esm": "tsc --project tsconfig.json",
     "compile:cjs": "tsc --project tsconfig.cjs.json",
-    "example": "yarn compile && rimraf example/lib && cp -r lib example/lib && serve example",
+    "example:build": "yarn compile && rimraf example/lib && cp -r lib example/lib",
+    "example": "yarn example:build && serve example",
     "docs:build": "typedoc src",
     "docs": "yarn docs:build && serve docs"
   },

typedoc.json

@@ -0,0 +1,6 @@
+{
+  "navigationLinks": {
+    "Example": "https://alugha.github.io/player/example/",
+    "Repository": "https://github.com/alugha/player"
+  }
+}