vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-14 04:20:07 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add internet radio (#1384)

Browse Source
This commit is contained in:
Jeff
2025-12-13 21:26:33 -08:00
committed by GitHub
parent f61d34c340
commit 7ed847fecb
46 changed files with 2229 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/player/audio-player/engine/mpv-player-engine.tsx
+29 -10
View File
@@ -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)
src/renderer/features/player/components/audio-players.tsx
+18
View File
@@ -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 />}
src/renderer/features/player/components/center-controls.tsx
+81 -10
View File
@@ -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={{
src/renderer/features/player/components/left-controls.tsx
+106 -90
View File
@@ -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>
src/renderer/features/player/components/radio-metadata-display.tsx
+75
View File
@@ -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>
</>
);
};