Skip to content

Commit

Permalink
Merge pull request #23 from ContentsViewer/feature/design
Browse files Browse the repository at this point in the history 
Feature/design
  • Loading branch information
@ContentsViewer
ContentsViewer authored May 5, 2024
2 parents d5cb3f1 + 7b9e4dc commit 7516219
Show file tree
Hide file tree
Showing 11 changed files with 484 additions and 136 deletions.
196 changes: 130 additions & 66 deletions app/albums/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,12 @@ import {
hexFromArgb,
} from "@material/material-color-utilities"
import {
ArrowBack,
ArrowBackRounded,
AlbumRounded,
FolderRounded,
ArrowUpwardRounded,
HomeRounded,
MoreVert,
SettingsRounded,
} from "@mui/icons-material"
import {
Box,
Expand All @@ -30,24 +32,38 @@ import {
Divider,
Typography,
ButtonBase,
Menu,
MenuItem,
ListItemIcon,
ListItemText,
} from "@mui/material"
import React, { useCallback, useRef } from "react"
import React, { useCallback, useMemo, useRef } from "react"
import { useEffect, useState } from "react"
import DownloadingIndicator from "@/src/components/downloading-indicator"
import { usePlayerStore } from "@/src/stores/player-store"

const AlbumCard = React.memo(function AlbumCard({
albumItem,
openAlbum = () => {},
appeal = false,
}: {
albumItem: AlbumItem
openAlbum?: (albumId: string) => void
appeal?: boolean
}) {
const [themeStoreState] = useThemeStore()
const [coverUrl, setCoverUrl] = useState<string | undefined>(undefined)
useEffect(() => {
if (!albumItem.cover) return
const url = URL.createObjectURL(albumItem.cover)
setCoverUrl(url)
return () => URL.revokeObjectURL(url)
}, [albumItem.cover])

const colorTertiary = hexFromArgb(
MaterialDynamicColors.tertiary.getArgb(themeStoreState.scheme)
)

return (
<Box
sx={{
Expand All @@ -57,10 +73,25 @@ const AlbumCard = React.memo(function AlbumCard({
alignItems: "center",
}}
>
{/* <Fade in={true}> */}
<ButtonBase
sx={{
borderRadius: "10%",
...(appeal
? {
boxShadow: `0 0 10px 0 ${colorTertiary}`,
animation: `appeal 5s ease-in-out infinite alternate`,
"@keyframes appeal": {
"0%": {
transform:
"perspective(400px) translateY(-8px) scale(1.05) rotateX(10deg) rotateY(-10deg)",
},
"100%": {
transform:
"perspective(400px) translateY(-8px) scale(1.05) rotateX(10deg) rotateY(10deg)",
},
},
}
: {}),
}}
onClick={() => {
openAlbum(albumItem.name)
Expand All @@ -75,10 +106,9 @@ const AlbumCard = React.memo(function AlbumCard({
coverUrl={coverUrl}
/>
</ButtonBase>
{/* </Fade> */}
<Typography
sx={{
mt: 1,
mt: 0.5,
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
Expand All @@ -94,9 +124,13 @@ const AlbumCard = React.memo(function AlbumCard({

interface AlbumListProps {
albums: AlbumItem[]
activeAlbumId: string | undefined
}

const AlbumList = React.memo(function AlbumList({ albums }: AlbumListProps) {
const AlbumList = React.memo(function AlbumList({
albums,
activeAlbumId,
}: AlbumListProps) {
const [routerState, routerActions] = useRouter()
const routerActionsRef = useRef(routerActions)
routerActionsRef.current = routerActions
Expand All @@ -108,7 +142,7 @@ const AlbumList = React.memo(function AlbumList({ albums }: AlbumListProps) {
return (
<Box
sx={{
gap: 2,
gap: 3,
gridTemplateColumns: "repeat(auto-fill, minmax(144px, 1fr))",
display: "grid",
maxWidth: "1040px",
Expand All @@ -118,7 +152,12 @@ const AlbumList = React.memo(function AlbumList({ albums }: AlbumListProps) {
>
{albums.map(album => {
return (
<AlbumCard key={album.name} albumItem={album} openAlbum={openAlbum} />
<AlbumCard
key={album.name}
albumItem={album}
openAlbum={openAlbum}
appeal={album.name === activeAlbumId}
/>
)
})}
</Box>
Expand All @@ -135,6 +174,15 @@ const AlbumListPage = React.memo(function AlbumListPage(
const fileStoreActionsRef = useRef(fileStoreActions)
fileStoreActionsRef.current = fileStoreActions

const [playerState] = usePlayerStore()
const activeAlbumId = useMemo(() => {
let albumName = playerState.activeTrack?.file.metadata?.common.album
if (albumName === undefined) albumName = "Unknown Album"
albumName = albumName.replace(/\0+$/, "")
return albumName
}, [playerState.activeTrack?.file.metadata?.common.album])
// console.log(activeAlbumId)

const [albums, setAlbums] = useState<AlbumItem[]>([])

useEffect(() => {
Expand Down Expand Up @@ -163,11 +211,12 @@ const AlbumListPage = React.memo(function AlbumListPage(
return (
<Box
sx={{
px: 2,
px: 4,
pt: 4,
...props.sx,
}}
>
<AlbumList albums={albums} />
<AlbumList albums={albums} activeAlbumId={activeAlbumId} />
</Box>
)
})
Expand Down Expand Up @@ -229,77 +278,50 @@ const AlbumPage = React.memo(function AlbumPage({
sm: "row",
},
px: 2,
gap: 1,
alignItems: "center",
gap: 2,
// alignItems: "center",
width: "100%",
my: 3,
}}
>
{/* <Fade in={true}> */}
<AlbumCover
sx={{
// flexBasis: "50%",
// height: "auto",
// width: "auto",
// aspectRatio: "1 / 1",
// maxWidth: "200px",
width: "200px",
height: "200px",
alignSelf: "center",
}}
coverUrl={coverUrl}
/>
{/* </Fade> */}

<Box
sx={{
flexGrow: 1,
display: "flex",
flexDirection: "column",
// alignItems: "flex-start",
// alignItems: "center",
// alignItems: {
// xs: "",
// sm: "flex-start",
// },

minWidth: 0,
// width: "100%",
width: "100%",
justifyContent: "space-around",
}}
>
<Typography
variant="h5"
sx={{
// width: "100%",
fontWeight: "bold",
// display: "-webkit-box",
overflow: "hidden",
// WebkitBoxOrient: "vertical",
// WebkitBoxOrient: "vertical",
// WebkitLineClamp: 2,
// -webkit-line-clamp: 3
// textAlign: "center",
// textAlign: {
// xs: "center",
// sm: "left",
// },
textAlign: {
xs: "center",
sm: "left",
},
}}
>
{albumItem ? albumItem.name : ""}
</Typography>
{/* <MarqueeText
variant="h5"
sx={{
width: "100%",
}}
typographySx={{
fontWeight: "bold",
}}
text={albumItem ? albumItem.name : ""}
/> */}
<Box
sx={{
display: "flex",
minWidth: "200px",
flexDirection: "row",
// minWidth: "200px",
justifyContent: "flex-end",
}}
>
<IconButton
Expand Down Expand Up @@ -334,6 +356,8 @@ export default function Page() {
const fileStoreActionsRef = useRef(fileStoreActions)
fileStoreActionsRef.current = fileStoreActions

const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)

useEffect(() => {
const albumId = decodeURIComponent(routerState.hash.slice(1))
if (albumId === "") {
Expand All @@ -353,41 +377,45 @@ export default function Page() {
MaterialDynamicColors.onSurfaceVariant.getArgb(themeStoreState.scheme)
)

const downloadingCount = Object.keys(fileStoreState.syncingTrackFiles).length

return (
<Box>
<AppTopBar>
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
onClick={() => {
if (currentAlbum) {
routerActions.goAlbum()
return
}
routerActions.goHome()
}}
>
<ArrowBackRounded />
</IconButton>

<IconButton
color="inherit"
onClick={() => {
routerActions.goHome()
}}
sx={{ ml: -1 }}
>
<HomeRounded />
</IconButton>
<Typography
sx={{
mx: 1,
color: colorOnSurfaceVariant,
}}
>
/
</Typography>
<IconButton
size="large"
// edge="start"
// sx={{ ml: -1 }}
color="inherit"
onClick={() => {
if (currentAlbum) {
routerActions.goAlbum()
return
}
routerActions.goHome()
}}
>
<ArrowUpwardRounded />
</IconButton>

<AlbumRounded color="inherit" sx={{ mr: 1 }} />
<MarqueeText
variant="h6"
sx={{
Expand All @@ -398,6 +426,42 @@ export default function Page() {
}}
text={currentAlbum ? currentAlbum.name : "Albums"}
/>
{downloadingCount > 0 ? (
<DownloadingIndicator
count={downloadingCount}
color={colorOnSurfaceVariant}
/>
) : null}
<div>
<IconButton
color="inherit"
edge="end"
onClick={event => {
setAnchorEl(event.currentTarget)
}}
>
<MoreVert />
</IconButton>
<Menu
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={() => {
setAnchorEl(null)
}}
>
<MenuItem
onClick={() => {
routerActions.goSettings()
}}
>
<ListItemIcon>
<SettingsRounded />
</ListItemIcon>
<ListItemText>Settings</ListItemText>
</MenuItem>
</Menu>
</div>
</Toolbar>
</AppTopBar>
<Box
Expand Down
Loading

0 comments on commit 7516219

Please sign in to comment.