@internetarchive/collection-browser 0.2.1 → 0.2.4-alpha.1

package/package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "0.2.1",
+  "version": "0.2.4-alpha.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
@@ -25,7 +25,7 @@
     "@internetarchive/feature-feedback": "^0.1.2",
     "@internetarchive/field-parsers": "^0.1.3",
     "@internetarchive/histogram-date-range": "^0.1.6",
-    "@internetarchive/infinite-scroller": "^0.1.2",
+    "@internetarchive/infinite-scroller": "^0.1.3",
     "@internetarchive/local-cache": "^0.2.1",
     "@internetarchive/search-service": "^0.3.4",
     "@internetarchive/shared-resize-observer": "^0.2.0",

package/src/{tiles/grid → assets/img}/icons/views.ts

@@ -1,6 +1,6 @@
 import { svg } from 'lit';
 
-export default svg`
+export const viewsIcon = svg`
   <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
     <path
       d="m98 50.5704143c-.2830293-.471515-.671154-1.1088947-1.1643742-1.9121392s-1.6003642-2.3617474-3.3214321-4.6755089c-1.7210678-2.3137614-3.522258-4.5325939-5.4035703-6.6564975-1.8813124-2.1239037-4.2828993-4.473133-7.2047606-7.0476881-2.9218612-2.5745551-5.8895067-4.7933876-8.9029363-6.6564976-3.0134295-1.86311-6.4628491-3.4330878-10.3482587-4.7099336-3.8854095-1.2768458-7.7822651-1.9142256-11.6905667-1.9121443-3.9083017.0020914-7.8051573.6154781-11.6905668 1.8401652-3.8854096 1.2246871-7.3702078 2.8301329-10.4543947 4.8163375-3.0841869 1.9862045-6.0278997 4.1695691-8.8311384 6.5500937s-5.2048256 4.7652219-7.2047605 7.1540919c-1.99993501 2.38887-3.75430043 4.5722346-5.26309632 6.5500938s-2.63883199 3.583305-3.39010829 4.8163374l-1.13003609 1.8401602c.2830293.4715149.67115403 1.1088946 1.16437421 1.9121391.49322017.8032445 1.5878776 2.3617475 3.28397229 4.6755089s3.47439274 4.521119 5.3348942 6.6220728c1.8605014 2.1009538 4.2506422 4.4387083 7.1704224 7.0132633 2.9197801 2.5745551 5.8874256 4.7819127 8.9029363 6.6220729 3.0155106 1.8401601 6.4774168 3.398663 10.3857184 4.6755088 3.9083017 1.2768458 7.8176438 1.9142256 11.7280266 1.9121443 3.9103827-.0020914 7.7957922-.6154781 11.6562286-1.8401652s7.3337886-2.818658 10.4200566-4.7819127 6.0299808-4.1351444 8.8311384-6.515669 5.2152311-4.7652219 7.2422203-7.1540919 3.8052873-4.5607597 5.3348942-6.515669c1.5296068-1.9549093 2.6721295-3.5488802 3.427568-4.7819127zm-24.5142913 0c0 6.467683-2.3079374 12.0152859-6.9238123 16.6428087s-10.1495139 6.9412843-16.600917 6.9412843c-6.4992683 0-12.0453939-2.3137615-16.6383767-6.9412843s-6.8894742-10.1751257-6.8894742-16.6428087 2.2964914-12.003811 6.8894742-16.608384 10.1391084-6.9068595 16.6383767-6.9068595c6.4534842 0 11.9871232 2.3022865 16.600917 6.9068595s6.9217312 10.140701 6.9238123 16.608384zm-23.5247293-10.552755c2.8261308 0 5.2870289 1.0619518 7.3826944 3.1858555 2.0956655 2.1239036 3.1434982 4.5795368 3.1434982 7.3668995 0 2.8332624-1.0478327 5.2888956-3.1434982 7.3668995-2.0956655 2.078004-4.5565636 3.1170059-7.3826944 3.1170059-2.873996 0-5.3348941-1.0264838-7.3826944-3.0794516-2.0478002-2.0529677-3.0717003-4.5200758-3.0717003-7.4013243 0-2.8332624 1.0239001-5.3003705 3.0717003-7.4013243 2.0478003-2.1009538 4.5086984-3.1514307 7.3826944-3.1514307z"

package/src/mediatype/mediatype-config.ts

@@ -19,12 +19,12 @@ export const mediatypeConfig: { [key: string]: any } = {
     text: 'Account',
   },
   audio: {
-    color: '#8fdaef',
+    color: '#00adef',
     icon: audioIcon,
     text: 'Audio',
   },
   collection: {
-    color: '#000000',
+    color: '#4666ff',
     icon: collectionIcon,
     text: 'Collection',
   },
@@ -34,7 +34,7 @@ export const mediatypeConfig: { [key: string]: any } = {
     text: 'Data',
   },
   etree: {
-    color: '#3871c1',
+    color: '#00adef',
     icon: etreeIcon,
     text: 'E-tree',
   },
@@ -44,12 +44,12 @@ export const mediatypeConfig: { [key: string]: any } = {
     text: 'Film',
   },
   image: {
-    color: '#62c4a9',
+    color: '#aa99c9',
     icon: imagesIcon,
     text: 'Image',
   },
   movies: {
-    color: '#bf1b2c',
+    color: '#f1644b',
     icon: filmIcon,
     text: 'Movie',
   },
@@ -59,27 +59,27 @@ export const mediatypeConfig: { [key: string]: any } = {
     text: 'Radio',
   },
   software: {
-    color: '#80cc28',
+    color: '#9ecc4f',
     icon: softwareIcon,
     text: 'Software',
   },
   texts: {
-    color: '#f9a72b',
+    color: '#faab3c',
     icon: textsIcon,
     text: 'Text',
   },
   tv: {
-    color: '#f25d54',
+    color: '#f1644b',
     icon: tvIcon,
     text: 'TV',
   },
   video: {
-    color: '#bf1b2c',
+    color: '#f1644b',
     icon: videoIcon,
     text: 'Video',
   },
   web: {
-    color: '#fddd10',
+    color: '#ffcd27',
     icon: webIcon,
     text: 'Web',
   },

package/src/sort-filter-bar/sort-filter-bar.ts

@@ -359,6 +359,7 @@ export class SortFilterBar
               this.displayMode = 'grid';
             }}
             class=${this.displayMode === 'grid' ? 'active' : ''}
+            title="Tile view"
           >
             ${tileIcon}
           </button>
@@ -370,6 +371,7 @@ export class SortFilterBar
               this.displayMode = 'list-detail';
             }}
             class=${this.displayMode === 'list-detail' ? 'active' : ''}
+            title="Extended list view"
           >
             ${listIcon}
           </button>
@@ -381,6 +383,7 @@ export class SortFilterBar
               this.displayMode = 'list-compact';
             }}
             class=${this.displayMode === 'list-compact' ? 'active' : ''}
+            title="Compact list view"
           >
             ${compactIcon}
           </button>

package/src/tiles/grid/account-tile.ts

@@ -2,10 +2,7 @@ import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { TileModel } from '../../models';
 
-import { accountIcon } from './icons/account';
-import { favoriteFilledIcon } from './icons/favorite-filled';
-import { reviewsIcon } from './icons/reviews';
-import { uploadIcon } from './icons/upload';
+import './tile-stats';
 
 @customElement('account-tile')
 export class AccountTile extends LitElement {
@@ -14,43 +11,37 @@ export class AccountTile extends LitElement {
   render() {
     return html`
       <div class="outer-holder">
+        <div id="header-holder">
+          <div id="title-holder">
+            <h1 class="truncated">${this.model?.identifier}</h1>
+          </div>
+        </div>
+
         <div class="inner-holder">
-          <div id="header-holder">
-            <div id="title-holder">
-              <h1 class="truncated">${this.model?.identifier}</h1>
-            </div>
-            <div id="avatar-holder">
-              <div
-                id="avatar"
-                style="background-image: url('https://archive.org/services/img/${this
-                  .model?.identifier}')"
-              ></div>
-            </div>
+          <div id="avatar-holder">
+            <img
+              id="avatar"
+              alt="patron-avatar"
+              src="https://archive.org/services/img/${this.model?.identifier}"
+            />
           </div>
+
           <div id="year-holder">
             <div id="archivist-since">
-              <h3>Archivist Since</h3>
-            </div>
-            <div id="year-holder">
-              <h3>${this.model?.dateAdded?.getFullYear()}</h3>
-            </div>
-          </div>
-          <div id="status-holder">
-            <div id="patron-icon">${accountIcon}</div>
-            <div class="stat-icon">
-              ${uploadIcon}
-              <h3>${this.model?.itemCount}</h3>
-            </div>
-            <div class="stat-icon">
-              ${favoriteFilledIcon}
-              <h3>${this.model?.favCount}</h3>
-            </div>
-            <div class="stat-icon">
-              ${reviewsIcon}
-              <h3>${this.model?.commentCount}</h3>
+              <span>
+                Archivist since ${this.model?.dateAdded?.getFullYear()}
+              </span>
             </div>
           </div>
         </div>
+
+        <tile-stats
+          .mediatype=${this.model?.mediatype}
+          .itemCount=${this.model?.itemCount}
+          .favCount=${this.model?.favCount}
+          .commentCount=${this.model?.commentCount}
+        >
+        </tile-stats>
       </div>
     `;
   }
@@ -63,9 +54,8 @@ export class AccountTile extends LitElement {
         margin: 0;
       }
 
-      h3 {
+      span {
         font-size: 14px;
-        font-weight: bold;
         color: #2c2c2c;
         margin: 0px;
       }
@@ -77,27 +67,22 @@ export class AccountTile extends LitElement {
         box-shadow: 1px 1px 2px 0px;
         height: 100%;
         display: flex;
+        flex-direction: column;
         text-align: center;
         width: 100%;
       }
 
       .inner-holder {
-        padding: 5px;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-      }
-
-      #header-holder {
-        flex: 1;
+        flex-grow: 1;
       }
 
       #title-holder {
+        flex-shrink: 0;
         height: 40px;
-        margin-bottom: 5px;
       }
 
       #avatar-holder {
+        margin-top: 5px;
         margin-bottom: 5px;
         display: flex;
         align-items: center;
@@ -117,22 +102,6 @@ export class AccountTile extends LitElement {
         height: 40px;
       }
 
-      #year-holder {
-        margin: 0px;
-      }
-
-      #status-holder {
-        height: 25px;
-        display: flex;
-        justify-content: space-evenly;
-        line-height: initial;
-      }
-
-      #patron-icon {
-        height: 25px;
-        width: 25px;
-      }
-
       .truncated {
         flex: 1;
         min-width: 0; /* Important for long words! */
@@ -142,15 +111,9 @@ export class AccountTile extends LitElement {
         display: -webkit-box;
         -webkit-box-orient: vertical;
         word-wrap: break-word;
-        word-break: break-all;
         line-height: 2rem;
         text-align: center;
       }
-
-      .stat-icon {
-        height: 10px;
-        width: 10px;
-      }
     `;
   }
 }

package/src/tiles/grid/item-tile.ts

@@ -1,16 +1,13 @@
 /* eslint-disable import/no-duplicates */
 import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { TileModel } from '../../models';
-import { formatCount } from '../../utils/format-count';
-
-import { favoriteFilledIcon } from './icons/favorite-filled';
-import { reviewsIcon } from './icons/reviews';
-import viewsIcon from './icons/views';
 
 import '../mediatype-icon';
 import '../item-image';
+import './tile-stats';
 
 @customElement('item-tile')
 export class ItemTile extends LitElement {
@@ -19,84 +16,74 @@ export class ItemTile extends LitElement {
   @property({ type: String }) baseImageUrl?: string;
 
   render() {
-    const itemTitle = this.model?.title || nothing;
+    const itemTitle = this.model?.title;
     const itemCreator = this.model?.creator;
     return html`
       <div id="container">
-        <div id="title-image-container">
-          <h1 id="item-title" title=${itemTitle}>${itemTitle}</h1>
-          <div id="item-image-container">
-            <item-image .model=${this.model} .baseImageUrl=${this.baseImageUrl}>
-            </item-image>
-          </div>
-          <div class="item-creator">
-            <div class="truncated">
-              ${itemCreator
-                ? html`<span>by&nbsp;${itemCreator}</span>`
-                : nothing}
-            </div>
+        <div id="inner-wrapper">
+          <div class="title-wrapper">
+            <h1 id="item-title" title=${ifDefined(itemTitle)}>${itemTitle}</h1>
           </div>
-        </div>
 
-        <div class="hr"></div>
-
-        <div id="item-stats-container">
-          <div id="stats-holder">
-            <div class="col">
-              <mediatype-icon
-                .mediatype=${this.model?.mediatype}
-                .collection=${this.model?.collections}
-                style="--iconHeight:25px; --iconWidth:25px;"
-              >
-              </mediatype-icon>
-            </div>
-            <div class="col">
-              ${viewsIcon}
-              <p class="status-text">
-                ${formatCount(this.model?.viewCount, 'short', 'short')}
-              </p>
+          <div class="image-wrapper">
+            <div id="item-image-container">
+              <item-image
+                .model=${this.model}
+                .baseImageUrl=${this.baseImageUrl}>
+              </item-image>
             </div>
-            <div class="col">
-              ${favoriteFilledIcon}
-              <p class="status-text">
-                ${formatCount(this.model?.itemCount, 'short', 'short')}
-              </p>
-            </div>
-            <div class="col">
-              ${reviewsIcon}
-              <p class="status-text">
-                ${formatCount(this.model?.favCount, 'short', 'short')}
-              </p>
+            <div class="item-creator">
+              <div class="truncated">
+                ${
+                  itemCreator
+                    ? html`<span>by&nbsp;${itemCreator}</span>`
+                    : nothing
+                }
+              </div>
             </div>
           </div>
         </div>
+
+        <tile-stats 
+          .mediatype=${this.model?.mediatype}
+          .viewCount=${this.model?.viewCount}
+          .favCount=${this.model?.favCount}
+          .commentCount=${this.model?.commentCount}>
+        </tile-stats>
+        </div>
       </div>
     `;
   }
 
   static get styles(): CSSResultGroup {
-    const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;
-
     return css`
       #container {
         background-color: #ffffff;
-        border-radius: ${cornerRadiusCss};
+        border-radius: var(--collectionTileCornerRadius, 4px);
         box-shadow: 1px 1px 2px 0px;
         display: flex;
         flex-direction: column;
         height: 100%;
-        position: relative;
       }
 
-      #title-image-container {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        padding: 0.5rem 0.5rem 0 0.5rem;
+      #inner-wrapper {
+        padding-top: 5px;
+        padding-left: 5px;
+        padding-right: 5px;
+      }
+
+      .title-wrapper {
+        flex-shrink: 0;
+      }
+
+      .image-wrapper {
+        flex-grow: 1;
       }
 
       #item-title {
+        flex: 1;
         color: #2c2c2c;
+        min-width: 0; /* Important for long words! */
         font-size: 1.6rem;
         text-align: center;
         margin-top: 0rem;
@@ -104,6 +91,7 @@ export class ItemTile extends LitElement {
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
+        word-wrap: break-word;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         line-height: 2rem;
@@ -114,6 +102,7 @@ export class ItemTile extends LitElement {
         display: flex;
         justify-content: center;
         flex: 1;
+        height: 16rem;
       }
 
       .hidden {
@@ -139,6 +128,7 @@ export class ItemTile extends LitElement {
         align-items: flex-end; /* Important to start text from bottom */
         height: 3rem;
         padding-top: 1rem;
+        margin-top: 5px;
       }
 
       .truncated {
@@ -158,44 +148,6 @@ export class ItemTile extends LitElement {
         line-height: 2rem;
         text-align: center;
       }
-
-      .hr {
-        border: 0.5px solid #ccc;
-      }
-
-      #item-stats-container {
-        align-items: center;
-        display: flex;
-        height: 5.5rem;
-        padding-left: 1rem;
-        padding-right: 0.5rem;
-      }
-
-      #stats-holder {
-        align-items: center;
-        display: flex;
-        flex: 1;
-        justify-content: space-evenly;
-        text-align: center;
-        width: 100%;
-      }
-
-      svg {
-        height: 10px;
-        width: 10px;
-      }
-
-      .status-text {
-        font-size: 14px;
-        color: #2c2c2c;
-        margin: auto;
-        display: block;
-        text-align: center;
-      }
-
-      .col {
-        width: 25%;
-      }
     `;
   }
 }

package/src/tiles/grid/tile-stats.ts

@@ -0,0 +1,109 @@
+import { css, CSSResultGroup, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled';
+import { reviewsIcon } from '../../assets/img/icons/reviews';
+import { uploadIcon } from '../../assets/img/icons/upload';
+import { viewsIcon } from '../../assets/img/icons/views';
+
+import { formatCount } from '../../utils/format-count';
+
+@customElement('tile-stats')
+export class TileStats extends LitElement {
+  @property({ type: String }) mediatype?: string;
+
+  @property({ type: Number }) itemCount?: number;
+
+  @property({ type: Number }) viewCount?: number;
+
+  @property({ type: Number }) favCount?: number;
+
+  @property({ type: Number }) commentCount?: number;
+
+  render() {
+    return html`
+      <div class="stats-wrapper">
+        <div class="hr"></div>
+
+        <div id="stats-holder">
+          <div class="col">
+            <mediatype-icon
+              .mediatype=${this.mediatype}
+              style="--iconHeight:25px; --iconWidth:25px;"
+            >
+            </mediatype-icon>
+          </div>
+          <div class="col">
+            ${this.mediatype === 'account' ? uploadIcon : viewsIcon}
+            <p class="status-text">
+              ${formatCount(
+                this.mediatype === 'account' ? this.itemCount : this.viewCount,
+                'short',
+                'short'
+              )}
+            </p>
+          </div>
+          <div class="col">
+            ${favoriteFilledIcon}
+            <p class="status-text">
+              ${formatCount(this.favCount, 'short', 'short')}
+            </p>
+          </div>
+          <div class="col">
+            ${reviewsIcon}
+            <p class="status-text">
+              ${formatCount(this.commentCount, 'short', 'short')}
+            </p>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .stats-wrapper {
+        height: 35px;
+        flex-shrink: 0;
+      }
+
+      .hr {
+        display: block;
+        border-top: 1px solid #bbb;
+      }
+
+      #stats-holder {
+        align-items: center;
+        display: flex;
+        flex: 1;
+        justify-content: space-evenly;
+        text-align: center;
+        width: 100%;
+        padding-top: 4px;
+        padding-bottom: 5px;
+      }
+
+      .col {
+        width: 25%;
+        height: 25px;
+      }
+
+      svg {
+        height: 10px;
+        width: 10px;
+        display: block;
+        margin: auto;
+      }
+
+      .status-text {
+        font-size: 14px;
+        height: 15px;
+        color: #2c2c2c;
+        line-height: 15px;
+        margin: auto;
+        display: block;
+        text-align: center;
+      }
+    `;
+  }
+}

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

@@ -45,7 +45,6 @@ export class TileListCompact extends LitElement {
           <mediatype-icon
             .mediatype=${this.model?.mediatype}
             .collections=${this.model?.collections}
-            style="--iconCustomFillColor: ${ifDefined(this.collectionColor)}"
           >
           </mediatype-icon>
         </div>
@@ -56,14 +55,6 @@ export class TileListCompact extends LitElement {
     `;
   }
 
-  // Only in list, not tile
-  private get collectionColor() {
-    if (this.model?.mediatype !== 'collection') {
-      return undefined;
-    }
-    return '#4666FF';
-  }
-
   private get imageTemplate() {
     if (!this.model?.identifier) {
       return nothing;

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

@@ -159,21 +159,12 @@ export class TileList extends LitElement {
         <mediatype-icon
           .mediatype=${this.model?.mediatype}
           .collections=${this.model?.collections}
-          style="--iconCustomFillColor: ${ifDefined(this.collectionColor)}"
         >
         </mediatype-icon>
       </div>
     `;
   }
 
-  // Only in list, not tile
-  private get collectionColor() {
-    if (this.model?.mediatype !== 'collection') {
-      return undefined;
-    }
-    return '#4666FF';
-  }
-
   private get titleTemplate() {
     if (!this.model?.title) {
       return nothing;

package/src/tiles/mediatype-icon.ts

@@ -50,6 +50,10 @@ export class MediatypeIcon extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
+      #icon {
+        height: var(--iconHeight, 25px);
+      }
+
       .status-text {
         font-size: 14px;
         color: #2c2c2c;
@@ -68,7 +72,7 @@ export class MediatypeIcon extends LitElement {
       }
 
       .fill-color {
-        fill: var(--iconCustomFillColor, var(--iconFillColor, '#000000'));
+        fill: var(--iconFillColor, '#000000');
       }
     `;
   }

package/dist/src/tiles/grid/icons/account.d.ts

@@ -1 +0,0 @@
-export declare const accountIcon: import("lit-html").TemplateResult<2>;