video player commands

src/client/game.ts

@@ -53,10 +53,16 @@ export class Game {
         return;
       }
 
-      if (message.startsWith('!stop')) {
+      if (message.startsWith('!stop') || message.startsWith('!pause')) {
         this.videoTest.stop();
         return;
       }
+
+      if (message.startsWith('!volume')) {
+        const [cmd, vol] = message.split(' ');
+        this.videoTest.setVolume(parseInt(vol.replace('%', ''), 10));
+        return;
+      }
       // end of
 
       this.socket.emit('chat-send', message);

src/client/object/other/video-player.ts

@@ -6,6 +6,7 @@ import {
   PlaneGeometry,
   VideoTexture,
 } from 'three';
+import { clamp } from 'three/src/math/MathUtils';
 
 export class VideoPlayer {
   public video = document.createElement('video');
@@ -28,6 +29,12 @@ export class VideoPlayer {
     this.video.addEventListener('canplay', () => {
       this.playable = true;
     });
+
+    this.video.addEventListener('error', () => {
+      this.playable = false;
+      this.video.pause();
+      this.video.src = undefined;
+    });
   }
 
   public setSource(source: string, autoplay = false) {
@@ -82,4 +89,9 @@ export class VideoPlayer {
       this.hls.stopLoad();
     }
   }
+
+  public setVolume(percent: number) {
+    const setter = clamp(percent, 0, 100) / 100;
+    this.video.volume = setter;
+  }
 }