feat: change mutations and api

core/radio/radio.go

@@ -67,7 +67,7 @@ func (rs *RadioServiceImpl) RefreshVolume(ctx context.Context, radio Radio) erro
 	})
 }
 
-func (rs *RadioServiceImpl) Refresh(ctx context.Context, radio Radio) error {
+func (rs *RadioServiceImpl) RefreshSubscription(ctx context.Context, radio Radio) error {
 	radio.subscription.Renew()
 	return nil
 }

core/radio/type.go

@@ -27,7 +27,7 @@ type (
 	RadioService interface {
 		GetState(ctx context.Context, radio Radio) (*state.State, error)
 		PlayPreset(ctx context.Context, radio Radio, preset int) error
-		Refresh(ctx context.Context, radio Radio) error
+		RefreshSubscription(ctx context.Context, radio Radio) error
 		RefreshVolume(ctx context.Context, radio Radio) error
 		SetAudioSource(ctx context.Context, radio Radio, audioSource string) error
 		SetPower(ctx context.Context, radio Radio, power bool) error

left/api/radio.go

@@ -155,10 +155,10 @@ func PatchRadio(radioService radio.RadioService) RadioRequester {
 	}
 }
 
-func PostRadio(radioService radio.RadioService) RadioRequester {
+func PostRadioSubscription(radioService radio.RadioService) RadioRequester {
 	return func(r *http.Request, rd radio.Radio) presenter.Response {
-		// Refresh radio
-		if err := radioService.Refresh(r.Context(), rd); err != nil {
+		// Refresh radio subscription
+		if err := radioService.RefreshSubscription(r.Context(), rd); err != nil {
 			return handleRadioError(err)
 		}
 

left/router/router.go

@@ -50,7 +50,7 @@ func New(port string, p presenter.Presenter, fs fs.FS, hub radio.HubService, rad
 		r.Route("/radio/{uuid}", func(r chi.Router) {
 			r.Get("/", p(api.RequireRadio(hub, api.GetRadio(radioService))))
 			r.Patch("/", p(api.RequireRadio(hub, api.PatchRadio(radioService))))
-			r.Post("/", p(api.RequireRadio(hub, api.PostRadio(radioService))))
+			r.Post("/subscription", p(api.RequireRadio(hub, api.PostRadioSubscription(radioService))))
 			r.Post("/volume", p(api.RequireRadio(hub, api.PostRadioVolume(radioService))))
 		})
 

left/web/src/App.vue

@@ -2,7 +2,7 @@
 import { watch, ref } from "vue";
 
 import { PAGE_HOME, PAGE_EDIT } from "./constants";
-import { useWS, useRadiosQuery } from "./hooks"
+import { useWS, useRadiosQuery, useRadioSubscriptionMutation } from "./hooks"
 
 import RadioStatus from "./components/RadioStatus.vue";
 import RadioTitle from "./components/RadioTitle.vue";
@@ -22,8 +22,10 @@ const setPage = (value: string) => {
 
 const radioUUID = ref("");
 const { data: radios, isLoading: radiosLoading, refetch: radiosRefetch } = useRadiosQuery();
-const { radio, connecting, disconnected, reconnect } = useWS(radioUUID);
+const { radio, connecting: wsConnecting, disconnected: wsDisconnected, reconnect: wsReconnect } = useWS(radioUUID);
+const { mutate: radioSubscriptionMutate, isLoading: radioSubscriptionLoading } = useRadioSubscriptionMutation();
 
+// Make sure a valid radio is selected
 watch(radios, (newRadios) => {
   if (newRadios) {
     for (const r of newRadios) {
@@ -34,14 +36,23 @@ watch(radios, (newRadios) => {
     radioUUID.value = ""
   }
 });
+
+// Refetch radios and refresh currently selected radio
+const onRefreshClick = () => {
+  if (radioUUID.value) {
+    radioSubscriptionMutate(radioUUID.value)
+  }
+
+  radiosRefetch.value()
+}
 </script>
 
 <template>
   <div class="h-screen">
     <!-- Top Navbar -->
     <div class="navbar bg-base-200 fixed top-0 flex gap-2 z-50 border-b-2 border-b-base-300">
-      <radio-status :radio="radio" :loading="connecting" />
-      <radio-title class="flex-grow w-full" :radio="radio" :loading="connecting" />
+      <radio-status :radio="radio" :loading="wsConnecting" />
+      <radio-title class="flex-grow w-full" :radio="radio" :loading="wsConnecting" />
     </div>
     <div class="mx-5 pt-20 pb-36">
       <!-- Homepage -->
@@ -56,14 +67,14 @@ watch(radios, (newRadios) => {
     <!-- Bottom -->
     <div class="fixed bottom-0 w-full space-y-2">
       <!--- Radio Websocket Disconnect Alert -->
-      <div v-if="disconnected" class="ml-auto px-2 max-w-screen-sm">
+      <div v-if="wsDisconnected" class="ml-auto px-2 max-w-screen-sm">
         <div class="alert shadow-lg">
           <div>
             <v-icon class="text-info" name="fa-info-circle" />
             <span>Disconnected from server.</span>
           </div>
           <div class="flex-none">
-            <d-button class="btn-sm btn-primary" :loading="connecting" @click="reconnect">Reconnect</d-button>
+            <d-button class="btn-sm btn-primary" :loading="wsConnecting" @click="wsReconnect">Reconnect</d-button>
           </div>
         </div>
       </div>
@@ -80,16 +91,16 @@ watch(radios, (newRadios) => {
         <div class="grow flex gap-2">
           <hamburger-menu :page="page" :set-page="setPage" />
           <div class="grow flex">
-            <radios-discover class="btn-primary rounded-none rounded-l-md" />
+            <radios-discover class="btn-primary w-12 rounded-none rounded-l-md" />
             <select v-model="radioUUID" :disabled="radiosLoading" class="select select-primary rounded-none flex-grow">
               <option disabled selected value="">Select Radio</option>
               <template v-if="radios">
                 <option :key="r.uuid" v-for="r in radios" :value="r.uuid">{{ r.name }}</option>
               </template>
             </select>
             <div class="tooltip" data-tip="Refresh">
-              <d-button class="btn-primary rounded-none rounded-r-md" aria-label="Refresh" :loading="radiosLoading"
-                @click="() => radiosRefetch()">
+              <d-button class="btn-primary w-12 rounded-none rounded-r-md" aria-label="Refresh"
+                :loading="radiosLoading || radioSubscriptionLoading" @click="onRefreshClick">
                 <v-icon name="fa-redo" />
               </d-button>
             </div>

left/web/src/components/RadioAudiosource.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from "vue"
+
 import { useRadioMutation } from "../hooks";
 
 import DButton from './DaisyUI/DButton.vue';
@@ -11,7 +13,14 @@ const { radio } = defineProps({
   }
 });
 
-const { mutate, isLoading } = useRadioMutation()
+const { mutate, isLoading, variables } = useRadioMutation()
+const loadingAudioSource = computed(() => {
+  if (!isLoading.value) {
+    return undefined;
+  }
+
+  return variables.value?.audio_source
+})
 </script>
 
 <template>
@@ -21,7 +30,7 @@ const { mutate, isLoading } = useRadioMutation()
     </d-dropdown-button>
     <ul tabindex="0" class="menu menu-compact dropdown-content mb-2 p-2 shadow bg-base-200 rounded-box w-52 space-y-2">
       <span class="mx-auto">Audio Source</span>
-      <d-button :loading="isLoading" :key="a" v-for="a in radio.audio_sources"
+      <d-button :loading="loadingAudioSource == a" :key="a" v-for="a in radio.audio_sources"
         :class="{ 'btn-secondary': a == radio.audio_source }"
         @click="() => { mutate({ uuid: radio.uuid, audio_source: a }) }">
         {{ a }}

left/web/src/components/RadioPower.vue

@@ -14,11 +14,11 @@ const { mutate, isLoading } = useRadioMutation()
 </script>
 
 <template>
-  <d-button v-if="radio.power" class="btn-success" aria-label="Powered ON" :loading="isLoading"
+  <d-button v-if="radio.power" class="btn-success w-12" aria-label="Powered ON" :loading="isLoading"
     @click="() => mutate({ uuid: radio.uuid, power: false })">
     <v-icon name="fa-power-off" />
   </d-button>
-  <d-button v-else class="btn-error" aria-label="Powered OFF" :loading="isLoading"
+  <d-button v-else class="btn-error w-12" aria-label="Powered OFF" :loading="isLoading"
     @click="() => mutate({ uuid: radio.uuid, power: true })">
     <v-icon name="fa-power-off" />
   </d-button>

left/web/src/components/RadioPresets.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from "vue";
+
 import { useRadioMutation } from "../hooks";
 
 import Preset from "./Preset.vue";
@@ -10,12 +12,22 @@ defineProps({
   },
 });
 
-const { mutate, isLoading } = useRadioMutation()
+const { mutate, isLoading, variables } = useRadioMutation()
+
+
+const loadingNumber = computed(() => {
+  if (!isLoading.value) {
+    return undefined;
+  }
+
+  return variables.value?.preset
+})
+
 </script>
 
 <template>
   <preset :key="p.number" v-for="p of radio.presets" :selected="radio.preset_number == p.number" :preset="p"
-    :loading="isLoading" @click="() => mutate({ uuid: radio.uuid, preset: p.number })" />
+    :loading="loadingNumber == p.number" @click="() => mutate({ uuid: radio.uuid, preset: p.number })" />
 </template>
 
 <style>

left/web/src/components/RadioVolume.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRadioMutation } from "../hooks";
+import { useRadioMutation, useRadioVolumeMutation } from "../hooks";
 
 import DButton from "./DaisyUI/DButton.vue";
 
@@ -11,16 +11,19 @@ defineProps({
 });
 
 const { mutate, isLoading } = useRadioMutation()
+const { mutate: refreshVolume, isLoading: refreshVolumeLoading } = useRadioVolumeMutation()
 </script>
 
 <template>
   <div v-if="!radio.is_muted" class="btn-group">
-    <d-button class="btn-info" aria-label="Volume Down" :loading="isLoading"
+    <d-button class="btn-info w-12" aria-label="Volume Down" :loading="isLoading"
       @click="mutate({ uuid: radio.uuid, volume: radio.volume - 5 })">
       <v-icon name="fa-volume-down" />
     </d-button>
-    <d-button class="btn-info px-0 w-10">{{ radio.volume }}%</d-button>
-    <d-button class="btn-info" aria-label="Volume Up" :loading="isLoading"
+    <d-button class="btn-info px-0 w-10" :loading="refreshVolumeLoading" @click="() => refreshVolume(radio.uuid)">
+      {{ radio.volume }}%
+    </d-button>
+    <d-button class="btn-info w-12" aria-label="Volume Up" :loading="isLoading"
       @click="mutate({ uuid: radio.uuid, volume: radio.volume + 5 })">
       <v-icon name="fa-volume-up" />
     </d-button>

left/web/src/hooks/index.ts

@@ -1,3 +1,3 @@
 export { useWS } from "./ws"
 export { useRadiosQuery } from "./query"
-export { useRadioMutation, useRadiosDiscoverMutation } from "./mutation"
+export { useRadioMutation, useRadioSubscriptionMutation, useRadioVolumeMutation, useRadiosDiscoverMutation, } from "./mutation"

left/web/src/hooks/mutation.ts

@@ -16,6 +16,27 @@ export function useRadioMutation() {
   })
 };
 
+
+export function useRadioSubscriptionMutation() {
+  return useMutation((uuid: string) => fetch(API_URL + "/api/radio/" + uuid + "/subscription", { method: "POST" })
+    .then((res) => res.json())
+    .then((json: APIResponse<void>) => {
+      if (!json.ok) {
+        throw new Error(json.error.message);
+      }
+    }));
+};
+
+export function useRadioVolumeMutation() {
+  return useMutation((uuid: string) => fetch(API_URL + "/api/radio/" + uuid + "/volume", { method: "POST" })
+    .then((res) => res.json())
+    .then((json: APIResponse<void>) => {
+      if (!json.ok) {
+        throw new Error(json.error.message);
+      }
+    }));
+};
+
 export function useRadiosDiscoverMutation() {
   const queryClient = useQueryClient()
   return useMutation((_: RadiosDiscoverMutation) => fetch(API_URL + "/api/radios", { method: "POST" })