diff --git a/src/client/game.ts b/src/client/game.ts index 3a3821a..8ff9616 100644 --- a/src/client/game.ts +++ b/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); diff --git a/src/client/object/other/video-player.ts b/src/client/object/other/video-player.ts index c1fa7ae..e1a9ff5 100644 --- a/src/client/object/other/video-player.ts +++ b/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; + } }