chromium/ui/file_manager/file_manager/foreground/js/ui/banners/photos_welcome_banner.ts

// Copyright 2021 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import {PHOTOS_DOCUMENTS_PROVIDER_VOLUME_ID, VolumeType} from '../../../../common/js/volume_manager_types.js';

import {EducationalBanner} from './educational_banner.js';
import {getTemplate} from './photos_welcome_banner.html.js';

/**
 * The custom element tag name.
 */
export const TAG_NAME = 'photos-welcome-banner';

/**
 * A banner that shows when a user navigates to the Google Photos documents
 * provider. Shows helpful information about using Photos on ChromeOS.
 */
export class PhotosWelcomeBanner extends EducationalBanner {
  /**
   * Returns the HTML template for the Google Photos Welcome banner.
   */
  override getTemplate() {
    const template = document.createElement('template');
    template.innerHTML = getTemplate() as unknown as string;
    const fragment = template.content.cloneNode(true);
    return fragment;
  }

  /**
   * Only show the banner when the user has navigated to the Documents Provider
   * volume, specifically the Photos document provider.
   */
  override allowedVolumes() {
    return [{
      type: VolumeType.DOCUMENTS_PROVIDER,
      id: PHOTOS_DOCUMENTS_PROVIDER_VOLUME_ID,
    }];
  }
}

declare global {
  interface HTMLElementTagNameMap {
    [TAG_NAME]: PhotosWelcomeBanner;
  }
}

customElements.define(TAG_NAME, PhotosWelcomeBanner);