@vime/core
Version:
Customizable, extensible, accessible and framework agnostic media player.
79 lines (78 loc) • 2.3 kB
JavaScript
import { Component, h, Prop } from '@stencil/core';
import { withComponentRegistry } from '../../../core/player/withComponentRegistry';
/**
* Formats and displays a length of time provided in seconds.
*
* ## Visual
*
* <img
* src="https://raw.githubusercontent.com/vime-js/vime/master/packages/core/src/components/ui/time/time/time.png"
* alt="Vime time component"
* />
*/
export class TimeProgress {
constructor() {
/**
* The string used to separate the current time and end time.
*/
this.separator = '/';
/**
* Whether the times should always show the hours unit, even if the time is less than
* 1 hour (eg: `20:35` -> `00:20:35`).
*/
this.alwaysShowHours = false;
withComponentRegistry(this);
}
render() {
return (h("div", { class: "timeProgress" },
h("vm-current-time", { alwaysShowHours: this.alwaysShowHours }),
h("span", { class: "separator" }, this.separator),
h("vm-end-time", { alwaysShowHours: this.alwaysShowHours })));
}
static get is() { return "vm-time-progress"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["time-progress.css"]
}; }
static get styleUrls() { return {
"$": ["time-progress.css"]
}; }
static get properties() { return {
"separator": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The string used to separate the current time and end time."
},
"attribute": "separator",
"reflect": false,
"defaultValue": "'/'"
},
"alwaysShowHours": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether the times should always show the hours unit, even if the time is less than\n1 hour (eg: `20:35` -> `00:20:35`)."
},
"attribute": "always-show-hours",
"reflect": false,
"defaultValue": "false"
}
}; }
}