fix(music-together): fix user profile in queue

src/plugins/music-together/index.ts

@@ -125,10 +125,12 @@ export default createPlugin<
         if (this.connection?.mode === 'host') {
           const videoList: VideoData[] =
             this.queue?.flatItems.map(
-              (it) =>
+              (it, index) =>
                 ({
                   videoId: it!.videoId,
-                  ownerId: this.connection!.id,
+                  ownerId:
+                    this.queue?.videoList[index]?.ownerId ??
+                    this.connection!.id,
                 }) satisfies VideoData,
             ) ?? [];
 
@@ -212,6 +214,7 @@ export default createPlugin<
         event: ConnectionEventUnion,
         conn?: DataConnection | null,
       ) => {
+        console.log('event', event, this.queue?.videoList);
         this.ignoreChange = true;
 
         switch (event.type) {

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

@@ -3,8 +3,9 @@ import { mapQueueItem } from './utils';
 
 import { t } from '@/i18n';
 
+import { getDefaultProfile, type Profile, type VideoData } from '../types';
+
 import type { ConnectionEventUnion } from '@/plugins/music-together/connection';
-import type { Profile, VideoData } from '../types';
 import type { QueueItem } from '@/types/datahost-get-state';
 import type { QueueElement, Store } from '@/types/queue';
 
@@ -177,37 +178,46 @@ export class Queue {
     if (!items) return false;
 
     this.internalDispatch = true;
-    this._videoList = mapQueueItem(
+    this._videoList = this._videoList.map(
       (it) =>
         ({
-          videoId: it!.videoId,
-          ownerId: this.owner!.id,
+          videoId: it.videoId,
+          ownerId: it.ownerId ?? this.owner!.id,
         }) satisfies VideoData,
-      this.queue.queue.getItems(),
-    );
-    this._videoList.splice(
-      index ?? this._videoList.length,
-      0,
-      ...videos.map((it) => ({
-        ...it,
-        ownerId: it.ownerId ?? this.owner?.id,
-      })),
     );
 
+    const state = this.queue.queue.store.store.getState();
+
     this.queue?.dispatch({
       type: 'ADD_ITEMS',
       payload: {
-        nextQueueItemId:
-          this.queue.queue.store.store.getState().queue.nextQueueItemId,
+        nextQueueItemId: state.queue.nextQueueItemId,
         index:
           index ??
-          this.queue.queue.store.store.getState().queue.items.length ??
+          (state.queue.items.length ? state.queue.items.length - 1 : null) ??
           0,
         items,
         shuffleEnabled: false,
         shouldAssignIds: true,
       },
     });
+
+    const insertedItem = this._videoList[index ?? this._videoList.length];
+    if (
+      !insertedItem ||
+      (insertedItem.videoId !== videos[0].videoId &&
+        insertedItem.ownerId !== videos[0].ownerId)
+    ) {
+      this._videoList.splice(
+        index ?? this._videoList.length,
+        0,
+        ...videos.map((it) => ({
+          ...it,
+          ownerId: it.ownerId ?? this.owner?.id,
+        })),
+      );
+    }
+
     this.internalDispatch = false;
     setTimeout(() => {
       this.initQueue();
@@ -364,7 +374,15 @@ export class Queue {
                 }
               ).items,
             );
-            this._videoList.push(
+            this._videoList.splice(
+              event.payload && Object.hasOwn(event.payload, 'index')
+                ? (
+                    event.payload as {
+                      index: number;
+                    }
+                  ).index
+                : this._videoList.length,
+              0,
               ...videoList.map((it) => ({
                 ...it,
                 ownerId: it.ownerId ?? this.owner?.id,
@@ -516,14 +534,16 @@ export class Queue {
 
     allQueue.forEach((queue) => {
       const list = Array.from(
-        queue?.querySelectorAll<HTMLElement>('ytmusic-player-queue-item') ?? [],
+        queue?.querySelectorAll<HTMLElement>(
+          '#contents > ytmusic-player-queue-item,#contents > ytmusic-playlist-panel-video-wrapper-renderer > #primary-renderer > ytmusic-player-queue-item',
+        ) ?? [],
       );
 
       list.forEach((item, index: number | undefined) => {
         if (typeof index !== 'number') return;
 
         const id = this._videoList[index]?.ownerId;
-        const data = this.getProfile(id);
+        let data = this.getProfile(id);
 
         const profile =
           item.querySelector<HTMLImageElement>('.music-together-owner') ??
@@ -539,6 +559,10 @@ export class Queue {
         name.textContent =
           data?.name ?? t('plugins.music-together.internal.unknown-user');
 
+        if (!data?.name && !data?.handleId) {
+          data = getDefaultProfile(data?.id ?? '');
+        }
+
         if (data) {
           profile.dataset.thumbnail = data.thumbnail ?? '';
           profile.dataset.name = data.name ?? '';