feat: Adding Audio to Essays

apps/somai.me/app/essay/[slug]/audio.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { DotsThree, PauseCircle, PlayCircle } from "@phosphor-icons/react";
+import React, { useEffect, useRef } from "react";
+import { useAudioPlayer } from "react-use-audio-player";
+
+import { Button, Stack, Text, Box, Progress } from "@thugga/ui";
+
+// Enum Statuses for the audio player
+enum AudioPlayerStatus {
+  Loading = "Loading",
+  Pause = "Pause",
+  Play = "Play",
+}
+
+function PlayIcon({ status }: { status: AudioPlayerStatus }) {
+  switch (status) {
+    case AudioPlayerStatus.Loading:
+      return <DotsThree size={25} />;
+    case AudioPlayerStatus.Pause:
+      return <PauseCircle size={25} />;
+    case AudioPlayerStatus.Play:
+      return <PlayCircle size={25} />;
+  }
+}
+
+export default function AudioPlayer({ audio }: { audio: string }) {
+  const { load, play, pause, playing, isReady, duration, getPosition } =
+    useAudioPlayer();
+  const [pos, setPos] = React.useState(0);
+  const [status, setStatus] = React.useState<AudioPlayerStatus>(
+    AudioPlayerStatus.Loading,
+  );
+
+  const frameRef = useRef<number>();
+
+  useEffect(() => {
+    const animate = () => {
+      setPos(getPosition());
+      frameRef.current = requestAnimationFrame(animate);
+    };
+
+    frameRef.current = window.requestAnimationFrame(animate);
+
+    return () => {
+      if (frameRef.current) {
+        cancelAnimationFrame(frameRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    load(audio, {
+      autoplay: false,
+      format: "mp3",
+    });
+  }, [audio, load]);
+
+  useEffect(() => {
+    if (!isReady) {
+      setStatus(AudioPlayerStatus.Loading);
+    } else if (playing) {
+      setStatus(AudioPlayerStatus.Pause);
+    } else {
+      setStatus(AudioPlayerStatus.Play);
+    }
+  }, [isReady, playing]);
+
+  const handlePlay = () => {
+    if (!isReady) {
+      return;
+    }
+
+    if (!playing) {
+      play();
+    } else {
+      pause();
+    }
+  };
+
+  return (
+    <Box
+      backgroundColor="slate4"
+      width={{
+        desktop: "9600",
+        tablet: "9600",
+        mobile: "full",
+      }}
+      paddingLeft="300"
+      paddingRight="600"
+      borderRadius="full"
+      minHeight="1000"
+      alignItems="center"
+    >
+      <Stack justify="flex-start" align="center" direction="row" space="100">
+        {status !== AudioPlayerStatus.Loading && (
+          <>
+            <Button onClick={handlePlay} variant="simple" size="small">
+              <PlayIcon status={status} />
+            </Button>
+            <Text variant="small" as="span">
+              {new Date(pos * 1000).toISOString().substring(14, 19)}
+            </Text>
+            <Text> / </Text>
+            <Text variant="small" color="slate10" as="span">
+              {new Date(duration * 1000).toISOString().substring(14, 19)}
+            </Text>
+            <Progress progress={(pos / duration) * 100} />
+          </>
+        )}
+      </Stack>
+    </Box>
+  );
+}

apps/somai.me/app/essay/[slug]/page.tsx

@@ -3,11 +3,12 @@ import type { Metadata } from "next";
 import React from "react";
 
 import { config, components } from "@thugga/markdoc";
-import { Stack } from "@thugga/ui";
+import { Stack, Box } from "@thugga/ui";
 
 import { getAllPosts, getPostBySlug } from "@/lib/essays";
 import { Seo } from "@/lib/seo";
 
+import AudioPlayer from "./audio";
 import DetailsSection from "./section.details";
 import Excerpt from "./section.excerpt";
 import Title from "./section.title";
@@ -25,9 +26,10 @@ export default function EssayPage({ params }: Props) {
   const rendered = Markdoc.renderers.react(content, React, { components });
 
   return (
-    <Stack space="800">
+    <Stack space="800" align="flex-start">
       <Title post={post} />
       <DetailsSection post={post} />
+      {post.meta.audio && <AudioPlayer audio={post.meta.audio} />}
       <Excerpt post={post} />
       <Stack>{rendered}</Stack>
     </Stack>

apps/somai.me/content/posts/digital_health.md

@@ -2,6 +2,7 @@
 title: Digital Healthcare Innovation
 subtitle: Challenges and Lessons for Digital Health Startups
 featured: true
+audio: /audio/essays/digital_health.mp3
 image: /images/posts/universal_healthcare/hero.png
 authors:
   - melek-somai

apps/somai.me/lib/essays.ts

@@ -15,6 +15,7 @@ export type Post = {
   content: string;
   meta: {
     [key: string]: any;
+    audio?: string | undefined;
     excerpt: string;
     image: string;
     publishedAt: {

apps/somai.me/package.json

@@ -29,6 +29,7 @@
     "react": "18.3.0",
     "react-dom": "18.3.0",
     "react-icons": "5.3.0",
+    "react-use-audio-player": "2.2.0",
     "reading-time": "1.5.0",
     "swr": "2.2.5"
   },

packages/ui/package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-avatar": "1.0.2",
     "@radix-ui/react-dialog": "1.0.4",
     "@radix-ui/react-popover": "1.0.5",
+    "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-scroll-area": "1.0.3",
     "@radix-ui/react-select": "1.2.1",
     "@radix-ui/react-separator": "1.0.2",

packages/ui/src/components/Box/Box.tsx

@@ -13,7 +13,7 @@ export interface BoxProps extends Omit<Atoms, "reset"> {
 export const Box = forwardRef<HTMLElement, BoxProps>(
   (
     { as: Component = "div", asChild = false, width = "full", ...other },
-    ref
+    ref,
   ) => {
     const [atomsProps, propsToForward] = extractAtoms(other);
     const className = atoms({
@@ -26,7 +26,7 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
     const Comp = asChild ? Slot : Component;
 
     return <Comp {...propsToForward} className={className} ref={ref} />;
-  }
+  },
 );
 
 Box.displayName = "Box";

packages/ui/src/components/Button/Button.tsx

@@ -59,7 +59,7 @@ export const Button = React.forwardRef(
       minWidth,
       ...boxProps
     }: ButtonProps,
-    ref: React.Ref<HTMLButtonElement>
+    ref: React.Ref<HTMLButtonElement>,
   ) => {
     // if (shape) {
     //   childContent = loading ? <Spinner color="current" /> : labelContent;
@@ -104,7 +104,7 @@ export const Button = React.forwardRef(
         {childContent}
       </Box>
     );
-  }
+  },
 );
 
 Button.displayName = "Button";

packages/ui/src/components/Progress/Progress.css.ts

@@ -0,0 +1,49 @@
+import { style } from "@vanilla-extract/css";
+import { RecipeVariants, recipe } from "@vanilla-extract/recipes";
+
+import { atoms } from "../../atoms";
+
+const size = {};
+
+export type Size = keyof typeof size;
+
+export const rootVariants = recipe({
+  base: [
+    atoms({
+      position: "relative",
+      width: "full",
+      overflow: "hidden",
+      borderRadius: "full",
+      backgroundColor: "slate7",
+      height: "300",
+      marginLeft: "100",
+    }),
+    style({
+      transform: "translateZ(0)",
+    }),
+  ],
+  variants: {
+    size,
+  },
+});
+
+export type RootVariants = RecipeVariants<typeof rootVariants>;
+
+export const indicatorVariants = recipe({
+  base: [
+    atoms({
+      // position: "absolute",
+      // top: 0,
+      // left: 0,
+      // bottom: 0,
+      backgroundColor: "slate10",
+      width: "full",
+      height: "full",
+    }),
+  ],
+  variants: {
+    size,
+  },
+});
+
+export type IndicatorVariants = RecipeVariants<typeof indicatorVariants>;

packages/ui/src/components/Progress/Progress.tsx

@@ -0,0 +1,28 @@
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as React from "react";
+
+import * as styles from "./Progress.css";
+
+export type ProgressProps = {
+  id?: string;
+  progress: number;
+  size?: styles.Size;
+} & styles.RootVariants;
+
+export const Progress = ({ id, progress = 0 }: ProgressProps) => {
+  return (
+    <ProgressPrimitive.Root
+      id={id}
+      className={styles.rootVariants({
+        // size,
+      })}
+    >
+      <ProgressPrimitive.Indicator
+        className={styles.indicatorVariants({
+          // size,
+        })}
+        style={{ transform: `translateX(-${100 - progress}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  );
+};

packages/ui/src/components/Progress/index.ts

@@ -0,0 +1,2 @@
+export { Progress } from "./Progress";
+export type { ProgressProps } from "./Progress";

packages/ui/src/components/index.ts

@@ -4,14 +4,15 @@ export * from "./Box";
 export * from "./Breadcrumbs";
 export * from "./Button";
 export * from "./Callout";
-export * from "./Code";
 export * from "./CmdK";
+export * from "./Code";
 export * from "./Dialog";
 export * from "./Grid";
 export * from "./Heading";
 export * from "./Image";
 export * from "./Link";
 export * from "./Logo";
+export * from "./Progress";
 export * from "./ScrollArea";
 export * from "./Stack";
 export * from "./Table";