add OS transcoding extension

src/renderer/features/player/audio-player/engine/mpv-player-engine.tsx

@@ -124,10 +124,10 @@ export const MpvPlayerEngine = (props: MpvPlayerEngineProps) => {
             if (!radioState.currentStreamUrl) {
                 const playerData = usePlayerStore.getState().getPlayerData();
                 const currentSongUrl = playerData.currentSong
-                    ? getSongUrl(playerData.currentSong, transcode)
+                    ? await getSongUrl(playerData.currentSong, transcode, true)
                     : undefined;
                 const nextSongUrl = playerData.nextSong
-                    ? getSongUrl(playerData.nextSong, transcode)
+                    ? await getSongUrl(playerData.nextSong, transcode, true)
                     : undefined;
 
                 if (currentSongUrl && nextSongUrl && !hasPopulatedQueueRef.current && mpvPlayer) {
@@ -274,14 +274,14 @@ export const MpvPlayerEngine = (props: MpvPlayerEngineProps) => {
             onMediaPrev: () => {
                 replaceMpvQueue(transcode);
             },
-            onNextSongInsertion: (song) => {
+            onNextSongInsertion: async (song) => {
                 const radioState = useRadioStore.getState();
 
                 if (radioState.currentStreamUrl) {
                     return;
                 }
 
-                const nextSongUrl = song ? getSongUrl(song, transcode) : undefined;
+                const nextSongUrl = song ? await getSongUrl(song, transcode, true) : undefined;
                 mpvPlayer?.setQueueNext(nextSongUrl);
             },
             onPlayerPlay: () => {
@@ -339,19 +339,19 @@ export const MpvPlayerEngine = (props: MpvPlayerEngineProps) => {
 
 MpvPlayerEngine.displayName = 'MpvPlayerEngine';
 
-function handleMpvAutoNext(transcode: {
+async function handleMpvAutoNext(transcode: {
     bitrate?: number | undefined;
     enabled: boolean;
     format?: string | undefined;
 }) {
     const playerData = usePlayerStore.getState().getPlayerData();
     const nextSongUrl = playerData.nextSong
-        ? getSongUrl(playerData.nextSong, transcode)
+        ? await getSongUrl(playerData.nextSong, transcode, true)
         : undefined;
     mpvPlayer?.autoNext(nextSongUrl);
 }
 
-function replaceMpvQueue(transcode: {
+async function replaceMpvQueue(transcode: {
     bitrate?: number | undefined;
     enabled: boolean;
     format?: string | undefined;
@@ -365,10 +365,10 @@ function replaceMpvQueue(transcode: {
 
     const playerData = usePlayerStore.getState().getPlayerData();
     const currentSongUrl = playerData.currentSong
-        ? getSongUrl(playerData.currentSong, transcode)
+        ? await getSongUrl(playerData.currentSong, transcode, true)
         : undefined;
     const nextSongUrl = playerData.nextSong
-        ? getSongUrl(playerData.nextSong, transcode)
+        ? await getSongUrl(playerData.nextSong, transcode, true)
         : undefined;
     mpvPlayer?.setQueue(currentSongUrl, nextSongUrl, false);
 }

src/renderer/features/player/audio-player/hooks/use-stream-url.tsx

@@ -1,4 +1,5 @@
-import { useMemo, useRef } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { TranscodingConfig } from '/@/renderer/store';
@@ -10,52 +11,71 @@ export function useSongUrl(
     transcode: TranscodingConfig,
 ): string | undefined {
     const prior = useRef(['', '']);
+    const shouldReusePrior = Boolean(
+        song?._serverId && current && prior.current[0] === song._uniqueId && prior.current[1],
+    );
 
-    return useMemo(() => {
-        if (song?._serverId) {
-            // If we are the current track, we do not want a transcoding
-            // reconfiguration to force a restart.
-            if (current && prior.current[0] === song._uniqueId) {
-                return prior.current[1];
-            }
-
-            const url = api.controller.getStreamUrl({
-                apiClientProps: { serverId: song._serverId },
+    const { data: queryStreamUrl } = useQuery({
+        enabled: Boolean(song?._serverId) && !shouldReusePrior,
+        queryFn: () =>
+            api.controller.getStreamUrl({
+                apiClientProps: { serverId: song!._serverId },
                 query: {
                     bitrate: transcode.bitrate,
                     format: transcode.format,
-                    id: song.id,
+                    id: song!.id,
                     transcode: transcode.enabled,
                 },
-            });
+            }),
+        queryKey: [
+            song?._serverId,
+            'stream-url',
+            song?.id,
+            shouldReusePrior ? 'reuse-prior' : transcode.bitrate,
+            shouldReusePrior ? 'reuse-prior' : transcode.format,
+            shouldReusePrior ? 'reuse-prior' : transcode.enabled,
+        ] as const,
+        staleTime: 60 * 1000,
+    });
 
-            // transcoding enabled; save the updated result
-            prior.current = [song._uniqueId, url];
-            return url;
+    useEffect(() => {
+        if (!song?._serverId) {
+            prior.current = ['', ''];
+            return;
         }
 
-        // no track; clear result
-        prior.current = ['', ''];
-        return undefined;
-    }, [
-        song?._serverId,
-        song?._uniqueId,
-        song?.id,
-        current,
-        transcode.bitrate,
-        transcode.format,
-        transcode.enabled,
-    ]);
+        if (!queryStreamUrl) {
+            return;
+        }
+
+        // Save resolved URL to avoid restarting current track on transcode setting changes.
+        prior.current = [song._uniqueId, queryStreamUrl];
+    }, [song?._serverId, song?._uniqueId, queryStreamUrl]);
+
+    useEffect(() => {
+        if (!song?._serverId) {
+            prior.current = ['', ''];
+        }
+    }, [song?._serverId]);
+
+    return shouldReusePrior ? prior.current[1] : queryStreamUrl;
 }
 
-export const getSongUrl = (song: QueueSong, transcode: TranscodingConfig) => {
-    return api.controller.getStreamUrl({
+export const getSongUrl = async (
+    song: QueueSong,
+    transcode: TranscodingConfig,
+    skipAutoTranscode?: boolean,
+) => {
+    const url = await api.controller.getStreamUrl({
         apiClientProps: { serverId: song._serverId },
         query: {
             bitrate: transcode.bitrate,
             format: transcode.format,
             id: song.id,
+            skipAutoTranscode,
             transcode: transcode.enabled,
         },
     });
+
+    return url;
 };

src/renderer/features/player/components/audio-players.tsx

@@ -37,6 +37,52 @@ import { toast } from '/@/shared/components/toast/toast';
 import { LibraryItem } from '/@/shared/types/domain-types';
 import { PlayerType } from '/@/shared/types/types';
 
+const CODEC_PROBES = [
+    { codec: 'mp3', container: 'mp3', mime: 'audio/mpeg' },
+    { codec: 'aac', container: 'mp4', mime: 'audio/mp4; codecs="mp4a.40.2"' },
+    { codec: 'opus', container: 'ogg', mime: 'audio/ogg; codecs="opus"' },
+    { codec: 'vorbis', container: 'ogg', mime: 'audio/ogg; codecs="vorbis"' },
+    { codec: 'flac', container: 'flac', mime: 'audio/flac' },
+    { codec: 'wav', container: 'wav', mime: 'audio/wav' },
+    { codec: 'alac', container: 'mp4', mime: 'audio/mp4; codecs="alac"' },
+];
+
+const DEFAULT_TRANSCODING_PROFILES = [
+    { audioCodec: 'opus', container: 'ogg', protocol: 'http' },
+    { audioCodec: 'mp3', container: 'mp3', protocol: 'http' },
+];
+
+const DIRECT_PLAY_PROFILES: {
+    audioCodecs: string[];
+    containers: string[];
+    protocols: string[];
+}[] = [];
+
+export function getDefaultTranscodingProfiles() {
+    return DEFAULT_TRANSCODING_PROFILES;
+}
+
+export function getDirectPlayProfiles() {
+    return DIRECT_PLAY_PROFILES;
+}
+
+// Shamelessly taken from NavidromeUI
+function detectBrowserProfile() {
+    const audio = new Audio();
+
+    for (const { codec, container, mime } of CODEC_PROBES) {
+        if (audio.canPlayType(mime) === 'probably') {
+            DIRECT_PLAY_PROFILES.push({
+                audioCodecs: [codec],
+                containers: [container],
+                protocols: ['http'],
+            });
+        }
+    }
+
+    return DIRECT_PLAY_PROFILES;
+}
+
 export const AudioPlayers = () => {
     const playbackType = usePlaybackType();
     const serverId = useCurrentServerId();
@@ -49,6 +95,11 @@ export const AudioPlayers = () => {
     } = usePlaybackSettings();
     const { setWebAudio, webAudio: audioContext } = useWebAudio();
 
+    useEffect(() => {
+        console.log('getDirectPlayProfiles');
+        detectBrowserProfile();
+    }, []);
+
     return (
         <>
             <SleepTimerHook />