@internetarchive/collection-browser 0.1.7 → 0.1.8

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

@@ -0,0 +1,210 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } 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.isCompactTile = false;
+        this.isListTile = false;
+    }
+    render() {
+        return html `
+      <div class=${ifDefined(this.imageBoxClass)}>
+        ${this.itemTileImageTemplate} ${this.tileActionTemplate}
+      </div>
+    `;
+    }
+    get tileActionTemplate() {
+        var _a;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.contentWarning)) {
+            return nothing;
+        }
+        return html `
+      <div class="tile-action no-preview">Content may be inappropriate</div>
+    `;
+    }
+    get itemTileImageTemplate() {
+        return html `
+      ${this.isListTile ? this.listImageTemplate : this.tileImageTemplate}
+    `;
+    }
+    get tileImageTemplate() {
+        var _a;
+        return html `
+      <img
+        class=${this.imageClass}
+        src="${ifDefined(this.imageSrc)}"
+        alt="${ifDefined((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)}"
+      />
+      ${this.tileActionTemplate}
+    `;
+    }
+    get listImageTemplate() {
+        if (!this.model) {
+            return nothing;
+        }
+        return html `
+      <img
+        src="${ifDefined(this.imageSrc)}"
+        alt=""
+        class="${this.listImageClass}"
+      />
+      ${this.restrictedIconTemplate}
+    `;
+    }
+    get restrictedIconTemplate() {
+        var _a;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.contentWarning)) {
+            return nothing;
+        }
+        return html ` ${restrictedIcon} `;
+    }
+    // Classes
+    get imageClass() {
+        var _a;
+        return `item-image ${((_a = this.model) === null || _a === void 0 ? void 0 : _a.contentWarning) ? '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() {
+        var _a, _b;
+        if (this.isListTile) {
+            return `list-image-box${((_a = this.model) === null || _a === void 0 ? void 0 : _a.contentWarning) ? ' deemphasize' : ''}`;
+        }
+        if ((_b = this.model) === null || _b === void 0 ? void 0 : _b.contentWarning) {
+            return 'item-image-box';
+        }
+        return undefined;
+    }
+    static get styles() {
+        return css `
+      .item-image-box {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        position: relative;
+        box-shadow: 1px 1px 2px 0px;
+        display: flex;
+      }
+
+      .item-image {
+        width: 16rem;
+        height: 16rem;
+        object-fit: contain;
+        background-repeat: no-repeat;
+        background-position: center center;
+        position: relative;
+        -webkit-appearance: none;
+        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;
+      }
+
+      .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;
+        padding: 5px;
+        font-weight: 500;
+        width: auto;
+        position: absolute;
+        z-index: 2;
+        display: flex;
+        top: 5.5rem;
+      }
+
+      .default {
+        background-size: contain;
+        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
+      }
+
+      .deemphasize {
+        background-size: contain;
+        filter: blur(15px);
+        z-index: 1;
+      }
+
+      .tile-action {
+        border: 1px solid currentColor;
+        border-radius: 1px;
+        padding: 5px;
+        font-weight: 500;
+        width: auto;
+        position: absolute;
+        z-index: 2;
+        display: flex;
+        top: 5.5rem;
+      }
+
+      .no-preview {
+        background-color: #fffecb;
+        color: #2c2c2c;
+        font-size: 1.4rem;
+        line-height: 2rem;
+        text-align: center;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], ItemImage.prototype, "model", void 0);
+__decorate([
+    property({ type: String })
+], ItemImage.prototype, "imageSrc", void 0);
+__decorate([
+    property({ type: Boolean })
+], ItemImage.prototype, "isCompactTile", void 0);
+__decorate([
+    property({ type: Boolean })
+], ItemImage.prototype, "isListTile", void 0);
+ItemImage = __decorate([
+    customElement('item-image')
+], ItemImage);
+export { ItemImage };
+//# sourceMappingURL=item-image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item-image.js","sourceRoot":"","sources":["../../../../src/tiles/image/item-image.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAIzD,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAAzC;;QAK+B,kBAAa,GAAG,KAAK,CAAC;QAEtB,eAAU,GAAG,KAAK,CAAC;IAgMlD,CAAC;IA9LC,MAAM;QACJ,OAAO,IAAI,CAAA;mBACI,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;UACtC,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,kBAAkB;;KAE1D,CAAC;IACJ,CAAC;IAED,IAAY,kBAAkB;;QAC5B,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,cAAc,CAAA,EAAE;YAC/B,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAED,IAAY,qBAAqB;QAC/B,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB;KACpE,CAAC;IACJ,CAAC;IAED,IAAY,iBAAiB;;QAC3B,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,UAAU;eAChB,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;eACxB,SAAS,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,CAAC;;QAExC,IAAI,CAAC,kBAAkB;KAC1B,CAAC;IACJ,CAAC;IAED,IAAY,iBAAiB;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA;;eAEA,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;;iBAEtB,IAAI,CAAC,cAAc;;QAE5B,IAAI,CAAC,sBAAsB;KAC9B,CAAC;IACJ,CAAC;IAED,IAAY,sBAAsB;;QAChC,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,cAAc,CAAA,EAAE;YAC/B,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA,IAAI,cAAc,GAAG,CAAC;IACnC,CAAC;IAED,UAAU;IACV,IAAY,UAAU;;QACpB,OAAO,cACL,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,cAAc,EAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAC/C,EAAE,CAAC;IACL,CAAC;IAED,IAAY,cAAc;;QACxB,OAAO,cAAc,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,GACxC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EACpC,EAAE,CAAC;IACL,CAAC;IAED,IAAY,aAAa;;QACvB,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,OAAO,iBACL,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,cAAc,EAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAChD,EAAE,CAAC;SACJ;QACD,IAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,cAAc,EAAE;YAC9B,OAAO,gBAAgB,CAAC;SACzB;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2GT,CAAC;IACJ,CAAC;CACF,CAAA;AAtM6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAmB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAAuB;AAEtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAoB;AAPrC,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAuMrB;SAvMY,SAAS","sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { TileModel } from '../../models';\n\nimport { restrictedIcon } from '../../assets/img/icons/restricted';\n\n@customElement('item-image')\nexport class ItemImage extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) imageSrc?: string;\n\n  @property({ type: Boolean }) isCompactTile = false;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  render() {\n    return html`\n      <div class=${ifDefined(this.imageBoxClass)}>\n        ${this.itemTileImageTemplate} ${this.tileActionTemplate}\n      </div>\n    `;\n  }\n\n  private get tileActionTemplate() {\n    if (!this.model?.contentWarning) {\n      return nothing;\n    }\n    return html`\n      <div class=\"tile-action no-preview\">Content may be inappropriate</div>\n    `;\n  }\n\n  private get itemTileImageTemplate() {\n    return html`\n      ${this.isListTile ? this.listImageTemplate : this.tileImageTemplate}\n    `;\n  }\n\n  private get tileImageTemplate() {\n    return html`\n      <img\n        class=${this.imageClass}\n        src=\"${ifDefined(this.imageSrc)}\"\n        alt=\"${ifDefined(this.model?.identifier)}\"\n      />\n      ${this.tileActionTemplate}\n    `;\n  }\n\n  private get listImageTemplate() {\n    if (!this.model) {\n      return nothing;\n    }\n    return html`\n      <img\n        src=\"${ifDefined(this.imageSrc)}\"\n        alt=\"\"\n        class=\"${this.listImageClass}\"\n      />\n      ${this.restrictedIconTemplate}\n    `;\n  }\n\n  private get restrictedIconTemplate() {\n    if (!this.model?.contentWarning) {\n      return nothing;\n    }\n    return html` ${restrictedIcon} `;\n  }\n\n  // Classes\n  private get imageClass() {\n    return `item-image ${\n      this.model?.contentWarning ? 'deemphasize' : 'default'\n    }`;\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${\n        this.model?.contentWarning ? ' deemphasize' : ''\n      }`;\n    }\n    if (this.model?.contentWarning) {\n      return 'item-image-box';\n    }\n    return undefined;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .item-image-box {\n        width: 100%;\n        height: 100%;\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      .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      .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: contain;\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  }\n}\n"]}

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

@@ -0,0 +1,16 @@
+import { CSSResultGroup, LitElement } from 'lit';
+export declare class WaveformImage extends LitElement {
+    imageSrc?: string;
+    identifier?: string;
+    isCompactTile: boolean;
+    isListTile: boolean;
+    private isWaveform;
+    private itemImageWaveform;
+    render(): import("lit-html").TemplateResult<1>;
+    private hashStrToInt;
+    private get hashBasedGradient();
+    private get boxWaveformClass();
+    private get itemImageWaveformClass();
+    private onLoadItemImageCheck;
+    static get styles(): CSSResultGroup;
+}

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

@@ -0,0 +1,168 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+let WaveformImage = class WaveformImage extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isCompactTile = false;
+        this.isListTile = false;
+        this.isWaveform = false;
+    }
+    render() {
+        return html `
+      <div class=${this.boxWaveformClass}>
+        <img
+          class=${this.itemImageWaveformClass}
+          src="${ifDefined(this.imageSrc)}"
+          alt="${ifDefined(this.identifier)}"
+          @load=${this.onLoadItemImageCheck}
+        />
+      </div>
+    `;
+    }
+    // Classes
+    hashStrToInt(str) {
+        return str
+            .split('')
+            .reduce((acc, char) => acc + char.charCodeAt(0), 0);
+    }
+    get hashBasedGradient() {
+        if (!this.identifier) {
+            return 'grad1';
+        }
+        const gradient = this.hashStrToInt(this.identifier) % 6; // returns 0-5
+        return `grad${gradient}`;
+    }
+    get boxWaveformClass() {
+        return `${this.isListTile || this.isCompactTile
+            ? 'list-item-audio'
+            : 'grid-item-audio'} ${this.isWaveform ? this.hashBasedGradient : ''}`;
+    }
+    get itemImageWaveformClass() {
+        return `item-image${this.isWaveform ? ' waveform' : ''}`;
+    }
+    onLoadItemImageCheck() {
+        const aspectRatio = this.itemImageWaveform.naturalWidth /
+            this.itemImageWaveform.naturalHeight;
+        if (aspectRatio === 4) {
+            this.isWaveform = true;
+        }
+    }
+    static get styles() {
+        return css `
+      .list-item-audio {
+        width: 100%;
+        height: 100%;
+      }
+
+      .grid-item-audio {
+        width: 16rem;
+        height: 16rem;
+      }
+
+      .item-audio {
+        width: 16rem;
+        height: 16rem;
+      }
+
+      .item-image {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        -webkit-appearance: none;
+        overflow: hidden;
+      }
+
+      .waveform {
+        mix-blend-mode: screen;
+        height: 100%;
+        position: relative;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      .default {
+        background-size: contain;
+        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
+      }
+
+      .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%),
+          hsl(330, 80%, 33%) 35%,
+          hsl(330, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+
+      .grad2 {
+        background: linear-gradient(
+          hsl(200, 80%, 55%),
+          hsl(230, 80%, 33%) 35%,
+          hsl(230, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+
+      .grad3 {
+        background: linear-gradient(
+          hsl(160, 80%, 55%),
+          hsl(190, 80%, 33%) 35%,
+          hsl(190, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+
+      .grad4 {
+        background: linear-gradient(
+          hsl(250, 80%, 55%),
+          hsl(280, 80%, 33%) 35%,
+          hsl(280, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+
+      .grad5 {
+        background: linear-gradient(
+          hsl(280, 80%, 55%),
+          hsl(310, 80%, 33%) 35%,
+          hsl(310, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], WaveformImage.prototype, "imageSrc", void 0);
+__decorate([
+    property({ type: String })
+], WaveformImage.prototype, "identifier", void 0);
+__decorate([
+    property({ type: Boolean })
+], WaveformImage.prototype, "isCompactTile", void 0);
+__decorate([
+    property({ type: Boolean })
+], WaveformImage.prototype, "isListTile", void 0);
+__decorate([
+    state()
+], WaveformImage.prototype, "isWaveform", void 0);
+__decorate([
+    query('.item-image')
+], WaveformImage.prototype, "itemImageWaveform", void 0);
+WaveformImage = __decorate([
+    customElement('waveform-image')
+], WaveformImage);
+export { WaveformImage };
+//# sourceMappingURL=waveform-image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"waveform-image.js","sourceRoot":"","sources":["../../../../src/tiles/image/waveform-image.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAK+B,kBAAa,GAAG,KAAK,CAAC;QAEtB,eAAU,GAAG,KAAK,CAAC;QAE/B,eAAU,GAAY,KAAK,CAAC;IAkJ/C,CAAC;IA9IC,MAAM;QACJ,OAAO,IAAI,CAAA;mBACI,IAAI,CAAC,gBAAgB;;kBAEtB,IAAI,CAAC,sBAAsB;iBAC5B,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;iBACxB,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;kBACzB,IAAI,CAAC,oBAAoB;;;KAGtC,CAAC;IACJ,CAAC;IAED,UAAU;IACF,YAAY,CAAC,GAAW;QAC9B,OAAO,GAAG;aACP,KAAK,CAAC,EAAE,CAAC;aACT,MAAM,CAAC,CAAC,GAAW,EAAE,IAAY,EAAE,EAAE,CAAC,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACxE,CAAC;IAED,IAAY,iBAAiB;QAC3B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO,OAAO,CAAC;SAChB;QACD,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,cAAc;QACvE,OAAO,OAAO,QAAQ,EAAE,CAAC;IAC3B,CAAC;IAED,IAAY,gBAAgB;QAC1B,OAAO,GACL,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,aAAa;YACnC,CAAC,CAAC,iBAAiB;YACnB,CAAC,CAAC,iBACN,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;IACtD,CAAC;IAED,IAAY,sBAAsB;QAChC,OAAO,aAAa,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;IAC3D,CAAC;IAEO,oBAAoB;QAC1B,MAAM,WAAW,GACf,IAAI,CAAC,iBAAiB,CAAC,YAAY;YACnC,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC;QACvC,IAAI,WAAW,KAAK,CAAC,EAAE;YACrB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB;IACH,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0FT,CAAC;IACJ,CAAC;CACF,CAAA;AA1J6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAqB;AAEnB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDAAuB;AAEtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAoB;AAEvC;IAAR,KAAK,EAAE;iDAAqC;AAEvB;IAArB,KAAK,CAAC,aAAa,CAAC;wDAA8C;AAXxD,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CA2JzB;SA3JY,aAAa","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\n@customElement('waveform-image')\nexport class WaveformImage extends LitElement {\n  @property({ type: String }) imageSrc?: string;\n\n  @property({ type: String }) identifier?: string;\n\n  @property({ type: Boolean }) isCompactTile = false;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @state() private isWaveform: boolean = false;\n\n  @query('.item-image') private itemImageWaveform!: HTMLImageElement;\n\n  render() {\n    return html`\n      <div class=${this.boxWaveformClass}>\n        <img\n          class=${this.itemImageWaveformClass}\n          src=\"${ifDefined(this.imageSrc)}\"\n          alt=\"${ifDefined(this.identifier)}\"\n          @load=${this.onLoadItemImageCheck}\n        />\n      </div>\n    `;\n  }\n\n  // Classes\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  private get hashBasedGradient() {\n    if (!this.identifier) {\n      return 'grad1';\n    }\n    const gradient = this.hashStrToInt(this.identifier) % 6; // returns 0-5\n    return `grad${gradient}`;\n  }\n\n  private get boxWaveformClass() {\n    return `${\n      this.isListTile || this.isCompactTile\n        ? 'list-item-audio'\n        : 'grid-item-audio'\n    } ${this.isWaveform ? this.hashBasedGradient : ''}`;\n  }\n\n  private get itemImageWaveformClass() {\n    return `item-image${this.isWaveform ? ' waveform' : ''}`;\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  static get styles(): CSSResultGroup {\n    return css`\n      .list-item-audio {\n        width: 100%;\n        height: 100%;\n      }\n\n      .grid-item-audio {\n        width: 16rem;\n        height: 16rem;\n      }\n\n      .item-audio {\n        width: 16rem;\n        height: 16rem;\n      }\n\n      .item-image {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        -webkit-appearance: none;\n        overflow: hidden;\n      }\n\n      .waveform {\n        mix-blend-mode: screen;\n        height: 100%;\n        position: relative;\n        top: 50%;\n        transform: translateY(-50%);\n      }\n\n      .default {\n        background-size: contain;\n        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));\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/item-image.d.ts

@@ -1,21 +1,23 @@
-import { CSSResultGroup, PropertyValues, LitElement } from 'lit';
+import { CSSResultGroup, LitElement } from 'lit';
 import { TileModel } from '../models';
 export declare class ItemImage extends LitElement {
     model?: TileModel;
     baseImageUrl?: string;
     isListTile: boolean;
-    private isDeemphasize;
+    isCompactTile: boolean;
     private isWaveform;
     private itemImageWaveform;
-    protected updated(changed: PropertyValues): void;
-    private setDeemphsize;
     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();

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

@@ -1,32 +1,22 @@
 import { __decorate } from "tslib";
-import { css, html, nothing, LitElement, } from 'lit';
+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.isDeemphasize = false;
+        this.isCompactTile = false;
         this.isWaveform = false;
     }
-    updated(changed) {
-        if (changed.has('model')) {
-            this.setDeemphsize();
-        }
-    }
-    setDeemphsize() {
-        var _a, _b;
-        this.isDeemphasize =
-            (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.collections.includes('deemphasize')) !== null && _b !== void 0 ? _b : false;
-    }
     render() {
         var _a;
         return html `
       <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 +25,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,14 +55,22 @@ 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() {
+        var _a;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.contentWarning)) {
+            return nothing;
+        }
+        return html ` ${restrictedIcon} `;
+    }
     get tileActionTemplate() {
-        if (!this.isDeemphasize) {
+        var _a;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.contentWarning)) {
             return nothing;
         }
         return html `
@@ -73,10 +86,22 @@ let ItemImage = class ItemImage extends LitElement {
     }
     // Classes
     get imageClass() {
-        return `item-image ${this.isDeemphasize ? 'deemphasize' : 'default'}`;
+        var _a;
+        return `item-image ${((_a = this.model) === null || _a === void 0 ? void 0 : _a.contentWarning) ? '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;
+        var _a, _b;
+        if (this.isListTile) {
+            return `list-image-box${((_a = this.model) === null || _a === void 0 ? void 0 : _a.contentWarning) ? ' deemphasize' : ''}`;
+        }
+        if ((_b = this.model) === null || _b === void 0 ? void 0 : _b.contentWarning) {
+            return 'item-image-box';
+        }
+        return undefined;
     }
     get boxWaveformClass() {
         return `item-audio${this.isWaveform ? ` ${this.hashBasedGradient}` : ''}`;
@@ -119,6 +144,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 +184,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;
@@ -220,8 +283,8 @@ __decorate([
     property({ type: Boolean })
 ], ItemImage.prototype, "isListTile", void 0);
 __decorate([
-    state()
-], ItemImage.prototype, "isDeemphasize", void 0);
+    property({ type: Boolean })
+], ItemImage.prototype, "isCompactTile", void 0);
 __decorate([
     state()
 ], ItemImage.prototype, "isWaveform", void 0);