Skip to content

Commit

Permalink
hide replay tab if no items
Browse files Browse the repository at this point in the history
  • Loading branch information
@SuaYoo
SuaYoo committed Dec 16, 2024
1 parent 751dc4a commit 37c458a
Show file tree
Hide file tree
Showing 9 changed files with 135 additions and 156 deletions.
2 changes: 1 addition & 1 deletion frontend/src/features/collections/collection-metadata-dialog.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ export class CollectionMetadataDialog extends BtrixElement {
this.selectCollectionAccess?.value ||
this.collection?.access ||
CollectionAccess.Private,
defaultThumbnailName: DEFAULT_THUMBNAIL.name,
defaultThumbnailName: DEFAULT_THUMBNAIL,
});
let path = `/orgs/${this.orgId}/collections`;
let method = "POST";
Expand Down
108 changes: 55 additions & 53 deletions frontend/src/features/collections/collection-replay-dialog.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { customElement, property, query, state } from "lit/decorators.js";
import { when } from "lit/directives/when.js";
import queryString from "query-string";

import { CollectionThumbnail, Thumbnail } from "./collection-thumbnail";
import type { SelectSnapshotDetail } from "./select-collection-start-page";

import { BtrixElement } from "@/classes/BtrixElement";
Expand Down Expand Up @@ -40,12 +39,14 @@ export class CollectionStartPageDialog extends BtrixElement {
@property({ type: String })
collectionId?: string;

@property({ type: Object })
home?: {
url: string | null;
pageId: string | null;
ts: string | null;
};
@property({ type: String })
homeUrl?: string | null = null;

@property({ type: String })
homePageId?: string | null = null;

@property({ type: String })
homeTs?: string | null = null;

@property({ type: Boolean })
open = false;
Expand Down Expand Up @@ -75,7 +76,7 @@ export class CollectionStartPageDialog extends BtrixElement {
private readonly thumbnailPreview?: HTMLIFrameElement | null;

willUpdate(changedProperties: PropertyValues<this>) {
if (changedProperties.has("home") && this.home?.url) {
if (changedProperties.has("homeUrl") && this.homeUrl) {
this.homeView = HomeView.URL;
}
}
Expand Down Expand Up @@ -131,7 +132,13 @@ export class CollectionStartPageDialog extends BtrixElement {
${msg("Enter a Page URL to preview it")}
</p>
`;
const snapshot = this.home?.url ? this.home : this.selectedSnapshot;
const snapshot = this.homeUrl
? {
url: this.homeUrl,
ts: this.homeTs,
pageId: this.homePageId,
}
: this.selectedSnapshot;

if (snapshot) {
urlPreview = html`
Expand Down Expand Up @@ -215,8 +222,8 @@ export class CollectionStartPageDialog extends BtrixElement {
<section>
<btrix-select-collection-start-page
.collectionId=${this.collectionId}
.homeUrl=${this.home?.url}
.homeTs=${this.home?.ts}
.homeUrl=${this.homeUrl}
.homeTs=${this.homeTs}
@btrix-select=${async (
e: CustomEvent<SelectSnapshotDetail>,
) => {
Expand Down Expand Up @@ -252,6 +259,7 @@ export class CollectionStartPageDialog extends BtrixElement {
customColl: this.collectionId,
embed: "default",
noCache: 1,
noSandbox: 1,
});

return html`<div class="aspect-video w-[200%]">
Expand All @@ -278,16 +286,21 @@ export class CollectionStartPageDialog extends BtrixElement {
(homeView === HomeView.URL && this.selectedSnapshot?.pageId) || null,
});

const shouldUpload = homeView === HomeView.URL && useThumbnail === "on";
const { name: fileName } = CollectionThumbnail.Variants[Thumbnail.Custom];
const shouldUpload =
homeView === HomeView.URL &&
useThumbnail === "on" &&
this.selectedSnapshot &&
this.homePageId !== this.selectedSnapshot.pageId;
// TODO get filename from rwp?
const fileName = `page-thumbnail_${this.selectedSnapshot?.pageId}.jpeg`;
let file: File | undefined;

if (shouldUpload && this.thumbnailPreview?.src) {
const { src } = this.thumbnailPreview;

// Wait to get the thumbnail image before closing the dialog
try {
const resp = await this.thumbnailPreview.contentWindow!.fetch(
this.thumbnailPreview.src,
);
const resp = await this.thumbnailPreview.contentWindow!.fetch(src);
const blob = await resp.blob();

file = new File([blob], fileName, {
Expand All @@ -308,9 +321,22 @@ export class CollectionStartPageDialog extends BtrixElement {
this.open = false;

if (shouldUpload) {
if (file) {
void this.uploadThumbnail({ file, fileName });
} else {
try {
if (!file || !fileName) throw new Error("file or fileName missing");
await this.api.upload(
`/orgs/${this.orgId}/collections/${this.collectionId}/thumbnail?filename=${fileName}`,
file,
);
await this.updateThumbnail({ defaultThumbnailName: null });

this.notify.toast({
message: msg("Home view and collection thumbnail updated."),
variant: "success",
icon: "check2-circle",
});
} catch (err) {
console.debug(err);

this.notify.toast({
message: msg(
"Home view updated, but couldn't update collection thumbnail at this time.",
Expand All @@ -333,42 +359,18 @@ export class CollectionStartPageDialog extends BtrixElement {
}
}

private async uploadThumbnail({
file,
fileName,
private async updateThumbnail({
defaultThumbnailName,
}: {
file: File;
fileName: string;
defaultThumbnailName: string | null;
}) {
try {
await this.api.upload(
`/orgs/${this.orgId}/collections/${this.collectionId}/thumbnail?filename=${window.encodeURIComponent(fileName)}`,
file,
);
await this.api.fetch<{ updated: boolean }>(
`/orgs/${this.orgId}/collections/${this.collectionId}`,
{
method: "PATCH",
body: JSON.stringify({ defaultThumbnailName: null }),
},
);

this.notify.toast({
message: msg("Home view and collection thumbnail updated."),
variant: "success",
icon: "check2-circle",
});
} catch (err) {
console.debug(err);

this.notify.toast({
message: msg(
"Home view updated, but couldn't update collection thumbnail at this time.",
),
variant: "warning",
icon: "exclamation-triangle",
});
}
return this.api.fetch<{ updated: boolean }>(
`/orgs/${this.orgId}/collections/${this.collectionId}`,
{
method: "PATCH",
body: JSON.stringify({ defaultThumbnailName }),
},
);
}

private async updateUrl({ pageId }: { pageId: string | null }) {
Expand Down
44 changes: 19 additions & 25 deletions frontend/src/features/collections/collection-thumbnail.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,34 +13,27 @@ export enum Thumbnail {
Green = "thumbnail-green",
Orange = "thumbnail-orange",
Yellow = "thumbnail-yellow",
// Custom = "thumbnail-custom",
}

export const DEFAULT_THUMBNAIL = Thumbnail.Cyan;

@localized()
@customElement("btrix-collection-thumbnail")
export class CollectionThumbnail extends BtrixElement {
static readonly Variants: Record<Thumbnail, { name: string; path: string }> =
{
[Thumbnail.Cyan]: {
name: `${Thumbnail.Cyan}.avif`,
path: thumbnailCyanSrc,
},
[Thumbnail.Green]: {
name: `${Thumbnail.Green}.avif`,
path: thumbnailGreenSrc,
},
[Thumbnail.Orange]: {
name: `${Thumbnail.Orange}.avif`,
path: thumbnailOrangeSrc,
},
[Thumbnail.Yellow]: {
name: `${Thumbnail.Yellow}.avif`,
path: thumbnailYellowSrc,
},
// [Thumbnail.Custom]: {
// name: `${Thumbnail.Custom}.jpeg`,
// },
};
static readonly Variants: Record<Thumbnail, { path: string }> = {
[Thumbnail.Cyan]: {
path: thumbnailCyanSrc,
},
[Thumbnail.Green]: {
path: thumbnailGreenSrc,
},
[Thumbnail.Orange]: {
path: thumbnailOrangeSrc,
},
[Thumbnail.Yellow]: {
path: thumbnailYellowSrc,
},
};

@property({ type: String })
src?: string;
Expand All @@ -49,10 +42,11 @@ export class CollectionThumbnail extends BtrixElement {
return html`
<img
class="aspect-video rounded-lg border border-cyan-100 bg-slate-50 object-cover"
src=${this.src || DEFAULT_THUMBNAIL.path!}
src=${this.src || DEFAULT_THUMBNAIL_VARIANT.path}
/>
`;
}
}

export const DEFAULT_THUMBNAIL = CollectionThumbnail.Variants[Thumbnail.Cyan];
export const DEFAULT_THUMBNAIL_VARIANT =
CollectionThumbnail.Variants[DEFAULT_THUMBNAIL];
7 changes: 3 additions & 4 deletions frontend/src/features/collections/collections-grid.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,9 @@ export class CollectionsGrid extends BtrixElement {
<btrix-collection-thumbnail
src=${ifDefined(
collection.thumbnail?.path ||
Object.values(CollectionThumbnail.Variants).find(
({ name: fileName }) =>
fileName === collection.defaultThumbnailName,
)?.path,
Object.entries(CollectionThumbnail.Variants).find(
([name]) => name === collection.defaultThumbnailName,
)?.[1].path,
)}
></btrix-collection-thumbnail>
${this.renderDateBadge(collection)}
Expand Down
81 changes: 31 additions & 50 deletions frontend/src/features/collections/share-collection.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,14 @@ import type {
SlDetails,
SlSelectEvent,
} from "@shoelace-style/shoelace";
import clsx from "clsx";
import { html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { when } from "lit/directives/when.js";

import {
CollectionThumbnail,
DEFAULT_THUMBNAIL,
DEFAULT_THUMBNAIL_VARIANT,
Thumbnail,
} from "./collection-thumbnail";
import { SelectCollectionAccess } from "./select-collection-access";
Expand All @@ -22,10 +21,9 @@ import { ClipboardController } from "@/controllers/clipboard";
import { RouteNamespace } from "@/routes";
import {
CollectionAccess,
PublicCollection,
type Collection,
type PublicCollection,
} from "@/types/collection";
import { tw } from "@/utils/tailwind";

export type SelectVisibilityDetail = {
item: { value: CollectionAccess };
Expand Down Expand Up @@ -262,16 +260,16 @@ export class ShareCollection extends BtrixElement {
}

private renderThumbnails() {
let selectedImgSrc = DEFAULT_THUMBNAIL.path;
let selectedImgSrc = DEFAULT_THUMBNAIL_VARIANT.path;

if (this.collection?.defaultThumbnailName) {
const { defaultThumbnailName } = this.collection;
const thumbnail = Object.values(CollectionThumbnail.Variants).find(
({ name }) => name === defaultThumbnailName,
const variant = Object.entries(CollectionThumbnail.Variants).find(
([name]) => name === defaultThumbnailName,
);

if (thumbnail) {
selectedImgSrc = thumbnail.path;
if (variant) {
selectedImgSrc = variant[1].path;
}
} else if (this.collection?.thumbnail) {
selectedImgSrc = this.collection.thumbnail.path;
Expand All @@ -290,54 +288,37 @@ export class ShareCollection extends BtrixElement {
path = (thumbnail as NonNullable<PublicCollection["thumbnail"]>).path;
}

let content = html``;
let tooltipContent = msg("Use thumbnail");
let classNames = "";

if (path) {
content = html`
<div
class="flex size-full flex-col items-center justify-center bg-cover"
style="background-image:url('${path}')"
>
${path === selectedImgSrc
? html`<sl-icon
class="size-10 text-white drop-shadow-md"
name="check-lg"
></sl-icon>`
: nothing}
</div>
`;
} else {
content = html`<sl-icon class="size-10" name="plus"></sl-icon>`;
tooltipContent = msg("Choose page thumbnail");
// Render as select button
classNames = tw`flex flex-col items-center justify-center bg-neutral-50 text-blue-400 hover:text-blue-500`;
if (!path) {
console.debug("no path for thumbnail:", thumbnail);
return;
}

return html`
<sl-tooltip content=${tooltipContent || msg("Use thumbnail")}>
<sl-tooltip content=${msg("Use thumbnail")}>
<button
class=${clsx(
"flex-1 aspect-video overflow-hidden rounded ring-1 ring-neutral-300 transition-all hover:ring-2 hover:ring-blue-300",
classNames,
)}
class="aspect-video flex-1 overflow-hidden rounded ring-1 ring-neutral-300 transition-all hover:ring-2 hover:ring-blue-300"
@click=${() => {
if (path) {
this.dispatchEvent(
new CustomEvent<SelectThumbnailDetail>(
"btrix-select-thumbnail",
{
detail: { defaultThumbnailName: name },
},
),
);
} else {
console.log("TODO choose");
}
this.dispatchEvent(
new CustomEvent<SelectThumbnailDetail>(
"btrix-select-thumbnail",
{
detail: { defaultThumbnailName: name },
},
),
);
}}
>
${content}
<div
class="flex size-full flex-col items-center justify-center bg-cover"
style="background-image:url('${path}')"
>
${path === selectedImgSrc
? html`<sl-icon
class="size-10 text-white drop-shadow-md"
name="check-lg"
></sl-icon>`
: nothing}
</div>
</button>
</sl-tooltip>
`;
Expand Down
Loading

0 comments on commit 37c458a

Please sign in to comment.