Vue Dadan SDK
A lightweight Vue package used for checking validating, and manipulating Google Dadan Extension with Vue.
Install
npm install vue-dadan-sdk
Usage
In Your component import the RecordVideoButton component
<script>
import RecordVideoButton from "vue-dadan-sdk"; //Main component to import
export default {
name: "App",
data: function() {
return {
videos: [], //initial state used to get recorded or selected videos
};
},
components: {
RecordVideoButton, //our component
},
methods: {
handleResponse: function({ success, data, message }) {
if (success) {
if (data) {
this.videos = data;
}
} else {
this.videos = [];
console.log(message);
}
},
},
};
</script>
In Your component template , add the component with props
<template>
<RecordVideoButton
title="Select Video"
v-bind:showSvg="true"
v-bind:showPreview="true"
v-bind:copyToClipboard="true"
buttonClass=""
buttonStyle=""
type="select"
@onFailure="handleResponse"
@onSuccess="handleResponse"
/>
</template>
the handleResponse function in Methods , is a callback function which accept object with three parameters
handleResponse : function({ success, data, message }) {
if (success) {
if (data) {
this.videos = data;
}
} else {
this.videos = [];
console.error(message);
}
}
Record Button Props
Parameter | Type | Description |
---|
type | string | Required. either record or select , else will show error |
title | string | Optional. button title |
buttonClass | string | Optional. the default class , or your custom class |
buttonStyle | string | Optional. the default style , or your custom style as string |
showSvg | boolean | Optional. to show Svg icon in button |
showPreview | boolean | Optional. to show preview dialog of recorded video |
copyToClipboard | boolean | Optional. to notify user that video shared url was copied to clipboard as toast message |
License
MIT