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

This is the third part of the Vidispine Development Toolkit tutorial, where you'll learn yo use a grid component to show repository items, as well as how to preview different types of items in the system. When finished you should be able to import and play/show videos and images.

Introduction Welcome to the third part of the Vidispine Development Toolkit tutorial. In this part, we'll add a grid with repository items using the VdtGrid component, and show how you can preview items such as images, and video together with their metadata using VdtShape, VdtMetadata, VdtImagePreview, and VdtVideoPlayer components.

This blog post

Creating a wrapper Vue component to host the other Vue components

Creating the Items and Preview Vue components

Use VdtGrid to show existing items in the Vidispine repository

Connecting the Items and Preview Vue components

Adding the VdtShape, VdtMetadata, VdtImagePreview, VdtVideoPlayer VDT components

Getting started All the Vue 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 Vidispine Development Toolkit 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, and then part 2 to learn how to build the import component.

Wrapper, Items, and Preview Start by creating a new Vue component file within the components folder. It is to be used as a wrapper so name it appropriately (we have named it Front.vue in the GitHub repo). Create two additional files, at the same level as the wrapper file, and name them Items.vue and Preview.vue. Import the import (from part 2 of the tutorial), items and preview Vue components to your wrapper component, then declare them as Vue components.

In Front.vue:

Adding VdtGrid Head into your Items.vue file and start by importing and declaring the grid component and the itemApi function. Inside a mounted() function, call the itemApi function to retrieve the items previously imported to the application.

In Items.vue:

The VdtGrid component has functions bound to it, for example, the assetClick emit, which will send the item ID of the clicked grid item up to its parent. The id of the clicked item is fairly useless in the list of items but is key in displaying singular items and its content. Lets forward the result of the selected emit another step so that the preview Vue component can access it. The string within single quotations is the name of the function passed on and the $event is the object sent with it.

In Items.vue