Followup navigation fixes + Song marquee!

src/components/LoginButton.tsx

@@ -82,9 +82,9 @@ export const LoginButton = observer(function LoginButton() {
                       width="100%"
                       onClick={action(() => {
                         userStore.me = user;
-                        experienceStore.openEmptyExperience(router);
                         if (store.context === "experienceEditor") {
                           uiStore.showingOpenExperienceModal = true;
+                          experienceStore.openEmptyExperience(router);
                         }
                         onClose();
                       })}
@@ -112,7 +112,9 @@ export const LoginButton = observer(function LoginButton() {
                     username: newUsername,
                   });
                   userStore.me = newUser;
-                  experienceStore.openEmptyExperience(router);
+                  if (store.context === "experienceEditor") {
+                    experienceStore.openEmptyExperience(router);
+                  }
                   onClose();
                 })}
               >

src/components/Menu/MenuBar.tsx

@@ -107,6 +107,11 @@ export const MenuBar = observer(function MenuBar() {
         >
           {store.experienceName}
         </Heading>
+        {store.experienceUser && (
+          <Text ml={2} fontSize="sm" userSelect="none">
+            by {store.experienceUser.username}
+          </Text>
+        )}
         {store.context === "experienceEditor" &&
           !store.hasSaved &&
           !store.experienceId && (
@@ -193,6 +198,7 @@ export const MenuBar = observer(function MenuBar() {
                       icon={<FiSave size={17} />}
                       command="⌘S"
                       onClick={() => saveExperience()}
+                      isDisabled={!store.canEditExperience}
                     >
                       Save
                     </MenuItem>

src/components/PlaylistEditor/PlaylistEditor.tsx

@@ -22,7 +22,7 @@ import { BiShuffle } from "react-icons/bi";
 import { ImLoop } from "react-icons/im";
 import { trpc } from "@/src/utils/trpc";
 import { PlaylistNameEditable } from "@/src/components/PlaylistEditor/PlaylistNameEditable";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { FaPlus } from "react-icons/fa";
 import { useRouter } from "next/router";
 
@@ -48,16 +48,17 @@ export const PlaylistEditor = observer(function PlaylistEditor() {
   );
 
   useEffect(() => {
-    runInAction(() => {
-      // this is very hacky and I hate it but it works
-      if (data?.playlist) playlistStore.selectedPlaylist = data.playlist;
-    });
+    // Once the playlist is fetched, set it as the selected playlist
+    if (data?.playlist)
+      runInAction(() => (playlistStore.selectedPlaylist = data.playlist));
   }, [playlistStore, data?.playlist]);
 
+  const selectedInitialExperience = useRef(false);
   useEffect(() => {
-    if (!data?.playlistExperiences.length) return;
-    if (store.experienceName && store.experienceName !== "untitled") return;
-    // once experiences are fetched, load the first experience in the playlist
+    if (!data?.playlistExperiences.length || selectedInitialExperience.current)
+      return;
+    selectedInitialExperience.current = true;
+    // Once the experiences are fetched and if we have not done so already, select the first experience
     experienceStore.load(data.playlistExperiences[0].name);
   }, [store.experienceName, experienceStore, data?.playlistExperiences]);
 

src/components/PlaylistEditor/PlaylistEditorPage.tsx

@@ -20,7 +20,7 @@ export const PlaylistEditorPage = observer(function PlaylistEditorPage() {
   }, [store, store.initializationState]);
 
   return (
-    <Box position="relative" w="100vw" h="100vh">
+    <Box key={userStore.username} position="relative" w="100vw" h="100vh">
       <PanelGroup
         key={userStore.username}
         autoSaveId="playlistEditor-1"

src/components/PlaylistEditor/PlaylistLibrary.tsx

@@ -12,7 +12,7 @@ import { FaPlus } from "react-icons/fa";
 import { runInAction } from "mobx";
 import { trpc } from "@/src/utils/trpc";
 import { SelectablePlaylist } from "@/src/components/PlaylistEditor/SelectablePlaylist";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 export const PlaylistLibrary = observer(function PlaylistLibrary() {
   const store = useStore();
@@ -27,7 +27,7 @@ export const PlaylistLibrary = observer(function PlaylistLibrary() {
   const createPlaylist = trpc.playlist.savePlaylist.useMutation();
 
   const {
-    isFetching,
+    isPending,
     isError,
     data: playlists,
   } = trpc.playlist.listPlaylists.useQuery(
@@ -42,12 +42,12 @@ export const PlaylistLibrary = observer(function PlaylistLibrary() {
     },
   );
 
+  const selectedInitialPlaylist = useRef(false);
   useEffect(() => {
-    if (!playlists || playlists.length === 0 || playlistStore.selectedPlaylist)
-      return;
-    runInAction(() => {
-      playlistStore.selectedPlaylist = playlists[0];
-    });
+    if (!playlists?.length || selectedInitialPlaylist.current) return;
+    selectedInitialPlaylist.current = true;
+    // Once the playlists are fetched and if we have not done so already, select the first playlist
+    runInAction(() => (playlistStore.selectedPlaylist = playlists[0]));
   }, [playlists, playlistStore]);
 
   if (isError) return null;
@@ -104,7 +104,7 @@ export const PlaylistLibrary = observer(function PlaylistLibrary() {
         All playlists
       </Switch>
       <VStack width="100%" spacing={0}>
-        {isFetching ? (
+        {isPending ? (
           <Spinner />
         ) : (
           playlists?.map((playlist) => (

src/components/Timeline/SongMarquee.tsx

@@ -0,0 +1,26 @@
+import { observer } from "mobx-react-lite";
+import { Box } from "@chakra-ui/react";
+import { useStore } from "@/src/types/StoreContext";
+import styles from "@/styles/SongMarquee.module.css";
+
+export const SongMarquee = observer(function SongMarquee() {
+  const { audioStore } = useStore();
+  const { selectedSong } = audioStore;
+
+  return (
+    <Box position="relative" width="150px" height={5}>
+      <Box
+        position="absolute"
+        boxSizing="border-box"
+        left={0}
+        top={0}
+        className={styles.marquee}
+        fontSize="sm"
+        whiteSpace="nowrap"
+      >
+        {selectedSong.artist} - {selectedSong.name} . . . .{" "}
+        {selectedSong.artist} - {selectedSong.name} . . . .
+      </Box>
+    </Box>
+  );
+});

src/components/Timeline/TimerAndWaveform.tsx

@@ -5,6 +5,7 @@ import { LazyWavesurferWaveform } from "@/src/components/Wavesurfer/LazyWavesurf
 import { MAX_TIME } from "@/src/utils/time";
 import { TimerReadout } from "@/src/components/Timeline/TimerReadout";
 import { TimerControls } from "@/src/components/Timeline/TimerControls";
+import { SongMarquee } from "@/src/components/Timeline/SongMarquee";
 
 export const TimerAndWaveform = observer(function TimerAndWaveform() {
   const store = useStore();
@@ -36,7 +37,9 @@ export const TimerAndWaveform = observer(function TimerAndWaveform() {
         height="80px"
         zIndex={18}
         bgColor="gray.500"
+        overflow="hidden"
       >
+        {store.context === "playlistEditor" && <SongMarquee />}
         <TimerReadout />
         <TimerControls />
       </VStack>

src/components/Timeline/TimerControls.tsx

@@ -9,6 +9,7 @@ export const TimerControls = observer(function TimerControls() {
   const store = useStore();
   const { audioStore, playlistStore } = store;
   const playing = audioStore.audioState === "playing";
+  const showSkipButtons = store.context === "experienceEditor";
 
   return (
     <VStack pb={1} spacing={0}>
@@ -59,30 +60,32 @@ export const TimerControls = observer(function TimerControls() {
           />
         </ButtonGroup>
       </HStack>
-      <HStack width="100%" justify="center" overflowX="clip">
-        <ButtonGroup isAttached>
-          <IconButton
-            borderStyle="solid"
-            borderWidth={1}
-            aria-label="Go back 10 seconds "
-            title="Go back 10 seconds "
-            height={6}
-            bgColor="gray.600"
-            icon={<MdReplay10 size={17} />}
-            onClick={action(() => audioStore.skip(-10))}
-          />
-          <IconButton
-            borderStyle="solid"
-            borderWidth={1}
-            aria-label="Go forward 10 seconds"
-            title="Go forward 10 seconds"
-            height={6}
-            bgColor="gray.600"
-            icon={<MdForward10 size={17} />}
-            onClick={action(() => audioStore.skip(10))}
-          />
-        </ButtonGroup>
-      </HStack>
+      {showSkipButtons && (
+        <HStack width="100%" justify="center" overflowX="clip">
+          <ButtonGroup isAttached>
+            <IconButton
+              borderStyle="solid"
+              borderWidth={1}
+              aria-label="Go back 10 seconds "
+              title="Go back 10 seconds "
+              height={6}
+              bgColor="gray.600"
+              icon={<MdReplay10 size={17} />}
+              onClick={action(() => audioStore.skip(-10))}
+            />
+            <IconButton
+              borderStyle="solid"
+              borderWidth={1}
+              aria-label="Go forward 10 seconds"
+              title="Go forward 10 seconds"
+              height={6}
+              bgColor="gray.600"
+              icon={<MdForward10 size={17} />}
+              onClick={action(() => audioStore.skip(10))}
+            />
+          </ButtonGroup>
+        </HStack>
+      )}
     </VStack>
   );
 });

src/types/ExperienceStore.ts

@@ -18,12 +18,12 @@ export class ExperienceStore {
     makeAutoObservable(this);
   }
 
-  // Open an experience by experience name
+  // Open an experience in the experience editor by experience name
   openExperience = (router: NextRouter, experienceName: string) => {
     router.push(`/experience/${experienceName}`);
   };
 
-  // Open an empty experience
+  // Open an empty experience in the experience editor
   openEmptyExperience = (router: NextRouter) => {
     router.push("/experience/untitled");
   };

src/types/PlaylistStore.ts

@@ -56,9 +56,9 @@ export class PlaylistStore {
     }
 
     await this.store.experienceStore.loadById(experienceId);
-    runInAction(() => {
-      this.store.audioStore.audioState = "playing";
-    });
+
+    this.store.audioStore.setTimeWithCursor(0);
+    this.store.play();
   };
 
   playPreviousExperience = async () => {

styles/SongMarquee.module.css

@@ -0,0 +1,12 @@
+.marquee {
+  animation: advance 8s linear infinite;
+}
+
+@keyframes advance {
+  from {
+    transform: translateX(0px);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}