Merge branch 'master' of https://github.com/iosifnicolae2/radio-crest…

…in.com
radio-crestin · Jul 1, 2023 · b98a52a · b98a52a · vercel · Jul 1, 2023
2 parents 80846f9 + fb44911
commit b98a52a
Show file tree

Hide file tree

Showing 8 changed files with 792 additions and 810 deletions.
diff --git 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 (
     <Image
-      {...{
-        onError: () => 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
@@ -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) {
 
       <Flex>
         <ReactStars
+          key={`rating-${station.id}`}
           count={5}
           onChange={(rating: any) => onRatingChange(rating)}
           size={20}
           value={StationRating}
+          isHalf={true}
           activeColor="#fe7f38"
         />
         {/* @ts-ignore */}
@@ -137,9 +141,9 @@ export default function StationInformation(props: any) {
         )}
       </Flex>
 
-      {NumberOfListeners && (
+      {numberOfListeners && (
         <Text fontSize={{base: 'sm', lg: 'md'}}>
-          {NumberOfListeners} persoane ascultă împreună cu tine acest radio
+          {numberOfListeners} persoane ascultă împreună cu tine acest radio
         </Text>
       )}
 

diff --git 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 (
     <Box position={'relative'} role="group">
@@ -37,6 +42,24 @@ const StationItem = ({
           overflow={'hidden'}
           height={250}
           width={250}>
+          {numberOfListeners && (
+            <Text
+              position={'absolute'}
+              display={'flex'}
+              justifyContent={'center'}
+              alignItems={'center'}
+              background={'rgba(0,0,0,0.68)'}
+              color={'white'}
+              paddingX={1}
+              borderRadius={10}
+              right={4}
+              top={3}
+              fontSize={14}
+              gap={1}>
+              <ViewIcon />
+              {numberOfListeners}
+            </Text>
+          )}
           <ImageWithFallback
             src={
               station.now_playing?.song?.thumbnail_url ||
@@ -90,12 +113,18 @@ const StationItem = ({
 };
 
 export default function StationList({
-                                      station_group,
-                                      stations,
-                                    }: {
+  station_group,
+  stations,
+}: {
   station_group: StationGroup;
   stations: Station[];
 }) {
+  const route = useRouter();
+  // @ts-ignore
+  const selectedStation: Station = stations.find(
+    s => s.slug === route.asPath.split('/')[2],
+  );
+
   return (
     <Center>
       <Grid
@@ -109,7 +138,7 @@ export default function StationList({
         }}
         gap={9}>
         {Object.values(stations).length > 0 ? (
-          Object.values(stations).map((station: Station, index): any => (
+          Object.values(stations).map((station: Station): any => (
             <GridItem as="button" key={station.id}>
               <Link
                 prefetch={false}
@@ -118,7 +147,10 @@ export default function StationList({
                 )}/${encodeURIComponent(station.slug)}`}
                 scroll={false}
                 passHref>
-                <StationItem station={station} />
+                <StationItem
+                  station={station}
+                  is_listening={station === selectedStation || false}
+                />
               </Link>
             </GridItem>
           ))

diff --git 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'}}>
-          <Box>
+          <Box
+            display={'flex'}
+            flexDirection={'column'}
+            justifyContent={'center'}>
             <Text
               as="h2"
               fontSize={{base: 'sm'}}
@@ -358,16 +383,18 @@ export default function StationPlayer({stations}: any) {
                   setPlaybackState(PLAYBACK_STATE.STARTED);
                 }
               }}>
-              <Box fill={{base: 'white'}}>
-                <svg
-                  width="50px"
-                  height="50px"
-                  focusable="false"
-                  aria-hidden="true"
-                  viewBox="0 0 24 24">
-                  {renderPlayButtonSvg()}
-                </svg>
-              </Box>
+              <Tooltip label="Start/Stop [Space]">
+                <Box fill={{base: 'white'}}>
+                  <svg
+                    width="50px"
+                    height="50px"
+                    focusable="false"
+                    aria-hidden="true"
+                    viewBox="0 0 24 24">
+                    {renderPlayButtonSvg()}
+                  </svg>
+                </Box>
+              </Tooltip>
             </button>
             <audio
               preload="true"

diff --git a/frontend/hooks/useSpaceBarPress.ts b/frontend/hooks/useSpaceBarPress.ts
@@ -0,0 +1,42 @@
+import {useEffect} from 'react';
+
+const useSpaceBarPress = (callback: () => void) => {
+  useEffect(() => {
+    const handleKeyDown = (e: any) => {
+      const isInputOrTextArea = ['input', 'textarea', 'select'].includes(
+        e.target.tagName.toLowerCase(),
+      );
+
+      if (
+        e.keyCode === 32 &&
+        e.target.getAttribute('contentEditable') !== 'true' &&
+        !isInputOrTextArea
+      ) {
+        e.preventDefault();
+      }
+    };
+
+    const handleKeyPress = (e: any) => {
+      const isInputOrTextArea = ['input', 'textarea', 'select'].includes(
+        e.target.tagName.toLowerCase(),
+      );
+
+      if (
+        (e.key === ' ' || e.code === 'Space' || e.keyCode === 32) &&
+        !isInputOrTextArea
+      ) {
+        callback();
+      }
+    };
+
+    document.body.addEventListener('keyup', handleKeyPress);
+    document.body.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.body.removeEventListener('keyup', handleKeyPress);
+      document.body.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [callback]);
+};
+
+export default useSpaceBarPress;
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,39 +12,39 @@
     "build-and-start": "yarn run build && yarn run start"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^2.0.15",
-    "@chakra-ui/react": "^2.4.6",
+    "@chakra-ui/icons": "^2.0.19",
+    "@chakra-ui/react": "^2.7.1",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
-    "@types/uuid": "^9.0.0",
-    "axios": "^1.2.2",
+    "@types/uuid": "^9.0.2",
+    "axios": "^1.4.0",
     "bluebird": "^3.7.2",
     "cachios": "^4.0.0",
-    "concurrently": "^7.6.0",
+    "concurrently": "^8.2.0",
     "cookie-session": "^2.0.0",
     "cross-env": "^7.0.3",
-    "framer-motion": "^8",
-    "hls.js": "1.2.9",
-    "next": "13.1.1",
+    "framer-motion": "^10",
+    "hls.js": "1.4.6",
+    "next": "13.4.7",
     "next-runtime-dotenv": "^1.5.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-rating-stars-component": "^2.2.0",
     "react-share": "^4.4.1",
-    "sass": "^1.57.1",
-    "sharp": "^0.31.3",
-    "swr": "^2.0.0",
-    "tslog": "^4.7.1",
+    "sass": "^1.63.6",
+    "sharp": "^0.32.1",
+    "swr": "^2.2.0",
+    "tslog": "^4.8.2",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^13.1.1",
+    "@next/bundle-analyzer": "^13.4.7",
     "@styled-jsx/plugin-sass": "^4.0.2",
     "@types/bluebird": "^3.5.38",
-    "@types/node": "^18.11.18",
-    "@types/react": "18.0.26",
-    "prettier": "2.8.2",
+    "@types/node": "^20.3.1",
+    "@types/react": "18.2.14",
+    "prettier": "2.8.8",
     "ts-node": "^10.9.1",
-    "typescript": "4.9.4"
+    "typescript": "5.1.3"
   }
 }