{"id":2098,"date":"2018-01-10T17:04:49","date_gmt":"2018-01-10T17:04:49","guid":{"rendered":"https:\/\/ionicframework.com\/?p=2098"},"modified":"2018-01-10T17:04:49","modified_gmt":"2018-01-10T17:04:49","slug":"make-a-video-web-component-the-stencil-way","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/make-a-video-web-component-the-stencil-way","title":{"rendered":"Make a Video Web Component, the Stencil Way"},"content":{"rendered":"

\"\"

TL;DR<\/strong>
\nStencil is a JavaScript tool that enables you to build framework-independent and standards-compliant web components using technologies, such as TypeScript and JSX.
\nStencil provides APIs that makes writing fast components a breeze. These APIs — Virtual DOM, JSX, Async rendering and Reactive data-binding — equip developers with superpowers to create custom web components. Popular JavaScript frameworks, including React, Vue and Angular, all have something in common – the ability to create custom and reusable components. Check out this StencilJS Guide<\/a> written by Christian Nwamba<\/a> for a succinct primer on generating pure custom components.<\/p>\n

<\/p>\n

Let\u2019s start our journey by showing how to create a custom web component with Stencil. We\u2019ll use one of my favorite APIs, Cloudinary, as the functional service for which we\u2019ll craft a web component.<\/p>\n

What\u2019s Cloudinary?<\/h3>\n

Cloudinary<\/a> is a cloud-based, end-to-end media management solution. As a critical part of the developer stack, Cloudinary automates and streamlines your entire media asset workflow. It handles a wide variety of media types, from images, video and audio to emerging rich and interactive media types. Cloudinary\u2019s powerful APIs are used by developers to automate every stage of the media management lifecycle, including media selection, upload, analysis and administration, manipulation optimization and delivery.<\/p>\n

Existing Components<\/h3>\n

Fortunately for developers, Cloudinary offers SDKs for different languages and frameworks, including Ruby on Rails, PHP, Angular, React, JQuery, Android, iOS, Python and JavaScript. Let\u2019s look quickly at the Cloudinary components that exist for a couple of these frameworks: Angular and React.<\/p>\n

Angular SDK<\/strong><\/p>\n

<cl-video> component. \n<cl-transformation> component.\n<\/code><\/pre>\n
Repository<\/a>
\nUsage:<\/p>\n
   <cl-video cloud-name="my_other_cloud" public-id="watchme" secure="true" class="my-videos">\n        <cl-transformation overlay="text:arial_60:watchme" gravity="north" y="20"><\/cl-transformation>\n   <\/cl-video>\n<\/code><\/pre>\n
React SDK<\/strong><\/p>\n
<Video> component. \n<Transformation> component.\n<\/code><\/pre>\n
Repository<\/a>
\nUsage:<\/p>\n
<Video publicId="dog" >\n  <Transformation width="300" height="200" crop="crop" \/>\n<\/Video>\n<\/code><\/pre>\n
In September 2017, David Walsh<\/a> wrote an excellent article on how to create a Cloudinary video component<\/a>. I skimmed through the blog post and decided to do the same with Stencil.<\/p>\n
Stencil Component<\/h3>\n
Without further ado, we\u2019ll go ahead to build our Stencil component. Let\u2019s start with the component template.<\/p>\n
Component Template<\/h4>\n
Let\u2019s take a look at the JSX for the component. In Stencil, the HTML Skeleton resides in the render method.<\/p>\n
render() {\n    return (\n      <div onMouseEnter={this.showPreview.bind(this)} onMouseLeave={this.hidePreview.bind(this)} class="cloudinary-video-item" style={{'width':`${this.width}px`,'height':`${this.height}px`}}>\n        <div class="cloudinary-video-item-active">\n          <video id="previewVideo" poster={this.poster} autoplay loop width={this.width} height={this.height}><\/video>\n        <\/div>\n        <div class="cloudinary-video-item-video">\n          <video id="fullVideo" autoplay controls width={this.width} height={this.height}><\/video>\n        <\/div>\n        <svg\n           onClick={this.play.bind(this)}\n           xmlnsDc="http:\/\/purl.org\/dc\/elements\/1.1\/"\n           xmlnsCc="http:\/\/creativecommons.org\/ns#"\n           xmlnsRdf="http:\/\/www.w3.org\/1999\/02\/22-rdf-syntax-ns#"\n           xmlnsSvg="http:\/\/www.w3.org\/2000\/svg"\n           xmlns="http:\/\/www.w3.org\/2000\/svg"\n           id="play-icon"\n           version="1.1"\n           height="50"\n           width="50"\n           viewBox="0 0 1200 1200">\n          <path\n             d="M 600,1200 C 268.65,1200 0,931.35 0,600 0,268.65 268.65,0 600,0 c 331.35,0 600,268.65 600,600 0,331.35 -268.65,600 -600,600 z M 450,300.45 450,899.55 900,600 450,300.45 z"\n             id="path16995" \/>\n        <\/svg>\n      <\/div>\n    );\n  }\n<\/code><\/pre>\n
In the code above, there is a root div that houses three child elements. The first two elements are divs, while the last is an SVG. Next, let\u2019s configure the component and the props it will receive once it\u2019s in use.<\/p>\n
Component Properties<\/h4>\n
import { Element, State, Component, Prop } from '@stencil\/core';\n@Component({\n  tag: 'cloudinary-video',\n  styleUrl: 'cloudinary-video.scss'\n})\nexport class CloudinaryVideo {\n  @Prop() account: string;\n  @Prop() width: string;\n  @Prop() height: string;\n  @Prop() alias: string;\n  @Element() videoEl: HTMLElement;\n  @State() fullVideo: string;\n  @State() preview: string;\n  @State() poster: string;\n\u2026..\n<\/code><\/pre>\n
In the code above, we specified the number of properties that a user can pass to the component. account<\/em>, width<\/em>, height<\/em>, and alias<\/em>. We can specify many more, but for the sake of this article, it will be limited to just four props. To do this we can use the @Prop()<\/code> decorator. @Prop()<\/code> is a decorator that enables components to explicitly declare props.<\/p>\n