fix: many things

ricardocasares · Oct 28, 2020 · cbb2327 · cbb2327
1 parent aa6dc00
commit cbb2327
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 24 deletions.
diff --git a/src/components/Player/index.tsx b/src/components/Player/index.tsx
@@ -1,29 +1,45 @@
 import { useContext } from "react";
 import { Play, Pause, Square } from "@geist-ui/react-icons";
+import { LineSkeleton } from "@/components/Skeleton";
 import { PlayerContext } from "@/lib/context/player";
 import { Container, Controls, Title, Button } from "./style";
 
 export const Player = () => {
-  const { station, play, pause, stop, paused, playing } = useContext(
-    PlayerContext
-  );
+  const {
+    station,
+    play,
+    pause,
+    stop,
+    error,
+    paused,
+    playing,
+    stopped,
+    loading,
+  } = useContext(PlayerContext);
+
+  // if (!station) return null;
 
-  if (!station) return null;
+  const showPlay = playing && !error;
+  const showPause = paused && !error;
+  const showStation = playing && !error;
 
   return (
     <Container>
-      <Title>{station.name}</Title>
+      {error && <Title>Error</Title>}
+      {loading && <LineSkeleton />}
+      {showStation && <Title>{station.name}</Title>}
       <Controls>
-        {playing && (
+        {showPlay && (
           <Button onClick={() => pause()}>
             <Pause />
           </Button>
         )}
-        {paused && (
+        {showPause && (
           <Button onClick={() => play(station)}>
             <Play />
           </Button>
         )}
+
         <Button onClick={() => stop()}>
           <Square />
         </Button>

diff --git a/src/components/Player/style.ts b/src/components/Player/style.ts
@@ -2,7 +2,8 @@ import styled from "@emotion/styled";
 
 export const Container = styled.footer`
   display: grid;
-  padding: var(--sz3);
+  padding: var(--sz4);
+  grid-gap: var(--sz4);
   align-items: center;
   grid-template-columns: 1fr auto;
   background: var(--background);
@@ -18,14 +19,14 @@ export const Title = styled.div`
 
 export const Controls = styled.section`
   display: grid;
-  padding: var(--sz1);
   grid-gap: var(--sz4);
   grid-auto-flow: column;
   justify-content: center;
 `;
 
 export const Button = styled.button`
   margin: 0;
+  padding: 0;
   border: none;
   appearance: none;
   background: none;

diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx
@@ -13,3 +13,15 @@ export const CardSkeleton = () => (
     <rect x="0" y="150" width="30%" height="20" />
   </Loader>
 );
+
+export const LineSkeleton = () => (
+  <Loader
+    speed={2}
+    width="100%"
+    height={16}
+    backgroundColor="var(--accents-1)"
+    foregroundColor="var(--accents-2)"
+  >
+    <rect x="0" y="0" width="100%" height="16" />
+  </Loader>
+);
diff --git a/src/components/StationCardList/index.tsx b/src/components/StationCardList/index.tsx
@@ -24,7 +24,7 @@ export const GQLStations: FC<StationSearchInput> = graphql(
     const { play } = useContext(PlayerContext);
 
     return (
-      <AutoGrid gridGap={[20]}>
+      <AutoGrid gridGap={["var(--sz4)"]}>
         {query.stations({ search }).map((station) => (
           <Card
             key={[station.stationuuid, station.url].join("-")}

diff --git a/src/lib/context/player.tsx b/src/lib/context/player.tsx
@@ -6,19 +6,23 @@ export type PlayerContext = {
   stop: () => void;
   pause: () => void;
   station?: Station | null;
+  error: boolean;
   paused: boolean;
   playing: boolean;
   stopped: boolean;
+  loading: boolean;
 };
 
 export const PlayerContext = createContext<PlayerContext>({
   station: null,
   play: () => {},
   pause: () => {},
   stop: () => {},
+  error: false,
   paused: false,
   playing: false,
   stopped: false,
+  loading: false,
 });
 
 // @TODO: This is very messy
@@ -28,42 +32,86 @@ export const PlayerProvider = ({ children }) => {
   const [paused, setPaused] = useState(false);
   const [playing, setPlaying] = useState(false);
   const [stopped, setStopped] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
 
   const play = (s: Station) => {
-    if (audio.current.src !== s.url) {
+    if (audio.current.src !== s.url || error) {
       audio.current.src = s.url;
-      audio.current.play().then(() => setStation(s));
+      setStation(s);
+      setError(false);
+      setLoading(true);
+      setPlaying(false);
+      audio.current.play();
     }
 
     if (paused) {
       audio.current.play().then(() => setPaused(false));
     }
   };
 
-  const pause = () => {
-    audio.current.pause();
-    setPaused(true);
-    setPlaying(false);
-    setStopped(false);
-  };
+  const pause = () => audio.current.pause();
 
   const stop = () => {
     audio.current.src = "";
+    setError(false);
     setStation(null);
     setPaused(false);
     setStopped(true);
     setPlaying(false);
   };
 
+  const onPlaying = () => {
+    setError(false);
+    setPlaying(true);
+    setPaused(false);
+    setLoading(false);
+    setStopped(false);
+  };
+
+  const onCanPlay = () => {
+    setError(false);
+    setPaused(false);
+    setPlaying(true);
+    setLoading(false);
+    setStopped(false);
+  };
+
+  const onLoad = () => {
+    setError(false);
+    setLoading(true);
+    setPlaying(false);
+    setStopped(false);
+    setPaused(false);
+  };
+
+  const onPause = () => {
+    setPlaying(false);
+    setStopped(false);
+    setPaused(true);
+  };
+
+  const onError = () => {
+    setError(true);
+    setPaused(false);
+    setPlaying(false);
+    setStopped(false);
+    setLoading(false);
+  };
+
   useEffect(() => {
-    audio.current.addEventListener("playing", () => {
-      setPlaying(true);
-      setStopped(false);
-      setPaused(false);
-    });
+    audio.current.addEventListener("load", onLoad);
+    audio.current.addEventListener("error", onError);
+    audio.current.addEventListener("playing", onPlaying);
+    audio.current.addEventListener("canplay", onCanPlay);
+    audio.current.addEventListener("pause", onPause);
 
     return () => {
-      audio.current.removeEventListener("playing", () => setPlaying(true));
+      audio.current.removeEventListener("load", onLoad);
+      audio.current.removeEventListener("error", onError);
+      audio.current.removeEventListener("pause", onPause);
+      audio.current.removeEventListener("playing", onPlaying);
+      audio.current.removeEventListener("canplay", onCanPlay);
     };
   }, []);
 
@@ -72,8 +120,10 @@ export const PlayerProvider = ({ children }) => {
       value={{
         play,
         stop,
+        error,
         pause,
         paused,
+        loading,
         playing,
         stopped,
         station,