Fixed volume

ui/src/api/guilds.ts

@@ -31,3 +31,7 @@ export async function pauseTrack(guildId: number): Promise<void> {
 export async function resumeTrack(guildId: number): Promise<void> {
   await postRequest(`guilds/${guildId}/voice/resume`, {});
 }
+
+export async function setVolume(guildId: number, volume: number): Promise<void> {
+  await postRequest(`guilds/${guildId}/voice/volume`, { volume: `${volume}` });
+}

ui/src/app/management/page.tsx

@@ -7,6 +7,7 @@ import {
   pauseTrack,
   playTrack,
   resumeTrack,
+  setVolume,
   stopTrack
 } from '@/api/guilds';
 import { GuildChannel, GuildInfo } from '@/api/guilds.types';
@@ -38,7 +39,8 @@ export default function Page() {
 
   const playForm = useForm({
     initialValues: {
-      trackUrl: ''
+      trackUrl: '',
+      volume: 50.0
     }
   });
 
@@ -101,12 +103,26 @@ export default function Page() {
                     Resume
                   </Button>
                 </div>
-                <div style={{ margin: '1em' }}>
-                  <Slider label='Volume' style={{ width: '20%' }} defaultValue={50} onChange={(v) => {}} />
-                  <Button style={{ marginRight: '1em' }} onClick={() => {}}>
+                <form
+                  style={{ margin: '1em' }}
+                  onSubmit={playForm.onSubmit((values) => {
+                    setVolume(activeGuild!.id, values.volume)
+                  })}
+                >
+                  <Slider
+                    defaultValue={50}
+                    {...playForm.getInputProps('volume')}
+                    marks={[
+
+                      { value: 25, label: '25%' },
+                      { value: 50, label: '50%' },
+                      { value: 75, label: '75%' },
+                    ]}
+                  />
+                  <Button type='submit'>
                     Set Volume
                   </Button>
-                </div>
+                </form>
               </Tabs.Panel>
             ))}
           </Tabs>