From 0558af34f1882dd99459f8a5b2d8bec16be5aac0 Mon Sep 17 00:00:00 2001 From: mandryllo Date: Wed, 21 Jul 2021 17:58:22 +0200 Subject: [PATCH 1/6] Add LVideoOverlay --- docs/components/LVideoOverlay.md | 74 ++++++++++++++++++++++++++++++++ src/components/LVideoOverlay.vue | 66 ++++++++++++++++++++++++++++ src/index.js | 1 + src/mixins/VideoOverlay.js | 43 +++++++++++++++++++ 4 files changed, 184 insertions(+) create mode 100644 docs/components/LVideoOverlay.md create mode 100644 src/components/LVideoOverlay.vue create mode 100644 src/mixins/VideoOverlay.js diff --git a/docs/components/LVideoOverlay.md b/docs/components/LVideoOverlay.md new file mode 100644 index 00000000..7570da42 --- /dev/null +++ b/docs/components/LVideoOverlay.md @@ -0,0 +1,74 @@ +--- +title: LVideoOverlay +--- + +# LVideoOverlay + +> Easily display a video overlay. + +--- + +## Demo + +::: demo + + + + +::: + +## Props + +| Prop name | Description | Type | Values | Default | +| ------------------- | ---------------------------------------------------- | --------------------- | ------ | ------------- | +| pane | | string | - | 'overlayPane' | +| attribution | | string | - | null | +| name | | string | - | undefined | +| layerType | | string | - | undefined | +| visible | | boolean | - | true | +| interactive | | boolean | - | false | +| bubblingMouseEvents | | boolean | - | true | +| url | | string\|array\|object | - | | +| bounds | | | - | | +| opacity | | number | - | 1.0 | +| alt | | string | - | '' | +| crossOrigin | | boolean | - | false | +| errorOverlayUrl | | string | - | '' | +| zIndex | | number | - | 1 | +| className | | string | - | '' | +| autoplay | | boolean | - | true | +| loop | | boolean | - | true | +| keepAspectRatio | | boolean | - | true | +| muted | | boolean | - | false | +| options | Leaflet options to pass to the component constructor | object | - | {} | + +## Events + +| Event name | Type | Description | +| -------------- | ------- | -------------------------------------------------- | +| update:visible | boolean | Triggers when the visible prop needs to be updated | +| ready | object | Triggers when the component is ready | diff --git a/src/components/LVideoOverlay.vue b/src/components/LVideoOverlay.vue new file mode 100644 index 00000000..42cbf050 --- /dev/null +++ b/src/components/LVideoOverlay.vue @@ -0,0 +1,66 @@ + + + +## Demo +::: demo + + + +::: + diff --git a/src/index.js b/src/index.js index 2516e998..6fff7be9 100644 --- a/src/index.js +++ b/src/index.js @@ -37,4 +37,5 @@ export { default as LPopup } from './components/LPopup'; export { default as LRectangle } from './components/LRectangle'; export { default as LTileLayer } from './components/LTileLayer'; export { default as LTooltip } from './components/LTooltip'; +export { default as LVideoOverlay } from './components/LVideoOverlay'; export { default as LWMSTileLayer } from './components/LWMSTileLayer'; diff --git a/src/mixins/VideoOverlay.js b/src/mixins/VideoOverlay.js new file mode 100644 index 00000000..0113f9f6 --- /dev/null +++ b/src/mixins/VideoOverlay.js @@ -0,0 +1,43 @@ +import ImageOverlay from './ImageOverlay.js'; + +export default { + mixins: [ImageOverlay], + props: { + url: { + type: [String, Array, Object] + }, + autoplay: { + type: Boolean, + default: true + }, + loop: { + type: Boolean, + default: true + }, + keepAspectRatio: { + type: Boolean, + default: true + }, + muted: { + type: Boolean, + default: false + } + }, + mounted () { + this.videoOverlayOptions = { + ...this.imageOverlayOptions, + autoplay: this.autoplay, + loop: this.loop, + keepAspectRatio: this.keepAspectRatio, + muted: this.muted + }; + }, + methods: { + getElement () { + return this.mapObject.getElement(); + } + }, + render () { + return null; + } +}; From 88d273755546164278a6d07ef2fd824ef8709a50 Mon Sep 17 00:00:00 2001 From: mandryllo Date: Wed, 21 Jul 2021 22:27:50 +0200 Subject: [PATCH 2/6] Fix props --- docs/components/LVideoOverlay.md | 53 ++++++++++++++++---------------- src/components/LVideoOverlay.vue | 16 +++++++--- src/mixins/VideoOverlay.js | 3 -- 3 files changed, 38 insertions(+), 34 deletions(-) diff --git a/docs/components/LVideoOverlay.md b/docs/components/LVideoOverlay.md index 7570da42..1acad238 100644 --- a/docs/components/LVideoOverlay.md +++ b/docs/components/LVideoOverlay.md @@ -13,8 +13,8 @@ title: LVideoOverlay ::: demo @@ -31,8 +31,8 @@ export default { return { zoom: 4, center: [25, -110], - tilesUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', - videoUrl: 'https://www.mapbox.com/bites/00188/patricia_nasa.webm', + url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', + video: 'https://www.mapbox.com/bites/00188/patricia_nasa.webm', bounds: [[ 32, -130], [ 13, -100]] }; } @@ -43,28 +43,29 @@ export default { ## Props -| Prop name | Description | Type | Values | Default | -| ------------------- | ---------------------------------------------------- | --------------------- | ------ | ------------- | -| pane | | string | - | 'overlayPane' | -| attribution | | string | - | null | -| name | | string | - | undefined | -| layerType | | string | - | undefined | -| visible | | boolean | - | true | -| interactive | | boolean | - | false | -| bubblingMouseEvents | | boolean | - | true | -| url | | string\|array\|object | - | | -| bounds | | | - | | -| opacity | | number | - | 1.0 | -| alt | | string | - | '' | -| crossOrigin | | boolean | - | false | -| errorOverlayUrl | | string | - | '' | -| zIndex | | number | - | 1 | -| className | | string | - | '' | -| autoplay | | boolean | - | true | -| loop | | boolean | - | true | -| keepAspectRatio | | boolean | - | true | -| muted | | boolean | - | false | -| options | Leaflet options to pass to the component constructor | object | - | {} | +| Prop name | Description | Type | Values | Default | +| ------------------- | ---------------------------------------------------- | ------------------------------- | ------ | ------------- | +| pane | | string | - | 'overlayPane' | +| attribution | | string | - | null | +| name | | string | - | undefined | +| layerType | | string | - | undefined | +| visible | | boolean | - | true | +| interactive | | boolean | - | false | +| bubblingMouseEvents | | boolean | - | true | +| url | | string | - | | +| bounds | | | - | | +| opacity | | number | - | 1.0 | +| alt | | string | - | '' | +| crossOrigin | | boolean | - | false | +| errorOverlayUrl | | string | - | '' | +| zIndex | | number | - | 1 | +| className | | string | - | '' | +| autoplay | | boolean | - | true | +| loop | | boolean | - | true | +| keepAspectRatio | | boolean | - | true | +| muted | | boolean | - | false | +| options | Leaflet options to pass to the component constructor | object | - | {} | +| video | | string\|array\|HTMLVideoElement | - | null | ## Events diff --git a/src/components/LVideoOverlay.vue b/src/components/LVideoOverlay.vue index 42cbf050..c3ea940f 100644 --- a/src/components/LVideoOverlay.vue +++ b/src/components/LVideoOverlay.vue @@ -10,9 +10,15 @@ import { videoOverlay, DomEvent } from 'leaflet'; export default { name: 'LVideoOverlay', mixins: [VideoOverlayMixin, Options], + props: { + video: { + type: [String, Array, HTMLVideoElement], + default: null + } + }, mounted() { const options = optionsMerger(this.videoOverlayOptions, this); - this.mapObject = videoOverlay(this.url, this.bounds, options); + this.mapObject = videoOverlay(this.video, this.bounds, options); DomEvent.on(this.mapObject, this.$listeners); propsBinder(this, this.mapObject, this.$options.props); this.parentContainer = findRealParent(this.$parent); @@ -37,8 +43,8 @@ export default { ::: demo @@ -55,8 +61,8 @@ export default { return { zoom: 4, center: [25, -110], - tilesUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', - videoUrl: 'https://www.mapbox.com/bites/00188/patricia_nasa.webm', + url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', + video: 'https://www.mapbox.com/bites/00188/patricia_nasa.webm', bounds: [[ 32, -130], [ 13, -100]] }; } diff --git a/src/mixins/VideoOverlay.js b/src/mixins/VideoOverlay.js index 0113f9f6..0808b61d 100644 --- a/src/mixins/VideoOverlay.js +++ b/src/mixins/VideoOverlay.js @@ -3,9 +3,6 @@ import ImageOverlay from './ImageOverlay.js'; export default { mixins: [ImageOverlay], props: { - url: { - type: [String, Array, Object] - }, autoplay: { type: Boolean, default: true From 9af21582fc6af3307194a81e5ba2c2e57346f927 Mon Sep 17 00:00:00 2001 From: mandryllo Date: Wed, 21 Jul 2021 22:36:58 +0200 Subject: [PATCH 3/6] Move url prop --- docs/components/LImageOverlay.md | 2 +- src/components/LImageOverlay.vue | 7 +++++++ src/mixins/ImageOverlay.js | 4 ---- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/docs/components/LImageOverlay.md b/docs/components/LImageOverlay.md index e4cdc8c8..cf1861aa 100644 --- a/docs/components/LImageOverlay.md +++ b/docs/components/LImageOverlay.md @@ -59,7 +59,6 @@ export default { | visible | | boolean | - | true | | interactive | | boolean | - | false | | bubblingMouseEvents | | boolean | - | true | -| url | | string | - | | | bounds | | | - | | | opacity | | number | - | 1.0 | | alt | | string | - | '' | @@ -68,6 +67,7 @@ export default { | zIndex | | number | - | 1 | | className | | string | - | '' | | options | Leaflet options to pass to the component constructor | object | - | {} | +| url | | string | - | null | ## Events diff --git a/src/components/LImageOverlay.vue b/src/components/LImageOverlay.vue index c9789884..842352da 100644 --- a/src/components/LImageOverlay.vue +++ b/src/components/LImageOverlay.vue @@ -10,6 +10,13 @@ import { imageOverlay, DomEvent } from 'leaflet'; export default { name: 'LImageOverlay', mixins: [ImageOverlayMixin, Options], + props: { + url: { + type: String, + custom: true, + default: null + } + }, mounted() { const options = optionsMerger(this.imageOverlayOptions, this); this.mapObject = imageOverlay(this.url, this.bounds, options); diff --git a/src/mixins/ImageOverlay.js b/src/mixins/ImageOverlay.js index e78c3162..797a8a57 100644 --- a/src/mixins/ImageOverlay.js +++ b/src/mixins/ImageOverlay.js @@ -4,10 +4,6 @@ import InteractiveLayer from './InteractiveLayer'; export default { mixins: [Layer, InteractiveLayer], props: { - url: { - type: String, - custom: true - }, bounds: { custom: true }, From 50180d6fd45de15b3e50588c50a09ac17d955505 Mon Sep 17 00:00:00 2001 From: mandryllo Date: Wed, 21 Jul 2021 22:53:19 +0200 Subject: [PATCH 4/6] Update types --- types/index.d.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/types/index.d.ts b/types/index.d.ts index 110d9280..e2683e0b 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -71,10 +71,6 @@ declare module "vue2-leaflet" { } class ImageOverlay extends Mixins(Layer, InteractiveLayer) { // props - url: string; - /** - * @default true - */ bounds: boolean; /** * @default 1.0 @@ -489,6 +485,13 @@ declare module "vue2-leaflet" { setImagePath(newVal: string, oldVal?: string): void; } class LImageOverlay extends Mixins(ImageOverlay) { + // props + /** + * @default null + */ + url: string | null; + + // data mapObject: L.ImageOverlay; parentContainer: any; } From 900d8ecb083db863d40df6943e2cb3905530bd14 Mon Sep 17 00:00:00 2001 From: mandryllo Date: Wed, 21 Jul 2021 23:13:08 +0200 Subject: [PATCH 5/6] Update types --- types/index.d.ts | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/types/index.d.ts b/types/index.d.ts index 110d9280..9a473c84 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -69,6 +69,27 @@ declare module "vue2-leaflet" { */ zIndex: number; } + class VideoOverlay extends Mixins(ImageOverlay) { + // props + /** + * @default true + */ + autoplay: boolean; + /** + * @default true + */ + loop: boolean; + /** + * @default true + */ + keepAspectRatio: boolean; + /** + * @default false + */ + muted: boolean; + // methods + getElement(): HTMLVideoElement; + } class ImageOverlay extends Mixins(Layer, InteractiveLayer) { // props url: string; @@ -488,6 +509,17 @@ declare module "vue2-leaflet" { // methods setImagePath(newVal: string, oldVal?: string): void; } + class LVideoOverlay extends Mixins(VideoOverlay) { + // props + /** + * @default null + */ + video: string | Array | HTMLVideoElement | null; + + // data + mapObject: L.VideoOverlay; + parentContainer: any; + } class LImageOverlay extends Mixins(ImageOverlay) { mapObject: L.ImageOverlay; parentContainer: any; @@ -724,6 +756,7 @@ declare module "vue2-leaflet" { LGridLayer, LIcon, LIconDefault, + LVideoOverlay, LImageOverlay, LLayerGroup, LMap, From af50a6e230d2c4631644c8959773ae7db354203f Mon Sep 17 00:00:00 2001 From: mandryllo Date: Wed, 21 Jul 2021 23:14:51 +0200 Subject: [PATCH 6/6] Cleanup :lipstick: --- types/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/index.d.ts b/types/index.d.ts index e2683e0b..ce5efc56 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -489,7 +489,7 @@ declare module "vue2-leaflet" { /** * @default null */ - url: string | null; + url: string | null; // data mapObject: L.ImageOverlay;