@internetarchive/collection-browser 0.1.5 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -85,7 +85,17 @@ let ItemImage = class ItemImage extends LitElement {
|
|
|
85
85
|
return `item-image${this.isWaveform ? ' waveform' : ''}`;
|
|
86
86
|
}
|
|
87
87
|
get randomGradient() {
|
|
88
|
-
|
|
88
|
+
var _a;
|
|
89
|
+
let gradientInt = 1;
|
|
90
|
+
if ((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier) {
|
|
91
|
+
gradientInt = this.generateHashCode(this.model.identifier) % 6;
|
|
92
|
+
}
|
|
93
|
+
return `grad${gradientInt}`;
|
|
94
|
+
}
|
|
95
|
+
generateHashCode(str) {
|
|
96
|
+
return str
|
|
97
|
+
.split('')
|
|
98
|
+
.reduce((acc, char) => acc + char.charCodeAt(0), 0);
|
|
89
99
|
}
|
|
90
100
|
static get styles() {
|
|
91
101
|
return css `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item-image.js","sourceRoot":"","sources":["../../../src/tiles/item-image.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,OAAO,EAEP,UAAU,GACX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAKzD,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAAzC;;QAK+B,eAAU,GAAG,KAAK,CAAC;QAE/B,kBAAa,GAAY,KAAK,CAAC;QAE/B,eAAU,GAAY,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"item-image.js","sourceRoot":"","sources":["../../../src/tiles/item-image.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,OAAO,EAEP,UAAU,GACX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAKzD,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAAzC;;QAK+B,eAAU,GAAG,KAAK,CAAC;QAE/B,kBAAa,GAAY,KAAK,CAAC;QAE/B,eAAU,GAAY,KAAK,CAAC;IAsN/C,CAAC;IAlNW,OAAO,CAAC,OAAuB;QACvC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;IACH,CAAC;IAEO,aAAa;;QACnB,IAAI,CAAC,aAAa;YAChB,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,mCAAI,KAAK,CAAC;IAC7D,CAAC;IAED,MAAM;;QACJ,OAAO,IAAI,CAAA;mBACI,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;UACtC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,MAAK,OAAO;YACjC,CAAC,CAAC,IAAI,CAAC,gBAAgB;YACvB,CAAC,CAAC,IAAI,CAAC,uBAAuB;UAC9B,IAAI,CAAC,kBAAkB;;KAE5B,CAAC;IACJ,CAAC;IAED,IAAY,QAAQ;;QAClB,OAAO,GAAG,IAAI,CAAC,YAAY,iBAAiB,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,EAAE,CAAC;IACvE,CAAC;IAED,YAAY;IACZ,IAAY,uBAAuB;QACjC,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,UAAU;sCACO,IAAI,CAAC,QAAQ;;KAE9C,CAAC;IACJ,CAAC;IAED,IAAY,gBAAgB;;QAC1B,OAAO,IAAI,CAAA;mBACI,IAAI,CAAC,gBAAgB;;kBAEtB,IAAI,CAAC,sBAAsB;iBAC5B,IAAI,CAAC,QAAQ;iBACb,SAAS,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,CAAC;kBAChC,IAAI,CAAC,oBAAoB;;;KAGtC,CAAC;IACJ,CAAC;IAED,IAAY,kBAAkB;QAC5B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAEO,oBAAoB;QAC1B,MAAM,WAAW,GACf,IAAI,CAAC,iBAAiB,CAAC,YAAY;YACnC,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC;QACvC,IAAI,WAAW,KAAK,CAAC,EAAE;YACrB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB;IACH,CAAC;IAED,UAAU;IACV,IAAY,UAAU;QACpB,OAAO,cAAc,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;IACxE,CAAC;IAED,IAAY,aAAa;QACvB,OAAO,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3D,CAAC;IAED,IAAY,gBAAgB;QAC1B,OAAO,aAAa,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;IACzE,CAAC;IAED,IAAY,sBAAsB;QAChC,OAAO,aAAa,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;IAC3D,CAAC;IAED,IAAY,cAAc;;QACxB,IAAI,WAAW,GAAG,CAAC,CAAC;QACpB,IAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,EAAE;YAC1B,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;SAChE;QACD,OAAO,OAAO,WAAW,EAAE,CAAC;IAC9B,CAAC;IAEO,gBAAgB,CAAC,GAAW;QAClC,OAAO,GAAG;aACP,KAAK,CAAC,EAAE,CAAC;aACT,MAAM,CAAC,CAAC,GAAW,EAAE,IAAY,EAAE,EAAE,CAAC,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACxE,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6GT,CAAC;IACJ,CAAC;CACF,CAAA;AA9N6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAuB;AAErB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAoB;AAEvC;IAAR,KAAK,EAAE;gDAAwC;AAEvC;IAAR,KAAK,EAAE;6CAAqC;AAEvB;IAArB,KAAK,CAAC,aAAa,CAAC;oDAA8C;AAXxD,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA+NrB;SA/NY,SAAS","sourcesContent":["import {\n css,\n CSSResultGroup,\n html,\n nothing,\n PropertyValues,\n LitElement,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { TileModel } from '../models';\n\n@customElement('item-image')\nexport class ItemImage extends LitElement {\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: String }) baseImageUrl?: string;\n\n @property({ type: Boolean }) isListTile = false;\n\n @state() private isDeemphasize: boolean = false;\n\n @state() private isWaveform: boolean = false;\n\n @query('.item-image') private itemImageWaveform!: HTMLImageElement;\n\n protected updated(changed: PropertyValues): void {\n if (changed.has('model')) {\n this.setDeemphsize();\n }\n }\n\n private setDeemphsize() {\n this.isDeemphasize =\n this.model?.collections.includes('deemphasize') ?? false;\n }\n\n render() {\n return html`\n <div class=${ifDefined(this.imageBoxClass)}>\n ${this.model?.mediatype === 'audio'\n ? this.waveformTemplate\n : this.backgroundImageTemplate}\n ${this.tileActionTemplate}\n </div>\n `;\n }\n\n private get imageSrc() {\n return `${this.baseImageUrl}/services/img/${this.model?.identifier}`;\n }\n\n // Templates\n private get backgroundImageTemplate() {\n return html`\n <div\n class=${this.imageClass}\n style=\"background-image:url(${this.imageSrc})\"\n ></div>\n `;\n }\n\n private get waveformTemplate() {\n return html`\n <div class=${this.boxWaveformClass}>\n <img\n class=${this.itemImageWaveformClass}\n src=\"${this.imageSrc}\"\n alt=\"${ifDefined(this.model?.identifier)}\"\n @load=${this.onLoadItemImageCheck}\n />\n </div>\n `;\n }\n\n private get tileActionTemplate() {\n if (!this.isDeemphasize) {\n return nothing;\n }\n return html`\n <div class=\"tile-action no-preview\">Content may be inappropriate</div>\n `;\n }\n\n private onLoadItemImageCheck() {\n const aspectRatio =\n this.itemImageWaveform.naturalWidth /\n this.itemImageWaveform.naturalHeight;\n if (aspectRatio === 4) {\n this.isWaveform = true;\n }\n }\n\n // Classes\n private get imageClass() {\n return `item-image ${this.isDeemphasize ? 'deemphasize' : 'default'}`;\n }\n\n private get imageBoxClass() {\n return this.isDeemphasize ? 'item-image-box' : undefined;\n }\n\n private get boxWaveformClass() {\n return `item-audio${this.isWaveform ? ` ${this.randomGradient}` : ''}`;\n }\n\n private get itemImageWaveformClass() {\n return `item-image${this.isWaveform ? ' waveform' : ''}`;\n }\n\n private get randomGradient() {\n let gradientInt = 1;\n if (this.model?.identifier) {\n gradientInt = this.generateHashCode(this.model.identifier) % 6;\n }\n return `grad${gradientInt}`;\n }\n\n private generateHashCode(str: string): number {\n return str\n .split('')\n .reduce((acc: number, char: string) => acc + char.charCodeAt(0), 0);\n }\n\n static get styles(): CSSResultGroup {\n return css`\n .item-image-box {\n width: 16rem;\n height: 16rem;\n overflow: hidden;\n position: relative;\n box-shadow: 1px 1px 2px 0px;\n display: flex;\n }\n\n .item-image {\n width: 16rem;\n height: 16rem;\n object-fit: contain;\n background-repeat: no-repeat;\n background-position: center center;\n position: relative;\n -webkit-appearance: none;\n overflow: visible;\n }\n\n .waveform {\n mix-blend-mode: screen;\n }\n\n .default {\n background-size: contain;\n filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));\n }\n\n .deemphasize {\n background-size: cover;\n filter: blur(15px);\n z-index: 1;\n }\n\n .tile-action {\n border: 1px solid currentColor;\n border-radius: 1px;\n padding: 5px;\n font-weight: 500;\n width: auto;\n position: absolute;\n z-index: 2;\n display: flex;\n top: 5.5rem;\n }\n\n .no-preview {\n background-color: #fffecb;\n color: #2c2c2c;\n font-size: 1.4rem;\n line-height: 2rem;\n text-align: center;\n }\n\n .grad1 {\n background: linear-gradient(\n hsl(300, 80%, 55%),\n hsl(330, 80%, 33%) 35%,\n hsl(330, 80%, 22%) 70%,\n hsl(0, 0%, 0%)\n );\n }\n\n .grad2 {\n background: linear-gradient(\n hsl(200, 80%, 55%),\n hsl(230, 80%, 33%) 35%,\n hsl(230, 80%, 22%) 70%,\n hsl(0, 0%, 0%)\n );\n }\n\n .grad3 {\n background: linear-gradient(\n hsl(160, 80%, 55%),\n hsl(190, 80%, 33%) 35%,\n hsl(190, 80%, 22%) 70%,\n hsl(0, 0%, 0%)\n );\n }\n\n .grad4 {\n background: linear-gradient(\n hsl(250, 80%, 55%),\n hsl(280, 80%, 33%) 35%,\n hsl(280, 80%, 22%) 70%,\n hsl(0, 0%, 0%)\n );\n }\n\n .grad5 {\n background: linear-gradient(\n hsl(280, 80%, 55%),\n hsl(310, 80%, 33%) 35%,\n hsl(310, 80%, 22%) 70%,\n hsl(0, 0%, 0%)\n );\n }\n\n .grad6 {\n background: linear-gradient(\n hsl(340, 80%, 55%),\n hsl(0, 80%, 33%) 35%,\n hsl(0, 80%, 22%) 70%,\n hsl(0, 0%, 0%)\n );\n }\n `;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "The Internet Archive Collection Browser.",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"author": "Internet Archive",
|
|
6
|
-
"version": "0.1.
|
|
6
|
+
"version": "0.1.6",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"module": "dist/index.js",
|
|
9
9
|
"scripts": {
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"@internetarchive/feature-feedback": "^0.1.2",
|
|
23
23
|
"@internetarchive/field-parsers": "^0.1.3",
|
|
24
24
|
"@internetarchive/histogram-date-range": "^0.1.6",
|
|
25
|
-
"@internetarchive/infinite-scroller": "^0.1.
|
|
25
|
+
"@internetarchive/infinite-scroller": "^0.1.2",
|
|
26
26
|
"@internetarchive/search-service": "^0.3.4",
|
|
27
27
|
"@internetarchive/shared-resize-observer": "^0.2.0",
|
|
28
28
|
"@lit/localize": "^0.11.2",
|
package/src/tiles/item-image.ts
CHANGED
|
@@ -110,7 +110,17 @@ export class ItemImage extends LitElement {
|
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
private get randomGradient() {
|
|
113
|
-
|
|
113
|
+
let gradientInt = 1;
|
|
114
|
+
if (this.model?.identifier) {
|
|
115
|
+
gradientInt = this.generateHashCode(this.model.identifier) % 6;
|
|
116
|
+
}
|
|
117
|
+
return `grad${gradientInt}`;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
private generateHashCode(str: string): number {
|
|
121
|
+
return str
|
|
122
|
+
.split('')
|
|
123
|
+
.reduce((acc: number, char: string) => acc + char.charCodeAt(0), 0);
|
|
114
124
|
}
|
|
115
125
|
|
|
116
126
|
static get styles(): CSSResultGroup {
|