@arcgis/map-components
Version:
ArcGIS Map Components
35 lines (34 loc) • 2.29 kB
JavaScript
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 Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.33/esri/copyright.txt for details.
v4.33.13 */
const d = t`.arcgis-video-player__slider-progress-container{position:relative;z-index:1;width:100%}.arcgis-video-player__progress{--esri-video-player-progress-width: 2px;appearance:none;display:block;position:absolute;top:calc(50% - var(--esri-video-player-progress-width) / 2);left:var(--esri-video-player-controls-spacing);border:none;background:var(--calcite-color-border-1);cursor:pointer;width:calc(100% - var(--esri-video-player-controls-spacing) * 2);height:var(--esri-video-player-progress-width)}.arcgis-video-player__progress::-webkit-progress-bar{background-color:var(--calcite-color-border-3)}.arcgis-video-player__progress::-webkit-progress-value{background-color:var(--calcite-color-border-input)}.arcgis-video-player__progress::-moz-progress-bar{background-color:var(--calcite-color-border-3)}.arcgis-video-player__slider{--calcite-slider-track-color: transparent;background-color:var(--calcite-color-foreground-1);padding:calc(var(--esri-video-player-controls-spacing) / 4) calc(var(--esri-video-player-controls-spacing) / 2)}`, o = "arcgis-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("arcgis-video-player-slider", p);
export {
p as VideoPlayerSlider
};