@internetarchive/collection-browser 0.1.9-alpha1 → 0.2.1

package/.github/workflows/gh-pages-main.yml

@@ -0,0 +1,39 @@
+# This workflow will generate the static page under `main` subdirectory inside the `gh-pages` branch
+
+# This workflow will run every time new changes were pushed to the `main` branch
+
+name: App build CI/CD to main branch
+
+on:
+  push:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+
+      - name: Install dependencies
+        run: yarn install
+  
+      - name: Create build files for gh-pages deploy
+        run: yarn prepare:ghpages
+
+      # Reference: https://github.com/JamesIves/github-pages-deploy-action
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4.3.3
+        with:
+          branch: gh-pages
+          folder: ghpages
+          clean-exclude: pr/
+          force: false
+          target-folder: main
+          token: ${{ secrets.GH_TOKEN }}

package/.github/workflows/npm-publish.yml

@@ -0,0 +1,39 @@
+# This workflow will be triggered if there's a new release tag created/pushed in Github repo
+
+# This workflow will do the following:
+# - run tests using node 
+# - publish a package to GitHub Packages when a release is created
+
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm ci
+      - run: npm prepare
+      - run: npm test
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm publish --tag next
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/.github/workflows/pr-preview.yml

@@ -0,0 +1,38 @@
+# This workflow will generate the static page under `pr` subdirectory inside the `gh-pages` branch
+
+# This workflow will run every time there's a PR opened, reopened, synchronize, or closed
+
+name: Deploy PR previews
+
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - closed
+
+concurrency: preview-${{ github.ref }}
+
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+
+      - name: Install and Build
+        run: |
+          yarn install
+          yarn prepare:ghpages
+
+      # Reference: https://github.com/rossjrw/pr-preview-action
+      - name: Deploy preview
+        uses: rossjrw/pr-preview-action@v1
+        with:
+          source-dir: ./ghpages/
+          umbrella-dir: pr

package/README.md

@@ -5,6 +5,7 @@
 
 This is the main collection browser for the Internet Archive website.
 
+[Review app URL](https://internetarchive.github.io/iaux-collection-browser/main) 
 ## Usage
 
 ```ts
@@ -66,13 +67,18 @@ For most of the tools, the configuration is in the `package.json` to reduce the
 
 If you customize the configuration a lot, you can consider moving them to individual files.
 
-## Deploying using `gh-pages`
+## Manual Deploy using `gh-pages`
 
+Live demo app from current main branch: [https://internetarchive.github.io/iaux-collection-browser](https://internetarchive.github.io/iaux-collection-browser)
 
 ```
-yarn run deploy -e <review_app_name>
+yarn run deploy
 ```
 
-Review app URL: [https://internetarchive.github.io/iaux-collection-browser](https://internetarchive.github.io/iaux-collection-browser)
+## Automatic Deploy of Demo App
 
+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.
 
+This URL will be removed when the Pull Request is merged/closed.
+
+Example: `https://internetarchive.github.io/iaux-collection-browser/pr/<pr-number>`

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

@@ -0,0 +1,8 @@
+/**
+ * Base item-image styles
+ */
+export declare const baseItemImageStyles: import("lit").CSSResult;
+/**
+ * Waveform styles
+ */
+export declare const waveformGradientStyles: import("lit").CSSResult;

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

@@ -0,0 +1,101 @@
+import { css } from 'lit';
+/**
+ * Base item-image styles
+ */
+export const baseItemImageStyles = css `
+  .drop-shadow {
+    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
+    overflow: hidden;
+    height: 100%;
+  }
+
+  .list-box {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    display: flex;
+    position: relative;
+  }
+
+  .contain {
+    object-fit: contain;
+  }
+
+  .cover {
+    object-fit: cover;
+  }
+
+  .blur {
+    filter: blur(15px);
+    width: 100%;
+    transform: scale(1.1);
+  }
+`;
+/**
+ * Waveform styles
+ */
+export const waveformGradientStyles = css `
+  .waveform {
+    mix-blend-mode: screen;
+    position: relative;
+    height: 62.5%;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .waveform-grad0 {
+    background: linear-gradient(
+      hsl(340, 80%, 55%),
+      hsl(0, 80%, 33%) 35%,
+      hsl(0, 80%, 22%) 70%,
+      hsl(0, 0%, 0%)
+    );
+  }
+
+  .waveform-grad1 {
+    background: linear-gradient(
+      hsl(300, 80%, 55%),
+      hsl(330, 80%, 33%) 35%,
+      hsl(330, 80%, 22%) 70%,
+      hsl(0, 0%, 0%)
+    );
+  }
+
+  .waveform-grad2 {
+    background: linear-gradient(
+      hsl(200, 80%, 55%),
+      hsl(230, 80%, 33%) 35%,
+      hsl(230, 80%, 22%) 70%,
+      hsl(0, 0%, 0%)
+    );
+  }
+
+  .waveform-grad3 {
+    background: linear-gradient(
+      hsl(160, 80%, 55%),
+      hsl(190, 80%, 33%) 35%,
+      hsl(190, 80%, 22%) 70%,
+      hsl(0, 0%, 0%)
+    );
+  }
+
+  .waveform-grad4 {
+    background: linear-gradient(
+      hsl(250, 80%, 55%),
+      hsl(280, 80%, 33%) 35%,
+      hsl(280, 80%, 22%) 70%,
+      hsl(0, 0%, 0%)
+    );
+  }
+
+  .waveform-grad5 {
+    background: linear-gradient(
+      hsl(280, 80%, 55%),
+      hsl(310, 80%, 33%) 35%,
+      hsl(310, 80%, 22%) 70%,
+      hsl(0, 0%, 0%)
+    );
+  }
+`;
+//# sourceMappingURL=item-image-styles.js.map

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

@@ -0,0 +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"]}

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

@@ -5,23 +5,27 @@ export declare class ItemImage extends LitElement {
     baseImageUrl?: string;
     isListTile: boolean;
     isCompactTile: boolean;
+    loggedIn: boolean;
     private isWaveform;
-    private itemImageWaveform;
+    private baseImage;
     render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Helpers
+     */
     private get imageSrc();
-    private get itemImageTemplate();
-    private get tileImageTemplate();
-    private get listImageTemplate();
-    private get waveformTemplate();
-    private get restrictedIconTemplate();
-    private get tileActionTemplate();
-    private onLoadItemImageCheck;
-    private get imageClass();
-    private get listImageClass();
-    private get imageBoxClass();
-    private get boxWaveformClass();
-    private get itemImageWaveformClass();
     private get hashBasedGradient();
     private hashStrToInt;
+    /**
+     * Classes
+     */
+    private get itemBaseClass();
+    private get itemImageClass();
+    /**
+     * Event listener sets isWaveform true if image is waveform
+     */
+    private onLoad;
+    /**
+     * CSS
+     */
     static get styles(): CSSResultGroup;
 }

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

@@ -1,276 +1,92 @@
 import { __decorate } from "tslib";
-import { css, html, nothing, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { restrictedIcon } from '../assets/img/icons/restricted';
+import { classMap } from 'lit/directives/class-map.js';
+import { baseItemImageStyles, waveformGradientStyles, } from '../styles/item-image-styles';
 let ItemImage = class ItemImage extends LitElement {
     constructor() {
         super(...arguments);
         this.isListTile = false;
         this.isCompactTile = false;
+        this.loggedIn = false;
         this.isWaveform = false;
     }
     render() {
-        var _a;
         return html `
-      <div class=${ifDefined(this.imageBoxClass)}>
-        ${((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'audio'
-            ? this.waveformTemplate
-            : this.itemImageTemplate}
-      </div>
-    `;
-    }
-    get imageSrc() {
-        var _a;
-        return `${this.baseImageUrl}/services/img/${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}`;
-    }
-    // Templates
-    get itemImageTemplate() {
-        return html `
-      ${this.isListTile ? this.listImageTemplate : this.tileImageTemplate}
-    `;
-    }
-    get tileImageTemplate() {
-        return html `
-      <div
-        class=${this.imageClass}
-        style="background-image:url(${this.imageSrc})"
-      ></div>
-      ${this.tileActionTemplate}
-    `;
-    }
-    get listImageTemplate() {
-        if (!this.model) {
-            return nothing;
-        }
-        return html `
-      <img src="${this.imageSrc}" alt="" class="${this.listImageClass}" />
-      ${this.restrictedIconTemplate}
-    `;
-    }
-    get waveformTemplate() {
-        var _a;
-        return html `
-      <div class=${this.boxWaveformClass}>
+      <div class=${classMap(this.itemBaseClass)}>
         <img
-          class=${this.itemImageWaveformClass}
+          class=${classMap(this.itemImageClass)}
           src="${this.imageSrc}"
-          alt="${ifDefined((_a = this.model) === null || _a === void 0 ? void 0 : _a.title)}"
-          @load=${this.onLoadItemImageCheck}
+          alt=""
+          @load=${this.onLoad}
         />
       </div>
     `;
     }
-    get restrictedIconTemplate() {
-        var _a;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.contentWarning)) {
-            return nothing;
-        }
-        return html ` ${restrictedIcon} `;
-    }
-    get tileActionTemplate() {
-        var _a;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.contentWarning)) {
-            return nothing;
-        }
-        return html `
-      <div class="tile-action no-preview">Content may be inappropriate</div>
-    `;
-    }
-    onLoadItemImageCheck() {
-        const aspectRatio = this.itemImageWaveform.naturalWidth /
-            this.itemImageWaveform.naturalHeight;
-        if (aspectRatio === 4) {
-            this.isWaveform = true;
-        }
-    }
-    // Classes
-    get imageClass() {
-        var _a;
-        return `item-image ${((_a = this.model) === null || _a === void 0 ? void 0 : _a.contentWarning) ? 'deemphasize' : 'default'}`;
-    }
-    get listImageClass() {
+    /**
+     * Helpers
+     */
+    get imageSrc() {
         var _a;
-        return `list-image ${(_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype}${this.isCompactTile ? ' compact' : ''}`;
-    }
-    get imageBoxClass() {
-        var _a, _b;
-        if (this.isListTile) {
-            return `list-image-box${((_a = this.model) === null || _a === void 0 ? void 0 : _a.contentWarning) ? ' deemphasize' : ''}`;
-        }
-        if ((_b = this.model) === null || _b === void 0 ? void 0 : _b.contentWarning) {
-            return 'item-image-box';
-        }
-        return undefined;
-    }
-    get boxWaveformClass() {
-        return `item-audio${this.isWaveform ? ` ${this.hashBasedGradient}` : ''}`;
-    }
-    get itemImageWaveformClass() {
-        return `item-image${this.isWaveform ? ' waveform' : ''}`;
+        return `${this.baseImageUrl}/services/img/${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}`;
     }
     get hashBasedGradient() {
         var _a;
         if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)) {
-            return 'grad1';
+            return 'waveform-grad0';
         }
         const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5
-        return `grad${gradient}`;
+        return `waveform-grad${gradient}`;
     }
     hashStrToInt(str) {
         return str
             .split('')
             .reduce((acc, char) => acc + char.charCodeAt(0), 0);
     }
+    /**
+     * Classes
+     */
+    get itemBaseClass() {
+        return {
+            'drop-shadow': true,
+            'list-box': this.isListTile,
+            [this.hashBasedGradient]: this.isWaveform,
+        };
+    }
+    get itemImageClass() {
+        var _a;
+        return {
+            contain: !this.isCompactTile && !this.isWaveform,
+            cover: this.isCompactTile,
+            blur: ((_a = this.model) === null || _a === void 0 ? void 0 : _a.contentWarning) || false,
+            waveform: this.isWaveform,
+        };
+    }
+    /**
+     * Event listener sets isWaveform true if image is waveform
+     */
+    onLoad() {
+        var _a, _b;
+        if ((((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'audio' ||
+            ((_b = this.model) === null || _b === void 0 ? void 0 : _b.mediatype) === 'etree') &&
+            this.baseImage.naturalWidth / this.baseImage.naturalHeight === 4) {
+            this.isWaveform = true;
+        }
+    }
+    /**
+     * CSS
+     */
     static get styles() {
-        return css `
-      .item-image-box {
-        width: 16rem;
-        height: 16rem;
-        overflow: hidden;
-        position: relative;
-        box-shadow: 1px 1px 2px 0px;
-        display: flex;
-      }
-
-      .item-image {
-        width: 16rem;
-        height: 16rem;
-        object-fit: contain;
-        background-repeat: no-repeat;
-        background-position: center center;
-        position: relative;
-        -webkit-appearance: none;
-        overflow: visible;
-      }
-
-      .list-image-box.deemphasize {
-        border: 1px solid #767676;
-      }
-
-      .list-image-box {
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-        box-sizing: border-box;
-        display: flex;
-        position: relative;
-      }
-
-      .list-image {
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-      }
-
-      img.list-image {
-        overflow: hidden;
-        object-fit: contain;
-        border-radius: var(--border-radius, 0);
-        -webkit-border-radius: var(--border-radius, 0);
-        -moz-border-radius: var(--border-radius, 0);
-      }
-
-      img.list-image.compact {
-        object-fit: cover;
-      }
-
-      .waveform {
-        mix-blend-mode: screen;
-      }
-
-      .default {
-        background-size: contain;
-        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
-      }
-
-      .deemphasize .list-image,
-      .deemphasize.item-image {
-        background-size: contain;
-        filter: blur(15px);
-        z-index: 1;
-      }
-
-      .deemphasize svg {
-        padding: 25%;
-        z-index: 2;
-        position: absolute;
-      }
-
-      .tile-action {
-        border: 1px solid currentColor;
-        border-radius: 1px;
-        padding: 5px;
-        font-weight: 500;
-        width: auto;
-        position: absolute;
-        z-index: 2;
-        display: flex;
-        top: 5.5rem;
-      }
-
-      .no-preview {
-        background-color: #fffecb;
-        color: #2c2c2c;
-        font-size: 1.4rem;
-        line-height: 2rem;
-        text-align: center;
-      }
-
-      .grad0 {
-        background: linear-gradient(
-          hsl(340, 80%, 55%),
-          hsl(0, 80%, 33%) 35%,
-          hsl(0, 80%, 22%) 70%,
-          hsl(0, 0%, 0%)
-        );
-      }
-
-      .grad1 {
-        background: linear-gradient(
-          hsl(300, 80%, 55%),
-          hsl(330, 80%, 33%) 35%,
-          hsl(330, 80%, 22%) 70%,
-          hsl(0, 0%, 0%)
-        );
-      }
-
-      .grad2 {
-        background: linear-gradient(
-          hsl(200, 80%, 55%),
-          hsl(230, 80%, 33%) 35%,
-          hsl(230, 80%, 22%) 70%,
-          hsl(0, 0%, 0%)
-        );
-      }
-
-      .grad3 {
-        background: linear-gradient(
-          hsl(160, 80%, 55%),
-          hsl(190, 80%, 33%) 35%,
-          hsl(190, 80%, 22%) 70%,
-          hsl(0, 0%, 0%)
-        );
-      }
-
-      .grad4 {
-        background: linear-gradient(
-          hsl(250, 80%, 55%),
-          hsl(280, 80%, 33%) 35%,
-          hsl(280, 80%, 22%) 70%,
-          hsl(0, 0%, 0%)
-        );
-      }
-
-      .grad5 {
-        background: linear-gradient(
-          hsl(280, 80%, 55%),
-          hsl(310, 80%, 33%) 35%,
-          hsl(310, 80%, 22%) 70%,
-          hsl(0, 0%, 0%)
-        );
-      }
-    `;
+        return [
+            baseItemImageStyles,
+            waveformGradientStyles,
+            css `
+        img {
+          height: var(--imgHeight, 16rem);
+          width: var(--imgWidth, 16rem);
+        }
+      `,
+        ];
     }
 };
 __decorate([
@@ -285,12 +101,15 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], ItemImage.prototype, "isCompactTile", void 0);
+__decorate([
+    property({ type: Boolean })
+], ItemImage.prototype, "loggedIn", void 0);
 __decorate([
     state()
 ], ItemImage.prototype, "isWaveform", void 0);
 __decorate([
-    query('.item-image')
-], ItemImage.prototype, "itemImageWaveform", void 0);
+    query('img')
+], ItemImage.prototype, "baseImage", void 0);
 ItemImage = __decorate([
     customElement('item-image')
 ], ItemImage);