Add buffer and adjust some styling

slmnio · Nov 19, 2022 · 35f5664 · 35f5664
1 parent 97b5e46
commit 35f5664
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 29 deletions.
diff --git a/website/src/components/broadcast/ListenInBug.vue b/website/src/components/broadcast/ListenInBug.vue
@@ -26,14 +26,14 @@ export default {
         display: flex;
         font-size: 32px;
         border-bottom: 4px solid transparent;
-        padding-top: 2px;
     }
     .listen-in .team-logo {
         height: 100%;
         width: 64px;
     }
     .listen-in .text {
         padding: 2px 8px;
+        padding-top: 4px;
         text-transform: uppercase;
     }
 </style>
diff --git a/website/src/components/broadcast/PlayerAudio.vue b/website/src/components/broadcast/PlayerAudio.vue
@@ -16,41 +16,47 @@ import { cleanID } from "@/utils/content-utils";
 
 export default {
     name: "PlayerAudio",
-    props: ["broadcast", "taskKey"],
+    props: ["broadcast", "taskKey", "buffer"],
     sockets: {
         async audio(room, { data, user }) {
             if (room !== this.roomKey) return;
-            if (this.muted) return;
-            this.lastPacketTime[user] = Date.now();
+            setTimeout(async () => {
+                if (this.muted) return;
+                this.lastPacketTime[user] = Date.now();
 
-            if (!this.players[user]) {
-                this.players[user] = new PCMPlayer({
-                    encoding: "32bitFloat",
-                    channels: 2,
-                    sampleRate: 48000,
-                    flushingTime: 1000
-                });
-            }
+                if (!this.players[user]) {
+                    this.players[user] = new PCMPlayer({
+                        encoding: "32bitFloat",
+                        channels: 2,
+                        sampleRate: 48000,
+                        flushingTime: 1000
+                    });
+                }
 
-            if (!this.decoders[user]) {
-                this.decoders[user] = new OpusDecoderWebWorker({ channels: 2 });
-            }
+                if (!this.decoders[user]) {
+                    this.decoders[user] = new OpusDecoderWebWorker({ channels: 2 });
+                }
 
-            await this.decoders[user].ready;
+                await this.decoders[user].ready;
 
-            const { channelData, samplesDecoded } = await this.decoders[user].decodeFrame(data);
-            if (channelData) {
-                this.players[user].feed({ channelData, length: samplesDecoded });
-            }
+                const { channelData, samplesDecoded } = await this.decoders[user].decodeFrame(data);
+                if (channelData) {
+                    this.players[user].feed({ channelData, length: samplesDecoded });
+                }
+            }, this.buffer || 0);
         },
         audio_member_list(room, memberList) {
             if (room !== this.roomKey) return;
-            this.memberList = memberList;
+            setTimeout(() => {
+                this.memberList = memberList;
+            }, this.buffer || 0);
         },
         audio_job_status(room, status) {
             if (room !== this.roomKey) return;
-            console.log("status", this.taskKey, status);
-            this.status = status;
+            setTimeout(() => {
+                console.log("status", this.taskKey, status);
+                this.status = status;
+            }, this.buffer || 0);
         }
     },
     data: () => ({

diff --git a/website/src/components/broadcast/roots/IngameCommsOverlay.vue b/website/src/components/broadcast/roots/IngameCommsOverlay.vue
@@ -1,14 +1,15 @@
 <template>
     <div class="overlay ingame-comms-overlay" v-if="match && match.teams">
+        <div class="btn">{{ match.flip_teams }}</div>
         <div class="teams" :class="{'flip': match.flip_teams}" :style="{ marginTop: topOffset }">
-            <div class="team" v-for="(team, i) in match.teams" :key="team.id" :style="{ width: teamWidth }" :class="{'left': i === 0 || (i === 1 && match.flip_teams)}">
+            <div class="team" v-for="(team, i) in match.teams" :key="team.id" :style="{ width: teamWidth }" :class="{'left': match.flip_teams ? i === 1 : i === 0}">
                 <ThemeTransition class="listen-in-holder" :duration="250" :theme="team.theme"
                                  :active="activeTeamIndex === i"
-                                 :start="i === 0 || (i === 1 && match.flip_teams) ? 'left' : 'right'"
-                                 :end="i === 0 || (i === 1 && match.flip_teams) ? 'right' : 'left'">
+                                 :start="match.flip_teams ? i === 1 : i === 0 ? 'left' : 'right'"
+                                 :end="match.flip_teams ? i === 1 : i === 0 ? 'right' : 'left'">
                     <ListenInBug :text="listenInText" :team="team" />
                 </ThemeTransition>
-                <PlayerAudio :team="team" :broadcast="broadcast" :task-key="`team${i+1}`" :ref="`team${i+1}`" />
+                <PlayerAudio :team="team" :broadcast="broadcast" :task-key="`team${i+1}`" :ref="`team${i+1}`" :buffer="buffer" />
             </div>
         </div>
     </div>
@@ -22,7 +23,7 @@ import ThemeTransition from "@/components/broadcast/ThemeTransition";
 
 export default {
     name: "IngameCommsOverlay",
-    props: ["broadcast", "listenInText"],
+    props: ["broadcast", "listenInText", "buffer"],
     components: { ListenInBug, PlayerAudio, ThemeTransition },
     data: () => ({
         activeTeamIndex: null,
@@ -96,4 +97,7 @@ export default {
     .listen-in-holder {
         margin-top: 8px;
     }
+    .teams.flip {
+        flex-direction: row-reverse;
+    }
 </style>
diff --git a/website/src/router/broadcast.js b/website/src/router/broadcast.js
@@ -203,7 +203,8 @@ export default [
         path: "ingame-comms",
         component: IngameCommsOverlay,
         props: route => ({
-            listenInText: route.query.text
+            listenInText: route.query.text,
+            buffer: parseInt(route.query.buffer)
         })
     }
 ];