@internetarchive/collection-browser 0.1.9 → 0.2.0
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/.github/workflows/gh-pages-main.yml +39 -0
- package/.github/workflows/npm-publish.yml +39 -0
- package/.github/workflows/pr-preview.yml +38 -0
- package/README.md +9 -3
- package/dist/src/styles/item-image-styles.d.ts +8 -0
- package/dist/src/styles/item-image-styles.js +96 -0
- package/dist/src/styles/item-image-styles.js.map +1 -0
- package/dist/src/tiles/grid/item-tile.js +13 -11
- package/dist/src/tiles/grid/item-tile.js.map +1 -1
- package/dist/src/tiles/item-image.d.ts +17 -13
- package/dist/src/tiles/item-image.js +63 -244
- package/dist/src/tiles/item-image.js.map +1 -1
- package/dist/src/tiles/item-tile-image.d.ts +15 -0
- package/dist/src/tiles/item-tile-image.js +68 -0
- package/dist/src/tiles/item-tile-image.js.map +1 -0
- package/dist/src/tiles/list/tile-list-compact.d.ts +1 -0
- package/dist/src/tiles/list/tile-list-compact.js +2 -0
- package/dist/src/tiles/list/tile-list-compact.js.map +1 -1
- package/dist/src/tiles/list/tile-list.d.ts +2 -1
- package/dist/src/tiles/list/tile-list.js +2 -0
- package/dist/src/tiles/list/tile-list.js.map +1 -1
- package/package.json +3 -2
- package/src/styles/item-image-styles.ts +97 -0
- package/src/tiles/grid/item-tile.ts +7 -6
- package/src/tiles/item-image.ts +68 -255
- package/src/tiles/item-tile-image.ts +61 -0
- package/src/tiles/list/tile-list-compact.ts +4 -0
- package/src/tiles/list/tile-list.ts +6 -1
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
# This workflow will generate the static page under `main` subdirectory inside the `gh-pages` branch
|
|
2
|
+
|
|
3
|
+
# This workflow will run every time new changes were pushed to the `main` branch
|
|
4
|
+
|
|
5
|
+
name: App build CI/CD to main branch
|
|
6
|
+
|
|
7
|
+
on:
|
|
8
|
+
push:
|
|
9
|
+
branches: [ main ]
|
|
10
|
+
|
|
11
|
+
jobs:
|
|
12
|
+
build:
|
|
13
|
+
runs-on: ubuntu-latest
|
|
14
|
+
|
|
15
|
+
steps:
|
|
16
|
+
- uses: actions/checkout@v3
|
|
17
|
+
with:
|
|
18
|
+
persist-credentials: false
|
|
19
|
+
|
|
20
|
+
- uses: actions/setup-node@v3
|
|
21
|
+
with:
|
|
22
|
+
node-version: 16.x
|
|
23
|
+
|
|
24
|
+
- name: Install dependencies
|
|
25
|
+
run: yarn install
|
|
26
|
+
|
|
27
|
+
- name: Create build files for gh-pages deploy
|
|
28
|
+
run: yarn prepare:ghpages
|
|
29
|
+
|
|
30
|
+
# Reference: https://github.com/JamesIves/github-pages-deploy-action
|
|
31
|
+
- name: Deploy 🚀
|
|
32
|
+
uses: JamesIves/github-pages-deploy-action@v4.3.3
|
|
33
|
+
with:
|
|
34
|
+
branch: gh-pages
|
|
35
|
+
folder: ghpages
|
|
36
|
+
clean-exclude: pr/
|
|
37
|
+
force: false
|
|
38
|
+
target-folder: main
|
|
39
|
+
token: ${{ secrets.GH_TOKEN }}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
# This workflow will be triggered if there's a new release tag created/pushed in Github repo
|
|
2
|
+
|
|
3
|
+
# This workflow will do the following:
|
|
4
|
+
# - run tests using node
|
|
5
|
+
# - publish a package to GitHub Packages when a release is created
|
|
6
|
+
|
|
7
|
+
# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
|
|
8
|
+
|
|
9
|
+
name: Node.js Package
|
|
10
|
+
|
|
11
|
+
on:
|
|
12
|
+
release:
|
|
13
|
+
types: [created]
|
|
14
|
+
|
|
15
|
+
jobs:
|
|
16
|
+
build:
|
|
17
|
+
runs-on: ubuntu-latest
|
|
18
|
+
steps:
|
|
19
|
+
- uses: actions/checkout@v3
|
|
20
|
+
- uses: actions/setup-node@v3
|
|
21
|
+
with:
|
|
22
|
+
node-version: 16
|
|
23
|
+
- run: npm ci
|
|
24
|
+
- run: npm prepare
|
|
25
|
+
- run: npm test
|
|
26
|
+
|
|
27
|
+
publish-npm:
|
|
28
|
+
needs: build
|
|
29
|
+
runs-on: ubuntu-latest
|
|
30
|
+
steps:
|
|
31
|
+
- uses: actions/checkout@v3
|
|
32
|
+
- uses: actions/setup-node@v3
|
|
33
|
+
with:
|
|
34
|
+
node-version: 16
|
|
35
|
+
registry-url: https://registry.npmjs.org/
|
|
36
|
+
- run: npm ci
|
|
37
|
+
- run: npm publish --tag next
|
|
38
|
+
env:
|
|
39
|
+
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
# This workflow will generate the static page under `pr` subdirectory inside the `gh-pages` branch
|
|
2
|
+
|
|
3
|
+
# This workflow will run every time there's a PR opened, reopened, synchronize, or closed
|
|
4
|
+
|
|
5
|
+
name: Deploy PR previews
|
|
6
|
+
|
|
7
|
+
on:
|
|
8
|
+
pull_request:
|
|
9
|
+
types:
|
|
10
|
+
- opened
|
|
11
|
+
- reopened
|
|
12
|
+
- synchronize
|
|
13
|
+
- closed
|
|
14
|
+
|
|
15
|
+
concurrency: preview-${{ github.ref }}
|
|
16
|
+
|
|
17
|
+
jobs:
|
|
18
|
+
deploy-preview:
|
|
19
|
+
runs-on: ubuntu-20.04
|
|
20
|
+
steps:
|
|
21
|
+
- name: Checkout
|
|
22
|
+
uses: actions/checkout@v3
|
|
23
|
+
|
|
24
|
+
- uses: actions/setup-node@v3
|
|
25
|
+
with:
|
|
26
|
+
node-version: 16.x
|
|
27
|
+
|
|
28
|
+
- name: Install and Build
|
|
29
|
+
run: |
|
|
30
|
+
yarn install
|
|
31
|
+
yarn prepare:ghpages
|
|
32
|
+
|
|
33
|
+
# Reference: https://github.com/rossjrw/pr-preview-action
|
|
34
|
+
- name: Deploy preview
|
|
35
|
+
uses: rossjrw/pr-preview-action@v1
|
|
36
|
+
with:
|
|
37
|
+
source-dir: ./ghpages/
|
|
38
|
+
umbrella-dir: pr
|
package/README.md
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
This is the main collection browser for the Internet Archive website.
|
|
7
7
|
|
|
8
|
+
[Review app URL](https://internetarchive.github.io/iaux-collection-browser/main)
|
|
8
9
|
## Usage
|
|
9
10
|
|
|
10
11
|
```ts
|
|
@@ -66,13 +67,18 @@ For most of the tools, the configuration is in the `package.json` to reduce the
|
|
|
66
67
|
|
|
67
68
|
If you customize the configuration a lot, you can consider moving them to individual files.
|
|
68
69
|
|
|
69
|
-
##
|
|
70
|
+
## Manual Deploy using `gh-pages`
|
|
70
71
|
|
|
72
|
+
Live demo app from current main branch: [https://internetarchive.github.io/iaux-collection-browser](https://internetarchive.github.io/iaux-collection-browser)
|
|
71
73
|
|
|
72
74
|
```
|
|
73
|
-
yarn run deploy
|
|
75
|
+
yarn run deploy
|
|
74
76
|
```
|
|
75
77
|
|
|
76
|
-
|
|
78
|
+
## Automatic Deploy of Demo App
|
|
77
79
|
|
|
80
|
+
When you create a Pull Request, if your code passes codecov unit tests, it will be always served live at base url / pull request number. For this demo app, you must create a Pull Request, nothing will be created from a simple branch.
|
|
78
81
|
|
|
82
|
+
This URL will be removed when the Pull Request is merged/closed.
|
|
83
|
+
|
|
84
|
+
Example: `https://internetarchive.github.io/iaux-collection-browser/pr/<pr-number>`
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* Base item-image styles
|
|
4
|
+
*/
|
|
5
|
+
export const baseItemImageStyles = css `
|
|
6
|
+
.drop-shadow {
|
|
7
|
+
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
|
|
8
|
+
overflow: hidden;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.list-box {
|
|
12
|
+
width: 100%;
|
|
13
|
+
height: 100%;
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
box-sizing: border-box;
|
|
16
|
+
display: flex;
|
|
17
|
+
position: relative;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.contain {
|
|
21
|
+
object-fit: contain;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.cover {
|
|
25
|
+
object-fit: cover;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.blur {
|
|
29
|
+
filter: blur(15px);
|
|
30
|
+
width: 100%;
|
|
31
|
+
transform: scale(1.1);
|
|
32
|
+
}
|
|
33
|
+
`;
|
|
34
|
+
/**
|
|
35
|
+
* Waveform styles
|
|
36
|
+
*/
|
|
37
|
+
export const waveformGradientStyles = css `
|
|
38
|
+
.waveform {
|
|
39
|
+
mix-blend-mode: screen;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.waveform-grad0 {
|
|
43
|
+
background: linear-gradient(
|
|
44
|
+
hsl(340, 80%, 55%),
|
|
45
|
+
hsl(0, 80%, 33%) 35%,
|
|
46
|
+
hsl(0, 80%, 22%) 70%,
|
|
47
|
+
hsl(0, 0%, 0%)
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.waveform-grad1 {
|
|
52
|
+
background: linear-gradient(
|
|
53
|
+
hsl(300, 80%, 55%),
|
|
54
|
+
hsl(330, 80%, 33%) 35%,
|
|
55
|
+
hsl(330, 80%, 22%) 70%,
|
|
56
|
+
hsl(0, 0%, 0%)
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.waveform-grad2 {
|
|
61
|
+
background: linear-gradient(
|
|
62
|
+
hsl(200, 80%, 55%),
|
|
63
|
+
hsl(230, 80%, 33%) 35%,
|
|
64
|
+
hsl(230, 80%, 22%) 70%,
|
|
65
|
+
hsl(0, 0%, 0%)
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.waveform-grad3 {
|
|
70
|
+
background: linear-gradient(
|
|
71
|
+
hsl(160, 80%, 55%),
|
|
72
|
+
hsl(190, 80%, 33%) 35%,
|
|
73
|
+
hsl(190, 80%, 22%) 70%,
|
|
74
|
+
hsl(0, 0%, 0%)
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.waveform-grad4 {
|
|
79
|
+
background: linear-gradient(
|
|
80
|
+
hsl(250, 80%, 55%),
|
|
81
|
+
hsl(280, 80%, 33%) 35%,
|
|
82
|
+
hsl(280, 80%, 22%) 70%,
|
|
83
|
+
hsl(0, 0%, 0%)
|
|
84
|
+
);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.waveform-grad5 {
|
|
88
|
+
background: linear-gradient(
|
|
89
|
+
hsl(280, 80%, 55%),
|
|
90
|
+
hsl(310, 80%, 33%) 35%,
|
|
91
|
+
hsl(310, 80%, 22%) 70%,
|
|
92
|
+
hsl(0, 0%, 0%)
|
|
93
|
+
);
|
|
94
|
+
}
|
|
95
|
+
`;
|
|
96
|
+
//# sourceMappingURL=item-image-styles.js.map
|
|
@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BrC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DxC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Base item-image styles\n */\nexport const baseItemImageStyles = css`\n .drop-shadow {\n filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));\n overflow: hidden;\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 }\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"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
/* eslint-disable import/no-duplicates */
|
|
3
|
-
import { css, html, LitElement } from 'lit';
|
|
3
|
+
import { css, html, LitElement, nothing } from 'lit';
|
|
4
4
|
import { customElement, property } from 'lit/decorators.js';
|
|
5
5
|
import { formatCount } from '../../utils/format-count';
|
|
6
6
|
import { favoriteFilledIcon } from './icons/favorite-filled';
|
|
@@ -10,20 +10,22 @@ import '../mediatype-icon';
|
|
|
10
10
|
import '../item-image';
|
|
11
11
|
let ItemTile = class ItemTile extends LitElement {
|
|
12
12
|
render() {
|
|
13
|
-
var _a, _b, _c, _d, _e, _f, _g
|
|
14
|
-
const itemTitle = ((_a = this.model) === null || _a === void 0 ? void 0 : _a.title) ||
|
|
15
|
-
const itemCreator = (
|
|
13
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
14
|
+
const itemTitle = ((_a = this.model) === null || _a === void 0 ? void 0 : _a.title) || nothing;
|
|
15
|
+
const itemCreator = (_b = this.model) === null || _b === void 0 ? void 0 : _b.creator;
|
|
16
16
|
return html `
|
|
17
17
|
<div id="container">
|
|
18
18
|
<div id="title-image-container">
|
|
19
|
-
<h1 id="item-title" title=${itemTitle}>${
|
|
19
|
+
<h1 id="item-title" title=${itemTitle}>${itemTitle}</h1>
|
|
20
20
|
<div id="item-image-container">
|
|
21
21
|
<item-image .model=${this.model} .baseImageUrl=${this.baseImageUrl}>
|
|
22
22
|
</item-image>
|
|
23
23
|
</div>
|
|
24
24
|
<div class="item-creator">
|
|
25
25
|
<div class="truncated">
|
|
26
|
-
|
|
26
|
+
${itemCreator
|
|
27
|
+
? html `<span>by ${itemCreator}</span>`
|
|
28
|
+
: nothing}
|
|
27
29
|
</div>
|
|
28
30
|
</div>
|
|
29
31
|
</div>
|
|
@@ -34,8 +36,8 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
34
36
|
<div id="stats-holder">
|
|
35
37
|
<div class="col">
|
|
36
38
|
<mediatype-icon
|
|
37
|
-
.mediatype=${(
|
|
38
|
-
.collection=${(
|
|
39
|
+
.mediatype=${(_c = this.model) === null || _c === void 0 ? void 0 : _c.mediatype}
|
|
40
|
+
.collection=${(_d = this.model) === null || _d === void 0 ? void 0 : _d.collections}
|
|
39
41
|
style="--iconHeight:25px; --iconWidth:25px;"
|
|
40
42
|
>
|
|
41
43
|
</mediatype-icon>
|
|
@@ -43,19 +45,19 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
43
45
|
<div class="col">
|
|
44
46
|
${viewsIcon}
|
|
45
47
|
<p class="status-text">
|
|
46
|
-
${formatCount((
|
|
48
|
+
${formatCount((_e = this.model) === null || _e === void 0 ? void 0 : _e.viewCount, 'short', 'short')}
|
|
47
49
|
</p>
|
|
48
50
|
</div>
|
|
49
51
|
<div class="col">
|
|
50
52
|
${favoriteFilledIcon}
|
|
51
53
|
<p class="status-text">
|
|
52
|
-
${formatCount((
|
|
54
|
+
${formatCount((_f = this.model) === null || _f === void 0 ? void 0 : _f.itemCount, 'short', 'short')}
|
|
53
55
|
</p>
|
|
54
56
|
</div>
|
|
55
57
|
<div class="col">
|
|
56
58
|
${reviewsIcon}
|
|
57
59
|
<p class="status-text">
|
|
58
|
-
${formatCount((
|
|
60
|
+
${formatCount((_g = this.model) === null || _g === void 0 ? void 0 : _g.favCount, 'short', 'short')}
|
|
59
61
|
</p>
|
|
60
62
|
</div>
|
|
61
63
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":";AAAA,yCAAyC;AACzC,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":";AAAA,yCAAyC;AACzC,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AAGvB,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAKtC,MAAM;;QACJ,MAAM,SAAS,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,KAAI,OAAO,CAAC;QAC/C,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,CAAC;QACxC,OAAO,IAAI,CAAA;;;sCAGuB,SAAS,IAAI,SAAS;;iCAE3B,IAAI,CAAC,KAAK,kBAAkB,IAAI,CAAC,YAAY;;;;;gBAK9D,WAAW;YACX,CAAC,CAAC,IAAI,CAAA,iBAAiB,WAAW,SAAS;YAC3C,CAAC,CAAC,OAAO;;;;;;;;;;;6BAWI,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;8BACpB,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW;;;;;;gBAMrC,SAAS;;kBAEP,WAAW,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC;;;;gBAItD,kBAAkB;;kBAEhB,WAAW,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC;;;;gBAItD,WAAW;;kBAET,WAAW,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC;;;;;;KAMhE,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,wCAAwC,CAAC;QAEpE,OAAO,GAAG,CAAA;;;yBAGW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoHnC,CAAC;IACJ,CAAC;CACF,CAAA;AAxL6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAuB;AAHvC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAyLpB;SAzLY,QAAQ","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { TileModel } from '../../models';\nimport { formatCount } from '../../utils/format-count';\n\nimport { favoriteFilledIcon } from './icons/favorite-filled';\nimport { reviewsIcon } from './icons/reviews';\nimport viewsIcon from './icons/views';\n\nimport '../mediatype-icon';\nimport '../item-image';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: String }) baseImageUrl?: string;\n\n render() {\n const itemTitle = this.model?.title || nothing;\n const itemCreator = this.model?.creator;\n return html`\n <div id=\"container\">\n <div id=\"title-image-container\">\n <h1 id=\"item-title\" title=${itemTitle}>${itemTitle}</h1>\n <div id=\"item-image-container\">\n <item-image .model=${this.model} .baseImageUrl=${this.baseImageUrl}>\n </item-image>\n </div>\n <div class=\"item-creator\">\n <div class=\"truncated\">\n ${itemCreator\n ? html`<span>by ${itemCreator}</span>`\n : nothing}\n </div>\n </div>\n </div>\n\n <div class=\"hr\"></div>\n\n <div id=\"item-stats-container\">\n <div id=\"stats-holder\">\n <div class=\"col\">\n <mediatype-icon\n .mediatype=${this.model?.mediatype}\n .collection=${this.model?.collections}\n style=\"--iconHeight:25px; --iconWidth:25px;\"\n >\n </mediatype-icon>\n </div>\n <div class=\"col\">\n ${viewsIcon}\n <p class=\"status-text\">\n ${formatCount(this.model?.viewCount, 'short', 'short')}\n </p>\n </div>\n <div class=\"col\">\n ${favoriteFilledIcon}\n <p class=\"status-text\">\n ${formatCount(this.model?.itemCount, 'short', 'short')}\n </p>\n </div>\n <div class=\"col\">\n ${reviewsIcon}\n <p class=\"status-text\">\n ${formatCount(this.model?.favCount, 'short', 'short')}\n </p>\n </div>\n </div>\n </div>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;\n\n return css`\n #container {\n background-color: #ffffff;\n border-radius: ${cornerRadiusCss};\n box-shadow: 1px 1px 2px 0px;\n display: flex;\n flex-direction: column;\n height: 100%;\n position: relative;\n }\n\n #title-image-container {\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: 0.5rem 0.5rem 0 0.5rem;\n }\n\n #item-title {\n color: #2c2c2c;\n font-size: 1.6rem;\n text-align: center;\n margin-top: 0rem;\n margin-bottom: 0.5rem;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n line-height: 2rem;\n height: 4rem;\n }\n\n #item-image-container {\n display: flex;\n justify-content: center;\n flex: 1;\n }\n\n .hidden {\n display: none;\n }\n\n #container:hover > #title-image-container > .item-title {\n text-decoration: underline;\n }\n\n /** this is a workaround for Safari 15 where the hover effects are not working */\n #title-image-container:hover > #item-title {\n text-decoration: underline;\n }\n\n #container:hover > #item-title {\n background-color: #fcfcfc;\n }\n\n .item-creator {\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 min-width: 0; /* Important for long words! */\n }\n\n .truncated span {\n font-size: 1.4rem;\n color: #2c2c2c;\n -webkit-line-clamp: 2;\n text-overflow: ellipsis;\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n word-wrap: break-word;\n line-height: 2rem;\n text-align: center;\n }\n\n .hr {\n border: 0.5px solid #ccc;\n }\n\n #item-stats-container {\n align-items: center;\n display: flex;\n height: 5.5rem;\n padding-left: 1rem;\n padding-right: 0.5rem;\n }\n\n #stats-holder {\n align-items: center;\n display: flex;\n flex: 1;\n justify-content: space-evenly;\n text-align: center;\n width: 100%;\n }\n\n svg {\n height: 10px;\n width: 10px;\n }\n\n .status-text {\n font-size: 14px;\n color: #2c2c2c;\n margin: auto;\n display: block;\n text-align: center;\n }\n\n .col {\n width: 25%;\n }\n `;\n }\n}\n"]}
|
|
@@ -5,23 +5,27 @@ export declare class ItemImage extends LitElement {
|
|
|
5
5
|
baseImageUrl?: string;
|
|
6
6
|
isListTile: boolean;
|
|
7
7
|
isCompactTile: boolean;
|
|
8
|
+
loggedIn: boolean;
|
|
8
9
|
private isWaveform;
|
|
9
|
-
private
|
|
10
|
+
private baseImage;
|
|
10
11
|
render(): import("lit-html").TemplateResult<1>;
|
|
12
|
+
/**
|
|
13
|
+
* Helpers
|
|
14
|
+
*/
|
|
11
15
|
private get imageSrc();
|
|
12
|
-
private get itemImageTemplate();
|
|
13
|
-
private get tileImageTemplate();
|
|
14
|
-
private get listImageTemplate();
|
|
15
|
-
private get waveformTemplate();
|
|
16
|
-
private get restrictedIconTemplate();
|
|
17
|
-
private get tileActionTemplate();
|
|
18
|
-
private onLoadItemImageCheck;
|
|
19
|
-
private get imageClass();
|
|
20
|
-
private get listImageClass();
|
|
21
|
-
private get imageBoxClass();
|
|
22
|
-
private get boxWaveformClass();
|
|
23
|
-
private get itemImageWaveformClass();
|
|
24
16
|
private get hashBasedGradient();
|
|
25
17
|
private hashStrToInt;
|
|
18
|
+
/**
|
|
19
|
+
* Classes
|
|
20
|
+
*/
|
|
21
|
+
private get itemBaseClass();
|
|
22
|
+
private get itemImageClass();
|
|
23
|
+
/**
|
|
24
|
+
* Event listener sets isWaveform true if image is waveform
|
|
25
|
+
*/
|
|
26
|
+
private onLoad;
|
|
27
|
+
/**
|
|
28
|
+
* CSS
|
|
29
|
+
*/
|
|
26
30
|
static get styles(): CSSResultGroup;
|
|
27
31
|
}
|