@arcgis/map-components 5.2.0-next.14 → 5.2.0-next.141

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

@@ -1,5 +1,5 @@
 /// <reference path="../../index.d.ts" />
-import type VideoPlayerViewModel from "@arcgis/core/widgets/VideoPlayer/VideoPlayerViewModel.js";
+import type VideoPlayerViewModel from "./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";
@@ -19,14 +19,12 @@ import type { VideoState } from "@arcgis/core/layers/video/types.js";
  *  - Adjustable speed and quality
  *  - Access to frame metadata
  *
- * 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 [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/references/core/widgets/video-player-video-preview.avif)](https://mediaspace.esri.com/media/1_ctc3psfr)
+ * [![](https://developers.arcgis.com/javascript/latest/assets/references/components/video-player/video-player-video-preview.avif)](https://mediaspace.esri.com/media/1_ctc3psfr)
  *
  * @example
  * ```html
@@ -68,6 +66,15 @@ export abstract class ArcgisVideoPlayer extends LitElement {
    * prevent memory leaks.
    *
    * @default false
+   * @example
+   * ```html
+   * <arcgis-video-player auto-destroy-disabled></arcgis-video-player>
+   * ```
+   *
+   * ```js
+   * videoPlayerElement.autoDestroyDisabled = true;
+   * ```
+   * 
    */
   accessor autoDestroyDisabled: boolean;
   /**
@@ -110,7 +117,7 @@ export abstract class ArcgisVideoPlayer extends LitElement {
    * videoPlayer.layer = videoLayer;
    * ```
    */
-  accessor layer: VideoLayer | null | undefined;
+  accessor layer: VideoLayer | undefined;
   /**
    * Replace localized message strings with your own strings.
    *
@@ -141,6 +148,7 @@ export abstract class ArcgisVideoPlayer extends LitElement {
       pause?: string | undefined;
       platformInfo?: string | undefined;
       play?: string | undefined;
+      playbackProgress?: string | undefined;
       playbackSpeed?: string | undefined;
       quality?: string | undefined;
       reverse?: string | undefined;
@@ -179,6 +187,7 @@ export abstract class ArcgisVideoPlayer extends LitElement {
       pause: string;
       platformInfo: string;
       play: string;
+      playbackProgress: string;
       playbackSpeed: string;
       quality: string;
       reverse: string;
@@ -215,6 +224,7 @@ export abstract class ArcgisVideoPlayer extends LitElement {
       pause: string;
       platformInfo: string;
       play: string;
+      playbackProgress: string;
       playbackSpeed: string;
       quality: string;
       reverse: string;
@@ -250,19 +260,19 @@ export abstract class ArcgisVideoPlayer extends LitElement {
   /** 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.
+   * 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;
+  accessor view: MapView | 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. */
+  /** Emitted when the component associated with a map or scene view is ready for user interaction. */
   readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly arcgisVideoReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {

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

@@ -1,26 +1,234 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as h } from "../../chunks/runtime.js";
-import { css as u, html as e } from "lit";
-import { watch as t } from "@arcgis/core/core/reactiveUtils.js";
-import f from "@arcgis/core/widgets/VideoPlayer/VideoPlayerViewModel.js";
-import { LitElement as g, createEvent as l, safeClassMap as m } from "@arcgis/lumina";
-import { usePropertyChange as v } from "@arcgis/lumina/controllers";
-import { classes as p } from "@arcgis/toolkit/dom";
-import { createRef as _, ref as y } from "lit/directives/ref.js";
-import { u as w } from "../../chunks/useT9n.js";
-import { m as V } from "../../chunks/useViewModel.js";
-import { g as $ } from "../../chunks/globalCss.js";
-import { n as r } from "../../chunks/video-utils.js";
-const M = u`: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}`, b = V(f);
-class T extends g {
+import { c as g } from "../../chunks/runtime.js";
+import { css as v, html as s } from "lit";
+import { watch as d } from "@arcgis/core/core/reactiveUtils.js";
+import { LitElement as w, createEvent as u, safeClassMap as _ } from "@arcgis/lumina";
+import { usePropertyChange as T } from "@arcgis/lumina/controllers";
+import { classes as M } from "@arcgis/toolkit/dom";
+import { createRef as b, ref as D } from "lit/directives/ref.js";
+import { u as V } from "../../chunks/useT9n.js";
+import { m as $ } from "../../chunks/useViewModel.js";
+import { g as P } from "../../chunks/globalCss.js";
+import { n as f } from "../../chunks/video-utils.js";
+import C from "@arcgis/core/core/Accessor.js";
+import { property as l, subclass as S } from "@arcgis/core/core/accessorSupport/decorators.js";
+var L = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (e, i, n, h) => {
+  for (var r = h > 1 ? void 0 : h ? k(i, n) : i, y = e.length - 1, c; y >= 0; y--)
+    (c = e[y]) && (r = (h ? c(i, n, r) : c(r)) || r);
+  return h && r && L(i, n, r), r;
+};
+const o = {
+  FrameCenterElevation: 10025,
+  FrameCenterLatitude: 10023,
+  FrameCenterLongitude: 10024,
+  MissionId: 10003,
+  PlatformCallSign: 10059,
+  PlatformDesignation: 10010,
+  PlatformGroundRange: 10057,
+  PlatformTailNumber: 10004,
+  PlatformTrueAirspeed: 10008,
+  PrecisionTimeStamp: 10002
+};
+function m(e, i) {
+  const n = {};
+  for (const h of i) {
+    const r = e.get(h);
+    r && (n[r.name] = String(r.value));
+  }
+  return n;
+}
+let t = class extends C {
+  //#region Lifecycle
+  constructor(e) {
+    super(e), this.followingMode = "follow-both", this.seekLength = 10;
+  }
+  initialize() {
+    this.addHandles([
+      d(
+        () => this.layer,
+        (e, i) => {
+          i && i.pause(), e && e.load().then(() => this._followTelemetry()).catch(() => {
+          });
+        },
+        { initial: !0 }
+      ),
+      d(
+        () => [this.followingMode],
+        () => this._followTelemetry(),
+        { initial: !0 }
+      )
+    ]);
+  }
+  get buffered() {
+    return this.layer?.buffered || 0;
+  }
+  get currentTime() {
+    return this.layer?.currentTime || 0;
+  }
+  get duration() {
+    return this.layer?.duration || 0;
+  }
+  get ended() {
+    return this.layer?.ended ?? !0;
+  }
+  get metadata() {
+    const e = this.layer?.metadata;
+    return e ? {
+      missionInfo: m(e, [o.MissionId, o.PrecisionTimeStamp]),
+      platformInfo: m(e, [
+        o.PlatformTailNumber,
+        o.PlatformTrueAirspeed,
+        o.PlatformCallSign,
+        o.PlatformDesignation,
+        o.PlatformGroundRange
+      ]),
+      frameInfo: m(e, [
+        o.FrameCenterElevation,
+        o.FrameCenterLatitude,
+        o.FrameCenterLongitude
+      ])
+    } : null;
+  }
+  get playing() {
+    return this.layer?.playing ?? !1;
+  }
+  previewsInfo() {
+    return this.layer?.previewsInfo || null;
+  }
+  get state() {
+    return this.layer?.loadError ? "error" : this.layer?.state ?? "not-ready";
+  }
+  //#endregion
+  //#region Public Methods
+  changeGraphicsColor(e) {
+    e && this.layer.updateTelemetryColor(e);
+  }
+  changePlaybackSpeed(e) {
+    this.layer && (this.layer.playbackRate = e);
+  }
+  pause() {
+    this.layer?.pause();
+  }
+  play() {
+    this.layer?.play();
+  }
+  seekBackward() {
+    if (this.layer) {
+      const e = this.layer.currentTime - this.seekLength;
+      e <= 0 ? this.layer.reset() : this.layer.setCurrentTime(e);
+    }
+  }
+  seekForward() {
+    if (this.layer) {
+      const e = this.layer.currentTime + this.seekLength;
+      e >= this.layer.duration ? this.layer.reset() : this.layer.setCurrentTime(e);
+    }
+  }
+  seekTo(e) {
+    this.layer?.setCurrentTime(e);
+  }
+  seekToBeginning() {
+    this.layer?.setCurrentTime(0);
+  }
+  seekToEnding() {
+    this.layer?.setCurrentTime(this.layer.duration);
+  }
+  toggleFrameCenterDisplay() {
+    this.layer?.telemetryDisplay && (this.layer.telemetryDisplay.frameCenter = !this.layer.telemetryDisplay.frameCenter);
+  }
+  toggleFrameDisplay() {
+    this.layer?.telemetryDisplay && (this.layer.telemetryDisplay.frame = !this.layer.telemetryDisplay.frame);
+  }
+  toggleFrameOutlineDisplay() {
+    this.layer?.telemetryDisplay && (this.layer.telemetryDisplay.frameOutline = !this.layer.telemetryDisplay.frameOutline);
+  }
+  toggleLoopPlayback() {
+    this.layer && (this.layer.loop = !this.layer.loop);
+  }
+  toggleSensorDisplay() {
+    this.layer?.telemetryDisplay && (this.layer.telemetryDisplay.sensorLocation = !this.layer.telemetryDisplay.sensorLocation);
+  }
+  toggleSensorPathDisplay() {
+    this.layer?.telemetryDisplay && (this.layer.telemetryDisplay.sensorPath = !this.layer.telemetryDisplay.sensorPath);
+  }
+  toggleSensorSightLineDisplay() {
+    this.layer?.telemetryDisplay && (this.layer.telemetryDisplay.lineOfSight = !this.layer.telemetryDisplay.lineOfSight);
+  }
+  toggleSensorTrailDisplay() {
+    this.layer?.telemetryDisplay && (this.layer.telemetryDisplay.sensorTrail = !this.layer.telemetryDisplay.sensorTrail);
+  }
+  //#endregion
+  //#region Private Methods
+  _followTelemetry() {
+    this.removeHandles("follow"), this.view && this.layer && this.addHandles(
+      d(
+        () => this.layer?.telemetry,
+        () => {
+          const e = [], i = this.followingMode === "follow-frame" || this.followingMode === "follow-both";
+          if ((this.followingMode === "follow-sensor" || this.followingMode === "follow-both") && this.layer?.telemetry.sensorLocation && e.push(this.layer.telemetry.sensorLocation), i && this.layer?.telemetry.frameCenter && e.push(this.layer.telemetry.frameCenter), !e.length) {
+            this.layer?.initialExtent && this.followingMode !== "none" && this.view?.goTo(this.layer.initialExtent).catch(() => {
+            });
+            return;
+          }
+          this.view?.goTo(e).catch(() => {
+          });
+        },
+        { initial: !0 }
+      ),
+      "follow"
+    );
+  }
+  //#endregion
+};
+a([
+  l({ readOnly: !0 })
+], t.prototype, "buffered", 1);
+a([
+  l({ readOnly: !0 })
+], t.prototype, "currentTime", 1);
+a([
+  l({ readOnly: !0 })
+], t.prototype, "duration", 1);
+a([
+  l({ readOnly: !0 })
+], t.prototype, "ended", 1);
+a([
+  l()
+], t.prototype, "followingMode", 2);
+a([
+  l()
+], t.prototype, "layer", 2);
+a([
+  l({ readOnly: !0 })
+], t.prototype, "metadata", 1);
+a([
+  l({ readOnly: !0 })
+], t.prototype, "playing", 1);
+a([
+  l({ readOnly: !0 })
+], t.prototype, "previewsInfo", 1);
+a([
+  l()
+], t.prototype, "seekLength", 2);
+a([
+  l({ readOnly: !0 })
+], t.prototype, "state", 1);
+a([
+  l()
+], t.prototype, "view", 2);
+t = a([
+  S("map-components.video-player.VideoPlayerViewModel")
+], t);
+const x = t, O = v`: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}`, F = $(x);
+class R extends w {
   constructor() {
-    super(...arguments), this.messages = w({ blocking: !0 }), this.viewModel = b(this), this._videoViewRef = _(), this._metadataVisible = !1, this._duration = 0, this._currentTime = 0, this._bufferedValue = 0, this._currentValue = 0, this._isBuffering = !1, this._videoViewReady = !1, this._loopPlayback = !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.operationalDataVisible = !1, this.hideHeader = !1, this.view = this.viewModel.view, this.arcgisPropertyChange = v()("state", "layer"), this.arcgisReady = l(), this.arcgisVideoReady = l();
+    super(...arguments), this.messages = V({ blocking: !0 }), this.viewModel = F(this), this._videoViewRef = b(), this._metadataVisible = !1, this._duration = 0, this._currentTime = 0, this._bufferedValue = 0, this._currentValue = 0, this._isBuffering = !1, this._videoViewReady = !1, this._loopPlayback = !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.operationalDataVisible = !1, this.hideHeader = !1, this.view = this.viewModel.view, this.arcgisPropertyChange = T()("state", "layer"), this.arcgisReady = u(), this.arcgisVideoReady = u();
   }
   static {
     this.properties = { _metadataVisible: 16, _duration: 16, _currentTime: 16, _bufferedValue: 16, _currentValue: 16, _isBuffering: 16, _videoViewReady: 16, _layerTitle: 16, _isLive: 16, _loopPlayback: 16, referenceElement: 1, icon: 1, state: 32, followingMode: 1, layer: 0, autoDestroyDisabled: 5, messageOverrides: 0, label: 3, inline: 7, showFullscreenToggle: 5, operationalDataVisible: 5, hideHeader: 5, view: 0 };
   }
   static {
-    this.styles = M;
+    this.styles = O;
   }
   get followingMode() {
     return this.viewModel.followingMode;
@@ -33,47 +241,47 @@ class T extends g {
   }
   loaded() {
     this.manager.onLifecycle(() => [
-      t(() => [this.viewModel.currentTime, this.viewModel.duration, this.viewModel.buffered, this.viewModel.ended], () => {
-        const { buffered: i, currentTime: o, duration: n, ended: d } = this.viewModel, s = r(n), a = r(o), c = r(i);
-        this._duration = s, this._currentTime = a, this._bufferedValue = c / (s || 1), this._currentValue = a / (s || 1), this._isBuffering = !d && this._bufferedValue < this._currentValue;
+      d(() => [this.viewModel.currentTime, this.viewModel.duration, this.viewModel.buffered, this.viewModel.ended], () => {
+        const { buffered: i, currentTime: n, duration: h, ended: r } = this.viewModel, y = f(h), c = f(n), p = f(i);
+        this._duration = y, this._currentTime = c, this._bufferedValue = p / (y || 1), this._currentValue = c / (y || 1), this._isBuffering = !r && this._bufferedValue < this._currentValue;
       }),
-      t(() => this.layer?.title, (i) => {
+      d(() => this.layer?.title, (i) => {
         this._layerTitle = i ?? void 0;
       }, { initial: !0 }),
-      t(() => this.layer?.isLive, (i) => {
+      d(() => this.layer?.isLive, (i) => {
         this._isLive = i ?? void 0;
       }, { initial: !0 }),
-      t(() => this.layer?.playbackRate, (i) => {
+      d(() => this.layer?.playbackRate, (i) => {
         typeof i == "number" && this.viewModel.changePlaybackSpeed(i);
       }, { initial: !0 }),
-      t(() => this.viewModel.view?.map, () => this.requestUpdate())
+      d(() => this.viewModel.view?.map, () => this.requestUpdate())
     ]);
   }
   render() {
-    return e`<div class=${m(p(this.inline ? "inline" : "root", $.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>`;
+    return s`<div class=${_(M(this.inline ? "inline" : "root", P.widget))}><calcite-panel .heading=${this.hideHeader || this.inline ? void 0 : this._layerTitle ?? this.messages.videoPlayer}>${this.inline || this.hideHeader || !this.showFullscreenToggle ? null : s`<calcite-action slot=header-actions-end icon=full-screen-exit text=minimize @click=${() => this.inline = !this.inline}></calcite-action>`}${this.inline ? s`<div class="inline">${this._renderActionBar()}${this._renderSlider()}${this.showFullscreenToggle ? s`<calcite-action icon=full-screen text=maximize @click=${() => this.inline = !this.inline}></calcite-action>` : null}</div>` : s`<div class="content">${this._renderLoadingScrim()}${this._renderBuffering()}${this._renderVideoSection()}</div>`}${this.inline ? null : s`<div slot=footer class="footer">${this._renderSlider()}${this._renderActionBar()}${this._renderMetadataSection()}</div>`}</calcite-panel></div>`;
   }
   _renderLoadingScrim() {
-    return this._videoViewReady ? null : e`<calcite-scrim .loading=${this.state !== "error"}>${this.state === "error" ? this.messages.errorLoadingLayer : null}</calcite-scrim>`;
+    return this._videoViewReady ? null : s`<calcite-scrim .loading=${this.state !== "error"}>${this.state === "error" ? this.messages.errorLoadingLayer : null}</calcite-scrim>`;
   }
   _renderBuffering() {
-    return this._isBuffering ? e`<calcite-progress type=indeterminate></calcite-progress>` : null;
+    return this._isBuffering ? s`<calcite-progress type=indeterminate></calcite-progress>` : null;
   }
   _renderVideoSection() {
-    return e`<arcgis-video .layer=${this.layer} .map=${this.viewModel.view?.map} .operationalDataVisible=${this.operationalDataVisible} @arcgisViewReadyChange=${() => {
+    return s`<arcgis-video .layer=${this.layer} .map=${this.viewModel.view?.map} .operationalDataVisible=${this.operationalDataVisible} @arcgisViewReadyChange=${() => {
       this._videoViewReady = !0, this.arcgisVideoReady.emit();
-    }} ${y(this._videoViewRef)}></arcgis-video>`;
+    }} ${D(this._videoViewRef)}></arcgis-video>`;
   }
   _renderSlider() {
-    return this._isLive ? null : e`<arcgis-video-player-slider .buffered=${this._bufferedValue} .value=${this._currentValue * 100} .viewModel=${this.viewModel}></arcgis-video-player-slider>`;
+    return this._isLive ? null : s`<arcgis-video-player-slider .buffered=${this._bufferedValue} .messages=${this.messages} .value=${this._currentValue * 100} .viewModel=${this.viewModel}></arcgis-video-player-slider>`;
   }
   _renderActionBar() {
-    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>`;
+    return s`<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 ? e`<arcgis-video-player-metadata .messages=${this.messages} .viewModel=${this.viewModel}></arcgis-video-player-metadata>` : null;
+    return this._metadataVisible ? s`<arcgis-video-player-metadata .messages=${this.messages} .viewModel=${this.viewModel}></arcgis-video-player-metadata>` : null;
   }
 }
-h("arcgis-video-player", T);
+g("arcgis-video-player", R);
 export {
-  T as ArcgisVideoPlayer
+  R as ArcgisVideoPlayer
 };

package/dist/components/arcgis-video-player-actions-group/customElement.js

@@ -14,17 +14,17 @@ class f extends u {
   loaded() {
     this.manager.onLifecycle(() => [
       d(() => [this.viewModel.state, this.viewModel.playing], () => {
-        const { state: i, playing: e } = this.viewModel;
-        this._disabled = i === "not-ready" || i === "waiting", this._playing = e;
+        const { state: e, playing: i } = this.viewModel;
+        this._disabled = e === "not-ready" || e === "waiting", this._playing = i;
       }, { initial: !0 }),
-      d(() => this.viewModel.layer?.isLive, (i) => {
-        this._isLive = i ?? void 0;
+      d(() => this.viewModel.layer?.isLive, (e) => {
+        this._isLive = e ?? void 0;
       }, { initial: !0 })
     ]);
   }
   render() {
-    const { viewModel: i, messages: e, _disabled: n, _playing: a } = this, s = this._isLive, g = this._direction === "rtl", c = t`<calcite-action .active=${a} alignment=center .disabled=${n} .icon=${a ? "pause-f" : "play-f"} @click=${a ? () => i.pause() : () => i.play()} scale=s .text=${a ? e.pause : e.play}></calcite-action>`, p = s ? void 0 : t`<calcite-action alignment=center .disabled=${n} icon=reverse-f @click=${() => i.seekBackward()} scale=s .text=${e.reverse}></calcite-action>`, m = s ? void 0 : t`<calcite-action alignment=center .disabled=${n} icon=forward-f @click=${() => i.seekForward()} scale=s .text=${e.forward}></calcite-action>`, o = s ? void 0 : t`<calcite-action alignment=center .disabled=${n} icon=beginning-f @click=${() => i.seekToBeginning()} scale=s .text=${e.beginning}></calcite-action>`, l = s ? void 0 : t`<calcite-action alignment=center .disabled=${n} icon=end-f @click=${() => i.seekToEnding()} scale=s .text=${e.end}></calcite-action>`, r = this.inline ? [o, c, l] : [o, p, c, m, l];
-    return g && r.reverse(), t`<calcite-action-bar expand-disabled layout=horizontal scale=s>${r}</calcite-action-bar>`;
+    const { viewModel: e, messages: i, _disabled: n, _playing: a } = this, s = this._isLive, g = this._direction === "rtl", c = t`<calcite-action .active=${a} alignment=center .disabled=${n} .icon=${a ? "pause-f" : "play-f"} @click=${a ? () => e.pause() : () => e.play()} scale=s .text=${a ? i.pause : i.play}></calcite-action>`, p = s ? void 0 : t`<calcite-action alignment=center .disabled=${n} icon=reverse-f @click=${() => e.seekBackward()} scale=s .text=${i.reverse}></calcite-action>`, m = s ? void 0 : t`<calcite-action alignment=center .disabled=${n} icon=forward-f @click=${() => e.seekForward()} scale=s .text=${i.forward}></calcite-action>`, o = s ? void 0 : t`<calcite-action alignment=center .disabled=${n} icon=beginning-f @click=${() => e.seekToBeginning()} scale=s .text=${i.beginning}></calcite-action>`, l = s ? void 0 : t`<calcite-action alignment=center .disabled=${n} icon=end-f @click=${() => e.seekToEnding()} scale=s .text=${i.end}></calcite-action>`, r = this.inline ? [o, c, l] : [o, p, c, m, l];
+    return g && r.reverse(), t`<calcite-action-bar expand-toggle-disabled layout=horizontal scale=s>${r}</calcite-action-bar>`;
   }
 }
 v("arcgis-video-player-actions-group", f);

package/dist/components/arcgis-video-player-controls-group/customElement.js

@@ -44,7 +44,7 @@ class v extends h {
     }} .selected=${e.followingMode === "follow-frame"}><calcite-icon icon=follow scale=s slot=content-start></calcite-icon></calcite-list-item><calcite-list-item .disabled=${t && !s && !c} .label=${l.video} @click=${() => {
       e.followingMode = "follow-both";
     }} .selected=${e.followingMode === "follow-both"}><calcite-icon icon=video scale=s slot=content-start></calcite-icon></calcite-list-item></calcite-list></calcite-panel></calcite-popover><calcite-action alignment=center .disabled=${o} .icon=${u(e)} id=follow-action scale=s slot=trigger .text=${l.follow}></calcite-action></div>`, f = i`<arcgis-video-player-settings .messages=${l} .viewModel=${e}></arcgis-video-player-settings>`, p = i`<calcite-action alignment=center .disabled=${o} icon=feature-details @click=${() => this.toggleMetadata()} scale=s .text=${l.metadata}></calcite-action>`;
-    return i`<calcite-action-bar expand-disabled layout=horizontal scale=s>${[$, y, f, p]}</calcite-action-bar>`;
+    return i`<calcite-action-bar expand-toggle-disabled layout=horizontal scale=s>${[$, y, f, p]}</calcite-action-bar>`;
   }
 }
 b("arcgis-video-player-controls-group", v);

package/dist/components/arcgis-video-player-slider/customElement.js

@@ -1,11 +1,11 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as i } from "../../chunks/runtime.js";
-import { css as s, html as o } from "lit";
-import { LitElement as t } from "@arcgis/lumina";
-const l = s`:host{min-width:100px;flex:1 1 auto;display:flex;align-items:center;justify-content:center}.slider-progress-container{position:relative;z-index:1;flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.progress{--arcgis-internal-video-player-progress-width: 2px;appearance:none;position:absolute;top:calc(50% - var(--arcgis-internal-video-player-progress-width) / 2);left:var(--calcite-spacing-xs);border:none;background:var(--calcite-color-border-1);cursor:pointer;width:calc(100% - var(--calcite-spacing-xs) * 2);height:var(--arcgis-internal-video-player-progress-width)}.progress::-webkit-progress-bar{background-color:var(--calcite-color-border-3)}.progress::-webkit-progress-value{background-color:var(--calcite-color-border-input)}.progress::-moz-progress-bar{background-color:var(--calcite-color-border-3)}.slider{--calcite-slider-track-color: transparent;width:100%}`;
-class a extends t {
+import { css as o, html as t } from "lit";
+import { LitElement as a } from "@arcgis/lumina";
+const l = o`:host{min-width:100px;flex:1 1 auto;display:flex;align-items:center;justify-content:center}.slider-progress-container{position:relative;z-index:1;flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.progress{--arcgis-internal-video-player-progress-width: 2px;appearance:none;position:absolute;top:calc(50% - var(--arcgis-internal-video-player-progress-width) / 2);left:var(--calcite-spacing-xs);border:none;background:var(--calcite-color-border-1);cursor:pointer;width:calc(100% - var(--calcite-spacing-xs) * 2);height:var(--arcgis-internal-video-player-progress-width)}.progress::-webkit-progress-bar{background-color:var(--calcite-color-border-3)}.progress::-webkit-progress-value{background-color:var(--calcite-color-border-input)}.progress::-moz-progress-bar{background-color:var(--calcite-color-border-3)}.slider{--calcite-slider-track-color: transparent;width:100%}`;
+class c extends a {
   static {
-    this.properties = { viewModel: 0, buffered: 9, value: 9 };
+    this.properties = { viewModel: 0, buffered: 9, messages: 0, value: 9 };
   }
   static {
     this.styles = l;
@@ -17,11 +17,11 @@ class a extends t {
     }
   }
   render() {
-    const { value: e, buffered: r } = this;
-    return o`<div class="slider-progress-container" dir=ltr><progress class="progress" max=1 .value=${`${r}`}></progress><div class="slider"><calcite-slider max=100 min=0 .value=${e} @calciteSliderInput=${this._onSliderInput}></calcite-slider></div></div>`;
+    const { buffered: e, messages: r, value: s } = this;
+    return t`<div class="slider-progress-container" dir=ltr><progress class="progress" max=1 .value=${`${e}`}></progress><div class="slider"><calcite-slider .label=${r.playbackProgress} max=100 min=0 .value=${s} @calciteSliderInput=${this._onSliderInput}></calcite-slider></div></div>`;
   }
 }
-i("arcgis-video-player-slider", a);
+i("arcgis-video-player-slider", c);
 export {
-  a as VideoPlayerSlider
+  c as VideoPlayerSlider
 };