You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
3.0 KiB
TypeScript
87 lines
3.0 KiB
TypeScript
import { VideoOverlay, LatLngBounds, LatLngBoundsExpression, LatLngExpression } from 'leaflet';
|
|
import { buildOptions, parseAttributeValue } from '../core/utils.js';
|
|
import { withProps } from '../core/with-props.js';
|
|
|
|
import { registerChildren, unregisterChildren } from '../core/register.js';
|
|
import type { PropDef } from '../types/props.js';
|
|
|
|
const PROPS = {
|
|
url: { kind: 'str', attr: 'url', default: '' },
|
|
bounds: { kind: 'str', attr: 'bounds', default: '' },
|
|
opacity: { kind: 'num', attr: 'opacity', default: 1.0 },
|
|
alt: { kind: 'str', attr: 'alt', default: '' },
|
|
interactive: { kind: 'bool-on', attr: 'interactive' },
|
|
crossOrigin: { kind: 'str', attr: 'cross-origin', default: '' },
|
|
loop: { kind: 'bool-on', attr: 'loop' },
|
|
autoplay: { kind: 'bool-on', attr: 'autoplay' },
|
|
muted: { kind: 'bool-on', attr: 'muted' },
|
|
playsInline: { kind: 'bool-on', attr: 'playsinline' },
|
|
} satisfies Record<string, PropDef>;
|
|
|
|
const PROP_BY_ATTR = new Map<string, string>(
|
|
Object.entries(PROPS).map(([name, spec]) => [spec.attr, name]),
|
|
);
|
|
|
|
export class LeafletVideoOverlay extends withProps(HTMLElement, PROPS) {
|
|
#obj?: VideoOverlay;
|
|
|
|
connectedCallback() {
|
|
const url = this.getAttribute('url') || '';
|
|
this.#obj = new VideoOverlay(
|
|
url,
|
|
this.#parsedBounds(),
|
|
buildOptions(this, PROPS, ['url', 'bounds']),
|
|
);
|
|
registerChildren(this, this.#obj);
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
unregisterChildren(this);
|
|
this.#obj?.remove();
|
|
this.#obj = undefined;
|
|
}
|
|
|
|
attributeChangedCallback(name: string, _old: string | null, val: string | null) {
|
|
if (!this.#obj) return;
|
|
if (name === 'url') {
|
|
if (val) this.#obj.setUrl(val);
|
|
} else if (name === 'bounds') {
|
|
this.#obj.setBounds(new LatLngBounds(this.#parsedBounds() as LatLngExpression[]));
|
|
} else if (
|
|
name === 'loop' ||
|
|
name === 'autoplay' ||
|
|
name === 'muted' ||
|
|
name === 'playsinline'
|
|
) {
|
|
const el = this.#obj.getElement();
|
|
if (el) {
|
|
if (name === 'loop') el.loop = val !== null;
|
|
else if (name === 'autoplay') el.autoplay = val !== null;
|
|
else if (name === 'muted') el.muted = val !== null;
|
|
else if (name === 'playsinline') el.playsInline = val !== null;
|
|
}
|
|
} else {
|
|
const propName = PROP_BY_ATTR.get(name);
|
|
if (!propName) return;
|
|
const setter =
|
|
`set${propName.charAt(0).toUpperCase()}${propName.slice(1)}` as keyof VideoOverlay;
|
|
if (typeof this.#obj[setter] === 'function') {
|
|
const spec = PROPS[propName as keyof typeof PROPS];
|
|
const value = spec.kind === 'bool-on' ? val !== null : parseAttributeValue(val);
|
|
(this.#obj[setter] as (v: unknown) => void)(value);
|
|
}
|
|
}
|
|
}
|
|
|
|
#parsedBounds(): LatLngBoundsExpression {
|
|
const raw = this.getAttribute('bounds');
|
|
return raw ? (JSON.parse(raw) as LatLngBoundsExpression) : [];
|
|
}
|
|
|
|
getElement(): HTMLVideoElement | undefined {
|
|
return this.#obj?.getElement();
|
|
}
|
|
}
|
|
|
|
customElements.define('leaflet-video-overlay', LeafletVideoOverlay);
|