Skip to content
This repository has been archived by the owner on Dec 17, 2024. It is now read-only.

Commit

Permalink
use categoryList for drop view
Browse files Browse the repository at this point in the history
  • Loading branch information
greg6775 committed Dec 7, 2024
1 parent 438c5ee commit 57d5207
Show file tree
Hide file tree
Showing 7 changed files with 150 additions and 170 deletions.
2 changes: 1 addition & 1 deletion pages/music/edit.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { permCheck, RegisterAuthRefresh, renewAccessTokenIfNeeded, saveBlob, showPreviewImage, streamingImages } from "shared/helper.ts";
import { API, stupidErrorAlert } from "shared/mod.ts";
import { appendBody, asRef, Color, Empty, Grid, isMobile, Label } from "webgen/mod.ts";
import "../../assets/css/main.css";
import "../../assets/css/music.css";
import { DynaNavigation } from "../../components/nav.ts";
import { Drop, DropType, Share } from "../../spec/music.ts";
import { permCheck, RegisterAuthRefresh, renewAccessTokenIfNeeded, saveBlob, showPreviewImage, streamingImages } from "../shared/helper.ts";
import { ChangeDrop } from "./views/changeDrop.ts";
import { ChangeSongs } from "./views/changeSongs.ts";
import { DropTypeToText } from "./views/list.ts";
Expand Down
13 changes: 3 additions & 10 deletions pages/music/pages/draftDrops.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { API, stupidErrorAlert } from "shared/restSpec.ts";
import { asRef, Box, Content, createPage, createRoute, Entry, Grid, Label, Spinner } from "webgen/mod.ts";
import { asRef, Box, Content, createPage, createRoute, Grid, Spinner } from "webgen/mod.ts";
import { Drop, DropType } from "../../../spec/music.ts";
import { musicList } from "../views/list.ts";

const data = asRef<"loading" | Drop[]>("loading");

Expand All @@ -23,15 +24,7 @@ export const draftsDropsPage = createPage(
Content(
Box(data.map((data) => data === "loading" ? Spinner() : [])),
Grid(
source.map((items) =>
items.map((item) =>
Entry(
Label(item.title ?? "(Untitled)")
.setMargin("35px 0"),
)
.onClick(() => location.href = `/c/music/new-drop?id=${item._id}`)
)
),
source.map((items) => musicList(items, DropType.Unsubmitted)),
),
),
);
11 changes: 3 additions & 8 deletions pages/music/pages/publishedDrops.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { API, stupidErrorAlert } from "shared/mod.ts";
import { asRef, Box, Content, createPage, createRoute, Entry, Grid, Label, Spinner } from "webgen/mod.ts";
import { asRef, Box, Content, createPage, createRoute, Grid, Spinner } from "webgen/mod.ts";
import { Drop, DropType } from "../../../spec/music.ts";
import { musicList } from "../views/list.ts";

const data = asRef<"loading" | Drop[]>("loading");

Expand All @@ -23,13 +24,7 @@ export const publishedDrops = createPage(
Content(
Box(data.map((data) => data === "loading" ? Spinner() : [])),
Grid(
source.map((items) =>
items.map((item) =>
Entry(
Label(item.title),
)
)
),
source.map((items) => musicList(items, DropType.Published)),
),
),
);
11 changes: 3 additions & 8 deletions pages/music/pages/unpublishedDrops.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { API, stupidErrorAlert } from "shared/mod.ts";
import { asRef, Box, Content, createPage, createRoute, Entry, Grid, Label, Spinner } from "webgen/mod.ts";
import { asRef, Box, Content, createPage, createRoute, Grid, Spinner } from "webgen/mod.ts";
import { Drop, DropType } from "../../../spec/music.ts";
import { musicList } from "../views/list.ts";

const data = asRef<"loading" | Drop[]>("loading");

Expand All @@ -27,13 +28,7 @@ export const unpublishedDropsPage = createPage(
Content(
Box(data.map((data) => data === "loading" ? Spinner() : [])),
Grid(
source.map((items) =>
items.map((item) =>
Entry(
Label(item.title),
)
)
),
source.map((items) => musicList(items, DropType.Private)),
),
),
);
45 changes: 18 additions & 27 deletions pages/music/views/list.ts
Original file line number Diff line number Diff line change
@@ -1,29 +1,22 @@
import { showPreviewImage } from "shared/helper.ts";
import { placeholder } from "shared/mod.ts";
import { CenterV, Component, Empty, Entry, Image, isMobile, Label, Vertical } from "webgen/mod.ts";
import { placeholder } from "shared/list.ts";
import { asRef, Box, Empty, Entry, Grid, Image, Label } from "webgen/mod.ts";
import { templateArtwork } from "../../../assets/imports.ts";
import { type Artist, Drop, DropType } from "../../../spec/music.ts";

export function DropEntry(x: Drop) {
return Entry({
title: x.title ?? "(no drop name)",
subtitle: `${x.release ?? "(no release date)"} - ${x.gtin ?? "(no GTIN)"}`,
})
.addClass(isMobile.map((mobile) => mobile ? "small" : "normal"))
.addPrefix(showPreviewImage(x).addClass("image-square"))
return Entry(Grid(
Label(x.title ?? "(no drop name)"),
Label(`${x.release ?? "(no release date)"} - ${x.gtin ?? "(no GTIN)"}`),
))
.addPrefix(showPreviewImage(x))
.addSuffix((() => {
if (x.type == DropType.UnderReview) {
return CenterV(
Label("Under Review")
.addClass("entry-subtitle", "under-review"),
);
return Label("Under Review");
}

if (x.type == DropType.ReviewDeclined) {
return CenterV(
Label("Declined")
.addClass("entry-subtitle", "under-review"),
);
return Label("Declined");
}

return Empty();
Expand All @@ -43,12 +36,11 @@ export function ArtistEntry(x: Artist) {
// LinkButton("Apple Music", "fdgdf"),
// ).setGap(),
// )
.addPrefix(Image(templateArtwork, "Artist Profile Picture").addClass("image-square"))
.addClass(isMobile.map((mobile) => mobile ? "small" : "normal"));
.addPrefix(Image(templateArtwork, "Artist Profile Picture"));
}

export const musicList = (list: Drop[], type: DropType) =>
Vertical(
Grid(
CategoryRender(
list.filter((_, i) => i == 0),
"Latest Drop",
Expand All @@ -57,19 +49,18 @@ export const musicList = (list: Drop[], type: DropType) =>
list.filter((_, i) => i > 0),
"History",
),
list.length == 0 ? placeholder("No Drops", `You don’t have any ${EnumToDisplay(type)} Drops`) : null,
list.length == 0 ? placeholder("No Drops", `You don’t have any ${EnumToDisplay(type)} Drops`) : Empty(),
)
.setGap("20px");

export function CategoryRender(dropList: Drop[], title: string): Component[] | null {
export function CategoryRender(dropList: Drop[], title: string) {
if (dropList.length == 0) {
return null;
return Empty();
}
return [
Label(title)
.addClass("list-title"),
Vertical(...dropList.map((x) => DropEntry(x))).setGap("1rem"),
];
return Box(
Label(title),
Grid(asRef(dropList.map((x) => DropEntry(x)))).setGap("1rem"),
);
}

export function EnumToDisplay(state: DropType) {
Expand Down
14 changes: 11 additions & 3 deletions pages/shared/helper.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { fail } from "@std/assert/fail";
import { LruCache, memoize } from "@std/cache";
import { API, fileCache, Permission, stupidErrorAlert } from "shared/mod.ts";
import { asRef, asRefRecord, Async, Component, DropDown, Empty, Grid, Image, ImageComponent, PrimaryButton, SheetHeader, Sheets, Spinner, WriteSignal } from "webgen/mod.ts";
import { asRef, asRefRecord, Async, Component, DropDown, Grid, Image, ImageComponent, PrimaryButton, SheetHeader, Sheets, Spinner, WriteSignal } from "webgen/mod.ts";
import { templateArtwork } from "../../assets/imports.ts";
import { loginRequired } from "../../components/pages.ts";
import { Drop, Song } from "../../spec/music.ts";

Expand Down Expand Up @@ -182,8 +183,15 @@ export function saveBlob(blob: Blob, fileName: string) {
}

export function showPreviewImage(x: Drop) {
return Empty();
// return x.artwork ? Cache(`image-preview-${x.artwork}`, () => Promise.resolve(), (type) => type == "loaded" ? Image({ type: "direct", source: () => loadImage(x) }, "A Song Artwork") : Box()) : Image(templateArtwork, "A Placeholder Artwork.");
return x.artwork
? Async(
(async () => {
const image = await API.music.id(x._id).artwork().then(stupidErrorAlert);
return Image(URL.createObjectURL(image), "");
})(),
Spinner(),
)
: Image(templateArtwork, "A Placeholder Artwork.");
}

async function loadImage(x: Drop) {
Expand Down
Loading

0 comments on commit 57d5207

Please sign in to comment.