Add internet radio (#1384)

2026-08-04 19:33:32 +02:00 · 2025-12-13 21:26:33 -08:00
parent f61d34c340
commit 7ed847fecb
46 changed files with 2229 additions and 118 deletions
@@ -6,6 +6,7 @@ import { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { usePlayerEvents } from '/@/renderer/features/player/audio-player/hooks/use-player-events';
 import { getSongUrl } from '/@/renderer/features/player/audio-player/hooks/use-stream-url';
 import { AudioPlayer, PlayerOnProgressProps } from '/@/renderer/features/player/audio-player/types';
+import { useRadioStore } from '/@/renderer/features/radio/hooks/use-radio-player';
 import { getMpvProperties } from '/@/renderer/features/settings/components/playback/mpv-settings';
 import {
    usePlaybackSettings,
@@ -100,17 +101,22 @@ export const MpvPlayerEngine = (props: MpvPlayerEngineProps) => {
            isInitializedRef.current = true;

            // After initialization, populate the queue if currentSrc is available
-            const playerData = usePlayerStore.getState().getPlayerData();
-            const currentSongUrl = playerData.currentSong
-                ? getSongUrl(playerData.currentSong, transcode)
-                : undefined;
-            const nextSongUrl = playerData.nextSong
-                ? getSongUrl(playerData.nextSong, transcode)
-                : undefined;
+            // Don't override queue if radio is active
+            const radioState = useRadioStore.getState();

-            if (currentSongUrl && nextSongUrl && !hasPopulatedQueueRef.current && mpvPlayer) {
-                mpvPlayer.setQueue(currentSongUrl, nextSongUrl, true);
-                hasPopulatedQueueRef.current = true;
+            if (!radioState.currentStreamUrl) {
+                const playerData = usePlayerStore.getState().getPlayerData();
+                const currentSongUrl = playerData.currentSong
+                    ? getSongUrl(playerData.currentSong, transcode)
+                    : undefined;
+                const nextSongUrl = playerData.nextSong
+                    ? getSongUrl(playerData.nextSong, transcode)
+                    : undefined;
+
+                if (currentSongUrl && nextSongUrl && !hasPopulatedQueueRef.current && mpvPlayer) {
+                    mpvPlayer.setQueue(currentSongUrl, nextSongUrl, true);
+                    hasPopulatedQueueRef.current = true;
+                }
            }
        };

@@ -243,6 +249,12 @@ export const MpvPlayerEngine = (props: MpvPlayerEngineProps) => {
                replaceMpvQueue(transcode);
            },
            onNextSongInsertion: (song) => {
+                const radioState = useRadioStore.getState();
+
+                if (radioState.currentStreamUrl) {
+                    return;
+                }
+
                const nextSongUrl = song ? getSongUrl(song, transcode) : undefined;
                mpvPlayer?.setQueueNext(nextSongUrl);
            },
@@ -317,6 +329,13 @@ function replaceMpvQueue(transcode: {
    enabled: boolean;
    format?: string | undefined;
 }) {
+    // Don't override queue if radio is active
+    const radioState = useRadioStore.getState();
+
+    if (radioState.currentStreamUrl) {
+        return;
+    }
+
    const playerData = usePlayerStore.getState().getPlayerData();
    const currentSongUrl = playerData.currentSong
        ? getSongUrl(playerData.currentSong, transcode)
@@ -15,6 +15,11 @@ import { usePowerSaveBlocker } from '/@/renderer/features/player/hooks/use-power
 import { useQueueRestoreTimestamp } from '/@/renderer/features/player/hooks/use-queue-restore';
 import { useScrobble } from '/@/renderer/features/player/hooks/use-scrobble';
 import { useWebAudio } from '/@/renderer/features/player/hooks/use-webaudio';
+import {
+    useIsRadioActive,
+    useRadioAudioInstance,
+    useRadioMetadata,
+} from '/@/renderer/features/radio/hooks/use-radio-player';
 import {
    updateQueueFavorites,
    updateQueueRatings,
@@ -49,6 +54,9 @@ export const AudioPlayers = () => {
    useAutoDJ();
    useQueueRestoreTimestamp();

+    useRadioAudioInstance();
+    useRadioMetadata();
+
    useEffect(() => {
        if (webAudio && 'AudioContext' in window) {
            let context: AudioContext;
@@ -124,6 +132,16 @@ export const AudioPlayers = () => {
        };
    }, [serverId]);

+    const isRadioActive = useIsRadioActive();
+
+    if (isRadioActive && playbackType === PlayerType.LOCAL) {
+        return <MpvPlayer />;
+    }
+
+    if (isRadioActive && playbackType === PlayerType.WEB) {
+        return null;
+    }
+
    return (
        <>
            {playbackType === PlayerType.WEB && <WebPlayer />}
@@ -6,6 +6,12 @@ import { MainPlayButton, PlayerButton } from '/@/renderer/features/player/compon
 import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
 import { openShuffleAllModal } from '/@/renderer/features/player/components/shuffle-all-modal';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
+import {
+    useIsPlayingRadio,
+    useIsRadioActive,
+    useRadioControls,
+    useRadioPlayer,
+} from '/@/renderer/features/radio/hooks/use-radio-player';
 import {
    usePlayerRepeat,
    usePlayerShuffle,
@@ -19,6 +25,28 @@ import { PlayerRepeat, PlayerShuffle, PlayerStatus } from '/@/shared/types/types
 export const CenterControls = () => {
    const skip = useSettingsStore((state) => state.general.skipButtons);

+    const isRadioActive = useIsRadioActive();
+
+    if (isRadioActive) {
+        return (
+            <>
+                <div className={styles.controlsContainer}>
+                    <div className={styles.buttonsContainer}>
+                        <RadioStopButton />
+                        <ShuffleButton disabled={isRadioActive} />
+                        <PreviousButton disabled={isRadioActive} />
+                        {skip?.enabled && <SkipBackwardButton disabled={isRadioActive} />}
+                        <RadioCenterPlayButton />
+                        {skip?.enabled && <SkipForwardButton disabled={isRadioActive} />}
+                        <NextButton disabled={isRadioActive} />
+                        <RepeatButton disabled={isRadioActive} />
+                        <ShuffleAllButton disabled={isRadioActive} />
+                    </div>
+                </div>
+            </>
+        );
+    }
+
    return (
        <>
            <div className={styles.controlsContainer}>
@@ -39,13 +67,49 @@ export const CenterControls = () => {
    );
 };

-const StopButton = () => {
+const RadioCenterPlayButton = ({ disabled }: { disabled?: boolean }) => {
+    const { currentStreamUrl } = useRadioPlayer();
+    const isPlayingRadio = useIsPlayingRadio();
+    const { pause, play } = useRadioControls();
+
+    const handleClick = () => {
+        if (isPlayingRadio) {
+            pause();
+        } else if (currentStreamUrl) {
+            play();
+        }
+    };
+
+    return <MainPlayButton disabled={disabled} isPaused={!isPlayingRadio} onClick={handleClick} />;
+};
+
+const RadioStopButton = ({ disabled }: { disabled?: boolean }) => {
+    const { t } = useTranslation();
+    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const { stop } = useRadioControls();
+
+    return (
+        <PlayerButton
+            disabled={disabled}
+            icon={<Icon fill="default" icon="mediaStop" size={buttonSize - 2} />}
+            onClick={stop}
+            tooltip={{
+                label: t('player.stop', { postProcess: 'sentenceCase' }),
+                openDelay: 0,
+            }}
+            variant="tertiary"
+        />
+    );
+};
+
+const StopButton = ({ disabled }: { disabled?: boolean }) => {
    const { t } = useTranslation();
    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
    const { mediaStop } = usePlayer();

    return (
        <PlayerButton
+            disabled={disabled}
            icon={<Icon fill="default" icon="mediaStop" size={buttonSize - 2} />}
            onClick={mediaStop}
            tooltip={{
@@ -57,7 +121,7 @@ const StopButton = () => {
    );
 };

-const ShuffleButton = () => {
+const ShuffleButton = ({ disabled }: { disabled?: boolean }) => {
    const { t } = useTranslation();
    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
    const shuffle = usePlayerShuffle();
@@ -65,6 +129,7 @@ const ShuffleButton = () => {

    return (
        <PlayerButton
+            disabled={disabled}
            icon={
                <Icon
                    fill={shuffle === PlayerShuffle.NONE ? 'default' : 'primary'}
@@ -89,13 +154,14 @@ const ShuffleButton = () => {
    );
 };

-const PreviousButton = () => {
+const PreviousButton = ({ disabled }: { disabled?: boolean }) => {
    const { t } = useTranslation();
    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
    const { mediaPrevious } = usePlayer();

    return (
        <PlayerButton
+            disabled={disabled}
            icon={<Icon fill="default" icon="mediaPrevious" size={buttonSize} />}
            onClick={mediaPrevious}
            tooltip={{
@@ -107,13 +173,14 @@ const PreviousButton = () => {
    );
 };

-const SkipBackwardButton = () => {
+const SkipBackwardButton = ({ disabled }: { disabled?: boolean }) => {
    const { t } = useTranslation();
    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
    const { mediaSkipBackward } = usePlayer();

    return (
        <PlayerButton
+            disabled={disabled}
            icon={<Icon fill="default" icon="mediaStepBackward" size={buttonSize} />}
            onClick={mediaSkipBackward}
            tooltip={{
@@ -128,27 +195,28 @@ const SkipBackwardButton = () => {
    );
 };

-const CenterPlayButton = () => {
+const CenterPlayButton = ({ disabled }: { disabled?: boolean }) => {
    const currentSong = usePlayerSong();
    const status = usePlayerStatus();
    const { mediaTogglePlayPause } = usePlayer();

    return (
        <MainPlayButton
-            disabled={currentSong?.id === undefined}
+            disabled={disabled || currentSong?.id === undefined}
            isPaused={status === PlayerStatus.PAUSED}
            onClick={mediaTogglePlayPause}
        />
    );
 };

-const SkipForwardButton = () => {
+const SkipForwardButton = ({ disabled }: { disabled?: boolean }) => {
    const { t } = useTranslation();
    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
    const { mediaSkipForward } = usePlayer();

    return (
        <PlayerButton
+            disabled={disabled}
            icon={<Icon fill="default" icon="mediaStepForward" size={buttonSize} />}
            onClick={mediaSkipForward}
            tooltip={{
@@ -163,13 +231,14 @@ const SkipForwardButton = () => {
    );
 };

-const NextButton = () => {
+const NextButton = ({ disabled }: { disabled?: boolean }) => {
    const { t } = useTranslation();
    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
    const { mediaNext } = usePlayer();

    return (
        <PlayerButton
+            disabled={disabled}
            icon={<Icon fill="default" icon="mediaNext" size={buttonSize} />}
            onClick={mediaNext}
            tooltip={{
@@ -181,7 +250,7 @@ const NextButton = () => {
    );
 };

-const RepeatButton = () => {
+const RepeatButton = ({ disabled }: { disabled?: boolean }) => {
    const { t } = useTranslation();
    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
    const repeat = usePlayerRepeat();
@@ -189,6 +258,7 @@ const RepeatButton = () => {

    return (
        <PlayerButton
+            disabled={disabled}
            icon={
                repeat === PlayerRepeat.ONE ? (
                    <Icon fill="primary" icon="mediaRepeatOne" size={buttonSize} />
@@ -226,12 +296,13 @@ const RepeatButton = () => {
    );
 };

-const ShuffleAllButton = () => {
+const ShuffleAllButton = ({ disabled }: { disabled?: boolean }) => {
    const { t } = useTranslation();
    const buttonSize = useSettingsStore((state) => state.general.buttonSize);

    return (
        <PlayerButton
+            disabled={disabled}
            icon={<Icon fill="default" icon="mediaRandom" size={buttonSize} />}
            onClick={() => openShuffleAllModal()}
            tooltip={{
@@ -8,6 +8,8 @@ import { shallow } from 'zustand/shallow';
 import styles from './left-controls.module.css';

 import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
+import { RadioMetadataDisplay } from '/@/renderer/features/player/components/radio-metadata-display';
+import { useIsRadioActive } from '/@/renderer/features/radio/hooks/use-radio-player';
 import { AppRoute } from '/@/renderer/router/routes';
 import {
    useAppStore,
@@ -41,13 +43,15 @@ export const LeftControls = () => {
        shallow,
    );

-    const hideImage = image && !collapsed;
    const currentSong = usePlayerSong();
-    const title = currentSong?.name;
-    const artists = currentSong?.artists;
+    const isRadioActive = useIsRadioActive();
    const { bindings } = useHotkeySettings();

-    const isSongDefined = Boolean(currentSong?.id);
+    const isRadioMode = isRadioActive;
+    const hideImage = (image && !collapsed) || isRadioMode;
+    const isSongDefined = Boolean(currentSong?.id) && !isRadioMode;
+    const title = currentSong?.name;
+    const artists = currentSong?.artists;

    const handleToggleFullScreenPlayer = (e?: KeyboardEvent | MouseEvent<HTMLDivElement>) => {
        // don't toggle if right click
@@ -118,7 +122,7 @@ export const LeftControls = () => {
                                            PlaybackSelectors.playerCoverArt,
                                        )}
                                        loading="eager"
-                                        src={currentSong?.imageUrl ?? ''}
+                                        src={isRadioMode ? '' : (currentSong?.imageUrl ?? '')}
                                    />
                                </Tooltip>
                                {!collapsed && (
@@ -148,101 +152,113 @@ export const LeftControls = () => {
                    )}
                </AnimatePresence>
                <motion.div className={styles.metadataStack} layout="position">
-                    <div className={styles.lineItem} onClick={stopPropagation}>
-                        <Group align="center" gap="xs" wrap="nowrap">
-                            <Text
-                                className={PlaybackSelectors.songTitle}
-                                component={Link}
-                                fw={500}
-                                isLink
-                                onContextMenu={handleToggleContextMenu} // Ajout du clic droit
-                                overflow="hidden"
-                                to={AppRoute.NOW_PLAYING}
-                            >
-                                {title || '—'}
-                            </Text>
-                            {isSongDefined && (
-                                <ActionIcon
-                                    icon="ellipsisVertical"
-                                    onClick={(e) => {
-                                        e.preventDefault();
-                                        e.stopPropagation();
-                                        if (currentSong) {
-                                            ContextMenuController.call({
-                                                cmd: {
-                                                    items: [currentSong],
-                                                    type: LibraryItem.SONG,
+                    {isRadioMode ? (
+                        <RadioMetadataDisplay
+                            onStopPropagation={stopPropagation}
+                            onToggleContextMenu={handleToggleContextMenu}
+                        />
+                    ) : (
+                        <>
+                            <div className={styles.lineItem} onClick={stopPropagation}>
+                                <Group align="center" gap="xs" wrap="nowrap">
+                                    <Text
+                                        className={PlaybackSelectors.songTitle}
+                                        component={Link}
+                                        fw={500}
+                                        isLink
+                                        onContextMenu={handleToggleContextMenu}
+                                        overflow="hidden"
+                                        to={AppRoute.NOW_PLAYING}
+                                    >
+                                        {title || '—'}
+                                    </Text>
+                                    {isSongDefined && (
+                                        <ActionIcon
+                                            icon="ellipsisVertical"
+                                            onClick={(e) => {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                                if (currentSong) {
+                                                    ContextMenuController.call({
+                                                        cmd: {
+                                                            items: [currentSong],
+                                                            type: LibraryItem.SONG,
+                                                        },
+                                                        event: e,
+                                                    });
+                                                }
+                                            }}
+                                            size="xs"
+                                            styles={{
+                                                root: {
+                                                    '--ai-size-xs': '1.15rem',
                                                },
-                                                event: e,
-                                            });
-                                        }
-                                    }}
-                                    size="xs"
-                                    styles={{
-                                        root: {
-                                            '--ai-size-xs': '1.15rem',
-                                        },
-                                    }}
-                                    variant="subtle"
-                                />
-                            )}
-                        </Group>
-                    </div>
-                    <div
-                        className={clsx(
-                            styles.lineItem,
-                            styles.secondary,
-                            PlaybackSelectors.songArtist,
-                        )}
-                        onClick={stopPropagation}
-                    >
-                        {artists?.map((artist, index) => (
-                            <React.Fragment key={`bar-${artist.id}`}>
-                                {index > 0 && <Separator />}
+                                            }}
+                                            variant="subtle"
+                                        />
+                                    )}
+                                </Group>
+                            </div>
+                            <div
+                                className={clsx(
+                                    styles.lineItem,
+                                    styles.secondary,
+                                    PlaybackSelectors.songArtist,
+                                )}
+                                onClick={stopPropagation}
+                            >
+                                {artists?.map((artist, index) => (
+                                    <React.Fragment key={`bar-${artist.id}`}>
+                                        {index > 0 && <Separator />}
+                                        <Text
+                                            component={artist.id ? Link : undefined}
+                                            fw={500}
+                                            isLink={artist.id !== ''}
+                                            overflow="hidden"
+                                            size="md"
+                                            to={
+                                                artist.id
+                                                    ? generatePath(
+                                                          AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
+                                                          {
+                                                              albumArtistId: artist.id,
+                                                          },
+                                                      )
+                                                    : undefined
+                                            }
+                                        >
+                                            {artist.name || '—'}
+                                        </Text>
+                                    </React.Fragment>
+                                ))}
+                            </div>
+                            <div
+                                className={clsx(
+                                    styles.lineItem,
+                                    styles.secondary,
+                                    PlaybackSelectors.songAlbum,
+                                )}
+                                onClick={stopPropagation}
+                            >
                                <Text
-                                    component={artist.id ? Link : undefined}
+                                    component={Link}
                                    fw={500}
-                                    isLink={artist.id !== ''}
+                                    isLink
                                    overflow="hidden"
                                    size="md"
                                    to={
-                                        artist.id
-                                            ? generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
-                                                  albumArtistId: artist.id,
+                                        currentSong?.albumId
+                                            ? generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
+                                                  albumId: currentSong.albumId,
                                              })
-                                            : undefined
+                                            : ''
                                    }
                                >
-                                    {artist.name || '—'}
+                                    {currentSong?.album || '—'}
                                </Text>
-                            </React.Fragment>
-                        ))}
-                    </div>
-                    <div
-                        className={clsx(
-                            styles.lineItem,
-                            styles.secondary,
-                            PlaybackSelectors.songAlbum,
-                        )}
-                        onClick={stopPropagation}
-                    >
-                        <Text
-                            component={Link}
-                            fw={500}
-                            isLink
-                            overflow="hidden"
-                            size="md"
-                            to={
-                                currentSong?.albumId
-                                    ? generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
-                                          albumId: currentSong.albumId,
-                                      })
-                                    : ''
-                            }
-                        >
-                            {currentSong?.album || '—'}
-                        </Text>
-                    </div>
+                            </div>
+                        </>
+                    )}
                </motion.div>
            </LayoutGroup>
        </div>
@@ -0,0 +1,75 @@
+import clsx from 'clsx';
+import React from 'react';
+import { Link } from 'react-router';
+
+import styles from './left-controls.module.css';
+
+import { useIsRadioActive, useRadioStore } from '/@/renderer/features/radio/hooks/use-radio-player';
+import { AppRoute } from '/@/renderer/router/routes';
+import { Group } from '/@/shared/components/group/group';
+import { Icon } from '/@/shared/components/icon/icon';
+import { Text } from '/@/shared/components/text/text';
+import { PlaybackSelectors } from '/@/shared/constants/playback-selectors';
+
+interface RadioMetadataDisplayProps {
+    onStopPropagation: (e?: React.MouseEvent) => void;
+    onToggleContextMenu: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+export const RadioMetadataDisplay = ({
+    onStopPropagation,
+    onToggleContextMenu,
+}: RadioMetadataDisplayProps) => {
+    const radioMetadata = useRadioStore((state) => state.metadata);
+    const stationName = useRadioStore((state) => state.stationName);
+
+    const isRadioActive = useIsRadioActive();
+
+    if (!isRadioActive) {
+        return null;
+    }
+
+    return (
+        <>
+            <div className={styles.lineItem} onClick={onStopPropagation}>
+                <Text
+                    className={PlaybackSelectors.songTitle}
+                    fw={500}
+                    isNoSelect
+                    onContextMenu={onToggleContextMenu}
+                    overflow="hidden"
+                >
+                    {radioMetadata?.title || '—'}
+                </Text>
+            </div>
+            <div
+                className={clsx(styles.lineItem, styles.secondary, PlaybackSelectors.songArtist)}
+                onClick={onStopPropagation}
+            >
+                <Text isMuted isNoSelect overflow="hidden" size="md">
+                    {radioMetadata?.artist || '—'}
+                </Text>
+            </div>
+            <div
+                className={clsx(styles.lineItem, styles.secondary, PlaybackSelectors.songAlbum)}
+                onClick={onStopPropagation}
+            >
+                <Group align="center" gap="xs" wrap="nowrap">
+                    <Icon color="muted" icon="radio" size="sm" />
+                    <Text
+                        component={Link}
+                        fw={500}
+                        isLink
+                        isMuted
+                        isNoSelect
+                        overflow="hidden"
+                        size="md"
+                        to={AppRoute.RADIO}
+                    >
+                        {stationName || '—'}
+                    </Text>
+                </Group>
+            </div>
+        </>
+    );
+};
@@ -0,0 +1,20 @@
+import { queryOptions } from '@tanstack/react-query';
+
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { QueryHookArgs } from '/@/renderer/lib/react-query';
+
+export const radioQueries = {
+    list: (args: QueryHookArgs<void>) => {
+        return queryOptions({
+            gcTime: 1000 * 60 * 60,
+            queryFn: ({ signal }) => {
+                return api.controller.getInternetRadioStations({
+                    apiClientProps: { serverId: args.serverId, signal },
+                });
+            },
+            queryKey: queryKeys.radio.list(args.serverId || ''),
+            ...args.options,
+        });
+    },
+};
@@ -0,0 +1,113 @@
+import { t } from 'i18next';
+import { MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useCreateRadioStation } from '/@/renderer/features/radio/mutations/create-radio-station-mutation';
+import { useCurrentServer } from '/@/renderer/store';
+import { Group } from '/@/shared/components/group/group';
+import { closeAllModals, openModal } from '/@/shared/components/modal/modal';
+import { ModalButton } from '/@/shared/components/modal/model-shared';
+import { Stack } from '/@/shared/components/stack/stack';
+import { TextInput } from '/@/shared/components/text-input/text-input';
+import { toast } from '/@/shared/components/toast/toast';
+import { useForm } from '/@/shared/hooks/use-form';
+import { CreateInternetRadioStationBody, ServerListItem } from '/@/shared/types/domain-types';
+
+interface CreateRadioStationFormProps {
+    onCancel: () => void;
+}
+
+export const CreateRadioStationForm = ({ onCancel }: CreateRadioStationFormProps) => {
+    const { t } = useTranslation();
+    const mutation = useCreateRadioStation({});
+    const server = useCurrentServer();
+
+    const form = useForm<CreateInternetRadioStationBody>({
+        initialValues: {
+            homepageUrl: '',
+            name: '',
+            streamUrl: '',
+        },
+    });
+
+    const handleSubmit = form.onSubmit((values) => {
+        if (!server) return;
+
+        mutation.mutate(
+            {
+                apiClientProps: { serverId: server.id },
+                body: values,
+            },
+            {
+                onError: (error) => {
+                    toast.error({
+                        message: (error as Error).message,
+                        title: t('error.genericError', {
+                            postProcess: 'sentenceCase',
+                        }) as string,
+                    });
+                },
+                onSuccess: () => {
+                    closeAllModals();
+                },
+            },
+        );
+    });
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <Stack gap="md">
+                <TextInput
+                    label={t('form.createRadioStation.input', {
+                        context: 'name',
+                        postProcess: 'titleCase',
+                    })}
+                    required
+                    {...form.getInputProps('name')}
+                />
+                <TextInput
+                    label={t('form.createRadioStation.input', {
+                        context: 'streamUrl',
+                        postProcess: 'titleCase',
+                    })}
+                    required
+                    {...form.getInputProps('streamUrl')}
+                />
+                <TextInput
+                    label={t('form.createRadioStation.input', {
+                        context: 'homepageUrl',
+                        postProcess: 'titleCase',
+                    })}
+                    {...form.getInputProps('homepageUrl')}
+                />
+                <Group justify="flex-end">
+                    <ModalButton onClick={onCancel} variant="subtle">
+                        {t('common.cancel', { postProcess: 'sentenceCase' })}
+                    </ModalButton>
+                    <ModalButton loading={mutation.isPending} type="submit" variant="filled">
+                        {t('common.create', { postProcess: 'sentenceCase' })}
+                    </ModalButton>
+                </Group>
+            </Stack>
+        </form>
+    );
+};
+
+export const openCreateRadioStationModal = (
+    server: null | ServerListItem,
+    e?: MouseEvent<HTMLButtonElement>,
+) => {
+    e?.stopPropagation();
+
+    if (!server) {
+        toast.error({
+            message: t('common.error.noServer', { postProcess: 'sentenceCase' }) as string,
+        });
+        return;
+    }
+
+    openModal({
+        children: <CreateRadioStationForm onCancel={closeAllModals} />,
+        title: t('action.createRadioStation', { postProcess: 'titleCase' }) as string,
+    });
+};
@@ -0,0 +1,126 @@
+import { t } from 'i18next';
+import { MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useUpdateRadioStation } from '/@/renderer/features/radio/mutations/update-radio-station-mutation';
+import { useCurrentServer } from '/@/renderer/store';
+import { logFn } from '/@/renderer/utils/logger';
+import { logMsg } from '/@/renderer/utils/logger-message';
+import { Group } from '/@/shared/components/group/group';
+import { closeAllModals, openModal } from '/@/shared/components/modal/modal';
+import { ModalButton } from '/@/shared/components/modal/model-shared';
+import { Stack } from '/@/shared/components/stack/stack';
+import { TextInput } from '/@/shared/components/text-input/text-input';
+import { toast } from '/@/shared/components/toast/toast';
+import { useForm } from '/@/shared/hooks/use-form';
+import {
+    InternetRadioStation,
+    ServerListItem,
+    UpdateInternetRadioStationBody,
+} from '/@/shared/types/domain-types';
+
+interface EditRadioStationFormProps {
+    onCancel: () => void;
+    station: InternetRadioStation;
+}
+
+export const EditRadioStationForm = ({ onCancel, station }: EditRadioStationFormProps) => {
+    const { t } = useTranslation();
+    const mutation = useUpdateRadioStation({});
+    const server = useCurrentServer();
+
+    const form = useForm<UpdateInternetRadioStationBody>({
+        initialValues: {
+            homepageUrl: station.homepageUrl || '',
+            name: station.name,
+            streamUrl: station.streamUrl,
+        },
+    });
+
+    const handleSubmit = form.onSubmit((values) => {
+        if (!server) return;
+
+        mutation.mutate(
+            {
+                apiClientProps: { serverId: server.id },
+                body: values,
+                query: { id: station.id },
+            },
+            {
+                onError: (error) => {
+                    logFn.error(logMsg.other.error, {
+                        meta: { error: error as Error },
+                    });
+
+                    toast.error({
+                        message: (error as Error).message,
+                        title: t('error.genericError', {
+                            postProcess: 'sentenceCase',
+                        }) as string,
+                    });
+                },
+                onSuccess: () => {
+                    closeAllModals();
+                },
+            },
+        );
+    });
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <Stack gap="md">
+                <TextInput
+                    label={t('form.createRadioStation.input', {
+                        context: 'name',
+                        postProcess: 'titleCase',
+                    })}
+                    required
+                    {...form.getInputProps('name')}
+                />
+                <TextInput
+                    label={t('form.createRadioStation.input', {
+                        context: 'streamUrl',
+                        postProcess: 'titleCase',
+                    })}
+                    required
+                    {...form.getInputProps('streamUrl')}
+                />
+                <TextInput
+                    label={t('form.createRadioStation.input', {
+                        context: 'homepageUrl',
+                        postProcess: 'titleCase',
+                    })}
+                    {...form.getInputProps('homepageUrl')}
+                />
+                <Group justify="flex-end">
+                    <ModalButton onClick={onCancel} variant="subtle">
+                        {t('common.cancel', { postProcess: 'sentenceCase' })}
+                    </ModalButton>
+                    <ModalButton loading={mutation.isPending} type="submit" variant="filled">
+                        {t('common.save', { postProcess: 'sentenceCase' })}
+                    </ModalButton>
+                </Group>
+            </Stack>
+        </form>
+    );
+};
+
+export const openEditRadioStationModal = (
+    station: InternetRadioStation,
+    server: null | ServerListItem,
+    e?: MouseEvent<HTMLButtonElement>,
+) => {
+    e?.stopPropagation();
+
+    if (!server) {
+        toast.error({
+            message: t('common.error.noServer', { postProcess: 'sentenceCase' }) as string,
+        });
+        return;
+    }
+
+    openModal({
+        children: <EditRadioStationForm onCancel={closeAllModals} station={station} />,
+        title: t('common.edit', { postProcess: 'titleCase' }) as string,
+    });
+};
@@ -0,0 +1,64 @@
+import { useQuery } from '@tanstack/react-query';
+import { Suspense, useEffect, useMemo } from 'react';
+
+import { useListContext } from '/@/renderer/context/list-context';
+import { radioQueries } from '/@/renderer/features/radio/api/radio-api';
+import { RadioListItems } from '/@/renderer/features/radio/components/radio-list-items';
+import { useSearchTermFilter } from '/@/renderer/features/shared/hooks/use-search-term-filter';
+import { useSortByFilter } from '/@/renderer/features/shared/hooks/use-sort-by-filter';
+import { useSortOrderFilter } from '/@/renderer/features/shared/hooks/use-sort-order-filter';
+import { searchLibraryItems } from '/@/renderer/features/shared/utils';
+import { useCurrentServer } from '/@/renderer/store';
+import { sortRadioList } from '/@/shared/api/utils';
+import { ScrollArea } from '/@/shared/components/scroll-area/scroll-area';
+import { Spinner } from '/@/shared/components/spinner/spinner';
+import { Stack } from '/@/shared/components/stack/stack';
+import { LibraryItem, RadioListSort, SortOrder } from '/@/shared/types/domain-types';
+import { ItemListKey } from '/@/shared/types/types';
+
+export const RadioListContent = () => {
+    const server = useCurrentServer();
+    const { setItemCount } = useListContext();
+    const { searchTerm } = useSearchTermFilter();
+    const { sortBy } = useSortByFilter<RadioListSort>(RadioListSort.NAME, ItemListKey.RADIO);
+    const { sortOrder } = useSortOrderFilter(SortOrder.ASC, ItemListKey.RADIO);
+
+    const radioListQuery = useQuery({
+        ...radioQueries.list({
+            query: undefined,
+            serverId: server?.id || '',
+        }),
+    });
+
+    const filteredAndSortedRadioStations = useMemo(() => {
+        let stations = radioListQuery.data || [];
+
+        if (searchTerm) {
+            stations = searchLibraryItems(stations, searchTerm, LibraryItem.RADIO_STATION);
+        }
+
+        if (sortBy && sortOrder) {
+            stations = sortRadioList(stations, sortBy, sortOrder);
+        }
+
+        return stations;
+    }, [radioListQuery.data, searchTerm, sortBy, sortOrder]);
+
+    useEffect(() => {
+        setItemCount?.(filteredAndSortedRadioStations.length || 0);
+    }, [filteredAndSortedRadioStations.length, setItemCount]);
+
+    if (radioListQuery.isLoading) {
+        return <Spinner container />;
+    }
+
+    return (
+        <Suspense fallback={<Spinner container />}>
+            <ScrollArea>
+                <Stack p="md">
+                    <RadioListItems data={filteredAndSortedRadioStations} />
+                </Stack>
+            </ScrollArea>
+        </Suspense>
+    );
+};
@@ -0,0 +1,47 @@
+import { MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { openCreateRadioStationModal } from '/@/renderer/features/radio/components/create-radio-station-form';
+import { ListSortByDropdown } from '/@/renderer/features/shared/components/list-sort-by-dropdown';
+import { ListSortOrderToggleButton } from '/@/renderer/features/shared/components/list-sort-order-toggle-button';
+import { useCurrentServer, usePermissions } from '/@/renderer/store';
+import { Button } from '/@/shared/components/button/button';
+import { Divider } from '/@/shared/components/divider/divider';
+import { Flex } from '/@/shared/components/flex/flex';
+import { Group } from '/@/shared/components/group/group';
+import { LibraryItem, RadioListSort, SortOrder } from '/@/shared/types/domain-types';
+import { ItemListKey } from '/@/shared/types/types';
+
+export const RadioListHeaderFilters = () => {
+    const { t } = useTranslation();
+    const server = useCurrentServer();
+    const permissions = usePermissions();
+
+    const handleCreateRadioStationModal = (e: MouseEvent<HTMLButtonElement>) => {
+        openCreateRadioStationModal(server, e);
+    };
+
+    return (
+        <Flex justify="space-between">
+            <Group gap="sm" w="100%">
+                <ListSortByDropdown
+                    defaultSortByValue={RadioListSort.NAME}
+                    itemType={LibraryItem.RADIO_STATION}
+                    listKey={ItemListKey.RADIO}
+                />
+                <Divider orientation="vertical" />
+                <ListSortOrderToggleButton
+                    defaultSortOrder={SortOrder.ASC}
+                    listKey={ItemListKey.RADIO}
+                />
+            </Group>
+            {permissions.radio.create && (
+                <Group gap="sm" wrap="nowrap">
+                    <Button onClick={handleCreateRadioStationModal} variant="subtle">
+                        {t('action.createRadioStation', { postProcess: 'sentenceCase' })}
+                    </Button>
+                </Group>
+            )}
+        </Flex>
+    );
+};
@@ -0,0 +1,40 @@
+import { useTranslation } from 'react-i18next';
+
+import { PageHeader } from '/@/renderer/components/page-header/page-header';
+import { useListContext } from '/@/renderer/context/list-context';
+import { RadioListHeaderFilters } from '/@/renderer/features/radio/components/radio-list-header-filters';
+import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
+import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
+import { ListSearchInput } from '/@/renderer/features/shared/components/list-search-input';
+import { Group } from '/@/shared/components/group/group';
+import { Stack } from '/@/shared/components/stack/stack';
+
+interface RadioListHeaderProps {
+    title?: string;
+}
+
+export const RadioListHeader = ({ title }: RadioListHeaderProps) => {
+    const { t } = useTranslation();
+
+    const { itemCount } = useListContext();
+    const pageTitle = title || t('page.radioList.title', { postProcess: 'titleCase' });
+
+    return (
+        <Stack gap={0}>
+            <PageHeader>
+                <LibraryHeaderBar ignoreMaxWidth>
+                    <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
+                    <LibraryHeaderBar.Badge isLoading={itemCount === undefined}>
+                        {itemCount}
+                    </LibraryHeaderBar.Badge>
+                </LibraryHeaderBar>
+                <Group>
+                    <ListSearchInput />
+                </Group>
+            </PageHeader>
+            <FilterBar>
+                <RadioListHeaderFilters />
+            </FilterBar>
+        </Stack>
+    );
+};
@@ -0,0 +1,30 @@
+.radio-item {
+    cursor: pointer;
+    border-left: 3px solid transparent;
+    transition: background-color 0.15s ease;
+}
+
+.radio-item:hover {
+    @mixin dark {
+        background-color: lighten(var(--theme-colors-surface), 1%);
+    }
+
+    @mixin light {
+        background-color: darken(var(--theme-colors-surface), 1%);
+    }
+}
+
+.radio-item-active {
+    border-left: 3px solid var(--theme-colors-primary);
+}
+
+.radio-item-button {
+    all: unset;
+    flex: 1;
+    width: 100%;
+}
+
+.radio-item-link {
+    color: inherit;
+    text-decoration: underline;
+}
@@ -0,0 +1,168 @@
+import clsx from 'clsx';
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import styles from './radio-list-items.module.css';
+
+import { openEditRadioStationModal } from '/@/renderer/features/radio/components/edit-radio-station-form';
+import {
+    useRadioControls,
+    useRadioPlayer,
+} from '/@/renderer/features/radio/hooks/use-radio-player';
+import { useDeleteRadioStation } from '/@/renderer/features/radio/mutations/delete-radio-station-mutation';
+import { useCurrentServer, usePermissions } from '/@/renderer/store';
+import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { Flex } from '/@/shared/components/flex/flex';
+import { Group } from '/@/shared/components/group/group';
+import { Icon } from '/@/shared/components/icon/icon';
+import { closeAllModals, ConfirmModal, openModal } from '/@/shared/components/modal/modal';
+import { Paper } from '/@/shared/components/paper/paper';
+import { Stack } from '/@/shared/components/stack/stack';
+import { Text } from '/@/shared/components/text/text';
+import { toast } from '/@/shared/components/toast/toast';
+import { InternetRadioStation } from '/@/shared/types/domain-types';
+
+interface RadioListItemProps {
+    station: InternetRadioStation;
+}
+
+interface RadioListItemsProps {
+    data: InternetRadioStation[];
+}
+
+const RadioListItem = ({ station }: RadioListItemProps) => {
+    const { t } = useTranslation();
+    const { currentStreamUrl, isPlaying } = useRadioPlayer();
+    const { play, stop } = useRadioControls();
+    const server = useCurrentServer();
+    const permissions = usePermissions();
+    const deleteRadioStationMutation = useDeleteRadioStation({});
+
+    const isCurrentStation = currentStreamUrl === station.streamUrl;
+    const stationIsPlaying = isCurrentStation && isPlaying;
+
+    const handleClick = () => {
+        if (stationIsPlaying) {
+            stop();
+        } else {
+            play(station.streamUrl, station.name);
+        }
+    };
+
+    const handleEditClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation();
+        openEditRadioStationModal(station, server, e);
+    };
+
+    const handleDeleteClick = useCallback(
+        async (e: React.MouseEvent<HTMLButtonElement>) => {
+            e.stopPropagation();
+
+            if (!server) return;
+
+            openModal({
+                children: (
+                    <ConfirmModal
+                        labels={{
+                            cancel: t('common.cancel', { postProcess: 'sentenceCase' }),
+                            confirm: t('common.delete', { postProcess: 'sentenceCase' }),
+                        }}
+                        loading={deleteRadioStationMutation.isPending}
+                        onConfirm={async () => {
+                            try {
+                                await deleteRadioStationMutation.mutateAsync({
+                                    apiClientProps: { serverId: server.id },
+                                    query: { id: station.id },
+                                });
+
+                                // Stop playback if this station is currently playing
+                                if (isCurrentStation) {
+                                    stop();
+                                }
+                            } catch (err: any) {
+                                toast.error({
+                                    message: err.message,
+                                    title: t('error.genericError', {
+                                        postProcess: 'sentenceCase',
+                                    }),
+                                });
+                            }
+
+                            closeAllModals();
+                        }}
+                    >
+                        <Text>{t('common.areYouSure', { postProcess: 'sentenceCase' })}</Text>
+                    </ConfirmModal>
+                ),
+                title: t('common.delete', { postProcess: 'titleCase' }),
+            });
+        },
+        [deleteRadioStationMutation, isCurrentStation, server, station.id, stop, t],
+    );
+
+    return (
+        <Paper
+            className={clsx(styles['radio-item'], {
+                [styles['radio-item-active']]: isCurrentStation,
+            })}
+            p="md"
+        >
+            <Flex align="flex-start" gap="md" justify="space-between">
+                <button className={styles['radio-item-button']} onClick={handleClick} role="button">
+                    <Stack gap="xs">
+                        <Group gap="xs">
+                            <Icon color="muted" icon="radio" size="md" />
+                            <Text fw={500} size="md">
+                                {station.name}
+                            </Text>
+                        </Group>
+                        <Text isMuted size="sm">
+                            {station.streamUrl}
+                        </Text>
+                        {station.homepageUrl && (
+                            <Text isMuted size="sm">
+                                {station.homepageUrl}
+                            </Text>
+                        )}
+                    </Stack>
+                </button>
+                {(permissions.radio.edit || permissions.radio.delete) && (
+                    <Group gap="xs">
+                        {permissions.radio.edit && (
+                            <ActionIcon
+                                icon="edit"
+                                onClick={handleEditClick}
+                                size="sm"
+                                tooltip={{
+                                    label: t('common.edit', { postProcess: 'sentenceCase' }),
+                                }}
+                                variant="subtle"
+                            />
+                        )}
+                        {permissions.radio.delete && (
+                            <ActionIcon
+                                icon="delete"
+                                iconProps={{ color: 'error' }}
+                                onClick={handleDeleteClick}
+                                size="sm"
+                                tooltip={{
+                                    label: t('common.delete', { postProcess: 'sentenceCase' }),
+                                }}
+                                variant="subtle"
+                            />
+                        )}
+                    </Group>
+                )}
+            </Flex>
+        </Paper>
+    );
+};
+
+export const RadioListItems = ({ data }: RadioListItemsProps) => {
+    const items = useMemo(
+        () => data.map((station) => <RadioListItem key={station.id} station={station} />),
+        [data],
+    );
+
+    return <Stack gap="sm">{items}</Stack>;
+};
@@ -0,0 +1,376 @@
+import IcecastMetadataStats from 'icecast-metadata-stats';
+import isElectron from 'is-electron';
+import { useEffect, useRef } from 'react';
+import { createWithEqualityFn } from 'zustand/traditional';
+
+import { usePlayerEvents } from '/@/renderer/features/player/audio-player/hooks/use-player-events';
+import { convertToLogVolume } from '/@/renderer/features/player/audio-player/utils/player-utils';
+import {
+    usePlaybackType,
+    usePlayerMuted,
+    usePlayerStoreBase,
+    usePlayerVolume,
+} from '/@/renderer/store';
+import { toast } from '/@/shared/components/toast/toast';
+import { PlayerStatus, PlayerType } from '/@/shared/types/types';
+
+export interface RadioMetadata {
+    artist: null | string;
+    title: null | string;
+}
+
+interface RadioStore {
+    actions: {
+        pause: () => void;
+        play: (streamUrl?: string, stationName?: string) => void;
+        setCurrentStreamUrl: (currentStreamUrl: null | string) => void;
+        setIsPlaying: (isPlaying: boolean) => void;
+        setMetadata: (metadata: null | RadioMetadata) => void;
+        setStationName: (stationName: null | string) => void;
+        stop: () => void;
+    };
+    currentStreamUrl: null | string;
+    isPlaying: boolean;
+    metadata: null | RadioMetadata;
+    stationName: null | string;
+}
+
+export const useRadioStore = createWithEqualityFn<RadioStore>((set) => ({
+    actions: {
+        pause: () => {
+            set({ isPlaying: false });
+            usePlayerStoreBase.getState().mediaPause();
+        },
+        play: (streamUrl?: string, stationName?: string) => {
+            set((state) => {
+                const newStreamUrl = streamUrl ?? state.currentStreamUrl;
+                const newStationName = stationName ?? state.stationName;
+
+                if (!newStreamUrl) {
+                    return state;
+                }
+
+                // Reset metadata when switching stations (streamUrl changes)
+                const isSwitchingStation = newStreamUrl !== state.currentStreamUrl;
+
+                usePlayerStoreBase.getState().mediaPlay();
+
+                return {
+                    currentStreamUrl: newStreamUrl,
+                    isPlaying: true,
+                    metadata: isSwitchingStation ? null : state.metadata,
+                    stationName: newStationName,
+                };
+            });
+        },
+        setCurrentStreamUrl: (currentStreamUrl) => set({ currentStreamUrl }),
+        setIsPlaying: (isPlaying) => set({ isPlaying }),
+        setMetadata: (metadata) => set({ metadata }),
+        setStationName: (stationName) => set({ stationName }),
+        stop: () => {
+            set({
+                currentStreamUrl: null,
+                isPlaying: false,
+                metadata: null,
+                stationName: null,
+            });
+            usePlayerStoreBase.getState().mediaStop();
+        },
+    },
+    currentStreamUrl: null,
+    isPlaying: false,
+    metadata: null,
+    stationName: null,
+}));
+
+export const useIsPlayingRadio = () => useRadioStore((state) => state.isPlaying);
+
+export const useIsRadioActive = () => useRadioStore((state) => Boolean(state.currentStreamUrl));
+
+export const useRadioPlayer = () => {
+    const currentStreamUrl = useRadioStore((state) => state.currentStreamUrl);
+    const isPlaying = useRadioStore((state) => state.isPlaying);
+    const metadata = useRadioStore((state) => state.metadata);
+    const stationName = useRadioStore((state) => state.stationName);
+
+    return {
+        currentStreamUrl,
+        isPlaying,
+        metadata,
+        stationName,
+    };
+};
+
+export const useRadioControls = () => {
+    const { pause, play, stop } = useRadioStore((state) => state.actions);
+
+    return {
+        pause,
+        play,
+        stop,
+    };
+};
+
+const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
+const mpvPlayerListener = isElectron() ? window.api.mpvPlayerListener : null;
+const ipc = isElectron() ? window.api.ipc : null;
+
+export const useRadioAudioInstance = () => {
+    const { actions } = useRadioStore();
+    const { setCurrentStreamUrl, setIsPlaying, setStationName } = actions;
+    const currentStreamUrl = useRadioStore((state) => state.currentStreamUrl);
+    const isPlaying = useRadioStore((state) => state.isPlaying);
+    const playbackType = usePlaybackType();
+    const volume = usePlayerVolume();
+    const isMuted = usePlayerMuted();
+    const audioRef = useRef<HTMLAudioElement | null>(null);
+    const isUsingMpv = playbackType === PlayerType.LOCAL && mpvPlayer;
+
+    // Handle mpv playback
+    useEffect(() => {
+        if (!isUsingMpv || !mpvPlayer) {
+            return;
+        }
+
+        if (currentStreamUrl) {
+            mpvPlayer.setQueue(currentStreamUrl, undefined, !isPlaying);
+        } else {
+            mpvPlayer.setQueue(undefined, undefined, true);
+        }
+    }, [
+        currentStreamUrl,
+        isPlaying,
+        isUsingMpv,
+        setIsPlaying,
+        setCurrentStreamUrl,
+        setStationName,
+    ]);
+
+    useEffect(() => {
+        if (!isUsingMpv || !mpvPlayerListener || !ipc) {
+            return;
+        }
+
+        const handleMpvPlay = () => {
+            setIsPlaying(true);
+        };
+
+        const handleMpvPause = () => {
+            setIsPlaying(false);
+        };
+
+        const handleMpvStop = () => {
+            setIsPlaying(false);
+            setCurrentStreamUrl(null);
+            setStationName(null);
+        };
+
+        mpvPlayerListener.rendererPlay(handleMpvPlay);
+        mpvPlayerListener.rendererPause(handleMpvPause);
+        mpvPlayerListener.rendererStop(handleMpvStop);
+
+        return () => {
+            ipc.removeAllListeners('renderer-player-play');
+            ipc.removeAllListeners('renderer-player-pause');
+            ipc.removeAllListeners('renderer-player-stop');
+        };
+    }, [isUsingMpv, setIsPlaying, setCurrentStreamUrl, setStationName]);
+
+    // Handle web playback
+    useEffect(() => {
+        if (isUsingMpv) {
+            if (audioRef.current) {
+                audioRef.current.pause();
+                audioRef.current.src = '';
+                audioRef.current = null;
+            }
+            return;
+        }
+
+        if (currentStreamUrl && isPlaying) {
+            if (audioRef.current) {
+                audioRef.current.pause();
+                audioRef.current.src = '';
+            }
+
+            const audio = new Audio(currentStreamUrl);
+            audioRef.current = audio;
+
+            const linearVolume = volume / 100;
+            const logVolume = convertToLogVolume(linearVolume);
+            audio.volume = logVolume;
+            audio.muted = isMuted;
+
+            audio.addEventListener('play', () => {
+                setIsPlaying(true);
+            });
+
+            audio.addEventListener('pause', () => {
+                setIsPlaying(false);
+            });
+
+            audio.addEventListener('ended', () => {
+                setIsPlaying(false);
+                setCurrentStreamUrl(null);
+                setStationName(null);
+            });
+
+            audio.addEventListener('error', (error) => {
+                console.error('Radio stream error:', error);
+            });
+
+            // Attempt to play
+            audio.play().catch((error) => {
+                console.error('Failed to play audio:', error);
+                setIsPlaying(false);
+                setCurrentStreamUrl(null);
+                setStationName(null);
+                toast.error({ message: 'Failed to play radio stream' });
+            });
+        } else if (!currentStreamUrl || !isPlaying) {
+            if (audioRef.current) {
+                audioRef.current.pause();
+                audioRef.current.src = '';
+                audioRef.current = null;
+            }
+        }
+
+        return () => {
+            if (audioRef.current) {
+                audioRef.current.pause();
+                audioRef.current.src = '';
+                audioRef.current = null;
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        currentStreamUrl,
+        isPlaying,
+        isUsingMpv,
+        setIsPlaying,
+        setCurrentStreamUrl,
+        setStationName,
+    ]);
+
+    useEffect(() => {
+        if (isUsingMpv || !audioRef.current) {
+            return;
+        }
+
+        const linearVolume = volume / 100;
+        const logVolume = convertToLogVolume(linearVolume);
+        audioRef.current.volume = logVolume;
+        audioRef.current.muted = isMuted;
+    }, [volume, isMuted, isUsingMpv]);
+
+    usePlayerEvents(
+        {
+            onPlayerStatus: (properties, prev) => {
+                const radioState = useRadioStore.getState();
+                if (!radioState.currentStreamUrl) {
+                    return;
+                }
+
+                const { status } = properties;
+                const { status: prevStatus } = prev;
+
+                if (status === prevStatus) {
+                    return;
+                }
+
+                if (status === PlayerStatus.PLAYING && prevStatus === PlayerStatus.PAUSED) {
+                    actions.play();
+                } else if (status === PlayerStatus.PAUSED && prevStatus === PlayerStatus.PLAYING) {
+                    actions.pause();
+                }
+            },
+        },
+        [actions],
+    );
+};
+
+export const useRadioMetadata = () => {
+    const { actions, currentStreamUrl } = useRadioStore();
+    const { setMetadata } = actions;
+    const playbackType = usePlaybackType();
+    const isUsingMpv = playbackType === PlayerType.LOCAL && mpvPlayer;
+
+    useEffect(() => {
+        if (!currentStreamUrl) {
+            setMetadata(null);
+            return;
+        }
+
+        // If using mpv, fetch metadata from mpv periodically
+        if (isUsingMpv && mpvPlayer) {
+            let intervalId: NodeJS.Timeout | null = null;
+
+            const fetchMpvMetadata = async () => {
+                try {
+                    const metadata = await mpvPlayer.getStreamMetadata();
+                    setMetadata(metadata);
+                } catch {
+                    // Ignore error
+                }
+            };
+
+            intervalId = setInterval(fetchMpvMetadata, 5000);
+
+            return () => {
+                if (intervalId) {
+                    clearInterval(intervalId);
+                }
+                setMetadata(null);
+            };
+        }
+
+        // Otherwise, use IcecastMetadataStats for web player
+        let statsListener: IcecastMetadataStats | null = null;
+
+        try {
+            statsListener = new IcecastMetadataStats(currentStreamUrl, {
+                interval: 12,
+                onStats: (stats) => {
+                    // Parse ICY metadata - typically in format "Artist - Title" or just "Title"
+                    let streamTitle: null | string = null;
+
+                    if (stats.StreamTitle) {
+                        streamTitle = stats.StreamTitle;
+                    } else if (stats.icy?.StreamTitle) {
+                        streamTitle = stats.icy.StreamTitle;
+                    }
+
+                    // Parse the combined format into title and artist
+                    let artist: null | string = null;
+                    let title: null | string = null;
+
+                    if (streamTitle) {
+                        // Try to parse "Artist - Title" format
+                        const match = streamTitle.match(/^(.*?)\s*[-–—]\s*(.+)$/);
+                        if (match) {
+                            artist = match[1].trim() || null;
+                            title = match[2].trim() || null;
+                        } else {
+                            // If no separator found, treat the whole thing as title
+                            title = streamTitle;
+                        }
+                    }
+
+                    setMetadata(title || artist ? { artist, title } : null);
+                },
+                sources: ['icy'],
+            });
+
+            statsListener.start();
+        } catch {
+            setMetadata(null);
+        }
+
+        return () => {
+            if (statsListener) {
+                statsListener.stop();
+            }
+            setMetadata(null);
+        };
+    }, [currentStreamUrl, setMetadata, isUsingMpv]);
+};
@@ -0,0 +1,36 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { MutationHookArgs } from '/@/renderer/lib/react-query';
+import {
+    CreateInternetRadioStationArgs,
+    CreateInternetRadioStationResponse,
+} from '/@/shared/types/domain-types';
+
+export const useCreateRadioStation = (args: MutationHookArgs) => {
+    const { options } = args || {};
+    const queryClient = useQueryClient();
+
+    return useMutation<
+        CreateInternetRadioStationResponse,
+        AxiosError,
+        CreateInternetRadioStationArgs,
+        null
+    >({
+        mutationFn: (args) => {
+            return api.controller.createInternetRadioStation({
+                ...args,
+                apiClientProps: { serverId: args.apiClientProps.serverId },
+            });
+        },
+        onSuccess: (_args, variables) => {
+            queryClient.invalidateQueries({
+                exact: false,
+                queryKey: queryKeys.radio.list(variables.apiClientProps.serverId),
+            });
+        },
+        ...options,
+    });
+};
@@ -0,0 +1,36 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { MutationHookArgs } from '/@/renderer/lib/react-query';
+import {
+    DeleteInternetRadioStationArgs,
+    DeleteInternetRadioStationResponse,
+} from '/@/shared/types/domain-types';
+
+export const useDeleteRadioStation = (args: MutationHookArgs) => {
+    const { options } = args || {};
+    const queryClient = useQueryClient();
+
+    return useMutation<
+        DeleteInternetRadioStationResponse,
+        AxiosError,
+        DeleteInternetRadioStationArgs,
+        null
+    >({
+        mutationFn: (args) => {
+            return api.controller.deleteInternetRadioStation({
+                ...args,
+                apiClientProps: { serverId: args.apiClientProps.serverId },
+            });
+        },
+        onSuccess: (_args, variables) => {
+            queryClient.invalidateQueries({
+                exact: false,
+                queryKey: queryKeys.radio.list(variables.apiClientProps.serverId),
+            });
+        },
+        ...options,
+    });
+};
@@ -0,0 +1,36 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { MutationHookArgs } from '/@/renderer/lib/react-query';
+import {
+    UpdateInternetRadioStationArgs,
+    UpdateInternetRadioStationResponse,
+} from '/@/shared/types/domain-types';
+
+export const useUpdateRadioStation = (args: MutationHookArgs) => {
+    const { options } = args || {};
+    const queryClient = useQueryClient();
+
+    return useMutation<
+        UpdateInternetRadioStationResponse,
+        AxiosError,
+        UpdateInternetRadioStationArgs,
+        null
+    >({
+        mutationFn: (args) => {
+            return api.controller.updateInternetRadioStation({
+                ...args,
+                apiClientProps: { serverId: args.apiClientProps.serverId },
+            });
+        },
+        onSuccess: (_args, variables) => {
+            queryClient.invalidateQueries({
+                exact: false,
+                queryKey: queryKeys.radio.list(variables.apiClientProps.serverId),
+            });
+        },
+        ...options,
+    });
+};
@@ -0,0 +1,42 @@
+import { useMemo, useState } from 'react';
+
+import { ListContext } from '/@/renderer/context/list-context';
+import { RadioListContent } from '/@/renderer/features/radio/components/radio-list-content';
+import { RadioListHeader } from '/@/renderer/features/radio/components/radio-list-header';
+import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
+import { ItemListKey } from '/@/shared/types/types';
+
+const RadioListRoute = () => {
+    const pageKey = ItemListKey.RADIO;
+
+    const [itemCount, setItemCount] = useState<number | undefined>(undefined);
+
+    const providerValue = useMemo(() => {
+        return {
+            id: undefined,
+            itemCount,
+            pageKey,
+            setItemCount,
+        };
+    }, [itemCount, pageKey, setItemCount]);
+
+    return (
+        <AnimatedPage>
+            <ListContext.Provider value={providerValue}>
+                <RadioListHeader />
+                <RadioListContent />
+            </ListContext.Provider>
+        </AnimatedPage>
+    );
+};
+
+const RadioListRouteWithBoundary = () => {
+    return (
+        <PageErrorBoundary>
+            <RadioListRoute />
+        </PageErrorBoundary>
+    );
+};
+
+export default RadioListRouteWithBoundary;
@@ -0,0 +1,115 @@
+import merge from 'lodash/merge';
+import { nanoid } from 'nanoid/non-secure';
+import { devtools, persist } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+import { createWithEqualityFn } from 'zustand/traditional';
+
+import { InternetRadioStation } from '/@/shared/types/domain-types';
+
+export interface RadioStoreSlice extends RadioStoreState {
+    actions: {
+        createStation: (
+            serverId: string,
+            station: Omit<InternetRadioStation, 'id'>,
+        ) => InternetRadioStation;
+        deleteStation: (serverId: string, stationId: string) => void;
+        getStation: (serverId: string, stationId: string) => InternetRadioStation | null;
+        getStations: (serverId: string) => InternetRadioStation[];
+        updateStation: (
+            serverId: string,
+            stationId: string,
+            updates: Partial<InternetRadioStation>,
+        ) => void;
+    };
+}
+
+export interface RadioStoreState {
+    stations: Record<string, Record<string, InternetRadioStation>>;
+}
+
+const initialState: RadioStoreState = {
+    stations: {},
+};
+
+export const useRadioStore = createWithEqualityFn<RadioStoreSlice>()(
+    persist(
+        devtools(
+            immer((set, get) => ({
+                ...initialState,
+                actions: {
+                    createStation: (serverId, station) => {
+                        const id = nanoid();
+                        const newStation: InternetRadioStation = {
+                            ...station,
+                            id,
+                        };
+
+                        set((state) => {
+                            if (!state.stations[serverId]) {
+                                state.stations[serverId] = {};
+                            }
+                            state.stations[serverId][id] = newStation;
+                        });
+
+                        return newStation;
+                    },
+                    deleteStation: (serverId, stationId) => {
+                        set((state) => {
+                            if (state.stations[serverId]) {
+                                delete state.stations[serverId][stationId];
+                                // Clean up empty server entries
+                                if (Object.keys(state.stations[serverId]).length === 0) {
+                                    delete state.stations[serverId];
+                                }
+                            }
+                        });
+                    },
+                    getStation: (serverId, stationId) => {
+                        const state = get();
+                        return state.stations[serverId]?.[stationId] || null;
+                    },
+                    getStations: (serverId) => {
+                        const state = get();
+                        const serverStations = state.stations[serverId];
+                        if (!serverStations) {
+                            return [];
+                        }
+                        return Object.values(serverStations);
+                    },
+                    updateStation: (serverId, stationId, updates) => {
+                        set((state) => {
+                            if (state.stations[serverId]?.[stationId]) {
+                                state.stations[serverId][stationId] = {
+                                    ...state.stations[serverId][stationId],
+                                    ...updates,
+                                };
+                            }
+                        });
+                    },
+                },
+            })),
+            { name: 'store_radio' },
+        ),
+        {
+            merge: (persistedState, currentState) => merge(currentState, persistedState),
+            name: 'store_radio',
+            version: 1,
+        },
+    ),
+);
+
+export const useRadioStoreActions = () => useRadioStore((state) => state.actions);
+
+export const useRadioStations = (serverId: string) => {
+    return useRadioStore((state) => {
+        const serverStations = state.stations[serverId];
+        if (!serverStations) {
+            return [];
+        }
+        return Object.values(serverStations);
+    });
+};
+
+export const useRadioStation = (serverId: string, stationId: string) => {
+    return useRadioStore((state) => state.stations[serverId]?.[stationId] || null);
+};
@@ -17,6 +17,7 @@ const SIDEBAR_ITEMS: Array<[string, string]> = [
    ['Home', 'page.sidebar.home'],
    ['Now Playing', 'page.sidebar.nowPlaying'],
    ['Playlists', 'page.sidebar.playlists'],
+    ['Radio', 'page.sidebar.radio'],
    ['Search', 'page.sidebar.search'],
    ['Settings', 'page.sidebar.settings'],
    ['Tracks', 'page.sidebar.tracks'],
@@ -12,6 +12,7 @@ import {
    GenreListSort,
    LibraryItem,
    PlaylistListSort,
+    RadioListSort,
    ServerType,
    SongListSort,
    SortOrder,
@@ -802,6 +803,47 @@ const PLAYLIST_LIST_FILTERS: Partial<
    ],
 };

+const RADIO_LIST_FILTERS: Partial<
+    Record<ServerType, Array<{ defaultOrder: SortOrder; name: string; value: string }>>
+> = {
+    [ServerType.JELLYFIN]: [
+        {
+            defaultOrder: SortOrder.ASC,
+            name: i18n.t('filter.id', { postProcess: 'titleCase' }),
+            value: RadioListSort.ID,
+        },
+        {
+            defaultOrder: SortOrder.ASC,
+            name: i18n.t('filter.name', { postProcess: 'titleCase' }),
+            value: RadioListSort.NAME,
+        },
+    ],
+    [ServerType.NAVIDROME]: [
+        {
+            defaultOrder: SortOrder.ASC,
+            name: i18n.t('filter.id', { postProcess: 'titleCase' }),
+            value: RadioListSort.ID,
+        },
+        {
+            defaultOrder: SortOrder.ASC,
+            name: i18n.t('filter.name', { postProcess: 'titleCase' }),
+            value: RadioListSort.NAME,
+        },
+    ],
+    [ServerType.SUBSONIC]: [
+        {
+            defaultOrder: SortOrder.ASC,
+            name: i18n.t('filter.id', { postProcess: 'titleCase' }),
+            value: RadioListSort.ID,
+        },
+        {
+            defaultOrder: SortOrder.ASC,
+            name: i18n.t('filter.name', { postProcess: 'titleCase' }),
+            value: RadioListSort.NAME,
+        },
+    ],
+};
+
 const FILTERS: Partial<Record<LibraryItem, any>> = {
    [LibraryItem.ALBUM]: ALBUM_LIST_FILTERS,
    [LibraryItem.ALBUM_ARTIST]: ALBUM_ARTIST_LIST_FILTERS,
@@ -810,5 +852,6 @@ const FILTERS: Partial<Record<LibraryItem, any>> = {
    [LibraryItem.GENRE]: GENRE_LIST_FILTERS,
    [LibraryItem.PLAYLIST]: PLAYLIST_LIST_FILTERS,
    [LibraryItem.PLAYLIST_SONG]: PLAYLIST_SONG_LIST_FILTERS,
+    [LibraryItem.RADIO_STATION]: RADIO_LIST_FILTERS,
    [LibraryItem.SONG]: SONG_LIST_FILTERS,
 };
@@ -7,6 +7,7 @@ import {
    AlbumArtist,
    Artist,
    Genre,
+    InternetRadioStation,
    LibraryItem,
    Playlist,
    QueueSong,
@@ -97,7 +98,15 @@ interface CreateFuseOptions {
    threshold?: number;
 }

-type FuseSearchableItem = Album | AlbumArtist | Artist | Genre | Playlist | QueueSong | Song;
+type FuseSearchableItem =
+    | Album
+    | AlbumArtist
+    | Artist
+    | Genre
+    | InternetRadioStation
+    | Playlist
+    | QueueSong
+    | Song;

 export const createFuseForLibraryItem = <T extends FuseSearchableItem>(
    items: T[],
@@ -171,6 +180,7 @@ export const createFuseForLibraryItem = <T extends FuseSearchableItem>(

        case LibraryItem.ARTIST:
        case LibraryItem.GENRE:
+        case LibraryItem.RADIO_STATION:
            break;

        case LibraryItem.PLAYLIST: {
@@ -38,6 +38,7 @@ export const CollapsedSidebar = () => {
            Home: t('page.sidebar.home', { postProcess: 'titleCase' }),
            'Now Playing': t('page.sidebar.nowPlaying', { postProcess: 'titleCase' }),
            Playlists: t('page.sidebar.playlists', { postProcess: 'titleCase' }),
+            Radio: t('page.sidebar.radio', { postProcess: 'titleCase' }),
            Search: t('page.sidebar.search', { postProcess: 'titleCase' }),
            Settings: t('page.sidebar.settings', { postProcess: 'titleCase' }),
            Tracks: t('page.sidebar.tracks', { postProcess: 'titleCase' }),
@@ -15,6 +15,8 @@ import {
    RiPlayLine,
    RiPlayListFill,
    RiPlayListLine,
+    RiRadioFill,
+    RiRadioLine,
    RiSearchFill,
    RiSearchLine,
    RiSettings2Fill,
@@ -64,6 +66,9 @@ export const SidebarIcon = ({ active, route, size }: SidebarIconProps) => {
        case AppRoute.PLAYLISTS:
            if (isActive) return <RiPlayListFill size={size} />;
            return <RiPlayListLine size={size} />;
+        case AppRoute.RADIO:
+            if (isActive) return <RiRadioFill size={size} />;
+            return <RiRadioLine size={size} />;
        case AppRoute.SETTINGS:
            if (isActive) return <RiSettings2Fill size={size} />;
            return <RiSettings2Line size={size} />;
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import styles from './sidebar.module.css';

 import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
+import { useRadioStore } from '/@/renderer/features/radio/hooks/use-radio-player';
 import { ActionBar } from '/@/renderer/features/sidebar/components/action-bar';
 import { ServerSelector } from '/@/renderer/features/sidebar/components/server-selector';
 import { SidebarIcon } from '/@/renderer/features/sidebar/components/sidebar-icon';
@@ -52,6 +53,7 @@ export const Sidebar = () => {
            Home: t('page.sidebar.home', { postProcess: 'titleCase' }),
            'Now Playing': t('page.sidebar.nowPlaying', { postProcess: 'titleCase' }),
            Playlists: t('page.sidebar.playlists', { postProcess: 'titleCase' }),
+            Radio: t('page.sidebar.radio', { postProcess: 'titleCase' }),
            Search: t('page.sidebar.search', { postProcess: 'titleCase' }),
            Settings: t('page.sidebar.settings', { postProcess: 'titleCase' }),
            Tracks: t('page.sidebar.tracks', { postProcess: 'titleCase' }),
@@ -61,7 +63,9 @@ export const Sidebar = () => {

    const { sidebarItems } = useGeneralSettings();
    const { windowBarStyle } = useWindowSettings();
-    const showImage = useAppStore((state) => state.sidebar.image);
+    const sidebarImageEnabled = useAppStore((state) => state.sidebar.image);
+    const isRadioPlaying = useRadioStore((state) => state.isPlaying);
+    const showImage = sidebarImageEnabled && !isRadioPlaying;

    const sidebarItemsWithRoute: SidebarItemType[] = useMemo(() => {
        if (!sidebarItems) return [];