From b1df62c8bf4bdd4ccc652e7412161418faddca63 Mon Sep 17 00:00:00 2001
From: "Elisei.Nicolae" <nicolae.elisei1999@gmail.com>
Date: Sun, 25 Dec 2022 23:43:15 +0200
Subject: [PATCH] feat: add loading svg.

---
 frontend/components/StationPlayer.tsx | 17 ++++++++++++++---
 frontend/public/images/loading.tsx    | 26 ++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 frontend/public/images/loading.tsx

diff --git a/frontend/components/StationPlayer.tsx b/frontend/components/StationPlayer.tsx
index acd5fd7..fd6c063 100644
--- a/frontend/components/StationPlayer.tsx
+++ b/frontend/components/StationPlayer.tsx
@@ -3,7 +3,6 @@ import {useRouter} from 'next/router';
 import {useIdleTimer} from 'react-idle-timer';
 import {isDesktop, isMobile} from 'react-device-detect';
 import dynamic from 'next/dynamic';
-
 import {
   Box,
   Flex,
@@ -21,6 +20,7 @@ import {trackListenClientSide} from '../frontendServices/listen';
 import {CONSTANTS} from '../lib/constants';
 import {Station} from '../types';
 import {cdnImageLoader} from '@/utils/cdnImageLoader';
+import {Loading} from '@/public/images/loading';
 
 const ReactPlayer = dynamic(() => import('react-player/lazy'), {ssr: false});
 
@@ -48,6 +48,7 @@ export default function StationPlayer({stations}: any) {
   const [volume, setVolume] = useLocalStorageState(60, 'AUDIO_PLAYER_VOLUME');
   const [selectedStreamType, setSelectedStreamType] = useState('HLS');
   const [hasInteracted, setInteraction] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
 
   useIdleTimer({
     onAction: () => setInteraction(true),
@@ -251,9 +252,13 @@ export default function StationPlayer({stations}: any) {
                   aria-hidden="true"
                   viewBox="0 0 24 24">
                   {isPlaying ? (
-                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"></path>
+                    isLoading ? (
+                      <Loading />
+                    ) : (
+                      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z" />
+                    )
                   ) : (
-                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.5 16.5v-9l7 4.5-7 4.5z"></path>
+                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.5 16.5v-9l7 4.5-7 4.5z" />
                   )}
                 </svg>
               </Box>
@@ -266,6 +271,12 @@ export default function StationPlayer({stations}: any) {
                 playing={isPlaying}
                 muted={isMuted}
                 volume={volume / 100}
+                onBuffer={() => {
+                  setIsLoading(true);
+                }}
+                onBufferEnd={() => {
+                  setIsLoading(false);
+                }}
                 onPlay={() => {
                   console.debug('onPlay');
                   setMuted(false);
diff --git a/frontend/public/images/loading.tsx b/frontend/public/images/loading.tsx
new file mode 100644
index 0000000..f96ed50
--- /dev/null
+++ b/frontend/public/images/loading.tsx
@@ -0,0 +1,26 @@
+export const Loading = () => {
+  return (
+    <svg
+      version="1.1"
+      id="L9"
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      viewBox="0 0 100 100"
+      enableBackground="new 0 0 0 0">
+      <path
+        fill="#fff"
+        d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
+        <animateTransform
+          attributeName="transform"
+          attributeType="XML"
+          type="rotate"
+          dur="1s"
+          from="0 50 50"
+          to="360 50 50"
+          repeatCount="indefinite"
+        />
+      </path>
+    </svg>
+  );
+};