@internetarchive/collection-browser 0.1.6 → 0.1.7-alpha-1

package/dist/src/assets/img/icons/restricted.d.ts

@@ -0,0 +1 @@
+export declare const restrictedIcon: import("lit-html").TemplateResult<2>;

package/dist/src/assets/img/icons/restricted.js

@@ -0,0 +1,29 @@
+import { svg } from 'lit';
+export const restrictedIcon = svg `
+  <svg
+    viewBox="0 0 100 100"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g
+      fill="none"
+      fill-rule="evenodd"
+    >
+    <path
+      d="m56.4612493 8.80450354 41.8901185 75.94632926c1.7706782 2.8433173 2.1150372 5.2623412 1.0330766 7.2570716-1.0819604 1.9947304-3.26978 2.9920956-6.5634587 2.9920956h-85.69973905c-3.29367873 0-5.46954894-.9973652-6.52761065-2.9920956-1.0580617-1.9947304-.70175345-4.4137543 1.06892476-7.2570716l41.89011844-75.12308969c1.8184757-2.84331737 3.9693609-4.37738627 6.4526556-4.60220671s4.6341799 1.03483527 6.4526556 3.77896714z"
+      fill="#000"
+      fill-rule="nonzero"
+    />
+    <path
+      d="m94.0140845 90-44.5547054-79-44.4593791 79z"
+      fill="#f8e71c"
+      fill-rule="nonzero"
+    />
+    <path
+      d="m54 69v8h-8v-8zm0-30v10.2515641l-2.0923567 14.7484359h-3.8184713l-2.089172-14.7484359v-10.2515641z"
+      fill="#000"
+    />
+    </g>
+    <title>Content may be inappropriate</title>
+  </svg>
+`;
+//# sourceMappingURL=restricted.js.map

package/dist/src/assets/img/icons/restricted.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"restricted.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/restricted.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BhC,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const restrictedIcon = svg`\n  <svg\n    viewBox=\"0 0 100 100\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g\n      fill=\"none\"\n      fill-rule=\"evenodd\"\n    >\n    <path\n      d=\"m56.4612493 8.80450354 41.8901185 75.94632926c1.7706782 2.8433173 2.1150372 5.2623412 1.0330766 7.2570716-1.0819604 1.9947304-3.26978 2.9920956-6.5634587 2.9920956h-85.69973905c-3.29367873 0-5.46954894-.9973652-6.52761065-2.9920956-1.0580617-1.9947304-.70175345-4.4137543 1.06892476-7.2570716l41.89011844-75.12308969c1.8184757-2.84331737 3.9693609-4.37738627 6.4526556-4.60220671s4.6341799 1.03483527 6.4526556 3.77896714z\"\n      fill=\"#000\"\n      fill-rule=\"nonzero\"\n    />\n    <path\n      d=\"m94.0140845 90-44.5547054-79-44.4593791 79z\"\n      fill=\"#f8e71c\"\n      fill-rule=\"nonzero\"\n    />\n    <path\n      d=\"m54 69v8h-8v-8zm0-30v10.2515641l-2.0923567 14.7484359h-3.8184713l-2.089172-14.7484359v-10.2515641z\"\n      fill=\"#000\"\n    />\n    </g>\n    <title>Content may be inappropriate</title>\n  </svg>\n`;\n"]}

package/dist/src/tiles/item-image.d.ts

@@ -4,22 +4,27 @@ export declare class ItemImage extends LitElement {
     model?: TileModel;
     baseImageUrl?: string;
     isListTile: boolean;
+    isCompactTile: boolean;
     private isDeemphasize;
     private isWaveform;
     private itemImageWaveform;
     protected updated(changed: PropertyValues): void;
-    private setDeemphsize;
+    private setDeemphasize;
     render(): import("lit-html").TemplateResult<1>;
     private get imageSrc();
-    private get backgroundImageTemplate();
+    private get itemImageTemplate();
+    private get tileImageTemplate();
+    private get listImageTemplate();
     private get waveformTemplate();
+    private get restrictedIconTemplate();
     private get tileActionTemplate();
     private onLoadItemImageCheck;
     private get imageClass();
+    private get listImageClass();
     private get imageBoxClass();
     private get boxWaveformClass();
     private get itemImageWaveformClass();
-    private get randomGradient();
-    private generateHashCode;
+    private get hashBasedGradient();
+    private hashStrToInt;
     static get styles(): CSSResultGroup;
 }

package/dist/src/tiles/item-image.js

@@ -2,22 +2,26 @@ import { __decorate } from "tslib";
 import { css, html, nothing, LitElement, } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { restrictedIcon } from '../assets/img/icons/restricted';
 let ItemImage = class ItemImage extends LitElement {
     constructor() {
         super(...arguments);
         this.isListTile = false;
+        this.isCompactTile = false;
         this.isDeemphasize = false;
         this.isWaveform = false;
     }
     updated(changed) {
         if (changed.has('model')) {
-            this.setDeemphsize();
+            this.setDeemphasize();
         }
     }
-    setDeemphsize() {
-        var _a, _b;
+    // Don't deemphasize if item is a collection
+    setDeemphasize() {
+        var _a, _b, _c;
         this.isDeemphasize =
-            (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.collections.includes('deemphasize')) !== null && _b !== void 0 ? _b : false;
+            (_c = (((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) !== 'collection' &&
+                ((_b = this.model) === null || _b === void 0 ? void 0 : _b.collections.includes('deemphasize')))) !== null && _c !== void 0 ? _c : false;
     }
     render() {
         var _a;
@@ -25,8 +29,7 @@ let ItemImage = class ItemImage extends LitElement {
       <div class=${ifDefined(this.imageBoxClass)}>
         ${((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'audio'
             ? this.waveformTemplate
-            : this.backgroundImageTemplate}
-        ${this.tileActionTemplate}
+            : this.itemImageTemplate}
       </div>
     `;
     }
@@ -35,12 +38,27 @@ let ItemImage = class ItemImage extends LitElement {
         return `${this.baseImageUrl}/services/img/${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}`;
     }
     // Templates
-    get backgroundImageTemplate() {
+    get itemImageTemplate() {
+        return html `
+      ${this.isListTile ? this.listImageTemplate : this.tileImageTemplate}
+    `;
+    }
+    get tileImageTemplate() {
         return html `
       <div
         class=${this.imageClass}
         style="background-image:url(${this.imageSrc})"
       ></div>
+      ${this.tileActionTemplate}
+    `;
+    }
+    get listImageTemplate() {
+        if (!this.model) {
+            return nothing;
+        }
+        return html `
+      <img src="${this.imageSrc}" alt="" class="${this.listImageClass}" />
+      ${this.restrictedIconTemplate}
     `;
     }
     get waveformTemplate() {
@@ -50,12 +68,18 @@ let ItemImage = class ItemImage extends LitElement {
         <img
           class=${this.itemImageWaveformClass}
           src="${this.imageSrc}"
-          alt="${ifDefined((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)}"
+          alt="${ifDefined((_a = this.model) === null || _a === void 0 ? void 0 : _a.title)}"
           @load=${this.onLoadItemImageCheck}
         />
       </div>
     `;
     }
+    get restrictedIconTemplate() {
+        if (!this.isDeemphasize) {
+            return nothing;
+        }
+        return html ` ${restrictedIcon} `;
+    }
     get tileActionTemplate() {
         if (!this.isDeemphasize) {
             return nothing;
@@ -75,24 +99,34 @@ let ItemImage = class ItemImage extends LitElement {
     get imageClass() {
         return `item-image ${this.isDeemphasize ? 'deemphasize' : 'default'}`;
     }
+    get listImageClass() {
+        var _a;
+        return `list-image ${(_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype}${this.isCompactTile ? ' compact' : ''}`;
+    }
     get imageBoxClass() {
-        return this.isDeemphasize ? 'item-image-box' : undefined;
+        if (this.isListTile) {
+            return `list-image-box${this.isDeemphasize ? ' deemphasize' : ''}`;
+        }
+        if (this.isDeemphasize) {
+            return 'item-image-box';
+        }
+        return undefined;
     }
     get boxWaveformClass() {
-        return `item-audio${this.isWaveform ? ` ${this.randomGradient}` : ''}`;
+        return `item-audio${this.isWaveform ? ` ${this.hashBasedGradient}` : ''}`;
     }
     get itemImageWaveformClass() {
         return `item-image${this.isWaveform ? ' waveform' : ''}`;
     }
-    get randomGradient() {
+    get hashBasedGradient() {
         var _a;
-        let gradientInt = 1;
-        if ((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier) {
-            gradientInt = this.generateHashCode(this.model.identifier) % 6;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)) {
+            return 'grad1';
         }
-        return `grad${gradientInt}`;
+        const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5
+        return `grad${gradient}`;
     }
-    generateHashCode(str) {
+    hashStrToInt(str) {
         return str
             .split('')
             .reduce((acc, char) => acc + char.charCodeAt(0), 0);
@@ -119,6 +153,37 @@ let ItemImage = class ItemImage extends LitElement {
         overflow: visible;
       }
 
+      .list-image-box.deemphasize {
+        border: 1px solid #767676;
+      }
+
+      .list-image-box {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        box-sizing: border-box;
+        display: flex;
+        position: relative;
+      }
+
+      .list-image {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      img.list-image {
+        overflow: hidden;
+        object-fit: contain;
+        border-radius: var(--border-radius, 0);
+        -webkit-border-radius: var(--border-radius, 0);
+        -moz-border-radius: var(--border-radius, 0);
+      }
+
+      img.list-image.compact {
+        object-fit: cover;
+      }
+
       .waveform {
         mix-blend-mode: screen;
       }
@@ -128,12 +193,19 @@ let ItemImage = class ItemImage extends LitElement {
         filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
       }
 
-      .deemphasize {
-        background-size: cover;
+      .deemphasize .list-image,
+      .deemphasize.item-image {
+        background-size: contain;
         filter: blur(15px);
         z-index: 1;
       }
 
+      .deemphasize svg {
+        padding: 25%;
+        z-index: 2;
+        position: absolute;
+      }
+
       .tile-action {
         border: 1px solid currentColor;
         border-radius: 1px;
@@ -154,6 +226,15 @@ let ItemImage = class ItemImage extends LitElement {
         text-align: center;
       }
 
+      .grad0 {
+        background: linear-gradient(
+          hsl(340, 80%, 55%),
+          hsl(0, 80%, 33%) 35%,
+          hsl(0, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+
       .grad1 {
         background: linear-gradient(
           hsl(300, 80%, 55%),
@@ -198,15 +279,6 @@ let ItemImage = class ItemImage extends LitElement {
           hsl(0, 0%, 0%)
         );
       }
-
-      .grad6 {
-        background: linear-gradient(
-          hsl(340, 80%, 55%),
-          hsl(0, 80%, 33%) 35%,
-          hsl(0, 80%, 22%) 70%,
-          hsl(0, 0%, 0%)
-        );
-      }
     `;
     }
 };
@@ -219,6 +291,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], ItemImage.prototype, "isListTile", void 0);
+__decorate([
+    property({ type: Boolean })
+], ItemImage.prototype, "isCompactTile", void 0);
 __decorate([
     state()
 ], ItemImage.prototype, "isDeemphasize", void 0);

package/dist/src/tiles/item-image.js.map

@@ -1 +1 @@
-{"version":3,"file":"item-image.js","sourceRoot":"","sources":["../../../src/tiles/item-image.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  CSSResultGroup,\n  html,\n  nothing,\n  PropertyValues,\n  LitElement,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { TileModel } from '../models';\n\n@customElement('item-image')\nexport class ItemImage extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @state() private isDeemphasize: boolean = false;\n\n  @state() private isWaveform: boolean = false;\n\n  @query('.item-image') private itemImageWaveform!: HTMLImageElement;\n\n  protected updated(changed: PropertyValues): void {\n    if (changed.has('model')) {\n      this.setDeemphsize();\n    }\n  }\n\n  private setDeemphsize() {\n    this.isDeemphasize =\n      this.model?.collections.includes('deemphasize') ?? false;\n  }\n\n  render() {\n    return html`\n      <div class=${ifDefined(this.imageBoxClass)}>\n        ${this.model?.mediatype === 'audio'\n          ? this.waveformTemplate\n          : this.backgroundImageTemplate}\n        ${this.tileActionTemplate}\n      </div>\n    `;\n  }\n\n  private get imageSrc() {\n    return `${this.baseImageUrl}/services/img/${this.model?.identifier}`;\n  }\n\n  // Templates\n  private get backgroundImageTemplate() {\n    return html`\n      <div\n        class=${this.imageClass}\n        style=\"background-image:url(${this.imageSrc})\"\n      ></div>\n    `;\n  }\n\n  private get waveformTemplate() {\n    return html`\n      <div class=${this.boxWaveformClass}>\n        <img\n          class=${this.itemImageWaveformClass}\n          src=\"${this.imageSrc}\"\n          alt=\"${ifDefined(this.model?.identifier)}\"\n          @load=${this.onLoadItemImageCheck}\n        />\n      </div>\n    `;\n  }\n\n  private get tileActionTemplate() {\n    if (!this.isDeemphasize) {\n      return nothing;\n    }\n    return html`\n      <div class=\"tile-action no-preview\">Content may be inappropriate</div>\n    `;\n  }\n\n  private onLoadItemImageCheck() {\n    const aspectRatio =\n      this.itemImageWaveform.naturalWidth /\n      this.itemImageWaveform.naturalHeight;\n    if (aspectRatio === 4) {\n      this.isWaveform = true;\n    }\n  }\n\n  // Classes\n  private get imageClass() {\n    return `item-image ${this.isDeemphasize ? 'deemphasize' : 'default'}`;\n  }\n\n  private get imageBoxClass() {\n    return this.isDeemphasize ? 'item-image-box' : undefined;\n  }\n\n  private get boxWaveformClass() {\n    return `item-audio${this.isWaveform ? ` ${this.randomGradient}` : ''}`;\n  }\n\n  private get itemImageWaveformClass() {\n    return `item-image${this.isWaveform ? ' waveform' : ''}`;\n  }\n\n  private get randomGradient() {\n    let gradientInt = 1;\n    if (this.model?.identifier) {\n      gradientInt = this.generateHashCode(this.model.identifier) % 6;\n    }\n    return `grad${gradientInt}`;\n  }\n\n  private generateHashCode(str: string): number {\n    return str\n      .split('')\n      .reduce((acc: number, char: string) => acc + char.charCodeAt(0), 0);\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .item-image-box {\n        width: 16rem;\n        height: 16rem;\n        overflow: hidden;\n        position: relative;\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n      }\n\n      .item-image {\n        width: 16rem;\n        height: 16rem;\n        object-fit: contain;\n        background-repeat: no-repeat;\n        background-position: center center;\n        position: relative;\n        -webkit-appearance: none;\n        overflow: visible;\n      }\n\n      .waveform {\n        mix-blend-mode: screen;\n      }\n\n      .default {\n        background-size: contain;\n        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));\n      }\n\n      .deemphasize {\n        background-size: cover;\n        filter: blur(15px);\n        z-index: 1;\n      }\n\n      .tile-action {\n        border: 1px solid currentColor;\n        border-radius: 1px;\n        padding: 5px;\n        font-weight: 500;\n        width: auto;\n        position: absolute;\n        z-index: 2;\n        display: flex;\n        top: 5.5rem;\n      }\n\n      .no-preview {\n        background-color: #fffecb;\n        color: #2c2c2c;\n        font-size: 1.4rem;\n        line-height: 2rem;\n        text-align: center;\n      }\n\n      .grad1 {\n        background: linear-gradient(\n          hsl(300, 80%, 55%),\n          hsl(330, 80%, 33%) 35%,\n          hsl(330, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n\n      .grad2 {\n        background: linear-gradient(\n          hsl(200, 80%, 55%),\n          hsl(230, 80%, 33%) 35%,\n          hsl(230, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n\n      .grad3 {\n        background: linear-gradient(\n          hsl(160, 80%, 55%),\n          hsl(190, 80%, 33%) 35%,\n          hsl(190, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n\n      .grad4 {\n        background: linear-gradient(\n          hsl(250, 80%, 55%),\n          hsl(280, 80%, 33%) 35%,\n          hsl(280, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n\n      .grad5 {\n        background: linear-gradient(\n          hsl(280, 80%, 55%),\n          hsl(310, 80%, 33%) 35%,\n          hsl(310, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n\n      .grad6 {\n        background: linear-gradient(\n          hsl(340, 80%, 55%),\n          hsl(0, 80%, 33%) 35%,\n          hsl(0, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"item-image.js","sourceRoot":"","sources":["../../../src/tiles/item-image.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  CSSResultGroup,\n  html,\n  nothing,\n  PropertyValues,\n  LitElement,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { restrictedIcon } from '../assets/img/icons/restricted';\nimport { TileModel } from '../models';\n\n@customElement('item-image')\nexport class ItemImage extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @property({ type: Boolean }) isCompactTile = false;\n\n  @state() private isDeemphasize = false;\n\n  @state() private isWaveform = false;\n\n  @query('.item-image') private itemImageWaveform!: HTMLImageElement;\n\n  protected updated(changed: PropertyValues): void {\n    if (changed.has('model')) {\n      this.setDeemphasize();\n    }\n  }\n\n  // Don't deemphasize if item is a collection\n  private setDeemphasize() {\n    this.isDeemphasize =\n      (this.model?.mediatype !== 'collection' &&\n        this.model?.collections.includes('deemphasize')) ??\n      false;\n  }\n\n  render() {\n    return html`\n      <div class=${ifDefined(this.imageBoxClass)}>\n        ${this.model?.mediatype === 'audio'\n          ? this.waveformTemplate\n          : this.itemImageTemplate}\n      </div>\n    `;\n  }\n\n  private get imageSrc() {\n    return `${this.baseImageUrl}/services/img/${this.model?.identifier}`;\n  }\n\n  // Templates\n  private get itemImageTemplate() {\n    return html`\n      ${this.isListTile ? this.listImageTemplate : this.tileImageTemplate}\n    `;\n  }\n\n  private get tileImageTemplate() {\n    return html`\n      <div\n        class=${this.imageClass}\n        style=\"background-image:url(${this.imageSrc})\"\n      ></div>\n      ${this.tileActionTemplate}\n    `;\n  }\n\n  private get listImageTemplate() {\n    if (!this.model) {\n      return nothing;\n    }\n    return html`\n      <img src=\"${this.imageSrc}\" alt=\"\" class=\"${this.listImageClass}\" />\n      ${this.restrictedIconTemplate}\n    `;\n  }\n\n  private get waveformTemplate() {\n    return html`\n      <div class=${this.boxWaveformClass}>\n        <img\n          class=${this.itemImageWaveformClass}\n          src=\"${this.imageSrc}\"\n          alt=\"${ifDefined(this.model?.title)}\"\n          @load=${this.onLoadItemImageCheck}\n        />\n      </div>\n    `;\n  }\n\n  private get restrictedIconTemplate() {\n    if (!this.isDeemphasize) {\n      return nothing;\n    }\n    return html` ${restrictedIcon} `;\n  }\n\n  private get tileActionTemplate() {\n    if (!this.isDeemphasize) {\n      return nothing;\n    }\n    return html`\n      <div class=\"tile-action no-preview\">Content may be inappropriate</div>\n    `;\n  }\n\n  private onLoadItemImageCheck() {\n    const aspectRatio =\n      this.itemImageWaveform.naturalWidth /\n      this.itemImageWaveform.naturalHeight;\n    if (aspectRatio === 4) {\n      this.isWaveform = true;\n    }\n  }\n\n  // Classes\n  private get imageClass() {\n    return `item-image ${this.isDeemphasize ? 'deemphasize' : 'default'}`;\n  }\n\n  private get listImageClass() {\n    return `list-image ${this.model?.mediatype}${\n      this.isCompactTile ? ' compact' : ''\n    }`;\n  }\n\n  private get imageBoxClass() {\n    if (this.isListTile) {\n      return `list-image-box${this.isDeemphasize ? ' deemphasize' : ''}`;\n    }\n    if (this.isDeemphasize) {\n      return 'item-image-box';\n    }\n    return undefined;\n  }\n\n  private get boxWaveformClass() {\n    return `item-audio${this.isWaveform ? ` ${this.hashBasedGradient}` : ''}`;\n  }\n\n  private get itemImageWaveformClass() {\n    return `item-image${this.isWaveform ? ' waveform' : ''}`;\n  }\n\n  private get hashBasedGradient() {\n    if (!this.model?.identifier) {\n      return 'grad1';\n    }\n    const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5\n    return `grad${gradient}`;\n  }\n\n  private hashStrToInt(str: string): number {\n    return str\n      .split('')\n      .reduce((acc: number, char: string) => acc + char.charCodeAt(0), 0);\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .item-image-box {\n        width: 16rem;\n        height: 16rem;\n        overflow: hidden;\n        position: relative;\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n      }\n\n      .item-image {\n        width: 16rem;\n        height: 16rem;\n        object-fit: contain;\n        background-repeat: no-repeat;\n        background-position: center center;\n        position: relative;\n        -webkit-appearance: none;\n        overflow: visible;\n      }\n\n      .list-image-box.deemphasize {\n        border: 1px solid #767676;\n      }\n\n      .list-image-box {\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n        box-sizing: border-box;\n        display: flex;\n        position: relative;\n      }\n\n      .list-image {\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n      }\n\n      img.list-image {\n        overflow: hidden;\n        object-fit: contain;\n        border-radius: var(--border-radius, 0);\n        -webkit-border-radius: var(--border-radius, 0);\n        -moz-border-radius: var(--border-radius, 0);\n      }\n\n      img.list-image.compact {\n        object-fit: cover;\n      }\n\n      .waveform {\n        mix-blend-mode: screen;\n      }\n\n      .default {\n        background-size: contain;\n        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));\n      }\n\n      .deemphasize .list-image,\n      .deemphasize.item-image {\n        background-size: contain;\n        filter: blur(15px);\n        z-index: 1;\n      }\n\n      .deemphasize svg {\n        padding: 25%;\n        z-index: 2;\n        position: absolute;\n      }\n\n      .tile-action {\n        border: 1px solid currentColor;\n        border-radius: 1px;\n        padding: 5px;\n        font-weight: 500;\n        width: auto;\n        position: absolute;\n        z-index: 2;\n        display: flex;\n        top: 5.5rem;\n      }\n\n      .no-preview {\n        background-color: #fffecb;\n        color: #2c2c2c;\n        font-size: 1.4rem;\n        line-height: 2rem;\n        text-align: center;\n      }\n\n      .grad0 {\n        background: linear-gradient(\n          hsl(340, 80%, 55%),\n          hsl(0, 80%, 33%) 35%,\n          hsl(0, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n\n      .grad1 {\n        background: linear-gradient(\n          hsl(300, 80%, 55%),\n          hsl(330, 80%, 33%) 35%,\n          hsl(330, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n\n      .grad2 {\n        background: linear-gradient(\n          hsl(200, 80%, 55%),\n          hsl(230, 80%, 33%) 35%,\n          hsl(230, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n\n      .grad3 {\n        background: linear-gradient(\n          hsl(160, 80%, 55%),\n          hsl(190, 80%, 33%) 35%,\n          hsl(190, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n\n      .grad4 {\n        background: linear-gradient(\n          hsl(250, 80%, 55%),\n          hsl(280, 80%, 33%) 35%,\n          hsl(280, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n\n      .grad5 {\n        background: linear-gradient(\n          hsl(280, 80%, 55%),\n          hsl(310, 80%, 33%) 35%,\n          hsl(310, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/list/tile-list-compact.js

@@ -13,27 +13,29 @@ let TileListCompact = class TileListCompact extends LitElement {
         this.sortParam = null;
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         return html `
       <div id="list-line" class="${this.classSize}">
-        <div id="thumb">${this.imageTemplate}</div>
-        <div id="title">${DOMPurify.sanitize((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : '')}</div>
+        <div id="thumb" class="${ifDefined((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype)}">
+          ${this.imageTemplate}
+        </div>
+        <div id="title">${DOMPurify.sanitize((_c = (_b = this.model) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '')}</div>
         <div id="creator">
-          ${((_c = this.model) === null || _c === void 0 ? void 0 : _c.mediatype) === 'account'
-            ? accountLabel((_d = this.model) === null || _d === void 0 ? void 0 : _d.dateAdded)
-            : DOMPurify.sanitize((_f = (_e = this.model) === null || _e === void 0 ? void 0 : _e.creator) !== null && _f !== void 0 ? _f : '')}
+          ${((_d = this.model) === null || _d === void 0 ? void 0 : _d.mediatype) === 'account'
+            ? accountLabel((_e = this.model) === null || _e === void 0 ? void 0 : _e.dateAdded)
+            : DOMPurify.sanitize((_g = (_f = this.model) === null || _f === void 0 ? void 0 : _f.creator) !== null && _g !== void 0 ? _g : '')}
         </div>
         <div id="date">${formatDate(this.date, this.formatSize)}</div>
         <div id="icon">
           <mediatype-icon
-            .mediatype=${(_g = this.model) === null || _g === void 0 ? void 0 : _g.mediatype}
-            .collections=${(_h = this.model) === null || _h === void 0 ? void 0 : _h.collections}
+            .mediatype=${(_h = this.model) === null || _h === void 0 ? void 0 : _h.mediatype}
+            .collections=${(_j = this.model) === null || _j === void 0 ? void 0 : _j.collections}
             style="--iconCustomFillColor: ${ifDefined(this.collectionColor)}"
           >
           </mediatype-icon>
         </div>
         <div id="views">
-          ${formatCount((_k = (_j = this.model) === null || _j === void 0 ? void 0 : _j.viewCount) !== null && _k !== void 0 ? _k : 0, this.formatSize)}
+          ${formatCount((_l = (_k = this.model) === null || _k === void 0 ? void 0 : _k.viewCount) !== null && _l !== void 0 ? _l : 0, this.formatSize)}
         </div>
       </div>
     `;
@@ -47,15 +49,19 @@ let TileListCompact = class TileListCompact extends LitElement {
         return '#4666FF';
     }
     get imageTemplate() {
-        var _a, _b;
+        var _a;
         if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)) {
             return nothing;
         }
-        return html ` <img
-      src="${this.baseImageUrl}/services/img/${this.model.identifier}"
-      alt="${this.model.identifier}"
-      class="${(_b = this.model) === null || _b === void 0 ? void 0 : _b.mediatype}"
-    />`;
+        return html `
+      <item-image
+        .model=${this.model}
+        .baseImageUrl=${this.baseImageUrl}
+        .isListTile=${true}
+        .isCompactTile=${true}
+      >
+      </item-image>
+    `;
     }
     /*
      * TODO: fix field names to match model in src/collection-browser.ts
@@ -101,43 +107,58 @@ let TileListCompact = class TileListCompact extends LitElement {
         font-size: 14px;
       }
 
-      /* fields */
+      #list-line {
+        display: grid;
+        column-gap: 10px;
+        border-top: 1px solid #ddd;
+        align-items: center;
+        line-height: 20px;
+      }
 
-      #thumb {
-        padding-left: 6px;
+      #list-line.mobile {
+        grid-template-columns: 36px 3fr 2fr 62px 19px;
+      }
+
+      #list-line.desktop {
+        grid-template-columns: 51px 3fr 2fr 100px 20px 60px;
+      }
+
+      #list-line:hover #title {
+        text-decoration: underline;
       }
 
-      #thumb img {
+      /* fields */
+      #thumb {
         object-fit: cover;
         display: block;
       }
 
-      .mobile #thumb img {
+      .mobile #thumb {
         width: 30px;
         height: 30px;
+        padding-top: 2px;
+        padding-bottom: 2px;
+        padding-left: 4px;
       }
 
-      .desktop #thumb img {
+      .desktop #thumb {
         width: 45px;
         height: 45px;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        padding-left: 6px;
       }
 
-      #thumb img.collection {
-        border-radius: 8px;
-        -webkit-border-radius: 8px;
-        -moz-border-radius: 8px;
+      #thumb.collection {
+        --border-radius: 8px;
       }
 
-      .mobile #thumb img.account {
-        border-radius: 15px;
-        -webkit-border-radius: 15px;
-        -moz-border-radius: 15px;
+      .mobile #thumb.account {
+        --border-radius: 15px;
       }
 
-      .desktop #thumb img.account {
-        border-radius: 22.5px;
-        -webkit-border-radius: 22.5px;
-        -moz-border-radius: 22.5px;
+      .desktop #thumb.account {
+        --border-radius: 22.5px;
       }
 
       #title {
@@ -170,32 +191,6 @@ let TileListCompact = class TileListCompact extends LitElement {
         --iconHeight: 20px;
         --iconWidth: 20px;
       }
-
-      /* list-line */
-
-      #list-line {
-        display: grid;
-        column-gap: 10px;
-        border-top: 1px solid #ddd;
-        align-items: center;
-        line-height: 20px;
-      }
-
-      #list-line.mobile {
-        grid-template-columns: 36px 3fr 2fr 62px 19px;
-        padding-top: 2px;
-        padding-bottom: 2px;
-      }
-
-      #list-line.desktop {
-        grid-template-columns: 51px 3fr 2fr 100px 20px 60px;
-        padding-top: 5px;
-        padding-bottom: 5px;
-      }
-
-      #list-line:hover #title {
-        text-decoration: underline;
-      }
     `;
     }
 };

package/dist/src/tiles/list/tile-list-compact.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile-list-compact.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport DOMPurify from 'dompurify';\nimport { TileModel } from '../../models';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport { accountLabel } from './account-label';\nimport '../mediatype-icon';\n\n@customElement('tile-list-compact')\nexport class TileListCompact extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) sortParam: SortParam | null = null;\n\n  @property({ type: Number }) mobileBreakpoint?: number;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  render() {\n    return html`\n      <div id=\"list-line\" class=\"${this.classSize}\">\n        <div id=\"thumb\">${this.imageTemplate}</div>\n        <div id=\"title\">${DOMPurify.sanitize(this.model?.title ?? '')}</div>\n        <div id=\"creator\">\n          ${this.model?.mediatype === 'account'\n            ? accountLabel(this.model?.dateAdded)\n            : DOMPurify.sanitize(this.model?.creator ?? '')}\n        </div>\n        <div id=\"date\">${formatDate(this.date, this.formatSize)}</div>\n        <div id=\"icon\">\n          <mediatype-icon\n            .mediatype=${this.model?.mediatype}\n            .collections=${this.model?.collections}\n            style=\"--iconCustomFillColor: ${ifDefined(this.collectionColor)}\"\n          >\n          </mediatype-icon>\n        </div>\n        <div id=\"views\">\n          ${formatCount(this.model?.viewCount ?? 0, this.formatSize)}\n        </div>\n      </div>\n    `;\n  }\n\n  // Only in list, not tile\n  private get collectionColor() {\n    if (this.model?.mediatype !== 'collection') {\n      return undefined;\n    }\n    return '#4666FF';\n  }\n\n  private get imageTemplate() {\n    if (!this.model?.identifier) {\n      return nothing;\n    }\n    return html` <img\n      src=\"${this.baseImageUrl}/services/img/${this.model.identifier}\"\n      alt=\"${this.model.identifier}\"\n      class=\"${this.model?.mediatype}\"\n    />`;\n  }\n\n  /*\n   * TODO: fix field names to match model in src/collection-browser.ts\n   * private get dateSortSelector()\n   * @see src/models.ts\n   */\n  private get date(): Date | undefined {\n    switch (this.sortParam?.field) {\n      case 'date':\n        return this.model?.datePublished;\n      case 'reviewdate':\n        return this.model?.dateReviewed;\n      case 'addeddate':\n        return this.model?.dateAdded;\n      default:\n        return this.model?.dateArchived; // publicdate\n    }\n  }\n\n  private get classSize(): string {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'mobile';\n    }\n    return 'desktop';\n  }\n\n  private get formatSize(): DateFormat | NumberFormat {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'short';\n    }\n    return 'long';\n  }\n\n  static get styles() {\n    return css`\n      html {\n        font-size: unset;\n      }\n\n      div {\n        font-size: 14px;\n      }\n\n      /* fields */\n\n      #thumb {\n        padding-left: 6px;\n      }\n\n      #thumb img {\n        object-fit: cover;\n        display: block;\n      }\n\n      .mobile #thumb img {\n        width: 30px;\n        height: 30px;\n      }\n\n      .desktop #thumb img {\n        width: 45px;\n        height: 45px;\n      }\n\n      #thumb img.collection {\n        border-radius: 8px;\n        -webkit-border-radius: 8px;\n        -moz-border-radius: 8px;\n      }\n\n      .mobile #thumb img.account {\n        border-radius: 15px;\n        -webkit-border-radius: 15px;\n        -moz-border-radius: 15px;\n      }\n\n      .desktop #thumb img.account {\n        border-radius: 22.5px;\n        -webkit-border-radius: 22.5px;\n        -moz-border-radius: 22.5px;\n      }\n\n      #title {\n        color: #4b64ff;\n        text-decoration: none;\n      }\n\n      #title,\n      #creator {\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n      }\n\n      #views {\n        text-align: right;\n        padding-right: 8px;\n      }\n\n      .mobile #views {\n        display: none;\n      }\n\n      .mobile mediatype-icon {\n        --iconHeight: 14px;\n        --iconWidth: 14px;\n      }\n\n      .desktop #icon {\n        --iconHeight: 20px;\n        --iconWidth: 20px;\n      }\n\n      /* list-line */\n\n      #list-line {\n        display: grid;\n        column-gap: 10px;\n        border-top: 1px solid #ddd;\n        align-items: center;\n        line-height: 20px;\n      }\n\n      #list-line.mobile {\n        grid-template-columns: 36px 3fr 2fr 62px 19px;\n        padding-top: 2px;\n        padding-bottom: 2px;\n      }\n\n      #list-line.desktop {\n        grid-template-columns: 51px 3fr 2fr 100px 20px 60px;\n        padding-top: 5px;\n        padding-bottom: 5px;\n      }\n\n      #list-line:hover #title {\n        text-decoration: underline;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"tile-list-compact.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport DOMPurify from 'dompurify';\nimport { TileModel } from '../../models';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport { accountLabel } from './account-label';\nimport '../mediatype-icon';\n\n@customElement('tile-list-compact')\nexport class TileListCompact extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) sortParam: SortParam | null = null;\n\n  @property({ type: Number }) mobileBreakpoint?: number;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  render() {\n    return html`\n      <div id=\"list-line\" class=\"${this.classSize}\">\n        <div id=\"thumb\" class=\"${ifDefined(this.model?.mediatype)}\">\n          ${this.imageTemplate}\n        </div>\n        <div id=\"title\">${DOMPurify.sanitize(this.model?.title ?? '')}</div>\n        <div id=\"creator\">\n          ${this.model?.mediatype === 'account'\n            ? accountLabel(this.model?.dateAdded)\n            : DOMPurify.sanitize(this.model?.creator ?? '')}\n        </div>\n        <div id=\"date\">${formatDate(this.date, this.formatSize)}</div>\n        <div id=\"icon\">\n          <mediatype-icon\n            .mediatype=${this.model?.mediatype}\n            .collections=${this.model?.collections}\n            style=\"--iconCustomFillColor: ${ifDefined(this.collectionColor)}\"\n          >\n          </mediatype-icon>\n        </div>\n        <div id=\"views\">\n          ${formatCount(this.model?.viewCount ?? 0, this.formatSize)}\n        </div>\n      </div>\n    `;\n  }\n\n  // Only in list, not tile\n  private get collectionColor() {\n    if (this.model?.mediatype !== 'collection') {\n      return undefined;\n    }\n    return '#4666FF';\n  }\n\n  private get imageTemplate() {\n    if (!this.model?.identifier) {\n      return nothing;\n    }\n    return html`\n      <item-image\n        .model=${this.model}\n        .baseImageUrl=${this.baseImageUrl}\n        .isListTile=${true}\n        .isCompactTile=${true}\n      >\n      </item-image>\n    `;\n  }\n\n  /*\n   * TODO: fix field names to match model in src/collection-browser.ts\n   * private get dateSortSelector()\n   * @see src/models.ts\n   */\n  private get date(): Date | undefined {\n    switch (this.sortParam?.field) {\n      case 'date':\n        return this.model?.datePublished;\n      case 'reviewdate':\n        return this.model?.dateReviewed;\n      case 'addeddate':\n        return this.model?.dateAdded;\n      default:\n        return this.model?.dateArchived; // publicdate\n    }\n  }\n\n  private get classSize(): string {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'mobile';\n    }\n    return 'desktop';\n  }\n\n  private get formatSize(): DateFormat | NumberFormat {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'short';\n    }\n    return 'long';\n  }\n\n  static get styles() {\n    return css`\n      html {\n        font-size: unset;\n      }\n\n      div {\n        font-size: 14px;\n      }\n\n      #list-line {\n        display: grid;\n        column-gap: 10px;\n        border-top: 1px solid #ddd;\n        align-items: center;\n        line-height: 20px;\n      }\n\n      #list-line.mobile {\n        grid-template-columns: 36px 3fr 2fr 62px 19px;\n      }\n\n      #list-line.desktop {\n        grid-template-columns: 51px 3fr 2fr 100px 20px 60px;\n      }\n\n      #list-line:hover #title {\n        text-decoration: underline;\n      }\n\n      /* fields */\n      #thumb {\n        object-fit: cover;\n        display: block;\n      }\n\n      .mobile #thumb {\n        width: 30px;\n        height: 30px;\n        padding-top: 2px;\n        padding-bottom: 2px;\n        padding-left: 4px;\n      }\n\n      .desktop #thumb {\n        width: 45px;\n        height: 45px;\n        padding-top: 5px;\n        padding-bottom: 5px;\n        padding-left: 6px;\n      }\n\n      #thumb.collection {\n        --border-radius: 8px;\n      }\n\n      .mobile #thumb.account {\n        --border-radius: 15px;\n      }\n\n      .desktop #thumb.account {\n        --border-radius: 22.5px;\n      }\n\n      #title {\n        color: #4b64ff;\n        text-decoration: none;\n      }\n\n      #title,\n      #creator {\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n      }\n\n      #views {\n        text-align: right;\n        padding-right: 8px;\n      }\n\n      .mobile #views {\n        display: none;\n      }\n\n      .mobile mediatype-icon {\n        --iconHeight: 14px;\n        --iconWidth: 14px;\n      }\n\n      .desktop #icon {\n        --iconHeight: 20px;\n        --iconWidth: 20px;\n      }\n    `;\n  }\n}\n"]}