Setup prettier

TODO, maybe add a pre-commit hook calling `npx prettier . --write`.

Author: philn

.prettierignore

@@ -0,0 +1,2 @@
+# Ignore artifacts:
+public

.prettierrc.json

@@ -0,0 +1 @@
+{}

README.md

@@ -2,19 +2,19 @@
 
 <br>
 
-Simple video player demo made with WebCodecs / AudioWorklet. (No HTML5 videos!)  
+Simple video player demo made with WebCodecs / AudioWorklet. (No HTML5 videos!)
 
-Visit https://webvideo-js.pages.dev/ to see the live demo. 
+Visit https://webvideo-js.pages.dev/ to see the live demo.
 
-Currently, Chrome 94+ is required. (Tested for Chrome 99 on Linux)  
+Currently, Chrome 94+ is required. (Tested for Chrome 99 on Linux)
 
-To test locally, execute `npm install && npm run publish && node server.js`.  
+To test locally, execute `npm install && npm run publish && node server.js`.
 
 ## Attributions for videos
 
-* [Tears of Steel](https://mango.blender.org/) by Blender Foundation [CC BY 3.0](https://creativecommons.org/licenses/by/3.0/)
+- [Tears of Steel](https://mango.blender.org/) by Blender Foundation [CC BY 3.0](https://creativecommons.org/licenses/by/3.0/)
 
-* [Elephants Dream](https://orange.blender.org/) by Blender Foundation [CC BY](https://orange.blender.org/blog/creative-commons-license-2/)
+- [Elephants Dream](https://orange.blender.org/) by Blender Foundation [CC BY](https://orange.blender.org/blog/creative-commons-license-2/)
 
 ## License
 

package.json

@@ -19,7 +19,7 @@
     "esbuild": "^0.12.14",
     "eslint": "^7.29.0",
     "express": "^4.17.3",
-    "prettier": "^2.3.2",
+    "prettier": "2.8.8",
     "serve-index": "^1.9.1",
     "typescript": "^4.3.5"
   },

src/index.ts

@@ -4,9 +4,9 @@ import { WVPlayStateKind } from './core/state';
 let player: WVPlayer | undefined;
 
 // TODO: We can't rely on AAC-encoded assets here. opus and flac should work though.
-let movies:datatype[][] = [
-	["./assets/TearsOfSteel.mp4",   "[Excerpt] “Tears of Steel” by Blender Foundation (CC BY 3.0)"],
-	["./assets/ElephantsDream.mp4", "[Excerpt] “Elephants Dream” by Blender Foundation (CC BY)"]
+let movies: datatype[][] = [
+  ['./assets/TearsOfSteel.mp4', '[Excerpt] “Tears of Steel” by Blender Foundation (CC BY 3.0)'],
+  ['./assets/ElephantsDream.mp4', '[Excerpt] “Elephants Dream” by Blender Foundation (CC BY)'],
 ];
 
 enum PlayBtnIcon {
@@ -46,7 +46,7 @@ window.addEventListener('beforeunload', (e) => {
 
   if (player?.loadCalled()) {
     player?.unload();
-//    blockingSleep(1000);
+    //    blockingSleep(1000);
   }
 
   e.preventDefault();
@@ -65,17 +65,16 @@ window.addEventListener('load', async () => {
   let videoIndex = 0;
 
   player = new WVPlayer({
-	  canvasElem: document.querySelector('#monitor') as HTMLCanvasElement,
-	});
+    canvasElem: document.querySelector('#monitor') as HTMLCanvasElement,
+  });
   player.onEOS = async () => {
     videoIndex++;
     await advance();
-  }
+  };
 
   setPlayBtnIcon(PlayBtnIcon.FONTAWESOME_PLAY, playBtnElem);
 
   playBtnElem.addEventListener('click', async () => {
-
     switch (player.playState()) {
       case WVPlayStateKind.PAUSED: {
         if (player.canPlay()) {
@@ -95,34 +94,32 @@ window.addEventListener('load', async () => {
         await advance();
       }
     }
-
   });
 
   skipElem.addEventListener('click', async () => {
-		await advance();
+    await advance();
   });
 
-	async function advance() {
-  	  if (videoIndex >= videoCount)
-          videoIndex = 0;
-      const url = new URL(movies[videoIndex][0], location.origin).href;
-      await player.setUrl(url, {
-			    onStart: async () => {
-				      hidePlayBtn(playBtnWrapperElem);
-				      showLoader(loaderElem);
-			    },
-			    onEnd: async () => {
-				      hideLoader(loaderElem);
-				      showPlayBtn(playBtnWrapperElem);
-				      autohidePlayBtn(false, playBtnWrapperElem);
-				      setPlayBtnIcon(PlayBtnIcon.FONTAWESOME_PLAY, playBtnElem);
-			    },
-		  });
-			await player.play();
-			autohidePlayBtn(true, playBtnWrapperElem);
-			setPlayBtnIcon(PlayBtnIcon.FONTAWESOME_PAUSE, playBtnElem);
-			playTitleElem.textContent = movies[videoIndex][1];
-	}
+  async function advance() {
+    if (videoIndex >= videoCount) videoIndex = 0;
+    const url = new URL(movies[videoIndex][0], location.origin).href;
+    await player.setUrl(url, {
+      onStart: async () => {
+        hidePlayBtn(playBtnWrapperElem);
+        showLoader(loaderElem);
+      },
+      onEnd: async () => {
+        hideLoader(loaderElem);
+        showPlayBtn(playBtnWrapperElem);
+        autohidePlayBtn(false, playBtnWrapperElem);
+        setPlayBtnIcon(PlayBtnIcon.FONTAWESOME_PLAY, playBtnElem);
+      },
+    });
+    await player.play();
+    autohidePlayBtn(true, playBtnWrapperElem);
+    setPlayBtnIcon(PlayBtnIcon.FONTAWESOME_PAUSE, playBtnElem);
+    playTitleElem.textContent = movies[videoIndex][1];
+  }
 
   await advance();
 });

src/media/format/demuxerMP4Box.ts

@@ -112,7 +112,7 @@ function createWVMediaStreamInfo(
       width: (track as MP4Box.MP4VideoTrack).video.width,
       height: (track as MP4Box.MP4VideoTrack).video.height,
     };
-    if (track.codec.startsWith("avc")) {
+    if (track.codec.startsWith('avc')) {
       video.avcDescription = createAVCDescription(trackIdx, file);
     }
   } else if (streamType === 'audio') {

src/player/player.ts

@@ -51,25 +51,28 @@ export class WVPlayer {
     logger.setLevel(this.#shared.loglevel);
   }
 
-    async setUrl(url: string, cb?: { onStart?: () => Promise<void>; onEnd?: () => Promise<void> }): Promise<void> {
-        await this.unload();
-        this.#shared.videoUrl = url;
-        return this.load(cb);
-    }
+  async setUrl(
+    url: string,
+    cb?: { onStart?: () => Promise<void>; onEnd?: () => Promise<void> }
+  ): Promise<void> {
+    await this.unload();
+    this.#shared.videoUrl = url;
+    return this.load(cb);
+  }
 
   async load(cb?: { onStart?: () => Promise<void>; onEnd?: () => Promise<void> }): Promise<void> {
     if (this.#isLoadCalled) {
       throw Error('load() is already called');
     }
     this.#isLoadCalled = true;
 
-      this.#shared.videoDecoderShouldBeDead.store(false);
-      this.#shared.audioDecoderShouldBeDead.store(false);
+    this.#shared.videoDecoderShouldBeDead.store(false);
+    this.#shared.audioDecoderShouldBeDead.store(false);
 
-      this.#videoDecoder = new WVVideoDecoderWorkerFront({
-          maxVideoFrameLength: this.#maxVideoFrameLength,
-      });
-      this.#audioDecoder = new WVAudioDecoderWorkerFront();
+    this.#videoDecoder = new WVVideoDecoderWorkerFront({
+      maxVideoFrameLength: this.#maxVideoFrameLength,
+    });
+    this.#audioDecoder = new WVAudioDecoderWorkerFront();
 
     this.#shared.playState.store(WVPlayStateKind.BUFFERING);
     await cb?.onStart?.();
@@ -111,7 +114,7 @@ export class WVPlayer {
 
   async unload(cb?: { onStart?: () => Promise<void>; onEnd?: () => Promise<void> }): Promise<void> {
     if (!this.#isLoadCalled) {
-        return;
+      return;
     }
     this.#isLoadCalled = false;
 
@@ -123,10 +126,10 @@ export class WVPlayer {
 
       await this.#videoDecoder.uninit(this.#shared);
       await this.#audioDecoder.uninit(this.#shared);
-        this.#shared.videoBufferFull.store(false);
-        this.#shared.audioBufferFull.store(false);
-        this.#videoDecoder = null;
-        this.#audioDecoder = null;
+      this.#shared.videoBufferFull.store(false);
+      this.#shared.audioBufferFull.store(false);
+      this.#videoDecoder = null;
+      this.#audioDecoder = null;
     }
     await cb?.onEnd?.();
   }
@@ -177,10 +180,10 @@ export class WVPlayer {
       this.#videoDecoder.pop(this.#shared);
     }
 
-      if (currentTime >= this.length()) {
-          await this.pause();
-          await this.onEOS();
-      }
+    if (currentTime >= this.length()) {
+      await this.pause();
+      await this.onEOS();
+    }
     requestAnimationFrame(this.mainLoop.bind(this));
   }
 
@@ -191,10 +194,10 @@ export class WVPlayer {
     return this.#videoStream.timescale;
   }
   length(): number {
-  	return this.#videoStream.duration / this.#videoStream.timescale;
+    return this.#videoStream.duration / this.#videoStream.timescale;
   }
   lengthMS(): number {
-  	return this.#videoStream.duration / this.#videoStream.timescale * 1000;
+    return (this.#videoStream.duration / this.#videoStream.timescale) * 1000;
   }
   bitrate(): number {
     return this.#videoStream.bitrate;