@arcgis/map-components
Version:
ArcGIS Map Components
28 lines (27 loc) • 1.83 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/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 {
static {
this.properties = { viewModel: 0, buffered: 9, value: 9 };
}
static {
this.styles = l;
}
_onSliderInput({ currentTarget: e }) {
if (typeof e.value == "number") {
const r = e.value * this.viewModel.duration / 100;
this.viewModel.seekTo(r);
}
}
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} =${this._onSliderInput}></calcite-slider></div></div>`;
}
}
i("arcgis-video-player-slider", a);
export {
a as VideoPlayerSlider
};