@internetarchive/collection-browser 0.2.0 → 0.2.1
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.
- package/dist/src/styles/item-image-styles.js +5 -0
- package/dist/src/styles/item-image-styles.js.map +1 -1
- package/dist/src/tiles/item-image.js +1 -1
- package/dist/src/tiles/item-image.js.map +1 -1
- package/package.json +1 -1
- package/src/styles/item-image-styles.ts +5 -0
- package/src/tiles/item-image.ts +1 -1
|
@@ -6,6 +6,7 @@ export const baseItemImageStyles = css `
|
|
|
6
6
|
.drop-shadow {
|
|
7
7
|
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
|
|
8
8
|
overflow: hidden;
|
|
9
|
+
height: 100%;
|
|
9
10
|
}
|
|
10
11
|
|
|
11
12
|
.list-box {
|
|
@@ -37,6 +38,10 @@ export const baseItemImageStyles = css `
|
|
|
37
38
|
export const waveformGradientStyles = css `
|
|
38
39
|
.waveform {
|
|
39
40
|
mix-blend-mode: screen;
|
|
41
|
+
position: relative;
|
|
42
|
+
height: 62.5%;
|
|
43
|
+
top: 50%;
|
|
44
|
+
transform: translateY(-50%);
|
|
40
45
|
}
|
|
41
46
|
|
|
42
47
|
.waveform-grad0 {
|
|
@@ -1 +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
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BrC,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 }\n\n .contain {\n object-fit: contain;\n }\n\n .cover {\n object-fit: cover;\n }\n\n .blur {\n filter: blur(15px);\n width: 100%;\n transform: scale(1.1);\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"]}
|
|
@@ -56,7 +56,7 @@ let ItemImage = class ItemImage extends LitElement {
|
|
|
56
56
|
get itemImageClass() {
|
|
57
57
|
var _a;
|
|
58
58
|
return {
|
|
59
|
-
contain: !this.isCompactTile,
|
|
59
|
+
contain: !this.isCompactTile && !this.isWaveform,
|
|
60
60
|
cover: this.isCompactTile,
|
|
61
61
|
blur: ((_a = this.model) === null || _a === void 0 ? void 0 : _a.contentWarning) || false,
|
|
62
62
|
waveform: this.isWaveform,
|
|
@@ -1 +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;IAsFtC,CAAC;IAlFC,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,OAAO;YACL,OAAO,EAAE,CAAC,IAAI,CAAC,aAAa;
|
|
1
|
+
{"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 } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport { 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 return {\n contain: !this.isCompactTile && !this.isWaveform,\n cover: this.isCompactTile,\n blur: this.model?.contentWarning || 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/package.json
CHANGED
|
@@ -7,6 +7,7 @@ export const baseItemImageStyles = css`
|
|
|
7
7
|
.drop-shadow {
|
|
8
8
|
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
|
|
9
9
|
overflow: hidden;
|
|
10
|
+
height: 100%;
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
.list-box {
|
|
@@ -39,6 +40,10 @@ export const baseItemImageStyles = css`
|
|
|
39
40
|
export const waveformGradientStyles = css`
|
|
40
41
|
.waveform {
|
|
41
42
|
mix-blend-mode: screen;
|
|
43
|
+
position: relative;
|
|
44
|
+
height: 62.5%;
|
|
45
|
+
top: 50%;
|
|
46
|
+
transform: translateY(-50%);
|
|
42
47
|
}
|
|
43
48
|
|
|
44
49
|
.waveform-grad0 {
|
package/src/tiles/item-image.ts
CHANGED
|
@@ -72,7 +72,7 @@ export class ItemImage extends LitElement {
|
|
|
72
72
|
|
|
73
73
|
private get itemImageClass(): ClassInfo {
|
|
74
74
|
return {
|
|
75
|
-
contain: !this.isCompactTile,
|
|
75
|
+
contain: !this.isCompactTile && !this.isWaveform,
|
|
76
76
|
cover: this.isCompactTile,
|
|
77
77
|
blur: this.model?.contentWarning || false,
|
|
78
78
|
waveform: this.isWaveform,
|