@internetarchive/collection-browser 2.17.1-alpha-webdev7713.0 → 2.18.0

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

@@ -36,6 +36,7 @@ export class TileList extends BaseTileComponent {
    *  - creatorFilter?: string;
    *  - mobileBreakpoint?: number;
    *  - loggedIn = false;
+   *  - suppressBlurring = false;
    */
 
   @property({ type: Object })
@@ -101,6 +102,7 @@ export class TileList extends BaseTileComponent {
         .isListTile=${true}
         .viewSize=${this.classSize}
         .loggedIn=${this.loggedIn}
+        .suppressBlurring=${this.suppressBlurring}
       >
       </image-block>
     </a> `;

package/src/tiles/tile-dispatcher.ts

@@ -46,6 +46,7 @@ export class TileDispatcher
    *  - creatorFilter?: string;
    *  - mobileBreakpoint?: number;
    *  - loggedIn = false;
+   *  - suppressTileBlurring = false;
    */
 
   @property({ type: String }) tileDisplayMode?: TileDisplayMode;
@@ -303,6 +304,7 @@ export class TileDispatcher
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
               .creatorFilter=${creatorFilter}
+              .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}
@@ -316,6 +318,7 @@ export class TileDispatcher
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
               .creatorFilter=${creatorFilter}
+              .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}
@@ -329,6 +332,7 @@ export class TileDispatcher
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
               .creatorFilter=${creatorFilter}
+              .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
               ?showInfoButton=${false}
               @infoButtonPressed=${this.tileInfoButtonPressed}
@@ -345,6 +349,7 @@ export class TileDispatcher
               .defaultSortParam=${defaultSortParam}
               .creatorFilter=${creatorFilter}
               .loggedIn=${this.loggedIn}
+              .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
               .simpleLayoutType=${this.simpleLayoutType}
               ?showTvClips=${this.showTvClips}
@@ -366,6 +371,7 @@ export class TileDispatcher
           .mobileBreakpoint=${mobileBreakpoint}
           .baseImageUrl=${this.baseImageUrl}
           .loggedIn=${this.loggedIn}
+          .suppressBlurring=${this.suppressBlurring}
         >
         </tile-list-compact>`;
       case 'list-detail':
@@ -382,6 +388,7 @@ export class TileDispatcher
           .mobileBreakpoint=${mobileBreakpoint}
           .baseImageUrl=${this.baseImageUrl}
           .loggedIn=${this.loggedIn}
+          .suppressBlurring=${this.suppressBlurring}
         >
         </tile-list>`;
       default:

package/test/collection-browser.test.ts

@@ -895,8 +895,7 @@ describe('Collection Browser', () => {
     expect(sortSelector, 'sort bar').to.exist;
 
     // Click the title sorter
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    [...(sortSelector?.children as HTMLCollection & Iterable<any>)] // tsc doesn't know children is iterable
+    Array.from(sortSelector!.children)
       .find(child => child.textContent?.trim() === 'Title')
       ?.querySelector('button')
       ?.click();
@@ -904,6 +903,16 @@ describe('Collection Browser', () => {
     await el.updateComplete;
 
     expect(el.selectedSort).to.equal(SortField.title);
+
+    // Click the creator sorter
+    Array.from(sortSelector!.children)
+      .find(child => child.textContent?.trim() === 'Creator')
+      ?.querySelector('button')
+      ?.click();
+
+    await el.updateComplete;
+
+    expect(el.selectedSort).to.equal(SortField.creator);
   });
 
   it('sets sort filter properties when user selects title filter', async () => {
@@ -1072,9 +1081,11 @@ describe('Collection Browser', () => {
 
   it('sets date range query when date picker selection changed', async () => {
     const searchService = new MockSearchService();
+    const mockAnalyticsHandler = new MockAnalyticsHandler();
     const el = await fixture<CollectionBrowser>(
       html`<collection-browser
         .searchService=${searchService}
+        .analyticsHandler=${mockAnalyticsHandler}
         .suppressPlaceholders=${true}
       >
       </collection-browser>`,
@@ -2145,6 +2156,79 @@ describe('Collection Browser', () => {
       .exist;
   });
 
+  it('shows Blurring checkbox for admin users', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser
+        .baseNavigationUrl=${''}
+        .searchService=${searchService}
+      >
+      </collection-browser>`,
+    );
+
+    el.baseQuery = 'archive-org-user-loggedin';
+    await el.updateComplete;
+    await el.initialSearchComplete;
+
+    const blurringCheck = el.shadowRoot?.querySelector(
+      '#tile-blur-check',
+    ) as HTMLInputElement;
+    expect(blurringCheck).to.exist;
+    expect(blurringCheck.checked).to.be.true;
+  });
+
+  it('unchecks Blurring checkbox for admin users with blurring preference off', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser
+        .baseNavigationUrl=${''}
+        .searchService=${searchService}
+      >
+      </collection-browser>`,
+    );
+
+    el.baseQuery = 'archive-org-user-loggedin-noblur';
+    await el.updateComplete;
+    await el.initialSearchComplete;
+
+    const blurringCheck = el.shadowRoot?.querySelector(
+      '#tile-blur-check',
+    ) as HTMLInputElement;
+    expect(blurringCheck).to.exist;
+    expect(blurringCheck.checked).to.be.false;
+  });
+
+  it('toggles blur state when Blurring checkbox is toggled', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser
+        .baseNavigationUrl=${''}
+        .searchService=${searchService}
+      >
+      </collection-browser>`,
+    );
+
+    el.baseQuery = 'archive-org-user-loggedin';
+    await el.updateComplete;
+    await el.initialSearchComplete;
+
+    const blurringCheck = el.shadowRoot?.querySelector(
+      '#tile-blur-check',
+    ) as HTMLInputElement;
+    expect(blurringCheck).to.exist;
+
+    blurringCheck.dispatchEvent(new PointerEvent('click'));
+    await el.updateComplete;
+
+    const infiniteScroller = el.shadowRoot?.querySelector(
+      'infinite-scroller',
+    ) as InfiniteScroller;
+    const firstTile = infiniteScroller?.shadowRoot?.querySelector(
+      'tile-dispatcher',
+    ) as TileDispatcher;
+    expect(firstTile.suppressBlurring).to.be.true;
+  });
+
   it('applies loans tab properties to sort bar', async () => {
     const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(

package/test/image-block.test.ts

@@ -220,4 +220,28 @@ describe('Image block component', () => {
     ) as TextOverlay;
     expect(textOverlay).not.to.exist;
   });
+
+  it('should render no overlay if blurring is suppressed', async () => {
+    const el = await fixture<ImageBlock>(html`
+      <image-block
+        .model=${{
+          loginRequired: true,
+          contentWarning: true,
+          identifier: 'goody',
+        }}
+        .baseImageUrl=${'https://archive.org'}
+        .isCompactTile=${false}
+        .isListTile=${false}
+        .viewSize=${'desktop'}
+        .loggedIn=${true}
+        suppressBlurring
+      >
+      </image-block>
+    `);
+
+    const textOverlay = el.shadowRoot?.querySelector(
+      'text-overlay',
+    ) as TextOverlay;
+    expect(textOverlay).not.to.exist;
+  });
 });

package/test/item-image.test.ts

@@ -5,6 +5,7 @@ import { TileModel } from '../src/models';
 import type { ItemImage } from '../src/tiles/item-image';
 
 import '../src/tiles/item-image';
+import { MediaType } from '@internetarchive/field-parsers';
 
 const baseImageUrl = 'https://archive.org';
 const testBookModel: TileModel = new TileModel({});
@@ -131,4 +132,89 @@ describe('ItemImage component', () => {
     expect(img).to.exist;
     expect(img?.getAttribute('src')).not.to.exist;
   });
+
+  it('should blur image if login required flag set', async () => {
+    const model = new TileModel({ identifier: 'foo' });
+    model.loginRequired = true;
+
+    const el = await fixture<ItemImage>(html`
+      <item-image
+        .isListTile=${false}
+        .isCompactTile=${false}
+        .model=${model}
+        .baseImageUrl=${baseImageUrl}
+      >
+      </item-image>
+    `);
+
+    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');
+    expect(dropShadow).to.exist;
+
+    const imgClasses = dropShadow?.querySelector('img')?.classList;
+    expect(imgClasses?.contains('blur')).to.be.true;
+  });
+
+  it('should blur image if content warning flag set', async () => {
+    const model = new TileModel({ identifier: 'foo' });
+    model.contentWarning = true;
+
+    const el = await fixture<ItemImage>(html`
+      <item-image
+        .isListTile=${false}
+        .isCompactTile=${false}
+        .model=${model}
+        .baseImageUrl=${baseImageUrl}
+      >
+      </item-image>
+    `);
+
+    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');
+    expect(dropShadow).to.exist;
+
+    const imgClasses = dropShadow?.querySelector('img')?.classList;
+    expect(imgClasses?.contains('blur')).to.be.true;
+  });
+
+  it('should not blur image if no login required nor content warning', async () => {
+    const model = new TileModel({ identifier: 'foo' });
+
+    const el = await fixture<ItemImage>(html`
+      <item-image
+        .isListTile=${false}
+        .isCompactTile=${false}
+        .model=${model}
+        .baseImageUrl=${baseImageUrl}
+      >
+      </item-image>
+    `);
+
+    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');
+    expect(dropShadow).to.exist;
+
+    const imgClasses = dropShadow?.querySelector('img')?.classList;
+    expect(imgClasses?.contains('blur')).to.be.false;
+  });
+
+  it('should not blur image if blurring is suppressed, regardless of content flags', async () => {
+    const model = new TileModel({ identifier: 'foo' });
+    model.loginRequired = true;
+    model.contentWarning = true;
+
+    const el = await fixture<ItemImage>(html`
+      <item-image
+        .isListTile=${false}
+        .isCompactTile=${false}
+        .model=${model}
+        .baseImageUrl=${baseImageUrl}
+        suppressBlurring
+      >
+      </item-image>
+    `);
+
+    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');
+    expect(dropShadow).to.exist;
+
+    const imgClasses = dropShadow?.querySelector('img')?.classList;
+    expect(imgClasses?.contains('blur')).to.be.false;
+  });
 });

package/test/mocks/mock-search-responses.ts

@@ -291,6 +291,110 @@ export const getMockSuccessWithDateHistogramAggs: () => Result<
   },
 });
 
+export const getMockSuccessArchiveOrgUserResult: () => Result<
+  SearchResponse,
+  SearchServiceError
+> = () => ({
+  success: {
+    request: {
+      kind: 'hits',
+      clientParameters: {
+        user_query: 'archive-org-user-loggedin',
+        sort: [],
+      },
+      backendRequests: {
+        primary: {
+          kind: 'hits',
+          finalized_parameters: {
+            user_query: 'archive-org-user-loggedin',
+            sort: [],
+          },
+        },
+      },
+    },
+    rawResponse: {},
+    sessionContext: {
+      is_archive_user: true,
+      pps_relevant_user_preferences: {
+        display__blur_moderated_content: 'on',
+      },
+    },
+    response: {
+      totalResults: 2,
+      returnedCount: 2,
+      results: [
+        new ItemHit({
+          fields: {
+            identifier: 'foo',
+            collection: ['foo', 'loggedin', 'bar'],
+            __href__: '/foo',
+          },
+        }),
+        new ItemHit({
+          fields: {
+            identifier: 'bar',
+            collection: ['baz', 'boop'],
+            __href__: '/bar',
+          },
+        }),
+      ],
+    },
+    responseHeader: {
+      succeeded: true,
+      query_time: 0,
+    },
+  },
+});
+
+export const getMockSuccessArchiveOrgUserNoBlurResult: () => Result<
+  SearchResponse,
+  SearchServiceError
+> = () => ({
+  success: {
+    request: {
+      kind: 'hits',
+      clientParameters: {
+        user_query: 'archive-org-user-loggedin-noblur',
+        sort: [],
+      },
+      backendRequests: {
+        primary: {
+          kind: 'hits',
+          finalized_parameters: {
+            user_query: 'archive-org-user-loggedin-noblur',
+            sort: [],
+          },
+        },
+      },
+    },
+    rawResponse: {},
+    sessionContext: {
+      is_archive_user: true,
+      pps_relevant_user_preferences: {
+        display__blur_moderated_content: 'off',
+      },
+    },
+    response: {
+      totalResults: 1,
+      returnedCount: 1,
+      results: [
+        new ItemHit({
+          fields: {
+            identifier: 'foo',
+            collection: ['loggedin'],
+            title: 'foo',
+            mediatype: 'texts',
+          },
+        }),
+      ],
+    },
+    responseHeader: {
+      succeeded: true,
+      query_time: 0,
+    },
+  },
+});
+
 export const getMockSuccessLoggedInResult: () => Result<
   SearchResponse,
   SearchServiceError

package/test/mocks/mock-search-service.ts

@@ -34,6 +34,8 @@ import {
   getMockSuccessWithWebArchiveHits,
   getMockSuccessWithManyAggregations,
   getMockSuccessTvFields,
+  getMockSuccessArchiveOrgUserResult,
+  getMockSuccessArchiveOrgUserNoBlurResult,
 } from './mock-search-responses';
 
 const responses: Record<
@@ -47,6 +49,8 @@ const responses: Record<
   loggedin: getMockSuccessLoggedInResult,
   'no-preview': getMockSuccessNoPreviewResult,
   'loggedin-no-preview': getMockSuccessLoggedInAndNoPreviewResult,
+  'archive-org-user-loggedin': getMockSuccessArchiveOrgUserResult,
+  'archive-org-user-loggedin-noblur': getMockSuccessArchiveOrgUserNoBlurResult,
   'first-title': getMockSuccessFirstTitleResult,
   'first-creator': getMockSuccessFirstCreatorResult,
   'collection-titles': getMockSuccessWithCollectionTitles,
@@ -120,4 +124,11 @@ export class MockSearchService implements SearchServiceInterface {
 
     return result;
   }
+
+  async itemDetails(
+    _: string,
+  ): Promise<Result<SearchResponse, SearchServiceError>> {
+    // We don't currently use the itemDetails method in collection-browser
+    throw new Error('not implemented');
+  }
 }

package/test/tiles/hover/hover-pane-controller.test.ts

@@ -54,6 +54,7 @@ class HostElement extends LitElement implements HoverPaneProviderInterface {
     return {
       model: tileModel,
       loggedIn: false,
+      suppressBlurring: false,
       sortParam: null,
     };
   }