@internetarchive/collection-browser 0.1.8 → 0.2.0

package/src/tiles/item-tile-image.ts

@@ -0,0 +1,61 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { TileModel } from '../models';
+
+import './image/item-image';
+import './image/waveform-image';
+
+@customElement('item-tile-image')
+export class ItemTileImage extends LitElement {
+  @property({ type: Object }) model?: TileModel;
+
+  @property({ type: String }) baseImageUrl?: string;
+
+  @property({ type: Boolean }) isListTile = false;
+
+  @property({ type: Boolean }) isCompactTile = false;
+
+  render() {
+    return html`
+      ${this.isWithWaveformMediatype
+        ? this.waveformImageTemplate
+        : this.itemImageTemplate}
+    `;
+  }
+
+  private get imageSrc() {
+    return `${this.baseImageUrl}/services/img/${this.model?.identifier}`;
+  }
+
+  private get isWithWaveformMediatype() {
+    return (
+      this.model?.mediatype === 'audio' || this.model?.mediatype === 'etree'
+    );
+  }
+
+  // Templates
+  private get itemImageTemplate() {
+    return html`
+      <item-image
+        .model=${this.model}
+        .imageSrc=${this.imageSrc}
+        .isCompactTile=${this.isCompactTile}
+        .isListTile=${this.isListTile}
+      >
+      </item-image>
+    `;
+  }
+
+  private get waveformImageTemplate() {
+    return html`
+      <waveform-image
+        .imageSrc=${this.imageSrc}
+        .identifier=${this.model?.identifier}
+        .isCompactTile=${this.isCompactTile}
+        .isListTile=${this.isListTile}
+      >
+      </waveform-image>
+    `;
+  }
+}

package/src/tiles/list/tile-list-compact.ts

@@ -3,10 +3,13 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { customElement, property } from 'lit/decorators.js';
 import { SortParam } from '@internetarchive/search-service';
 import DOMPurify from 'dompurify';
+
 import { TileModel } from '../../models';
 import { formatCount, NumberFormat } from '../../utils/format-count';
 import { formatDate, DateFormat } from '../../utils/format-date';
 import { accountLabel } from './account-label';
+
+import '../item-image';
 import '../mediatype-icon';
 
 @customElement('tile-list-compact')
@@ -71,6 +74,7 @@ export class TileListCompact extends LitElement {
         .baseImageUrl=${this.baseImageUrl}
         .isListTile=${true}
         .isCompactTile=${true}
+        style="--imgHeight: 100%; --imgWidth: 100%"
       >
       </item-image>
     `;

package/src/tiles/list/tile-list.ts

@@ -10,14 +10,18 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { join } from 'lit/directives/join.js';
 import { map } from 'lit/directives/map.js';
 import { customElement, property, state } from 'lit/decorators.js';
+
+import { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
 import { SortParam } from '@internetarchive/search-service';
 import DOMPurify from 'dompurify';
-import { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+
 import { dateLabel } from './date-label';
 import { accountLabel } from './account-label';
 import { TileModel } from '../../models';
 import { formatCount, NumberFormat } from '../../utils/format-count';
 import { formatDate, DateFormat } from '../../utils/format-date';
+
+import '../item-image';
 import '../mediatype-icon';
 
 @customElement('tile-list')
@@ -143,6 +147,7 @@ export class TileList extends LitElement {
         .model=${this.model}
         .baseImageUrl=${this.baseImageUrl}
         .isListTile=${true}
+        style="--imgHeight: 100%; --imgWidth: 100%"
       >
       </item-image>
     `;

package/tsconfig.json

@@ -16,5 +16,5 @@
     "rootDir": "./",
     "declaration": true
   },
-  "include": ["**/*.ts"]
+  "include": ["src", "test", "index.ts"],
 }

package/vite.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '',
+  build: {
+    outDir: 'ghpages',
+    manifest: true,
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+      },
+    },
+  },
+  server: {
+    host: true,
+    port: 8080,
+    open: true,
+    cors: true,
+  },
+});

package/web-dev-server.config.mjs

@@ -5,7 +5,7 @@ const hmr = process.argv.includes('--hmr');
 
 export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
   nodeResolve: true,
-  open: '/demo/',
+  open: '/',
   watch: !hmr,
 
   /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */