Show recordings

src/components/Recordings.tsx

@@ -0,0 +1,78 @@
+import { useRecordings } from "../hooks/recordings";
+import { Recording } from "../recordings-store";
+import { formatDuration, formatRelativeDay } from "../recordings-utils";
+
+import DownloadImage from "../images/download.svg";
+import MediaPlayerImage from "../images/media_player.svg";
+import { Section } from "./Section";
+import { Text } from "./Text";
+import { css } from "@emotion/react";
+
+const RecordingDisplay: React.FC<{ recording: Recording }> = ({
+  recording: r,
+}) => {
+  const recordingDate = new Date(r.createdAt * 1000);
+
+  return (
+    <a href={r.url} css={{ textDecoration: "none", color: "inherit" }}>
+      <div
+        css={{
+          display: "flex",
+          justifyContent: "space-between",
+          background: "rgba(255, 255, 255, 0.08)",
+          borderRadius: "24px",
+          margin: "21px auto 0",
+          padding: "16px 27px",
+          maxWidth: "377px",
+        }}
+      >
+        <div>
+          <Text variant="body">
+            <strong>{formatRelativeDay(recordingDate)}</strong>
+            {", "}
+            {recordingDate.toLocaleTimeString()}
+            {", "}
+            {formatDuration(r.expiresAt - r.ttl - r.createdAt)}
+          </Text>
+        </div>
+        <div>
+          <img src={DownloadImage} height="16" width="18" alt="download" />
+        </div>
+      </div>
+    </a>
+  );
+};
+
+export const Recordings: React.FC = () => {
+  const recordings = useRecordings();
+
+  console.log({ recordings });
+  if (recordings.length === 0) {
+    return null;
+  }
+
+  return (
+    <Section css={{ padding: "16px 16px 36px" }}>
+      <p
+        css={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: 16,
+        }}
+      >
+        <img src={MediaPlayerImage} alt="" />
+        <Text variant="secondary-section-head">Your recorded calls</Text>
+      </p>
+      <p css={{ margin: "8px auto 22px", maxWidth: "300px" }}>
+        <Text variant="body">
+          Recorded calls are automatically cleared 24 hours after their
+          recording time
+        </Text>
+      </p>
+      {recordings.map((r, idx) => (
+        <RecordingDisplay key={idx} recording={r} />
+      ))}
+    </Section>
+  );
+};

src/components/Text.tsx

@@ -15,6 +15,13 @@ const styles = {
     textAlign: "center",
     letterSpacing: "0.04em",
   }),
+  "secondary-section-head": css({
+    fontWeight: 600,
+    fontSize: "22px",
+    lineHeight: "26px",
+    textAlign: "center",
+    letterSpacing: "0.01em",
+  }),
   body: css({
     fontWeight: "normal",
     fontSize: "14px",
@@ -28,12 +35,6 @@ const styles = {
     letterSpacing: "0.01em",
     color: "#ffffff",
   }),
-  myaccount: css({
-    fontSize: "14px",
-    fontWeight: 600,
-    lineHeight: "20px",
-    fontStyle: "normal",
-  }),
 };
 
 interface Props {

src/components/WelcomeScreen.tsx

@@ -8,6 +8,7 @@ import { JoinCallSection } from "./JoinCallSection";
 import { SubscriptionCTA } from "./SubscriptionCTA";
 import { DownloadBrave } from "./DownloadBrave";
 import React from "react";
+import { Recordings } from "./Recordings";
 
 interface Props {
   onStartCall: DispatchWithoutAction;
@@ -44,8 +45,8 @@ export const WelcomeScreen: React.FC<Props> = ({
               disabled={disabled}
               hideButtons={hasInitialRoomName}
             />
-            {/* TODO */}
-            <div className="section recordings" id="recordings"></div>
+
+            <Recordings />
 
             {!hasInitialRoomName && <SubscriptionCTA subscribed={subscribed} />}
           </React.Fragment>

src/hooks/recordings.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+import { availableRecordings, Recording } from "../recordings-store";
+
+const AUTO_REFRESH_INTERVAL_MS = 5 * 60 * 1000;
+
+export function useRecordings(): Readonly<Recording[]> {
+  const [recordings, setRecordings] = useState(availableRecordings());
+
+  // and automatically re-read those recordings on a schedule, so expired
+  // ones disappear and new ones created in other windows appear
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setRecordings(availableRecordings());
+    }, AUTO_REFRESH_INTERVAL_MS);
+
+    // the return value from an effect is a function that is called when this hook
+    // is no longer in scope
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  return recordings;
+}