@geoscene/map-components 4.34.9 → 5.0.20

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

@@ -1,29 +1,33 @@
-import { c as h } from "../../chunks/runtime.js";
-import { css as n, html as e } from "lit";
-import { useDirection as l } from "@geoscene/lumina/controllers";
+/* COPYRIGHT GeoScene - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as o } from "../../chunks/runtime.js";
+import { css as h, html as e } from "lit";
+import { useDirection as n } from "@geoscene/lumina/controllers";
 import { watch as t } from "@geoscene/core/core/reactiveUtils.js";
-import c from "@geoscene/core/views/VideoView.js";
-import { LitElement as m, createEvent as d, safeClassMap as s } from "@geoscene/lumina";
+import l from "@geoscene/core/views/VideoView.js";
+import { LitElement as c, createEvent as m, safeClassMap as d } from "@geoscene/lumina";
 import { makeAccessorController as y } from "@geoscene/lumina/controllers/accessor";
-import { createRef as a, ref as r } from "lit/directives/ref.js";
-import { s as f, C as o, a as p } from "../../chunks/slots.js";
+import { createRef as s, ref as r } from "lit/directives/ref.js";
+import { s as f, C as a, S as p } from "../../chunks/slots.js";
 import { s as w } from "../../chunks/geoscene-main.js";
-/*! All material copyright GeoScene, All Rights Reserved, unless otherwise specified.
-See https://js.geoscene.cn/4.34/geoscene/copyright.txt for details.
-v4.34.9 */
-const v = n`:host{width:100%;height:100%}`, u = y(c, {
+const v = h`:host{width:100%;height:100%}`, u = y(l, {
   omitProps: ["container", "navigation", "scale", "ui"]
 });
-class g extends m {
+class g extends c {
   constructor() {
-    super(), this._containerRef = a(), this._direction = l(), this._mapRef = a(), this.autoDestroyDisabled = !1, this.view = u(this), this.aria = this.view.aria, this.ready = this.view.ready, this.layer = this.view.layer, this.map = this.view.map, this.geosceneViewReadyChange = d();
+    super(), this._containerRef = s(), this._direction = n(), this._mapRef = s(), this.autoDestroyDisabled = !1, this.view = u(this), this.attributionMode = this.view.attributionMode, this.ready = this.view.ready, this.layer = this.view.layer, this.map = this.view.map, this.geosceneViewReadyChange = m();
   }
   static {
-    this.properties = { autoDestroyDisabled: 5, view: 32, aria: 0, ready: 4, layer: 0, map: 0 };
+    this.properties = { autoDestroyDisabled: 5, view: 32, aria: 0, attributionMode: 1, ready: 36, layer: 0, map: 0 };
   }
   static {
     this.styles = [w, f, v];
   }
+  get aria() {
+    return this.view?.aria;
+  }
+  set aria(i) {
+    this.view && (this.view.aria = i);
+  }
   async destroy() {
     await this.manager.destroy();
   }
@@ -39,13 +43,13 @@ class g extends m {
     ]);
   }
   renderMain() {
-    return e`<div class=${s(o.base)} ${r(this._mapRef)}></div>`;
+    return e`<div class=${`root ${a.base}`} ${r(this._mapRef)}></div>`;
   }
   render() {
-    return e`<section class=${s(o.containerUI)} ${r(this._containerRef)}>${p(this._direction)}</section>${this.renderMain()}`;
+    return e`${this.renderMain()}<section class=${d(a.containerUI)} ${r(this._containerRef)}>${p({ direction: this._direction })}</section>`;
   }
 }
-h("geoscene-video", g);
+o("geoscene-video", g);
 export {
   g as GeosceneVideo
 };

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

@@ -1 +1,2 @@
+import "../geoscene-popup/index.js";
 export * from "./customElement.js";

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

@@ -1,13 +1,14 @@
-/// <reference types="@geoscene/core/interfaces.d.ts" />
 /// <reference path="../../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';
+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,16 +19,14 @@ 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
@@ -46,7 +45,7 @@ declare const useVideoPlayerViewModel: (component: LitElement & Pick<VideoPlayer
  *     url: "YOUR_VIDEO_LAYER_URL",
  *   });
  *   viewElement.map = new Map({
- *     basemap: "topo-vector",
+ *     basemap: "tianditu-vector",
  *     layers: [videoLayer],
  *   });
  *   await viewElement.viewOnReady();
@@ -60,149 +59,182 @@ declare const useVideoPlayerViewModel: (component: LitElement & Pick<VideoPlayer
  * ```
  * @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;
-    /** @deprecated since 4.34, use [`slot`](https://doc.geoscene.cn/javascript/4.33/building-your-ui/#slots) instead. */
-    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;
-    /**
-     * 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 Video Player component will be associated with a map or scene component rather than using the `view` property.
-     *
-     * @default null
-     */
-    view?: __geoscene.MapView | nullish;
-    /** 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 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,33 +1,31 @@
-import { c as d } from "../../chunks/runtime.js";
-import { css as l, html as i } from "lit";
-import { usePropertyChange as n } from "@geoscene/lumina/controllers";
-import { classes as h } from "@arcgis/toolkit/dom";
+/* 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 u, createEvent as a, safeClassMap as m } from "@geoscene/lumina";
-import { createRef as g, ref as v } from "lit/directives/ref.js";
-import { u as f } from "../../chunks/useT9n.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 y } from "../../chunks/globalCss.js";
-/*! All material copyright GeoScene, All Rights Reserved, unless otherwise specified.
-See https://js.geoscene.cn/4.34/geoscene/copyright.txt for details.
-v4.34.9 */
-const w = l`:host{--geoscene-video-player-controls-spacing: 16px;width:531px;height:100%}.geoscene-video-player{height:100%}geoscene-video{display:flex;flex:1 1 auto;aspect-ratio:16 / 9;min-height:0}`, p = { base: "geoscene-video-player" }, V = _(c);
-class M extends u {
+import { g as w } from "../../chunks/globalCss.js";
+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 = f({ blocking: !0 }), this.viewModel = V(this), this._videoViewRef = g(), 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.hideHeader = !1, this.view = this.viewModel.view, this.geoscenePropertyChange = n()("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, view: 0 };
+    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 = w;
+    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();
@@ -35,44 +33,43 @@ class M extends u {
   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: o } = this.viewModel;
-        this._duration = r, this._currentTime = s, this._bufferedValue = e / (r || 1), this._currentValue = s / (r || 1), this._isBuffering = !o && 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;
+      t(() => this.layer?.title, (i) => {
+        this._layerTitle = i ?? void 0;
       }, { initial: !0 }),
-      t(() => this.layer?.title, (e) => {
-        this._layerTitle = e ?? 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=${m(h(p.base, y.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`<geoscene-video .layer=${this.layer} .map=${this.viewModel.view?.map} @geosceneViewReadyChange=${() => this.geosceneVideoReady.emit()} ${v(this._videoViewRef)}></geoscene-video>`;
+    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;
   }
 }
-d("geoscene-video-player", M);
+o("geoscene-video-player", $);
 export {
-  M 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";