@internetarchive/collection-browser 0.1.8 → 0.2.0

package/dist/demo/app-root.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["import { SearchService } from '@internetarchive/search-service';\nimport { LocalCache } from '@internetarchive/local-cache';\nimport { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport { CollectionNameCache } from '@internetarchive/collection-name-cache';\nimport type { CollectionBrowser } from '../src/collection-browser';\nimport '../src/collection-browser';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n  private searchService = SearchService.default;\n\n  private resizeObserver = new SharedResizeObserver();\n\n  private localCache = new LocalCache();\n\n  private collectionNameCache = new CollectionNameCache({\n    searchService: this.searchService,\n    localCache: this.localCache,\n  });\n\n  @state() private currentPage?: number;\n\n  @state() private searchQuery?: string;\n\n  @state() private cellWidth: number = 18;\n\n  @state() private cellHeight: number = 29;\n\n  @state() private rowGap: number = 1.7;\n\n  @state() private colGap: number = 1.7;\n\n  @state() private loggedIn: boolean = false;\n\n  @query('#base-query-field') private baseQueryField!: HTMLInputElement;\n\n  @query('#page-number-input') private pageNumberInput!: HTMLInputElement;\n\n  @query('collection-browser') private collectionBrowser!: CollectionBrowser;\n\n  private searchPressed(e: Event) {\n    e.preventDefault();\n    this.searchQuery = this.baseQueryField.value;\n    if ((this.currentPage ?? 1) > 1) {\n      this.collectionBrowser.goToPage(this.currentPage ?? 1);\n    }\n  }\n\n  private changePagePressed(e: Event) {\n    e.preventDefault();\n    this.currentPage = this.pageNumberInput.valueAsNumber;\n    this.collectionBrowser.goToPage(this.currentPage);\n  }\n\n  protected updated(changed: PropertyValues): void {\n    if (changed.has('currentPage') && this.currentPage) {\n      this.pageNumberInput.value = this.currentPage.toString();\n    }\n\n    if (changed.has('searchQuery')) {\n      this.queryUpdated();\n    }\n  }\n\n  private queryUpdated() {\n    this.collectionBrowser.baseQuery = this.searchQuery;\n  }\n\n  render() {\n    return html`\n      <div id=\"dev-tools\">\n        <form @submit=${this.searchPressed}>\n          Query:\n          <input\n            type=\"text\"\n            id=\"base-query-field\"\n            .value=${this.searchQuery ?? ''}\n          />\n          <input type=\"submit\" value=\"Search\" />\n        </form>\n\n        <form @submit=${this.changePagePressed}>\n          Page: <input type=\"number\" value=\"1\" id=\"page-number-input\" />\n          <input type=\"submit\" value=\"Go\" />\n        </form>\n\n        <div id=\"cell-controls\">\n          <div id=\"cell-size-control\">\n            <div>\n              <label for=\"cell-width-slider\">Minimum cell width:</label>\n              <input\n                type=\"range\"\n                min=\"10\"\n                max=\"100\"\n                value=\"18\"\n                step=\"0.1\"\n                id=\"cell-width-slider\"\n                @input=${this.widthChanged}\n              />\n              <span>${this.cellWidth}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-height-slider\">Cell height:</label>\n              <input\n                type=\"range\"\n                min=\"10\"\n                max=\"100\"\n                value=\"29\"\n                step=\"0.1\"\n                id=\"cell-height-slider\"\n                @input=${this.heightChanged}\n              />\n              <span>${this.cellHeight}rem</span>\n            </div>\n            <div>\n              <label for=\"show-outline-check\">Show outlines:</label>\n              <input\n                type=\"checkbox\"\n                id=\"show-outline-check\"\n                @click=${this.outlineChanged}\n              />\n            </div>\n            <div>\n              <label for=\"simulate-login\">Simulate Login:</label>\n              <input\n                type=\"checkbox\"\n                id=\"simulate-login\"\n                @click=${this.loginChanged}\n              />\n            </div>\n          </div>\n          <div id=\"cell-gap-control\">\n            <div>\n              <label for=\"cell-row-gap-slider\">Row gap:</label>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"5\"\n                value=\"1.7\"\n                step=\"0.1\"\n                id=\"cell-row-gap-slider\"\n                @input=${this.rowGapChanged}\n              />\n              <span>${this.rowGap}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-col-gap-slider\">Col gap:</label>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"5\"\n                value=\"1.7\"\n                step=\"0.1\"\n                id=\"cell-col-gap-slider\"\n                @input=${this.colGapChanged}\n              />\n              <span>${this.colGap}rem</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"collection-browser-container\">\n        <collection-browser\n          .baseNavigationUrl=${'https://archive.org'}\n          .baseImageUrl=${'https://archive.org'}\n          .searchService=${this.searchService}\n          .resizeObserver=${this.resizeObserver}\n          .collectionNameCache=${this.collectionNameCache}\n          .showHistogramDatePicker=${true}\n          .loggedIn=${this.loggedIn}\n          @visiblePageChanged=${this.visiblePageChanged}\n          @baseQueryChanged=${this.baseQueryChanged}\n        >\n        </collection-browser>\n      </div>\n    `;\n  }\n\n  private baseQueryChanged(e: CustomEvent<{ baseQuery?: string }>) {\n    this.searchQuery = e.detail.baseQuery;\n  }\n\n  private loginChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      this.loggedIn = true;\n    } else {\n      this.loggedIn = false;\n    }\n  }\n\n  private outlineChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      this.collectionBrowser.style.setProperty(\n        '--infiniteScrollerCellOutline',\n        '1px solid #33D1FF'\n      );\n    } else {\n      this.collectionBrowser.style.removeProperty(\n        '--infiniteScrollerCellOutline'\n      );\n    }\n  }\n\n  private rowGapChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.rowGap = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserRowGap',\n      `${input.value}rem`\n    );\n  }\n\n  private colGapChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.colGap = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserColGap',\n      `${input.value}rem`\n    );\n  }\n\n  private widthChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.cellWidth = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMinWidth',\n      `${input.value}rem`\n    );\n  }\n\n  private heightChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.cellHeight = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMinHeight',\n      `${input.value}rem`\n    );\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMaxHeight',\n      `${input.value}rem`\n    );\n  }\n\n  private visiblePageChanged(e: CustomEvent<{ pageNumber: number }>) {\n    const { pageNumber } = e.detail;\n    if (pageNumber === this.currentPage) return;\n    this.currentPage = pageNumber;\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n    }\n\n    input,\n    button {\n      font-size: 1.6rem;\n    }\n\n    collection-browser {\n      margin-top: 30rem;\n    }\n\n    #base-query-field {\n      width: 300px;\n    }\n\n    #dev-tools {\n      position: fixed;\n      top: 0;\n      left: 0;\n      z-index: 10;\n      -webkit-backdrop-filter: blur(10px);\n      backdrop-filter: blur(10px);\n      padding: 0.5rem 1rem;\n      border: 1px solid black;\n    }\n\n    #cell-controls {\n      display: flex;\n    }\n\n    #cell-controls label {\n      display: inline-block;\n      width: 10rem;\n    }\n\n    #cell-gap-control {\n      margin-left: 1rem;\n    }\n  `;\n}\n"]}

package/dist/index.html

@@ -1,23 +0,0 @@
-<!DOCTYPE html><html lang="en-GB"><head>
-  <meta charset="utf-8">
-  <style>
-    html {
-      font-size: 10px; /* This is to match petabox's base font size */
-      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    }
-
-    body {
-      background: #fff;
-      color: #2C2C2C;
-    }
-  </style>
-<script src="https://polyfill.archive.org/v3/polyfill.min.js?features=scrollIntoView%2CElement.prototype.scrollIntoView"></script>
-
-</head>
-<body>
-  <app-root></app-root>
-
-  
-
-
-<script type="module" src="./app-root.js"></script></body></html>

package/dist/src/styles/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/styles/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCrC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DxC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Base item-image styles\n */\nexport const baseItemImageStyles = css`\n  .grid-tile {\n    width: 16rem;\n    height: 16rem;\n  }\n\n  .list-tile {\n    width: 100%;\n    height: 100%;\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  .item-image {\n    object-fit: contain;\n    background-repeat: no-repeat;\n    background-position: center center;\n    position: relative;\n    -webkit-appearance: none;\n    overflow: hidden;\n  }\n\n  .default {\n    background-size: contain;\n    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));\n  }\n`;\n\n/**\n * Waveform styles\n */\nexport const waveformGradientStyles = css`\n  .waveform {\n    mix-blend-mode: screen;\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"]}

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

@@ -1,18 +0,0 @@
-import { CSSResultGroup, LitElement } from 'lit';
-import { TileModel } from '../../models';
-export declare class ItemImage extends LitElement {
-    model?: TileModel;
-    imageSrc?: string;
-    isCompactTile: boolean;
-    isListTile: boolean;
-    render(): import("lit-html").TemplateResult<1>;
-    private get tileActionTemplate();
-    private get itemTileImageTemplate();
-    private get tileImageTemplate();
-    private get listImageTemplate();
-    private get restrictedIconTemplate();
-    private get imageClass();
-    private get listImageClass();
-    private get imageBoxClass();
-    static get styles(): CSSResultGroup;
-}

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

@@ -1,210 +0,0 @@
-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

@@ -1 +0,0 @@
-{"version":3,"file":"item-image.js","sourceRoot":"","sources":["../../../../src/tiles/image/item-image.ts"],"names":[],"mappings":"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","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

@@ -1,16 +0,0 @@
-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

@@ -1,168 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"]}