@geoscene/map-components 4.33.20 → 5.0.19

package/dist/components/geoscene-video-player/customElement.d.ts

@@ -1,13 +1,14 @@
-/// <reference types="@geoscene/core/interfaces.d.ts" />
-/// <reference types="../../index.d.ts" />
-import { Use } from '@geoscene/lumina/controllers';
-import { default as VideoPlayerViewModel } from '@geoscene/core/widgets/VideoPlayer/VideoPlayerViewModel.js';
-import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@geoscene/lumina';
-import { GeosceneReferenceElement } from '../../utils/component-utils';
+/// <reference path="../../index.d.ts" />
+import type VideoPlayerViewModel from "@geoscene/core/widgets/VideoPlayer/VideoPlayerViewModel.js";
+import type VideoLayer from "@geoscene/core/layers/VideoLayer.js";
+import type MapView from "@geoscene/core/views/MapView.js";
+import type { PublicLitElement as LitElement } from "@geoscene/lumina";
+import type { GeosceneReferenceElement } from "../types.js";
+import type { T9nMeta } from "@geoscene/lumina/controllers";
+import type { VideoState } from "@geoscene/core/layers/video/types.js";
 
-declare const useVideoPlayerViewModel: (component: LitElement & Pick<VideoPlayerViewModel, never> & import('../../controllers/useViewModel').ViewModelControllerUses<VideoPlayerViewModel>) => VideoPlayerViewModel;
 /**
- * The Video Player component provides a user interface for interacting with a [VideoLayer](api-reference/geoscene-layers-VideoLayer.html).
+ * The Video Player component provides a user interface for interacting with a [VideoLayer](https://doc.geoscene.cn/javascript/5.0/references/core/layers/VideoLayer/).
  * It displays the original video content and provides controls for playing, pausing, seeking, and changing the video speed and quality.
  *
  * The Video Player component provides the following capabilities:
@@ -18,189 +19,222 @@ declare const useVideoPlayerViewModel: (component: LitElement & Pick<VideoPlayer
  *  - Adjustable speed and quality
  *  - Access to frame metadata
  *
- * The [VideoPlayerViewModel](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-widgets-VideoPlayer-VideoPlayerViewModel.html) class provides the logic for the Video Player.
+ * The [VideoPlayerViewModel](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/VideoPlayer/VideoPlayerViewModel/) class provides the logic for the Video Player.
  *
  * **Known limitations**
  *
- * * Not supported in 3D [Scenes](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-scene/).
+ * * Not supported in 3D [geoscene-scene](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-scene/).
  * * Not supported on macOS and iOS devices.
  *
- * [![](https://doc.geoscene.cn/javascript/4.33/assets/img/apiref/widgets/video-player-video-preview.png)]()
- *
- * [Read more...](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-video-player/)
+ * [![](https://doc.geoscene.cn/javascript/5.0/assets/references/core/widgets/video-player-video-preview.png)]()
  *
  * @example
  * ```html
  * <geoscene-map>
- *   <geoscene-video-player></geoscene-video-player>
+ *   <geoscene-video-player slot="top-right"></geoscene-video-player>
  * </geoscene-map>
- * ```
- *
- * ```js
- * const [Map, VideoLayer] = await $geoscene.import([
- *   "@geoscene/core/Map.js",
- *   "@geoscene/core/layers/VideoLayer.js",
- * ]);
- *
- * const viewElement = document.querySelector("geoscene-map");
- * const videoPlayerElement = document.querySelector("geoscene-video-player");
- *
- * const videoLayer = new VideoLayer({
- *   url: "YOUR_VIDEO_LAYER_URL",
- * });
- *
- * viewElement.map = new Map({
- *   basemap: "topo-vector",
- *   layers: [videoLayer],
- * });
- * await viewElement.viewOnReady();
- *
- * await videoLayer.load();
- * if (videoLayer.loaded) {
- *   videoPlayerElement.layer = videoLayer;
- * }
  *
- * await viewElement.whenLayerView(videoLayer);
- * viewElement.goTo(videoLayer.fullExtent);
+ * <script type="module">
+ *   const [Map, VideoLayer] = await $geoscene.import([
+ *     "@geoscene/core/Map.js",
+ *     "@geoscene/core/layers/VideoLayer.js",
+ *   ]);
+ *   const viewElement = document.querySelector("geoscene-map");
+ *   const videoPlayerElement = document.querySelector("geoscene-video-player");
+ *   const videoLayer = new VideoLayer({
+ *     url: "YOUR_VIDEO_LAYER_URL",
+ *   });
+ *   viewElement.map = new Map({
+ *     basemap: "tianditu-vector",
+ *     layers: [videoLayer],
+ *   });
+ *   await viewElement.viewOnReady();
+ *   await videoLayer.load();
+ *   if (videoLayer.loaded) {
+ *     videoPlayerElement.layer = videoLayer;
+ *   }
+ *   await viewElement.whenLayerView(videoLayer);
+ *   viewElement.goTo(videoLayer.fullExtent);
+ * </script>
  * ```
  * @since 4.33
  */
-export declare class GeosceneVideoPlayer extends LitElement {
-    /**
-     * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
-     *
-     * @see [Associate components with a Map or Scene component](https://doc.geoscene.cn/javascript/4.33/programming-patterns/#associate-components-with-a-map-or-scene-component)
-     */
-    referenceElement?: GeosceneReferenceElement | string;
-    /** @default "top-left" */
-    position: __geoscene.UIPosition;
-    /**
-     * Icon which represents the component.
-     * Typically used when the component is controlled by another component (e.g. by the Expand component).
-     *
-     * @see [Calcite Icons](https://doc.geoscene.cn/calcite-design-system/icons/)
-     * @default "video-web"
-     */
-    icon?: string;
-    /** The current state of the component. */
-    readonly state: "ready" | "error" | "playing" | "waiting" | "can-play" | "not-ready" | "paused" | "data-loaded";
-    /**
-     * Determines which telemetry elements to follow when the video layer is playing.
-     *
-     * @default "follow-both"
-     */
-    get followingMode(): VideoPlayerViewModel["followingMode"];
-    set followingMode(value: VideoPlayerViewModel["followingMode"]);
-    /**
-     * The [VideoLayer](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-layers-VideoLayer.html) to use as the data source for the video player.
-     *
-     * @noautocast
-     * @example
-     * ```js
-     * // Create a new Video Player with a VideoLayer
-     * videoPlayer.layer = videoLayer;
-     * ```
-     * @default null
-     */
-    layer: nullish | __geoscene.VideoLayer;
-    /**
-     * If true, the component will not be destroyed automatically when it is
-     * disconnected from the document. This is useful when you want to move the
-     * component to a different place on the page, or temporarily hide it. If this
-     * is set, make sure to call the [destroy](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-video-player/#destroy) method when you are done to
-     * prevent memory leaks.
-     *
-     * @default false
-     */
-    autoDestroyDisabled: boolean;
-    /**
-     * Replace localized message strings with your own strings.
-     *
-     * _**Note**: Individual message keys may change between releases._
-     */
-    messageOverrides?: typeof this.messages._overrides;
-    /** The component's default label. */
-    label?: string;
-    /**
-     * Indicates whether to display the video player's header information.
-     *
-     * @name hideHeader
-     * @instance
-     * @type {boolean}
-     * @default false
-     */
-    hideHeader: boolean;
-    /** Permanently destroy the component. */
-    destroy(): Promise<void>;
-    /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
-    readonly geoscenePropertyChange: TargetedEvent<this, {
-        name: "state" | "layer";
-    }>;
-    /** Emitted when the component associated with a map or scene view is is ready to be interacted with. */
-    readonly geosceneReady: TargetedEvent<this, void>;
-    readonly geosceneVideoReady: TargetedEvent<this, void>;
-    private messages: {
-        beginning: string;
-        color: string;
-        end: string;
-        errorLoadingLayer: string;
-        follow: string;
-        forward: string;
-        frame: string;
-        frameCenter: string;
-        frameInfo: string;
-        frameOutline: string;
-        graphics: string;
-        layers: string;
-        metadata: string;
-        metadataDescription: string;
-        metadataNotLoaded: string;
-        missionInfo: string;
-        none: string;
-        pause: string;
-        platformInfo: string;
-        play: string;
-        playbackSpeed: string;
-        quality: string;
-        reverse: string;
-        sensor: string;
-        sensorTrail: string;
-        settings: string;
-        sightLine: string;
-        speed: string;
-        video: string;
-        videoPlayer: string;
-    } & import('@geoscene/lumina/controllers').T9nMeta<{
-        beginning: string;
-        color: string;
-        end: string;
-        errorLoadingLayer: string;
-        follow: string;
-        forward: string;
-        frame: string;
-        frameCenter: string;
-        frameInfo: string;
-        frameOutline: string;
-        graphics: string;
-        layers: string;
-        metadata: string;
-        metadataDescription: string;
-        metadataNotLoaded: string;
-        missionInfo: string;
-        none: string;
-        pause: string;
-        platformInfo: string;
-        play: string;
-        playbackSpeed: string;
-        quality: string;
-        reverse: string;
-        sensor: string;
-        sensorTrail: string;
-        settings: string;
-        sightLine: string;
-        speed: string;
-        video: string;
-        videoPlayer: string;
-    }>;
-}
-export {};
+export abstract class GeosceneVideoPlayer extends LitElement {
+  /**
+   * If true, the component will not be destroyed automatically when it is
+   * disconnected from the document. This is useful when you want to move the
+   * component to a different place on the page, or temporarily hide it. If this
+   * is set, make sure to call the [destroy()](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-video-player/#destroy) method when you are done to
+   * prevent memory leaks.
+   *
+   * @default false
+   */
+  accessor autoDestroyDisabled: boolean;
+  /**
+   * Determines which telemetry elements to follow when the video layer is playing.
+   *
+   * @default "follow-both"
+   */
+  accessor followingMode: VideoPlayerViewModel["followingMode"];
+  /**
+   * Indicates whether to display the video player's header information.
+   *
+   * @default false
+   */
+  accessor hideHeader: boolean;
+  /**
+   * Icon which represents the component.
+   * Typically used when the component is controlled by another component (e.g. by the Expand component).
+   *
+   * @default "video-web"
+   * @see [Calcite Icons](https://doc.geoscene.cn/calcite-design-system/icons/)
+   */
+  accessor icon: string | undefined;
+  /** @default false */
+  accessor inline: boolean;
+  /** The component's default label. */
+  accessor label: string | undefined;
+  /**
+   * The [VideoLayer](https://doc.geoscene.cn/javascript/5.0/references/core/layers/VideoLayer/) to use as the data source for the video player.
+   *
+   * @default null
+   * @example
+   * ```js
+   * // Create a new Video Player with a VideoLayer
+   * videoPlayer.layer = videoLayer;
+   * ```
+   */
+  accessor layer: VideoLayer | null | undefined;
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: {
+      beginning?: string | undefined;
+      color?: string | undefined;
+      end?: string | undefined;
+      errorLoadingLayer?: string | undefined;
+      follow?: string | undefined;
+      forward?: string | undefined;
+      frame?: string | undefined;
+      frameCenter?: string | undefined;
+      frameInfo?: string | undefined;
+      frameOutline?: string | undefined;
+      graphics?: string | undefined;
+      layers?: string | undefined;
+      metadata?: string | undefined;
+      metadataDescription?: string | undefined;
+      metadataNotLoaded?: string | undefined;
+      missionInfo?: string | undefined;
+      none?: string | undefined;
+      pause?: string | undefined;
+      platformInfo?: string | undefined;
+      play?: string | undefined;
+      playbackSpeed?: string | undefined;
+      quality?: string | undefined;
+      reverse?: string | undefined;
+      sensor?: string | undefined;
+      sensorTrail?: string | undefined;
+      settings?: string | undefined;
+      sightLine?: string | undefined;
+      speed?: string | undefined;
+      video?: string | undefined;
+      videoPlayer?: string | undefined;
+  };
+  /** @internal */
+  protected messages: {
+      beginning: string;
+      color: string;
+      end: string;
+      errorLoadingLayer: string;
+      follow: string;
+      forward: string;
+      frame: string;
+      frameCenter: string;
+      frameInfo: string;
+      frameOutline: string;
+      graphics: string;
+      layers: string;
+      metadata: string;
+      metadataDescription: string;
+      metadataNotLoaded: string;
+      missionInfo: string;
+      none: string;
+      pause: string;
+      platformInfo: string;
+      play: string;
+      playbackSpeed: string;
+      quality: string;
+      reverse: string;
+      sensor: string;
+      sensorTrail: string;
+      settings: string;
+      sightLine: string;
+      speed: string;
+      video: string;
+      videoPlayer: string;
+  } & T9nMeta<{
+      beginning: string;
+      color: string;
+      end: string;
+      errorLoadingLayer: string;
+      follow: string;
+      forward: string;
+      frame: string;
+      frameCenter: string;
+      frameInfo: string;
+      frameOutline: string;
+      graphics: string;
+      layers: string;
+      metadata: string;
+      metadataDescription: string;
+      metadataNotLoaded: string;
+      missionInfo: string;
+      none: string;
+      pause: string;
+      platformInfo: string;
+      play: string;
+      playbackSpeed: string;
+      quality: string;
+      reverse: string;
+      sensor: string;
+      sensorTrail: string;
+      settings: string;
+      sightLine: string;
+      speed: string;
+      video: string;
+      videoPlayer: string;
+  }>;
+  /**
+   * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
+   *
+   * @see [Associate components with a Map or Scene component](https://doc.geoscene.cn/javascript/5.0/programming-patterns/#associate-components-with-a-map-or-scene-component)
+   */
+  accessor referenceElement: GeosceneReferenceElement | string | undefined;
+  /** @default false */
+  accessor showFullscreenToggle: boolean;
+  /** The current state of the component. */
+  get state(): "error" | VideoState;
+  /**
+   * The view associated with the component. 
+   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the geoscene-video-player component will be associated with a map or scene component rather than using the `view` property.
+   *
+   * @example
+   * // Set the video player view model's view to a map view.
+   * videoPlayerViewModel.view = mapView;
+   */
+  accessor view: MapView | null | undefined;
+  /** Permanently destroy the component. */
+  destroy(): Promise<void>;
+  /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
+  readonly geoscenePropertyChange: import("@geoscene/lumina").TargetedEvent<this, { name: "state" | "layer"; }>;
+  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  readonly geosceneReady: import("@geoscene/lumina").TargetedEvent<this, void>;
+  readonly geosceneVideoReady: import("@geoscene/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    geoscenePropertyChange: GeosceneVideoPlayer["geoscenePropertyChange"]["detail"];
+    geosceneReady: GeosceneVideoPlayer["geosceneReady"]["detail"];
+    geosceneVideoReady: GeosceneVideoPlayer["geosceneVideoReady"]["detail"];
+  };
+}

package/dist/components/geoscene-video-player/customElement.js

@@ -1,40 +1,31 @@
-import { c as h } from "../../chunks/runtime.js";
-import { html as i } from "lit-html";
-import { usePropertyChange as c } from "@geoscene/lumina/controllers";
-import { classes as v } from "@arcgis/components-utils";
-import u from "@geoscene/core/widgets/VideoPlayer/VideoPlayerViewModel.js";
+/* COPYRIGHT GeoScene - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as o } from "../../chunks/runtime.js";
+import { css as n, html as e } from "lit";
+import { usePropertyChange as d } from "@geoscene/lumina/controllers";
+import { classes as h } from "@geoscene/toolkit/dom";
+import c from "@geoscene/core/widgets/VideoPlayer/VideoPlayerViewModel.js";
 import { watch as t } from "@geoscene/core/core/reactiveUtils.js";
-import { LitElement as m, createEvent as a, noShadowRoot as g, safeClassMap as o } from "@geoscene/lumina";
-import { createRef as f, ref as _ } from "lit-html/directives/ref.js";
-import { u as p } from "../../chunks/useT9n.js";
-import { m as y } from "../../chunks/useViewModel.js";
+import { LitElement as u, createEvent as a, safeClassMap as g } from "@geoscene/lumina";
+import { createRef as m, ref as f } from "lit/directives/ref.js";
+import { u as v } from "../../chunks/useT9n.js";
+import { m as _ } from "../../chunks/useViewModel.js";
 import { g as w } from "../../chunks/globalCss.js";
-import { css as V } from "@lit/reactive-element/css-tag.js";
-/*! All material copyright GeoScene, All Rights Reserved, unless otherwise specified.
-See https://js.geoscene.cn/4.33/geoscene/copyright.txt for details.
-v4.33.18 */
-const M = V`@layer{.geoscene-video-player{--geoscene-video-player-view-height: 300px;--geoscene-video-player-view-aspect-ratio: 1.77;--geoscene-video-player-controls-spacing: 16px;min-width:calc(var(--geoscene-video-player-view-height) * var(--geoscene-video-player-view-aspect-ratio))}.geoscene-video-player .geoscene-video-player__video-view{display:flex;height:var(--geoscene-video-player-view-height)}}`, d = "geoscene-video-player", l = {
-  base: d,
-  videoView: `${d}__video-view`
-}, $ = y(u);
-class b extends m {
+const p = n`:host{--geoscene-internal-video-player-controls-spacing: 16px;width:531px;height:100%}:host([inline]){width:auto;height:auto}.root,.content{height:100%}.inline{display:flex;gap:var(--calcite-spacing-xs);background-color:var(--calcite-color-foreground-1);padding:var(--calcite-spacing-xxs)}.footer{flex:1}geoscene-video{display:flex;flex:1 1 auto;aspect-ratio:16 / 9;min-height:0}`, y = _(c);
+class $ extends u {
   constructor() {
-    super(...arguments), this.messages = p({ blocking: !0 }), this.viewModel = $(this), this._videoViewRef = f(), this._metadataVisible = !1, this._duration = 0, this._currentTime = 0, this._bufferedValue = 0, this._currentValue = 0, this._isBuffering = !1, this._videoViewReady = !1, this.position = "top-left", this.icon = "video-web", this.state = this.viewModel.state, this.layer = this.viewModel.layer, this.autoDestroyDisabled = !1, this.hideHeader = !1, this.geoscenePropertyChange = c()("state", "layer"), this.geosceneReady = a(), this.geosceneVideoReady = a();
+    super(...arguments), this.messages = v({ blocking: !0 }), this.viewModel = y(this), this._videoViewRef = m(), this._metadataVisible = !1, this._duration = 0, this._currentTime = 0, this._bufferedValue = 0, this._currentValue = 0, this._isBuffering = !1, this._videoViewReady = !1, this.icon = "video-web", this.state = this.viewModel.state, this.layer = this.viewModel.layer, this.autoDestroyDisabled = !1, this.inline = !1, this.showFullscreenToggle = !1, this.hideHeader = !1, this.view = this.viewModel.view, this.geoscenePropertyChange = d()("state", "layer"), this.geosceneReady = a(), this.geosceneVideoReady = a();
   }
   static {
-    this.properties = { _metadataVisible: 16, _duration: 16, _currentTime: 16, _bufferedValue: 16, _currentValue: 16, _isBuffering: 16, _videoViewReady: 16, _layerTitle: 16, _isLive: 16, referenceElement: 1, position: 3, icon: 1, state: 3, followingMode: 1, layer: 0, autoDestroyDisabled: 5, messageOverrides: 0, label: 3, hideHeader: 5 };
+    this.properties = { _metadataVisible: 16, _duration: 16, _currentTime: 16, _bufferedValue: 16, _currentValue: 16, _isBuffering: 16, _videoViewReady: 16, _layerTitle: 16, _isLive: 16, referenceElement: 1, icon: 1, state: 32, followingMode: 1, layer: 0, autoDestroyDisabled: 5, messageOverrides: 0, label: 3, inline: 7, showFullscreenToggle: 5, hideHeader: 5, view: 0 };
   }
   static {
-    this.styles = M;
-  }
-  static {
-    this.shadowRootOptions = g;
+    this.styles = p;
   }
   get followingMode() {
     return this.viewModel.followingMode;
   }
-  set followingMode(e) {
-    this.viewModel.followingMode = e;
+  set followingMode(i) {
+    this.viewModel.followingMode = i;
   }
   async destroy() {
     await this.manager.destroy();
@@ -42,44 +33,43 @@ class b extends m {
   loaded() {
     this.manager.onLifecycle(() => [
       t(() => [this.viewModel.currentTime, this.viewModel.duration, this.viewModel.duration, this.viewModel.ended], () => {
-        const { buffered: e, currentTime: s, duration: r, ended: n } = this.viewModel;
-        this._duration = r, this._currentTime = s, this._bufferedValue = e / (r || 1), this._currentValue = s / (r || 1), this._isBuffering = !n && this._bufferedValue < this._currentValue;
+        const { buffered: i, currentTime: r, duration: s, ended: l } = this.viewModel;
+        this._duration = s, this._currentTime = r, this._bufferedValue = i / (s || 1), this._currentValue = r / (s || 1), this._isBuffering = !l && this._bufferedValue < this._currentValue;
       }),
-      t(() => this._videoViewRef.value?.ready, (e) => {
-        this._videoViewReady = !!e;
-      }, { initial: !0 }),
-      t(() => this.layer?.title, (e) => {
-        this._layerTitle = e ?? void 0;
+      t(() => this.layer?.title, (i) => {
+        this._layerTitle = i ?? void 0;
       }, { initial: !0 }),
-      t(() => this.layer?.isLive, (e) => {
-        this._isLive = e ?? void 0;
+      t(() => this.layer?.isLive, (i) => {
+        this._isLive = i ?? void 0;
       }, { initial: !0 }),
       t(() => this.viewModel.view?.map, () => this.requestUpdate())
     ]);
   }
   render() {
-    return i`<div class=${o(v(l.base, w.widget))}><calcite-panel .heading=${this.hideHeader ? void 0 : this._layerTitle ?? this.messages.videoPlayer}>${this._renderLoadingScrim()}${this._renderBuffering()}${this._renderVideoSection()}${this._renderSlider()}${this._renderActionBar()}${this._renderMetadataSection()}</calcite-panel></div>`;
+    return e`<div class=${g(h(this.inline ? "inline" : "root", w.widget))}><calcite-panel .heading=${this.hideHeader || this.inline ? void 0 : this._layerTitle ?? this.messages.videoPlayer}>${this.inline || this.hideHeader || !this.showFullscreenToggle ? null : e`<calcite-action slot=header-actions-end icon=full-screen-exit text=minimize @click=${() => this.inline = !this.inline}></calcite-action>`}${this.inline ? e`<div class="inline">${this._renderActionBar()}${this._renderSlider()}${this.showFullscreenToggle ? e`<calcite-action icon=full-screen text=maximize @click=${() => this.inline = !this.inline}></calcite-action>` : null}</div>` : e`<div class="content">${this._renderLoadingScrim()}${this._renderBuffering()}${this._renderVideoSection()}</div>`}${this.inline ? null : e`<div slot=footer class="footer">${this._renderSlider()}${this._renderActionBar()}${this._renderMetadataSection()}</div>`}</calcite-panel></div>`;
   }
   _renderLoadingScrim() {
-    return this._videoViewReady ? null : i`<calcite-scrim .loading=${this.state !== "error"}>${this.state === "error" ? this.messages.errorLoadingLayer : null}</calcite-scrim>`;
+    return this._videoViewReady ? null : e`<calcite-scrim .loading=${this.state !== "error"}>${this.state === "error" ? this.messages.errorLoadingLayer : null}</calcite-scrim>`;
   }
   _renderBuffering() {
-    return this._isBuffering ? i`<calcite-progress type=indeterminate></calcite-progress>` : null;
+    return this._isBuffering ? e`<calcite-progress type=indeterminate></calcite-progress>` : null;
   }
   _renderVideoSection() {
-    return i`<div class=${o(l.videoView)}><geoscene-video .layer=${this.layer} .map=${this.viewModel.view?.map} @geosceneViewReadyChange=${() => this.geosceneVideoReady.emit()} ${_(this._videoViewRef)}></geoscene-video></div>`;
+    return e`<geoscene-video .layer=${this.layer} .map=${this.viewModel.view?.map} @geosceneViewReadyChange=${() => {
+      this._videoViewReady = !0, this.geosceneVideoReady.emit();
+    }} ${f(this._videoViewRef)}></geoscene-video>`;
   }
   _renderSlider() {
-    return this._isLive ? null : i`<geoscene-video-player-slider .buffered=${this._bufferedValue} .value=${this._currentValue * 100} .viewModel=${this.viewModel}></geoscene-video-player-slider>`;
+    return this._isLive ? null : e`<geoscene-video-player-slider .buffered=${this._bufferedValue} .value=${this._currentValue * 100} .viewModel=${this.viewModel}></geoscene-video-player-slider>`;
   }
   _renderActionBar() {
-    return i`<geoscene-video-player-action-bar .currentTime=${this._currentTime} .duration=${this._duration} .messages=${this.messages} .toggleMetadata=${() => this._metadataVisible = !this._metadataVisible} .viewModel=${this.viewModel}></geoscene-video-player-action-bar>`;
+    return e`<geoscene-video-player-action-bar .currentTime=${this._currentTime} .duration=${this._duration} .messages=${this.messages} .toggleMetadata=${() => this._metadataVisible = !this._metadataVisible} .viewModel=${this.viewModel} .inline=${this.inline}></geoscene-video-player-action-bar>`;
   }
   _renderMetadataSection() {
-    return this._metadataVisible ? i`<geoscene-video-player-metadata .messages=${this.messages} .viewModel=${this.viewModel}></geoscene-video-player-metadata>` : null;
+    return this._metadataVisible ? e`<geoscene-video-player-metadata .messages=${this.messages} .viewModel=${this.viewModel}></geoscene-video-player-metadata>` : null;
   }
 }
-h("geoscene-video-player", b);
+o("geoscene-video-player", $);
 export {
-  b as GeosceneVideoPlayer
+  $ as GeosceneVideoPlayer
 };

package/dist/components/geoscene-video-player/index.d.ts

@@ -1,8 +1 @@
-import "@geoscene/calcite-components/components/calcite-panel";
-import "@geoscene/calcite-components/components/calcite-scrim";
-import "@geoscene/calcite-components/components/calcite-progress";
-import "../geoscene-video/index.js";
-import "../geoscene-video-player-slider/index.js";
-import "../geoscene-video-player-action-bar/index.js";
-import "../geoscene-video-player-metadata/index.js";
 export * from "./customElement.js";

package/dist/components/geoscene-video-player/index.js

@@ -1,4 +1,5 @@
 import "@geoscene/calcite-components/components/calcite-panel";
+import "@geoscene/calcite-components/components/calcite-action";
 import "@geoscene/calcite-components/components/calcite-scrim";
 import "@geoscene/calcite-components/components/calcite-progress";
 import "../geoscene-video/index.js";