44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import type { ReactNode} from "react";
|
|
import { useEffect, useState } from "react";
|
|
import type { StationWithTagsClientSide } from "~/models/station.server";
|
|
|
|
export type StationPlayerProps = {
|
|
station: StationWithTagsClientSide | null
|
|
};
|
|
|
|
export function StationPlayer({ station }: StationPlayerProps) {
|
|
const [player, setPlayer] = useState<ReactNode | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') return;
|
|
const importComponent = async () => {
|
|
if (!station) return;
|
|
try {
|
|
|
|
const module = await import('react-radio-player');
|
|
const RadioBottomBarPlayer = module.RadioBottomBarPlayer;
|
|
setPlayer(<RadioBottomBarPlayer
|
|
streamUrl={station.streamUrl}
|
|
title={station.name}
|
|
description={station.description || undefined}
|
|
image={station.imgUrl}
|
|
secondDescription={`* ${station}`}
|
|
/>);
|
|
} catch (error) {
|
|
console.log('rerrerer', error)
|
|
}
|
|
};
|
|
importComponent()
|
|
}, [station])
|
|
|
|
if (!station || !player) {
|
|
return <></>;
|
|
}
|
|
return (
|
|
<div
|
|
className="fixed bottom-0 right-[-1rem] w-[76%] h-[70px] px-4 py-2 z-50 flex justify-end content-center items-center gap-2 text-accent-content">
|
|
{player}
|
|
</div>
|
|
);
|
|
}
|