Sony Digital Rapids Pixel Power calrec Sony

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

13/09/2018

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

23/07/2019

Patsy Smullin to Receive Chuck Sherman Television Leadership Award

Patsy Smullin to Receive Chuck Sherman Television Leadership Award -- Award to be presented at NAB Small Market Television Exchange -- Patsy Smullin WASHING...

23/07/2019

National Film and Television School to Open Hub in Leeds

Published: Mon 22 Jul 2019 National Film and Television School to Open Hub in Leeds Supported by Industry Partners Including Channel 4, ITV, BFI, Screen Yorks...

23/07/2019

19th Annual Tribeca Film Festival, Presented by AT&T, announces 2020 Dates, April 15-26, and call for submissions

July 22nd, 2019 Art available for use: http://bit.ly/Tribeca2020pressmaterials ...

23/07/2019

New Highly Integrated Long-Range Surveillance System from FUJIFILM

New Highly Integrated Long-Range Surveillance System from FUJIFILM The FUJINON SX800 camera system marks FUJIFILMs successful entry into the surveillance system...

22/07/2019

Wonder to Make Billy Connolly Travelogue For ITV

Wonder, a Banijay Group Company, today announces it has been commissioned to make a 3 60' documentary series, Billy Connolly's Great American Trail for ...

22/07/2019

Automate today to better manage your content tomorrow

Last Friday, July 12, Toni Vilalta, Product Manager of VSN, presented at the ISKO Spain-Portugal 2019 congress, the applications that Artificial Intelligence ha...

22/07/2019

X-Rite Releases LED Lamp Kits for Its Industry-Leading Light Booths

X-Rite Releases LED Lamp Kits for Its Industry-Leading Light Booths To help support the transition to LED lighting in retail, X-Rite LED Lamp Kits allow pain...

22/07/2019

NEP deploys multiple Calrec consoles at Wimbledon 2019

Viewers around the world enjoyed premium quality audio while watching Wimbledon 2019 with NEP UK deploying 15 Calrec consoles at the South West London tennis ve...

22/07/2019

Ericsson and Swisscom bring 5G indoors

The call, made on July 1 between Ericsson's office in central Bern and Swisscom's office in the nearby town of Liebefeld, is the latest tech milestone f...

22/07/2019

Premier League Champions Manchester City Launch OTT Service

Premier League champions Manchester City launch OTT service By Will Strauss, Editor Tuesday, July 16, 2019 - 12:19 Print This Story Premier League champio...

22/07/2019

Online Streaming Keeps Fans Connected to Wimbledon, Cricket Finals

Online streaming keeps fans connected to Wimbledon and cricket finals By Fergal Ringrose, Editorial Director, Europe Wednesday, July 17, 2019 - 15:14 Print...

22/07/2019

Twitter Releases Video Clipping Tool, LiveCut. What Does It Mean For Sports Video Pros?

Twitter Releases Video Clipping Tool, LiveCut. What Does It Mean For Sports Vide...

22/07/2019

The Future For Media Companies Must Be Flexible, Says NAGRA Report

The Future For Media Companies Must Be Flexible, Says NAGRA Report By Troy Dreier, Contributor, Streaming & Digital Monday, July 22, 2019 - 1:18 pm Print T...

22/07/2019

New measures to increase fairness for mobile customers

New measures to increase fairness for mobile customers Add to Your Pages 22 July 2019 Mobile customers must be told cost of buying handsets and airtim...

22/07/2019

Rappers Issam, Shayfeen, and More Are Growing Trap's Moroccan Roots

In recent years, trap music backpacked across Puerto Rico, Mexico, and multiple destinations in western Europe. Notably, it gained a foothold in Germany and Fra...

22/07/2019

Cinema 4D Now Supported Natively in Unreal Engine

We're excited to announce Epic Games has introduced native support for Cinema 4D in the latest release of Unreal Engine 4.23. Integration for Cinema 4D is e...

22/07/2019

FXX Orders More Archer'

Credit: FXX FXX has renewed animated comedy series Archer for season 11. The new season begins in 2020. FXX broke the news at Comic-Con in San Diego. We are ...

22/07/2019

Amazon Prime Orders Season Two of The Boys' Before Its Premiere

Amazon Prime has ordered a second season of drama The Boys. The show, which Amazon describes as a subversive superhero series, debuts July 26. Seth Rogen and ...

22/07/2019

Primetime Ratings: ABC Wins With Hot Celeb Family Feud'

ABC got the top score in Sunday's prime ratings, its game shows leading the net to a 0.7 in viewers 18-49, per the Nielsen overnights, and a 4 share, same a...

22/07/2019

GoBright certifies...

GoBright BV has appointed a partnership with Philips Professional Display Solutions, certifying the Philips 10-in multi touch displays as fully compatible with ...

22/07/2019

Midwich opens southern UK...

Midwich has opened its 50,000sqft showroom and demo facility in Berkshire, UK, demonstrating technologies from Midwich, PSCo, Sound Technology, Holdan and Invis...

22/07/2019

Crystal Display Systems announces CiVUE Optotech...

Crystal Display Systems has partnered with optical bonding specialist CiVUE Optotech to create sunlight readable products. Optical bonding features an increas...

22/07/2019

Snelling Business Systems announced as Crown Commercial...

Snelling Business Systems has been named as a supplier to LOT 5: Audio Visual of the RM6103 Education Technology framework, enabling Snelling Business Systems t...

22/07/2019

Behind the scenes of Wimbledon's brand new virtual interview studio

Behind the scenes of Wimbledon's brand new virtual interview studio posted: 22/07/2019 Graphic specialists MOOV created an impressive photo-realistic ...

22/07/2019

ZD & AJA Video Systems

ZD & AJA Video Systems posted: 22/07/2019 Zero Density is pleased to announce a strategic partnership with AJA Video Systems, combining AJAs leading exper...

22/07/2019

Inavation Awards: New...

The Beurs van Berlage | Valentin Ivantsov/Shutterstock.com The Inavation Awards will change venue for its final event in Amsterdam, before it heads to Barcelon...

22/07/2019

Microsoft hologram'...

A life size hologram' was created at Microsoft Inspire 2019 to deliver a virtual keynote, translated from English into perfect Japanese in real time. The...

22/07/2019

Crystal Display Systems announces CiVUE Optotech partnership

Crystal Display Systems has partnered with optical bonding specialist CiVUE Optotech to create sunlight readable products. Optical bonding features an increas...

22/07/2019

Original Moon landing video sells for $1.8 million

Price is 8,000 times more than the amount paid by former NASA intern Gary George in 1976 Jenny Priestley 4 hours ago Price is 8,000 times more than the a...

22/07/2019

UKTV receives first CarbonNeutral production certification

Series has offset its carbon emissions by funding a Reduced Emissions from Deforestation and Degradation project Jenny Priestley 6 hours ago Series has o...

22/07/2019

Calrec helps enhance the sound of Wimbledon

Companys audio consoles were employed throughout the tournament Jenny Priestley 5 hours ago Company's audio consoles were employed throughout the tou...

22/07/2019

NFTS to open new Leeds hub

Latest media organisation to open a hub in the city Jenny Priestley 3 hours ago Latest media organisation to open a hub in the city target=_blank title...

22/07/2019

Ofcom searches for new chief executive

Expected to be a rising star civil servant Jenny Priestley 2 hours ago Expected to be a rising star civil servant target=_blank title=Share on Linked...

22/07/2019

Chris Young hits the road with Ayrton Ghibli fixtures on his headlining Raised On Country World Tour 2019

Chris Young hits the road with Ayrton Ghibli fixtures on his headlining Raised O...

22/07/2019

Riverside Theatre Invests in Robe

Riverside Theatre Invests in Robe posted: 22/07/2019 Riverside Theatres is a multi-venue performing arts centre in Parramatta CBD in the western suburbs o...

22/07/2019

SMPTE Accepting Technical Manuscripts for Publication Consideration in SMPTE Motion Imaging Journal

SMPTE Accepting Technical Manuscripts for Publication Consideration in SMPTE Mot...

22/07/2019

NEP deploys multiple Calrec consoles and routing technology for premium audio at Wimbledon 2019

NEP deploys multiple Calrec consoles and routing technology for premium audio at...

22/07/2019

IBC celebrates young talent in the industry

IBC celebrates young talent in the industry posted: 22/07/2019 The media, entertainment and technology industry is changing. Attitudes are shifting, the n...

22/07/2019

Protea Electronics Showcased AJA's Latest Technology at Mediatech 2019

18 July, 2019 - 08:03 At Mediatech 2019 in Africa, Protea Electronics (#D17) showcased AJAs newest products and updates for broadcast, production, streaming...

22/07/2019

AMAA rewards the Spirit of Excellence in Africans

22 July, 2019 - 06:02 The Africa Movie Academy Awards is the leading, most glamorous awards event that recognizes and rewards excellence in creativity on th...

22/07/2019

Sunrise Stations Help Make a Difference in the NC Coastal Community

Sunrise staffers and community volunteers came together with US Air Force Recruitment Division to Sweep The Beaches. The group started at Carolina Beach on Satu...

21/07/2019

Live From The Open Championship: NBC's Golf Team Refined Workflows Make a Difference

Live From The Open Championship: NBC's Golf Team Refined Workflows Make a Di...

21/07/2019

Bearclaw's Tips to Capture #RideMTBDay

In The Wild Jul 20, 2019 Do you like to ride your bicycle? Do you like to ride your mountain bike? If you said yes, then today is your day. Saturday, July...

21/07/2019

CBS CORPORATION STATEMENT ON AT&T DROPPING CBS FROM ITS CUSTOMERS' DIRECTV, DIRECTV NOW AND AT&T U-VERSE TV LINEUPS

Jul 20 2019 http://bit.ly/2JGFQZT Effective 2:00 AM, ET today, AT&T has dropp...

20/07/2019

AMG International invests in 150 Claypaky Sharpy Plus units

AMG International invests in 150 Claypaky Sharpy Plus units posted: 20/07/2019 AMG International has recently purchased 150 Sharpy Plus units, Claypakys b...

20/07/2019

TSL Production first to invest in Elation's new Smarty MAX

TSL Production first to invest in Elation's new Smarty MAX posted: 20/07/2019 TSL Production of Germany, a full-service event agency that stocks the ...

20/07/2019

AT&T Takes Its Side of CBS Carriage Issues to Hill

Perhaps trying to head off some letters from the Hill, AT&T is doing some proactive Hill lobbying on the issue of a potential blackout of CBS stations on its Di...

20/07/2019

CBS Blacked Out As Talks With AT&T Fail

CBS stations were blacked out to subscribers to AT&T's pay TV services as the two companies failed to reach an agreement by the deadline of 2 a.m. ET Saturd...

20/07/2019

Pulling off The Great Bear Rescue

Community Jul 19, 2019 GoPro is stoked to support International Animal Rescue in an effort to bring awareness to the plight of the many animals held in cap...