clean up thumbnail selector & add better error handling & informing

webrecorder · Jan 30, 2025 · 32078be · 32078be
1 parent 77a47ec
commit 32078be
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 90 deletions.
diff --git a/frontend/src/features/collections/collection-edit-dialog.ts b/frontend/src/features/collections/collection-edit-dialog.ts
@@ -17,7 +17,6 @@ import renderGeneral from "./edit-dialog/general-section";
 import checkChanged from "./edit-dialog/helpers/check-changed";
 import submitTask from "./edit-dialog/helpers/submit-task";
 import { type CollectionShareSettings } from "./edit-dialog/sharing-section";
-import { type CollectionThumbnailSelect } from "./edit-dialog/thumbnail-select";
 
 import { BtrixElement } from "@/classes/BtrixElement";
 import type { Dialog } from "@/components/ui/dialog";
@@ -110,8 +109,8 @@ export class CollectionEdit extends BtrixElement {
   @queryAsync("btrix-collection-share-settings")
   readonly shareSettings?: Promise<CollectionShareSettings>;
 
-  @query("btrix-collection-thumbnail-select")
-  readonly thumbnailSelector?: CollectionThumbnailSelect;
+  // @query("btrix-collection-thumbnail-select")
+  // readonly thumbnailSelector?: CollectionThumbnailSelect;
 
   @query("btrix-collection-snapshot-preview")
   public readonly thumbnailPreview?: CollectionSnapshotPreview | null;
@@ -124,7 +123,10 @@ export class CollectionEdit extends BtrixElement {
       this.onReset();
       this.collection = undefined;
     }
-    if (changedProperties.has("collection")) {
+    if (
+      changedProperties.has("collection") &&
+      changedProperties.get("collection")?.id != this.collection?.id
+    ) {
       this.defaultThumbnailName =
         (this.collection?.defaultThumbnailName as `${Thumbnail}` | null) ||
         null;
@@ -171,6 +173,7 @@ export class CollectionEdit extends BtrixElement {
     this.dirty = false;
     this.errorTab = null;
     this.blobIsLoaded = false;
+    console.log("BBBBB");
     this.selectedSnapshot = this.collection?.thumbnailSource ?? null;
     this.defaultThumbnailName =
       (this.collection?.defaultThumbnailName as

diff --git a/frontend/src/features/collections/collection-snapshot-preview.ts b/frontend/src/features/collections/collection-snapshot-preview.ts
@@ -66,7 +66,7 @@ export class CollectionSnapshotPreview extends TailwindElement {
     return this.blobTask.taskComplete.then(() => this.blobTask.value);
   }
 
-  private readonly blobTask = new Task(this, {
+  public readonly blobTask = new Task(this, {
     task: async ([collectionId, snapshot], { signal }) => {
       try {
         console.debug("waiting for iframe to load", { collectionId, snapshot });
@@ -231,9 +231,9 @@ export class CollectionSnapshotPreview extends TailwindElement {
 
   private readonly renderError = () => html`
     <p
-      class="absolute inset-0 z-20 my-auto grid place-content-center text-balance bg-red-50 p-3 text-xs text-danger"
+      class="absolute inset-0 z-20 my-auto grid place-content-center text-balance bg-neutral-50 p-3 text-xs text-neutral-500"
     >
-      ${msg("Couldn't load preview. Try another URL or timestamp.")}
+      ${msg("This page doesn’t have a preview. Try another URL or timestamp.")}
     </p>
   `;
 

diff --git a/frontend/src/features/collections/edit-dialog/general-section.ts b/frontend/src/features/collections/edit-dialog/general-section.ts
@@ -1,4 +1,5 @@
 import { msg } from "@lit/localize";
+import { TaskStatus } from "@lit/task";
 import { type SlInput } from "@shoelace-style/shoelace";
 import clsx from "clsx";
 import { html, nothing } from "lit";
@@ -16,8 +17,9 @@ import {
   DEFAULT_THUMBNAIL_VARIANT,
   Thumbnail,
 } from "../collection-thumbnail";
+import { type SelectSnapshotDetail } from "../select-collection-start-page";
 
-import { sourceToSnapshot } from "./helpers/snapshots";
+import { snapshotToSource, sourceToSnapshot } from "./helpers/snapshots";
 
 import type { PublicCollection } from "@/types/collection";
 import { tw } from "@/utils/tailwind";
@@ -61,16 +63,44 @@ export default function renderGeneral(this: CollectionEdit) {
       </span>
     </sl-input>
     <div class="mb-7">${renderThumbnails.bind(this)()}</div>
-    <btrix-collection-thumbnail-select
-      .collection=${this.collection}
-      .replayLoaded=${this.replayLoaded}
-      @btrix-change=${async () => {
-        await this.updateComplete;
-        this.selectedSnapshot =
-          this.thumbnailSelector?.selectedSnapshot ?? null;
-      }}
-    >
-    </btrix-collection-thumbnail-select>`;
+    <section>
+      <btrix-select-collection-page
+        mode="thumbnail"
+        .collection=${this.collection}
+        .collectionId=${this.collection.id}
+        .initialSelectedSnapshot=${this.selectedSnapshot
+          ? {
+              pageId: this.selectedSnapshot.urlPageId,
+              ts: this.selectedSnapshot.urlTs,
+              status: 200,
+            }
+          : undefined}
+        @btrix-select=${async (e: CustomEvent<SelectSnapshotDetail>) => {
+          if (!e.detail.item) return;
+          this.dispatchEvent(new CustomEvent("btrix-change"));
+          await this.updateComplete;
+          this.selectedSnapshot = snapshotToSource(e.detail.item);
+        }}
+      >
+        ${this.thumbnailPreview?.blobTask.status === TaskStatus.PENDING
+          ? html`<sl-spinner slot="prefix"></sl-spinner>`
+          : nothing}
+        ${this.thumbnailPreview?.blobTask.status === TaskStatus.ERROR
+          ? html` <sl-tooltip
+              hoist
+              content=${msg(
+                "This page doesn’t have a thumbnail and can’t be used",
+              )}
+              placement="bottom-start"
+            >
+              <sl-icon
+                name="exclamation-lg"
+                class="size-4 text-base text-danger"
+              ></sl-icon>
+            </sl-tooltip>`
+          : nothing}
+      </btrix-select-collection-page>
+    </section> `;
 }
 
 function renderThumbnails(this: CollectionEdit) {
@@ -214,7 +244,7 @@ function renderPageThumbnail(
     (!!this.selectedSnapshot && this.blobIsLoaded) || !!initialPath;
 
   console.log({
-    selectedSnapshot: !!this.selectedSnapshot,
+    selectedSnapshot: this.selectedSnapshot,
     blobIsLoaded: !!this.blobIsLoaded,
     initialPath: !!initialPath,
   });

diff --git a/frontend/src/features/collections/edit-dialog/helpers/gather-state.ts b/frontend/src/features/collections/edit-dialog/helpers/gather-state.ts
@@ -32,7 +32,7 @@ export default async function gatherState(this: CollectionEdit) {
 
   const formData = serialize(form) as CollectionUpdate;
 
-  const selectedSnapshot = this.thumbnailSelector?.selectedSnapshot;
+  const selectedSnapshot = this.selectedSnapshot;
 
   if (this.defaultThumbnailName == null && !selectedSnapshot) {
     formData.thumbnailSource = null;

diff --git a/frontend/src/features/collections/edit-dialog/thumbnail-select.ts b/frontend/src/features/collections/edit-dialog/thumbnail-select.ts
diff --git a/frontend/src/features/collections/index.ts b/frontend/src/features/collections/index.ts
@@ -10,4 +10,3 @@ import("./select-collection-start-page");
 import("./share-collection");
 import("./collection-thumbnail");
 import("./edit-dialog/sharing-section");
-import("./edit-dialog/thumbnail-select");
diff --git a/frontend/src/features/collections/select-collection-start-page.ts b/frontend/src/features/collections/select-collection-start-page.ts
@@ -275,16 +275,18 @@ export class SelectCollectionPage extends BtrixElement {
           @sl-blur=${this.pageUrlOnBlur}
         >
           <div slot="prefix" class="inline-flex items-center">
-            <sl-tooltip
-              hoist
-              content=${prefix.tooltip}
-              placement="bottom-start"
-            >
-              <sl-icon
-                name=${prefix.icon}
-                class=${clsx(tw`size-4 text-base`, prefix.className)}
-              ></sl-icon>
-            </sl-tooltip>
+            <slot name="prefix">
+              <sl-tooltip
+                hoist
+                content=${prefix.tooltip}
+                placement="bottom-start"
+              >
+                <sl-icon
+                  name=${prefix.icon}
+                  class=${clsx(tw`size-4 text-base`, prefix.className)}
+                ></sl-icon>
+              </sl-tooltip>
+            </slot>
           </div>
         </sl-input>
         ${this.renderSearchResults()}