Plugin de Ads - Parte 2

Author: Sparragus

assets/MediaPlayer.ts

@@ -1,13 +1,22 @@
 class MediaPlayer {
   media: HTMLMediaElement;
   plugins: Array<any>;
+  container: HTMLElement;
 
   constructor(config) {
     this.media = config.el;
     this.plugins = config.plugins || [];
+    this.initPlayer();
     this.initPlugins();
   }
 
+  initPlayer() {
+    this.container = document.createElement('div');
+    this.container.style.position = 'relative';
+    this.media.parentNode.insertBefore(this.container, this.media);
+    this.container.appendChild(this.media);
+  }
+
   private initPlugins() {
     this.plugins.forEach(plugin => {
       plugin.run(this);

assets/plugins/Ads/index.ts

@@ -6,14 +6,17 @@ class AdsPlugin {
   private player: MediaPlayer;
   private media: HTMLMediaElement;
   private currentAd: Ad;
+  private adsContainer: HTMLElement;
 
   constructor() {
     this.ads = Ads.getInstance();
+    this.adsContainer = document.createElement('div');
     this.handleTimeUpdate = this.handleTimeUpdate.bind(this);
   }
 
   run(player: MediaPlayer) {
     this.player = player;
+    this.player.container.appendChild(this.adsContainer);
     this.media = this.player.media;
     this.media.addEventListener('timeupdate', this.handleTimeUpdate);
   }
@@ -32,7 +35,22 @@ class AdsPlugin {
 
     const ad = this.ads.getAd();
     this.currentAd = ad;
-    console.log(this.currentAd);
+    this.adsContainer.innerHTML = `
+      <div class="ads">
+        <a class="ads__link" href="${this.currentAd.url}" target="_blank">
+          <img class="ads__img" src="${this.currentAd.imageUrl}" />
+          <div class="ads__info">
+            <h5 class="ads__title">${this.currentAd.title}</h5>
+            <p class="ads__body">${this.currentAd.body}</p>
+          </div>
+        </a>
+      </div>
+    `;
+
+    setTimeout(() => {
+      this.currentAd = null;
+      this.adsContainer.innerHTML = '';
+    }, 10000);
   }
 }