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

ArcGIS Map Components

import { c } from "../../chunks/runtime.js";
import { html as t } from "lit-html";
import { formatDate as n } from "@arcgis/core/intl.js";
import { LitElement as d, safeClassMap as i } from "@arcgis/lumina";
import { css as p } from "@lit/reactive-element/css-tag.js";
import { watch as g } from "@arcgis/core/core/reactiveUtils.js";
import { classes as v } from "@arcgis/components-utils";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.33/esri/copyright.txt for details.
v4.33.13 */
const y = p`.arcgis-video-player__toolbar{display:flex;align-items:center;background-color:var(--calcite-color-foreground-1);padding:0 calc(var(--esri-video-player-controls-spacing) / 2) calc(var(--esri-video-player-controls-spacing) / 2);font-size:var(--calcite-font-size--2)}.arcgis-video-player__toolbar-top-padding{padding-top:calc(var(--esri-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 s(r) {
  return n(Math.round(r) * 1e3, { minute: "2-digit", second: "2-digit" });
}
class m extends d {
  static {
    this.properties = { _isLive: 16, viewModel: 0, messages: 0, currentTime: 9, duration: 9, toggleMetadata: 0 };
  }
  static {
    this.styles = y;
  }
  loaded() {
    this.manager.onLifecycle(() => [
      g(() => this.viewModel.layer?.isLive, (a) => {
        this._isLive = a ?? void 0;
      }, { initial: !0 })
    ]);
  }
  render() {
    const { messages: a } = this, l = this._isLive ? o.playerToolbarTopPadding : null;
    return t`<div class=${i(v(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)}>${s(this.currentTime)} / ${s(this.duration)}</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>`;
  }
}
c("arcgis-video-player-action-bar", m);
export {
  m as VideoPlayerActionBar
};