Fix Syncing Between Music Video & Player, Decrease Network Bandwidth …

…& Transfer, Repetitive Authentication and Styled Components (#150)

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

@@ -14,6 +14,7 @@ import WikidataLogo from "@/public/wikidata_logo.png";
 import WikipediaLogo from "@/public/wikipedia_logo.png";
 import { getAlbumInfo, getArtistInfo, LibraryAlbum } from "@music/sdk";
 import { Artist } from "@music/sdk/types";
+import { AspectRatio } from "@music/ui/components/aspect-ratio";
 import { Badge } from "@music/ui/components/badge";
 import { Button } from "@music/ui/components/button";
 import { ScrollArea, ScrollBar } from "@music/ui/components/scroll-area";
@@ -34,20 +35,26 @@ export default function AlbumComponent() {
     if (!id || typeof id !== "string") return;
 
     const fetchAlbumInfo = async () => {
-      const album = await getAlbumInfo(id);
+      const album = await getAlbumInfo(id) as LibraryAlbum;
 
       const artistData = album.artist_object;
       const contributingArtistIds = album.contributing_artists_ids;
-
-      const contributingArtistsPromises = contributingArtistIds.map((artistId) =>
-        getArtistInfo(artistId)
-      );
-
-      const contributingArtistsData = await Promise.all(contributingArtistsPromises);
 
+      if (contributingArtistIds) {
+        const contributingArtistsPromises = contributingArtistIds.map((artistId) =>
+          getArtistInfo(artistId)
+        );
+
+        const contributingArtistsData = await Promise.all(contributingArtistsPromises);
+        setContributingArtists(contributingArtistsData);
+      } else {
+        setContributingArtists([])
+      }
+
       setAlbum(album);
       setArtist(artistData);
-      setContributingArtists(contributingArtistsData);
+
+      // setContributingArtists(contributingArtistsData);
     };
 
     fetchAlbumInfo();
@@ -109,14 +116,15 @@ export default function AlbumComponent() {
         <PageGradient imageSrc={albumCoverURL} />
         <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
-                src={albumCoverURL}
-                alt={`${album.name} Image`}
-                height={400}
-                width={400}
-                className="w-full h-full object-fill rounded"
-              />
+            <div className="flex-shrink-0 w-full max-w-xs mx-auto">
+              <div className="relative" style={{ paddingBottom: '100%' }}>
+                <Image
+                  src={albumCoverURL}
+                  alt={`${album.name} Image`}
+                  layout="fill"
+                  className="absolute top-0 left-0 w-full h-full object-cover rounded"
+                />
+              </div>
             </div>
             <div className="md:pl-4 flex-grow text-center mt-4">
               <h1 className="text-4xl">{album.name}</h1>
@@ -129,7 +137,7 @@ export default function AlbumComponent() {
                     height={20}
                     alt={`${artist.name} Profile Picture`}
                     className="rounded-full"
-                  />
+                    />
                   <p className="text-xs text-gray-200 ml-2">
                     {album.release_group_album?.artist_credit.map((artist) => (
                       <span key={artist.musicbrainz_id}>{artist.name}</span>
@@ -298,7 +306,7 @@ export default function AlbumComponent() {
             <Description description={album.description}/>
             <div className="grid grid-cols-1 gap-4 mt-4">
               {contributingArtists.map(artist => (
-                <Link href={`/artist/${artist.id}`} key={artist.id}>
+                <Link href={`/artist/?id=${artist.id}`} key={artist.id}>
                   <div key={artist.id} className="flex items-center">
                     <Image
                       src={artist.icon_url.length === 0 ? "/snf.png" : `${getBaseURL()}/image/${encodeURIComponent(artist.icon_url)}`}

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

@@ -20,7 +20,7 @@ export default function HistoryPage() {
       if (session) {
         const listenHistoryItems = await getListenHistory(Number(session.sub));
         const songDetailsPromises = listenHistoryItems.reverse().map(item => getSongInfo(item.song_id));
-        const songDetails = await Promise.all(songDetailsPromises);
+        const songDetails = await Promise.all(songDetailsPromises) as LibrarySong[];
 
         setListenHistorySongs(songDetails);
       }

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

@@ -39,7 +39,9 @@ export default function Home() {
   useEffect(() => {
     const savedConfig = localStorage.getItem("layoutConfig");
     if (savedConfig) {
-      setComponents(JSON.parse(savedConfig));
+      const parsedConfig = JSON.parse(savedConfig);
+      setComponents(parsedConfig);
+    } else {
     }
   }, [setComponents]);
 
@@ -57,6 +59,12 @@ export default function Home() {
     };
   }, []);
 
+  useEffect(() => {
+    if (components && components.length > 0) {
+      localStorage.setItem("layoutConfig", JSON.stringify(components));
+    }
+  }, [components]);
+
   type ComponentConfig = {
     id: string;
     name: string;

apps/web/app/(app)/playlist/PlaylistComponent.tsx

@@ -15,12 +15,14 @@ interface Playlist extends OriginalPlaylist {
   updatedAt: Date;
 }
 
+type LibrarySongWithDate = LibrarySong & { date_added: string  }
+
 export default function PlaylistComponent() {
   const searchParams = useSearchParams();
   const id = searchParams?.get("id");
 
   const [playlist, setPlaylist] = useState<Playlist | null>(null);
-  const [songsWithMetadata, setSongsWithMetadata] = useState<(LibrarySong & { date_added: string })[]>([]);
+  const [songsWithMetadata, setSongsWithMetadata] = useState<(LibrarySongWithDate)[]>([]);
   const [totalDuration, setTotalDuration] = useState<number>(0);
 
   useEffect(() => {
@@ -45,7 +47,7 @@ export default function PlaylistComponent() {
           return { ...songData, date_added: songInfo.date_added };
         });
 
-        const songsWithMetadataData = await Promise.all(songsWithMetadataPromises);
+        const songsWithMetadataData = await Promise.all(songsWithMetadataPromises) as unknown as LibrarySongWithDate[];
         setSongsWithMetadata(songsWithMetadataData);
 
         const totalDuration = songsWithMetadataData.reduce((total: number, song: LibrarySong & { date_added: string }) => total + song.duration, 0);

apps/web/app/(app)/search/SearchComponent.tsx

@@ -28,7 +28,7 @@ export default function SearchComponent() {
   }, [query]);
 
   return (
-    <div className="flex items-center justify-start overflow-y-hidden h-full min-h-screen pt-32 pl-20 pb-20">
+    <div className="flex items-center justify-center overflow-y-hidden h-full min-h-screen pt-32 pl-20 pb-20 scale-110">
     <div className="transform scale-110 pt-20 pb-20">
       {suggestion && suggestion.toLowerCase() !== query.toLowerCase() && (
         <p className="text-sm text-white mt-6">

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

@@ -10,6 +10,7 @@ import ArtistCard from "@/components/Music/Artist/ArtistCard";
 import { User } from "@music/sdk/types";
 import UserCard from "@/components/Music/Card/User/UserCard";
 import { useSession } from "@/components/Providers/AuthProvider";
+import ProfilePicture from "@/components/User/ProfilePicture";
 
 export default function SocialPage() {
   const { session } = useSession()
@@ -58,11 +59,7 @@ export default function SocialPage() {
         {userInfo.image ? (
           <Image src={userInfo.image} alt="" className="w-32 h-32 rounded-full" />
         ) : (
-          <Avatar className="w-32 h-32">
-            <AvatarFallback className="text-4xl">
-              {userInfo.username.substring(0, 2).toUpperCase()}
-            </AvatarFallback>
-          </Avatar>
+          <ProfilePicture />
         )}
         <div className="flex flex-col">
           <p className="text-lg">@{userInfo.username}</p>

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

@@ -38,6 +38,8 @@ export default function MainPage() {
   const { session } = useSession()
 
   useEffect(() => {
+    if (process.env.LOCAL_APP) push("/home")
+
     const checkServerUrl = async () => {
       setLoading(true);
 

apps/web/components/Artist/SongsInLibrary.tsx

@@ -20,7 +20,7 @@ async function getSongsFromYourLibrary(user_id: number, artist_id: string) {
 
   const songsDetailsPromises = playlistSongIDs.map((songID) => getSongInfo(String(songID)));
 
-  const songsDetails = await Promise.all(songsDetailsPromises);
+  const songsDetails = await Promise.all(songsDetailsPromises) as LibrarySong[];
 
   const filteredSongsDetails = songsDetails.filter(song => String(song.artist_object.id) === artist_id);
 

apps/web/components/Friends/FriendActivity.tsx

@@ -2,7 +2,7 @@
 
 import getSession from "@/lib/Authentication/JWT/getSession";
 import { getFollowing, getNowPlaying, getSongInfo, getUserInfoById } from "@music/sdk";
-import { Album, Artist, LibrarySong as Song, User } from "@music/sdk/types";
+import { Album, Artist, LibrarySong, LibrarySong as Song, User } from "@music/sdk/types";
 import { Avatar, AvatarFallback, AvatarImage } from "@music/ui/components/avatar";
 import { Disc3Icon } from 'lucide-react';
 import Link from "next/link";
@@ -34,7 +34,7 @@ export default function FriendActivity() {
           const profilePicture = profilePicBlob ? URL.createObjectURL(profilePicBlob) : null;
 
           if (nowPlayingSongID) {
-            const songResponse = await getSongInfo(String(nowPlayingSongID.now_playing) ?? 0);
+            const songResponse = await getSongInfo(String(nowPlayingSongID.now_playing) ?? 0) as LibrarySong;
             return {
               ...friend,
               nowPlaying: {

apps/web/components/Home/FromYourLibrary.tsx

@@ -1,13 +1,12 @@
 "use client"
 
-import getSession from "@/lib/Authentication/JWT/getSession";
 import setCache, { getCache } from "@/lib/Caching/cache";
 import { getPlaylist, getPlaylists, getSongInfo } from "@music/sdk";
 import { LibrarySong } from "@music/sdk/types";
 import { useEffect, useState } from "react";
 import SongCard from "../Music/Card/SongCard";
-import ScrollButtons from "./ScrollButtons";
 import { useSession } from "../Providers/AuthProvider";
+import ScrollButtons from "./ScrollButtons";
 
 async function getSongsFromYourLibrary(user_id: number, genre?: string) {
   const playlists = await getPlaylists(user_id);
@@ -22,7 +21,7 @@ async function getSongsFromYourLibrary(user_id: number, genre?: string) {
 
   const songsDetailsPromises = playlistSongIDs.map((songID) => getSongInfo(String(songID)));
 
-  const songsDetails = await Promise.all(songsDetailsPromises);
+  const songsDetails = await Promise.all(songsDetailsPromises) as LibrarySong[];
 
   if (genre) {
     return songsDetails.filter(song => {
@@ -73,7 +72,7 @@ export default function FromYourLibrary({ genre }: FromYourLibraryProps) {
 ``
   return (
     <ScrollButtons heading="From Your Library" id="FromYourLibrary">
-      <div className="flex flex-row pb-28">
+      <div className="flex flex-row pb-14">
         {librarySongs.map((song, index) => (
           <div className="mr-20" key={index}>
             <SongCard album_cover={song.album_object.cover_url} album_id={song.album_object.id} album_name={song.album_object.name} artist_id={song.artist_object.id} artist_name={song.artist} path={song.path} song_id={song.id} song_name={song.name} />

apps/web/components/Home/LandingCarousel.tsx

@@ -106,7 +106,7 @@ export default function LandingCarousel() {
   const albumCoverURL = `${getBaseURL()}/image/${encodeURIComponent(album.cover_url)}?raw=true`;
 
   return (
-    <div className="relative p-5 flex items-center hidden md:flex" style={{ height: '300px' }}>
+    <div className="relative p-5 flex items-center md:flex" style={{ height: '300px' }}>
       <Image
         className="absolute top-0 left-0 w-full h-full bg-cover bg-center blur-2xl brightness-50"
         alt={`${album.name} Album Background Image`}

apps/web/components/Home/ListenAgain.tsx

@@ -3,7 +3,7 @@
 import getSession from "@/lib/Authentication/JWT/getSession";
 import setCache, { getCache } from "@/lib/Caching/cache";
 import getBaseURL from "@/lib/Server/getBaseURL";
-import { getListenAgain, SongInfo } from "@music/sdk";
+import { getListenAgain, ListenAgainSong, SongInfo } from "@music/sdk";
 import { useEffect, useState } from "react";
 import PageGradient from "../Layout/PageGradient";
 import AlbumCard from "../Music/Card/Album/AlbumCard";
@@ -16,12 +16,12 @@ interface ListenAgainProps {
 }
 
 export default function ListenAgain({ genre }: ListenAgainProps) {
-  const [listenHistorySongs, setListenHistorySongs] = useState<SongInfo[]>([]);
+  const [listenHistorySongs, setListenHistorySongs] = useState<ListenAgainSong[]>([]);
   const { session } = useSession()
 
   useEffect(() => {
     const fetchListenHistory = async () => {
-      const listenHistory = await getListenAgain(Number(session?.sub));
+      const listenHistory = await getListenAgain(Number(session?.sub)) as ListenAgainSong[];
       setListenHistorySongs(listenHistory);
     };
 
@@ -38,7 +38,7 @@ export default function ListenAgain({ genre }: ListenAgainProps) {
     <>
       <PageGradient imageSrc={albumCoverSrc} />
       <ScrollButtons heading="Listen Again" showUser id="ListenAgain">
-        <div className="flex flex-row pb-28">
+        <div className="flex flex-row pb-14">
           {listenHistorySongs.map((item, index) => {
             if (item.item_type === "album") {
               return (

apps/web/components/Home/RandomSongs.tsx

@@ -48,7 +48,7 @@ export default function RandomSongs({ genre }: RandomSongsProps) {
 
   return (
     <ScrollButtons heading="Random Selection" id="RandomSongs">
-      <div className="flex flex-row pb-28">
+      <div className="flex flex-row pb-14">
         {randomSongs.map((song, index) => (
           <div className="mr-20" key={index}>
             <SongCard album_cover={song.album_object.cover_url} album_id={song.album_object.id} album_name={song.album_object.name} artist_id={song.artist_object.id} artist_name={song.artist} path={song.path} song_id={song.id} song_name={song.name} />

apps/web/components/Home/RecommendedAlbums.tsx

@@ -1,13 +1,12 @@
 "use client"
 
-import getSession from "@/lib/Authentication/JWT/getSession";
 import setCache, { getCache } from "@/lib/Caching/cache";
 import { getPlaylist, getPlaylists, getSongInfo } from "@music/sdk";
+import { LibrarySong } from "@music/sdk/types";
 import { useEffect, useState } from "react";
 import AlbumCard from "../Music/Card/Album/AlbumCard";
-import ScrollButtons from "./ScrollButtons";
-import { LibrarySong } from "@music/sdk/types";
 import { useSession } from "../Providers/AuthProvider";
+import ScrollButtons from "./ScrollButtons";
 
 async function getSongsFromYourLibrary(user_id: number, genre?: string) {
   const playlists = await getPlaylists(user_id);
@@ -22,7 +21,7 @@ async function getSongsFromYourLibrary(user_id: number, genre?: string) {
 
   const songsDetailsPromises = playlistSongIDs.map((songID) => getSongInfo(String(songID)));
 
-  const songsDetails = await Promise.all(songsDetailsPromises);
+  const songsDetails = await Promise.all(songsDetailsPromises) as unknown as LibrarySong[];
 
   if (genre) {
     return songsDetails.filter(song => {
@@ -73,7 +72,7 @@ export default function RecommendedAlbums({ genre }: RecommendedAlbumsProps) {
 
   return (
     <ScrollButtons heading="Recommended Albums" id="RecommendedAlbums">
-      <div className="flex flex-row pb-28">
+      <div className="flex flex-row pb-14">
         {librarySongs.map((song, index) => (
           <div className="mr-20" key={index}>
             <AlbumCard 

apps/web/components/Home/SimilarTo.tsx

@@ -1,14 +1,12 @@
 "use client";
 
-import getSession from "@/lib/Authentication/JWT/getSession";
 import getBaseURL from "@/lib/Server/getBaseURL";
-import { getSimilarTo, AlbumCardProps } from "@music/sdk";
+import { AlbumCardProps, getSimilarTo } from "@music/sdk";
 import { useEffect, useState } from "react";
 import PageGradient from "../Layout/PageGradient";
 import AlbumCard from "../Music/Card/Album/AlbumCard";
-import ScrollButtons from "./ScrollButtons";
-import { Skeleton } from "@music/ui/components/skeleton";
 import { useSession } from "../Providers/AuthProvider";
+import ScrollButtons from "./ScrollButtons";
 
 function capitalizeWords(str: string): string {
   return str.replace(/\b\w/g, char => char.toUpperCase());
@@ -48,9 +46,9 @@ export default function SimilarTo() {
       <PageGradient imageSrc={albumCoverSrc} />
       <ScrollButtons heading={capitalizeWords(genre ?? "")} topText="SIMILAR TO" imageUrl={albumCoverSrc} id="SimilarTo">
         <div className="w-full h-full">
-          <div className="grid grid-flow-col grid-rows-2 gap-2 w-full h-full">
+          <div className="grid grid-flow-col grid-rows-2 gap-2 w-full h-full pb-8">
             {similarAlbums.map((album, index) => (
-              <div className="w-48 h-full pb-28 scale-90" key={index}>
+              <div className="w-48 h-full pb-14 scale-90" key={index}>
                 <AlbumCard
                   artist_id={album.artist_id}
                   artist_name={album.artist_name}

apps/web/components/Layout/LibraryButtons.tsx

@@ -50,7 +50,7 @@ export default function LibraryButtons() {
           const listenHistoryItems = await getListenHistory(userId);
           const uniqueListenHistoryItems = Array.from(new Set(listenHistoryItems.map(item => item.song_id)));
           const songDetailsPromises = uniqueListenHistoryItems.reverse().slice(0, 30).map(song_id => getSongInfo(song_id));
-          const songDetails = await Promise.all(songDetailsPromises);
+          const songDetails = await Promise.all(songDetailsPromises) as unknown as LibrarySong[];
 
           setListenHistorySongs(songDetails);
           setCache(cacheKey, songDetails, 3600000);

apps/web/components/Layout/Sidebar.tsx

@@ -30,8 +30,6 @@ export default function Sidebar({ children, sidebarContent }: SidebarProps) {
     const handleResize = () => {
       if (window.innerWidth < 768) {
         closeSidebar();
-      } else {
-        openSidebar();
       }
     };