@internetarchive/collection-browser 0.3.9 → 0.4.0

package/dist/src/assets/img/icons/login-required.js

@@ -4,24 +4,12 @@ export const loginRequiredIcon = svg `
     viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g fill="none" fill-rule="nonzero">
+    <g fill="#000" fill-rule="evenodd">
       <path
-        d="m11 48h11c-.0377367 5.0230706-.0377367 17.6897373 0 38h28v-38h12c-14.7643578-21.746483-22.9310245-33.4131497-24.5-35z"
-        fill="#fff"
-        transform="matrix(0 1 -1 0 86 13)"
+        d="m86 0c5.5228475 0 10 4.4771525 10 10v80c0 5.5228475-4.4771525 10-10 10h-57c-5.5228475 0-10-4.4771525-10-10v-13h7.999l.001 8c0 2.6887547 2.1223067 4.8818181 4.7831104 4.9953805l.2168896.0046195h50.06c2.6887547 0 4.8818181-2.1223067 4.9953805-4.7831104l.0046195-.2168896v-70c0-2.7614237-2.2385763-5-5-5h-50.06c-2.6887547 0-4.8818181 2.1223067-4.9953805 4.7831104l-.0046195.2168896-.001 7h-7.999v-12c0-5.5228475 4.4771525-10 10-10z"
       />
       <path
-        d="m17 44h9c-.0377367 5.0230706-.0377367 17.0230706 0 36h18v-36h10c-10.0976911-15.0798163-15.9310245-23.4131497-17.5-25z"
-        fill="#000"
-        transform="matrix(0 1 -1 0 85 14)"
-      />
-      <path
-        d="m84.3595506 0h-55.7191012c-8.6379817 0-15.6404494 6.39593215-15.6404494 14.2857143v15.7142857h20v-11h47v62l-47-1v-11h-20v16.7142857c0 7.8897822 7.0024677 14.2857143 15.6404494 14.2857143h55.7191012c8.6379817 0 15.6404494-6.3959321 15.6404494-14.2857143v-71.4285714c0-7.88978215-7.0024677-14.2857143-15.6404494-14.2857143z"
-        fill="#fff"
-      />
-      <path
-        d="m84.2597403 5c5.3793969 0 9.7402597 4.02943725 9.7402597 9v72c0 4.9705627-4.3608628 9-9.7402597 9h-55.5194806c-5.3793969 0-9.7402597-4.0294373-9.7402597-9v-12h8v7.5c0 2.4198792 1.8593897 4.3936363 4.4510815 4.4958424l48.9709964.0041576c2.6189169 0 4.4673094-2.6052767 4.5779221-5v-62c0-2.4852814-2.3103015-5-5-5h-48.3376623c-2.618917 0-4.551725 1.6052767-4.6623377 4v7h-8v-11c0-4.97056275 4.3608628-9 9.7402597-9z"
-        fill="#000"
+        d="m4 52h14c-.0377367 5.0230706-.0377367 15.3564039 0 31h35v-31h16c-20.0693886-21.0798163-30.8885707-32.4131497-32.4575462-34z" fill-rule="nonzero" transform="matrix(0 1 -1 0 87 14)"
       />
     </g>
     <title>Log in to view this item</title>

package/dist/src/assets/img/icons/login-required.js.map

@@ -1 +1 @@
-{"version":3,"file":"login-required.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/login-required.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BnC,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const loginRequiredIcon = svg`\n  <svg\n    viewBox=\"0 0 100 100\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g fill=\"none\" fill-rule=\"nonzero\">\n      <path\n        d=\"m11 48h11c-.0377367 5.0230706-.0377367 17.6897373 0 38h28v-38h12c-14.7643578-21.746483-22.9310245-33.4131497-24.5-35z\"\n        fill=\"#fff\"\n        transform=\"matrix(0 1 -1 0 86 13)\"\n      />\n      <path\n        d=\"m17 44h9c-.0377367 5.0230706-.0377367 17.0230706 0 36h18v-36h10c-10.0976911-15.0798163-15.9310245-23.4131497-17.5-25z\"\n        fill=\"#000\"\n        transform=\"matrix(0 1 -1 0 85 14)\"\n      />\n      <path\n        d=\"m84.3595506 0h-55.7191012c-8.6379817 0-15.6404494 6.39593215-15.6404494 14.2857143v15.7142857h20v-11h47v62l-47-1v-11h-20v16.7142857c0 7.8897822 7.0024677 14.2857143 15.6404494 14.2857143h55.7191012c8.6379817 0 15.6404494-6.3959321 15.6404494-14.2857143v-71.4285714c0-7.88978215-7.0024677-14.2857143-15.6404494-14.2857143z\"\n        fill=\"#fff\"\n      />\n      <path\n        d=\"m84.2597403 5c5.3793969 0 9.7402597 4.02943725 9.7402597 9v72c0 4.9705627-4.3608628 9-9.7402597 9h-55.5194806c-5.3793969 0-9.7402597-4.0294373-9.7402597-9v-12h8v7.5c0 2.4198792 1.8593897 4.3936363 4.4510815 4.4958424l48.9709964.0041576c2.6189169 0 4.4673094-2.6052767 4.5779221-5v-62c0-2.4852814-2.3103015-5-5-5h-48.3376623c-2.618917 0-4.551725 1.6052767-4.6623377 4v7h-8v-11c0-4.97056275 4.3608628-9 9.7402597-9z\"\n        fill=\"#000\"\n      />\n    </g>\n    <title>Log in to view this item</title>\n  </svg>\n`;\n"]}
+{"version":3,"file":"login-required.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/login-required.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;CAenC,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const loginRequiredIcon = svg`\n  <svg\n    viewBox=\"0 0 100 100\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g fill=\"#000\" fill-rule=\"evenodd\">\n      <path\n        d=\"m86 0c5.5228475 0 10 4.4771525 10 10v80c0 5.5228475-4.4771525 10-10 10h-57c-5.5228475 0-10-4.4771525-10-10v-13h7.999l.001 8c0 2.6887547 2.1223067 4.8818181 4.7831104 4.9953805l.2168896.0046195h50.06c2.6887547 0 4.8818181-2.1223067 4.9953805-4.7831104l.0046195-.2168896v-70c0-2.7614237-2.2385763-5-5-5h-50.06c-2.6887547 0-4.8818181 2.1223067-4.9953805 4.7831104l-.0046195.2168896-.001 7h-7.999v-12c0-5.5228475 4.4771525-10 10-10z\"\n      />\n      <path\n        d=\"m4 52h14c-.0377367 5.0230706-.0377367 15.3564039 0 31h35v-31h16c-20.0693886-21.0798163-30.8885707-32.4131497-32.4575462-34z\" fill-rule=\"nonzero\" transform=\"matrix(0 1 -1 0 87 14)\"\n      />\n    </g>\n    <title>Log in to view this item</title>\n  </svg>\n`;\n"]}

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

@@ -4,25 +4,9 @@ export const restrictedIcon = svg `
     viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g
-      fill="none"
-      fill-rule="evenodd"
-    >
     <path
-      d="m56.4612493 8.80450354 41.8901185 75.94632926c1.7706782 2.8433173 2.1150372 5.2623412 1.0330766 7.2570716-1.0819604 1.9947304-3.26978 2.9920956-6.5634587 2.9920956h-85.69973905c-3.29367873 0-5.46954894-.9973652-6.52761065-2.9920956-1.0580617-1.9947304-.70175345-4.4137543 1.06892476-7.2570716l41.89011844-75.12308969c1.8184757-2.84331737 3.9693609-4.37738627 6.4526556-4.60220671s4.6341799 1.03483527 6.4526556 3.77896714z"
-      fill="#000"
-      fill-rule="nonzero"
+      d="m56.4612493 8.80450354 41.8901185 75.94632926c1.7706782 2.8433173 2.1150372 5.2623412 1.0330766 7.2570716-1.0819604 1.9947304-3.26978 2.9920956-6.5634587 2.9920956h-85.69973905c-3.29367873 0-5.46954894-.9973652-6.52761065-2.9920956-1.0580617-1.9947304-.70175345-4.4137543 1.06892476-7.2570716l41.89011844-75.12308969c1.8184757-2.84331737 3.9693609-4.37738627 6.4526556-4.60220671s4.6341799 1.03483527 6.4526556 3.77896714zm28.5387507 75.19549646-35.037482-62-34.962518 62zm-31-34.7484359v-10.2515641h-8v10.2515641l2.089172 14.7484359h3.8184713zm-8 19.7484359v8h8v-8z"
     />
-    <path
-      d="m94.0140845 90-44.5547054-79-44.4593791 79z"
-      fill="#f8e71c"
-      fill-rule="nonzero"
-    />
-    <path
-      d="m54 69v8h-8v-8zm0-30v10.2515641l-2.0923567 14.7484359h-3.8184713l-2.089172-14.7484359v-10.2515641z"
-      fill="#000"
-    />
-    </g>
     <title>Content may be inappropriate</title>
   </svg>
 `;

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

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

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

@@ -10,18 +10,14 @@ export const baseItemImageStyles = css `
   }
 
   .list-box {
-    width: 100%;
-    height: 100%;
     overflow: hidden;
     box-sizing: border-box;
-    display: flex;
+    display: inline-block;
     position: relative;
-    max-width: 100px;
   }
 
   .contain {
     object-fit: contain;
-    object-position: top;
     height: 100%;
     width: 100%;
   }
@@ -31,7 +27,8 @@ export const baseItemImageStyles = css `
   }
 
   .blur {
-    filter: blur(5px);
+    filter: blur(15px);
+    box-shadow: 1px 1px 2px 0px;
   }
 `;
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"item-image-styles.js","sourceRoot":"","sources":["../../../src/styles/item-image-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BrC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DxC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Base item-image styles\n */\nexport const baseItemImageStyles = css`\n  .drop-shadow {\n    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));\n    overflow: hidden;\n    height: 100%;\n  }\n\n  .list-box {\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    box-sizing: border-box;\n    display: flex;\n    position: relative;\n    max-width: 100px;\n  }\n\n  .contain {\n    object-fit: contain;\n    object-position: top;\n    height: 100%;\n    width: 100%;\n  }\n\n  .cover {\n    object-fit: cover;\n  }\n\n  .blur {\n    filter: blur(5px);\n  }\n`;\n\n/**\n * Waveform styles\n */\nexport const waveformGradientStyles = css`\n  .waveform {\n    mix-blend-mode: screen;\n    position: relative;\n    height: 62.5%;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  .waveform-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  .waveform-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  .waveform-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  .waveform-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  .waveform-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  .waveform-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"]}
+{"version":3,"file":"item-image-styles.js","sourceRoot":"","sources":["../../../src/styles/item-image-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BrC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DxC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Base item-image styles\n */\nexport const baseItemImageStyles = css`\n  .drop-shadow {\n    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));\n    overflow: hidden;\n    height: 100%;\n  }\n\n  .list-box {\n    overflow: hidden;\n    box-sizing: border-box;\n    display: inline-block;\n    position: relative;\n  }\n\n  .contain {\n    object-fit: contain;\n    height: 100%;\n    width: 100%;\n  }\n\n  .cover {\n    object-fit: cover;\n  }\n\n  .blur {\n    filter: blur(15px);\n    box-shadow: 1px 1px 2px 0px;\n  }\n`;\n\n/**\n * Waveform styles\n */\nexport const waveformGradientStyles = css`\n  .waveform {\n    mix-blend-mode: screen;\n    position: relative;\n    height: 62.5%;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  .waveform-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  .waveform-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  .waveform-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  .waveform-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  .waveform-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  .waveform-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/grid/item-tile.js

@@ -146,6 +146,8 @@ let ItemTile = class ItemTile extends LitElement {
       image-block {
         display: block;
         margin-bottom: 5px;
+        position: relative;
+        text-align: center;
       }
 
       image-block.has-snippets {

package/dist/src/tiles/grid/item-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { SortParam } from '@internetarchive/search-service';\n\nimport { formatDate } from '../../utils/format-date';\nimport type { TileModel } from '../../models';\n\nimport '../image-block';\nimport '../text-snippet-block';\nimport '../item-image';\nimport '../mediatype-icon';\nimport './tile-stats';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  render() {\n    const itemTitle = this.model?.title;\n\n    return html`\n      <div class=\"container\">\n        <div class=\"item-info\">\n          <div id=\"title\">\n            <h1 class=\"truncated\" title=${ifDefined(itemTitle)}>\n              ${itemTitle}\n            </h1>\n          </div>\n\n          <image-block \n            class=${this.hasSnippets ? 'has-snippets' : nothing}\n            .model=${this.model}\n            .baseImageUrl=${this.baseImageUrl}\n            .loggedIn=${this.loggedIn}\n            .isCompactTile=${false}\n            .isListTile=${false}\n            .viewSize=${'grid'}>\n          </image-block>\n\n          ${this.textSnippetsTemplate}\n\n          ${\n            this.doesSortedByDate\n              ? this.sortedDateInfoTemplate\n              : this.creatorTemplate\n          }\n        </div>\n\n        <tile-stats \n          .mediatype=${this.model?.mediatype}\n          .viewCount=${this.model?.viewCount}\n          .favCount=${this.model?.favCount}\n          .commentCount=${this.model?.commentCount}>\n        </tile-stats>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Templates\n   */\n  private get doesSortedByDate() {\n    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n      this.sortParam?.field as string\n    );\n  }\n\n  private get sortedDateInfoTemplate() {\n    let sortedValue;\n\n    switch (this.sortParam?.field) {\n      case 'date':\n        sortedValue = { field: 'published', value: this.model?.datePublished };\n        break;\n      case 'reviewdate':\n        sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };\n        break;\n      case 'addeddate':\n        sortedValue = { field: 'added', value: this.model?.dateAdded };\n        break;\n      case 'publicdate':\n        sortedValue = { field: 'archived', value: this.model?.dateArchived };\n        break;\n      default:\n        break;\n    }\n\n    return html`\n      <div class=\"date-sorted-by truncated\">\n        <span>\n          ${sortedValue?.field} ${formatDate(sortedValue?.value, 'long')}\n        </span>\n      </div>\n    `;\n  }\n\n  private get creatorTemplate() {\n    return html`\n      <div class=\"created-by truncated\">\n        ${this.model?.creator\n          ? html`<span>by&nbsp;${this.model?.creator}</span>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n    if (!this.hasSnippets) return nothing;\n\n    return html`<text-snippet-block\n      viewsize=\"grid\"\n      .snippets=${this.model?.snippets}\n    ></text-snippet-block>`;\n  }\n\n  private get hasSnippets(): boolean {\n    return !!this.model?.snippets?.length;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .container {\n        background-color: #ffffff;\n        border-radius: var(--collectionTileCornerRadius, 4px);\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      .item-info {\n        padding: 5px 5px 0 5px;\n        flex-grow: 1;\n      }\n\n      #title {\n        flex-shrink: 0;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      .container:hover > .item-info > #title > .truncated {\n        text-decoration: underline;\n      }\n\n      /** this is a workaround for Safari 15 where the hover effects are not working */\n      #title:hover > .truncated {\n        text-decoration: underline;\n      }\n\n      image-block {\n        display: block;\n        margin-bottom: 5px;\n      }\n\n      image-block.has-snippets {\n        /* If there is a text snippet block present, the image block needs to shrink */\n        --imgBlockHeight: 11rem;\n      }\n\n      .created-by,\n      .date-sorted-by {\n        display: flex;\n        justify-content: center;\n        align-items: flex-end; /* Important to start text from bottom */\n        height: 3rem;\n        padding-top: 1rem;\n      }\n\n      .truncated {\n        flex: 1;\n        color: #2c2c2c;\n        min-width: 0; /* Important for long words! */\n        text-align: center;\n        line-height: 2rem;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        word-wrap: break-word;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n      }\n\n      .truncated span {\n        font-size: 1.4rem;\n        display: -webkit-box;\n      }\n\n      h1.truncated {\n        margin-top: 0rem;\n        margin-bottom: 0.5rem;\n        font-size: 1.6rem;\n        height: 4rem;\n        display: -webkit-box;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { SortParam } from '@internetarchive/search-service';\n\nimport { formatDate } from '../../utils/format-date';\nimport type { TileModel } from '../../models';\n\nimport '../image-block';\nimport '../text-snippet-block';\nimport '../item-image';\nimport '../mediatype-icon';\nimport './tile-stats';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  render() {\n    const itemTitle = this.model?.title;\n\n    return html`\n      <div class=\"container\">\n        <div class=\"item-info\">\n          <div id=\"title\">\n            <h1 class=\"truncated\" title=${ifDefined(itemTitle)}>\n              ${itemTitle}\n            </h1>\n          </div>\n\n          <image-block \n            class=${this.hasSnippets ? 'has-snippets' : nothing}\n            .model=${this.model}\n            .baseImageUrl=${this.baseImageUrl}\n            .loggedIn=${this.loggedIn}\n            .isCompactTile=${false}\n            .isListTile=${false}\n            .viewSize=${'grid'}>\n          </image-block>\n\n          ${this.textSnippetsTemplate}\n\n          ${\n            this.doesSortedByDate\n              ? this.sortedDateInfoTemplate\n              : this.creatorTemplate\n          }\n        </div>\n\n        <tile-stats \n          .mediatype=${this.model?.mediatype}\n          .viewCount=${this.model?.viewCount}\n          .favCount=${this.model?.favCount}\n          .commentCount=${this.model?.commentCount}>\n        </tile-stats>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Templates\n   */\n  private get doesSortedByDate() {\n    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n      this.sortParam?.field as string\n    );\n  }\n\n  private get sortedDateInfoTemplate() {\n    let sortedValue;\n\n    switch (this.sortParam?.field) {\n      case 'date':\n        sortedValue = { field: 'published', value: this.model?.datePublished };\n        break;\n      case 'reviewdate':\n        sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };\n        break;\n      case 'addeddate':\n        sortedValue = { field: 'added', value: this.model?.dateAdded };\n        break;\n      case 'publicdate':\n        sortedValue = { field: 'archived', value: this.model?.dateArchived };\n        break;\n      default:\n        break;\n    }\n\n    return html`\n      <div class=\"date-sorted-by truncated\">\n        <span>\n          ${sortedValue?.field} ${formatDate(sortedValue?.value, 'long')}\n        </span>\n      </div>\n    `;\n  }\n\n  private get creatorTemplate() {\n    return html`\n      <div class=\"created-by truncated\">\n        ${this.model?.creator\n          ? html`<span>by&nbsp;${this.model?.creator}</span>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n    if (!this.hasSnippets) return nothing;\n\n    return html`<text-snippet-block\n      viewsize=\"grid\"\n      .snippets=${this.model?.snippets}\n    ></text-snippet-block>`;\n  }\n\n  private get hasSnippets(): boolean {\n    return !!this.model?.snippets?.length;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .container {\n        background-color: #ffffff;\n        border-radius: var(--collectionTileCornerRadius, 4px);\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      .item-info {\n        padding: 5px 5px 0 5px;\n        flex-grow: 1;\n      }\n\n      #title {\n        flex-shrink: 0;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      .container:hover > .item-info > #title > .truncated {\n        text-decoration: underline;\n      }\n\n      /** this is a workaround for Safari 15 where the hover effects are not working */\n      #title:hover > .truncated {\n        text-decoration: underline;\n      }\n\n      image-block {\n        display: block;\n        margin-bottom: 5px;\n        position: relative;\n        text-align: center;\n      }\n\n      image-block.has-snippets {\n        /* If there is a text snippet block present, the image block needs to shrink */\n        --imgBlockHeight: 11rem;\n      }\n\n      .created-by,\n      .date-sorted-by {\n        display: flex;\n        justify-content: center;\n        align-items: flex-end; /* Important to start text from bottom */\n        height: 3rem;\n        padding-top: 1rem;\n      }\n\n      .truncated {\n        flex: 1;\n        color: #2c2c2c;\n        min-width: 0; /* Important for long words! */\n        text-align: center;\n        line-height: 2rem;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        word-wrap: break-word;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n      }\n\n      .truncated span {\n        font-size: 1.4rem;\n        display: -webkit-box;\n      }\n\n      h1.truncated {\n        margin-top: 0rem;\n        margin-bottom: 0.5rem;\n        font-size: 1.6rem;\n        height: 4rem;\n        display: -webkit-box;\n      }\n    `;\n  }\n}\n"]}

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

@@ -48,6 +48,7 @@ let ImageBlock = class ImageBlock extends LitElement {
       <icon-overlay
         .loggedIn=${this.loggedIn}
         .loginRequired=${(_c = this.model) === null || _c === void 0 ? void 0 : _c.loginRequired}
+        .isCompactTile=${this.isCompactTile}
       >
       </icon-overlay>
     `;
@@ -62,6 +63,7 @@ let ImageBlock = class ImageBlock extends LitElement {
       <text-overlay
         .loggedIn=${this.loggedIn}
         .loginRequired=${(_c = this.model) === null || _c === void 0 ? void 0 : _c.loginRequired}
+        ?iconRequired=${true}
       >
       </text-overlay>
     `;
@@ -77,12 +79,17 @@ let ImageBlock = class ImageBlock extends LitElement {
       .grid {
         height: var(--imgBlockHeight, 16rem);
         flex: 1;
+        display: inline-block;
+        position: initial;
       }
 
       /** tile-list view */
       .list.desktop {
         width: 100px;
         height: 100px;
+        display: inline-block;
+        position: relative;
+        text-align: center;
       }
 
       .list.mobile {
@@ -93,6 +100,7 @@ let ImageBlock = class ImageBlock extends LitElement {
       /** tile-list-compact view */
       .list-compact {
         display: block;
+        text-align: center;
       }
 
       .list-compact.desktop {

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

@@ -1 +1 @@
-{"version":3,"file":"image-block.js","sourceRoot":"","sources":["../../../src/tiles/image-block.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel } from '../models';\n\nimport './overlay/icon-overlay';\nimport './overlay/text-overlay';\n\n@customElement('image-block')\nexport class ImageBlock extends LitElement {\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) isCompactTile = false;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) viewSize: string = 'desktop';\n\n  render() {\n    if (!this.model?.identifier) return nothing;\n\n    return html`\n      <div class=${classMap(this.baseClass)}>\n        <item-image\n          .model=${this.model}\n          .baseImageUrl=${this.baseImageUrl}\n          .isListTile=${this.isListTile}\n          .isCompactTile=${this.isCompactTile}\n          .loggedIn=${this.loggedIn}\n          style=\"--imgHeight: 100%; --imgWidth: 100%\"\n        >\n        </item-image>\n        ${this.textOverlayTemplate} ${this.iconOverlayTemplate}\n      </div>\n    `;\n  }\n\n  private get baseClass(): ClassInfo {\n    return {\n      list: this.isListTile && !this.isCompactTile,\n      'list-compact': this.isListTile && this.isCompactTile,\n      [this.viewSize]: true,\n    };\n  }\n\n  private get iconOverlayTemplate() {\n    if (!this.isListTile) return nothing;\n\n    if (!this.model?.loginRequired && !this.model?.contentWarning)\n      return nothing;\n\n    return html`\n      <icon-overlay\n        .loggedIn=${this.loggedIn}\n        .loginRequired=${this.model?.loginRequired}\n      >\n      </icon-overlay>\n    `;\n  }\n\n  private get textOverlayTemplate() {\n    if (this.isListTile) return nothing;\n\n    if (!this.model?.loginRequired && !this.model?.contentWarning)\n      return nothing;\n\n    return html`\n      <text-overlay\n        .loggedIn=${this.loggedIn}\n        .loginRequired=${this.model?.loginRequired}\n      >\n      </text-overlay>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      div {\n        display: flex;\n        justify-content: center;\n        position: relative;\n      }\n\n      .grid {\n        height: var(--imgBlockHeight, 16rem);\n        flex: 1;\n      }\n\n      /** tile-list view */\n      .list.desktop {\n        width: 100px;\n        height: 100px;\n      }\n\n      .list.mobile {\n        width: 90px;\n        height: 90px;\n      }\n\n      /** tile-list-compact view */\n      .list-compact {\n        display: block;\n      }\n\n      .list-compact.desktop {\n        width: 45px;\n        height: 45px;\n      }\n\n      .list-compact.mobile {\n        width: 30px;\n        height: 30px;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"image-block.js","sourceRoot":"","sources":["../../../src/tiles/image-block.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel } from '../models';\n\nimport './overlay/icon-overlay';\nimport './overlay/text-overlay';\n\n@customElement('image-block')\nexport class ImageBlock extends LitElement {\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) isCompactTile = false;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) viewSize: string = 'desktop';\n\n  render() {\n    if (!this.model?.identifier) return nothing;\n\n    return html`\n      <div class=${classMap(this.baseClass)}>\n        <item-image\n          .model=${this.model}\n          .baseImageUrl=${this.baseImageUrl}\n          .isListTile=${this.isListTile}\n          .isCompactTile=${this.isCompactTile}\n          .loggedIn=${this.loggedIn}\n          style=\"--imgHeight: 100%; --imgWidth: 100%\"\n        >\n        </item-image>\n        ${this.textOverlayTemplate} ${this.iconOverlayTemplate}\n      </div>\n    `;\n  }\n\n  private get baseClass(): ClassInfo {\n    return {\n      list: this.isListTile && !this.isCompactTile,\n      'list-compact': this.isListTile && this.isCompactTile,\n      [this.viewSize]: true,\n    };\n  }\n\n  private get iconOverlayTemplate() {\n    if (!this.isListTile) return nothing;\n\n    if (!this.model?.loginRequired && !this.model?.contentWarning)\n      return nothing;\n\n    return html`\n      <icon-overlay\n        .loggedIn=${this.loggedIn}\n        .loginRequired=${this.model?.loginRequired}\n        .isCompactTile=${this.isCompactTile}\n      >\n      </icon-overlay>\n    `;\n  }\n\n  private get textOverlayTemplate() {\n    if (this.isListTile) return nothing;\n\n    if (!this.model?.loginRequired && !this.model?.contentWarning)\n      return nothing;\n\n    return html`\n      <text-overlay\n        .loggedIn=${this.loggedIn}\n        .loginRequired=${this.model?.loginRequired}\n        ?iconRequired=${true}\n      >\n      </text-overlay>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      div {\n        display: flex;\n        justify-content: center;\n        position: relative;\n      }\n\n      .grid {\n        height: var(--imgBlockHeight, 16rem);\n        flex: 1;\n        display: inline-block;\n        position: initial;\n      }\n\n      /** tile-list view */\n      .list.desktop {\n        width: 100px;\n        height: 100px;\n        display: inline-block;\n        position: relative;\n        text-align: center;\n      }\n\n      .list.mobile {\n        width: 90px;\n        height: 90px;\n      }\n\n      /** tile-list-compact view */\n      .list-compact {\n        display: block;\n        text-align: center;\n      }\n\n      .list-compact.desktop {\n        width: 45px;\n        height: 45px;\n      }\n\n      .list-compact.mobile {\n        width: 30px;\n        height: 30px;\n      }\n    `;\n  }\n}\n"]}

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

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { baseItemImageStyles, waveformGradientStyles, } from '../styles/item-image-styles';
@@ -28,7 +28,10 @@ let ItemImage = class ItemImage extends LitElement {
      */
     get imageSrc() {
         var _a;
-        return `${this.baseImageUrl}/services/img/${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}`;
+        // Don't try to load invalid image URLs
+        return this.baseImageUrl && ((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)
+            ? `${this.baseImageUrl}/services/img/${this.model.identifier}`
+            : nothing;
     }
     get hashBasedGradient() {
         var _a;

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,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,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAIlE,OAAO,EACL,mBAAmB,EACnB,sBAAsB,GACvB,MAAM,6BAA6B,CAAC;AAGrC,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAAzC;;QAK+B,eAAU,GAAG,KAAK,CAAC;QAEnB,kBAAa,GAAG,KAAK,CAAC;QAEtB,aAAQ,GAAG,KAAK,CAAC;QAE7B,eAAU,GAAG,KAAK,CAAC;IAwFtC,CAAC;IApFC,MAAM;QACJ,OAAO,IAAI,CAAA;mBACI,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC;;kBAE7B,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC;iBAC9B,IAAI,CAAC,QAAQ;;kBAEZ,IAAI,CAAC,MAAM;;;KAGxB,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,IAAY,QAAQ;;QAClB,OAAO,GAAG,IAAI,CAAC,YAAY,iBAAiB,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,EAAE,CAAC;IACvE,CAAC;IAED,IAAY,iBAAiB;;QAC3B,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,CAAA,EAAE;YAC3B,OAAO,gBAAgB,CAAC;SACzB;QACD,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,cAAc;QAC7E,OAAO,gBAAgB,QAAQ,EAAE,CAAC;IACpC,CAAC;IAEO,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;;OAEG;IACH,IAAY,aAAa;QACvB,OAAO;YACL,aAAa,EAAE,IAAI;YACnB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,CAAC,IAAI,CAAC,iBAAiB,CAAC,EAAE,IAAI,CAAC,UAAU;SAC1C,CAAC;IACJ,CAAC;IAED,IAAY,cAAc;;QACxB,MAAM,MAAM,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,cAAc,MAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,CAAA,CAAC;QAEvE,OAAO;YACL,OAAO,EAAE,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,UAAU;YAChD,KAAK,EAAE,IAAI,CAAC,aAAa;YACzB,IAAI,EAAE,MAAM,IAAI,KAAK;YACrB,QAAQ,EAAE,IAAI,CAAC,UAAU;SAC1B,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,MAAM;;QACZ,IACE,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,MAAK,OAAO;YAChC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,MAAK,OAAO,CAAC;YACpC,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,aAAa,KAAK,CAAC,EAChE;YACA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB;IACH,CAAC;IAED;;OAEG;IACH,MAAM,KAAK,MAAM;QACf,OAAO;YACL,mBAAmB;YACnB,sBAAsB;YACtB,GAAG,CAAA;;;;;OAKF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAlG6B;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;AAEnB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAAuB;AAEtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAkB;AAErC;IAAR,KAAK,EAAE;6CAA4B;AAEtB;IAAb,KAAK,CAAC,KAAK,CAAC;4CAAsC;AAbxC,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAmGrB;SAnGY,SAAS","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel } from '../models';\n\nimport {\n  baseItemImageStyles,\n  waveformGradientStyles,\n} from '../styles/item-image-styles';\n\n@customElement('item-image')\nexport class ItemImage extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @property({ type: Boolean }) isCompactTile = false;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @state() private isWaveform = false;\n\n  @query('img') private baseImage!: HTMLImageElement;\n\n  render() {\n    return html`\n      <div class=${classMap(this.itemBaseClass)}>\n        <img\n          class=${classMap(this.itemImageClass)}\n          src=\"${this.imageSrc}\"\n          alt=\"\"\n          @load=${this.onLoad}\n        />\n      </div>\n    `;\n  }\n\n  /**\n   * Helpers\n   */\n  private get imageSrc() {\n    return `${this.baseImageUrl}/services/img/${this.model?.identifier}`;\n  }\n\n  private get hashBasedGradient() {\n    if (!this.model?.identifier) {\n      return 'waveform-grad0';\n    }\n    const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5\n    return `waveform-grad${gradient}`;\n  }\n\n  private hashStrToInt(str: string): number {\n    return str\n      .split('')\n      .reduce((acc: number, char: string) => acc + char.charCodeAt(0), 0);\n  }\n\n  /**\n   * Classes\n   */\n  private get itemBaseClass(): ClassInfo {\n    return {\n      'drop-shadow': true,\n      'list-box': this.isListTile,\n      [this.hashBasedGradient]: this.isWaveform,\n    };\n  }\n\n  private get itemImageClass(): ClassInfo {\n    const toBlur = this.model?.contentWarning || this.model?.loginRequired;\n\n    return {\n      contain: !this.isCompactTile && !this.isWaveform,\n      cover: this.isCompactTile,\n      blur: toBlur || false,\n      waveform: this.isWaveform,\n    };\n  }\n\n  /**\n   * Event listener sets isWaveform true if image is waveform\n   */\n  private onLoad() {\n    if (\n      (this.model?.mediatype === 'audio' ||\n        this.model?.mediatype === 'etree') &&\n      this.baseImage.naturalWidth / this.baseImage.naturalHeight === 4\n    ) {\n      this.isWaveform = true;\n    }\n  }\n\n  /**\n   * CSS\n   */\n  static get styles(): CSSResultGroup {\n    return [\n      baseItemImageStyles,\n      waveformGradientStyles,\n      css`\n        img {\n          height: var(--imgHeight, 16rem);\n          width: var(--imgWidth, 16rem);\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"item-image.js","sourceRoot":"","sources":["../../../src/tiles/item-image.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel } from '../models';\n\nimport {\n  baseItemImageStyles,\n  waveformGradientStyles,\n} from '../styles/item-image-styles';\n\n@customElement('item-image')\nexport class ItemImage extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @property({ type: Boolean }) isCompactTile = false;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @state() private isWaveform = false;\n\n  @query('img') private baseImage!: HTMLImageElement;\n\n  render() {\n    return html`\n      <div class=${classMap(this.itemBaseClass)}>\n        <img\n          class=${classMap(this.itemImageClass)}\n          src=\"${this.imageSrc}\"\n          alt=\"\"\n          @load=${this.onLoad}\n        />\n      </div>\n    `;\n  }\n\n  /**\n   * Helpers\n   */\n  private get imageSrc() {\n    // Don't try to load invalid image URLs\n    return this.baseImageUrl && this.model?.identifier\n      ? `${this.baseImageUrl}/services/img/${this.model.identifier}`\n      : nothing;\n  }\n\n  private get hashBasedGradient() {\n    if (!this.model?.identifier) {\n      return 'waveform-grad0';\n    }\n    const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5\n    return `waveform-grad${gradient}`;\n  }\n\n  private hashStrToInt(str: string): number {\n    return str\n      .split('')\n      .reduce((acc: number, char: string) => acc + char.charCodeAt(0), 0);\n  }\n\n  /**\n   * Classes\n   */\n  private get itemBaseClass(): ClassInfo {\n    return {\n      'drop-shadow': true,\n      'list-box': this.isListTile,\n      [this.hashBasedGradient]: this.isWaveform,\n    };\n  }\n\n  private get itemImageClass(): ClassInfo {\n    const toBlur = this.model?.contentWarning || this.model?.loginRequired;\n\n    return {\n      contain: !this.isCompactTile && !this.isWaveform,\n      cover: this.isCompactTile,\n      blur: toBlur || false,\n      waveform: this.isWaveform,\n    };\n  }\n\n  /**\n   * Event listener sets isWaveform true if image is waveform\n   */\n  private onLoad() {\n    if (\n      (this.model?.mediatype === 'audio' ||\n        this.model?.mediatype === 'etree') &&\n      this.baseImage.naturalWidth / this.baseImage.naturalHeight === 4\n    ) {\n      this.isWaveform = true;\n    }\n  }\n\n  /**\n   * CSS\n   */\n  static get styles(): CSSResultGroup {\n    return [\n      baseItemImageStyles,\n      waveformGradientStyles,\n      css`\n        img {\n          height: var(--imgHeight, 16rem);\n          width: var(--imgWidth, 16rem);\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/tiles/overlay/icon-overlay.d.ts

@@ -2,6 +2,9 @@ import { CSSResultGroup, LitElement } from 'lit';
 export declare class IconOverlay extends LitElement {
     loggedIn: boolean;
     loginRequired: boolean;
+    isCompactTile: boolean;
     render(): import("lit-html").TemplateResult<1>;
+    private get getClass();
+    private get iconDisplay();
     static get styles(): CSSResultGroup;
 }

package/dist/src/tiles/overlay/icon-overlay.js

@@ -8,8 +8,17 @@ let IconOverlay = class IconOverlay extends LitElement {
         super(...arguments);
         this.loggedIn = false;
         this.loginRequired = false;
+        this.isCompactTile = false;
     }
     render() {
+        return html `<div class="icon-overlay ${this.getClass}">
+      ${this.iconDisplay}
+    </div>`;
+    }
+    get getClass() {
+        return this.isCompactTile ? 'list-compact' : 'list-detail';
+    }
+    get iconDisplay() {
         return this.loginRequired && !this.loggedIn
             ? html `${loginRequiredIcon}`
             : html `${restrictedIcon}`;
@@ -21,10 +30,28 @@ let IconOverlay = class IconOverlay extends LitElement {
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        -ms-transform: translate(-50%, -50%);
-        width: 50%;
-        height: 50%;
+        width: 100%;
         z-index: 2;
+        background-color: rgb(255, 254, 203);
+        display: flex;
+        justify-content: center;
+        border: 1px solid #2c2c2c;
+      }
+
+      .icon-overlay {
+        height: 20px;
+        width: 20px;
+        padding: 2px;
+        padding: 2px;
+      }
+
+      .list-detail {
+        height: 20px;
+        width: 20px;
+      }
+      .list-compact {
+        height: 15px;
+        width: 15px;
       }
     `;
     }
@@ -35,6 +62,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], IconOverlay.prototype, "loginRequired", void 0);
+__decorate([
+    property({ type: Boolean })
+], IconOverlay.prototype, "isCompactTile", void 0);
 IconOverlay = __decorate([
     customElement('icon-overlay')
 ], IconOverlay);

package/dist/src/tiles/overlay/icon-overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-overlay.js","sourceRoot":"","sources":["../../../../src/tiles/overlay/icon-overlay.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,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAG1E,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAA3C;;QAC+B,aAAQ,GAAG,KAAK,CAAC;QAEjB,kBAAa,GAAG,KAAK,CAAC;IAsBrD,CAAC;IApBC,MAAM;QACJ,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,IAAI,CAAA,GAAG,iBAAiB,EAAE;YAC5B,CAAC,CAAC,IAAI,CAAA,GAAG,cAAc,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;KAWT,CAAC;IACJ,CAAC;CACF,CAAA;AAxB8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAuB;AAHxC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAyBvB;SAzBY,WAAW","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { restrictedIcon } from '../../assets/img/icons/restricted';\nimport { loginRequiredIcon } from '../../assets/img/icons/login-required';\n\n@customElement('icon-overlay')\nexport class IconOverlay extends LitElement {\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Boolean }) loginRequired = false;\n\n  render() {\n    return this.loginRequired && !this.loggedIn\n      ? html`${loginRequiredIcon}`\n      : html`${restrictedIcon}`;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        -ms-transform: translate(-50%, -50%);\n        width: 50%;\n        height: 50%;\n        z-index: 2;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"icon-overlay.js","sourceRoot":"","sources":["../../../../src/tiles/overlay/icon-overlay.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,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAG1E,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAA3C;;QAC+B,aAAQ,GAAG,KAAK,CAAC;QAEjB,kBAAa,GAAG,KAAK,CAAC;QAEtB,kBAAa,GAAG,KAAK,CAAC;IAkDrD,CAAC;IAhDC,MAAM;QACJ,OAAO,IAAI,CAAA,4BAA4B,IAAI,CAAC,QAAQ;QAChD,IAAI,CAAC,WAAW;WACb,CAAC;IACV,CAAC;IAED,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC;IAC7D,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,IAAI,CAAA,GAAG,iBAAiB,EAAE;YAC5B,CAAC,CAAC,IAAI,CAAA,GAAG,cAAc,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6BT,CAAC;IACJ,CAAC;CACF,CAAA;AAtD8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAuB;AAEtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAuB;AALxC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAuDvB;SAvDY,WAAW","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { restrictedIcon } from '../../assets/img/icons/restricted';\nimport { loginRequiredIcon } from '../../assets/img/icons/login-required';\n\n@customElement('icon-overlay')\nexport class IconOverlay extends LitElement {\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Boolean }) loginRequired = false;\n\n  @property({ type: Boolean }) isCompactTile = false;\n\n  render() {\n    return html`<div class=\"icon-overlay ${this.getClass}\">\n      ${this.iconDisplay}\n    </div>`;\n  }\n\n  private get getClass() {\n    return this.isCompactTile ? 'list-compact' : 'list-detail';\n  }\n\n  private get iconDisplay() {\n    return this.loginRequired && !this.loggedIn\n      ? html`${loginRequiredIcon}`\n      : html`${restrictedIcon}`;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 100%;\n        z-index: 2;\n        background-color: rgb(255, 254, 203);\n        display: flex;\n        justify-content: center;\n        border: 1px solid #2c2c2c;\n      }\n\n      .icon-overlay {\n        height: 20px;\n        width: 20px;\n        padding: 2px;\n        padding: 2px;\n      }\n\n      .list-detail {\n        height: 20px;\n        width: 20px;\n      }\n      .list-compact {\n        height: 15px;\n        width: 15px;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/overlay/icon-text-overlay.d.ts

@@ -0,0 +1,9 @@
+import { CSSResultGroup, LitElement } from 'lit';
+export declare class IconTextOverlay extends LitElement {
+    loggedIn: boolean;
+    loginRequired: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    private get iconDisplay();
+    private get textDisplay();
+    static get styles(): CSSResultGroup;
+}

package/dist/src/tiles/overlay/icon-text-overlay.js

@@ -0,0 +1,83 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { loginRequiredIcon } from '../../assets/img/icons/login-required';
+import { restrictedIcon } from '../../assets/img/icons/restricted';
+let IconTextOverlay = class IconTextOverlay extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.loggedIn = false;
+        this.loginRequired = false;
+    }
+    render() {
+        return html `
+      <div class="overlay no-preview">
+        <div class="icon-overlay">${this.iconDisplay}</div>
+        <p class="text-overlay">${this.textDisplay}</p>
+      </div>
+    `;
+    }
+    get iconDisplay() {
+        return this.loginRequired && !this.loggedIn
+            ? html `${loginRequiredIcon}`
+            : html `${restrictedIcon}`;
+    }
+    get textDisplay() {
+        return this.loginRequired && !this.loggedIn
+            ? 'Log in\nto view this item'
+            : 'Content may be inappropriate';
+    }
+    static get styles() {
+        return css `
+      :host {
+        align-items: center;
+        display: flex;
+      }
+
+      .overlay {
+        border: 1px solid #2c2c2c;
+        border-radius: 1px;
+        position: absolute;
+        right: 0;
+        left: 0;
+        width: auto;
+        height: auto;
+        padding: 5px;
+        display: flex;
+        align-items: center;
+        border-radius: 1px;
+        text-align: center;
+      }
+
+      .icon-overlay {
+        width: 40px;
+        height: 40px;
+        display: inherit;
+      }
+      .text-overlay {
+        margin: 0;
+        vertical-align: bottom;
+        padding-left: 5px;
+      }
+
+      .no-preview {
+        background-color: #fffecb;
+        border: 1px solid #2c2c2c;
+        color: #2c2c2c;
+        font-size: 1.4rem;
+        line-height: 2rem;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], IconTextOverlay.prototype, "loggedIn", void 0);
+__decorate([
+    property({ type: Boolean })
+], IconTextOverlay.prototype, "loginRequired", void 0);
+IconTextOverlay = __decorate([
+    customElement('icon-text-overlay')
+], IconTextOverlay);
+export { IconTextOverlay };
+//# sourceMappingURL=icon-text-overlay.js.map

package/dist/src/tiles/overlay/icon-text-overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-text-overlay.js","sourceRoot":"","sources":["../../../../src/tiles/overlay/icon-text-overlay.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;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAA/C;;QAC+B,aAAQ,GAAG,KAAK,CAAC;QAEjB,kBAAa,GAAG,KAAK,CAAC;IAiErD,CAAC;IA/DC,MAAM;QACJ,OAAO,IAAI,CAAA;;oCAEqB,IAAI,CAAC,WAAW;kCAClB,IAAI,CAAC,WAAW;;KAE7C,CAAC;IACJ,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,IAAI,CAAA,GAAG,iBAAiB,EAAE;YAC5B,CAAC,CAAC,IAAI,CAAA,GAAG,cAAc,EAAE,CAAC;IAC9B,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,2BAA2B;YAC7B,CAAC,CAAC,8BAA8B,CAAC;IACrC,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuCT,CAAC;IACJ,CAAC;CACF,CAAA;AAnE8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sDAAuB;AAHxC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAoE3B;SApEY,eAAe","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { loginRequiredIcon } from '../../assets/img/icons/login-required';\nimport { restrictedIcon } from '../../assets/img/icons/restricted';\n\n@customElement('icon-text-overlay')\nexport class IconTextOverlay extends LitElement {\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Boolean }) loginRequired = false;\n\n  render() {\n    return html`\n      <div class=\"overlay no-preview\">\n        <div class=\"icon-overlay\">${this.iconDisplay}</div>\n        <p class=\"text-overlay\">${this.textDisplay}</p>\n      </div>\n    `;\n  }\n\n  private get iconDisplay() {\n    return this.loginRequired && !this.loggedIn\n      ? html`${loginRequiredIcon}`\n      : html`${restrictedIcon}`;\n  }\n\n  private get textDisplay() {\n    return this.loginRequired && !this.loggedIn\n      ? 'Log in\\nto view this item'\n      : 'Content may be inappropriate';\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        align-items: center;\n        display: flex;\n      }\n\n      .overlay {\n        border: 1px solid #2c2c2c;\n        border-radius: 1px;\n        position: absolute;\n        right: 0;\n        left: 0;\n        width: auto;\n        height: auto;\n        padding: 5px;\n        display: flex;\n        align-items: center;\n        border-radius: 1px;\n        text-align: center;\n      }\n\n      .icon-overlay {\n        width: 40px;\n        height: 40px;\n        display: inherit;\n      }\n      .text-overlay {\n        margin: 0;\n        vertical-align: bottom;\n        padding-left: 5px;\n      }\n\n      .no-preview {\n        background-color: #fffecb;\n        border: 1px solid #2c2c2c;\n        color: #2c2c2c;\n        font-size: 1.4rem;\n        line-height: 2rem;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/overlay/text-overlay.d.ts

@@ -2,7 +2,9 @@ import { CSSResultGroup, LitElement } from 'lit';
 export declare class TextOverlay extends LitElement {
     loggedIn: boolean;
     loginRequired: boolean;
+    iconRequired: boolean;
     render(): import("lit-html").TemplateResult<1>;
+    private get iconDisplay();
     private get textDisplay();
     static get styles(): CSSResultGroup;
 }

package/dist/src/tiles/overlay/text-overlay.js

@@ -1,19 +1,32 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { loginRequiredIcon } from '../../assets/img/icons/login-required';
+import { restrictedIcon } from '../../assets/img/icons/restricted';
 let TextOverlay = class TextOverlay extends LitElement {
     constructor() {
         super(...arguments);
         this.loggedIn = false;
         this.loginRequired = false;
+        this.iconRequired = false;
     }
     render() {
-        return html ` <div class="overlay no-preview">${this.textDisplay}</div> `;
+        return html `
+      <div class="overlay no-preview">
+        <div class="icon-overlay">${this.iconDisplay}</div>
+        <p class="text-overlay">${this.textDisplay}</p>
+      </div>
+    `;
+    }
+    get iconDisplay() {
+        return this.loginRequired && !this.loggedIn
+            ? html `${loginRequiredIcon}`
+            : html `${restrictedIcon}`;
     }
     get textDisplay() {
         return this.loginRequired && !this.loggedIn
-            ? 'Log in\nto view this item'
-            : 'Content may be inappropriate';
+            ? html `Log in to view this item`
+            : html `Content may be inappropriate`;
     }
     static get styles() {
         return css `
@@ -28,18 +41,30 @@ let TextOverlay = class TextOverlay extends LitElement {
         position: absolute;
         right: 0;
         left: 0;
+        top: 50%;
+        transform: translate(0px, -50%);
         width: auto;
         height: auto;
         padding: 5px;
+        background-color: #fffecb;
+        display: flex;
+        align-items: center;
+        border-radius: 1px;
       }
 
-      .no-preview {
-        background-color: #fffecb;
+      .icon-overlay {
+        width: 40px;
+        height: 40px;
+        display: inherit;
+      }
+      .text-overlay {
+        margin: 0;
+        vertical-align: bottom;
+        padding-left: 5px;
+        text-align: center;
         color: #2c2c2c;
         font-size: 1.4rem;
         line-height: 2rem;
-        text-align: center;
-        white-space: pre-wrap; // for the newline character
       }
     `;
     }
@@ -50,6 +75,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], TextOverlay.prototype, "loginRequired", void 0);
+__decorate([
+    property({ type: Boolean })
+], TextOverlay.prototype, "iconRequired", void 0);
 TextOverlay = __decorate([
     customElement('text-overlay')
 ], TextOverlay);

package/dist/src/tiles/overlay/text-overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-overlay.js","sourceRoot":"","sources":["../../../../src/tiles/overlay/text-overlay.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;AAG5D,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAA3C;;QAC+B,aAAQ,GAAG,KAAK,CAAC;QAEjB,kBAAa,GAAG,KAAK,CAAC;IAwCrD,CAAC;IAtCC,MAAM;QACJ,OAAO,IAAI,CAAA,oCAAoC,IAAI,CAAC,WAAW,SAAS,CAAC;IAC3E,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,2BAA2B;YAC7B,CAAC,CAAC,8BAA8B,CAAC;IACrC,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;KAyBT,CAAC;IACJ,CAAC;CACF,CAAA;AA1C8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAuB;AAHxC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA2CvB;SA3CY,WAAW","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('text-overlay')\nexport class TextOverlay extends LitElement {\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Boolean }) loginRequired = false;\n\n  render() {\n    return html` <div class=\"overlay no-preview\">${this.textDisplay}</div> `;\n  }\n\n  private get textDisplay() {\n    return this.loginRequired && !this.loggedIn\n      ? 'Log in\\nto view this item'\n      : 'Content may be inappropriate';\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        align-items: center;\n        display: flex;\n      }\n\n      .overlay {\n        border: 1px solid #2c2c2c;\n        border-radius: 1px;\n        position: absolute;\n        right: 0;\n        left: 0;\n        width: auto;\n        height: auto;\n        padding: 5px;\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        white-space: pre-wrap; // for the newline character\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"text-overlay.js","sourceRoot":"","sources":["../../../../src/tiles/overlay/text-overlay.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;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAA3C;;QAC+B,aAAQ,GAAG,KAAK,CAAC;QAEjB,kBAAa,GAAG,KAAK,CAAC;QAEtB,iBAAY,GAAG,KAAK,CAAC;IA+DpD,CAAC;IA7DC,MAAM;QACJ,OAAO,IAAI,CAAA;;oCAEqB,IAAI,CAAC,WAAW;kCAClB,IAAI,CAAC,WAAW;;KAE7C,CAAC;IACJ,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,IAAI,CAAA,GAAG,iBAAiB,EAAE;YAC5B,CAAC,CAAC,IAAI,CAAA,GAAG,cAAc,EAAE,CAAC;IAC9B,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,IAAI,CAAA,0BAA0B;YAChC,CAAC,CAAC,IAAI,CAAA,8BAA8B,CAAC;IACzC,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqCT,CAAC;IACJ,CAAC;CACF,CAAA;AAnE8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAuB;AAEtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAsB;AALvC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAoEvB;SApEY,WAAW","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { loginRequiredIcon } from '../../assets/img/icons/login-required';\nimport { restrictedIcon } from '../../assets/img/icons/restricted';\n\n@customElement('text-overlay')\nexport class TextOverlay extends LitElement {\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Boolean }) loginRequired = false;\n\n  @property({ type: Boolean }) iconRequired = false;\n\n  render() {\n    return html`\n      <div class=\"overlay no-preview\">\n        <div class=\"icon-overlay\">${this.iconDisplay}</div>\n        <p class=\"text-overlay\">${this.textDisplay}</p>\n      </div>\n    `;\n  }\n\n  private get iconDisplay() {\n    return this.loginRequired && !this.loggedIn\n      ? html`${loginRequiredIcon}`\n      : html`${restrictedIcon}`;\n  }\n\n  private get textDisplay() {\n    return this.loginRequired && !this.loggedIn\n      ? html`Log in to view this item`\n      : html`Content may be inappropriate`;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        align-items: center;\n        display: flex;\n      }\n\n      .overlay {\n        border: 1px solid #2c2c2c;\n        border-radius: 1px;\n        position: absolute;\n        right: 0;\n        left: 0;\n        top: 50%;\n        transform: translate(0px, -50%);\n        width: auto;\n        height: auto;\n        padding: 5px;\n        background-color: #fffecb;\n        display: flex;\n        align-items: center;\n        border-radius: 1px;\n      }\n\n      .icon-overlay {\n        width: 40px;\n        height: 40px;\n        display: inherit;\n      }\n      .text-overlay {\n        margin: 0;\n        vertical-align: bottom;\n        padding-left: 5px;\n        text-align: center;\n        color: #2c2c2c;\n        font-size: 1.4rem;\n        line-height: 2rem;\n      }\n    `;\n  }\n}\n"]}

package/dist/test/item-image.test.js

@@ -69,5 +69,51 @@ describe('ItemImage component', () => {
             expect(imgClassName).to.eql(' waveform ');
         }, 1000);
     });
+    it('should not fetch image with undefined base url', async () => {
+        var _a;
+        const el = await fixture(html `
+      <item-image
+        .isListTile=${false}
+        .isCompactTile=${false}
+        .model=${testBookModel}
+      >
+      </item-image>
+    `);
+        // Doesn't set the image src if base url is undefined
+        const img = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('img');
+        expect(img).to.exist;
+        expect(img === null || img === void 0 ? void 0 : img.getAttribute('src')).not.to.exist;
+    });
+    it('should not fetch image with undefined model', async () => {
+        var _a;
+        const el = await fixture(html `
+      <item-image
+        .isListTile=${false}
+        .isCompactTile=${false}
+        .baseImageUrl=${baseImageUrl}
+      >
+      </item-image>
+    `);
+        // Doesn't set the image src if model is not present
+        const img = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('img');
+        expect(img).to.exist;
+        expect(img === null || img === void 0 ? void 0 : img.getAttribute('src')).not.to.exist;
+    });
+    it('should not fetch image with undefined identifier', async () => {
+        var _a;
+        const el = await fixture(html `
+      <item-image
+        .isListTile=${false}
+        .isCompactTile=${false}
+        .model=${{}}
+        .baseImageUrl=${baseImageUrl}
+      >
+      </item-image>
+    `);
+        // Doesn't set the image src if identifier is not present
+        const img = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('img');
+        expect(img).to.exist;
+        expect(img === null || img === void 0 ? void 0 : img.getAttribute('src')).not.to.exist;
+    });
 });
 //# sourceMappingURL=item-image.test.js.map

package/dist/test/item-image.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"item-image.test.js","sourceRoot":"","sources":["../../test/item-image.test.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAK3B,OAAO,yBAAyB,CAAC;AAEjC,MAAM,YAAY,GAAG,qBAAqB,CAAC;AAC3C,MAAM,aAAa,GAAc;IAC/B,WAAW,EAAE,EAAE;IACf,YAAY,EAAE,CAAC;IACf,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,CAAC;IACX,UAAU,EAAE,uCAAuC;IACnD,SAAS,EAAE,CAAC;IACZ,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE,EAAE;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,CAAC;IACZ,aAAa,EAAE,KAAK;IACpB,cAAc,EAAE,KAAK;CACtB,CAAC;AAEF,MAAM,cAAc,GAAc;IAChC,WAAW,EAAE,EAAE;IACf,YAAY,EAAE,CAAC;IACf,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,CAAC;IACX,UAAU,EAAE,eAAe;IAC3B,SAAS,EAAE,CAAC;IACZ,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE,EAAE;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,CAAC;IACZ,aAAa,EAAE,KAAK;IACpB,cAAc,EAAE,KAAK;CACtB,CAAC;AAEF,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;;QAC/C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA;;sBAEtB,KAAK;yBACF,KAAK;iBACb,aAAa;wBACN,YAAY;;;KAG/B,CAAC,CAAC;QAEH,MAAM,UAAU,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,cAAc,CAAC,CAAC;QAChE,MAAM,YAAY,GAAG,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,CAAC,KAAK,CAAC,0CAAE,SAAS,CAAC;QAEjE,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC5B,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;;QAChE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA;;sBAEtB,KAAK;yBACF,KAAK;iBACb,cAAc;wBACP,YAAY;;;KAG/B,CAAC,CAAC;QAEH,MAAM,UAAU,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,cAAc,CAAC,CAAC;QAChE,MAAM,KAAK,GAAG,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,CAAC,KAAK,CAAC,CAAC;QAC/C,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC5B,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAEvB,mEAAmE;QACnE,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,YAAY,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,CAAC;YACtC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;QAC5C,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\n\nimport type { TileModel } from '../src/models';\nimport type { ItemImage } from '../src/tiles/item-image';\n\nimport '../src/tiles/item-image';\n\nconst baseImageUrl = 'https://archive.org';\nconst testBookModel: TileModel = {\n  collections: [],\n  commentCount: 0,\n  creators: [],\n  favCount: 0,\n  identifier: '18730130BloomfieldRecordCompleteIssue',\n  itemCount: 0,\n  mediatype: 'texts',\n  subjects: [],\n  title: 'Sample Waveform',\n  viewCount: 0,\n  loginRequired: false,\n  contentWarning: false,\n};\n\nconst testAudioModel: TileModel = {\n  collections: [],\n  commentCount: 0,\n  creators: [],\n  favCount: 0,\n  identifier: 'dwd2015-01-24',\n  itemCount: 0,\n  mediatype: 'audio',\n  subjects: [],\n  title: 'Sample Waveform',\n  viewCount: 0,\n  loginRequired: false,\n  contentWarning: false,\n};\n\ndescribe('ItemImage component', () => {\n  it('should render initial component', async () => {\n    const el = await fixture<ItemImage>(html`\n      <item-image\n        .isListTile=${false}\n        .isCompactTile=${false}\n        .model=${testBookModel}\n        .baseImageUrl=${baseImageUrl}\n      >\n      </item-image>\n    `);\n\n    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');\n    const imgClassName = dropShadow?.querySelector('img')?.className;\n\n    expect(dropShadow).to.exist;\n    expect(imgClassName).to.eql(' contain ');\n  });\n\n  it('should render component if mediatype is waveform', async () => {\n    const el = await fixture<ItemImage>(html`\n      <item-image\n        .isListTile=${false}\n        .isCompactTile=${false}\n        .model=${testAudioModel}\n        .baseImageUrl=${baseImageUrl}\n      >\n      </item-image>\n    `);\n\n    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');\n    const image = dropShadow?.querySelector('img');\n    expect(dropShadow).to.exist;\n    expect(image).to.exist;\n\n    // simulate image onLoad event check if image className is waveform\n    setTimeout(() => {\n      const imgClassName = image?.className;\n      expect(imgClassName).to.eql(' waveform ');\n    }, 1000);\n  });\n});\n"]}
+{"version":3,"file":"item-image.test.js","sourceRoot":"","sources":["../../test/item-image.test.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\n\nimport type { TileModel } from '../src/models';\nimport type { ItemImage } from '../src/tiles/item-image';\n\nimport '../src/tiles/item-image';\n\nconst baseImageUrl = 'https://archive.org';\nconst testBookModel: TileModel = {\n  collections: [],\n  commentCount: 0,\n  creators: [],\n  favCount: 0,\n  identifier: '18730130BloomfieldRecordCompleteIssue',\n  itemCount: 0,\n  mediatype: 'texts',\n  subjects: [],\n  title: 'Sample Waveform',\n  viewCount: 0,\n  loginRequired: false,\n  contentWarning: false,\n};\n\nconst testAudioModel: TileModel = {\n  collections: [],\n  commentCount: 0,\n  creators: [],\n  favCount: 0,\n  identifier: 'dwd2015-01-24',\n  itemCount: 0,\n  mediatype: 'audio',\n  subjects: [],\n  title: 'Sample Waveform',\n  viewCount: 0,\n  loginRequired: false,\n  contentWarning: false,\n};\n\ndescribe('ItemImage component', () => {\n  it('should render initial component', async () => {\n    const el = await fixture<ItemImage>(html`\n      <item-image\n        .isListTile=${false}\n        .isCompactTile=${false}\n        .model=${testBookModel}\n        .baseImageUrl=${baseImageUrl}\n      >\n      </item-image>\n    `);\n\n    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');\n    const imgClassName = dropShadow?.querySelector('img')?.className;\n\n    expect(dropShadow).to.exist;\n    expect(imgClassName).to.eql(' contain ');\n  });\n\n  it('should render component if mediatype is waveform', async () => {\n    const el = await fixture<ItemImage>(html`\n      <item-image\n        .isListTile=${false}\n        .isCompactTile=${false}\n        .model=${testAudioModel}\n        .baseImageUrl=${baseImageUrl}\n      >\n      </item-image>\n    `);\n\n    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');\n    const image = dropShadow?.querySelector('img');\n    expect(dropShadow).to.exist;\n    expect(image).to.exist;\n\n    // simulate image onLoad event check if image className is waveform\n    setTimeout(() => {\n      const imgClassName = image?.className;\n      expect(imgClassName).to.eql(' waveform ');\n    }, 1000);\n  });\n\n  it('should not fetch image with undefined base url', async () => {\n    const el = await fixture<ItemImage>(html`\n      <item-image\n        .isListTile=${false}\n        .isCompactTile=${false}\n        .model=${testBookModel}\n      >\n      </item-image>\n    `);\n\n    // Doesn't set the image src if base url is undefined\n    const img = el.shadowRoot?.querySelector('img');\n    expect(img).to.exist;\n    expect(img?.getAttribute('src')).not.to.exist;\n  });\n\n  it('should not fetch image with undefined model', async () => {\n    const el = await fixture<ItemImage>(html`\n      <item-image\n        .isListTile=${false}\n        .isCompactTile=${false}\n        .baseImageUrl=${baseImageUrl}\n      >\n      </item-image>\n    `);\n\n    // Doesn't set the image src if model is not present\n    const img = el.shadowRoot?.querySelector('img');\n    expect(img).to.exist;\n    expect(img?.getAttribute('src')).not.to.exist;\n  });\n\n  it('should not fetch image with undefined identifier', async () => {\n    const el = await fixture<ItemImage>(html`\n      <item-image\n        .isListTile=${false}\n        .isCompactTile=${false}\n        .model=${{}}\n        .baseImageUrl=${baseImageUrl}\n      >\n      </item-image>\n    `);\n\n    // Doesn't set the image src if identifier is not present\n    const img = el.shadowRoot?.querySelector('img');\n    expect(img).to.exist;\n    expect(img?.getAttribute('src')).not.to.exist;\n  });\n});\n"]}

package/dist/test/text-overlay.test.js

@@ -12,37 +12,44 @@ describe('Text Overlay component', () => {
         expect(noPreview).to.exist;
     });
     it('should render component if loggedIn required', async () => {
-        var _a, _b;
+        var _a, _b, _c, _d;
         const el = await fixture(html `
       <text-overlay .loggedIn=${false} .loginRequired=${true}> </text-overlay>
     `);
         const overlay = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.overlay');
         const noPreview = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.no-preview');
+        const iconOverlay = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.icon-overlay');
+        const textOverlay = (_d = el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.text-overlay');
         expect(overlay).to.exist;
         expect(noPreview).to.exist;
-        expect(noPreview === null || noPreview === void 0 ? void 0 : noPreview.textContent).to.equal('Log in\nto view this item');
+        expect(iconOverlay).to.exist;
+        expect(textOverlay === null || textOverlay === void 0 ? void 0 : textOverlay.textContent).to.equal('Log in to view this item');
     });
     it('should render component if content warning', async () => {
-        var _a, _b;
+        var _a, _b, _c, _d;
         const el = await fixture(html `
       <text-overlay .loggedIn=${false} .loginRequired=${false}> </text-overlay>
     `);
         const overlay = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.overlay');
         const noPreview = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.no-preview');
+        const iconOverlay = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.icon-overlay');
+        const textOverlay = (_d = el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.text-overlay');
         expect(overlay).to.exist;
         expect(noPreview).to.exist;
-        expect(noPreview === null || noPreview === void 0 ? void 0 : noPreview.textContent).to.equal('Content may be inappropriate');
+        expect(iconOverlay).to.exist;
+        expect(textOverlay === null || textOverlay === void 0 ? void 0 : textOverlay.textContent).to.equal('Content may be inappropriate');
     });
     it('should render component if content warning', async () => {
-        var _a, _b;
+        var _a, _b, _c;
         const el = await fixture(html `
       <text-overlay .loggedIn=${true} .loginRequired=${true}> </text-overlay>
     `);
         const overlay = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.overlay');
         const noPreview = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.no-preview');
+        const textOverlay = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.text-overlay');
         expect(overlay).to.exist;
         expect(noPreview).to.exist;
-        expect(noPreview === null || noPreview === void 0 ? void 0 : noPreview.textContent).to.equal('Content may be inappropriate');
+        expect(textOverlay === null || textOverlay === void 0 ? void 0 : textOverlay.textContent).to.equal('Content may be inappropriate');
     });
 });
 //# sourceMappingURL=text-overlay.test.js.map

package/dist/test/text-overlay.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-overlay.test.js","sourceRoot":"","sources":["../../test/text-overlay.test.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport type { TextOverlay } from '../src/tiles/overlay/text-overlay';\n\nimport '../src/tiles/overlay/text-overlay';\n\ndescribe('Text Overlay component', () => {\n  it('should render initial component', async () => {\n    const el = await fixture<TextOverlay>(html`<text-overlay></text-overlay>`);\n\n    const overlay = el.shadowRoot?.querySelector('.overlay');\n    const noPreview = el.shadowRoot?.querySelector('.no-preview');\n\n    expect(overlay).to.exist;\n    expect(noPreview).to.exist;\n  });\n\n  it('should render component if loggedIn required', async () => {\n    const el = await fixture<TextOverlay>(html`\n      <text-overlay .loggedIn=${false} .loginRequired=${true}> </text-overlay>\n    `);\n\n    const overlay = el.shadowRoot?.querySelector('.overlay');\n    const noPreview = el.shadowRoot?.querySelector('.no-preview');\n\n    expect(overlay).to.exist;\n    expect(noPreview).to.exist;\n    expect(noPreview?.textContent).to.equal('Log in\\nto view this item');\n  });\n\n  it('should render component if content warning', async () => {\n    const el = await fixture<TextOverlay>(html`\n      <text-overlay .loggedIn=${false} .loginRequired=${false}> </text-overlay>\n    `);\n\n    const overlay = el.shadowRoot?.querySelector('.overlay');\n    const noPreview = el.shadowRoot?.querySelector('.no-preview');\n\n    expect(overlay).to.exist;\n    expect(noPreview).to.exist;\n    expect(noPreview?.textContent).to.equal('Content may be inappropriate');\n  });\n\n  it('should render component if content warning', async () => {\n    const el = await fixture<TextOverlay>(html`\n      <text-overlay .loggedIn=${true} .loginRequired=${true}> </text-overlay>\n    `);\n\n    const overlay = el.shadowRoot?.querySelector('.overlay');\n    const noPreview = el.shadowRoot?.querySelector('.no-preview');\n\n    expect(overlay).to.exist;\n    expect(noPreview).to.exist;\n    expect(noPreview?.textContent).to.equal('Content may be inappropriate');\n  });\n});\n"]}
+{"version":3,"file":"text-overlay.test.js","sourceRoot":"","sources":["../../test/text-overlay.test.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport type { TextOverlay } from '../src/tiles/overlay/text-overlay';\n\nimport '../src/tiles/overlay/text-overlay';\n\ndescribe('Text Overlay component', () => {\n  it('should render initial component', async () => {\n    const el = await fixture<TextOverlay>(html`<text-overlay></text-overlay>`);\n\n    const overlay = el.shadowRoot?.querySelector('.overlay');\n    const noPreview = el.shadowRoot?.querySelector('.no-preview');\n\n    expect(overlay).to.exist;\n    expect(noPreview).to.exist;\n  });\n\n  it('should render component if loggedIn required', async () => {\n    const el = await fixture<TextOverlay>(html`\n      <text-overlay .loggedIn=${false} .loginRequired=${true}> </text-overlay>\n    `);\n\n    const overlay = el.shadowRoot?.querySelector('.overlay');\n    const noPreview = el.shadowRoot?.querySelector('.no-preview');\n    const iconOverlay = el.shadowRoot?.querySelector('.icon-overlay');\n    const textOverlay = el.shadowRoot?.querySelector('.text-overlay');\n\n    expect(overlay).to.exist;\n    expect(noPreview).to.exist;\n    expect(iconOverlay).to.exist;\n    expect(textOverlay?.textContent).to.equal('Log in to view this item');\n  });\n\n  it('should render component if content warning', async () => {\n    const el = await fixture<TextOverlay>(html`\n      <text-overlay .loggedIn=${false} .loginRequired=${false}> </text-overlay>\n    `);\n\n    const overlay = el.shadowRoot?.querySelector('.overlay');\n    const noPreview = el.shadowRoot?.querySelector('.no-preview');\n    const iconOverlay = el.shadowRoot?.querySelector('.icon-overlay');\n    const textOverlay = el.shadowRoot?.querySelector('.text-overlay');\n\n    expect(overlay).to.exist;\n    expect(noPreview).to.exist;\n    expect(iconOverlay).to.exist;\n    expect(textOverlay?.textContent).to.equal('Content may be inappropriate');\n  });\n\n  it('should render component if content warning', async () => {\n    const el = await fixture<TextOverlay>(html`\n      <text-overlay .loggedIn=${true} .loginRequired=${true}> </text-overlay>\n    `);\n\n    const overlay = el.shadowRoot?.querySelector('.overlay');\n    const noPreview = el.shadowRoot?.querySelector('.no-preview');\n    const textOverlay = el.shadowRoot?.querySelector('.text-overlay');\n\n    expect(overlay).to.exist;\n    expect(noPreview).to.exist;\n    expect(textOverlay?.textContent).to.equal('Content may be inappropriate');\n  });\n});\n"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "0.3.9",
+  "version": "0.4.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {

package/src/assets/img/icons/login-required.ts

@@ -5,24 +5,12 @@ export const loginRequiredIcon = svg`
     viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g fill="none" fill-rule="nonzero">
+    <g fill="#000" fill-rule="evenodd">
       <path
-        d="m11 48h11c-.0377367 5.0230706-.0377367 17.6897373 0 38h28v-38h12c-14.7643578-21.746483-22.9310245-33.4131497-24.5-35z"
-        fill="#fff"
-        transform="matrix(0 1 -1 0 86 13)"
+        d="m86 0c5.5228475 0 10 4.4771525 10 10v80c0 5.5228475-4.4771525 10-10 10h-57c-5.5228475 0-10-4.4771525-10-10v-13h7.999l.001 8c0 2.6887547 2.1223067 4.8818181 4.7831104 4.9953805l.2168896.0046195h50.06c2.6887547 0 4.8818181-2.1223067 4.9953805-4.7831104l.0046195-.2168896v-70c0-2.7614237-2.2385763-5-5-5h-50.06c-2.6887547 0-4.8818181 2.1223067-4.9953805 4.7831104l-.0046195.2168896-.001 7h-7.999v-12c0-5.5228475 4.4771525-10 10-10z"
       />
       <path
-        d="m17 44h9c-.0377367 5.0230706-.0377367 17.0230706 0 36h18v-36h10c-10.0976911-15.0798163-15.9310245-23.4131497-17.5-25z"
-        fill="#000"
-        transform="matrix(0 1 -1 0 85 14)"
-      />
-      <path
-        d="m84.3595506 0h-55.7191012c-8.6379817 0-15.6404494 6.39593215-15.6404494 14.2857143v15.7142857h20v-11h47v62l-47-1v-11h-20v16.7142857c0 7.8897822 7.0024677 14.2857143 15.6404494 14.2857143h55.7191012c8.6379817 0 15.6404494-6.3959321 15.6404494-14.2857143v-71.4285714c0-7.88978215-7.0024677-14.2857143-15.6404494-14.2857143z"
-        fill="#fff"
-      />
-      <path
-        d="m84.2597403 5c5.3793969 0 9.7402597 4.02943725 9.7402597 9v72c0 4.9705627-4.3608628 9-9.7402597 9h-55.5194806c-5.3793969 0-9.7402597-4.0294373-9.7402597-9v-12h8v7.5c0 2.4198792 1.8593897 4.3936363 4.4510815 4.4958424l48.9709964.0041576c2.6189169 0 4.4673094-2.6052767 4.5779221-5v-62c0-2.4852814-2.3103015-5-5-5h-48.3376623c-2.618917 0-4.551725 1.6052767-4.6623377 4v7h-8v-11c0-4.97056275 4.3608628-9 9.7402597-9z"
-        fill="#000"
+        d="m4 52h14c-.0377367 5.0230706-.0377367 15.3564039 0 31h35v-31h16c-20.0693886-21.0798163-30.8885707-32.4131497-32.4575462-34z" fill-rule="nonzero" transform="matrix(0 1 -1 0 87 14)"
       />
     </g>
     <title>Log in to view this item</title>

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

@@ -5,25 +5,9 @@ export const restrictedIcon = svg`
     viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g
-      fill="none"
-      fill-rule="evenodd"
-    >
     <path
-      d="m56.4612493 8.80450354 41.8901185 75.94632926c1.7706782 2.8433173 2.1150372 5.2623412 1.0330766 7.2570716-1.0819604 1.9947304-3.26978 2.9920956-6.5634587 2.9920956h-85.69973905c-3.29367873 0-5.46954894-.9973652-6.52761065-2.9920956-1.0580617-1.9947304-.70175345-4.4137543 1.06892476-7.2570716l41.89011844-75.12308969c1.8184757-2.84331737 3.9693609-4.37738627 6.4526556-4.60220671s4.6341799 1.03483527 6.4526556 3.77896714z"
-      fill="#000"
-      fill-rule="nonzero"
+      d="m56.4612493 8.80450354 41.8901185 75.94632926c1.7706782 2.8433173 2.1150372 5.2623412 1.0330766 7.2570716-1.0819604 1.9947304-3.26978 2.9920956-6.5634587 2.9920956h-85.69973905c-3.29367873 0-5.46954894-.9973652-6.52761065-2.9920956-1.0580617-1.9947304-.70175345-4.4137543 1.06892476-7.2570716l41.89011844-75.12308969c1.8184757-2.84331737 3.9693609-4.37738627 6.4526556-4.60220671s4.6341799 1.03483527 6.4526556 3.77896714zm28.5387507 75.19549646-35.037482-62-34.962518 62zm-31-34.7484359v-10.2515641h-8v10.2515641l2.089172 14.7484359h3.8184713zm-8 19.7484359v8h8v-8z"
     />
-    <path
-      d="m94.0140845 90-44.5547054-79-44.4593791 79z"
-      fill="#f8e71c"
-      fill-rule="nonzero"
-    />
-    <path
-      d="m54 69v8h-8v-8zm0-30v10.2515641l-2.0923567 14.7484359h-3.8184713l-2.089172-14.7484359v-10.2515641z"
-      fill="#000"
-    />
-    </g>
     <title>Content may be inappropriate</title>
   </svg>
 `;

package/src/styles/item-image-styles.ts

@@ -11,18 +11,14 @@ export const baseItemImageStyles = css`
   }
 
   .list-box {
-    width: 100%;
-    height: 100%;
     overflow: hidden;
     box-sizing: border-box;
-    display: flex;
+    display: inline-block;
     position: relative;
-    max-width: 100px;
   }
 
   .contain {
     object-fit: contain;
-    object-position: top;
     height: 100%;
     width: 100%;
   }
@@ -32,7 +28,8 @@ export const baseItemImageStyles = css`
   }
 
   .blur {
-    filter: blur(5px);
+    filter: blur(15px);
+    box-shadow: 1px 1px 2px 0px;
   }
 `;
 

package/src/tiles/grid/item-tile.ts

@@ -169,6 +169,8 @@ export class ItemTile extends LitElement {
       image-block {
         display: block;
         margin-bottom: 5px;
+        position: relative;
+        text-align: center;
       }
 
       image-block.has-snippets {

package/src/tiles/image-block.ts

@@ -58,6 +58,7 @@ export class ImageBlock extends LitElement {
       <icon-overlay
         .loggedIn=${this.loggedIn}
         .loginRequired=${this.model?.loginRequired}
+        .isCompactTile=${this.isCompactTile}
       >
       </icon-overlay>
     `;
@@ -73,6 +74,7 @@ export class ImageBlock extends LitElement {
       <text-overlay
         .loggedIn=${this.loggedIn}
         .loginRequired=${this.model?.loginRequired}
+        ?iconRequired=${true}
       >
       </text-overlay>
     `;
@@ -89,12 +91,17 @@ export class ImageBlock extends LitElement {
       .grid {
         height: var(--imgBlockHeight, 16rem);
         flex: 1;
+        display: inline-block;
+        position: initial;
       }
 
       /** tile-list view */
       .list.desktop {
         width: 100px;
         height: 100px;
+        display: inline-block;
+        position: relative;
+        text-align: center;
       }
 
       .list.mobile {
@@ -105,6 +112,7 @@ export class ImageBlock extends LitElement {
       /** tile-list-compact view */
       .list-compact {
         display: block;
+        text-align: center;
       }
 
       .list-compact.desktop {

package/src/tiles/item-image.ts

@@ -1,4 +1,4 @@
-import { css, CSSResultGroup, html, LitElement } from 'lit';
+import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { ClassInfo, classMap } from 'lit/directives/class-map.js';
 
@@ -42,7 +42,10 @@ export class ItemImage extends LitElement {
    * Helpers
    */
   private get imageSrc() {
-    return `${this.baseImageUrl}/services/img/${this.model?.identifier}`;
+    // Don't try to load invalid image URLs
+    return this.baseImageUrl && this.model?.identifier
+      ? `${this.baseImageUrl}/services/img/${this.model.identifier}`
+      : nothing;
   }
 
   private get hashBasedGradient() {

package/src/tiles/overlay/icon-overlay.ts

@@ -10,7 +10,19 @@ export class IconOverlay extends LitElement {
 
   @property({ type: Boolean }) loginRequired = false;
 
+  @property({ type: Boolean }) isCompactTile = false;
+
   render() {
+    return html`<div class="icon-overlay ${this.getClass}">
+      ${this.iconDisplay}
+    </div>`;
+  }
+
+  private get getClass() {
+    return this.isCompactTile ? 'list-compact' : 'list-detail';
+  }
+
+  private get iconDisplay() {
     return this.loginRequired && !this.loggedIn
       ? html`${loginRequiredIcon}`
       : html`${restrictedIcon}`;
@@ -23,10 +35,28 @@ export class IconOverlay extends LitElement {
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        -ms-transform: translate(-50%, -50%);
-        width: 50%;
-        height: 50%;
+        width: 100%;
         z-index: 2;
+        background-color: rgb(255, 254, 203);
+        display: flex;
+        justify-content: center;
+        border: 1px solid #2c2c2c;
+      }
+
+      .icon-overlay {
+        height: 20px;
+        width: 20px;
+        padding: 2px;
+        padding: 2px;
+      }
+
+      .list-detail {
+        height: 20px;
+        width: 20px;
+      }
+      .list-compact {
+        height: 15px;
+        width: 15px;
       }
     `;
   }

package/src/tiles/overlay/icon-text-overlay.ts

@@ -0,0 +1,75 @@
+import { css, CSSResultGroup, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { loginRequiredIcon } from '../../assets/img/icons/login-required';
+import { restrictedIcon } from '../../assets/img/icons/restricted';
+
+@customElement('icon-text-overlay')
+export class IconTextOverlay extends LitElement {
+  @property({ type: Boolean }) loggedIn = false;
+
+  @property({ type: Boolean }) loginRequired = false;
+
+  render() {
+    return html`
+      <div class="overlay no-preview">
+        <div class="icon-overlay">${this.iconDisplay}</div>
+        <p class="text-overlay">${this.textDisplay}</p>
+      </div>
+    `;
+  }
+
+  private get iconDisplay() {
+    return this.loginRequired && !this.loggedIn
+      ? html`${loginRequiredIcon}`
+      : html`${restrictedIcon}`;
+  }
+
+  private get textDisplay() {
+    return this.loginRequired && !this.loggedIn
+      ? 'Log in\nto view this item'
+      : 'Content may be inappropriate';
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        align-items: center;
+        display: flex;
+      }
+
+      .overlay {
+        border: 1px solid #2c2c2c;
+        border-radius: 1px;
+        position: absolute;
+        right: 0;
+        left: 0;
+        width: auto;
+        height: auto;
+        padding: 5px;
+        display: flex;
+        align-items: center;
+        border-radius: 1px;
+        text-align: center;
+      }
+
+      .icon-overlay {
+        width: 40px;
+        height: 40px;
+        display: inherit;
+      }
+      .text-overlay {
+        margin: 0;
+        vertical-align: bottom;
+        padding-left: 5px;
+      }
+
+      .no-preview {
+        background-color: #fffecb;
+        border: 1px solid #2c2c2c;
+        color: #2c2c2c;
+        font-size: 1.4rem;
+        line-height: 2rem;
+      }
+    `;
+  }
+}

package/src/tiles/overlay/text-overlay.ts

@@ -1,5 +1,7 @@
 import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { loginRequiredIcon } from '../../assets/img/icons/login-required';
+import { restrictedIcon } from '../../assets/img/icons/restricted';
 
 @customElement('text-overlay')
 export class TextOverlay extends LitElement {
@@ -7,14 +9,27 @@ export class TextOverlay extends LitElement {
 
   @property({ type: Boolean }) loginRequired = false;
 
+  @property({ type: Boolean }) iconRequired = false;
+
   render() {
-    return html` <div class="overlay no-preview">${this.textDisplay}</div> `;
+    return html`
+      <div class="overlay no-preview">
+        <div class="icon-overlay">${this.iconDisplay}</div>
+        <p class="text-overlay">${this.textDisplay}</p>
+      </div>
+    `;
+  }
+
+  private get iconDisplay() {
+    return this.loginRequired && !this.loggedIn
+      ? html`${loginRequiredIcon}`
+      : html`${restrictedIcon}`;
   }
 
   private get textDisplay() {
     return this.loginRequired && !this.loggedIn
-      ? 'Log in\nto view this item'
-      : 'Content may be inappropriate';
+      ? html`Log in to view this item`
+      : html`Content may be inappropriate`;
   }
 
   static get styles(): CSSResultGroup {
@@ -30,18 +45,30 @@ export class TextOverlay extends LitElement {
         position: absolute;
         right: 0;
         left: 0;
+        top: 50%;
+        transform: translate(0px, -50%);
         width: auto;
         height: auto;
         padding: 5px;
+        background-color: #fffecb;
+        display: flex;
+        align-items: center;
+        border-radius: 1px;
       }
 
-      .no-preview {
-        background-color: #fffecb;
+      .icon-overlay {
+        width: 40px;
+        height: 40px;
+        display: inherit;
+      }
+      .text-overlay {
+        margin: 0;
+        vertical-align: bottom;
+        padding-left: 5px;
+        text-align: center;
         color: #2c2c2c;
         font-size: 1.4rem;
         line-height: 2rem;
-        text-align: center;
-        white-space: pre-wrap; // for the newline character
       }
     `;
   }

package/test/item-image.test.ts

@@ -79,4 +79,53 @@ describe('ItemImage component', () => {
       expect(imgClassName).to.eql(' waveform ');
     }, 1000);
   });
+
+  it('should not fetch image with undefined base url', async () => {
+    const el = await fixture<ItemImage>(html`
+      <item-image
+        .isListTile=${false}
+        .isCompactTile=${false}
+        .model=${testBookModel}
+      >
+      </item-image>
+    `);
+
+    // Doesn't set the image src if base url is undefined
+    const img = el.shadowRoot?.querySelector('img');
+    expect(img).to.exist;
+    expect(img?.getAttribute('src')).not.to.exist;
+  });
+
+  it('should not fetch image with undefined model', async () => {
+    const el = await fixture<ItemImage>(html`
+      <item-image
+        .isListTile=${false}
+        .isCompactTile=${false}
+        .baseImageUrl=${baseImageUrl}
+      >
+      </item-image>
+    `);
+
+    // Doesn't set the image src if model is not present
+    const img = el.shadowRoot?.querySelector('img');
+    expect(img).to.exist;
+    expect(img?.getAttribute('src')).not.to.exist;
+  });
+
+  it('should not fetch image with undefined identifier', async () => {
+    const el = await fixture<ItemImage>(html`
+      <item-image
+        .isListTile=${false}
+        .isCompactTile=${false}
+        .model=${{}}
+        .baseImageUrl=${baseImageUrl}
+      >
+      </item-image>
+    `);
+
+    // Doesn't set the image src if identifier is not present
+    const img = el.shadowRoot?.querySelector('img');
+    expect(img).to.exist;
+    expect(img?.getAttribute('src')).not.to.exist;
+  });
 });

package/test/text-overlay.test.ts

@@ -23,10 +23,13 @@ describe('Text Overlay component', () => {
 
     const overlay = el.shadowRoot?.querySelector('.overlay');
     const noPreview = el.shadowRoot?.querySelector('.no-preview');
+    const iconOverlay = el.shadowRoot?.querySelector('.icon-overlay');
+    const textOverlay = el.shadowRoot?.querySelector('.text-overlay');
 
     expect(overlay).to.exist;
     expect(noPreview).to.exist;
-    expect(noPreview?.textContent).to.equal('Log in\nto view this item');
+    expect(iconOverlay).to.exist;
+    expect(textOverlay?.textContent).to.equal('Log in to view this item');
   });
 
   it('should render component if content warning', async () => {
@@ -36,10 +39,13 @@ describe('Text Overlay component', () => {
 
     const overlay = el.shadowRoot?.querySelector('.overlay');
     const noPreview = el.shadowRoot?.querySelector('.no-preview');
+    const iconOverlay = el.shadowRoot?.querySelector('.icon-overlay');
+    const textOverlay = el.shadowRoot?.querySelector('.text-overlay');
 
     expect(overlay).to.exist;
     expect(noPreview).to.exist;
-    expect(noPreview?.textContent).to.equal('Content may be inappropriate');
+    expect(iconOverlay).to.exist;
+    expect(textOverlay?.textContent).to.equal('Content may be inappropriate');
   });
 
   it('should render component if content warning', async () => {
@@ -49,9 +55,10 @@ describe('Text Overlay component', () => {
 
     const overlay = el.shadowRoot?.querySelector('.overlay');
     const noPreview = el.shadowRoot?.querySelector('.no-preview');
+    const textOverlay = el.shadowRoot?.querySelector('.text-overlay');
 
     expect(overlay).to.exist;
     expect(noPreview).to.exist;
-    expect(noPreview?.textContent).to.equal('Content may be inappropriate');
+    expect(textOverlay?.textContent).to.equal('Content may be inappropriate');
   });
 });