feat: voice on discord support

sample.env

@@ -60,6 +60,8 @@ SERVEME_TF_API_KEY=
 
 # Discord (optional)
 DISCORD_BOT_TOKEN=
+DISCORD_CLIENT_ID=
+DISCORD_CLIENT_SECRET=
 
 # twitch.tv integration (optional)
 # https://dev.twitch.tv/console

src/admin/discord/views/html/guild-configuration.tsx

@@ -1,6 +1,7 @@
-import { TextChannel, type Guild } from 'discord.js'
+import { type Guild } from 'discord.js'
 import { SaveButton } from '../../../views/html/save-button'
 import { configuration } from '../../../../configuration'
+import { SelectDiscordChannel } from './select-discord-channel'
 
 export async function GuildConfiguration(props: { guild: Guild; enabled: boolean }) {
   if (!props.enabled) {
@@ -15,8 +16,9 @@ export async function GuildConfiguration(props: { guild: Guild; enabled: boolean
         <label for={`${props.guild.id}-admin-notifications-channel`}>
           Admin notifications channel:
         </label>
-        <SelectTextChannel
-          guild={props.guild}
+        <SelectDiscordChannel
+          guildId={props.guild.id}
+          channelType="text"
           id={`${props.guild.id}-admin-notifications-channel`}
           name="adminNotificationsChannel"
           current={config?.adminNotifications?.channel}
@@ -27,8 +29,9 @@ export async function GuildConfiguration(props: { guild: Guild; enabled: boolean
         <label for={`${props.guild.id}-substitute-notifications-channel`}>
           Substitute notifications channel:
         </label>
-        <SelectTextChannel
-          guild={props.guild}
+        <SelectDiscordChannel
+          guildId={props.guild.id}
+          channelType="text"
           id={`${props.guild.id}-substitute-notifications-channel`}
           name="substituteNotificationsChannel"
           current={config?.substituteNotifications?.channel}
@@ -44,8 +47,9 @@ export async function GuildConfiguration(props: { guild: Guild; enabled: boolean
 
       <div class="flex flex-row gap-2">
         <label for={`${props.guild.id}-queue-prompts-channel`}>Queue prompts channel:</label>
-        <SelectTextChannel
-          guild={props.guild}
+        <SelectDiscordChannel
+          guildId={props.guild.id}
+          channelType="text"
           id={`${props.guild.id}-queue-prompts-channel`}
           name="queuePromptsChannel"
           current={config?.queuePrompts?.channel}
@@ -59,40 +63,6 @@ export async function GuildConfiguration(props: { guild: Guild; enabled: boolean
   )
 }
 
-function SelectTextChannel(
-  props: { guild: Guild; current: string | undefined } & JSX.HtmlSelectTag,
-) {
-  const { guild, current, ...rest } = props
-  const textChannels = Array.from(
-    guild.channels.cache.filter(channel => channel instanceof TextChannel).values(),
-  ).reduce<Map<string, TextChannel[]>>((prev, curr) => {
-    if (!prev.has(curr.parent!.name)) {
-      prev.set(curr.parent!.name, [])
-    }
-
-    prev.get(curr.parent!.name)!.push(curr)
-    return prev
-  }, new Map<string, TextChannel[]>())
-
-  textChannels.forEach(value => value.sort((a, b) => a.position - b.position))
-
-  return (
-    <select {...rest}>
-      <option value="">disabled</option>
-
-      {Array.from(textChannels, ([parent, channels]) => (
-        <optgroup label={parent}>
-          {channels.map(({ id, name }) => (
-            <option value={id} selected={current === id} safe>
-              {name}
-            </option>
-          ))}
-        </optgroup>
-      ))}
-    </select>
-  )
-}
-
 function SelectRole(props: { guild: Guild; current: string | undefined } & JSX.HtmlSelectTag) {
   const { guild, current, ...rest } = props
   const roles = Array.from(guild.roles.cache.values()).toSorted((a, b) =>

src/admin/discord/views/html/select-discord-channel.tsx

@@ -0,0 +1,78 @@
+import { ChannelType, TextChannel, VoiceChannel } from 'discord.js'
+import { discord } from '../../../../discord'
+
+type DiscordChannelType = 'text' | 'voice' | 'category'
+
+export function SelectDiscordChannel(
+  props: {
+    guildId?: string | null
+    current?: string
+    channelType: DiscordChannelType
+  } & JSX.HtmlSelectTag,
+) {
+  const { guildId, current, channelType, ...rest } = props
+  const guild = guildId ? discord.client?.guilds.resolve(guildId) : null
+
+  if (!guild) {
+    return (
+      <select {...rest} disabled>
+        <option value="">{guildId ? 'guild not found' : 'select guild first'}</option>
+        {current && (
+          <option value={current} selected>
+            {current}
+          </option>
+        )}
+      </select>
+    )
+  }
+
+  if (channelType === 'category') {
+    const categories = Array.from(guild.channels.cache.values())
+      .filter(channel => channel.type === ChannelType.GuildCategory)
+      .toSorted((a, b) => a.position - b.position)
+
+    return (
+      <select {...rest}>
+        <option value="">disabled</option>
+
+        {categories.map(({ id, name }) => (
+          <option value={id} selected={current === id} safe>
+            {name}
+          </option>
+        ))}
+      </select>
+    )
+  }
+
+  const channels = Array.from(guild.channels.cache.values()).filter(channel =>
+    channelType === 'text' ? channel instanceof TextChannel : channel instanceof VoiceChannel,
+  )
+
+  const groupedChannels = channels.reduce<Map<string, typeof channels>>((prev, curr) => {
+    const parentName = curr.parent?.name ?? 'No category'
+    if (!prev.has(parentName)) {
+      prev.set(parentName, [])
+    }
+
+    prev.get(parentName)!.push(curr)
+    return prev
+  }, new Map<string, typeof channels>())
+
+  groupedChannels.forEach(group => group.sort((a, b) => a.position - b.position))
+
+  return (
+    <select {...rest}>
+      <option value="">disabled</option>
+
+      {Array.from(groupedChannels, ([parent, grouped]) => (
+        <optgroup label={parent}>
+          {grouped.map(({ id, name }) => (
+            <option value={id} selected={current === id} safe>
+              {name}
+            </option>
+          ))}
+        </optgroup>
+      ))}
+    </select>
+  )
+}

src/admin/discord/views/html/select-discord-guild.tsx

@@ -0,0 +1,37 @@
+import { discord } from '../../../../discord'
+
+export function SelectDiscordGuild(
+  props: {
+    current?: string | null
+  } & JSX.HtmlSelectTag,
+) {
+  const { current, ...rest } = props
+  const guilds = Array.from(discord.client?.guilds.cache.values() ?? []).toSorted((a, b) =>
+    a.name.localeCompare(b.name),
+  )
+
+  if (guilds.length === 0) {
+    return (
+      <select {...rest} disabled>
+        <option value="">no guilds available</option>
+        {current && (
+          <option value={current} selected>
+            {current}
+          </option>
+        )}
+      </select>
+    )
+  }
+
+  return (
+    <select {...rest}>
+      <option value="">disabled</option>
+
+      {guilds.map(({ id, name }) => (
+        <option value={id} selected={current === id} safe>
+          {name}
+        </option>
+      ))}
+    </select>
+  )
+}