diff --git a/frontend/components/ImageWithFallback/ImageWithFallback.tsx b/frontend/components/ImageWithFallback/ImageWithFallback.tsx index 378774d..62635ae 100644 --- a/frontend/components/ImageWithFallback/ImageWithFallback.tsx +++ b/frontend/components/ImageWithFallback/ImageWithFallback.tsx @@ -5,9 +5,9 @@ import {Image} from '@chakra-ui/react'; import {ImageProps} from '@chakra-ui/image'; export const ImageWithFallback = ({ - fallbackSrc, - ...props - }: ImageProps & { fallbackSrc: string }) => { + fallbackSrc, + ...props +}: ImageProps & {fallbackSrc: string}) => { const [error, setError] = useState(false); useEffect(() => { @@ -16,17 +16,15 @@ export const ImageWithFallback = ({ return ( setError(true), - htmlHeight: 250, - htmlWidth: 250, - loading: 'lazy', - ...props, - src: cdnImageLoader({ - src: error ? fallbackSrc : props.src, - width: 256, - }), - }} + {...props} + onError={() => setError(true)} + htmlHeight={250} + htmlWidth={250} + loading={'lazy'} + src={cdnImageLoader({ + src: error ? fallbackSrc : props.src, + width: 256, + })} draggable={false} /> ); diff --git a/frontend/components/StationInformation/StationInformation.tsx b/frontend/components/StationInformation/StationInformation.tsx index 9e38a44..1489f1d 100644 --- a/frontend/components/StationInformation/StationInformation.tsx +++ b/frontend/components/StationInformation/StationInformation.tsx @@ -32,7 +32,9 @@ export default function StationInformation(props: any) { Math.round( (average(station?.reviews?.map((i: any) => i.stars) || []) || 0) * 10, ) / 10; - const NumberOfListeners = station?.now_playing?.listeners || null; + const numberOfListeners = station?.now_playing?.listeners + ? station?.now_playing?.listeners + 1 + : null; const latestPost = station.posts[0]; const toast = useToast(); @@ -106,10 +108,12 @@ export default function StationInformation(props: any) { onRatingChange(rating)} size={20} value={StationRating} + isHalf={true} activeColor="#fe7f38" /> {/* @ts-ignore */} @@ -137,9 +141,9 @@ export default function StationInformation(props: any) { )} - {NumberOfListeners && ( + {numberOfListeners && ( - {NumberOfListeners} persoane ascultă împreună cu tine acest radio + {numberOfListeners} persoane ascultă împreună cu tine acest radio )} diff --git a/frontend/components/StationList/StationList.tsx b/frontend/components/StationList/StationList.tsx index 694fcae..6573586 100644 --- a/frontend/components/StationList/StationList.tsx +++ b/frontend/components/StationList/StationList.tsx @@ -14,6 +14,8 @@ import { useMediaQuery, } from '@chakra-ui/react'; import {ImageWithFallback} from '../ImageWithFallback/ImageWithFallback'; +import {ViewIcon} from '@chakra-ui/icons'; +import {useRouter} from 'next/router'; const StationMetadata = dynamic( () => import('@/components/StationMetadata/StationMetadata'), @@ -22,11 +24,14 @@ const StationMetadata = dynamic( const StationItem = ({ station, - priority, + is_listening, }: { station: Station; - priority?: boolean; + is_listening?: boolean; }) => { + const numberOfListeners = station?.now_playing?.listeners + ? station?.now_playing?.listeners + (is_listening ? 1 : 0) + : null; const [isTabletOrMobile] = useMediaQuery('(max-width: 1024px)'); return ( @@ -37,6 +42,24 @@ const StationItem = ({ overflow={'hidden'} height={250} width={250}> + {numberOfListeners && ( + + + {numberOfListeners} + + )} s.slug === route.asPath.split('/')[2], + ); + return (
{Object.values(stations).length > 0 ? ( - Object.values(stations).map((station: Station, index): any => ( + Object.values(stations).map((station: Station): any => ( - + )) diff --git a/frontend/components/StationPlayer.tsx b/frontend/components/StationPlayer.tsx index 27a9424..ac66474 100644 --- a/frontend/components/StationPlayer.tsx +++ b/frontend/components/StationPlayer.tsx @@ -9,6 +9,7 @@ import { SliderTrack, Spacer, Text, + Tooltip, useToast, } from '@chakra-ui/react'; import {useLocalStorageState} from '@/utils/state'; @@ -17,6 +18,7 @@ import {CONSTANTS} from '../lib/constants'; import {Loading} from '@/public/images/loading'; import {ImageWithFallback} from '@/components/ImageWithFallback/ImageWithFallback'; import Hls from 'hls.js'; +import useSpaceBarPress from '@/hooks/useSpaceBarPress'; enum STREAM_TYPE { HLS = 'HLS', @@ -226,13 +228,33 @@ export default function StationPlayer({stations}: any) { return () => clearInterval(timer); }, [playbackState]); + useSpaceBarPress(() => { + if ( + playbackState === PLAYBACK_STATE.PLAYING || + playbackState === PLAYBACK_STATE.STARTED + ) { + setPlaybackState(PLAYBACK_STATE.STOPPED); + return; + } + + if (playbackState === PLAYBACK_STATE.STOPPED) { + setPlaybackState(PLAYBACK_STATE.STARTED); + } + }); + const nextRandomStation = () => { const upStations = stations.filter( (station: any) => station.uptime.is_up === true, ); - const randomStation = - upStations[Math.floor(Math.random() * stations.length)]; - router.push(`/radio/${randomStation.slug}`); + + // Find the index of the current ID + const currentIndex = upStations.findIndex((s: any) => s.id === station.id); + + // Increment the index to move to the next ID + const nextIndex = currentIndex + 1; + const nextStation = upStations[nextIndex % upStations.length]; + + router.push(`/radio/${nextStation.slug}`); }; const renderPlayButtonSvg = () => { @@ -296,7 +318,10 @@ export default function StationPlayer({stations}: any) { mt={{base: 0}} ml={{base: 4}} flexDirection={{base: 'row'}}> - + - - - + + + + +