Fix Authenticating Multiple Times + Make Responsive on Mobile

Dockerfile

@@ -31,7 +31,7 @@ FROM rust:1.81 AS backend-builder
 WORKDIR /usr/src
 
 RUN apt-get update && apt-get install -y --no-install-recommends \
-    sqlite3 libsqlite3-dev wget make build-essential pkg-config libssl-dev \
+    sqlite3 libsqlite3-dev wget make build-essential pkg-config libssl-dev ffmpeg \
     && rm -rf /var/lib/apt/lists/*
 
 RUN wget https://www.nasm.us/pub/nasm/releasebuilds/2.16/nasm-2.16.tar.gz \
@@ -67,23 +67,16 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
     libsqlite3-dev \
     wget \
     ca-certificates \
+    ffmpeg \
     && rm -rf /var/lib/apt/lists/*
 
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 --ingroup nodejs nextjs
+# Change ownership of the /app directory to the root user
+# RUN chown -R root:root /app
 
-# Change ownership of the /app directory to the nextjs user
-RUN chown -R nextjs:nodejs /app
-
-# Create and set permissions for the directories
-RUN mkdir -p /ParsonLabsMusic /music && \
-    chown -R nextjs:nodejs /ParsonLabsMusic /music && \
-    chmod -R 755 /ParsonLabsMusic /music
-
-USER nextjs
-COPY --from=backend-builder --chown=nextjs:nodejs /usr/src/crates/backend/target/release/music-server /usr/local/bin/music-server
-COPY --from=backend-builder --chown=nextjs:nodejs /usr/src/crates/backend/music.db /usr/src/crates/backend/music.db
-COPY --from=installer --chown=nextjs:nodejs /app/apps/web/out ./apps/web/out
+# Copy files as root
+COPY --from=backend-builder /usr/src/crates/backend/target/release/music-server /usr/local/bin/music-server
+COPY --from=backend-builder /usr/src/crates/backend/music.db /usr/src/crates/backend/music.db
+COPY --from=installer /app/apps/web/out ./apps/web/out
 
 ENV SSL_CERT_FILE=/etc/ssl/certs/ca-certificates.crt
 ENV RUNNING_IN_DOCKER=true

apps/web/app/(app)/album/AlbumComponent.tsx

@@ -87,7 +87,7 @@ export default function AlbumComponent() {
   );
 
   return (
-    <div className="flex h-full">
+    <div className="flex flex-col md:flex-row h-full">
       <Image
         className="bg-cover bg-center blur-3xl w-full h-full"
         src={albumCoverURL}
@@ -100,14 +100,14 @@ export default function AlbumComponent() {
           left: 0,
           width: "100%",
           height: "100%",
-          filter: "blur(24px) brightness(50%)",
+          filter: "blur(80px) brightness(60%)",
           objectFit: "cover",
           objectPosition: "center",
         }}
       />
       <div className="flex-1 h-full overflow-hidden relative">
         <PageGradient imageSrc={albumCoverURL} />
-        <div className="flex flex-row items-start my-8">
+        <div className="flex flex-col md:flex-row items-start my-8">
           <ScrollArea className="flex flex-col items-center w-full md:w-1/4 h-full">
             <div className="flex-shrink-0 w-72 h-72 mx-auto">
               <Image
@@ -121,8 +121,7 @@ export default function AlbumComponent() {
             <div className="md:pl-4 flex-grow text-center mt-4">
               <h1 className="text-4xl">{album.name}</h1>
               {album.release_group_album?.rating.value !== 0 && renderStars(album.release_group_album?.rating.value || 0)}
-
-              <div className="flex flex-row gap-2 justify-center items-center mt-4 pb-4">
+              <div className="flex flex-col gap-2 justify-center items-center mt-4 pb-4">
                 <Link href={`/artist?id=${artist.id}`} className="flex items-center">
                   <Image
                     src={artist.icon_url.length === 0 ? "/snf.png" : `${getBaseURL()}/image/${encodeURIComponent(artist.icon_url)}`}
@@ -140,13 +139,14 @@ export default function AlbumComponent() {
                     ))}
                   </p>
                 </Link>
-                <p className="text-xs text-gray-500">•</p>
-                <p className="text-xs text-gray-500">{releaseDate}</p>
-                <p className="text-xs text-gray-500">•</p>
-                <p className="text-xs text-gray-500">{album.songs.length} Songs</p>
-                <p className="text-xs text-gray-500">•</p>
-                <p className="text-xs text-gray-500">{formatDuration(totalDuration)}</p>
-            </div>
+                <div className="flex flex-row gap-2 justify-center items-center">
+                  <p className="text-xs text-gray-400">{releaseDate}</p>
+                  <p className="text-xs text-gray-400">•</p>
+                  <p className="text-xs text-gray-400">{album.songs.length} Songs</p>
+                  <p className="text-xs text-gray-400">•</p>
+                  <p className="text-xs text-gray-400">{formatDuration(totalDuration)}</p>
+                </div>
+              </div>
               <p>
                 {album.release_group_album?.genres.map((tag) => (
                   <Badge
@@ -209,13 +209,13 @@ export default function AlbumComponent() {
                               ? WikipediaLogo
                             : relationship.url.includes("allmusic")
                               ? AllmusicLogo
-                              : relationship.url.includes("rateyourmusic")
-                                ? RateyourmusicLogo
-                                : relationship.url.includes("pitchfork")
-                                  ? PitchforkLogo
-                                  : relationship.url.includes("bbc")
-                                    ? BBCLogo
-                                    : MusicbrainzLogo
+                            : relationship.url.includes("rateyourmusic")
+                              ? RateyourmusicLogo
+                              : relationship.url.includes("pitchfork")
+                                ? PitchforkLogo
+                                : relationship.url.includes("bbc")
+                                  ? BBCLogo
+                                  : MusicbrainzLogo
                       }
                       alt={
                         relationship.url.includes("discogs")
@@ -264,11 +264,11 @@ export default function AlbumComponent() {
                               ? AllmusicLogo
                             : relationship.url.includes("rateyourmusic")
                               ? RateyourmusicLogo
-                              : relationship.url.includes("pitchfork")
-                                ? PitchforkLogo
-                                : relationship.url.includes("bbc")
-                                  ? BBCLogo
-                                  : MusicbrainzLogo
+                            : relationship.url.includes("pitchfork")
+                              ? PitchforkLogo
+                            : relationship.url.includes("bbc")
+                              ? BBCLogo
+                            : MusicbrainzLogo
                       }
                       alt={
                         relationship.url.includes("discogs")

apps/web/app/(app)/home/page.tsx

@@ -1,104 +1,118 @@
-    "use client";
-
-    import FromYourLibrary from "@/components/Home/FromYourLibrary";
-    import LandingCarousel from "@/components/Home/LandingCarousel";
-    import ListenAgain from "@/components/Home/ListenAgain";
-    import MusicVideos from "@/components/Home/MusicVideos";
-    import RandomSongs from "@/components/Home/RandomSongs";
-    import RecommendedAlbums from "@/components/Home/RecommendedAlbums";
-    import SimilarTo from "@/components/Home/SimilarTo";
-    import CustomiseFeed from "@/components/Layout/CustomiseFeed";
-    import GenreButtons from "@/components/Layout/GenreButtons";
-    import { useGradientHover } from "@/components/Providers/GradientHoverProvider";
-    import { hasConfig } from "@music/sdk";
-    import { Button } from "@music/ui/components/button";
-    import Link from "next/link";
-    import { useEffect, useState } from "react";
-    import { useLayoutConfig } from "@/components/Providers/LayoutConfigContext";
-
-    export default function Home() {
-      const [configExists, setConfigExists] = useState(true);
-      const { components, setComponents } = useLayoutConfig();
-
-      const { setGradient } = useGradientHover();
-
-      useEffect(() => {
-        async function checkConfig() {
-          const config = await hasConfig();
-          if (config) {
-            setConfigExists(true);
-          } else {
-            setConfigExists(false);
-            setGradient("#FFFFFF");
-          }
-        }
-
-        checkConfig();
-      }, [setGradient]);
-
-      useEffect(() => {
-        const savedConfig = localStorage.getItem("layoutConfig");
-        if (savedConfig) {
-          setComponents(JSON.parse(savedConfig));
-        }
-      }, [setComponents]);
-
-      type ComponentConfig = {
-        id: string;
-        name: string;
-        visible: boolean;
-        pinned: boolean;
-      };
-
-      const renderComponent = (component: ComponentConfig): JSX.Element | null => {
-        if (!component.visible) return null;
-        switch (component.id) {
-          case "LandingCarousel":
-            return <LandingCarousel key={component.id} />;
-          case "ListenAgain":
-            return <ListenAgain key={component.id} />;
-          case "SimilarTo":
-            return <SimilarTo key={component.id} />;
-          case "RecommendedAlbums":
-            return <RecommendedAlbums key={component.id} />;
-          case "RandomSongs":
-            return <RandomSongs key={component.id} />;
-          case "FromYourLibrary":
-            return <FromYourLibrary key={component.id} />;
-          case "MusicVideos":
-            return <MusicVideos key={component.id} />;
-          default:
-            return null;
-        }
-      };
-
-      return configExists ? (
-        <div className="min-h-screen pt-4 pb-20">
-          <div className="relative pr-32 pt-8 z-10 top top-14 flex flex-col items-end">
-            <CustomiseFeed />
-          </div>
-          <GenreButtons>
-            {components
-              .filter((component) => component.pinned)
-              .map(renderComponent)}
-            {components
-              .filter((component) => !component.pinned)
-              .map(renderComponent)}
-          </GenreButtons>
-        </div>
-      ) : (
-        <div className="min-h-screen flex flex-col justify-center items-center space-y-4">
-          <p className="text-5xl">No Config Found!</p>
-          <p className="font-semibold">
-            <Link href="/setup/library" className="underline">
-              Head to the setup page to index your library
-            </Link>
-          </p>
-          <Link href="/setup/library">
-            <Button className="bg-white text-black hover:bg-gray-500">
-              Head to Setup Page
-            </Button>
-          </Link>
-        </div>
-      );
-    }
+"use client";
+
+import FromYourLibrary from "@/components/Home/FromYourLibrary";
+import LandingCarousel from "@/components/Home/LandingCarousel";
+import ListenAgain from "@/components/Home/ListenAgain";
+import MusicVideos from "@/components/Home/MusicVideos";
+import RandomSongs from "@/components/Home/RandomSongs";
+import RecommendedAlbums from "@/components/Home/RecommendedAlbums";
+import SimilarTo from "@/components/Home/SimilarTo";
+import CustomiseFeed from "@/components/Layout/CustomiseFeed";
+import GenreButtons from "@/components/Layout/GenreButtons";
+import { useGradientHover } from "@/components/Providers/GradientHoverProvider";
+import { hasConfig } from "@music/sdk";
+import { Button } from "@music/ui/components/button";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { useLayoutConfig } from "@/components/Providers/LayoutConfigContext";
+
+export default function Home() {
+  const [configExists, setConfigExists] = useState(true);
+  const { components, setComponents } = useLayoutConfig();
+  const { setGradient } = useGradientHover();
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    async function checkConfig() {
+      const config = await hasConfig();
+      if (config) {
+        setConfigExists(true);
+      } else {
+        setConfigExists(false);
+        setGradient("#FFFFFF");
+      }
+    }
+
+    checkConfig();
+  }, [setGradient]);
+
+  useEffect(() => {
+    const savedConfig = localStorage.getItem("layoutConfig");
+    if (savedConfig) {
+      setComponents(JSON.parse(savedConfig));
+    }
+  }, [setComponents]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    handleResize();
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  type ComponentConfig = {
+    id: string;
+    name: string;
+    visible: boolean;
+    pinned: boolean;
+  };
+
+  const renderComponent = (component: ComponentConfig): JSX.Element | null => {
+    if (!component.visible) return null;
+    switch (component.id) {
+      case "LandingCarousel":
+        return <LandingCarousel key={component.id} />;
+      case "ListenAgain":
+        return <ListenAgain key={component.id} />;
+      case "SimilarTo":
+        return <SimilarTo key={component.id} />;
+      case "RecommendedAlbums":
+        return <RecommendedAlbums key={component.id} />;
+      case "RandomSongs":
+        return <RandomSongs key={component.id} />;
+      case "FromYourLibrary":
+        return <FromYourLibrary key={component.id} />;
+      case "MusicVideos":
+        return <MusicVideos key={component.id} />;
+      default:
+        return null;
+    }
+  };
+
+  return configExists ? (
+    <div className="min-h-screen pt-4 pb-20">
+      <div className={`relative ${isMobile ? 'pt-4' : 'pr-32 pt-8'} z-10 top top-14 flex flex-col items-end`}>
+        {!isMobile && <CustomiseFeed />}
+      </div>
+      <GenreButtons>
+        {components
+          .filter((component) => component.pinned)
+          .map(renderComponent)}
+        {components
+          .filter((component) => !component.pinned)
+          .map(renderComponent)}
+      </GenreButtons>
+    </div>
+  ) : (
+    <div className="min-h-screen flex flex-col justify-center items-center space-y-4">
+      <p className="text-5xl">No Config Found!</p>
+      <p className="font-semibold">
+        <Link href="/setup/library" className="underline">
+          Head to the setup page to index your library
+        </Link>
+      </p>
+      <Link href="/setup/library">
+        <Button className="bg-white text-black hover:bg-gray-500">
+          Head to Setup Page
+        </Button>
+      </Link>
+    </div>
+  );
+}