Add internet radio (#1384)

src/renderer/features/player/components/center-controls.tsx

@@ -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={{