vizcareer-vue-client

This project is based on [email protected] css framework. This is bundled in the component.

Install

To install this package you need to run npm install @vizcareer/s1-vue-uploader-client.

How to reference component

Assignment on emitted events to videoId and videoUrl data properties are required as per the example below.

import {VideoUploader} from '@vizcareer/s1-vue-uploader-client'

export default {
  name: 'App',
  components: {
    VideoUploader
  },
  data: () => ({
    videoId: "",
    videoUrl: "",
    apiKey: "",
    apiUrl: "",
  }),
  methods: {
    handleVideoUploaded({ id, url }) {
      this.videoId = id;
      this.videoUrl = url;
      console.log("handleVideoUploaded fired");
    },
    handleVideoRecordingUploaded({ id, url }) {
      this.videoId = id;
      this.videoUrl = url;
      console.log("handleVideoRecordingUploaded fired");
    },
    handleVideoDelete() {
      this.videoId = "";
      this.videoUrl = "";
      console.log("Video was deleted");
    },
    learnMoreWasClicked() {
      console.log("learn more was clicked");
    }
  } 
}

How to implement component in vue template

There are four events on this component. These are:

• video-file-uploaded Emits on successful upload
• video-recording-uploaded Emits on successful recording upload
• video-deletedEmits when video is deleted
• learn-more-clickedEmits when learn more button is clicked

Example component implementation

    <VideoUploader
    :api-key="'[your-api-key]'"
    :api-url="'[your-api-url]'"
    :video-id="this.videoId"
    :video-url="this.videoUrl"
    v-on:video-file-uploaded="handleVideoUploaded"
    v-on:video-recording-uploaded="handleVideoRecordingUploaded"
    v-on:video-deleted="handleVideoDelete"
    v-on:learn-more-clicked="learnMoreWasClicked"
    />