simplify thumbnails

frontend/src/features/collections/collection-metadata-dialog.ts

@@ -208,7 +208,7 @@ export class CollectionMetadataDialog extends BtrixElement {
           this.selectCollectionAccess?.value ||
           this.collection?.access ||
           CollectionAccess.Private,
-        defaultThumbnailName: DEFAULT_THUMBNAIL.fileName,
+        defaultThumbnailName: DEFAULT_THUMBNAIL.name,
       });
       let path = `/orgs/${this.orgId}/collections`;
       let method = "POST";
@@ -229,7 +229,9 @@ export class CollectionMetadataDialog extends BtrixElement {
         }) as CollectionSavedEvent,
       );
       this.notify.toast({
-        message: msg(str`"${data.name || name}" metadata updated`),
+        message: this.collection
+          ? msg(str`"${data.name || name}" metadata updated`)
+          : msg(str`Created "${data.name || name}" collection`),
         variant: "success",
         icon: "check2-circle",
         id: "collection-metadata-status",

frontend/src/features/collections/collection-replay-dialog.ts

@@ -4,6 +4,7 @@ import { serialize } from "@shoelace-style/shoelace/dist/utilities/form.js";
 import { html, nothing, type PropertyValues } from "lit";
 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";
@@ -245,12 +246,19 @@ export class CollectionStartPageDialog extends BtrixElement {
 
   private renderReplay() {
     const replaySource = `/api/orgs/${this.orgId}/collections/${this.collectionId}/replay.json`;
+    // TODO Get query from replay-web-page embed
+    const query = queryString.stringify({
+      source: replaySource,
+      customColl: this.collectionId,
+      embed: "default",
+      noCache: 1,
+    });
 
     return html`<div class="aspect-video w-[200%]">
       <div class="pointer-events-none aspect-video origin-top-left scale-50">
         <iframe
           class="inline-block size-full"
-          src=${`/replay/?source=${window.encodeURIComponent(replaySource)}&embed=default&noCache=1#view=pages`}
+          src=${`/replay/?${query}#view=pages`}
         ></iframe>
       </div>
     </div>`;
@@ -271,16 +279,10 @@ export class CollectionStartPageDialog extends BtrixElement {
       });
 
       const shouldUpload = homeView === HomeView.URL && useThumbnail === "on";
-      const { fileName } = CollectionThumbnail.Variants[Thumbnail.Custom];
+      const { name: fileName } = CollectionThumbnail.Variants[Thumbnail.Custom];
       let file: File | undefined;
 
       if (shouldUpload && this.thumbnailPreview?.src) {
-        this.notify.toast({
-          message: msg("Updating collection thumbnail..."),
-          variant: "info",
-          icon: "hourglass-split",
-        });
-
         // Wait to get the thumbnail image before closing the dialog
         try {
           const resp = await this.thumbnailPreview.contentWindow!.fetch(
@@ -347,7 +349,7 @@ export class CollectionStartPageDialog extends BtrixElement {
         `/orgs/${this.orgId}/collections/${this.collectionId}`,
         {
           method: "PATCH",
-          body: JSON.stringify({ defaultThumbnailName: fileName }),
+          body: JSON.stringify({ defaultThumbnailName: null }),
         },
       );
 

frontend/src/features/collections/collection-thumbnail.ts

@@ -13,36 +13,34 @@ export enum Thumbnail {
   Green = "thumbnail-green",
   Orange = "thumbnail-orange",
   Yellow = "thumbnail-yellow",
-  Custom = "thumbnail-custom",
+  // Custom = "thumbnail-custom",
 }
 
 @localized()
 @customElement("btrix-collection-thumbnail")
 export class CollectionThumbnail extends BtrixElement {
-  static readonly Variants: Record<
-    Thumbnail,
-    { fileName: string; src?: string }
-  > = {
-    [Thumbnail.Cyan]: {
-      fileName: `${Thumbnail.Cyan}.avif`,
-      src: thumbnailCyanSrc,
-    },
-    [Thumbnail.Green]: {
-      fileName: `${Thumbnail.Green}.avif`,
-      src: thumbnailGreenSrc,
-    },
-    [Thumbnail.Orange]: {
-      fileName: `${Thumbnail.Orange}.avif`,
-      src: thumbnailOrangeSrc,
-    },
-    [Thumbnail.Yellow]: {
-      fileName: `${Thumbnail.Yellow}.avif`,
-      src: thumbnailYellowSrc,
-    },
-    [Thumbnail.Custom]: {
-      fileName: `${Thumbnail.Custom}.jpeg`,
-    },
-  };
+  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`,
+      // },
+    };
 
   @property({ type: String })
   src?: string;
@@ -51,7 +49,7 @@ 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.src!}
+        src=${this.src || DEFAULT_THUMBNAIL.path!}
       />
     `;
   }

frontend/src/features/collections/collections-grid.ts

@@ -72,9 +72,9 @@ export class CollectionsGrid extends BtrixElement {
                     src=${ifDefined(
                       collection.thumbnail?.path ||
                         Object.values(CollectionThumbnail.Variants).find(
-                          ({ fileName }) =>
+                          ({ name: fileName }) =>
                             fileName === collection.defaultThumbnailName,
-                        )?.src,
+                        )?.path,
                     )}
                   ></btrix-collection-thumbnail>
                   ${this.renderDateBadge(collection)}

frontend/src/features/collections/share-collection.ts

@@ -20,15 +20,19 @@ import { SelectCollectionAccess } from "./select-collection-access";
 import { BtrixElement } from "@/classes/BtrixElement";
 import { ClipboardController } from "@/controllers/clipboard";
 import { RouteNamespace } from "@/routes";
-import { CollectionAccess, type Collection } from "@/types/collection";
+import {
+  CollectionAccess,
+  PublicCollection,
+  type Collection,
+} from "@/types/collection";
 import { tw } from "@/utils/tailwind";
 
 export type SelectVisibilityDetail = {
   item: { value: CollectionAccess };
 };
 
 export type SelectThumbnailDetail = {
-  fileName: string;
+  defaultThumbnailName: Thumbnail | null;
 };
 
 /**
@@ -258,47 +262,47 @@ export class ShareCollection extends BtrixElement {
   }
 
   private renderThumbnails() {
-    let selectedImgSrc = DEFAULT_THUMBNAIL.src;
+    let selectedImgSrc = DEFAULT_THUMBNAIL.path;
 
-    if (
-      this.collection?.defaultThumbnailName ===
-        CollectionThumbnail.Variants[Thumbnail.Custom].fileName &&
-      this.collection.thumbnail
-    ) {
-      selectedImgSrc = this.collection.thumbnail.path;
-    } else if (this.collection?.defaultThumbnailName) {
+    if (this.collection?.defaultThumbnailName) {
       const { defaultThumbnailName } = this.collection;
       const thumbnail = Object.values(CollectionThumbnail.Variants).find(
-        ({ fileName }) => fileName === defaultThumbnailName,
+        ({ name }) => name === defaultThumbnailName,
       );
 
       if (thumbnail) {
-        selectedImgSrc = thumbnail.src;
+        selectedImgSrc = thumbnail.path;
       }
+    } else if (this.collection?.thumbnail) {
+      selectedImgSrc = this.collection.thumbnail.path;
     }
 
-    const thumbnail = (thumbnail: Thumbnail) => {
-      const variant = CollectionThumbnail.Variants[thumbnail];
-      const { fileName } = variant;
-      let { src } = variant;
+    const thumbnail = (
+      thumbnail: Thumbnail | NonNullable<PublicCollection["thumbnail"]>,
+    ) => {
+      let name: Thumbnail | null = null;
+      let path = "";
 
-      if (thumbnail === Thumbnail.Custom) {
-        src = this.collection?.thumbnail?.path;
+      if (Object.values(Thumbnail).some((t) => t === thumbnail)) {
+        name = thumbnail as Thumbnail;
+        path = CollectionThumbnail.Variants[name].path;
+      } else {
+        path = (thumbnail as NonNullable<PublicCollection["thumbnail"]>).path;
       }
 
       let content = html``;
       let tooltipContent = msg("Use thumbnail");
       let classNames = "";
 
-      if (src) {
+      if (path) {
         content = html`
           <div
             class="flex size-full flex-col items-center justify-center bg-cover"
-            style="background-image:url('${src}')"
+            style="background-image:url('${path}')"
           >
-            ${src === selectedImgSrc
+            ${path === selectedImgSrc
               ? html`<sl-icon
-                  class="size-10 text-white drop-shadow"
+                  class="size-10 text-white drop-shadow-md"
                   name="check-lg"
                 ></sl-icon>`
               : nothing}
@@ -319,12 +323,12 @@ export class ShareCollection extends BtrixElement {
               classNames,
             )}
             @click=${() => {
-              if (src) {
+              if (path) {
                 this.dispatchEvent(
                   new CustomEvent<SelectThumbnailDetail>(
                     "btrix-select-thumbnail",
                     {
-                      detail: { fileName },
+                      detail: { defaultThumbnailName: name },
                     },
                   ),
                 );
@@ -341,7 +345,7 @@ export class ShareCollection extends BtrixElement {
 
     return html`
       <div class="flex gap-3">
-        ${when(this.collection?.thumbnail, () => thumbnail(Thumbnail.Custom))}
+        ${when(this.collection?.thumbnail, (t) => thumbnail(t))}
         ${thumbnail(Thumbnail.Cyan)} ${thumbnail(Thumbnail.Green)}
         ${thumbnail(Thumbnail.Yellow)} ${thumbnail(Thumbnail.Orange)}
       </div>

frontend/src/pages/org/collection-detail.ts

@@ -151,7 +151,7 @@ export class CollectionDetail extends BtrixElement {
               e: CustomEvent<SelectThumbnailDetail>,
             ) => {
               e.stopPropagation();
-              void this.updateThumbnail(e.detail.fileName);
+              void this.updateThumbnail(e.detail);
             }}
           ></btrix-share-collection>
           ${when(this.isCrawler, this.renderActions)}
@@ -777,7 +777,11 @@ export class CollectionDetail extends BtrixElement {
     }
   }
 
-  async updateThumbnail(defaultThumbnailName: string) {
+  async updateThumbnail({
+    defaultThumbnailName,
+  }: {
+    defaultThumbnailName: string;
+  }) {
     const prevValue = this.collection?.defaultThumbnailName;
 
     // Optimistic update

frontend/src/types/collection.ts

@@ -19,6 +19,7 @@ export const publicCollectionSchema = z.object({
     .object({
       name: z.string(),
       path: z.string().url(),
+      originalFilename: z.string().nullable().optional(),
     })
     .nullable(),
   defaultThumbnailName: z.string().nullable(),