fix postFullCapabilities issue (#642)

Fixes issue where capabilities weren't posted to the server when the streaming quality changed

update post capabilities hook to be cleaner and more self contained

maestro/tests/4-musicplayer.yaml

@@ -49,16 +49,16 @@ appId:  com.cosmonautical.jellify
 # Scroll Down to see the queue
 - scrollUntilVisible:
     element:
-      id: "queue-item-12"
+      id: "queue-item-8"
     direction: "DOWN"
 
 - scrollUntilVisible:
     element:
-      id: "queue-item-12"
+      id: "queue-item-8"
     direction: "UP"
 # Play some other Song
 - tapOn:
-    id: 'queue-item-12'
+    id: 'queue-item-8'
 
 - pressKey: BACK
 

src/api/mutations/session/index.ts

@@ -1,24 +1,33 @@
 import { useMutation } from '@tanstack/react-query'
 import useStreamingDeviceProfile from '../../../stores/device-profile'
-import { Api } from '@jellyfin/sdk'
 import { getSessionApi } from '@jellyfin/sdk/lib/utils/api'
 import { MONOCHROME_ICON_URL } from '../../../configs/config'
+import { useEffect } from 'react'
+import { useApi } from '../../../stores'
 
 const usePostFullCapabilities = () => {
+	const api = useApi()
 	const streamingDeviceProfile = useStreamingDeviceProfile()
 
-	return useMutation({
-		mutationFn: async (api: Api | undefined) => {
+	const { mutate } = useMutation({
+		onMutate: () => console.debug('Posting player capabilities'),
+		mutationFn: async () => {
 			if (!api) return
 
-			return getSessionApi(api).postFullCapabilities({
+			return await getSessionApi(api).postFullCapabilities({
 				clientCapabilitiesDto: {
 					IconUrl: MONOCHROME_ICON_URL,
 					DeviceProfile: streamingDeviceProfile,
 				},
 			})
 		},
+		onSuccess: () => console.info('Successfully posted player capabilities'),
+		onError: (error) => console.error('Unable to post player capabilities', error),
 	})
+
+	useEffect(() => {
+		mutate()
+	}, [streamingDeviceProfile.Id])
 }
 
 export default usePostFullCapabilities

src/providers/Player/index.tsx

@@ -16,6 +16,7 @@ import Initialize from './functions/initialization'
 import { useEnableAudioNormalization } from '../../stores/settings/player'
 import { useApi } from '../../stores'
 import { usePlayerQueueStore } from '../../stores/player/queue'
+import usePostFullCapabilities from '../../api/mutations/session'
 
 const PLAYER_EVENTS: Event[] = [
 	Event.PlaybackActiveTrackChanged,
@@ -36,6 +37,8 @@ export const PlayerProvider: () => React.JSX.Element = () => {
 
 	const [enableAudioNormalization] = useEnableAudioNormalization()
 
+	usePostFullCapabilities()
+
 	const downloadingDeviceProfile = useDownloadingDeviceProfile()
 
 	usePerformanceMonitor('PlayerProvider', 3)