feat(ol-videorecorder-control): pass-through all props and events from ol-ext

- if not `downloadName` is set, the file will not be downloaded but the `stop` event is fired with the blob data/url.
- all events are now fired. In addition to the already existing `start` and `stop` event, you can now also react to the `pause` and `resume` event
- docs has been updated

Author: d-koppenhagen

docs/componentsguide/mapcontrols/videorecorder/index.md

@@ -19,35 +19,53 @@ import VideorecorderControlDemo from "@demos/VideorecorderControlDemo.vue"
 
 ## Properties
 
-### className
+### Props from OpenLayers
 
-class of the control
+Properties are passed-trough from `ol-ext` directly.
+Their types and default values can be checked-out [in the official docs](https://viglino.github.io/ol-ext/doc/doc-pages/ol.control.VideoRecorder.html).
+Only some properties deviate caused by reserved keywords from Vue / HTML.
+This deviating props are described in the section below.
 
-- **Type**: `String`
+### Deviating Properties
 
-### framerate
+### `downloadName`
 
-framerate for the video
+If this property is set, the file will be downloaded immediately after stopping the recording and saved as the given `downloadName`.
+If not defined, you need to handle the `stop` event fired on component level.
+By default this property is set to `mapVideo.mp4`.
 
-- **Type**: `Number`
-- **Default**: `30`
+## Events
 
-### videoBitsPerSecond
+You have access to all Events from the underlying control.
+Check out [the official docs](https://viglino.github.io/ol-ext/doc/doc-pages/ol.control.VideoRecorder.html) to see the available events tht will be fired.
 
-bitrate for the video
+```html
+<ol-videorecorder-control @error="handleEvent" />
+```
 
-- **Type**: `Number`
-- **Default**: `5000000`
+## Methods
 
-### videoTarget
+You have access to all Methods from the underlying control.
+Check out [the official docs](https://viglino.github.io/ol-ext/doc/doc-pages/ol.control.VideoRecorder.html) to see the available methods.
 
-video element or the container to add the video when finished or `'DIALOG'` to show it in a dialog.
+To access the source, you can use a `ref()` as shown below:
 
-- **Type**: `String | DOMElement`
+```vue
+<template>
+  <!-- ... -->
+  <ol-videorecorder-control ref="vRef" @error="handleEvent" />
+  <!-- ... -->
+</template>
 
-### downloadName
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type VideoRecorder from "ol-ext/control/VideoRecorder";
 
-class of the control
+const vRef = ref<{ control: VideoRecorder }>(null);
 
-- **Type**: `String`
-- **Default**: `'mapVideo.mp4'`
+onMounted(() => {
+  const recorder: VideoRecorder = vRef.value?.control;
+  // call your method on `recorder`
+});
+</script>
+```

src/components/mapControls/OlVideoRecorderControl.vue

@@ -2,43 +2,38 @@
   <div v-if="false"></div>
 </template>
 <script setup lang="ts">
-import VideoRecorder from "ol-ext/control/VideoRecorder";
+import VideoRecorder, { type Options } from "ol-ext/control/VideoRecorder";
 import { saveAs } from "file-saver";
 import { useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
+import type { ObjectEvent } from "ol/Object";
 
-const props = withDefaults(
-  defineProps<{
-    className?: string;
-    framerate?: number;
-    videoBitsPerSecond?: number;
-    videoTarget?: string;
-    downloadName?: string;
-  }>(),
-  {
-    framerate: 30,
-    videoBitsPerSecond: 5000000,
-    downloadName: "mapVideo.mp4",
-  }
-);
+// prevent warnings caused by event pass-through via useOpenLayersEvents composable
+defineOptions({
+  inheritAttrs: false,
+});
 
-const emit = defineEmits(["start", "stop"]);
+const props = withDefaults(defineProps<Options & { downloadName?: string }>(), {
+  downloadName: "mapVideo.mp4",
+});
 
 const attrs = useAttrs();
 const { properties } = usePropsAsObjectProperties(props);
 const { control } = useControl(VideoRecorder, properties, attrs);
 
-// @ts-ignore
-control.value.on("start", (event: Event<HTMLVideoElement>) => {
-  emit("start", event);
-});
+useOpenLayersEvents(control, ["start", "stop", "pause", "resume"]);
 
-// @ts-ignore
-control.value.on("stop", (event: Event<HTMLVideoElement>) => {
-  emit("stop", event);
-  saveAs(event.videoURL, props.downloadName);
-});
+control.value.on(
+  // @ts-ignore
+  "stop",
+  (event: ObjectEvent & { videoURL: string }) => {
+    if (props.downloadName) {
+      saveAs(event.videoURL, props.downloadName);
+    }
+  }
+);
 
 defineExpose({
   control,