Fixes 2 sync and UI bugs in music-together plugin (#4071)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

src/plugins/music-together/connection.ts

@@ -9,9 +9,11 @@ import delay from 'delay';
 import type { Permission, Profile, VideoData } from './types';
 
 export type ConnectionEventMap = {
+  CLEAR_QUEUE: {};
   ADD_SONGS: { videoList: VideoData[]; index?: number };
   REMOVE_SONG: { index: number };
   MOVE_SONG: { fromIndex: number; toIndex: number };
+  SET_INDEX: { index: number };
   IDENTIFY: { profile: Profile } | undefined;
   SYNC_PROFILE: { profiles: Record<string, Profile> } | undefined;
   SYNC_QUEUE: { videoList: VideoData[] } | undefined;
@@ -171,9 +173,10 @@ export class Connection {
   public async broadcast<Event extends keyof ConnectionEventMap>(
     type: Event,
     payload: ConnectionEventMap[Event],
+    after?: ConnectionEventUnion[],
   ) {
     await Promise.all(
-      this.getConnections().map((conn) => conn.send({ type, payload })),
+      this.getConnections().map((conn) => conn.send({ type, payload, after })),
     );
   }
 

src/plugins/music-together/index.ts

@@ -215,6 +215,25 @@ export default createPlugin<
         this.ignoreChange = true;
 
         switch (event.type) {
+          case 'CLEAR_QUEUE': {
+            if (conn && this.permission === 'host-only') {
+              await this.connection?.broadcast('SYNC_QUEUE', {
+                videoList: this.queue?.videoList ?? [],
+              });
+              return;
+            }
+
+            this.queue?.clear();
+            await this.connection?.broadcast('CLEAR_QUEUE', {});
+            break;
+          }
+          case 'SET_INDEX': {
+            this.queue?.setIndex(event.payload.index);
+            await this.connection?.broadcast('SET_INDEX', {
+              index: event.payload.index,
+            });
+            break;
+          }
           case 'ADD_SONGS': {
             if (conn && this.permission === 'host-only') {
               await this.connection?.broadcast('SYNC_QUEUE', {
@@ -234,7 +253,15 @@ export default createPlugin<
             await this.connection?.broadcast('ADD_SONGS', {
               ...event.payload,
               videoList,
-            });
+              },
+              event.after,
+            );
+
+            const afterevent = event.after?.at(0);
+            if (afterevent?.type === 'SET_INDEX') {
+              this.queue?.setIndex(afterevent.payload.index);
+            }
+
             break;
           }
           case 'REMOVE_SONG': {
@@ -385,6 +412,16 @@ export default createPlugin<
       const queueListener = async (event: ConnectionEventUnion) => {
         this.ignoreChange = true;
         switch (event.type) {
+          case 'CLEAR_QUEUE': {
+            await this.connection?.broadcast('CLEAR_QUEUE', {});
+            break;
+          }
+          case 'SET_INDEX': {
+            await this.connection?.broadcast('SET_INDEX', {
+              index: event.payload.index,
+            });
+            break;
+          }
           case 'ADD_SONGS': {
             await this.connection?.broadcast('ADD_SONGS', {
               ...event.payload,
@@ -392,7 +429,9 @@ export default createPlugin<
                 ...it,
                 ownerId: it.ownerId ?? this.connection!.id,
               })),
-            });
+              },
+              event.after,
+            );
             break;
           }
           case 'REMOVE_SONG': {
@@ -420,6 +459,14 @@ export default createPlugin<
       const listener = async (event: ConnectionEventUnion) => {
         this.ignoreChange = true;
         switch (event.type) {
+          case 'CLEAR_QUEUE': {
+            this.queue?.clear();
+            break;
+          }
+          case 'SET_INDEX': {
+            this.queue?.setIndex(event.payload.index);
+            break;
+          }
           case 'ADD_SONGS': {
             const videoList: VideoData[] = event.payload.videoList.map(
               (it) => ({
@@ -429,6 +476,13 @@ export default createPlugin<
             );
 
             await this.queue?.addVideos(videoList, event.payload.index);
+
+            const afterevent = event.after?.at(0);
+            if (afterevent?.type === 'SET_INDEX') {
+              this.queue?.setIndex(afterevent.payload.index);
+            }
+
+
             break;
           }
           case 'REMOVE_SONG': {

src/plugins/music-together/queue/queue.ts

@@ -314,6 +314,11 @@ export class Queue {
       if (!this.internalDispatch) {
         if (event.type === 'CLEAR') {
           this.ignoreFlag = true;
+          this.broadcast({
+            type: 'CLEAR_QUEUE',
+            payload: {},
+          });
+          return;
         }
         if (event.type === 'ADD_ITEMS') {
           if (this.ignoreFlag) {
@@ -347,7 +352,7 @@ export class Queue {
                 },
                 after: [
                   {
-                    type: 'SYNC_PROGRESS',
+                    type: 'SET_INDEX',
                     payload: {
                       index,
                     },