npm - @3sln/trove - Versions diffs - 0.0.13 → 0.0.16 - Mend

@3sln/trove 0.0.13 → 0.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/package.json +1 -1
package/packages/core/src/indexing.js +19 -0
package/packages/web/dist/assets/{main-828yzsr7.js → main-wpfmmbfd.js} +16 -16
package/packages/web/dist/assets/{main-828yzsr7.js.map → main-wpfmmbfd.js.map} +5 -5
package/packages/web/dist/index.html +1 -1
package/packages/web/dist/sw.js +1 -1
package/packages/web/src/bl/fileType.js +43 -0
package/packages/web/src/ui/components/views/grid.js +15 -2
package/packages/web/src/ui/media.js +34 -0

package/packages/web/dist/index.html CHANGED Viewed

@@ -17,6 +17,6 @@
   </head>
   <body>
     <div class="workbench"></div>
-    <script type="module" src="/assets/main-828yzsr7.js"></script>
+    <script type="module" src="/assets/main-wpfmmbfd.js"></script>
   </body>
 </html>

package/packages/web/dist/sw.js CHANGED Viewed

@@ -18,7 +18,7 @@
 // API and FILES deliberately do NOT rotate. API is data, not code, and FILES holds the
 // bytes of files the user pinned for offline use — naming it per build would throw away
 // someone's offline library every time the app was redeployed.
-const SHELL = 'trove-shell-fbe8c37315';
+const SHELL = 'trove-shell-5c503618bc';
 const API = 'trove-api-v1';
 const FILES = 'trove-files-v1';
 const KEEP = new Set([SHELL, API, FILES]);

package/packages/web/src/bl/fileType.js CHANGED Viewed

@@ -43,6 +43,49 @@ export function iconForKind(node) {
   return ICONS[kindOf(node)] || 'file';
 }
+/**
+ * The key an indexer writes a tile picture under, and the ONE key the grid looks for.
+ *
+ * A preset name rather than a per-plugin registration, because a thumbnail is not a
+ * contribution TYPE — it is a fact about a file that any indexer may happen to know. The
+ * audiobook plugin extracts cover art from an m4b's `covr` atom and an LPF's manifest;
+ * a PDF indexer could write its first page under the same key and the grid would draw it
+ * with no change here.
+ *
+ * @see plugins/audiobook/src/coverIndexer.js
+ */
+export const THUMBNAIL_KEY = 'thumbnail';
+/**
+ * A picture to put on this node's tile, or null.
+ *
+ * Contributions are namespaced by contributor, and a view deliberately does not care WHICH
+ * one supplied it: the first that did wins, and a drive with two thumbnail indexers for one
+ * file type has a configuration problem rather than a rendering one.
+ *
+ * TWO SHAPES, because a thumbnail is either already somewhere or it is not:
+ *
+ *   { range: {start, end}, contentType }  the bytes live in the FILE — an m4b's cover art
+ *                                         sits in its `covr` atom — so the contribution
+ *                                         points at them. Eighty bytes on the wire instead
+ *                                         of a base64 copy on every listing.
+ *   { src }                               a self-contained URL, for the cases with nothing
+ *                                         to point at. Small by construction; see the
+ *                                         indexer's cap.
+ *
+ * @returns {{range?: {start: number, end: number}, src?: string, contentType?: string}|null}
+ */
+export function thumbnailOf(node) {
+  const contributions = node?.contributions;
+  if (!contributions) return null;
+  for (const contribution of Object.values(contributions)) {
+    const thumb = contribution?.metadata?.[THUMBNAIL_KEY];
+    if (typeof thumb?.src === 'string' && thumb.src) return thumb;
+    if (Number.isFinite(thumb?.range?.start) && Number.isFinite(thumb?.range?.end)) return thumb;
+  }
+  return null;
+}
 /** Whether a node holds indexable text (drives offline text extraction). */
 export function isTexty(node) {
   return kindOf(node) === 'text';

package/packages/web/src/ui/components/views/grid.js CHANGED Viewed

@@ -15,8 +15,9 @@
 import { dd } from '../../../runtime.js';
 import { icon } from '../../icon.js';
+import { thumbnailOf } from '../../../bl/fileType.js';
 import { groupHeader, menuButton, openRowMenu } from './parts.js';
-import { attachMedia } from '../../media.js';
+import { attachMedia, attachThumbnail } from '../../media.js';
 import { activate } from '../../activate.js';
 const { div, span, img } = dd;
@@ -81,7 +82,11 @@ function columns() {
 function tile(it, active, { hover, select }, ui) {
   const node = it.node;
-  const pictorial = (node?.contentType || '').startsWith('image/');
+  // A contributed thumbnail beats the file itself. It is already a picture of the right
+  // size, it needs no minted URL, and for anything that is not an image it is the only
+  // picture there is — an audiobook's cover art comes this way. See bl/fileType.js.
+  const thumb = thumbnailOf(node);
+  const pictorial = !thumb && (node?.contentType || '').startsWith('image/');
   return div({ className: `grid-tile ${active ? 'active' : ''}`, title: it.detail ? `${it.title} — ${it.detail}` : it.title },
     div({ className: 'gt-media' },
       // The icon is drawn underneath, always. When the image loads it covers it; when
@@ -92,6 +97,14 @@ function tile(it, active, { hover, select }, ui) {
       // The `src` is minted rather than built — a tile fetches without our Authorization
       // header, so the URL has to carry its own grant. Minting is batched (see
       // platform/mediaUrls.js), so a wall of tiles costs one request, not one each.
+      // A contributed thumbnail needs no minted URL: it is either self-contained or a
+      // range inside a file this session may already hold. See ui/media.js.
+      thumb
+        ? img({ className: 'gt-img', alt: '', loading: 'lazy', decoding: 'async' }).on({
+          $attach: (dom) => { dom._detachThumb = attachThumbnail(dom, node, thumb, ui); },
+          $detach: (dom) => { dom._detachThumb?.(); dom._detachThumb = null; },
+        }).opaque()
+        : null,
       pictorial
         ? img({ className: 'gt-img', alt: '', loading: 'lazy', decoding: 'async' }).on({
           $attach: (dom) => {

package/packages/web/src/ui/media.js CHANGED Viewed

@@ -112,3 +112,37 @@ export function attachMedia(el, node, ui, { op = 'media', onError } = {}) {
 function isMedia(el) {
   return typeof el?.play === 'function' && typeof el?.load === 'function';
 }
+/**
+ * Point an `<img>` at a contributed thumbnail — see bl/fileType.js for the two shapes.
+ *
+ * A `src` needs no help. A `range` is bytes inside the file, so they are fetched through
+ * `fileChunks`, which means a pinned book draws its cover with the network off and a book
+ * being kept offline contributes the read. The blob URL is revoked on detach: a wall of
+ * tiles that minted one each and never gave them back would hold every cover in memory for
+ * as long as the tab lived.
+ *
+ * @returns {() => void} detach
+ */
+export function attachThumbnail(el, node, thumb, ui) {
+  if (thumb?.src) {
+    el.src = thumb.src;
+    return () => {};
+  }
+  let url = null;
+  let live = true;
+  ui.platform.fileChunks.read(node.id, thumb.range)
+    .then(({ bytes }) => {
+      if (!live || !bytes?.length) return;
+      url = URL.createObjectURL(new Blob([bytes], { type: thumb.contentType || 'image/jpeg' }));
+      el.src = url;
+    })
+    // A cover that will not load is a tile with an icon on it, which is what the list shows
+    // anyway — not an error worth putting in front of anyone.
+    .catch(() => { el.style.display = 'none'; });
+  return () => {
+    live = false;
+    if (url) URL.revokeObjectURL(url);
+    url = null;
+  };
+}