@nent/core
Version:
113 lines (112 loc) • 3.33 kB
JavaScript
/*!
* NENT 2022
*/
import { Component, h, Host, Prop, State } from '@stencil/core';
import { eventBus } from '../../services/actions';
import { getDataProvider } from '../../services/data/factory';
import { onVideoChange, videoState, VIDEO_EVENTS, } from '../n-video/services/index';
/**
* This element displays a checkbox to control the autoplay setting,
* used for video playback - as well as automatic navigation to the
* next page, when a video ends. Default: enabled
*
* @system video
*
*/
export class VideoSwitch {
constructor() {
this.enabledKey = 'autoplay';
this.storage = null;
this.autoPlay = true;
/**
* The data provider to store the audio-enabled state in.
*/
this.dataProvider = 'storage';
}
async componentWillLoad() {
this.autoPlay = videoState.autoplay;
this.storage = (await getDataProvider(this.dataProvider));
if (this.storage) {
const autoplay = await this.storage.get(this.enabledKey);
videoState.autoplay = autoplay !== 'false';
}
this.videoSubscription = onVideoChange('autoplay', async (a) => {
var _a;
this.autoPlay = a;
await ((_a = this.storage) === null || _a === void 0 ? void 0 : _a.set(this.enabledKey, a.toString()));
eventBus === null || eventBus === void 0 ? void 0 : eventBus.emit(VIDEO_EVENTS.AutoPlayChanged, a);
});
}
toggleAutoPlay() {
var _a;
videoState.autoplay = ((_a = this.checkbox) === null || _a === void 0 ? void 0 : _a.checked) || false;
}
disconnectedCallback() {
var _a;
(_a = this.videoSubscription) === null || _a === void 0 ? void 0 : _a.call(this);
}
render() {
return (h(Host, null,
h("input", { type: "checkbox", class: this.inputClass, id: this.inputId, ref: e => {
this.checkbox = e;
}, onChange: () => this.toggleAutoPlay(), checked: this.autoPlay })));
}
static get is() { return "n-video-switch"; }
static get properties() { return {
"inputClass": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Any classes to add to the input-element directly."
},
"attribute": "input-class",
"reflect": false
},
"inputId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The id field to add to the input-element directly."
},
"attribute": "input-id",
"reflect": false
},
"dataProvider": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The data provider to store the audio-enabled state in."
},
"attribute": "data-provider",
"reflect": false,
"defaultValue": "'storage'"
}
}; }
static get states() { return {
"autoPlay": {}
}; }
}