Remove domain segment

www/app/(app)/transcripts/[transcriptId]/page.tsx

@@ -0,0 +1,147 @@
+"use client";
+import Modal from "../modal";
+import useTranscript from "../useTranscript";
+import useTopics from "../useTopics";
+import useWaveform from "../useWaveform";
+import useMp3 from "../useMp3";
+import { TopicList } from "../topicList";
+import { Topic } from "../webSocketTypes";
+import React, { useEffect, useState } from "react";
+import "../../../styles/button.css";
+import FinalSummary from "./finalSummary";
+import TranscriptTitle from "../transcriptTitle";
+import Player from "../player";
+import { useRouter } from "next/navigation";
+import { Flex, Grid, GridItem, Skeleton, Text } from "@chakra-ui/react";
+
+type TranscriptDetails = {
+  params: {
+    transcriptId: string;
+  };
+};
+
+export default function TranscriptDetails(details: TranscriptDetails) {
+  const transcriptId = details.params.transcriptId;
+  const router = useRouter();
+  const statusToRedirect = ["idle", "recording", "processing"];
+
+  const transcript = useTranscript(transcriptId);
+  const transcriptStatus = transcript.response?.status;
+  const waiting = statusToRedirect.includes(transcriptStatus || "");
+
+  const topics = useTopics(transcriptId);
+  const waveform = useWaveform(transcriptId, waiting);
+  const useActiveTopic = useState<Topic | null>(null);
+  const mp3 = useMp3(transcriptId, waiting);
+
+  useEffect(() => {
+    if (waiting) {
+      const newUrl = "/transcripts/" + details.params.transcriptId + "/record";
+      // Shallow redirection does not work on NextJS 13
+      // https://github.com/vercel/next.js/discussions/48110
+      // https://github.com/vercel/next.js/discussions/49540
+      router.replace(newUrl);
+      // history.replaceState({}, "", newUrl);
+    }
+  }, [waiting]);
+
+  if (transcript.error || topics?.error) {
+    return (
+      <Modal
+        title="Transcription Not Found"
+        text="A trascription with this ID does not exist."
+      />
+    );
+  }
+
+  if (transcript?.loading || topics?.loading) {
+    return <Modal title="Loading" text={"Loading transcript..."} />;
+  }
+
+  return (
+    <>
+      <Grid
+        templateColumns="1fr"
+        templateRows="auto minmax(0, 1fr)"
+        gap={4}
+        mt={4}
+        mb={4}
+      >
+        {waveform.waveform && mp3.media && topics.topics ? (
+          <Player
+            topics={topics?.topics}
+            useActiveTopic={useActiveTopic}
+            waveform={waveform.waveform}
+            media={mp3.media}
+            mediaDuration={transcript.response.duration}
+          />
+        ) : waveform.error ? (
+          <div>"error loading this recording"</div>
+        ) : (
+          <Skeleton h={14} />
+        )}
+        <Grid
+          templateColumns={{ base: "minmax(0, 1fr)", md: "repeat(2, 1fr)" }}
+          templateRows={{
+            base: "auto minmax(0, 1fr) minmax(0, 1fr)",
+            md: "auto minmax(0, 1fr)",
+          }}
+          gap={2}
+          padding={4}
+          paddingBottom={0}
+          background="gray.bg"
+          border={"2px solid"}
+          borderColor={"gray.bg"}
+          borderRadius={8}
+        >
+          <GridItem
+            display="flex"
+            flexDir="row"
+            alignItems={"center"}
+            colSpan={{ base: 1, md: 2 }}
+          >
+            <TranscriptTitle
+              title={transcript.response.title || "Unnamed Transcript"}
+              transcriptId={transcriptId}
+              onUpdate={(newTitle) => {
+                transcript.reload();
+              }}
+            />
+          </GridItem>
+          <TopicList
+            topics={topics.topics || []}
+            useActiveTopic={useActiveTopic}
+            autoscroll={false}
+            transcriptId={transcriptId}
+            status={transcript.response?.status}
+            currentTranscriptText=""
+          />
+          {transcript.response && topics.topics ? (
+            <>
+              <FinalSummary
+                transcriptResponse={transcript.response}
+                topicsResponse={topics.topics}
+                onUpdate={(newSummary) => {
+                  transcript.reload();
+                }}
+              />
+            </>
+          ) : (
+            <Flex justify={"center"} alignItems={"center"} h={"100%"}>
+              <div className="flex flex-col h-full justify-center content-center">
+                {transcript.response.status == "processing" ? (
+                  <Text>Loading Transcript</Text>
+                ) : (
+                  <Text>
+                    There was an error generating the final summary, please come
+                    back later
+                  </Text>
+                )}
+              </div>
+            </Flex>
+          )}
+        </Grid>
+      </Grid>
+    </>
+  );
+}