Move ComponentVideoView to TS

src/dom_components/model/ComponentVideo.ts

@@ -295,7 +295,7 @@ export default class ComponentVideo extends ComponentImage {
    */
   getYoutubeSrc() {
     const id = this.get('videoId');
-    let url = this.get('ytUrl');
+    let url = this.get('ytUrl') as string;
     const list = this.get('list');
     url += id + (id.indexOf('?') < 0 ? '?' : '');
     url += list ? `&list=${list}` : '';
@@ -326,7 +326,7 @@ export default class ComponentVideo extends ComponentImage {
    * @private
    */
   getVimeoSrc() {
-    var url = this.get('viUrl');
+    let url = this.get('viUrl') as string;
     url += this.get('videoId') + '?';
     url += this.get('autoplay') ? '&autoplay=1' : '';
     url += this.get('loop') ? '&loop=1' : '';

src/dom_components/view/ComponentVideoView.js → src/dom_components/view/ComponentVideoView.ts

@@ -1,17 +1,23 @@
-import ComponentView from './ComponentImageView';
+import ComponentVideo from '../model/ComponentVideo';
-import OComponentView from './ComponentView';
+import ComponentImageView from './ComponentImageView';
+import ComponentView from './ComponentView';
+
+export default class ComponentVideoView extends ComponentImageView {
+  videoEl?: HTMLVideoElement | HTMLIFrameElement;
+  model!: ComponentVideo;
 
-export default class ComponentVideoView extends ComponentView {
   tagName() {
     return 'div';
   }
 
+  // @ts-ignore
   events() {
     return {};
   }
 
-  initialize(o) {
+  initialize() {
-    OComponentView.prototype.initialize.apply(this, arguments);
+    // @ts-ignore
+    ComponentView.prototype.initialize.apply(this, arguments);
     const { model } = this;
     const props = ['loop', 'autoplay', 'controls', 'color', 'rel', 'modestbranding', 'poster'];
     const events = props.map(p => `change:${p}`).join(' ');
@@ -60,25 +66,29 @@ export default class ComponentVideoView extends ComponentView {
    * @private
    */
   updateVideo() {
-    var prov = this.model.get('provider');
+    const { model, videoEl } = this;
-    var videoEl = this.videoEl;
+    const prov = model.get('provider');
-    var md = this.model;
     switch (prov) {
       case 'yt':
       case 'ytnc':
       case 'vi':
-        this.model.trigger('change:videoId');
+        model.trigger('change:videoId');
         break;
-      default:
+      default: {
-        videoEl.loop = md.get('loop');
+        if (videoEl) {
-        videoEl.autoplay = md.get('autoplay');
+          const el = videoEl as HTMLVideoElement;
-        videoEl.controls = md.get('controls');
+          el.loop = model.get('loop');
-        videoEl.poster = md.get('poster');
+          el.autoplay = model.get('autoplay');
+          el.controls = model.get('controls');
+          el.poster = model.get('poster');
+        }
+      }
     }
   }
 
-  renderByProvider(prov) {
+  renderByProvider(prov: string) {
-    var videoEl;
+    let videoEl;
+
     switch (prov) {
       case 'yt':
         videoEl = this.renderYoutube();
@@ -92,22 +102,23 @@ export default class ComponentVideoView extends ComponentView {
       default:
         videoEl = this.renderSource();
     }
+
     this.videoEl = videoEl;
     return videoEl;
   }
 
   renderSource() {
-    var el = document.createElement('video');
+    const el = document.createElement('video');
     el.src = this.model.get('src');
     this.initVideoEl(el);
     return el;
   }
 
   renderYoutube() {
-    var el = document.createElement('iframe');
+    const el = document.createElement('iframe');
     el.src = this.model.getYoutubeSrc();
-    el.frameBorder = 0;
+    el.frameBorder = '0';
-    el.setAttribute('allowfullscreen', true);
+    el.setAttribute('allowfullscreen', 'true');
     this.initVideoEl(el);
     return el;
   }
@@ -115,8 +126,8 @@ export default class ComponentVideoView extends ComponentView {
   renderYoutubeNoCookie() {
     var el = document.createElement('iframe');
     el.src = this.model.getYoutubeNoCookieSrc();
-    el.frameBorder = 0;
+    el.frameBorder = '0';
-    el.setAttribute('allowfullscreen', true);
+    el.setAttribute('allowfullscreen', 'true');
     this.initVideoEl(el);
     return el;
   }
@@ -124,20 +135,20 @@ export default class ComponentVideoView extends ComponentView {
   renderVimeo() {
     var el = document.createElement('iframe');
     el.src = this.model.getVimeoSrc();
-    el.frameBorder = 0;
+    el.frameBorder = '0';
-    el.setAttribute('allowfullscreen', true);
+    el.setAttribute('allowfullscreen', 'true');
     this.initVideoEl(el);
     return el;
   }
 
-  initVideoEl(el) {
+  initVideoEl(el: HTMLElement) {
     el.className = this.ppfx + 'no-pointer';
     el.style.height = '100%';
     el.style.width = '100%';
   }
 
-  render(...args) {
+  render() {
-    ComponentView.prototype.render.apply(this, args);
+    ComponentView.prototype.render.apply(this);
     this.updateClasses();
     var prov = this.model.get('provider');
     this.el.appendChild(this.renderByProvider(prov));