fix: fix reconnect error && added track interrupted embed && improve …

…stability

src/whaly/elements/buttons/controllerStrip.ts

@@ -50,3 +50,38 @@ export const controllerStrip = (player: Player): ActionRowBuilder => {
     loopButton
   )
 }
+
+export const controllerStripDisabled = (): ActionRowBuilder => {
+  const createId = (id: string): string => {
+    return `dummy_strip_${id}`
+  }
+
+  // Create all buttons for the strip
+  const stopButton = new ButtonBuilder()
+    .setStyle(2)
+    .setCustomId(createId("stop_dummy"))
+    .setEmoji("⏹️")
+    .setDisabled(true)
+  const prevButton = new ButtonBuilder()
+    .setStyle(2)
+    .setCustomId(createId("prev_dummy"))
+    .setEmoji("⏮️")
+    .setDisabled(true)
+  const playPauseButton = new ButtonBuilder()
+    .setStyle(2)
+    .setCustomId(createId("playPause_dummy"))
+    .setEmoji("⏸️")
+    .setDisabled(true)
+  const nextButton = new ButtonBuilder()
+    .setStyle(2)
+    .setCustomId(createId("next_dummy"))
+    .setEmoji("⏭️")
+    .setDisabled(true)
+
+  return new ActionRowBuilder().setComponents(
+    stopButton,
+    prevButton,
+    playPauseButton,
+    nextButton
+  )
+}

src/whaly/elements/embeds/playerInterrupted.ts

@@ -0,0 +1,39 @@
+import { runningCat } from "@main/elements/icons/runningCat"
+import { EmbedBuilder } from "discord.js"
+import type { Track } from "erela.js"
+import prettyMilliseconds from "pretty-ms"
+
+export const playerInterrupted = (track: Track | null) => {
+  return new EmbedBuilder()
+    .setAuthor({
+      name: "Player interrupted",
+      iconURL: runningCat
+    })
+    .setDescription(
+      track
+        ? `[${track.title}](${track.uri})`
+        : "There is no track playing currently. Play something!"
+    )
+    .addFields(
+      {
+        name: "Requested by",
+        value: track ? `${track.requester}` : "none",
+        inline: true
+      },
+      {
+        name: "Duration",
+        // eslint-disable-next-line no-nested-ternary
+        value: track
+          ? track.isStream
+            ? `\`LIVE\``
+            : `\`${prettyMilliseconds(track.duration, {
+                colonNotation: true
+              })}\``
+          : "0.00",
+        inline: true
+      }
+    )
+    .setThumbnail(
+      track ? track.thumbnail : "https://pryter.me/assets/images/whaly.jpeg"
+    )
+}

src/whaly/events/client/interactions/reconnect.ts

@@ -1,9 +1,11 @@
 import type { ButtonInteractionData } from "@itypes/interaction/ButtonInteractionData"
-import { createPlayer } from "@main/player/createPlayer"
+import { controllerStrip } from "@main/elements/buttons/controllerStrip"
+import { nowPlayingEmbed } from "@main/elements/embeds/nowPlaying"
 import { info } from "@utils/logger"
-import type { Message, VoiceChannel } from "discord.js"
+import type { Message, MessageEditOptions } from "discord.js"
+import type { Track } from "erela.js"
 
-export const handleReconnectEvent = (
+export const handleReconnectEvent = async (
   buttonInteractionData: ButtonInteractionData
 ) => {
   const { player, textChannel, voiceChannel, manager, guildId } =
@@ -16,26 +18,24 @@ export const handleReconnectEvent = (
   if (!voiceChannelId) {
     return
   }
-  const oldQueue = player.queue
 
-  player.destroy(true)
-  if (!voiceChannel) {
-    return
-  }
-  const newPlayer = createPlayer(
-    manager,
-    textChannel,
-    <VoiceChannel>voiceChannel
-  )
-
-  if (oldQueue.current) {
-    newPlayer.queue.add(oldQueue.current)
-    newPlayer.queue.add(oldQueue.current)
+  player.setVoiceChannel(voiceChannelId)
+  player.connect()
+  await player.pause(false)
+
+  if (player.queue.current) {
+    const embed = nowPlayingEmbed(<Track>player.queue.current)
+    const content = {
+      embeds: [embed],
+      // @ts-ignore
+      components: [controllerStrip(player)]
+    }
+
+    const nowPlaying: Message | null | undefined = player.get("nowPlaying")
+
+    nowPlaying?.edit(<MessageEditOptions>content)
   }
-  oldQueue.forEach((track) => {
-    newPlayer.queue.add(track)
-  })
-  newPlayer.connect()
+
   info(`Successfully swapped a player @ ${guildId}`)
 
   const reconMess: Message | null | undefined = player.get("reconnectMessage")

src/whaly/events/manager/playerDisconnect.ts

@@ -1,5 +1,7 @@
+import { controllerStripDisabled } from "@main/elements/buttons/controllerStrip"
 import { reconnectButton } from "@main/elements/buttons/reconnect"
 import { disconnectEmbed } from "@main/elements/embeds/discconect"
+import { playerInterrupted } from "@main/elements/embeds/playerInterrupted"
 import { disconnectWithReconnectEmbed } from "@main/elements/embeds/reconnect"
 import { forcedDisconnectReason } from "@main/elements/texts"
 import { getChannel } from "@utils/cache"
@@ -8,9 +10,10 @@ import type {
   Client,
   Message,
   MessageCreateOptions,
+  MessageEditOptions,
   TextChannel
 } from "discord.js"
-import type { Manager } from "erela.js"
+import type { Manager, Track } from "erela.js"
 
 import { config } from "../../../config"
 
@@ -33,6 +36,19 @@ export const registerPlayerDisconnectEvent = (
         config.reconnectEmbedLifeSpan
       )
       player.set("reconnectMessage", reconnectMessage)
+
+      if (player.queue.current) {
+        const nowPlaying: Message | null | undefined = player.get("nowPlaying")
+
+        const contente = {
+          embeds: [playerInterrupted(<Track>player.queue.current)],
+          // @ts-ignore
+          components: [controllerStripDisabled(player)]
+        }
+
+        nowPlaying?.edit(<MessageEditOptions>contente)
+      }
+
       setTimeout(() => {
         const latestPlayer = manager.get(textChannel.guild.id)
         const recon: Message | null | undefined =

src/whaly/events/manager/queueEnd.ts

@@ -1,9 +1,16 @@
+import { controllerStripDisabled } from "@main/elements/buttons/controllerStrip"
 import { disconnectEmbed } from "@main/elements/embeds/discconect"
+import { playerInterrupted } from "@main/elements/embeds/playerInterrupted"
 import { queueEndEmbed } from "@main/elements/embeds/queueEnd"
 import { inactivityDisconnectReason } from "@main/elements/texts"
 import { getChannel } from "@utils/cache"
 import { sendSelfDestroyMessage } from "@utils/message"
-import type { Client, TextChannel } from "discord.js"
+import type {
+  Client,
+  Message,
+  MessageEditOptions,
+  TextChannel
+} from "discord.js"
 import type { Manager } from "erela.js"
 
 import { config } from "../../../config"
@@ -23,19 +30,34 @@ export const registerQueueEndEvent = (manager: Manager, client: Client) => {
       config.selfDestroyMessageLifeSpan
     )
 
-    setTimeout(async () => {
-      if (player.state === "DESTROYING") {
-        return
-      }
-
-      if (!player.playing && player.state !== "DISCONNECTED") {
-        await sendSelfDestroyMessage(
-          textChannel,
-          { embeds: [disconnectEmbed(inactivityDisconnectReason)] },
-          config.selfDestroyMessageLifeSpan
-        )
-        player.destroy()
-      }
-    }, config.disconnectTime)
+    const nowPlaying: Message | null | undefined = player.get("nowPlaying")
+
+    const contente = {
+      embeds: [playerInterrupted(null)],
+      // @ts-ignore
+      components: [controllerStripDisabled(player)]
+    }
+
+    nowPlaying?.edit(<MessageEditOptions>contente)
+
+    setTimeout(
+      async () => {
+        if (player.state === "DESTROYING") {
+          return
+        }
+
+        if (!player.playing && player.state !== "DISCONNECTED") {
+          await sendSelfDestroyMessage(
+            textChannel,
+            { embeds: [disconnectEmbed(inactivityDisconnectReason)] },
+            config.selfDestroyMessageLifeSpan
+          )
+          player.destroy()
+        }
+      },
+      config.reconnectEmbedLifeSpan > config.disconnectTime
+        ? config.reconnectEmbedLifeSpan + config.disconnectTime
+        : config.disconnectTime
+    )
   })
 }