@internetarchive/collection-browser 0.1.3 → 0.1.6

package/dist/src/mediatype/mediatype-icon.js

@@ -0,0 +1,105 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { accountIcon } from '../assets/img/icons/mediatype/account';
+import { audioIcon } from '../assets/img/icons/mediatype/audio';
+import { collectionIcon } from '../assets/img/icons/mediatype/collection';
+import { dataIcon } from '../assets/img/icons/mediatype/data';
+import { etreeIcon } from '../assets/img/icons/mediatype/etree';
+import { imagesIcon } from '../assets/img/icons/mediatype/images';
+import { filmIcon } from '../assets/img/icons/mediatype/film';
+import { radioIcon } from '../assets/img/icons/mediatype/radio';
+import { softwareIcon } from '../assets/img/icons/mediatype/software';
+import { textsIcon } from '../assets/img/icons/mediatype/texts';
+import { tvIcon } from '../assets/img/icons/mediatype/tv';
+import { videoIcon } from '../assets/img/icons/mediatype/video';
+import { webIcon } from '../assets/img/icons/mediatype/web';
+import { mediatypeColor } from './mediatype-color';
+import { mediatypeText } from './mediatype-text';
+let MediatypeIcon = class MediatypeIcon extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.showText = false;
+        this.mediatypeIcons = {
+            account: accountIcon,
+            audio: audioIcon,
+            collection: collectionIcon,
+            data: dataIcon,
+            etree: etreeIcon,
+            film: filmIcon,
+            image: imagesIcon,
+            movies: filmIcon,
+            radio: radioIcon,
+            software: softwareIcon,
+            texts: textsIcon,
+            tv: tvIcon,
+            video: videoIcon,
+            web: webIcon,
+        };
+    }
+    get displayMediaType() {
+        var _a, _b;
+        const tvIdentifier = ['tvnews', 'tvarchive', 'television'];
+        const radioIdentifier = ['radio', 'radioprogram'];
+        if (this.mediatype === 'movies' &&
+            ((_a = this.collections) === null || _a === void 0 ? void 0 : _a.some(id => tvIdentifier.indexOf(id) >= 0))) {
+            return 'tv';
+        }
+        if (this.mediatype === 'audio' &&
+            ((_b = this.collections) === null || _b === void 0 ? void 0 : _b.some(id => radioIdentifier.indexOf(id) >= 0))) {
+            return 'radio';
+        }
+        return this.mediatype;
+    }
+    render() {
+        if (!this.mediatype) {
+            return html ``;
+        }
+        const displayMediatype = this.displayMediaType || '';
+        const fillColor = mediatypeColor[displayMediatype];
+        return html `
+      <div id="icon" class="${this.showText ? 'show-text' : 'hide-text'}" style="--iconFillColor=${fillColor}">
+        ${this.mediatypeIcons[displayMediatype]}
+        <p class="status-text">${mediatypeText[displayMediatype]}</p>
+      </div>
+    `;
+    }
+    static get styles() {
+        return css `
+      .status-text {
+        font-size: 14px;
+        color: #2c2c2c;
+        margin: auto;
+        display: block;
+        text-align: center;
+      }
+
+      #icon.hide-text p {
+        display: none;
+      }
+
+      svg {
+        height: var(--iconHeight, 10px);
+        width: var(--iconWidth, 10px);
+      }
+
+      .fill-color {
+        fill: var(--iconFillColor, '#000000');
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], MediatypeIcon.prototype, "mediatype", void 0);
+__decorate([
+    property({ type: Array })
+], MediatypeIcon.prototype, "collections", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediatypeIcon.prototype, "showText", void 0);
+MediatypeIcon = __decorate([
+    customElement('mediatype-icon')
+], MediatypeIcon);
+export { MediatypeIcon };
+//# sourceMappingURL=mediatype-icon.js.map

package/dist/src/mediatype/mediatype-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../../src/mediatype/mediatype-icon.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { accountIcon } from '../assets/img/icons/mediatype/account';\nimport { audioIcon } from '../assets/img/icons/mediatype/audio';\nimport { collectionIcon } from '../assets/img/icons/mediatype/collection';\nimport { dataIcon } from '../assets/img/icons/mediatype/data';\nimport { etreeIcon } from '../assets/img/icons/mediatype/etree';\nimport { imagesIcon } from '../assets/img/icons/mediatype/images';\nimport { filmIcon } from '../assets/img/icons/mediatype/film';\nimport { radioIcon } from '../assets/img/icons/mediatype/radio';\nimport { softwareIcon } from '../assets/img/icons/mediatype/software';\nimport { textsIcon } from '../assets/img/icons/mediatype/texts';\nimport { tvIcon } from '../assets/img/icons/mediatype/tv';\nimport { videoIcon } from '../assets/img/icons/mediatype/video';\nimport { webIcon } from '../assets/img/icons/mediatype/web';\n\nimport { mediatypeColor } from './mediatype-color';\nimport { mediatypeText } from './mediatype-text';\n\n@customElement('mediatype-icon')\nexport class MediatypeIcon extends LitElement {\n  @property({ type: String }) mediatype: string | undefined;\n\n  @property({ type: Array }) collections: string[] | undefined;\n\n  @property({ type: Boolean }) showText = false;\n\n  private readonly mediatypeIcons: { [key: string]: any } = {\n    account: accountIcon,\n    audio: audioIcon,\n    collection: collectionIcon,\n    data: dataIcon,\n    etree: etreeIcon,\n    film: filmIcon,\n    image: imagesIcon,\n    movies: filmIcon,\n    radio: radioIcon,\n    software: softwareIcon,\n    texts: textsIcon,\n    tv: tvIcon,\n    video: videoIcon,\n    web: webIcon,\n  };\n\n  private get displayMediaType() {\n    const tvIdentifier = ['tvnews', 'tvarchive', 'television'];\n    const radioIdentifier = ['radio', 'radioprogram'];\n\n    if (\n      this.mediatype === 'movies' &&\n      this.collections?.some(id => tvIdentifier.indexOf(id) >= 0)\n    ) {\n      return 'tv';\n    }\n    if (\n      this.mediatype === 'audio' &&\n      this.collections?.some(id => radioIdentifier.indexOf(id) >= 0)\n    ) {\n      return 'radio';\n    }\n    return this.mediatype;\n  }\n\n  render() {\n    if (!this.mediatype) {\n      return html``;\n    }\n\n    const displayMediatype = this.displayMediaType || '';\n    const fillColor = mediatypeColor[displayMediatype];\n\n    return html`\n      <div id=\"icon\" class=\"${this.showText ? 'show-text' : 'hide-text'}\" style=\"--iconFillColor=${fillColor}\">\n        ${this.mediatypeIcons[displayMediatype]}\n        <p class=\"status-text\">${mediatypeText[displayMediatype]}</p>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: center;\n      }\n\n      #icon.hide-text p {\n        display: none;\n      }\n\n      svg {\n        height: var(--iconHeight, 10px);\n        width: var(--iconWidth, 10px);\n      }\n\n      .fill-color {\n        fill: var(--iconFillColor, '#000000');\n      }\n    `;\n  }\n}\n"]}

package/dist/src/mediatype/mediatype-text.d.ts

@@ -0,0 +1,3 @@
+export declare const mediatypeText: {
+    [key: string]: any;
+};

package/dist/src/mediatype/mediatype-text.js

@@ -0,0 +1,17 @@
+export const mediatypeText = {
+    account: 'Account',
+    audio: 'Audio',
+    collection: 'Collection',
+    data: 'Data',
+    etree: 'E-tree',
+    film: 'Film',
+    image: 'Image',
+    movies: 'Movie',
+    radio: 'Radio',
+    software: 'Software',
+    texts: 'Text',
+    tv: 'TV',
+    video: 'Video',
+    web: 'Web',
+};
+//# sourceMappingURL=mediatype-text.js.map

package/dist/src/mediatype/mediatype-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediatype-text.js","sourceRoot":"","sources":["../../../src/mediatype/mediatype-text.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAA2B;IACnD,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,UAAU,EAAE,YAAY;IACxB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,OAAO;IACf,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,EAAE,EAAE,IAAI;IACR,KAAK,EAAE,OAAO;IACd,GAAG,EAAE,KAAK;CACX,CAAC","sourcesContent":["export const mediatypeText: { [key: string]: any } = {\n  account: 'Account',\n  audio: 'Audio',\n  collection: 'Collection',\n  data: 'Data',\n  etree: 'E-tree',\n  film: 'Film',\n  image: 'Image',\n  movies: 'Movie',\n  radio: 'Radio',\n  software: 'Software',\n  texts: 'Text',\n  tv: 'TV',\n  video: 'Video',\n  web: 'Web',\n};\n"]}

package/dist/src/mediatype/mediatypeConfig.d.ts

@@ -0,0 +1,3 @@
+export declare const mediatypeConfig: {
+    [key: string]: any;
+};

package/dist/src/mediatype/mediatypeConfig.js

@@ -0,0 +1,86 @@
+import { accountIcon } from '../assets/img/icons/mediatype/account';
+import { audioIcon } from '../assets/img/icons/mediatype/audio';
+import { collectionIcon } from '../assets/img/icons/mediatype/collection';
+import { dataIcon } from '../assets/img/icons/mediatype/data';
+import { etreeIcon } from '../assets/img/icons/mediatype/etree';
+import { imagesIcon } from '../assets/img/icons/mediatype/images';
+import { filmIcon } from '../assets/img/icons/mediatype/film';
+import { radioIcon } from '../assets/img/icons/mediatype/radio';
+import { softwareIcon } from '../assets/img/icons/mediatype/software';
+import { textsIcon } from '../assets/img/icons/mediatype/texts';
+import { tvIcon } from '../assets/img/icons/mediatype/tv';
+import { videoIcon } from '../assets/img/icons/mediatype/video';
+import { webIcon } from '../assets/img/icons/mediatype/web';
+export const mediatypeConfig = {
+    account: {
+        color: '#000000',
+        icon: accountIcon,
+        text: 'Account',
+    },
+    audio: {
+        color: '#8fdaef',
+        icon: audioIcon,
+        text: 'Audio',
+    },
+    collection: {
+        color: '#000000',
+        icon: collectionIcon,
+        text: 'Collection',
+    },
+    data: {
+        color: '#333333',
+        icon: dataIcon,
+        text: 'Data',
+    },
+    etree: {
+        color: '#3871c1',
+        icon: etreeIcon,
+        text: 'E-tree',
+    },
+    film: {
+        color: '#bf1b2c',
+        icon: filmIcon,
+        text: 'Film',
+    },
+    image: {
+        color: '#62c4a9',
+        icon: imagesIcon,
+        text: 'Image',
+    },
+    movies: {
+        color: '#bf1b2c',
+        icon: filmIcon,
+        text: 'Movie',
+    },
+    radio: {
+        color: '#8fdaef',
+        icon: radioIcon,
+        text: 'Radio',
+    },
+    software: {
+        color: '#80cc28',
+        icon: softwareIcon,
+        text: 'Software',
+    },
+    texts: {
+        color: '#f9a72b',
+        icon: textsIcon,
+        text: 'Text',
+    },
+    tv: {
+        color: '#f25d54',
+        icon: tvIcon,
+        text: 'TV',
+    },
+    video: {
+        color: '#bf1b2c',
+        icon: videoIcon,
+        text: 'Video',
+    },
+    web: {
+        color: '#fddd10',
+        icon: webIcon,
+        text: 'Web',
+    },
+};
+//# sourceMappingURL=mediatypeConfig.js.map

package/dist/src/mediatype/mediatypeConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediatypeConfig.js","sourceRoot":"","sources":["../../../src/mediatype/mediatypeConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAE5D,MAAM,CAAC,MAAM,eAAe,GAA2B;IACrD,OAAO,EAAE;QACP,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,WAAW;QACjB,IAAI,EAAE,SAAS;KAChB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,OAAO;KACd;IACD,UAAU,EAAE;QACV,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,YAAY;KACnB;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,MAAM;KACb;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,QAAQ;KACf;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,MAAM;KACb;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,OAAO;KACd;IACD,MAAM,EAAE;QACN,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,OAAO;KACd;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,OAAO;KACd;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,UAAU;KACjB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,MAAM;KACb;IACD,EAAE,EAAE;QACF,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,IAAI;KACX;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,OAAO;KACd;IACD,GAAG,EAAE;QACH,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,KAAK;KACZ;CACF,CAAC","sourcesContent":["import { accountIcon } from '../assets/img/icons/mediatype/account';\nimport { audioIcon } from '../assets/img/icons/mediatype/audio';\nimport { collectionIcon } from '../assets/img/icons/mediatype/collection';\nimport { dataIcon } from '../assets/img/icons/mediatype/data';\nimport { etreeIcon } from '../assets/img/icons/mediatype/etree';\nimport { imagesIcon } from '../assets/img/icons/mediatype/images';\nimport { filmIcon } from '../assets/img/icons/mediatype/film';\nimport { radioIcon } from '../assets/img/icons/mediatype/radio';\nimport { softwareIcon } from '../assets/img/icons/mediatype/software';\nimport { textsIcon } from '../assets/img/icons/mediatype/texts';\nimport { tvIcon } from '../assets/img/icons/mediatype/tv';\nimport { videoIcon } from '../assets/img/icons/mediatype/video';\nimport { webIcon } from '../assets/img/icons/mediatype/web';\n\nexport const mediatypeConfig: { [key: string]: any } = {\n  account: {\n    color: '#000000',\n    icon: accountIcon,\n    text: 'Account',\n  },\n  audio: {\n    color: '#8fdaef',\n    icon: audioIcon,\n    text: 'Audio',\n  },\n  collection: {\n    color: '#000000',\n    icon: collectionIcon,\n    text: 'Collection',\n  },\n  data: {\n    color: '#333333',\n    icon: dataIcon,\n    text: 'Data',\n  },\n  etree: {\n    color: '#3871c1',\n    icon: etreeIcon,\n    text: 'E-tree',\n  },\n  film: {\n    color: '#bf1b2c',\n    icon: filmIcon,\n    text: 'Film',\n  },\n  image: {\n    color: '#62c4a9',\n    icon: imagesIcon,\n    text: 'Image',\n  },\n  movies: {\n    color: '#bf1b2c',\n    icon: filmIcon,\n    text: 'Movie',\n  },\n  radio: {\n    color: '#8fdaef',\n    icon: radioIcon,\n    text: 'Radio',\n  },\n  software: {\n    color: '#80cc28',\n    icon: softwareIcon,\n    text: 'Software',\n  },\n  texts: {\n    color: '#f9a72b',\n    icon: textsIcon,\n    text: 'Text',\n  },\n  tv: {\n    color: '#f25d54',\n    icon: tvIcon,\n    text: 'TV',\n  },\n  video: {\n    color: '#bf1b2c',\n    icon: videoIcon,\n    text: 'Video',\n  },\n  web: {\n    color: '#fddd10',\n    icon: webIcon,\n    text: 'Web',\n  },\n};\n"]}

package/dist/src/mediatype-icon.d.ts

@@ -0,0 +1,9 @@
+import { CSSResultGroup, LitElement } from 'lit';
+export declare class MediatypeIcon extends LitElement {
+    mediatype: string | undefined;
+    collections: string[] | undefined;
+    showText: boolean;
+    private get displayMediatype();
+    render(): import("lit-html").TemplateResult<1>;
+    static get styles(): CSSResultGroup;
+}

package/dist/src/mediatype-icon.js

@@ -0,0 +1,78 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { mediatypeConfig } from './mediatype/mediatype-config';
+let MediatypeIcon = class MediatypeIcon extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.showText = false;
+    }
+    get displayMediatype() {
+        var _a, _b;
+        const tvIdentifier = ['tvnews', 'tvarchive', 'television'];
+        const radioIdentifier = ['radio', 'radioprogram'];
+        if (this.mediatype === 'movies' &&
+            ((_a = this.collections) === null || _a === void 0 ? void 0 : _a.some(id => tvIdentifier.indexOf(id) >= 0))) {
+            return 'tv';
+        }
+        if (this.mediatype === 'audio' &&
+            ((_b = this.collections) === null || _b === void 0 ? void 0 : _b.some(id => radioIdentifier.indexOf(id) >= 0))) {
+            return 'radio';
+        }
+        return this.mediatype || '';
+    }
+    render() {
+        const config = mediatypeConfig[this.displayMediatype];
+        if (!config) {
+            return html ``;
+        }
+        return html `
+      <div
+        id="icon"
+        class="${this.showText ? 'show-text' : 'hide-text'}"
+        style="--iconFillColor: ${config.color}"
+      >
+        ${config.icon}
+        <p class="status-text">${config.text}</p>
+      </div>
+    `;
+    }
+    static get styles() {
+        return css `
+      .status-text {
+        font-size: 14px;
+        color: #2c2c2c;
+        margin: auto;
+        display: block;
+        text-align: var(--iconTextAlign, center);
+      }
+
+      #icon.hide-text p {
+        display: none;
+      }
+
+      svg {
+        height: var(--iconHeight, 10px);
+        width: var(--iconWidth, 10px);
+      }
+
+      .fill-color {
+        fill: var(--iconCustomFillColor, var(--iconFillColor, '#000000'));
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], MediatypeIcon.prototype, "mediatype", void 0);
+__decorate([
+    property({ type: Array })
+], MediatypeIcon.prototype, "collections", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediatypeIcon.prototype, "showText", void 0);
+MediatypeIcon = __decorate([
+    customElement('mediatype-icon')
+], MediatypeIcon);
+export { MediatypeIcon };
+//# sourceMappingURL=mediatype-icon.js.map

package/dist/src/mediatype-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../src/mediatype-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAG/D,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAK+B,aAAQ,GAAG,KAAK,CAAC;IA+DhD,CAAC;IA7DC,IAAY,gBAAgB;;QAC1B,MAAM,YAAY,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;QAC3D,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QAElD,IACE,IAAI,CAAC,SAAS,KAAK,QAAQ;aAC3B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC3D;YACA,OAAO,IAAI,CAAC;SACb;QACD,IACE,IAAI,CAAC,SAAS,KAAK,OAAO;aAC1B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC9D;YACA,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACtD,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QAED,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;kCACxB,MAAM,CAAC,KAAK;;UAEpC,MAAM,CAAC,IAAI;iCACY,MAAM,CAAC,IAAI;;KAEvC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;KAqBT,CAAC;IACJ,CAAC;CACF,CAAA;AAnE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA+B;AAE/B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAmC;AAEhC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkB;AALnC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAoEzB;SApEY,aAAa","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { mediatypeConfig } from './mediatype/mediatype-config';\n\n@customElement('mediatype-icon')\nexport class MediatypeIcon extends LitElement {\n  @property({ type: String }) mediatype: string | undefined;\n\n  @property({ type: Array }) collections: string[] | undefined;\n\n  @property({ type: Boolean }) showText = false;\n\n  private get displayMediatype(): string {\n    const tvIdentifier = ['tvnews', 'tvarchive', 'television'];\n    const radioIdentifier = ['radio', 'radioprogram'];\n\n    if (\n      this.mediatype === 'movies' &&\n      this.collections?.some(id => tvIdentifier.indexOf(id) >= 0)\n    ) {\n      return 'tv';\n    }\n    if (\n      this.mediatype === 'audio' &&\n      this.collections?.some(id => radioIdentifier.indexOf(id) >= 0)\n    ) {\n      return 'radio';\n    }\n    return this.mediatype || '';\n  }\n\n  render() {\n    const config = mediatypeConfig[this.displayMediatype];\n    if (!config) {\n      return html``;\n    }\n\n    return html`\n      <div\n        id=\"icon\"\n        class=\"${this.showText ? 'show-text' : 'hide-text'}\"\n        style=\"--iconFillColor: ${config.color}\"\n      >\n        ${config.icon}\n        <p class=\"status-text\">${config.text}</p>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: var(--iconTextAlign, center);\n      }\n\n      #icon.hide-text p {\n        display: none;\n      }\n\n      svg {\n        height: var(--iconHeight, 10px);\n        width: var(--iconWidth, 10px);\n      }\n\n      .fill-color {\n        fill: var(--iconCustomFillColor, var(--iconFillColor, '#000000'));\n      }\n    `;\n  }\n}\n"]}

package/dist/src/sort-filter-bar/img/grid.d.ts

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

package/dist/src/sort-filter-bar/img/grid.js

@@ -0,0 +1,5 @@
+import { svg } from 'lit';
+export const gridIcon = svg `
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m45 13h-45v60h45zm55 0h-45v32h45zm0 42h-45v32h45z"/></svg>
+`;
+//# sourceMappingURL=grid.js.map

package/dist/src/sort-filter-bar/img/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../../src/sort-filter-bar/img/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAA;;CAE1B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const gridIcon = svg`\n<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m45 13h-45v60h45zm55 0h-45v32h45zm0 42h-45v32h45z\"/></svg>\n`;\n"]}

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

@@ -5,6 +5,7 @@ export declare class ItemImage extends LitElement {
     baseImageUrl?: string;
     isListTile: boolean;
     private isDeemphasize;
+    private isWaveform;
     private itemImageWaveform;
     protected updated(changed: PropertyValues): void;
     private setDeemphsize;
@@ -16,6 +17,9 @@ export declare class ItemImage extends LitElement {
     private onLoadItemImageCheck;
     private get imageClass();
     private get imageBoxClass();
+    private get boxWaveformClass();
+    private get itemImageWaveformClass();
     private get randomGradient();
+    private generateHashCode;
     static get styles(): CSSResultGroup;
 }

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

@@ -7,6 +7,7 @@ let ItemImage = class ItemImage extends LitElement {
         super(...arguments);
         this.isListTile = false;
         this.isDeemphasize = false;
+        this.isWaveform = false;
     }
     updated(changed) {
         if (changed.has('model')) {
@@ -45,9 +46,9 @@ let ItemImage = class ItemImage extends LitElement {
     get waveformTemplate() {
         var _a;
         return html `
-      <div class="box" id=${this.randomGradient}>
+      <div class=${this.boxWaveformClass}>
         <img
-          class="item-image"
+          class=${this.itemImageWaveformClass}
           src="${this.imageSrc}"
           alt="${ifDefined((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)}"
           @load=${this.onLoadItemImageCheck}
@@ -67,7 +68,7 @@ let ItemImage = class ItemImage extends LitElement {
         const aspectRatio = this.itemImageWaveform.naturalWidth /
             this.itemImageWaveform.naturalHeight;
         if (aspectRatio === 4) {
-            this.itemImageWaveform.classList.add('waveform');
+            this.isWaveform = true;
         }
     }
     // Classes
@@ -77,8 +78,24 @@ let ItemImage = class ItemImage extends LitElement {
     get imageBoxClass() {
         return this.isDeemphasize ? 'item-image-box' : undefined;
     }
+    get boxWaveformClass() {
+        return `item-audio${this.isWaveform ? ` ${this.randomGradient}` : ''}`;
+    }
+    get itemImageWaveformClass() {
+        return `item-image${this.isWaveform ? ' waveform' : ''}`;
+    }
     get randomGradient() {
-        return `grad${Math.floor(Math.random() * (6 - 1) + 1)}`;
+        var _a;
+        let gradientInt = 1;
+        if ((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier) {
+            gradientInt = this.generateHashCode(this.model.identifier) % 6;
+        }
+        return `grad${gradientInt}`;
+    }
+    generateHashCode(str) {
+        return str
+            .split('')
+            .reduce((acc, char) => acc + char.charCodeAt(0), 0);
     }
     static get styles() {
         return css `
@@ -137,7 +154,7 @@ let ItemImage = class ItemImage extends LitElement {
         text-align: center;
       }
 
-      #grad1 {
+      .grad1 {
         background: linear-gradient(
           hsl(300, 80%, 55%),
           hsl(330, 80%, 33%) 35%,
@@ -146,7 +163,7 @@ let ItemImage = class ItemImage extends LitElement {
         );
       }
 
-      #grad2 {
+      .grad2 {
         background: linear-gradient(
           hsl(200, 80%, 55%),
           hsl(230, 80%, 33%) 35%,
@@ -155,7 +172,7 @@ let ItemImage = class ItemImage extends LitElement {
         );
       }
 
-      #grad3 {
+      .grad3 {
         background: linear-gradient(
           hsl(160, 80%, 55%),
           hsl(190, 80%, 33%) 35%,
@@ -164,7 +181,7 @@ let ItemImage = class ItemImage extends LitElement {
         );
       }
 
-      #grad4 {
+      .grad4 {
         background: linear-gradient(
           hsl(250, 80%, 55%),
           hsl(280, 80%, 33%) 35%,
@@ -173,7 +190,7 @@ let ItemImage = class ItemImage extends LitElement {
         );
       }
 
-      #grad5 {
+      .grad5 {
         background: linear-gradient(
           hsl(280, 80%, 55%),
           hsl(310, 80%, 33%) 35%,
@@ -182,7 +199,7 @@ let ItemImage = class ItemImage extends LitElement {
         );
       }
 
-      #grad6 {
+      .grad6 {
         background: linear-gradient(
           hsl(340, 80%, 55%),
           hsl(0, 80%, 33%) 35%,
@@ -205,6 +222,9 @@ __decorate([
 __decorate([
     state()
 ], ItemImage.prototype, "isDeemphasize", void 0);
+__decorate([
+    state()
+], ItemImage.prototype, "isWaveform", void 0);
 __decorate([
     query('.item-image')
 ], ItemImage.prototype, "itemImageWaveform", 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":";AAAA,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,OAAO,EAEP,UAAU,GACX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAKzD,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAAzC;;QAK+B,eAAU,GAAG,KAAK,CAAC;QAE/B,kBAAa,GAAG,KAAK,CAAC;IAoMzC,CAAC;IAhMW,OAAO,CAAC,OAAuB;QACvC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;IACH,CAAC;IAEO,aAAa;;QACnB,IAAI,CAAC,aAAa;YAChB,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,mCAAI,KAAK,CAAC;IAC7D,CAAC;IAED,MAAM;;QACJ,OAAO,IAAI,CAAA;mBACI,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;UACtC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,MAAK,OAAO;YACjC,CAAC,CAAC,IAAI,CAAC,gBAAgB;YACvB,CAAC,CAAC,IAAI,CAAC,uBAAuB;UAC9B,IAAI,CAAC,kBAAkB;;KAE5B,CAAC;IACJ,CAAC;IAED,IAAY,QAAQ;;QAClB,OAAO,GAAG,IAAI,CAAC,YAAY,iBAAiB,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,EAAE,CAAC;IACvE,CAAC;IAED,YAAY;IACZ,IAAY,uBAAuB;QACjC,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,UAAU;sCACO,IAAI,CAAC,QAAQ;;KAE9C,CAAC;IACJ,CAAC;IAED,IAAY,gBAAgB;;QAC1B,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,cAAc;;;iBAG9B,IAAI,CAAC,QAAQ;iBACb,SAAS,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,CAAC;kBAChC,IAAI,CAAC,oBAAoB;;;KAGtC,CAAC;IACJ,CAAC;IAED,IAAY,kBAAkB;QAC5B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,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,iBAAiB,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;SAClD;IACH,CAAC;IAED,UAAU;IACV,IAAY,UAAU;QACpB,OAAO,cAAc,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;IACxE,CAAC;IAED,IAAY,aAAa;QACvB,OAAO,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3D,CAAC;IAED,IAAY,cAAc;QACxB,OAAO,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;IAC1D,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6GT,CAAC;IACJ,CAAC;CACF,CAAA;AA1M6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAuB;AAErB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAoB;AAEvC;IAAR,KAAK,EAAE;gDAA+B;AAEjB;IAArB,KAAK,CAAC,aAAa,CAAC;oDAA8C;AATxD,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA2MrB;SA3MY,SAAS","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 = 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=\"box\" id=${this.randomGradient}>\n        <img\n          class=\"item-image\"\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.itemImageWaveform.classList.add('waveform');\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 randomGradient() {\n    return `grad${Math.floor(Math.random() * (6 - 1) + 1)}`;\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":";AAAA,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,OAAO,EAEP,UAAU,GACX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAKzD,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAAzC;;QAK+B,eAAU,GAAG,KAAK,CAAC;QAE/B,kBAAa,GAAY,KAAK,CAAC;QAE/B,eAAU,GAAY,KAAK,CAAC;IAsN/C,CAAC;IAlNW,OAAO,CAAC,OAAuB;QACvC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;IACH,CAAC;IAEO,aAAa;;QACnB,IAAI,CAAC,aAAa;YAChB,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,mCAAI,KAAK,CAAC;IAC7D,CAAC;IAED,MAAM;;QACJ,OAAO,IAAI,CAAA;mBACI,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;UACtC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,MAAK,OAAO;YACjC,CAAC,CAAC,IAAI,CAAC,gBAAgB;YACvB,CAAC,CAAC,IAAI,CAAC,uBAAuB;UAC9B,IAAI,CAAC,kBAAkB;;KAE5B,CAAC;IACJ,CAAC;IAED,IAAY,QAAQ;;QAClB,OAAO,GAAG,IAAI,CAAC,YAAY,iBAAiB,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,EAAE,CAAC;IACvE,CAAC;IAED,YAAY;IACZ,IAAY,uBAAuB;QACjC,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,UAAU;sCACO,IAAI,CAAC,QAAQ;;KAE9C,CAAC;IACJ,CAAC;IAED,IAAY,gBAAgB;;QAC1B,OAAO,IAAI,CAAA;mBACI,IAAI,CAAC,gBAAgB;;kBAEtB,IAAI,CAAC,sBAAsB;iBAC5B,IAAI,CAAC,QAAQ;iBACb,SAAS,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,CAAC;kBAChC,IAAI,CAAC,oBAAoB;;;KAGtC,CAAC;IACJ,CAAC;IAED,IAAY,kBAAkB;QAC5B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,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,UAAU;IACV,IAAY,UAAU;QACpB,OAAO,cAAc,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;IACxE,CAAC;IAED,IAAY,aAAa;QACvB,OAAO,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3D,CAAC;IAED,IAAY,gBAAgB;QAC1B,OAAO,aAAa,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;IACzE,CAAC;IAED,IAAY,sBAAsB;QAChC,OAAO,aAAa,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;IAC3D,CAAC;IAED,IAAY,cAAc;;QACxB,IAAI,WAAW,GAAG,CAAC,CAAC;QACpB,IAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,EAAE;YAC1B,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;SAChE;QACD,OAAO,OAAO,WAAW,EAAE,CAAC;IAC9B,CAAC;IAEO,gBAAgB,CAAC,GAAW;QAClC,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,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6GT,CAAC;IACJ,CAAC;CACF,CAAA;AA9N6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAuB;AAErB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAoB;AAEvC;IAAR,KAAK,EAAE;gDAAwC;AAEvC;IAAR,KAAK,EAAE;6CAAqC;AAEvB;IAArB,KAAK,CAAC,aAAa,CAAC;oDAA8C;AAXxD,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA+NrB;SA/NY,SAAS","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"]}

package/dist/src/tiles/list/tile-list-detail.d.ts

@@ -0,0 +1,7 @@
+import { LitElement } from 'lit';
+import { TileModel } from '../../models';
+export declare class TileListDetail extends LitElement {
+    model?: TileModel;
+    render(): import("lit-html").TemplateResult<1>;
+    static get styles(): import("lit").CSSResult;
+}

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

@@ -0,0 +1,28 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let TileListDetail = class TileListDetail extends LitElement {
+    render() {
+        var _a, _b, _c, _d;
+        return html `
+      <h1>${(_a = this.model) === null || _a === void 0 ? void 0 : _a.title}</h1>
+      <h2>${(_c = (_b = this.model) === null || _b === void 0 ? void 0 : _b.datePublished) === null || _c === void 0 ? void 0 : _c.toDateString()}</h2>
+      <p>${(_d = this.model) === null || _d === void 0 ? void 0 : _d.description}</p>
+    `;
+    }
+    static get styles() {
+        return css `
+      h1 {
+        margin-top: 0;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], TileListDetail.prototype, "model", void 0);
+TileListDetail = __decorate([
+    customElement('tile-list-detail')
+], TileListDetail);
+export { TileListDetail };
+//# sourceMappingURL=tile-list-detail.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tile-list-detail.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-detail.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI5D,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAG5C,MAAM;;QACJ,OAAO,IAAI,CAAA;YACH,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;YACjB,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,0CAAE,YAAY,EAAE;WAC1C,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW;KAC7B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;KAIT,CAAC;IACJ,CAAC;CACF,CAAA;AAjB6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmB;AADnC,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAkB1B;SAlBY,cAAc","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TileModel } from '../../models';\n\n@customElement('tile-list-detail')\nexport class TileListDetail extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  render() {\n    return html`\n      <h1>${this.model?.title}</h1>\n      <h2>${this.model?.datePublished?.toDateString()}</h2>\n      <p>${this.model?.description}</p>\n    `;\n  }\n\n  static get styles() {\n    return css`\n      h1 {\n        margin-top: 0;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/loading-tile.d.ts

@@ -0,0 +1,5 @@
+import { LitElement } from 'lit';
+export declare class LoadingTile extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static get styles(): import("lit").CSSResult;
+}

package/dist/src/tiles/loading-tile.js

@@ -0,0 +1,32 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+let LoadingTile = class LoadingTile extends LitElement {
+    render() {
+        return html ` <div id="container"></div> `;
+    }
+    static get styles() {
+        return css `
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      #container {
+        background: linear-gradient(
+          to right,
+          rgba(25, 69, 154, 0.1),
+          rgb(105, 161, 234, 0.2)
+        );
+        background-size: 100% 100%;
+        display: block;
+        height: 100%;
+      }
+    `;
+    }
+};
+LoadingTile = __decorate([
+    customElement('loading-tile')
+], LoadingTile);
+export { LoadingTile };
+//# sourceMappingURL=loading-tile.js.map

package/dist/src/tiles/loading-tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-tile.js","sourceRoot":"","sources":["../../../src/tiles/loading-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IACzC,MAAM;QACJ,OAAO,IAAI,CAAA,8BAA8B,CAAC;IAC5C,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;KAgBT,CAAC;IACJ,CAAC;CACF,CAAA;AAxBY,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAwBvB;SAxBY,WAAW","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('loading-tile')\nexport class LoadingTile extends LitElement {\n  render() {\n    return html` <div id=\"container\"></div> `;\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n        height: 100%;\n      }\n\n      #container {\n        background: linear-gradient(\n          to right,\n          rgba(25, 69, 154, 0.1),\n          rgb(105, 161, 234, 0.2)\n        );\n        background-size: 100% 100%;\n        display: block;\n        height: 100%;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/utils/format-string.d.ts

@@ -0,0 +1,2 @@
+export declare function strHasSpace(str: string): boolean;
+export declare function isStrOneLiner(str: string): boolean;

package/dist/src/utils/format-string.js

@@ -0,0 +1,7 @@
+export function strHasSpace(str) {
+    return /\s/.test(str);
+}
+export function isStrOneLiner(str) {
+    return !strHasSpace(str) && str.length >= 24;
+}
+//# sourceMappingURL=format-string.js.map

package/dist/src/utils/format-string.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-string.js","sourceRoot":"","sources":["../../../src/utils/format-string.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,WAAW,CAAC,GAAW;IACrC,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACxB,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,GAAW;IACvC,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,MAAM,IAAI,EAAE,CAAC;AAC/C,CAAC","sourcesContent":["export function strHasSpace(str: string): boolean {\n  return /\\s/.test(str);\n}\n\nexport function isStrOneLiner(str: string): boolean {\n  return !strHasSpace(str) && str.length >= 24;\n}\n"]}