fix: Improve review media filtering (#2322)

src/components/effects/check.ts

@@ -0,0 +1,24 @@
+import { CSSResultGroup, html, TemplateResult, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import checkCircleSVG from '../../images/check-circle.svg';
+import checkStyle from '../../scss/check.scss';
+import { BaseEffectComponent } from './base';
+
+@customElement('advanced-camera-card-effect-check')
+export class AdvancedCameraCardEffectCheck extends BaseEffectComponent {
+  protected render(): TemplateResult {
+    // Using inline SVG to avoid ha-icon lazy-loading delay on first use.
+    return html`<span class="check">${unsafeHTML(checkCircleSVG)}</span>`;
+  }
+
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(checkStyle);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'advanced-camera-card-effect-check': AdvancedCameraCardEffectCheck;
+  }
+}

src/components/gallery/gallery.ts

@@ -34,6 +34,7 @@ import { ViewItemClassifier } from '../../view/item-classifier.js';
 import { ViewFolder, ViewItem } from '../../view/item.js';
 import { UnifiedQueryBuilder } from '../../view/unified-query-builder.js';
 import { UnifiedQueryRunner } from '../../view/unified-query-runner.js';
+import { getReviewedQueryFilterFromQuery } from '../../view/utils/query-filter.js';
 import '../media-filter.js';
 import '../message.js';
 import { renderMessage } from '../message.js';
@@ -133,9 +134,8 @@ export class AdvancedCameraCardGallery extends LitElement {
   }
 
   protected _renderThumbnails(): TemplateResult | void {
-    const selected = this.viewManagerEpoch?.manager
-      .getView()
-      ?.queryResults?.getSelectedResult();
+    const view = this.viewManagerEpoch?.manager.getView();
+    const selected = view?.queryResults?.getSelectedResult();
 
     return html`
       ${this._controller.getItems()?.map(
@@ -161,6 +161,7 @@ export class AdvancedCameraCardGallery extends LitElement {
               .show_review_control}
             ?show_info_control=${!!this.galleryConfig?.controls.thumbnails
               .show_info_control}
+            .filterReviewed=${getReviewedQueryFilterFromQuery(view?.query, item)}
             @click=${(ev: Event) => {
               stopEventFromActivatingCardWideActions(ev);
               if (ViewItemClassifier.isMedia(item) && this.viewManagerEpoch) {

src/components/thumbnail-carousel.ts

@@ -31,6 +31,7 @@ import { fireAdvancedCameraCardEvent } from '../utils/fire-advanced-camera-card-
 import { ViewItemClassifier } from '../view/item-classifier.js';
 import { ViewItem, ViewMedia } from '../view/item.js';
 import { UnifiedQueryBuilder } from '../view/unified-query-builder.js';
+import { getReviewedQueryFilterFromQuery } from '../view/utils/query-filter.js';
 import './carousel.js';
 import './thumbnail/thumbnail.js';
 
@@ -151,6 +152,7 @@ export class AdvancedCameraCardThumbnailCarousel extends LitElement {
     selected: boolean,
     clickCallback: (item: ViewItem, ev: Event) => void,
     seekTarget?: Date,
+    filterReviewed?: boolean,
   ): TemplateResult {
     const classes = {
       embla__slide: true,
@@ -161,6 +163,7 @@ export class AdvancedCameraCardThumbnailCarousel extends LitElement {
       class="${classMap(classes)}"
       .cameraManager=${this.cameraManager}
       .hass=${this.hass}
+      .filterReviewed=${filterReviewed}
       .item=${item}
       .viewManagerEpoch=${this.viewManagerEpoch}
       .viewItemManager=${this.viewItemManager}
@@ -210,6 +213,7 @@ export class AdvancedCameraCardThumbnailCarousel extends LitElement {
           selectedIndex === thumbnails.length,
           clickHandler,
           view?.context?.mediaViewer?.seek,
+          getReviewedQueryFilterFromQuery(view?.query, item),
         ),
       );
     }

src/components/thumbnail/feature/feature.ts

@@ -67,6 +67,9 @@ export class AdvancedCameraCardThumbnailFeature extends LitElement {
   @property({ attribute: true, type: Boolean })
   public show_info_control = false;
 
+  @property({ attribute: false })
+  public filterReviewed?: boolean;
+
   private _controller = new ThumbnailFeatureController();
 
   protected willUpdate(changedProperties: PropertyValues): void {
@@ -83,6 +86,7 @@ export class AdvancedCameraCardThumbnailFeature extends LitElement {
       viewItemManager: this.viewItemManager,
       viewManagerEpoch: this.viewManagerEpoch,
       capabilities: this.item ? this.viewItemManager?.getCapabilities(this.item) : null,
+      filterReviewed: this.filterReviewed,
     };
   }
 
@@ -164,7 +168,12 @@ export class AdvancedCameraCardThumbnailFeature extends LitElement {
             @click=${async (ev: Event) => {
               stopEventFromActivatingCardWideActions(ev);
               if (this.item) {
-                await toggleReviewed(this.item, this._getControlContext());
+                await toggleReviewed(
+                  this.item,
+                  this.viewItemManager,
+                  this.viewManagerEpoch,
+                  this.filterReviewed,
+                );
               }
             }}
           ></advanced-camera-card-icon>`
@@ -179,7 +188,7 @@ export class AdvancedCameraCardThumbnailFeature extends LitElement {
                 stopEventFromActivatingCardWideActions(ev);
                 if (
                   this.item &&
-                  (await toggleFavorite(this.item, this._getControlContext()))
+                  (await toggleFavorite(this.item, this.viewItemManager))
                 ) {
                   this.requestUpdate();
                 }
@@ -210,7 +219,7 @@ export class AdvancedCameraCardThumbnailFeature extends LitElement {
             @click=${(ev: Event) => {
               stopEventFromActivatingCardWideActions(ev);
               if (this.item) {
-                navigateToTimeline(this.item, this._getControlContext());
+                navigateToTimeline(this.item, this.viewManagerEpoch);
               }
             }}
           ></advanced-camera-card-icon>`
@@ -223,7 +232,7 @@ export class AdvancedCameraCardThumbnailFeature extends LitElement {
             @click=${async (ev: Event) => {
               stopEventFromActivatingCardWideActions(ev);
               if (this.item) {
-                await downloadMedia(this.item, this._getControlContext());
+                await downloadMedia(this.item, this.viewItemManager);
               }
             }}
           ></advanced-camera-card-icon>`

src/components/thumbnail/thumbnail.ts

@@ -55,6 +55,9 @@ export class AdvancedCameraCardThumbnail extends LitElement {
   @property({ attribute: true, type: Boolean })
   public show_info_control = false;
 
+  @property({ attribute: false })
+  public filterReviewed?: boolean;
+
   @property({ attribute: false })
   public seek?: Date;
 
@@ -80,6 +83,7 @@ export class AdvancedCameraCardThumbnail extends LitElement {
         .show_download_control=${this.show_download_control}
         .show_review_control=${this.show_review_control}
         .show_info_control=${this.show_info_control}
+        .filterReviewed=${this.filterReviewed}
       >
       </advanced-camera-card-thumbnail-feature>
       ${this.details