@internetarchive/collection-browser 0.3.5-alpha.1 → 0.3.6

package/src/models.ts

@@ -24,6 +24,7 @@ export interface TileModel {
   title: string;
   viewCount: number;
   volume?: string;
+  weeklyViewCount?: number;
   loginRequired: boolean;
   contentWarning: boolean;
 }

package/src/restoration-state-handler.ts

@@ -1,4 +1,8 @@
-import type { SortDirection, SortParam } from '@internetarchive/search-service';
+import {
+  SearchType,
+  SortDirection,
+  SortParam,
+} from '@internetarchive/search-service';
 import { getCookie, setCookie } from 'typescript-cookie';
 import {
   MetadataFieldToSortField,
@@ -14,6 +18,7 @@ import {
 
 export interface RestorationState {
   displayMode?: CollectionDisplayMode;
+  searchType?: SearchType;
   sortParam?: SortParam;
   selectedSort?: SortField;
   sortDirection?: SortDirection;
@@ -87,12 +92,20 @@ export class RestorationStateHandler
   private persistQueryStateToUrl(state: RestorationState) {
     const url = new URL(window.location.href);
     const { searchParams } = url;
+    searchParams.delete('sin');
     searchParams.delete('sort');
     searchParams.delete('query');
     searchParams.delete('page');
     searchParams.delete('and[]');
     searchParams.delete('not[]');
 
+    if (state.searchType) {
+      searchParams.set(
+        'sin',
+        state.searchType === SearchType.FULLTEXT ? 'TXT' : ''
+      );
+    }
+
     if (state.sortParam) {
       const prefix = state.sortParam.direction === 'desc' ? '-' : '';
       searchParams.set('sort', `${prefix}${state.sortParam.field}`);
@@ -155,6 +168,7 @@ export class RestorationStateHandler
 
   private loadQueryStateFromUrl(): RestorationState {
     const url = new URL(window.location.href);
+    const searchInside = url.searchParams.get('sin');
     const pageNumber = url.searchParams.get('page');
     const searchQuery = url.searchParams.get('query');
     const sortQuery = url.searchParams.get('sort');
@@ -173,6 +187,10 @@ export class RestorationStateHandler
       },
     };
 
+    if (searchInside) {
+      restorationState.searchType =
+        searchInside === 'TXT' ? SearchType.FULLTEXT : SearchType.METADATA;
+    }
     if (pageNumber) {
       const parsed = parseInt(pageNumber, 10);
       restorationState.currentPage = parsed;

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

@@ -21,6 +21,18 @@ export class TileStats extends LitElement {
   @property({ type: Number }) commentCount?: number;
 
   render() {
+    const formattedFavCount = formatCount(this.favCount, 'short', 'short');
+    const formattedReviewCount = formatCount(
+      this.commentCount,
+      'short',
+      'short'
+    );
+
+    const uploadsOrViewsTitle =
+      this.mediatype === 'account'
+        ? `${this.itemCount} uploads`
+        : `${this.viewCount} all-time views`;
+
     return html`
       <div class="item-stats">
         <p class="sr-only">
@@ -31,7 +43,7 @@ export class TileStats extends LitElement {
             <p class="sr-only">Mediatype:</p>
             <mediatype-icon .mediatype=${this.mediatype}></mediatype-icon>
           </li>
-          <li class="col">
+          <li class="col" title="${uploadsOrViewsTitle}">
             ${this.mediatype === 'account' ? uploadIcon : viewsIcon}
             <p class="status-text">
               <span class="sr-only">
@@ -44,18 +56,18 @@ export class TileStats extends LitElement {
               )}
             </p>
           </li>
-          <li class="col">
+          <li class="col" title="${formattedFavCount} favorites">
             ${favoriteFilledIcon}
             <p class="status-text">
               <span class="sr-only">Favorites:</span>
-              ${formatCount(this.favCount, 'short', 'short')}
+              ${formattedFavCount}
             </p>
           </li>
-          <li class="col">
+          <li class="col" title="${formattedReviewCount} reviews">
             ${reviewsIcon}
             <p class="status-text">
               <span class="sr-only">Reviews:</span>
-              ${formatCount(this.commentCount, 'short', 'short')}
+              ${formattedReviewCount}
             </p>
           </li>
         </ul>
@@ -116,6 +128,7 @@ export class TileStats extends LitElement {
         width: 10px;
         display: block;
         margin: auto;
+        pointer-events: none;
       }
 
       .status-text {

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

@@ -55,9 +55,7 @@ export class TileListCompact extends LitElement {
           >
           </mediatype-icon>
         </div>
-        <div id="views">
-          ${formatCount(this.model?.viewCount ?? 0, this.formatSize)}
-        </div>
+        <div id="views">${formatCount(this.views ?? 0, this.formatSize)}</div>
       </div>
     `;
   }
@@ -80,6 +78,12 @@ export class TileListCompact extends LitElement {
     }
   }
 
+  private get views(): number | undefined {
+    return this.sortParam?.field === 'week'
+      ? this.model?.weeklyViewCount // weekly views
+      : this.model?.viewCount; // all-time views
+  }
+
   private get classSize(): string {
     if (
       this.mobileBreakpoint &&

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

@@ -247,8 +247,13 @@ export class TileList extends LitElement {
   }
 
   private get viewsTemplate() {
+    const viewCount =
+      this.sortParam?.field === 'week'
+        ? this.model?.weeklyViewCount // weekly views
+        : this.model?.viewCount; // all-time views
+
     return this.metadataTemplate(
-      `${formatCount(this.model?.viewCount ?? 0, this.formatSize)}`,
+      `${formatCount(viewCount ?? 0, this.formatSize)}`,
       'Views'
     );
   }

package/src/tiles/mediatype-icon.ts

@@ -40,6 +40,7 @@ export class MediatypeIcon extends LitElement {
       <div
         id="icon"
         class="${this.showText ? 'show-text' : 'hide-text'}"
+        title="${config.text}"
         style="--iconFillColor: ${config.color}"
       >
         ${config.icon}
@@ -69,6 +70,7 @@ export class MediatypeIcon extends LitElement {
       svg {
         height: var(--iconHeight, 10px);
         width: var(--iconWidth, 10px);
+        pointer-events: none;
       }
 
       .fill-color {