mirror of
https://github.com/jeffvli/feishin.git
synced 2026-06-11 14:53:47 +02:00
Add internet radio (#1384)
This commit is contained in:
Jeff
@@ -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);
|
||||
};
|
||||
Reference in New Issue
Block a user