moving audio player to routepage

jeppekroghitk · jeppekroghitk · commit 4b4907c7336c · 2023-07-27T11:32:58.000+02:00
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,24 +1,20 @@
-import React, { useEffect, useState, useMemo, useRef, useContext } from "react";
+import React, { useEffect, useState, useMemo } from "react";
 import { Routes, Navigate, Route } from "react-router-dom";
 import TagPage from "./components/tags/TagPage";
 import LatLongContext from "./context/latitude-longitude-context";
-import AudioContext from "./context/audio-context";
 import CacheContext from "./context/cache-context";
 import PermissionContext from "./context/permission-context";
 import Info from "./components/info";
 import TagsList from "./components/tags/TagsList";
 import RoutePage from "./components/routes/RoutePage";
-import ApiEndpointContext from "./context/api-endpoint-context";
 
 function App() {
   const [geolocationAvailable, setGeolocationAvailable] = useState();
   const [lat, setLat] = useState(null);
   const [long, setLong] = useState(null);
   const [heading, setHeading] = useState(null);
   const [speed, setSpeed] = useState(null);
-  const [source, setSource] = useState(null);
   const [cache, setCache] = useState({});
-  const audioRef = useRef();
 
   const cacheContext = useMemo(
     () => ({
@@ -38,27 +34,13 @@ function App() {
     [lat, long, heading, speed]
   );
 
-  const audio = useMemo(
-    () => ({
-      setSource,
-    }),
-    [setSource]
-  );
   const geolocationAvailableContext = useMemo(
     () => ({
       geolocationAvailable,
     }),
     [geolocationAvailable]
   );
 
-  useEffect(() => {
-    if (audioRef.current) {
-      audioRef.current.pause();
-      audioRef.current.load();
-      audioRef.current.play();
-    }
-  }, [source]);
-
   const updateLocation = () => {
     if (lat === null || long === null) {
       navigator.geolocation.getCurrentPosition((position) => {
@@ -113,39 +95,25 @@ function App() {
     requestPermissions();
   }, []);
 
-  const { fileUrl } = useContext(ApiEndpointContext);
 
   return (
     <div className="App h-full min-h-screen w-screen p-3 text-zinc-800 dark:text-white bg-zinc-100 dark:bg-zinc-800 overflow-hidden touch-none">
       <LatLongContext.Provider value={contextLatLong}>
         <CacheContext.Provider value={cacheContext}>
-          <AudioContext.Provider value={audio}>
-            <PermissionContext.Provider value={geolocationAvailableContext}>
-              <Routes>
-                <Route path="/" element={<TagsList />} />
-                <Route path="tag/:id" element={<TagPage />} />
-                <Route path="route/:id" element={<RoutePage />} />
-                <Route
-                  path="info"
-                  element={<Info geolocationAvailable={geolocationAvailable} />}
-                />
-                <Route path="*" element={<Navigate to="/" />} />
-              </Routes>
-            </PermissionContext.Provider>
-          </AudioContext.Provider>
+          <PermissionContext.Provider value={geolocationAvailableContext}>
+            <Routes>
+              <Route path="/" element={<TagsList />} />
+              <Route path="tag/:id" element={<TagPage />} />
+              <Route path="route/:id" element={<RoutePage />} />
+              <Route
+                path="info"
+                element={<Info geolocationAvailable={geolocationAvailable} />}
+              />
+              <Route path="*" element={<Navigate to="/" />} />
+            </Routes>
+          </PermissionContext.Provider>
         </CacheContext.Provider>
       </LatLongContext.Provider>
-      {audioRef && source && (
-        // eslint-disable-next-line jsx-a11y/media-has-caption
-        <div className="fixed left-3 bottom-0 right-3 bg-zinc-200 dark:bg-zinc-700">
-          <audio
-            className="w-full"
-            ref={audioRef}
-            controls
-            src={`${fileUrl}${source}`}
-          />
-        </div>
-      )}
     </div>
   );
 }
diff --git a/src/components/points-of-interest/PointOfInterest.jsx b/src/components/points-of-interest/PointOfInterest.jsx
@@ -6,7 +6,6 @@ import {
 } from "../../util/helper";
 import PodcastWrapper from "./PodcastWrapper";
 import PermissionContext from "../../context/permission-context";
-import AudioContext from "../../context/audio-context";
 import Image from "../Image";
 import { ReactComponent as CirclePlay } from "../../icons/circle-play-solid.svg";
 import { ReactComponent as ClosedCap } from "../../icons/closed-captioning-solid.svg";
@@ -27,9 +26,9 @@ function PointOfInterest({
   index,
   destinationChanged,
   nextUnlockableId,
+  setSource
 }) {
   const { lat, long } = useContext(LatLongContext);
-  const { setSource } = useContext(AudioContext);
   const [proximity, setProximity] = useState(null);
   const [viewSubtitles, setViewSubtitles] = useState(false);
   const [unlocked, setUnlocked] = useState(false);
diff --git a/src/components/routes/RoutePage.jsx b/src/components/routes/RoutePage.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/media-has-caption */
 import { React, useEffect, useState, useContext, useRef } from "react";
 import { useParams } from "react-router-dom";
 import useFetch from "../../util/useFetch";
@@ -11,7 +12,7 @@ import {
 import PermissionContext from "../../context/permission-context";
 import BackButton from "../BackButton";
 import { ReactComponent as LocationArrow } from "../../icons/location-arrow-solid.svg";
-import AudioContext from "../../context/audio-context";
+import ApiEndpointContext from "../../context/api-endpoint-context";
 
 function RoutePage() {
   const { id } = useParams();
@@ -25,12 +26,12 @@ function RoutePage() {
   const [destinationLatitude, setDestinationLatitude] = useState(0);
   const [destinationLongitude, setDestinationLongitude] = useState(0);
   const [destinationDistance, setDestinationDistance] = useState(null);
-  const [destination, setDestination] = useState(null);
   const [destinationIndex, setDestinationIndex] = useState(0);
   const [nextUnlockableId, setNextUnlockableId] = useState(null);
+  const [source, setSource] = useState(null);
   const { userLatitude, userLongitude } = useContext(LatLongContext);
   const { geolocationAvailable } = useContext(PermissionContext);
-  const { audio } = useContext(AudioContext);
+  const audioRef = useRef();
   const isIOS =
     navigator.userAgent.match(/(iPod|iPhone|iPad)/) &&
     navigator.userAgent.match(/AppleWebKit/);
@@ -42,6 +43,14 @@ function RoutePage() {
     }
   }, [data]);
 
+  useEffect(() => {
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current.load();
+      audioRef.current.play();
+    }
+  }, [source]);
+
   useEffect(() => {
     if (
       destinationLatitude &&
@@ -132,9 +141,7 @@ function RoutePage() {
         (poi) => destinationPoint[0].id === poi.id
       );
       setDestinationIndex(index);
-      setDestination(destinationPoint[0]);
       setNextUnlockableId(destinationPoint[0].id);
-
       setDestinationLatitude(destinationPoint[0].latitude);
       setDestinationLongitude(destinationPoint[0].longitude);
     }
@@ -144,6 +151,9 @@ function RoutePage() {
   }, [pointsOfInterest]);
 
   if (selectedRoute === null) return null;
+
+  const { fileUrl } = useContext(ApiEndpointContext);
+
   return (
     <div className="flex flex-col place-items-start pb-28">
       <BackButton>Afslut</BackButton>
@@ -157,55 +167,60 @@ function RoutePage() {
               index={index + 1}
               destinationChanged={destinationChanged}
               nextUnlockableId={nextUnlockableId}
+              setSource={setSource}
             />
           ))}
       </div>
       {/* TODO: Make room for audio player below when playing */}
-      <div className="fixed left-3 bottom-3 right-3 bg-zinc-200 dark:bg-zinc-700 flex gap-3 rounded-lg p-3 pb-15 divide-x dark:divide-zinc-200/5">
-        <div>
-          <div className="text-sm text-bold">
-            Afstand til del
-            <span className="ml-1 px-2 font-bold rounded-full bg-emerald-700 text-zinc-100 text-sm">
-              {destinationIndex + 1}
-            </span>
+      <div className="fixed flex flex-col left-3 bottom-3 right-3 bg-zinc-200 dark:bg-zinc-700 gap-3 rounded-lg p-3 pb-15 divide-x dark:divide-zinc-200/5">
+        <div className="flex flex-row justify-between">
+          <div>
+            <div className="text-sm text-bold">
+              Afstand til del
+              <span className="ml-1 px-2 font-bold rounded-full bg-emerald-700 text-zinc-100 text-sm">
+                {destinationIndex + 1}
+              </span>
+            </div>
+            <div className="">
+              {destinationDistance && `${destinationDistance} meter`}
+            </div>
           </div>
-          <div className="">
-            {destinationDistance && `${destinationDistance} meter`}
+          <div className="pl-3">
+            {/* TODO: Make this check for compass */}
+            {(!orientation || !angle) && (
+              <button
+                className="bg-zinc-700 dark:bg-zinc-200 dark:text-zinc-800 rounded text-sm py-1 px-3"
+                type="button"
+                onClick={() => startWaypointer()}
+              >
+                Vis mig vej
+              </button>
+            )}
+            {/* TODO: Make this check for compass */}
+            {orientation && angle && (
+              <div>
+                <div className="flex justify-between">
+                  <span className="text-sm text-bold mr-5">Retning</span>
+                  <span className="w-1/2">
+                    <LocationArrow
+                      className="inline w-5"
+                      style={{
+                        transform: `rotate(${-rotation}deg)`,
+                      }}
+                    />
+                  </span>
+                </div>
+              </div>
+            )}
           </div>
         </div>
-        <div className="pl-3">
-          {/* TODO: Make this check for compass */}
-          {(!orientation || !angle) && (
-            <button
-              className="bg-zinc-700 dark:bg-zinc-200 dark:text-zinc-800 rounded text-sm py-1 px-3"
-              type="button"
-              onClick={() => startWaypointer()}
-            >
-              Vis mig vej
-            </button>
-          )}
-          {/* TODO: Make this check for compass */}
-          {orientation && angle && (
-            <div>
-              <div className="flex justify-between mb-3">
-                <span className="text-sm text-bold">Retning</span>
-                <span className="w-1/2">
-                  <LocationArrow
-                    className="inline w-5"
-                    style={{
-                      transform: `rotate(${-rotation}deg)`,
-                    }}
-                  />
-                </span>
-              </div>
-              {/* <div className="text-xs text-zinc-500">
-                Lat: {userLatitude}/{latitude}
-              </div>
-              <div className="text-xs text-zinc-500">
-                Long: {userLongitude}/{longitude}
-              </div> */}
-            </div>
-          )}
+        <div>
+          <audio
+            className="w-full"
+            ref={audioRef}
+            controls
+            src={`${fileUrl}${source}`}
+          />
         </div>
       </div>
       <div ref={bottomRef} />
