@internetarchive/collection-browser 0.1.9 → 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>
     `;