How to Build Media Applications With Vidispine Development Toolkit (pt2)

In this part 2 of the Vidispine Development Toolkit tutorial you will learn how to start using the components, make API calls to the Vidispine API and finally import a file into the repository.

Introduction In this blog post, we are going to set up and configure our project to implement the vdt-vue-components and use few of them to list all storages for our instance, list all importable files for the selected storage and import the selected files from that storage.

All the components that we are going to create should be located in [my-project]/src/components. Default welcome page that is visible when we have just set up the VDT is named VidispineVersion.vue and can be used as a learning reference.

All code can be found in the companion Github repo howto-build-vdt-applications. If you haven't set up your system yet, head over to part 1 of the tutorial.

This blog post

Clone vdt-vue-components repository

Configure our project to use vdt-vue-components

List all Vidispine Instance Storages and files from each storage

List all files from the selected Storage

Add new vdt-vue-component to our custom component to list files

Import the selected file(s) to Vidispine Instance

Vdt-vue-components focused on VdtList.

Clone vdt-vue-components repository. Navigate to our VDT project root folder:

$ cd /VDT Clone the vdt-vue-components repository, this will create a folder for you.

$ git clone git@github.com:vidispine/vdt-vue-components.git Quick Reference:

https://github.com/vidispine/vdt-vue-components

Configure our project to use vdt-vue-components. Navigate to the previously cloned repository folder:

$ cd /VDT/vdt-vue-components/ Create components link. You should see output in terminal that says -> success Registered @vidispine/vdt-vue-components . Run the following command to create a link:

$ yarn link Navigate to our project which is my-project

$ cd /VDT/my-project Link the components to our project with the registration ID we got in the previous step:

$ yarn link @vidispine/vdt-vue-components Optional cherry on top :

To get immediate page refresh when saving document, ESLint checking and other goodies.

In new terminal, change to vdt-vue-components directory, Run the following command to install all the dependencies:

$ cd /VDT/vdt-vue-components/ $ yarn install Run one of the following watch commands to build on save

Any modern app running ES6 or later:

$ yarn watch Non ES6 projects

$ yarn watch-umd Additionally you can run tests to double check if everything is running as is should

$ yarn test Building the application Create a new file in src/components' and name it Import.vue. Leave it for now and instead head into the router' folder and open the index.js file within. Import the newly created Import.vue and create a new object within routes', this will enable you to navigate to http://localhost:4000/import'. Then, head into the assets' folder and then scss' to find base.scss'. Open it and add a new import, enabling the stylesheet for the VDT components.

In index.js, add the following import:

import Import from ../components/Import.vue; and the following route:

{ path: /import, name: import, component: Import, } In base.scss :

@import @vidispine/vdt-vue-components/es/index.css; Head back into the newly created Import.vue'. The API calls used to import files from select storages are handled in functions imported to the application, in this case, three different functions and one dependency are imported and used. Initially, the storages have to be retrieved and made available to use in the application, and from these files has to be retrieved in turn. All imports are placed at the very top inside the script tags, let's go ahead and import these first to functions to enable them in the application.

These imports can then be called upon inside the application itself. to simplify things, we can create three empty arrays inside a data function, to in turn store the response received from the API calls, for example files, hits, and storages. Following that, the storage retrieval can be called upon and its response stores in the newly created storages' array. With a storage identified and selected, retrieving files from it is done in a similar manner, although the API call for retrieving files requires the ID of a storage.

LINK:	https://www.vidispine.com/blog/how-to-build-media-applications-with-vi...
	See more stories from vidispine

Most recent headlines