Skip to content

Commit

Permalink
update ssr
Browse files Browse the repository at this point in the history
  • Loading branch information
idoubi committed Apr 8, 2024
1 parent 89055b1 commit 1b28f21
Show file tree
Hide file tree
Showing 40 changed files with 643 additions and 412 deletions.
40 changes: 40 additions & 0 deletions app/[locale]/(default)/_components/crumb/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

import { Nav } from "@/types/nav";

export default function ({ navs }: { navs: Nav[] }) {
return (
<Breadcrumb className="mb-8 text-base-content">
<BreadcrumbList>
{navs.map((nav: Nav) => {
return (
<>
<BreadcrumbItem className="cursor-pointer">
{nav.active ? (
<BreadcrumbPage className="text-primary">
{nav.title}
</BreadcrumbPage>
) : (
<BreadcrumbLink
className="text-base-content hover:text-primary"
href={nav.url}
>
{nav.title}
</BreadcrumbLink>
)}
</BreadcrumbItem>
{!nav.active && <BreadcrumbSeparator />}
</>
);
})}
</BreadcrumbList>
</Breadcrumb>
);
}
5 changes: 3 additions & 2 deletions app/[locale]/(default)/_components/player/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -382,7 +382,6 @@ export default function () {
audio.src = song.audio_url;
audio.play();

console.log("update play song", song);
updatePlaySong(song.uuid);

return () => {
Expand All @@ -398,9 +397,11 @@ export default function () {
return;
}

// audio.play();
audio.play();
}, [audioRef.current]);

useEffect(() => {}, []);

return (
<>
{song && (
Expand Down
11 changes: 6 additions & 5 deletions app/[locale]/(default)/_components/playlist/index.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
"use client";

import { MdHeadset, MdOutlineThumbUp } from "react-icons/md";
import {
Table,
Expand All @@ -9,6 +11,7 @@ import {
} from "@/components/ui/table";

import Image from "next/image";
import Link from "next/link";
import Skeleton from "../skeleton";
import { Song } from "@/types/song";
import { useAppContext } from "@/contexts/app";
Expand Down Expand Up @@ -36,7 +39,6 @@ export default function ({
};

const updatePlaylist = function (song: Song, idx: number) {
console.log("update playlists", song, songs);
if (!songs) {
return;
}
Expand Down Expand Up @@ -93,16 +95,15 @@ export default function ({
/>
</TableCell>
<TableCell className="font-medium max-w-[120px] truncate">
<p
<Link
className="hover:underline truncate"
href={`/song/${song.uuid}`}
onClick={(e) => {
return;
e.stopPropagation();
router.push(`/song/${song.uuid}`);
}}
>
{song.title}
</p>
</Link>
<div className="flex items-center gap-x-4 mt-1">
<div className="flex items-center gap-x-0.5">
<MdHeadset />
Expand Down
12 changes: 10 additions & 2 deletions app/[locale]/(default)/_components/playlist/scroll.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
"use client";

import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";

import Image from "next/image";
import Link from "next/link";
import Skeleton from "../skeleton";
import { Song } from "@/types/song";
import { useAppContext } from "@/contexts/app";
Expand All @@ -16,7 +19,6 @@ export default function ({
useAppContext();

const updatePlaylist = function (song: Song, idx: number) {
console.log("update playlists", song, songs);
if (!songs) {
return;
}
Expand Down Expand Up @@ -64,7 +66,13 @@ export default function ({
)}
</div>
<figcaption className="pt-2 text-xs text-base-content truncate">
<span className="font-semibold">{song.title}</span>
<Link
href={`/song/${song.uuid}`}
className="font-semibold hover:underline"
onClick={(e) => e.stopPropagation()}
>
{song.title}
</Link>
</figcaption>
</figure>
);
Expand Down
77 changes: 46 additions & 31 deletions app/[locale]/(default)/_components/sidenav/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,28 @@ import {
MdOutlineRadio,
MdOutlineRssFeed,
} from "react-icons/md";
import { usePathname, useRouter } from "next/navigation";
import { useParams, usePathname, useRouter } from "next/navigation";

import { Button } from "@/components/ui/button";
import Link from "next/link";
import { Nav } from "@/types/nav";
import { PiPlaylistDuotone } from "react-icons/pi";
import { useAppContext } from "@/contexts/app";
import { useTranslations } from "next-intl";

export default function () {
const t = useTranslations("nav");

const params = useParams();
const locale = params.locale as string;
const { setIsSiderOpen } = useAppContext();
const router = useRouter();
const pathname = usePathname();
const musicNavs: Nav[] = [
{
title: t("discover"),
url: "/discover",
url: `/`,
icon: <MdMusicNote className="text-lg" />,
active: pathname.endsWith("discover"),
active: pathname === "/" || pathname === `/${params.locale}`,
},
{
title: t("trending"),
Expand All @@ -47,14 +49,24 @@ export default function () {
icon: <MdOutlineRadio className="text-lg" />,
active: pathname.endsWith("roaming"),
},
{
title: t("playlists"),
url: "/playlists",
icon: <PiPlaylistDuotone className="text-lg" />,
active: pathname.endsWith("playlists"),
},
// {
// title: t("playlists"),
// url: "/playlists",
// icon: <PiPlaylistDuotone className="text-lg" />,
// active: pathname.endsWith("playlists"),
// },
];

const getNavUrl = (nav: Nav) => {
if (nav.url) {
if (locale && locale !== "en" && !nav.url.startsWith(`/${locale}`)) {
return `/${locale}${nav.url}`;
}
}

return nav.url;
};

const libraryNavs: Nav[] = [
{
title: t("favorites"),
Expand All @@ -75,24 +87,27 @@ export default function () {
<>
{navs.map((nav: Nav, idx: number) => {
return (
<Button
<Link
href={getNavUrl(nav) || ""}
key={idx}
variant="ghost"
className={`md:w-full hover:bg-base-100 justify-start gap-x-1 ${
nav.active
? "text-primary hover:text-primary"
: "hover:text-base-content"
}`}
onClick={() => {
if (nav.url) {
router.push(nav.url);
setIsSiderOpen(false);
}
onClick={(e) => {
e.stopPropagation();
setIsSiderOpen(false);
}}
>
{nav.icon}
{nav.title}
</Button>
<Button
key={idx}
variant="ghost"
className={`md:w-full hover:bg-base-100 justify-start gap-x-1 ${
nav.active
? "text-primary hover:text-primary"
: "hover:text-base-content"
}`}
>
{nav.icon}
{nav.title}
</Button>
</Link>
);
})}
</>
Expand All @@ -103,22 +118,22 @@ export default function () {
<div className="pb-24">
<div className="space-y-4 py-4">
<div className="px-3 py-2">
<h2 className="mb-2 px-4 text-sm font-semibold tracking-tight">
<p className="mb-2 px-4 text-sm font-semibold tracking-tight">
{t("music")}
</h2>
</p>
<div className="space-y-1 w-40">{Navs(musicNavs)}</div>
</div>
<div className="px-3 py-2">
<h2 className="mb-2 px-4 text-sm font-semibold tracking-tight">
<p className="mb-2 px-4 text-sm font-semibold tracking-tight">
{t("library")}
</h2>
</p>
<div className="space-y-1 w-40">{Navs(libraryNavs)}</div>
</div>

{/* <div className="py-2">
<h2 className="relative px-7 text-lg font-semibold tracking-tight">
<p className="relative px-7 text-lg font-semibold tracking-tight">
Playlists
</h2>
</p>
<ScrollArea className="h-[300px] px-1">
<div className="space-y-1 p-2"></div>
</ScrollArea>
Expand Down
74 changes: 47 additions & 27 deletions app/[locale]/(default)/_components/song/list.tsx
Original file line number Diff line number Diff line change
@@ -1,40 +1,60 @@
"use client";

import Image from "next/image";
import Link from "next/link";
import { Song } from "@/types/song";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { useAppContext } from "@/contexts/app";

export default function ({ songs }: { songs: Song[] }) {
const t = useTranslations("nav");
const { currentSong, appendPlaylist, setCurrentSong, setCurrentSongIndex } =
useAppContext();

const playSong = function (song: Song) {
appendPlaylist(song);
setCurrentSong(song);
setCurrentSongIndex(0);
};

const router = useRouter();
return (
<div>
{songs.map((song: Song) => {
if (!song.title || !song.image_url) {
return;
}
return (
<div
key={song.uuid}
onClick={() => router.push(`/song/${song.uuid}`)}
className="flex items-start gap-x-2 my-2 py-2 border-b border-base-200 overflow-hidden cursor-pointer"
>
<Image
src={song.image_url}
width={60}
height={60}
alt={song.title}
className="rounded-md"
/>
<div>
<h3 className="truncate w-60 font-medium">{song.title}</h3>
<p className="truncate w-60">{song.tags}</p>
{songs
.filter((item: Song) => item.title && item.image_url)
.map((song: Song) => {
const isActive = currentSong && currentSong.uuid === song.uuid;

return (
<div
key={song.uuid}
className="flex items-start gap-x-2 my-2 py-2 border-b border-base-200 overflow-hidden cursor-pointer relative"
onClick={() => playSong(song)}
>
<Image
src={song.image_url}
width={60}
height={60}
alt={song.title}
className={`rounded-md h-fit w-fit object-cover ${
isActive ? "opacity-[0.3]" : ""
}`}
/>
{isActive ? (
<img className="absolute top-8 left-6" src="/playing.gif" />
) : (
<></>
)}
<div>
<Link
href={`/song/${song.uuid}`}
className="truncate w-60 font-medium hover:underline"
onClick={(e) => e.stopPropagation()}
>
{song.title}
</Link>
<p className="truncate w-60">{song.tags}</p>
</div>
</div>
</div>
);
})}
);
})}
</div>
);
}
Loading

0 comments on commit 1b28f21

Please sign in to comment.