@arcgis/map-components 5.0.0-next.99 → 5.0.1

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

@@ -1,13 +1,14 @@
-/// <reference types="@arcgis/core/interfaces.d.ts" />
 /// <reference path="../../index.d.ts" />
-import { Use } from '@arcgis/lumina/controllers';
-import { default as VideoPlayerViewModel } from '@arcgis/core/widgets/VideoPlayer/VideoPlayerViewModel.js';
-import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { ArcgisReferenceElement } from '../../utils/component-utils';
+import type VideoPlayerViewModel from "@arcgis/core/widgets/VideoPlayer/VideoPlayerViewModel.js";
+import type VideoLayer from "@arcgis/core/layers/VideoLayer.js";
+import type MapView from "@arcgis/core/views/MapView.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { ArcgisReferenceElement } from "../types.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+import type { VideoState } from "@arcgis/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/esri-layers-VideoLayer.html).
+ * The Video Player component provides a user interface for interacting with a [VideoLayer](https://developers.arcgis.com/javascript/latest/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://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-VideoPlayer-VideoPlayerViewModel.html) class provides the logic for the Video Player.
+ * The [VideoPlayerViewModel](https://developers.arcgis.com/javascript/latest/references/core/widgets/VideoPlayer/VideoPlayerViewModel/) class provides the logic for the Video Player.
  *
  * **Known limitations**
  *
- * * Not supported in 3D [Scenes](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/).
+ * * Not supported in 3D [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/).
  * * Not supported on macOS and iOS devices.
  *
- * [![](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/video-player-video-preview.png)](https://mediaspace.esri.com/media/1_ctc3psfr)
- *
- * [Read more...](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-video-player/)
+ * [![](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/video-player-video-preview.png)](https://mediaspace.esri.com/media/1_ctc3psfr)
  *
  * @example
  * ```html
@@ -60,151 +59,182 @@ declare const useVideoPlayerViewModel: (component: LitElement & Pick<VideoPlayer
  * ```
  * @since 4.33
  */
-export declare class ArcgisVideoPlayer 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://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
-     */
-    referenceElement?: ArcgisReferenceElement | string;
-    /** @deprecated since 4.34, use [`slot`](https://developers.arcgis.com/javascript/latest/building-your-ui/#slots) instead. */
-    position?: __esri.UIPosition;
-    /**
-     * 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://developers.arcgis.com/calcite-design-system/icons/)
-     */
-    icon?: string;
-    /** The current state of the component. */
-    readonly state: "error" | import('@arcgis/core/layers/video/types').VideoState;
-    /**
-     * 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://developers.arcgis.com/javascript/latest/api-reference/esri-layers-VideoLayer.html) to use as the data source for the video player.
-     *
-     * @default null
-     * @noautocast
-     * @example
-     * ```js
-     * // Create a new Video Player with a VideoLayer
-     * videoPlayer.layer = videoLayer;
-     * ```
-     */
-    layer: import('@arcgis/core/layers/VideoLayer').default | null | undefined;
-    /**
-     * 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://developers.arcgis.com/javascript/latest/references/map-components/arcgis-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.
-     *
-     * @default false
-     * @name hideHeader
-     * @instance
-     * @type {boolean}
-     */
-    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.
-     *
-     * @example
-     * // Set the video player view model's view to a map view.
-     * videoPlayerViewModel.view = mapView;
-     */
-    view?: import('@arcgis/core/views/MapView').default | 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 arcgisPropertyChange: TargetedEvent<this, {
-        name: "state" | "layer";
-    }>;
-    /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
-    readonly arcgisReady: TargetedEvent<this, void>;
-    readonly arcgisVideoReady: 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('@arcgis/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 ArcgisVideoPlayer 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://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-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://developers.arcgis.com/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://developers.arcgis.com/javascript/latest/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://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
+   */
+  accessor referenceElement: ArcgisReferenceElement | 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 arcgis-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 arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "state" | "layer"; }>;
+  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly arcgisVideoReady: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    arcgisPropertyChange: ArcgisVideoPlayer["arcgisPropertyChange"]["detail"];
+    arcgisReady: ArcgisVideoPlayer["arcgisReady"]["detail"];
+    arcgisVideoReady: ArcgisVideoPlayer["arcgisVideoReady"]["detail"];
+  };
+}

package/dist/components/arcgis-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 "@arcgis/lumina/controllers";
+/* COPYRIGHT Esri - https://js.arcgis.com/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 "@arcgis/lumina/controllers";
 import { classes as h } from "@arcgis/toolkit/dom";
 import c from "@arcgis/core/widgets/VideoPlayer/VideoPlayerViewModel.js";
 import { watch as t } from "@arcgis/core/core/reactiveUtils.js";
-import { LitElement as u, createEvent as a, safeClassMap as m } from "@arcgis/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 "@arcgis/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 Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.99 */
-const w = l`:host{--arcgis-video-player-controls-spacing: 16px;width:531px;height:100%}.arcgis-video-player{height:100%}arcgis-video{display:flex;flex:1 1 auto;aspect-ratio:16 / 9;min-height:0}`, p = { base: "arcgis-video-player" }, V = _(c);
-class M extends u {
+import { g as w } from "../../chunks/globalCss.js";
+const p = n`:host{--arcgis-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}arcgis-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.arcgisPropertyChange = n()("state", "layer"), this.arcgisReady = a(), this.arcgisVideoReady = 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.arcgisPropertyChange = d()("state", "layer"), this.arcgisReady = a(), this.arcgisVideoReady = 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`<arcgis-video .layer=${this.layer} .map=${this.viewModel.view?.map} @arcgisViewReadyChange=${() => this.arcgisVideoReady.emit()} ${v(this._videoViewRef)}></arcgis-video>`;
+    return e`<arcgis-video .layer=${this.layer} .map=${this.viewModel.view?.map} @arcgisViewReadyChange=${() => {
+      this._videoViewReady = !0, this.arcgisVideoReady.emit();
+    }} ${f(this._videoViewRef)}></arcgis-video>`;
   }
   _renderSlider() {
-    return this._isLive ? null : i`<arcgis-video-player-slider .buffered=${this._bufferedValue} .value=${this._currentValue * 100} .viewModel=${this.viewModel}></arcgis-video-player-slider>`;
+    return this._isLive ? null : e`<arcgis-video-player-slider .buffered=${this._bufferedValue} .value=${this._currentValue * 100} .viewModel=${this.viewModel}></arcgis-video-player-slider>`;
   }
   _renderActionBar() {
-    return i`<arcgis-video-player-action-bar .currentTime=${this._currentTime} .duration=${this._duration} .messages=${this.messages} .toggleMetadata=${() => this._metadataVisible = !this._metadataVisible} .viewModel=${this.viewModel}></arcgis-video-player-action-bar>`;
+    return e`<arcgis-video-player-action-bar .currentTime=${this._currentTime} .duration=${this._duration} .messages=${this.messages} .toggleMetadata=${() => this._metadataVisible = !this._metadataVisible} .viewModel=${this.viewModel} .inline=${this.inline}></arcgis-video-player-action-bar>`;
   }
   _renderMetadataSection() {
-    return this._metadataVisible ? i`<arcgis-video-player-metadata .messages=${this.messages} .viewModel=${this.viewModel}></arcgis-video-player-metadata>` : null;
+    return this._metadataVisible ? e`<arcgis-video-player-metadata .messages=${this.messages} .viewModel=${this.viewModel}></arcgis-video-player-metadata>` : null;
   }
 }
-d("arcgis-video-player", M);
+o("arcgis-video-player", $);
 export {
-  M as ArcgisVideoPlayer
+  $ as ArcgisVideoPlayer
 };

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

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

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

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

package/dist/components/arcgis-video-player-action-bar/customElement.js

@@ -1,43 +1,36 @@
-import { c as n } from "../../chunks/runtime.js";
-import { css as d, html as t } from "lit";
-import { formatDate as p } from "@arcgis/core/intl.js";
-import { LitElement as g, safeClassMap as i } from "@arcgis/lumina";
-import { watch as v } from "@arcgis/core/core/reactiveUtils.js";
-import { classes as y } from "@arcgis/toolkit/dom";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.99 */
-const m = d`.arcgis-video-player__toolbar{display:flex;align-items:center;background-color:var(--calcite-color-foreground-1);padding:0 calc(var(--arcgis-video-player-controls-spacing) / 2) calc(var(--arcgis-video-player-controls-spacing) / 2);font-size:var(--calcite-font-size--2)}.arcgis-video-player__toolbar-top-padding{padding-top:calc(var(--arcgis-video-player-controls-spacing) / 2)}.arcgis-video-player__timecode{display:flex;align-items:center;color:var(--calcite-color-text-3)}.arcgis-video-player__controls-group{display:flex;flex:1 0 auto;justify-content:flex-end}.arcgis-video-player__live-icon{color:var(--calcite-color-status-danger)}.arcgis-video-player__controls-container{display:flex;align-items:center;gap:var(--calcite-spacing-md)}`, e = "arcgis-video-player", o = {
-  playerControlsGroup: `${e}__controls-group`,
-  playerTimecode: `${e}__timecode`,
-  playerToolbar: `${e}__toolbar`,
-  playerToolbarTopPadding: `${e}__toolbar-top-padding`,
-  playerLiveIcon: `${e}__live-icon`,
-  playerControlsContainer: `${e}__controls-container`
-};
-function r(s) {
-  return p(Math.round(s) * 1e3, { minute: "2-digit", second: "2-digit" });
+/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
+import { c as a } from "../../chunks/runtime.js";
+import { css as r, html as e } from "lit";
+import { formatDate as l } from "@arcgis/core/intl.js";
+import { LitElement as c, safeClassMap as n } from "@arcgis/lumina";
+import { watch as d } from "@arcgis/core/core/reactiveUtils.js";
+import { classes as m } from "@arcgis/toolkit/dom";
+const v = r`.toolbar{display:flex;align-items:center;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--2)}.timecode{color:var(--calcite-color-text-3);line-height:1.25rem}.controls-group{display:flex;flex:1 0 auto;justify-content:flex-end}.live-icon{color:var(--calcite-color-status-danger)}.controls-container{display:flex;align-items:center;gap:var(--calcite-spacing-md)}`;
+function t(s) {
+  return l(Math.round(s) * 1e3, { minute: "2-digit", second: "2-digit" });
 }
-class _ extends g {
+class g extends c {
   static {
-    this.properties = { _isLive: 16, viewModel: 0, messages: 0, currentTime: 9, duration: 9, toggleMetadata: 0 };
+    this.properties = { _isLive: 16, viewModel: 0, messages: 0, currentTime: 9, duration: 9, toggleMetadata: 0, inline: 5 };
   }
   static {
-    this.styles = m;
+    this.styles = v;
   }
   loaded() {
     this.manager.onLifecycle(() => [
-      v(() => this.viewModel.layer?.isLive, (a) => {
-        this._isLive = a ?? void 0;
+      d(() => this.viewModel.layer?.isLive, (i) => {
+        this._isLive = i ?? void 0;
       }, { initial: !0 })
     ]);
   }
   render() {
-    const { messages: a } = this, l = this._isLive ? o.playerToolbarTopPadding : null, c = this._isLive ? r(this.currentTime) : `${r(this.currentTime)} / ${r(this.duration)}`;
-    return t`<div class=${i(y(o.playerToolbar, l))}><div class=${i(o.playerControlsContainer)}><arcgis-video-player-actions-group .messages=${a} .viewModel=${this.viewModel}></arcgis-video-player-actions-group>${this._isLive ? t`<calcite-icon class=${i(o.playerLiveIcon)} icon=beacon></calcite-icon>` : null}<div class=${i(o.playerTimecode)}>${c}</div></div><arcgis-video-player-controls-group class=${i(o.playerControlsGroup)} .messages=${a} .toggleMetadata=${() => this.toggleMetadata()} .viewModel=${this.viewModel}></arcgis-video-player-controls-group></div>`;
+    const { messages: i } = this;
+    this._isLive === void 0 && (this._isLive = this.viewModel.layer?.isLive);
+    const o = this._isLive ? t(this.currentTime) : `${t(this.currentTime)} / ${t(this.duration)}`;
+    return e`<div class=${n(m("toolbar"))}><div class="controls-container"><arcgis-video-player-actions-group .inline=${this.inline} .messages=${i} .viewModel=${this.viewModel}></arcgis-video-player-actions-group>${this._isLive ? e`<calcite-icon class="live-icon" icon=beacon></calcite-icon>` : null}${!this.inline || this._isLive ? e`<div class="timecode">${o}</div>` : null}</div>${this.inline ? null : e`<arcgis-video-player-controls-group class="controls-group" .messages=${i} .toggleMetadata=${() => this.toggleMetadata()} .viewModel=${this.viewModel}></arcgis-video-player-controls-group>`}</div>`;
   }
 }
-n("arcgis-video-player-action-bar", _);
+a("arcgis-video-player-action-bar", g);
 export {
-  _ as VideoPlayerActionBar
+  g as VideoPlayerActionBar
 };