feat: Add metadata and MediaSession handlers to enable native controls

package.json

@@ -56,9 +56,9 @@
     "react-dom": "^18.2.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.6",
-    "vite": "^4.4.7",
+    "vite": "^6.2.6",
     "vite-tsconfig-paths": "^4.2.0",
-    "wrangler": "^3.28.1"
+    "wrangler": "^4.9.1"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [

src/js/App.tsx

@@ -54,21 +54,21 @@ export const App = () => {
   return (
     <Wrapper>
       <DatabaseContextProvider>
-        <AudioContextProvider>
-          <>
-            <Header />
-            <div className="app-body">
-              <h1>transcript.fish</h1>
-              <UnderConstructionBanner />
-              <img className="logo" src={mediaUrl.images('logo-transparent.png')} />
-              <ErrorBoundary FallbackComponent={EpisodeSearchFallback}>
-                <FiltersContextProvider>
+        <FiltersContextProvider>
+          <AudioContextProvider>
+            <>
+              <Header />
+              <div className="app-body">
+                <h1>transcript.fish</h1>
+                <UnderConstructionBanner />
+                <img className="logo" src={mediaUrl.images('logo-transparent.png')} />
+                <ErrorBoundary FallbackComponent={EpisodeSearchFallback}>
                   <Outlet />
-                </FiltersContextProvider>
-              </ErrorBoundary>
-            </div>
-          </>
-        </AudioContextProvider>
+                </ErrorBoundary>
+              </div>
+            </>
+          </AudioContextProvider>
+        </FiltersContextProvider>
       </DatabaseContextProvider>
     </Wrapper>
   );

src/js/EpisodeSearch.tsx

@@ -60,24 +60,34 @@ export const EpisodeSearch = () => {
 
   const {
     episodes: {
-      data: episodes,
       search,
       error: episodesError,
       loading: episodesLoading,
       total: totalEpisodes,
     },
   } = useContext(DatabaseContext);
 
-  const { getFilteredEpisodes, episodeTypeFilters, presenterFilters, searchFilters, venueFilters } =
-    useContext(FiltersContext);
+  const {
+    filteredEpisodes,
+    episodeTypeFilters,
+    presenterFilters,
+    searchFilters,
+    venueFilters,
+  } = useContext(FiltersContext);
 
   useEffect(() => {
     search(searchTerm, searchFilters);
   }, [search, searchTerm, searchFilters]);
 
   useEffect(() => {
     setPage(0);
-  }, [episodeTypeFilters, presenterFilters, searchTerm, searchFilters, venueFilters]);
+  }, [
+    episodeTypeFilters,
+    presenterFilters,
+    searchTerm,
+    searchFilters,
+    venueFilters,
+  ]);
 
   const handleSubmit = useCallback((e: FormEvent) => {
     preventDefault(e);
@@ -93,8 +103,6 @@ export const EpisodeSearch = () => {
     setExpanded(e => !e);
   }, []);
 
-  const filteredEpisodes = getFilteredEpisodes(episodes);
-
   if (!filteredEpisodes) {
     return null;
   }
@@ -105,7 +113,10 @@ export const EpisodeSearch = () => {
 
   return (
     <Wrapper>
-      <SearchBar placeholder="no such thing as a search bar" onSubmit={handleSubmit} />
+      <SearchBar
+        placeholder="no such thing as a search bar"
+        onSubmit={handleSubmit}
+      />
       <FilterBar />
       {!!totalEpisodes && (
         <TotalWrapper>
@@ -115,7 +126,11 @@ export const EpisodeSearch = () => {
             </button>
           </ExpandAllWrapper>
           {!episodesLoading && !episodesError && (
-            <Total isShowingAll={isShowingAll} resultsCount={resultsCount} total={totalEpisodes} />
+            <Total
+              isShowingAll={isShowingAll}
+              resultsCount={resultsCount}
+              total={totalEpisodes}
+            />
           )}
         </TotalWrapper>
       )}
@@ -139,7 +154,11 @@ export const EpisodeSearch = () => {
             }}
           />
           {totalPages > 1 && !episodesLoading ? (
-            <Paginator page={page} totalPages={totalPages} onPageChange={setPage} />
+            <Paginator
+              page={page}
+              totalPages={totalPages}
+              onPageChange={setPage}
+            />
           ) : (
             <PaginationSpacer />
           )}

src/js/EpisodesTable.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import styled from 'styled-components';
 import { useOutletContext } from 'react-router';
 import { EmptyState } from './EmptyState';
@@ -26,9 +27,28 @@ const LoaderWrapper = styled.div`
   justify-content: center;
 `;
 
+let ep: Episode[] | undefined;
+
 export const EpisodesTable = () => {
   const { episodes, page, loading, expanded, searchTerm } = useOutletContext<EpisodesTableProps>();
 
+  if (ep !== episodes) {
+    console.log('DUDE');
+    ep = episodes;
+  }
+  const rows = useMemo(() => {
+    return episodes
+      .slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE)
+      .map(episode => (
+        <EpisodeRow
+          episode={episode}
+          key={episode.episode}
+          searchTerm={searchTerm}
+          expanded={expanded}
+        />
+      ));
+  }, [episodes, expanded, page, searchTerm]);
+
   if (loading) {
     return (
       <LoaderWrapper>
@@ -43,16 +63,7 @@ export const EpisodesTable = () => {
 
   return (
     <StyledTable>
-      <tbody>
-        {episodes.slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE).map(episode => (
-          <EpisodeRow
-            episode={episode}
-            key={episode.episode}
-            searchTerm={searchTerm}
-            expanded={expanded}
-          />
-        ))}
-      </tbody>
+      <tbody>{rows}</tbody>
     </StyledTable>
   );
 };

src/js/audio/AudioContext.tsx

@@ -2,15 +2,17 @@ import { Ref, createContext } from 'react';
 
 export const AudioContext = createContext<{
   isPlaying: (episodeNum: number) => boolean;
-  playPause: (episodeNum: number) => void;
+  play: (episodeNum: number) => void;
+  pause: () => void;
   audioRef?: Ref<HTMLAudioElement>;
   playingEpisode?: number;
   currentTime: number;
   seek: (time: number) => void;
   ended: boolean;
 }>({
   isPlaying: () => false,
-  playPause: () => undefined,
+  play: () => undefined,
+  pause: () => undefined,
   audioRef: null,
   playingEpisode: undefined,
   currentTime: 0,