Jump Links to Player

remix/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 120,
+  "tabWidth": 2,
+  "semi": true,
+  "arrowParens": "always"
+}

remix/app/components/AudioPlayer/FeaturedAudioPlayer.tsx

@@ -1,7 +1,7 @@
-import { useRef } from "react";
-import { useAudioPlayer } from "react-hook-audio";
-import { calculateTime } from "~/lib/timeHelpers";
-import { Icon } from "../Icon";
+import { useRef } from 'react';
+import { useAudioPlayer } from 'react-hook-audio';
+import { calculateTime } from '~/lib/timeHelpers';
+import { Icon } from '../Icon';
 
 interface FeaturedAudioPlayerProps {
   track: string;
@@ -24,8 +24,6 @@ const FeaturedAudioPlayer = ({ track }: FeaturedAudioPlayerProps) => {
     togglePlaying,
   } = useAudioPlayer(audioPlayer, progressBar);
 
-  console.log({ isPlaying });
-
   return (
     <div className="featured-audio-player relative">
       <audio

remix/app/components/AudioPlayer/WaveformPlayer.tsx

@@ -1,25 +1,26 @@
-import { calculateTime } from "~/lib/timeHelpers";
-import { Icon } from "../Icon";
-import { useAudioPlayer } from "react-hook-audio";
-import { useRef } from "react";
+import { calculateTime } from '~/lib/timeHelpers';
+import { Icon } from '../Icon';
+import { useAudioPlayer } from 'react-hook-audio';
+import { useEffect, useRef } from 'react';
 
 interface WaveformPlayerProps {
   artwork: string;
   episodeTitle: string;
   audioPath: string;
   episodeNumber: number;
-  skipTo: number;
+  skipTo: number | null;
 }
 
 const WaveformPlayer = ({
-  artwork = "/images/podcast-cover.jpg",
+  artwork = '/images/podcast-cover.jpg',
   audioPath,
   episodeNumber,
   episodeTitle,
+  skipTo,
 }: WaveformPlayerProps) => {
   // references
-  const audioPlayer = useRef<HTMLAudioElement>(); // set up reference for the audio component
-  const progressBar = useRef<HTMLInputElement>(); // reference for the progress bar
+  const audioPlayer = useRef<HTMLAudioElement>(null); // set up reference for the audio component
+  const progressBar = useRef<HTMLInputElement>(null); // reference for the progress bar
 
   // hooks
   const {
@@ -31,25 +32,22 @@ const WaveformPlayer = ({
     forwardThirty,
     isPlaying,
     onLoadedMetadata,
-    // skipToTime,
+    skipToTime,
     speed,
     tapSpaceBar,
     togglePlaying,
   } = useAudioPlayer(audioPlayer, progressBar);
 
-  // useEffect(() => {
-  //   skipToTime(skipTo);
-  // }, [skipTo]);
+  useEffect(() => {
+    if (skipTo !== null) {
+      skipToTime(skipTo);
+    }
+  }, [skipTo]);
 
   return (
     <div className="waveform-audio-player border-bastille border-1 p-5 max-w-[660px] my-0 mx-auto relative w-full">
       {/* audio element */}
-      <audio
-        ref={audioPlayer}
-        src={audioPath}
-        preload="metadata"
-        onLoadedMetadata={onLoadedMetadata}
-      />
+      <audio ref={audioPlayer} src={audioPath} preload="metadata" onLoadedMetadata={onLoadedMetadata} />
 
       {/* album cover */}
       <div className="album-cover">
@@ -63,14 +61,10 @@ const WaveformPlayer = ({
       {/* episode meta data */}
       <div className="text-left py-0 px-5">
         <h4 className="text-gray font-mono text-sm font-normal leading-none mt-0 mb-[10px] mx-0 p-0">
-          <span className="block sm:inline">COMPRESSED.fm</span>{" "}
-          <span className="block sm:inline episode-number">
-            {episodeNumber && `Episode ${episodeNumber}`}
-          </span>
+          <span className="block sm:inline">COMPRESSED.fm</span>{' '}
+          <span className="block sm:inline episode-number">{episodeNumber && `Episode ${episodeNumber}`}</span>
         </h4>
-        <h2 className="font-sans text-xl leading-none m-0 p-0">
-          {episodeTitle}
-        </h2>
+        <h2 className="font-sans text-xl leading-none m-0 p-0">{episodeTitle}</h2>
       </div>
 
       {/* play / pause */}
@@ -106,43 +100,24 @@ const WaveformPlayer = ({
         </button>
 
         {/* current time */}
-        <div className="current-time top-[15px] left-[100px]">
-          {calculateTime(currentTime)}
-        </div>
+        <div className="current-time top-[15px] left-[100px]">{calculateTime(currentTime)}</div>
 
         {/* progress bar */}
         <div className="progress-bar">
-          <input
-            type="range"
-            min="0"
-            max="100"
-            defaultValue="0"
-            ref={progressBar}
-            onChange={changeAudioToPlayhead}
-          />
+          <input type="range" min="0" max="100" defaultValue="0" ref={progressBar} onChange={changeAudioToPlayhead} />
         </div>
 
         {/* duration */}
-        <div className="duration top-[15px] right-5">
-          {duration && calculateTime(duration)}
-        </div>
+        <div className="duration top-[15px] right-5">{duration && calculateTime(duration)}</div>
 
         {/* back thirty */}
-        <button
-          type="button"
-          onClick={backThirty}
-          className="forwardBackward backward left-[120px] top-[47px]"
-        >
+        <button type="button" onClick={backThirty} className="forwardBackward backward left-[120px] top-[47px]">
           <Icon name="arrow" className="back rotate-180" />
           30
         </button>
 
         {/* forward thirty */}
-        <button
-          type="button"
-          onClick={forwardThirty}
-          className="forwardBackward forward right-0 top-[47px]"
-        >
+        <button type="button" onClick={forwardThirty} className="forwardBackward forward right-0 top-[47px]">
           30
           <Icon name="arrow" />
         </button>

remix/app/components/EpisodeGrid/Episode.tsx

@@ -1,7 +1,7 @@
-import { Link } from "@remix-run/react";
-import { EpisodeZeros } from "../EpisodeZeros";
-import { formatLongDate } from "~/lib/dateHelpers";
-import { MoreLink } from "../MoreLink";
+import { Link } from '@remix-run/react';
+import { EpisodeZeros } from '../EpisodeZeros';
+import { formatLongDate } from '~/lib/dateHelpers';
+import { MoreLink } from '../MoreLink';
 
 interface EpisodeProps {
   className?: string;
@@ -19,7 +19,7 @@ const Episode = ({ className, episode }: EpisodeProps) => {
           Episode
         </span>
         <span className="text-yellow text-[132px] font-black leading-none flex items-center">
-          {EpisodeZeros(episodeNumber)}
+          {EpisodeZeros(episodeNumber.toString())}
           {episodeNumber}
         </span>
       </div>

remix/app/components/EpisodeGrid/EpisodeGrid.tsx

@@ -1,4 +1,4 @@
-import { Episode } from "./Episode";
+import { Episode as EpisodeComponent } from './Episode';
 
 interface EpisodeGridProps {
   header: string;
@@ -9,7 +9,7 @@ const EpisodeGrid = ({ header, episodes }: EpisodeGridProps) => {
   return (
     <div
       className={`episode-grid grid grid-cols-1 md:grid-cols-2 regular:grid-cols-3 gap-y-14 my-[60px] mx-auto max-w-pageWidth ${
-        header ? "w-section-header" : "no-section-header"
+        header ? 'w-section-header' : 'no-section-header'
       }`}
     >
       {header && (
@@ -19,7 +19,11 @@ const EpisodeGrid = ({ header, episodes }: EpisodeGridProps) => {
       )}
       {episodes &&
         episodes.map((item) => (
-          <Episode className="episode-card" key={item._id} episode={item} />
+          <EpisodeComponent
+            className="episode-card"
+            key={item._id}
+            episode={item}
+          />
         ))}
     </div>
   );

remix/app/globals.d.ts

@@ -3,13 +3,23 @@ interface Episode {
   audioPath: string;
   guest: Guest[];
   publishedAt: string;
-  episodeNumber: string;
+  episodeNumber: number;
+  episodeCover: {
+    asset: {
+      url: string;
+    };
+  };
   slug: {
-    current: string
-  }
+    current: string;
+  };
   title: string;
   briefDescription: string;
   cover: string;
+  relatedEpisodes: Episode[];
+  //todo: fix anys
+  timeJump?: TimeJump[];
+  listLink?: ListLink[];
+  sponsor?: Sponsor[];
 }
 
 interface Faq {
@@ -83,4 +93,4 @@ interface TimeJump {
   _key: string;
   time: string;
   description: string;
-}
+}

remix/app/root.tsx

@@ -1,29 +1,40 @@
-import { cssBundleHref } from "@remix-run/css-bundle";
-import type { LinksFunction } from "@remix-run/node";
-import {
-  Links,
-  LiveReload,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-  useLoaderData,
-} from "@remix-run/react";
-import stylesheet from "~/tailwind.css";
-import { LiveNow } from "./components/LiveNow";
-import { getClient } from "./lib/sanity";
-import { CurrentlyRecordingQuery } from "./queries/Queries";
+import { cssBundleHref } from '@remix-run/css-bundle';
+import type { LinksFunction, V2_MetaFunction } from '@remix-run/node';
+import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from '@remix-run/react';
+import stylesheet from '~/tailwind.css';
+import { LiveNow } from './components/LiveNow';
+import { getClient } from './lib/sanity';
+import { CurrentlyRecordingQuery } from './queries/Queries';
 
 export const links: LinksFunction = () => [
-  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
-  { rel: "stylesheet", href: stylesheet },
+  ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
+  { rel: 'stylesheet', href: stylesheet },
 ];
 
 export const loader = async () => {
   const data = await getClient().fetch(CurrentlyRecordingQuery);
   return { data };
 };
 
+export const meta: V2_MetaFunction = () => {
+  return [
+    { title: 'Compressed.fm' },
+    {
+      name: 'description',
+      content:
+        'A weekly podcast, hosted by Amy Dutton and James Q Quick, all about web design and development with a little bit of zest.',
+    },
+    {
+      name: 'og:image',
+      content: '/images/podcast-cover.jpg',
+    },
+    {
+      name: 'og:image:alt',
+      content: 'Compressed.fm Podcast Cover',
+    },
+  ];
+};
+
 export default function App() {
   const { data } = useLoaderData();
   const { currentlyRecording, recordingOnYouTube, recordingOnTwitch } = data;
@@ -37,9 +48,7 @@ export default function App() {
         <Links />
       </head>
       <body>
-        {currentlyRecording ? (
-          <LiveNow youtube={recordingOnYouTube} twitch={recordingOnTwitch} />
-        ) : null}
+        {currentlyRecording ? <LiveNow youtube={recordingOnYouTube} twitch={recordingOnTwitch} /> : null}
         <Outlet />
         <ScrollRestoration />
         <Scripts />

remix/app/routes/_index/route.tsx

@@ -1,31 +1,19 @@
-import { useLoaderData } from "@remix-run/react";
-import type { V2_MetaFunction } from "@remix-run/node";
-import { getClient } from "~/lib/sanity";
+import { useLoaderData } from '@remix-run/react';
+import { getClient } from '~/lib/sanity';
 import {
   HostDetailsQuery,
   LegalQuery,
   RecentEpisodesQuery,
   TagsQuery,
-} from "~/queries/Queries";
-import { HeaderHome } from "./HeaderHome";
-import { Footer } from "~/components/Footer";
-import { Podcatchers } from "~/components/Podcatchers";
-import { VerticalDivider } from "~/components/VerticalDivider";
-import { FeaturedEpisode } from "~/components/FeaturedEpisode";
-import { TheHosts } from "./TheHosts";
-import { EpisodeGrid } from "~/components/EpisodeGrid/EpisodeGrid";
-import { Newsletter } from "~/components/Newsletter";
-
-export const meta: V2_MetaFunction = () => {
-  return [
-    { title: "Compressed.fm" },
-    {
-      name: "description",
-      content:
-        "A weekly podcast, hosted by Amy Dutton and James Q Quick, all about web design and development with a little bit of zest.",
-    },
-  ];
-};
+} from '~/queries/Queries';
+import { HeaderHome } from './HeaderHome';
+import { Footer } from '~/components/Footer';
+import { Podcatchers } from '~/components/Podcatchers';
+import { VerticalDivider } from '~/components/VerticalDivider';
+import { FeaturedEpisode } from '~/components/FeaturedEpisode';
+import { TheHosts } from './TheHosts';
+import { EpisodeGrid } from '~/components/EpisodeGrid/EpisodeGrid';
+import { Newsletter } from '~/components/Newsletter';
 
 export const loader = async () => {
   const episodes = await getClient().fetch(RecentEpisodesQuery);

remix/app/routes/_interior.episode.$slug/EpisodeSummary.tsx

@@ -1,5 +1,5 @@
-import { EpisodeZeros } from "~/components/EpisodeZeros";
-import { formatLongDate } from "~/lib/dateHelpers";
+import { EpisodeZeros } from '~/components/EpisodeZeros';
+import { formatLongDate } from '~/lib/dateHelpers';
 
 interface EpisodeSummaryProps {
   briefDescription: string;

remix/app/routes/_interior.episode.$slug/JumpLinks.tsx

@@ -1,15 +1,18 @@
-import { calculateTime } from "~/lib/timeHelpers";
+import { calculateTime } from '~/lib/timeHelpers';
 
 interface JumpLinksProps {
   className: string;
   timeJump: TimeJump[];
-  handleClick: (time: string) => void;
+  handleClick: (time: number) => void;
 }
 
 const JumpLinks = ({ className, timeJump, handleClick }: JumpLinksProps) => {
-  const onClick = (e: React.MouseEvent<HTMLButtonElement>, time: string) => {
+  const onClick = (e: React.MouseEvent<HTMLButtonElement>, timeStr: string) => {
     e.preventDefault();
-    handleClick(time);
+    const time = Number(timeStr);
+    if (!isNaN(time)) {
+      handleClick(time);
+    }
   };
 
   return (