import { c as a } from "../../chunks/runtime.js";
import { html as l } from "lit-html";
import { LitElement as c, safeClassMap as s } from "@arcgis/lumina";
import { css as t } from "@lit/reactive-element/css-tag.js";
/*! All material copyright GeoScene, All Rights Reserved, unless otherwise specified.
See https://js.geoscene.cn/4.33/geoscene/copyright.txt for details.
v4.33.18 */
const d = t`.geoscene-video-player__slider-progress-container{position:relative;z-index:1;width:100%}.geoscene-video-player__progress{--geoscene-video-player-progress-width: 2px;appearance:none;display:block;position:absolute;top:calc(50% - var(--geoscene-video-player-progress-width) / 2);left:var(--geoscene-video-player-controls-spacing);border:none;background:var(--calcite-color-border-1);cursor:pointer;width:calc(100% - var(--geoscene-video-player-controls-spacing) * 2);height:var(--geoscene-video-player-progress-width)}.geoscene-video-player__progress::-webkit-progress-bar{background-color:var(--calcite-color-border-3)}.geoscene-video-player__progress::-webkit-progress-value{background-color:var(--calcite-color-border-input)}.geoscene-video-player__progress::-moz-progress-bar{background-color:var(--calcite-color-border-3)}.geoscene-video-player__slider{--calcite-slider-track-color: transparent;background-color:var(--calcite-color-foreground-1);padding:calc(var(--geoscene-video-player-controls-spacing) / 4) calc(var(--geoscene-video-player-controls-spacing) / 2)}`, o = "geoscene-video-player", i = {
  progress: `${o}__progress`,
  slider: `${o}__slider`,
  sliderProgressContainer: `${o}__slider-progress-container`
};
class p extends c {
  static {
    this.properties = { viewModel: 0, buffered: 9, value: 9 };
  }
  static {
    this.styles = d;
  }
  _onSliderInput({ currentTarget: r }) {
    if (typeof r.value == "number") {
      const e = r.value * this.viewModel.duration / 100;
      this.viewModel.seekTo(e);
    }
  }
  render() {
    const { value: r, buffered: e } = this;
    return l`<div class=${s(i.sliderProgressContainer)}><progress class=${s(i.progress)} max=1 .value=${`${e}`}></progress><div class=${s(i.slider)}><calcite-slider max=100 min=0 .value=${r} @calciteSliderInput=${this._onSliderInput}></calcite-slider></div></div>`;
  }
}
a("geoscene-video-player-slider", p);
export {
  p as VideoPlayerSlider
};