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/4.34/esri/copyright.txt for details.
v4.34.7 */
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" });
}
class _ extends g {
  static {
    this.properties = { _isLive: 16, viewModel: 0, messages: 0, currentTime: 9, duration: 9, toggleMetadata: 0 };
  }
  static {
    this.styles = m;
  }
  loaded() {
    this.manager.onLifecycle(() => [
      v(() => this.viewModel.layer?.isLive, (a) => {
        this._isLive = a ?? 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>`;
  }
}
n("arcgis-video-player-action-bar", _);
export {
  _ as VideoPlayerActionBar
};
