@internetarchive/collection-browser 0.4.3-alpha.9 → 0.4.4-alpha

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

@@ -5,7 +5,6 @@ import { css } from 'lit';
  */
 export const baseItemImageStyles = css`
   .drop-shadow {
-    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
     overflow: hidden;
     height: 100%;
   }
@@ -30,11 +29,22 @@ export const baseItemImageStyles = css`
 
   .blur {
     filter: blur(15px);
-    box-shadow: 1px 1px 2px 0px;
+    box-shadow: 1px 1px 2px 0;
   }
 
-  .radius50 {
+  .account-image {
+    object-fit: cover;
+    background-position: 50% 50%;
     border-radius: 50%;
+    width: 160px;
+    height: 160px;
+  }
+
+  .collection-image {
+    object-fit: cover;
+    border-radius: 8px;
+    width: 100%;
+    height: 160px;
   }
 `;
 

package/src/tiles/collection-browser-loading-tile.ts

@@ -16,7 +16,7 @@ export class CollectionBrowserLoadingTile extends LitElement {
 
       #container {
         background: linear-gradient(to right bottom, #dddddd, #d8d8d8);
-        border-radius: var(--collectionTileCornerRadius, 4px);
+        border-radius: var(--tileCornerRadius, 4px);
         background-size: 100% 100%;
         display: block;
         height: 100%;

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

@@ -63,11 +63,13 @@ export class AccountTile extends LitElement {
    * CSS
    */
   static get styles() {
+    const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;
+
     return [
       baseTileStyles,
       css`
-        image-block {
-          --imageBlockBackgroundColor: #fcf5e6;
+        .container {
+          border: 1px solid ${tileBorderColor};
         }
       `,
     ];

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

@@ -1,156 +1,126 @@
-import { msg } from '@lit/localize';
-import { css, CSSResultGroup, html, LitElement } from 'lit';
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
 import type { TileModel } from '../../models';
+import { formatUnitSize } from '../../utils/format-unit-size';
+import { baseTileStyles } from './styles/tile-grid-shared-styles';
+import '../image-block';
 
 @customElement('collection-tile')
 export class CollectionTile extends LitElement {
   @property({ type: Object }) model?: TileModel;
 
+  @property({ type: String }) baseImageUrl?: string;
+
   render() {
     return html`
-      <div id="container">
-        <div id="collection-image-title">
-          <div id="collection-title">${this.model?.title}</div>
-          <div id="collection-image-container">
-            <div
-              id="collection-image"
-              style="background-image:url('https://archive.org/services/img/${this
-                .model?.identifier}')"
-            ></div>
+      <div class="container">
+        <div class="tile-details">
+          <div class="item-info">
+            ${this.getImageBlockTemplate} ${this.getTitleTemplate}
           </div>
         </div>
-        <div id="item-count-container">
-          <div id="item-count-image-container">${collectionIcon}</div>
-          <div id="item-count-stacked-text">
-            <div id="item-count">${this.model?.itemCount.toLocaleString()}</div>
-            <div id="items-text">${msg('items')}</div>
-          </div>
+
+        ${this.getTileStatsTemplate}
+      </div>
+    `;
+  }
+
+  private get getImageBlockTemplate(): TemplateResult {
+    return html`
+      <image-block
+        .model=${this.model}
+        .baseImageUrl=${this.baseImageUrl}
+        .viewSize=${'grid'}
+      >
+      </image-block>
+    `;
+  }
+
+  private get getTitleTemplate() {
+    return html`<div id="title">
+      <h1 class="truncated">${this.model?.title}</h1>
+    </div>`;
+  }
+
+  private get getTileStatsTemplate() {
+    return html`
+      <div id="item-stats">
+        <div id="item-mediatype">${collectionIcon}</div>
+
+        <div id="stats-row">
+          ${this.getItemsTemplate} ${this.getSizeTemplate}
         </div>
       </div>
     `;
   }
 
+  private get getItemsTemplate() {
+    const collectionItems = this.model?.itemCount.toLocaleString();
+
+    return html`<span id="item-count"
+      >${collectionItems} item${Number(collectionItems) !== 1 ? 's' : ''}</span
+    >`;
+  }
+
+  private get getSizeTemplate() {
+    const collectionSize = this.model?.collectionSize ?? 0;
+
+    return collectionSize
+      ? html`<span id="item-size">${formatUnitSize(collectionSize, 1)}</span>`
+      : ``;
+  }
+
   static get styles(): CSSResultGroup {
-    const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;
-
-    return css`
-      #collection-image-container {
-        display: flex;
-        justify-content: center;
-        flex: 1;
-      }
-
-      #collection-image {
-        width: 16rem;
-        height: 16rem;
-        border-radius: 0.8rem;
-        overflow: hidden;
-        box-shadow: 1px 1px 2px 0px;
-        object-fit: cover;
-        background-position: center;
-        background-size: cover;
-      }
-
-      #item-count-image-container svg {
-        filter: invert(100%);
-      }
-
-      #collection-image-title {
-        background-color: #666;
-        border: 1px solid #2c2c2c;
-        padding: 0.5rem;
-        border-top-left-radius: ${cornerRadiusCss};
-        border-top-right-radius: ${cornerRadiusCss};
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-      }
-
-      #collection-title {
-        font-weight: bold;
-        color: #fff;
-        font-size: 1.6rem;
-        text-align: center;
-        margin-bottom: 0.5rem;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        line-height: 2rem;
-        height: 4rem;
-      }
-
-      #container {
-        box-shadow: 1px 1px 2px 0px;
-        border-radius: ${cornerRadiusCss};
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-      }
-
-      #container:hover > #collection-image-title > #collection-title {
-        text-decoration: underline;
-      }
-
-      /* this is a workaround for Safari 15 where the hover effects are not working */
-      #collection-image-title:hover > #collection-title {
-        text-decoration: underline;
-      }
-
-      #container:hover > #collection-image-title {
-        background-color: #757575;
-      }
-
-      #item-count-container {
-        background-color: #444;
-        border-bottom: 1px solid #2c2c2c;
-        border-left: 1px solid #2c2c2c;
-        border-right: 1px solid #2c2c2c;
-        border-bottom-left-radius: ${cornerRadiusCss};
-        border-bottom-right-radius: ${cornerRadiusCss};
-        display: flex;
-        padding: 0rem 0.5rem;
-        height: 5.5rem;
-        align-items: center;
-      }
-
-      #item-count-image-container {
-        margin-right: 0.5rem;
-      }
-
-      #item-count-stacked-text {
-        display: flex;
-        align-items: baseline;
-        color: #fff;
-      }
-      #item-count-image-container svg {
-        height: 2.5rem;
-        align-items: baseline;
-      }
-
-      #container:hover > #item-count-container {
-        background-color: #575757;
-      }
-
-      #item-count {
-        font-size: 1.4rem;
-        font-weight: bold;
-      }
-
-      #item-count-image {
-        width: 3rem;
-        height: 3rem;
-        margin-right: 1rem;
-      }
-
-      #items-text {
-        font-size: 1.4rem;
-        font-weight: bold;
-        margin-left: 0.5rem;
-      }
-    `;
+    const tileBorderColor = css`var(--tileBorderColor, #555555)`;
+    const tileBackgroundColor = css`var(--tileBackgroundColor, #666666)`;
+    const whiteColor = css`#fff`;
+
+    return [
+      baseTileStyles,
+      css`
+        .container {
+          background-color: ${tileBackgroundColor};
+          border: 1px solid ${tileBorderColor};
+        }
+
+        .item-info {
+          flex-grow: initial;
+        }
+
+        h1.truncated {
+          color: ${whiteColor};
+        }
+
+        #item-mediatype svg {
+          filter: invert(100%);
+          height: 2.5rem;
+          align-items: baseline;
+        }
+
+        .container:hover > #title {
+          text-decoration: underline;
+        }
+
+        /* this is a workaround for Safari 15 where the hover effects are not working */
+        image-block:hover > #title {
+          text-decoration: underline;
+        }
+
+        #item-stats {
+          display: flex;
+          padding: 0 5px 5px;
+          align-items: center;
+        }
+
+        #stats-row {
+          display: flex;
+          align-items: baseline;
+          color: ${whiteColor};
+          flex-direction: column;
+          margin-left: 10px;
+        }
+      `,
+    ];
   }
 }

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

@@ -98,6 +98,7 @@ export class ItemTile extends LitElement {
   private get sortedDateInfoTemplate() {
     let sortedValue;
 
+    // console.log('model: ', this.model)
     switch (this.sortParam?.field) {
       case 'date':
         sortedValue = { field: 'published', value: this.model?.datePublished };
@@ -115,6 +116,9 @@ export class ItemTile extends LitElement {
         break;
     }
 
+    if (!sortedValue?.value) {
+      return nothing;
+    }
     return html`
       <div class="date-sorted-by truncated">
         <span>
@@ -159,11 +163,13 @@ export class ItemTile extends LitElement {
    * CSS
    */
   static get styles(): CSSResultGroup {
+    const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;
+
     return [
       baseTileStyles,
       css`
-        image-block {
-          --imageBlockBackgroundColor: #f1f1f4;
+        .container {
+          border: 1px solid ${tileBorderColor};
         }
 
         text-snippet-block {

package/src/tiles/grid/styles/tile-grid-shared-styles.ts

@@ -4,8 +4,8 @@ import { css } from 'lit';
  * Base tile styles
  */
 
-const tileCornerRadius = css`var(--collectionTileCornerRadius, 4px)`;
 const tileBackgroundColor = css`var(--tileBackgroundColor, #ffffff)`;
+const tileCornerRadius = css`var(--tileCornerRadius, 4px)`;
 
 export const baseTileStyles = css`
   .container {
@@ -31,6 +31,7 @@ export const baseTileStyles = css`
     flex-direction: column;
     height: 100%;
     row-gap: 10px;
+    font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
   }
 
   .item-info {
@@ -41,6 +42,7 @@ export const baseTileStyles = css`
     flex-shrink: 0;
     padding-left: 5px;
     padding-right: 5px;
+    margin-bottom: 10px;
   }
 
   .created-by,
@@ -50,7 +52,7 @@ export const baseTileStyles = css`
     display: flex;
     justify-content: left;
     align-items: flex-end; /* Important to start text from bottom */
-    padding: 10px 5px 0px 5px;
+    padding: 0 5px 5px 5px;
   }
 
   .truncated {
@@ -72,6 +74,7 @@ export const baseTileStyles = css`
     line-height: 15px;
     font-size: 14px;
     font-weight: 500;
+    padding-bottom: 1px;
   }
 
   span {
@@ -82,6 +85,7 @@ export const baseTileStyles = css`
     word-wrap: break-word;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
+    padding-bottom: 1px;
   }
 
   .container:hover > .tile-details > .item-info > #title > .truncated {

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

@@ -103,6 +103,7 @@ export class TileStats extends LitElement {
         height: 35px;
         padding-left: 5px;
         padding-right: 5px;
+        font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
       }
 
       #stats-row {

package/src/tiles/image-block.ts

@@ -44,6 +44,7 @@ export class ImageBlock extends LitElement {
     return {
       list: this.isListTile && !this.isCompactTile,
       'list-compact': this.isListTile && this.isCompactTile,
+      collection: this.model?.mediatype === 'collection', // fill the image in container
       [this.viewSize]: true,
     };
   }
@@ -82,7 +83,6 @@ export class ImageBlock extends LitElement {
 
   static get styles(): CSSResultGroup {
     const imageBlockBackgroundColor = css`var(--imageBlockBackgroundColor, #f1f1f4)`;
-    const imageBlockBorderColor = css`var(--imageBlockBorderColor, #dddddd)`;
 
     return css`
       div {
@@ -90,7 +90,6 @@ export class ImageBlock extends LitElement {
         justify-content: center;
         position: relative;
         background-color: ${imageBlockBackgroundColor};
-        border: 1px solid ${imageBlockBorderColor};
       }
 
       .grid {
@@ -100,6 +99,10 @@ export class ImageBlock extends LitElement {
         padding: 5px;
       }
 
+      .collection.grid {
+        display: block;
+      }
+
       /** tile-list view */
       .list.desktop {
         width: 100px;

package/src/tiles/item-image.ts

@@ -81,14 +81,15 @@ export class ItemImage extends LitElement {
       cover: this.isCompactTile,
       blur: toBlur || false,
       waveform: this.isWaveform,
-      radius50: this.itemImageRadius,
+      'account-image': this.isAccountImage, // for account tile image
+      'collection-image': this.model?.mediatype === 'collection', // for collection tile image
     };
   }
 
   /**
-   * Helper function to determine if border radius is needed
+   * Helper function to determine if account tile image
    */
-  private get itemImageRadius() {
+  private get isAccountImage() {
     return (
       this.model?.mediatype === 'account' &&
       !this.isCompactTile &&

package/src/tiles/tile-dispatcher.ts

@@ -143,6 +143,7 @@ export class TileDispatcher
           case 'collection':
             return html`<collection-tile
               .model=${model}
+              .baseImageUrl=${this.baseImageUrl}
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
             >
@@ -204,6 +205,22 @@ export class TileDispatcher
         height: 100%;
       }
 
+      collection-tile {
+        --tileBorderColor: #555555;
+        --tileBackgroundColor: #666666;
+        --imageBlockBackgroundColor: #666666;
+      }
+
+      account-tile {
+        --tileBorderColor: #dddddd;
+        --imageBlockBackgroundColor: #fcf5e6;
+      }
+
+      item-tile {
+        --tileBorderColor: #dddddd;
+        --imageBlockBackgroundColor: #f1f1f4;
+      }
+
       #container {
         height: 100%;
       }

package/src/utils/format-unit-size.ts

@@ -0,0 +1,43 @@
+/*
+ * Replaces Petabox www/common/Util::humanSize()
+ */
+import { nothing } from 'lit';
+
+enum unitSizes {
+  'bytes',
+  'kilobytes',
+  'megabytes',
+  'gigabytes',
+  'terabytes',
+  'petabytes',
+  'exabytes',
+  'zettabytes',
+  'yottabytes',
+}
+
+export function formatUnitSize(
+  size: number | undefined,
+  nDecimals: number,
+  separator: string = ' '
+) {
+  let itemSize = size;
+  if (itemSize === undefined) return nothing; // early return.
+
+  let unitIndex = 0;
+
+  // convert byte to highest possible unit
+  while (itemSize > 1024) {
+    itemSize /= 1024;
+    unitIndex += 1;
+  }
+
+  const magnitude = 10 ** nDecimals;
+  itemSize = Math.round(itemSize * magnitude) / magnitude;
+
+  let unitText = unitSizes[unitIndex];
+
+  // convert plural to singular.
+  unitText = itemSize === 1 ? unitText.slice(0, -1) : unitText;
+
+  return `${itemSize.toLocaleString() + separator + unitText}`;
+}

package/test/item-image.test.ts

@@ -21,6 +21,8 @@ const testBookModel: TileModel = {
   viewCount: 0,
   loginRequired: false,
   contentWarning: false,
+  collectionFilesCount: 0,
+  collectionSize: 0,
 };
 
 const testAudioModel: TileModel = {
@@ -36,6 +38,8 @@ const testAudioModel: TileModel = {
   viewCount: 0,
   loginRequired: false,
   contentWarning: false,
+  collectionFilesCount: 0,
+  collectionSize: 0,
 };
 
 describe('ItemImage component', () => {

package/test/tiles/grid/collection-tile.test.ts

@@ -0,0 +1,85 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import type { CollectionTile } from '../../../src/tiles/grid/collection-tile';
+
+import '../../../src/tiles/grid/collection-tile';
+
+describe('Collection Tile', () => {
+  it('should render initial component', async () => {
+    const el = await fixture<CollectionTile>(
+      html`<collection-tile></collection-tile>`
+    );
+
+    const itemInfo = el.shadowRoot?.querySelector('.item-info');
+    const itemImage = el.shadowRoot?.querySelector('image-block');
+    const itemStats = el.shadowRoot?.querySelector('#item-stats');
+
+    expect(itemInfo).to.exist;
+    expect(itemImage).to.exist;
+    expect(itemStats).to.exist;
+  });
+
+  it('should render with title element', async () => {
+    const el = await fixture<CollectionTile>(html`
+      <collection-tile
+        .model=${{
+          identifier: 'books',
+          title: 'Books',
+          itemCount: 121,
+        }}
+      >
+      </collection-tile>
+    `);
+    await el.updateComplete;
+
+    const itemInfo = el.shadowRoot?.querySelector('.item-info');
+    const itemTitle = el.shadowRoot?.querySelector('#title');
+
+    expect(itemInfo).to.exist;
+    expect(itemTitle).to.exist;
+    expect(itemTitle?.querySelector('.truncated')?.textContent).to.equal(
+      'Books'
+    );
+  });
+
+  it('should render with image-block element', async () => {
+    const el = await fixture<CollectionTile>(html`
+      <collection-tile
+        .model=${{
+          identifier: '@jack-sparrow',
+          itemCount: 1233,
+        }}
+      >
+      </collection-tile>
+    `);
+    await el.updateComplete;
+
+    const itemImageBlock = el.shadowRoot?.querySelector('image-block');
+    expect(itemImageBlock).to.exist;
+  });
+
+  it('should render with item stats element', async () => {
+    const el = await fixture<CollectionTile>(html`
+      <collection-tile
+        .model=${{
+          identifier: '@jack-sparrow',
+          itemCount: 14521,
+          collectionSize: 23222543,
+        }}
+      >
+      </collection-tile>
+    `);
+    await el.updateComplete;
+
+    const itemStats = el.shadowRoot?.querySelector('#item-stats');
+    const itemMediaType = el.shadowRoot?.querySelector('#item-mediatype');
+    const itemCount = el.shadowRoot?.querySelector('#item-count');
+    const itemSize = el.shadowRoot?.querySelector('#item-size');
+
+    expect(itemStats).to.exist;
+    expect(itemMediaType).to.exist;
+    expect(itemCount).to.exist;
+    expect(itemSize).to.exist;
+  });
+});