feat: Implement basic general folder support (#2051)

- Related: #1748

src/components/thumbnail/feature/feature.ts

@@ -0,0 +1,94 @@
+import {
+  CSSResult,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+  html,
+  unsafeCSS,
+} from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { CameraManager } from '../../../camera-manager/manager';
+import { ThumbnailFeatureController } from '../../../components-lib/thumbnail/feature/controller';
+import { HomeAssistant } from '../../../ha/types';
+import thumbnailFeatureStyle from '../../../scss/thumbnail-feature.scss';
+import { ViewItem } from '../../../view/item';
+import '../../icon.js';
+import './thumbnail.js';
+
+@customElement('advanced-camera-card-thumbnail-feature')
+export class AdvancedCameraCardThumbnailFeature extends LitElement {
+  @property({ attribute: false })
+  public hass?: HomeAssistant;
+
+  @property({ attribute: false })
+  public cameraManager?: CameraManager;
+
+  @property({ attribute: false })
+  public item?: ViewItem;
+
+  @property({ attribute: false })
+  public hasDetails?: boolean;
+
+  private _controller = new ThumbnailFeatureController();
+
+  protected willUpdate(changedProperties: PropertyValues): void {
+    if (
+      ['item', 'hasDetails', 'cameraManager'].some((prop) => changedProperties.has(prop))
+    ) {
+      this._controller.calculate(this.cameraManager, this.item, this.hasDetails);
+    }
+  }
+
+  protected render(): TemplateResult | void {
+    const title = this._controller.getTitle();
+    const subtitles = this._controller.getSubtitles();
+    const iconClasses = classMap({
+      background: title || subtitles.length,
+    });
+
+    const thumbnailClass = this._controller.getThumbnailClass();
+    const thumbnailClasses = classMap({
+      ...(thumbnailClass && { [thumbnailClass]: true }),
+    });
+
+    return html`
+      ${this._controller.getThumbnail()
+        ? html` <advanced-camera-card-thumbnail-feature-thumbnail
+            class="${thumbnailClasses}"
+            .hass=${this.hass}
+            .thumbnail=${this._controller.getThumbnail()}
+            aria-label=${this._controller.getTitle() ?? ''}
+            title=${this._controller.getTitle() ?? ''}
+          ></advanced-camera-card-thumbnail-feature-thumbnail>`
+        : this._controller.getIcon()
+          ? html`<advanced-camera-card-icon
+              class="${iconClasses}"
+              .icon=${{ icon: this._controller.getIcon() }}
+            ></advanced-camera-card-icon>`
+          : ''}
+      ${title || subtitles.length
+        ? html`
+            ${title ? html`<div class="title">${title}</div>` : ''}
+            ${subtitles.length
+              ? html`<div>
+                  ${subtitles.map(
+                    (subtitle) => html`<div class="subtitle">${subtitle}</div>`,
+                  )}
+                </div>`
+              : ''}
+          `
+        : html``}
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return unsafeCSS(thumbnailFeatureStyle);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'advanced-camera-card-thumbnail-feature': AdvancedCameraCardThumbnailFeature;
+  }
+}

src/components/thumbnail/feature/thumbnail.ts

@@ -0,0 +1,105 @@
+import { Task, TaskStatus } from '@lit-labs/task';
+import {
+  CSSResult,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+  html,
+  unsafeCSS,
+} from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { HomeAssistant } from '../../../ha/types';
+import { localize } from '../../../localize/localize';
+import thumbnailFeatureThumbnailStyle from '../../../scss/thumbnail-feature-thumbnail.scss';
+import { renderTask } from '../../../utils/task';
+import {
+  FetchThumbnailTaskArgs,
+  createFetchThumbnailTask,
+} from '../../../utils/thumbnail';
+
+@customElement('advanced-camera-card-thumbnail-feature-thumbnail')
+export class AdvancedCameraCardThumbnailFeatureThumbnail extends LitElement {
+  @property({ attribute: false })
+  public thumbnail?: string;
+
+  @property({ attribute: false })
+  public hass?: HomeAssistant;
+
+  protected _embedThumbnailTask?: Task<FetchThumbnailTaskArgs, string | null>;
+
+  // Only load thumbnails on view in case there is a very large number of them.
+  protected _intersectionObserver = new IntersectionObserver(
+    this._intersectionHandler.bind(this),
+  );
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this._intersectionObserver.observe(this);
+  }
+
+  disconnectedCallback(): void {
+    this._intersectionObserver.disconnect();
+    super.disconnectedCallback();
+  }
+
+  protected willUpdate(changedProps: PropertyValues): void {
+    if (changedProps.has('thumbnail')) {
+      this._embedThumbnailTask = createFetchThumbnailTask(
+        this,
+        () => this.hass,
+        () => this.thumbnail,
+        false,
+      );
+      // Reset the observer so the initial intersection handler call will set
+      // the visibility correctly.
+      this._intersectionObserver.unobserve(this);
+      this._intersectionObserver.observe(this);
+    }
+  }
+
+  protected _intersectionHandler(entries: IntersectionObserverEntry[]): void {
+    if (
+      this._embedThumbnailTask?.status === TaskStatus.INITIAL &&
+      entries.some((entry) => entry.isIntersecting)
+    ) {
+      this._embedThumbnailTask?.run();
+    }
+  }
+
+  protected render(): TemplateResult | void {
+    const imageOff = html`<advanced-camera-card-icon
+      .icon=${{ icon: 'mdi:image-off' }}
+      title=${localize('thumbnail.no_thumbnail')}
+    ></advanced-camera-card-icon> `;
+
+    if (!this._embedThumbnailTask) {
+      return imageOff;
+    }
+
+    return html`${this.thumbnail
+      ? renderTask(
+          this._embedThumbnailTask,
+          (embeddedThumbnail: string | null) =>
+            embeddedThumbnail ? html`<img src="${embeddedThumbnail}" />` : html``,
+          {
+            inProgressFunc: () =>
+              html`<advanced-camera-card-icon
+                .icon=${{ icon: 'mdi:image-refresh' }}
+                title=${localize('thumbnail.no_thumbnail')}
+              ></advanced-camera-card-icon> `,
+            errorFunc: () => imageOff,
+          },
+        )
+      : imageOff} `;
+  }
+
+  static get styles(): CSSResult {
+    return unsafeCSS(thumbnailFeatureThumbnailStyle);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'advanced-camera-card-thumbnail-feature-thumbnail': AdvancedCameraCardThumbnailFeatureThumbnail;
+  }
+}