iq-dot
diff --git a/‎src/App.jsx‎
Lines changed: 51 additions & 250 deletions b/‎src/App.jsx‎
Lines changed: 51 additions & 250 deletions
@@ -7,6 +7,8 @@ import 'videojs-playlist';
 import 'imports-loader?videojs=video.js!videojs-vast-vpaid/dist/videojs_5.vast.vpaid';
 import 'whatwg-fetch';
 
+import Player from './Player.jsx';
+
 import { itn, bristolsport, londontheinside, spectator, telegraph } from './playlist';
 
 const Modernizr = window.suggestv.Modernizr;
@@ -19,7 +21,7 @@ function getClient() {
   const href = window.location.href;
 
   if (urlMatch('localhost')) return 'localhost';
-  if (urlMatch(['delta.sugges.tv/test/index', 'build.suggestv.io/test/index'])) return 'test';
+  if (urlMatch(['delta.sugges.tv/test/index', 'build.suggestv.io/test/index', 'build.suggestv.io/test/cjallen'])) return 'test';
   if (urlMatch(['delta.sugges.tv/test', 'build.suggestv.io/test'])) return 'client-test';
   if (urlMatch('telegraph.co.uk')) return 'telegraph';
   if (urlMatch('londontheinside.com')) return 'londontheinside';
@@ -49,7 +51,6 @@ function getClient() {
 const CLIENT = getClient();
 
 class App extends React.Component {
-
   static getVideos(url, client) {
     let endpoint = `https://api.suggestv.io/semantics?url=${url}`;
 
@@ -67,9 +68,10 @@ class App extends React.Component {
     const rect = element.getBoundingClientRect();
     const html = document.documentElement;
     return rect.top >= 0 &&
-            rect.left >= 0 &&
-            rect.bottom <= (window.innerHeight || html.clientHeight) &&
-            rect.right <= (window.innerWidth || html.clientWidth);
+      rect.left >= 0 &&
+      rect.bottom <= (window.innerHeight || html.clientHeight) &&
+      rect.right <= (window.innerWidth || html.clientWidth)
+    ;
   }
 
   static getAdTag(player, cb) {
@@ -124,6 +126,14 @@ class App extends React.Component {
     this.state = {
       videos: '',
       videosFrom: '',
+      videoJsOptions: {
+        controls: true,
+        preload: 'auto',
+        loop: false,
+        muted: true,
+        width: 640,
+        height: 264,
+      },
       adError: 'N/A',
       adStart: 'N/A',
       adSrc: 'N/A',
@@ -142,60 +152,22 @@ class App extends React.Component {
       spectator: spectator.slice(0).sort(() => 0.5 - Math.random()),
       telegraph: telegraph.slice(0).sort(() => 0.5 - Math.random()),
     };
-    this.plugins = this.plugins.bind(this);
+    this.setVideos = this.setVideos.bind(this);
     this.playlist = this.playlist.bind(this);
-    this.overlay = this.overlay.bind(this);
-    this.handleScroll = this.handleScroll.bind(this);
     this.postAnalytics = this.postAnalytics.bind(this);
+    this.handleScroll = throttle(this.handleScroll.bind(this), 400);
+    this.updateState = this.updateState.bind(this);
   }
 
   componentDidMount() {
-    const url = window.location.href;
-    const videoJsOptions = {
-      controls: true,
-      preload: 'auto', // try auto
-      loop: false,
-      muted: true,
-      width: 640,
-      height: 264,
-    };
-    console.log('SUGGESTV: Client is - ', CLIENT);
-
-    // initialise the video player and do set-up work after the player is ready
-    this.player = videojs(this.videoNode, videoJsOptions, () => {
-      this.plugins();
-
-      App.getVideos(url, CLIENT).then((data) => {
-        console.log('SUGGESTV: DATA', data);
-
-        this.setVideos(data);
-        const container = document.getElementById('suggestvplayer');
-
-        // only deal with tap events from users, ignore generated events
-        container.addEventListener('tap', (e) => {
-          if (!e.isTrusted) e.stopImmediatePropagation();
-        }, true);
-
-        this.videoJsInit(this.state.videos);
-        this.videoNode.muted = true;
-      })
-        .catch((err) => {
-          console.log('SUGGESTV: Promise Error', err);
-          this.player.dispose();
-        });
-    });
-
-    window.addEventListener('scroll', throttle(this.handleScroll.bind(this), 400));
-    window.addEventListener('touchmove', throttle(this.handleScroll.bind(this), 400));
+    console.log('SUGGESTV: client is ', CLIENT);
+    window.addEventListener('scroll', this.handleScroll);
+    window.addEventListener('touchmove', this.handleScroll);
   }
 
   componentWillUnmount() {
     window.removeEventListener('scroll', this.handleScroll);
     window.removeEventListener('touchmove', this.handleScroll);
-
-    if (this.player) {
-      this.player.dispose();
-    }
   }
 
   setVideos(data) {
@@ -283,20 +255,22 @@ class App extends React.Component {
     }
   }
 
-  handleScroll() {
-    const { pausedByUser, playedByUser, flashTestFinished, videoLoaded } = this.state;
-    if (App.isInViewport(this.videoNode)) {
-
-      if (this.videoNode && !pausedByUser && videoLoaded && flashTestFinished) {
+  updateState(obj) {
+    this.setState(obj);
+  }
 
+  handleScroll(player) {
+    const { pausedByUser, playedByUser, flashTestFinished, videoLoaded } = this.state;
+    if (App.isInViewport(this.playerNode.videoNode)) {
+      if (this.playerNode.videoNode && !pausedByUser && videoLoaded && flashTestFinished) {
         if (CLIENT === 'cityam' || CLIENT === 'beautyandthedirt') {
           console.log('SUGGESTV: click-to-play');
         } else {
-          this.player.play();
+          this.playerNode.player.play();
         }
       }
     } else if (!playedByUser) {
-      this.player.pause();
+      this.playerNode.player.pause();
     }
   }
 
@@ -341,205 +315,32 @@ class App extends React.Component {
     });
   }
 
-  plugins() {
-    videojs.plugin('adform', () => {
-      const player = this.player;
-      const adsCancelTimeout = 7000;
-      const self = this;
-
-      function getTagWrapper(cb) {
-        player.poster(self.state.adLoadingPoster);
-        player.pause();
-        player.currentTime(0);
-        App.getAdTag(player, (err, adTag) => {
-          console.log('SUGGESTV: AdTag = ', adTag);
-          self.setState({ adTag });
-          cb(err, adTag);
-        });
-      }
-
-      const options = {
-        playAdAlways: true,
-        adCancelTimeout: adsCancelTimeout,
-        adsEnabled: true,
-        vpaidFlashLoaderPath: 'https://build.suggestv.io/assets/VPAIDFlash.swf',
-        verbosity: 0,
-        preferredTech: 'html5',
-      };
-
-      // Does this client require a manual Ad XML retreival or just a URL
-      if (CLIENT === 'test') {
-        options.adTagXML = App.getAdTagXML;
-      } else {
-        options.getAdTag = getTagWrapper;
-      }
-
-      console.log('SUGGESTV: vastOptions', options);
-      const vastAd = player.vastClient(options);
-
-      // Check if we have flash enabled and if flash test is running
-      console.log('SUGGESTV Flash:', Modernizr.flash);
-      if (Modernizr.flash && !Modernizr.flash.blocked) {
-        window.vpaid_video_flash_tester.on('change', () => this.setState({ flashTestFinished: true }));
-      } else {
-        this.setState({ flashTestFinished: true });
-      }
-
-      player.on('vast.adStart', () => {
-        console.log('SUGGESTV: start ad', vastAd, player);
-        this.setState({
-          adStart: this.state.adStart ? `${this.state.adStart},adStart` : 'adStart',
-          adSrc: player.vast.vastResponse.mediaFiles.length ? player.vast.vastResponse.mediaFiles[0].src : 'N/A',
-        });
-        document.querySelectorAll('.delta-overlay').forEach((overlay) => {
-          overlay.style.display = 'none';
-        });
-      });
-
-      player.on('vast.adError', (obj) => {
-        console.log('SUGGESTV: error ad', obj);
-        this.setState({ adError: obj.error.message });
-      });
-
-      player.on('vast.contentStart', () => {
-        player.currentTime(0);
-        document.querySelectorAll('.delta-overlay').forEach((overlay) => {
-          overlay.style.display = '';
-        });
-
-        this.setState({
-          adError: 'N/A',
-          adStart: 'N/A',
-          adSrc: 'N/A',
-          adTag: '',
-          videoCompleted: false,
-          watchedDuration: 0,
-        });
-
-        this.postAnalytics(player);
-      });
-
-      player.on('vpaid.AdPaused', () => {
-        /* eslint no-param-reassign: ["off"] */
-        this.setState({ adStart: `${this.state.adStart},AdPaused` });
-        document.querySelectorAll('.delta-overlay').forEach((overlay) => {
-          overlay.style.display = 'none';
-        });
-      });
-
-      function doVastAdTracking(ctx, events, eventName) {
-        console.log('SUGGESTV: vast event - ', eventName);
-        const event = events[eventName];
-        ctx.setState({ adStart: `${ctx.state.adStart},${eventName}` });
-
-        if (event) {
-          fetch(event[0].uri)
-              .then(r => r.json())
-              .then(data => console.log(`SUGGESTV: vast.${eventName}`, data));
-        }
-      }
-
-      player.on('vast.impression', () => doVastAdTracking(this, player.vast.vastResponse.trackingEvents, 'impression'));
-      player.on('vast.creativeView', () => doVastAdTracking(this, player.vast.vastResponse.trackingEvents, 'creativeView'));
-      player.on('vast.start', () => doVastAdTracking(this, player.vast.vastResponse.trackingEvents, 'start'));
-      player.on('vast.firstQuartile', () => doVastAdTracking(this, player.vast.vastResponse.trackingEvents, 'firstQuartile'));
-      player.on('vast.midpoint', () => doVastAdTracking(this, player.vast.vastResponse.trackingEvents, 'midpoint'));
-      player.on('vast.thirdQuartile', () => doVastAdTracking(this, player.vast.vastResponse.trackingEvents, 'thirdQuartile'));
-      player.on('vast.complete', () => doVastAdTracking(this, player.vast.vastResponse.trackingEvents, 'complete'));
-      player.on('vast.pause', () => doVastAdTracking(this, player.vast.vastResponse.trackingEvents, 'pause'));
-      player.on('vast.resume', () => doVastAdTracking(this, player.vast.vastResponse.trackingEvents, 'resume'));
-      player.on('vast.fullscreen', () => doVastAdTracking(this, player.vast.vastResponse.trackingEvents, 'fullscreen'));
-      player.on('vast.exitFullscreen', () => doVastAdTracking(this, player.vast.vastResponse.trackingEvents, 'exitFullscreen'));
-      player.on('vast.mute', () => doVastAdTracking(this, player.vast.vastResponse.trackingEvents, 'mute'));
-      player.on('vast.unmute', () => doVastAdTracking(this, player.vast.vastResponse.trackingEvents, 'unmute'));
-      player.on('vast.adclick', () => doVastAdTracking(this, player.vast.vastResponse.trackingEvents, 'adclick'));
-
-      player.on('vast.contentEnd', () => videojs(this.videoNode).playlist.next());
-    });
-
-    this.player.adform();
-  }
-
-  playlist(videos) {
+  playlist(videos, player) {
     console.log('SUGGESTV: Do playlist -', videos);
-    this.player.playlist(videos);
-    this.player.playlist.autoadvance(0);
-  }
-
-  overlay(title) {
-    this.player.overlay({
-      content: 'Video has been paused',
-      debug: false,
-      overlays: [{
-        content: `<h1>${title.substr(0, 60)}...</h1>`,
-        showBackground: false,
-        class: 'delta-overlay',
-        start: 'pause',
-        end: 'playing',
-      }],
-    });
-  }
-
-  videoJsInit(videos) {
-    console.log('SUGGESTV: Do videojs', this.state);
-
-    this.playlist(videos);
-    const player = this.player;
-
-    player.muted(true);
-
-    player.tech({ IWillNotUseThisInPlugins: true }).on('touchend', (e) => {
-      player.muted(!player.muted());
-    });
-
-    player.tech({ IWillNotUseThisInPlugins: true }).on('click', (e) => {
-      this.setState({
-        pausedByUser: player.paused(),
-        playedByUser: !player.paused(),
-      });
-    });
-
-    player.controlBar.playToggle.on('click', () => {
-      this.setState({
-        pausedByUser: player.paused(),
-        playedByUser: !player.paused(),
-      });
-    });
-
-    player.on('pause', () => {
-      this.setState({ watchedDuration: player.currentTime() });
-      this.postAnalytics(player);
-    });
-
-    player.on('loadstart', () => {
-      const playlist = player.playlist();
-      const currentItem = player.playlist.currentItem();
-      const title = playlist[currentItem < 0 ? 0 : currentItem].title;
-
-      player.controlBar.volumeMenuButton.show();
-
-      if (CLIENT === 'telegraph') player.addClass('telegraph-player');
-
-      this.overlay(title);
-    });
-
-    player.on('ended', () => {
-      this.setState({ videoCompleted: true });
-      this.postAnalytics(player);
-    });
-
-    this.setState({ videoLoaded: true });
+    player.playlist(videos);
+    player.playlist.autoadvance(0);
   }
 
   render() {
+    const url = window.location.href;
     return (
-      <div data-vjs-player>
-        <video
-          playsInline
-          ref={node => (this.videoNode = node)}
-          className="video-js vjs-default-skin vjs-16-9 vjs-big-play-centered"
-        />
-      </div>
+      <Player
+        ref={p => (this.playerNode = p)}
+        updateState={this.updateState}
+        plugins={this.plugins}
+        setVideos={this.setVideos}
+        getVideos={App.getVideos(url, CLIENT)}
+        videos={this.state.videos}
+        playlist={this.playlist}
+        videoJsOptions={this.state.videoJsOptions}
+        adLoadingPoster={this.state.adLoadingPoster}
+        getAdTag={App.getAdTag}
+        getAdTagXML={App.getAdTagXML}
+        adStart={this.state.adStart}
+        postAnalytics={this.postAnalytics}
+        CLIENT={CLIENT}
+        Modernizr={Modernizr}
+      />
     );
   }