@internetarchive/collection-browser - npm Package Compare versions

Comparing version 0.0.1-alpha.48 to 0.0.1-alpha.49

dist/src/restoration-state-handler.d.ts

@@ -37,2 +37,3 @@ import { SortDirection, SortParam } from '@internetarchive/search-service';
     private loadQueryStateFromUrl;
+    private stripQuotes;
 }

dist/src/restoration-state-handler.js

@@ -75,3 +75,3 @@ import { getCookie, setCookie } from 'typescript-cookie';
                     const notValue = facetState === 'hidden';
-                    const paramValue = `${facetName}:${key}`;
+                    const paramValue = `${facetName}:"${key}"`;
                     if (notValue) {
@@ -158,2 +158,3 @@ searchParams.append('not[]', paramValue);
                 const [field, value] = and.split(':');
+                const unQuotedValue = this.stripQuotes(value);
                 switch (field) {
@@ -172,4 +173,3 @@ case 'year': {
                         else {
-                            restorationState.selectedFacets[field][value] =
-                                'selected';
+                            restorationState.selectedFacets[field][unQuotedValue] = 'selected';
                         }
@@ -185,4 +185,3 @@ break;
                     default:
-                        restorationState.selectedFacets[field][value] =
-                            'selected';
+                        restorationState.selectedFacets[field][unQuotedValue] = 'selected';
                 }
@@ -194,3 +193,5 @@ });
                 const [field, value] = not.split(':');
-                restorationState.selectedFacets[field][value] = 'hidden';
+                const unQuotedValue = this.stripQuotes(value);
+                restorationState.selectedFacets[field][unQuotedValue] =
+                    'hidden';
             });
@@ -200,3 +201,10 @@ }
     }
+    // remove optional opening and closing quotes from a string
+    stripQuotes(value) {
+        if (value.startsWith('"') && value.endsWith('"')) {
+            return value.substring(1, value.length - 1);
+        }
+        return value;
+    }
 }
 //# sourceMappingURL=restoration-state-handler.js.map

dist/src/tiles/grid/item-tile.d.ts

 import { CSSResultGroup, LitElement } from 'lit';
 import { TileModel } from '../../models';
-import '../../mediatype-icon';
-import '../../waveform-thumbnail';
+import '../mediatype-icon';
+import '../item-image';
 export declare class ItemTile extends LitElement {
     model?: TileModel;
     baseNavigationUrl?: string;
-    get renderItemImageView(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
     static get styles(): CSSResultGroup;
 }

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

@@ -6,41 +6,8 @@ import { __decorate } from "tslib";
 import { formatCount } from '../../utils/format-count';
-import '../../mediatype-icon';
-import '../../waveform-thumbnail';
 import { favoriteFilledIcon } from './icons/favorite-filled';
 import { reviewsIcon } from './icons/reviews';
 import viewsIcon from './icons/views';
+import '../mediatype-icon';
+import '../item-image';
 let ItemTile = class ItemTile extends LitElement {
-    get renderItemImageView() {
-        var _a, _b, _c;
-        const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}`;
-        const containsDeemphasize = (_b = this.model) === null || _b === void 0 ? void 0 : _b.collections.includes('deemphasize');
-        const itemImageBoxClass = containsDeemphasize ? 'item-image-box' : '';
-        const itemImageClass = `item-image ${!containsDeemphasize ? 'default' : 'deemphasize'}`;
-        const tileActionClass = `tile-action no-preview${!containsDeemphasize ? ' hidden' : ''}`;
-        const isMediatypeAudio = ((_c = this.model) === null || _c === void 0 ? void 0 : _c.mediatype) === 'audio';
-        const renderView = () => {
-            var _a;
-            if (isMediatypeAudio) {
-                return html `
-          <waveform-thumbnail
-            .baseNavigationUrl=${this.baseNavigationUrl}
-            .identifier=${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}
-          >
-          </waveform-thumbnail>
-        `;
-            }
-            return html `
-        <div
-          class=${itemImageClass}
-          style="background-image:url(${imgSrcUrl})"
-        ></div>
-      `;
-        };
-        return html `
-      <div class=${itemImageBoxClass}>
-        ${renderView()}
-        <div class=${tileActionClass}>Content may be inappropriate</div>
-      </div>
-    `;
-    }
     render() {
@@ -54,3 +21,9 @@ var _a, _b, _c, _d, _e, _f, _g, _h;
           <h1 id="item-title" title=${itemTitle}>${(_c = this.model) === null || _c === void 0 ? void 0 : _c.title}</h1>
-          <div id="item-image-container">${this.renderItemImageView}</div>
+          <div id="item-image-container">
+            <item-image
+              .model=${this.model}
+              .baseNavigationUrl=${this.baseNavigationUrl}
+            >
+            </item-image>
+          </div>
           <div class="item-creator">
@@ -139,53 +112,2 @@ <div class="truncated">
 
-      .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: cover;
-        background-repeat: no-repeat;
-        background-position: center center;
-        position: relative;
-        -webkit-appearance: none;
-        overflow: visible;
-      }
-
-      .default {
-        background-size: contain;
-        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
-      }
-
-      .deemphasize {
-        background-size: cover;
-        filter: blur(15px);
-        z-index: 1;
-      }
-
-      .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;
-      }
-
       .hidden {
@@ -192,0 +114,0 @@ display: none;

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

 import { CSSResultGroup, PropertyValues, LitElement } from 'lit';
 import { TileModel } from '../models';
-import './waveform-thumbnail';
 export declare class ItemImage extends LitElement {
@@ -18,3 +17,4 @@ model?: TileModel;
     private get imageBoxClass();
+    private get randomGradient();
     static get styles(): CSSResultGroup;
 }

dist/src/tiles/item-image.js

 import { __decorate } from "tslib";
 import { css, html, nothing, LitElement, } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import './waveform-thumbnail';
+import { ifDefined } from 'lit/directives/if-defined.js';
 let ItemImage = class ItemImage extends LitElement {
@@ -24,3 +24,3 @@ constructor() {
         return html `
-      <div class=${this.imageBoxClass}>
+      <div class=${ifDefined(this.imageBoxClass)}>
         ${((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'audio'
@@ -49,7 +49,9 @@ ? this.waveformTemplate
         return html `
-      <waveform-thumbnail
-        .baseNavigationUrl=${this.baseNavigationUrl}
-        .identifier=${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}
-      >
-      </waveform-thumbnail>
+      <div class="box" id=${this.randomGradient}>
+        <img
+          class="item-image waveform"
+          src="${this.imageSrc}"
+          alt="${ifDefined((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)}"
+        />
+      </div>
     `;
@@ -70,4 +72,7 @@ }
     get imageBoxClass() {
-        return `${this.isDeemphasize ? 'item-image-box' : ''}`;
+        return this.isDeemphasize ? 'item-image-box' : undefined;
     }
+    get randomGradient() {
+        return `grad${Math.floor(Math.random() * (6 - 1) + 1)}`;
+    }
     static get styles() {
@@ -95,2 +100,6 @@ return css `
 
+      .waveform {
+        mix-blend-mode: screen;
+      }
+
       .default {
@@ -126,2 +135,56 @@ background-size: contain;
       }
+
+      #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%)
+        );
+      }
+
+      #grad6 {
+        background: linear-gradient(
+          hsl(340, 80%, 55%),
+          hsl(0, 80%, 33%) 35%,
+          hsl(0, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
     `;
@@ -128,0 +191,0 @@ }

dist/src/tiles/list/tile-list-compact.d.ts

 import { LitElement } from 'lit';
 import { SortParam } from '@internetarchive/search-service';
 import { TileModel } from '../../models';
-import '../../mediatype-icon';
+import '../mediatype-icon';
 export declare class TileListCompact extends LitElement {
@@ -6,0 +6,0 @@ model?: TileModel;

dist/src/tiles/list/tile-list-compact.js

@@ -9,3 +9,3 @@ import { __decorate } from "tslib";
 import { accountLabel } from './account-label';
-import '../../mediatype-icon';
+import '../mediatype-icon';
 let TileListCompact = class TileListCompact extends LitElement {
@@ -12,0 +12,0 @@ constructor() {

dist/src/tiles/list/tile-list.d.ts

@@ -5,3 +5,3 @@ import { LitElement, PropertyValues, TemplateResult } from 'lit';
 import { TileModel } from '../../models';
-import '../../mediatype-icon';
+import '../mediatype-icon';
 export declare class TileList extends LitElement {
@@ -8,0 +8,0 @@ model?: TileModel;

dist/src/tiles/list/tile-list.js

@@ -12,3 +12,3 @@ import { __decorate } from "tslib";
 import { formatDate } from '../../utils/format-date';
-import '../../mediatype-icon';
+import '../mediatype-icon';
 let TileList = class TileList extends LitElement {
@@ -15,0 +15,0 @@ constructor() {

package.json

@@ -6,3 +6,3 @@ {
   "author": "Internet Archive",
-  "version": "0.0.1-alpha.48",
+  "version": "0.0.1-alpha.49",
   "main": "dist/index.js",
@@ -9,0 +9,0 @@ "module": "dist/index.js",

src/restoration-state-handler.ts

@@ -120,3 +120,3 @@ import { SortDirection, SortParam } from '@internetarchive/search-service';
           const notValue = facetState === 'hidden';
-          const paramValue = `${facetName}:${key}`;
+          const paramValue = `${facetName}:"${key}"`;
           if (notValue) {
@@ -210,2 +210,4 @@ searchParams.append('not[]', paramValue);
         const [field, value] = and.split(':');
+        const unQuotedValue = this.stripQuotes(value);
+
         switch (field) {
@@ -229,4 +231,5 @@ case 'year': {
             } else {
-              restorationState.selectedFacets[field as FacetOption][value] =
-                'selected';
+              restorationState.selectedFacets[field as FacetOption][
+                unQuotedValue
+              ] = 'selected';
             }
@@ -242,4 +245,5 @@ break;
           default:
-            restorationState.selectedFacets[field as FacetOption][value] =
-              'selected';
+            restorationState.selectedFacets[field as FacetOption][
+              unQuotedValue
+            ] = 'selected';
         }
@@ -251,3 +255,5 @@ });
         const [field, value] = not.split(':');
-        restorationState.selectedFacets[field as FacetOption][value] = 'hidden';
+        const unQuotedValue = this.stripQuotes(value);
+        restorationState.selectedFacets[field as FacetOption][unQuotedValue] =
+          'hidden';
       });
@@ -257,2 +263,10 @@ }
   }
+
+  // remove optional opening and closing quotes from a string
+  private stripQuotes(value: string): string {
+    if (value.startsWith('"') && value.endsWith('"')) {
+      return value.substring(1, value.length - 1);
+    }
+    return value;
+  }
 }

src/tiles/grid/item-tile.ts

 /* eslint-disable import/no-duplicates */
 import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+
 import { TileModel } from '../../models';
 import { formatCount } from '../../utils/format-count';
 
-import '../../mediatype-icon';
-import '../../waveform-thumbnail';
-
 import { favoriteFilledIcon } from './icons/favorite-filled';
@@ -14,2 +12,5 @@ import { reviewsIcon } from './icons/reviews';
 
+import '../mediatype-icon';
+import '../item-image';
+
 @customElement('item-tile')
@@ -21,42 +22,2 @@ export class ItemTile extends LitElement {
 
-  get renderItemImageView() {
-    const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${this.model?.identifier}`;
-
-    const containsDeemphasize = this.model?.collections.includes('deemphasize');
-    const itemImageBoxClass = containsDeemphasize ? 'item-image-box' : '';
-    const itemImageClass = `item-image ${
-      !containsDeemphasize ? 'default' : 'deemphasize'
-    }`;
-    const tileActionClass = `tile-action no-preview${
-      !containsDeemphasize ? ' hidden' : ''
-    }`;
-
-    const isMediatypeAudio = this.model?.mediatype === 'audio';
-
-    const renderView = () => {
-      if (isMediatypeAudio) {
-        return html`
-          <waveform-thumbnail
-            .baseNavigationUrl=${this.baseNavigationUrl}
-            .identifier=${this.model?.identifier}
-          >
-          </waveform-thumbnail>
-        `;
-      }
-      return html`
-        <div
-          class=${itemImageClass}
-          style="background-image:url(${imgSrcUrl})"
-        ></div>
-      `;
-    };
-
-    return html`
-      <div class=${itemImageBoxClass}>
-        ${renderView()}
-        <div class=${tileActionClass}>Content may be inappropriate</div>
-      </div>
-    `;
-  }
-
   render() {
@@ -70,3 +31,9 @@ const itemTitle = this.model?.title || '';
           <h1 id="item-title" title=${itemTitle}>${this.model?.title}</h1>
-          <div id="item-image-container">${this.renderItemImageView}</div>
+          <div id="item-image-container">
+            <item-image
+              .model=${this.model}
+              .baseNavigationUrl=${this.baseNavigationUrl}
+            >
+            </item-image>
+          </div>
           <div class="item-creator">
@@ -157,53 +124,2 @@ <div class="truncated">
 
-      .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: cover;
-        background-repeat: no-repeat;
-        background-position: center center;
-        position: relative;
-        -webkit-appearance: none;
-        overflow: visible;
-      }
-
-      .default {
-        background-size: contain;
-        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
-      }
-
-      .deemphasize {
-        background-size: cover;
-        filter: blur(15px);
-        z-index: 1;
-      }
-
-      .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;
-      }
-
       .hidden {
@@ -210,0 +126,0 @@ display: none;

src/tiles/list/tile-list-compact.ts

@@ -10,3 +10,3 @@ import { css, html, LitElement, nothing } from 'lit';
 import { accountLabel } from './account-label';
-import '../../mediatype-icon';
+import '../mediatype-icon';
 
@@ -13,0 +13,0 @@ @customElement('tile-list-compact')

src/tiles/list/tile-list.ts

@@ -21,3 +21,3 @@ import {
 import { formatDate, DateFormat } from '../../utils/format-date';
-import '../../mediatype-icon';
+import '../mediatype-icon';
 
@@ -24,0 +24,0 @@ @customElement('tile-list')

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1238768

increased by33.64%

Number of package files

268

increased by5.93%

Lines of code

14392

increased by6.1%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes