@internetarchive/collection-browser 2.17.0 → 2.17.1-alpha-webdev7667.0

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

@@ -21,6 +21,7 @@ export class CollectionTile extends BaseTileComponent {
    *  - creatorFilter?: string;
    *  - mobileBreakpoint?: number;
    *  - loggedIn = false;
+   *  - suppressBlurring = false;
    */
 
   @property({ type: Boolean }) showInfoButton = false;
@@ -46,6 +47,7 @@ export class CollectionTile extends BaseTileComponent {
         .model=${this.model}
         .baseImageUrl=${this.baseImageUrl}
         .viewSize=${'grid'}
+        .suppressBlurring=${this.suppressBlurring}
       >
       </image-block>
     `;

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

@@ -34,6 +34,7 @@ export class ItemTile extends BaseTileComponent {
    *  - creatorFilter?: string;
    *  - mobileBreakpoint?: number;
    *  - loggedIn = false;
+   *  - suppressBlurring = false;
    */
 
   @property({ type: Boolean }) showInfoButton = false;
@@ -101,6 +102,7 @@ export class ItemTile extends BaseTileComponent {
         .model=${this.model}
         .baseImageUrl=${this.baseImageUrl}
         .loggedIn=${this.loggedIn}
+        .suppressBlurring=${this.suppressBlurring}
         .isCompactTile=${false}
         .isListTile=${false}
         .viewSize=${'grid'}

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

@@ -18,6 +18,7 @@ export class SearchTile extends BaseTileComponent {
    *  - creatorFilter?: string;
    *  - mobileBreakpoint?: number;
    *  - loggedIn = false;
+   *  - suppressBlurring = false;
    */
 
   @property({ type: Boolean }) showInfoButton = false;
@@ -40,6 +41,7 @@ export class SearchTile extends BaseTileComponent {
         .model=${this.model}
         .baseImageUrl=${this.baseImageUrl}
         .viewSize=${'grid'}
+        .suppressBlurring=${this.suppressBlurring}
       >
       </image-block>
     `;

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

@@ -16,6 +16,7 @@ export interface HoverPaneProperties {
   baseNavigationUrl?: string;
   baseImageUrl?: string;
   loggedIn: boolean;
+  suppressBlurring: boolean;
   sortParam: SortParam | null;
   collectionTitles?: CollectionTitles;
 }
@@ -189,6 +190,7 @@ export class HoverPaneController implements HoverPaneControllerInterface {
             .baseNavigationUrl=${this.hoverPaneProps?.baseNavigationUrl}
             .baseImageUrl=${this.hoverPaneProps?.baseImageUrl}
             .loggedIn=${this.hoverPaneProps?.loggedIn}
+            .suppressBlurring=${this.hoverPaneProps?.suppressBlurring}
             .sortParam=${this.hoverPaneProps?.sortParam}
             .collectionTitles=${this.hoverPaneProps?.collectionTitles}
             .mobileBreakpoint=${this.mobileBreakpoint}

package/src/tiles/hover/tile-hover-pane.ts

@@ -22,6 +22,8 @@ export class TileHoverPane extends LitElement {
 
   @property({ type: Boolean }) loggedIn: boolean = false;
 
+  @property({ type: Boolean }) suppressBlurring: boolean = false;
+
   @property({ type: Object }) sortParam?: SortParam;
 
   @property({ type: Number }) mobileBreakpoint?: number;
@@ -41,6 +43,7 @@ export class TileHoverPane extends LitElement {
             .baseNavigationUrl=${this.baseNavigationUrl}
             .baseImageUrl=${this.baseImageUrl}
             .loggedIn=${this.loggedIn}
+            .suppressBlurring=${this.suppressBlurring}
             .sortParam=${this.sortParam}
             .collectionTitles=${this.collectionTitles}
             .mobileBreakpoint=${this.mobileBreakpoint}

package/src/tiles/image-block.ts

@@ -17,6 +17,8 @@ export class ImageBlock extends LitElement {
 
   @property({ type: Boolean }) loggedIn = false;
 
+  @property({ type: Boolean }) suppressBlurring = false;
+
   @property({ type: Object }) model?: TileModel;
 
   @property({ type: String }) viewSize: string = 'desktop';
@@ -32,6 +34,7 @@ export class ImageBlock extends LitElement {
           .isListTile=${this.isListTile}
           .isCompactTile=${this.isCompactTile}
           .loggedIn=${this.loggedIn}
+          .suppressBlurring=${this.suppressBlurring}
           style="--imgHeight: 100%; --imgWidth: 100%"
         >
         </item-image>
@@ -78,6 +81,8 @@ export class ImageBlock extends LitElement {
   }
 
   private get overlayType(): TileOverlayType | undefined {
+    if (this.suppressBlurring) return undefined;
+
     // Prioritize showing the login-required overlay if needed.
     // Otherwise, if a content warning is required, show that overlay instead.
     // If neither flag is present, no overlay should be shown.

package/src/tiles/item-image.ts

@@ -22,6 +22,8 @@ export class ItemImage extends LitElement {
 
   @property({ type: Boolean }) loggedIn = false;
 
+  @property({ type: Boolean }) suppressBlurring = false;
+
   @state() private isWaveform = false;
 
   @state() private isNotFound = false;
@@ -111,12 +113,15 @@ export class ItemImage extends LitElement {
   }
 
   private get itemImageClass(): ClassInfo {
-    const toBlur = this.model?.contentWarning || this.model?.loginRequired;
+    const hasSensitiveContent = !!(
+      this.model?.contentWarning || this.model?.loginRequired
+    );
+    const shouldBlur = hasSensitiveContent && !this.suppressBlurring;
 
     return {
       contain: !this.isCompactTile && !this.isWaveform,
       cover: this.isCompactTile,
-      blur: toBlur || false,
+      blur: shouldBlur,
       waveform: this.isWaveform,
       'account-image': this.isAccountImage, // for account tile image
       'collection-image': this.model?.mediatype === 'collection', // for collection tile image

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

@@ -17,6 +17,7 @@ export class TileListCompactHeader extends BaseTileComponent {
    *  - creatorFilter?: string;
    *  - mobileBreakpoint?: number;
    *  - loggedIn = false;
+   *  - suppressBlurring = false;
    */
 
   render() {

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

@@ -26,6 +26,7 @@ export class TileListCompact extends BaseTileComponent {
    *  - creatorFilter?: string;
    *  - mobileBreakpoint?: number;
    *  - loggedIn = false;
+   *  - suppressBlurring = false;
    */
 
   render() {
@@ -38,6 +39,7 @@ export class TileListCompact extends BaseTileComponent {
           .isListTile=${true}
           .viewSize=${this.classSize}
           .loggedIn=${this.loggedIn}
+          .suppressBlurring=${this.suppressBlurring}
         >
         </image-block>
         <a href=${this.href} id="title"

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/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,
     };
   }