Skip to content

Commit

Permalink
added a simple album details view. and some restructuring.
Browse files Browse the repository at this point in the history
  • Loading branch information
@pSpitzner
pSpitzner committed Jul 26, 2024
1 parent 5313b67 commit 010e9ef
Show file tree
Hide file tree
Showing 5 changed files with 161 additions and 47 deletions.
48 changes: 45 additions & 3 deletions frontend/src/components/library/_query.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,60 @@ export interface MinimalArtist {

export interface MinimalAlbum {
id: number;
name: string;
name: string; // added by us for consistency, not a beets-fields
albumartist: string;
year: number;
}

export interface Album extends MinimalAlbum {
items: MinimalItem[];
[key: string]: unknown; // enable indexing item[key]
items?: MinimalItem[];

added?: number; // 1707767640.980912
album?: string; // "Away From the Sun"
albumartist_credit?: string; // "3 Doors Down"
albumartist_sort?: string; // "3 Doors Down"
albumartists?: string[]; // ["3 Doors Down"]
albumartists_credit?: string[]; // ["3 Doors Down"]
albumartists_sort?: string[]; // ["3 Doors Down"]
albumdisambig?: string; // "BMG club edition"
albumstatus?: string; // "Official"
albumtype?: string; // "album"
albumtypes?: string[]; // ["album"]
artpath?: string; // "None"
asin?: string; // ""
barcode?: string; // ""
catalognum?: string; // "440 064 396-2"
comp?: number; // 0
country?: string; // "US"
day?: number; // 12
discogs_albumid?: number; // 0
discogs_artistid?: number; // 0
discogs_labelid?: number; // 0
disctotal?: number; // 1
genre?: string; // "Post-Grunge; Hard Rock; Alternative Rock; Rock"
label?: string; // ""
language?: string; // "eng"
mb_albumartistid?: string; // "2386cd66-e923-4e8e-bf14-2eebe2e9b973"
mb_albumid?: string; // "9a7b7d7c-3e5d-4006-a97f-06e10a12cb16"
mb_releasegroupid?: string; // "8f4d4f05-36ed-3c81-86a7-aae2a03b1520"
month?: number; // 11
original_day?: number; // 11
original_month?: number; // 11
original_year?: number; // 2002
// r128_album_gain?: null; // null
release_group_title?: string; // "Away From the Sun"
releasegroupdisambig?: string; // ""
// rg_album_gain?: null; // null
// rg_album_peak?: null; // null
script?: string; // "Latn"
style?: string; // ""
}


export interface MinimalItem {
id: number;
name: string; // Track title
name: string; // Track title, added by us for consistency, not a beets-fields
artist: string; // "Basstripper"
albumartist: string; // "Basstripper"
album: string; // "In the City / Wasted"
Expand Down
132 changes: 100 additions & 32 deletions ...tend/src/components/library/trackView.tsx → ...nd/src/components/library/detailsView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,10 @@ import TableRow from "@mui/material/TableRow";
import Tooltip from "@mui/material/Tooltip";
import { useQuery } from "@tanstack/react-query";

import { itemQueryOptions } from "@/components/common/_query";
import { Item } from "@/components/common/_query";
import { Album, albumQueryOptions, Item, itemQueryOptions } from "@/components/common/_query";
import { JSONPretty } from "@/components/common/json";

export function TrackView({ itemId }: { itemId?: number }) {
export function ItemView({ itemId }: { itemId?: number }) {
const [detailed, setDetailed] = useState(false);
const {
data: item,
Expand Down Expand Up @@ -48,10 +47,7 @@ export function TrackView({ itemId }: { itemId?: number }) {
{!detailed && <BugOn size="1em" />}
</IconButton>
</Tooltip>
<ItemDetailsTableView
item={item!}
keys={detailed ? "all" : "basic"}
/>
<DetailsTable obj={item!} keys={detailed ? "all" : "basic"} />
</>
)}
{!isSuccess && isFetching && (
Expand All @@ -70,36 +66,108 @@ export function TrackView({ itemId }: { itemId?: number }) {
);
}

export function ItemDetailsTableView({
item,
// for now this is the same as ItemView.
export function AlbumView({ albumId }: { albumId?: number }) {
const [detailed, setDetailed] = useState(false);
const {
data,
isFetching,
isError,
error,
isSuccess,
} = useQuery(albumQueryOptions({ id: albumId, minimal: false, expand: false }));
const album = data as Album;

return (
<>
<Box
sx={{
display: "flex",
flexDirection: "column",
flexGrow: 1,
alignItems: "center",
justifyContent: "flex-start",
overflow: "auto",
}}
>
{isSuccess && (
<>
<Tooltip title="Toggle Details" className="ml-auto mt-1">
<IconButton
color="primary"
onClick={() => setDetailed(!detailed)}
>
{detailed && <BugOff size="1em" />}
{!detailed && <BugOn size="1em" />}
</IconButton>
</Tooltip>
<DetailsTable obj={album} keys={detailed ? "all" : "basic"} />
</>
)}
{!isSuccess && isFetching && (
<Box sx={{ margin: "auto" }}>
<CircularProgress />
</Box>
)}
{isError && (
<>
<span>Error:</span>
<JSONPretty error={error} />
</>
)}
</Box>
</>
);
}

const basicItemKeys = [
"title",
"artist",
"albumartist",
"album",
"albumtype",
"comp",
"genre",
"label",
"isrc",
"bpm",
"initialkey",
"year",
"added",
"length",
"size",
"bitrate",
"samplerate",
"path",
];

const basicAlbumKeys = [
"album",
"albumartist",
"albumtype",
"genre",
"comp",
"label",
"year",
"added",
];

export function DetailsTable({
obj,
keys,
}: {
item: Item;
obj: Item | Album;
keys?: string | string[];
}) {
// albums only have an albumartist (not artist), so we can use this to distinguish
const isItem = (item: unknown): item is Item => {
return (item as Item).artist !== undefined;
};

if (!keys || keys === "basic") {
keys = [
"title",
"artist",
"albumartist",
"album",
"albumtype",
"comp",
"genre",
"label",
"isrc",
"bpm",
"initialkey",
"year",
"added",
"length",
"size",
"bitrate",
"samplerate",
"path",
];
keys = isItem(obj) ? basicItemKeys : basicAlbumKeys;
} else if (keys === "all") {
keys = Object.keys(item);
keys = Object.keys(obj);
// we only added name for backend-frontend consistency, its not a beets-field
// note: this could cause problems if a user adds a custom field "name"
keys = keys.filter((key) => key !== "name");
Expand Down Expand Up @@ -134,7 +202,7 @@ export function ItemDetailsTableView({
{key}
</TableCell>
<TableCell align="left">
{parse(key, item[key])}
{parse(key, obj[key])}
</TableCell>
</TableRow>
);
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/routes/library/browse.$artist.$albumId.$itemId.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import z from "zod";
import Box from "@mui/material/Box";
import Paper from "@mui/material/Paper";
import { createFileRoute } from "@tanstack/react-router";

import { itemQueryOptions } from "@/components/library/_query";
import { TrackView } from "@/components/library/trackView";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import { BrowserHeader } from "@/components/library/browserHeader";
import { ItemView } from "@/components/library/detailsView";

import styles from "@/components/library/library.module.scss";

Expand Down Expand Up @@ -40,7 +40,7 @@ function TrackPage() {
<BrowserHeader
className={styles.browserHeader + " " + styles.alwaysShow}
/>
<TrackView itemId={params.itemId} />
<ItemView itemId={params.itemId} />
</Paper>
</>
);
Expand Down
9 changes: 5 additions & 4 deletions frontend/src/routes/library/search.$type.$id.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Paper from "@mui/material/Paper";
import { createFileRoute } from "@tanstack/react-router";

import { SearchType } from "@/components/common/useSearch";
import { TrackView } from "@/components/library/trackView";
import { AlbumView, ItemView } from "@/components/library/detailsView";

import { RouteParams } from "./search";

Expand All @@ -15,17 +15,18 @@ export const Route = createFileRoute("/library/search/$type/$id")({
id: z.number().int().parse(parseInt(params.id)),
type: z.string().parse(params.type) as SearchType,
}),
component: ItemView,
component: DetailsPage,
});

function ItemView() {
function DetailsPage() {
const params = Route.useParams<RouteParams>();

return (
<>
<Paper className={styles.SearchResultInfoOuter}>
<Box className={styles.SearchResultInfo}>
<TrackView itemId={params.id} />
{params.type === "item" && <ItemView itemId={params.id} />}
{params.type === "album" && <AlbumView albumId={params.id} />}
</Box>
</Paper>
</>
Expand Down
11 changes: 7 additions & 4 deletions frontend/src/routes/library/search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,9 +192,7 @@ export interface RouteParams {

function ItemResultsBox() {
const { results } = useSearchContext() as { results: MinimalItem[] };

const params = Route.useParams<RouteParams>();
console.log(params);

const data = useMemo(() => {
return results.map((item) => ({
Expand All @@ -217,15 +215,20 @@ function ItemResultsBox() {

function AlbumResultsBox() {
const { results } = useSearchContext() as { results: MinimalAlbum[] };
const params = Route.useParams<RouteParams>();

const data = useMemo(() => {
return results.map((album) => ({
to: `/library/search/$type/$id`,
params: { type: "album", id: album.id },
label: `${album.albumartist} - ${album.name}`,
className: styles.listItem,
"data-selected": params.type === "album" && params.id && params.id == album.id,
}));
}, [results]);
}, [results, params]);

return (
<Paper className={styles.h100w100}>
<Paper className={styles.SearchResults}>
<Box className={styles.h100w100}>
<List data={data}>{List.Item}</List>
</Box>
Expand Down

0 comments on commit 010e9ef

Please sign in to comment.