Remove playlist (MailOnline#21)

* removed playlist file | when no videos returned, returns empty array rather than predefined playlist

* Some linting: using const rather than let where variable is not reassigned | deleted some unused variables

* player should only render when videos are returned

* console logging when no videos are found | Call for videos is made in constructor on initial state

* Added isLoading param to state, which turns to false after video is loaded via setVideos

* removed conditional rendering, for now.

* video doesn't display when loading, and player dismounts if no video loaded

* removed this.state.noVideos | removed skipcache=true from endpoint

* Now getting videos in App rather than player

* HandleScroll only running if video is loaded

* minor changes: replaced uat with api, change in handleScroll function, passing container as prop to Player

Author: CJAllen056

src/App.jsx

@@ -4,8 +4,6 @@ import 'whatwg-fetch';
 
 import Player from './Player';
 
-import { itn, bristolsport, londontheinside, spectator, telegraph } from './playlist';
-
 const Modernizr = window.suggestv.Modernizr;
 
 /**
@@ -47,7 +45,7 @@ const CLIENT = getClient();
 
 class App extends React.Component {
   static getVideos(url, client) {
-    let endpoint = `https://uat.suggestv.io/semantics?url=${url}&client=${client}&skipcache=true`;
+    const endpoint = `https://api.suggestv.io/semantics?url=${url}&client=${client}`;
 
     return fetch(endpoint, {
       method: 'GET',
@@ -126,6 +124,7 @@ class App extends React.Component {
         width: 640,
         height: 264,
       },
+      isLoading: true,
       adError: 'N/A',
       adStart: 'N/A',
       adSrc: 'N/A',
@@ -138,11 +137,6 @@ class App extends React.Component {
       watchedDuration: 0,
       flashTestFinished: false,
       adLoadingPoster: 'https://build.suggestv.io/assets/adLoading.jpg',
-      itn: itn.slice(0).sort(() => 0.5 - Math.random()),
-      bristolsport: bristolsport.slice(0).sort(() => 0.5 - Math.random()),
-      londontheinside: londontheinside.slice(0).sort(() => 0.5 - Math.random()),
-      spectator: spectator.slice(0).sort(() => 0.5 - Math.random()),
-      telegraph: telegraph.slice(0).sort(() => 0.5 - Math.random()),
     };
     this.setVideos = this.setVideos.bind(this);
     this.playlist = this.playlist.bind(this);
@@ -155,6 +149,14 @@ class App extends React.Component {
     console.log('SUGGESTV: client is ', CLIENT);
     window.addEventListener('scroll', this.handleScroll);
     window.addEventListener('touchmove', this.handleScroll);
+
+    App.getVideos(window.location.href, CLIENT).then((data) => {
+      console.log('SUGGESTV: DATA', data);
+
+      this.setVideos(data);
+    }).catch((err) => {
+      console.log('SUGGESTV: Promise Error', err);
+    });
   }
 
   componentWillUnmount() {
@@ -163,17 +165,14 @@ class App extends React.Component {
   }
 
   setVideos(data) {
-    let videos = [];
+    const videos = [];
     const SCORE_LIMIT = 15;
     this.setState({ query: data.keywords });
 
     if (data !== null && data.results && data.results.length > 0) {
 
       data.results.forEach((video) => {
-        let keywordsMatched = [];
-        const highlights = video.highlights;
         const fields = video.fields;
-        const regex = /\*(\S[\s\S]*?)\*/g;
 
         if (Number(fields._score[0]) > SCORE_LIMIT) {
           videos.push({
@@ -193,28 +192,20 @@ class App extends React.Component {
         this.setState({
           videos,
           videosFrom: 'semanticsearch',
+          isLoading: false,
         });
       } else {
-        console.log('SUGGESTV: none of the videos matched enough keywords or have big enough score');
-        setDefaultClientVideos(this);
+        console.log('SUGGESTV: no videos');
+        this.setState({
+          videos: [],
+          isLoading: false,
+        });
       }
     } else {
-      setDefaultClientVideos(this);
-    }
-
-    function setDefaultClientVideos(ctx) {
-      videos = [];
-
-      if (CLIENT === 'localhost') videos = ctx.state.telegraph;
-      if (CLIENT === 'telegraph') videos = ctx.state.telegraph;
-      if (CLIENT === 'londontheinside') videos = ctx.state.londontheinside;
-      if (CLIENT === 'beautyandthedirt') videos = ctx.state.londontheinside;
-      if (CLIENT === 'bristol-sport') videos = ctx.state.bristolsport;
-      if (CLIENT === 'proactiveinvestors') videos = ctx.state.itn;
-
-      ctx.setState({
-        videos,
-        videosFrom: 'defaultplaylist',
+      console.log('SUGGESTV: no videos');
+      this.setState({
+        videos: [],
+        isLoading: false,
       });
     }
   }
@@ -225,15 +216,15 @@ class App extends React.Component {
 
   handleScroll() {
     const { pausedByUser, playedByUser, flashTestFinished, videoLoaded } = this.state;
-    if (App.isInViewport(this.playerNode.videoNode)) {
-      if (this.playerNode.videoNode && !pausedByUser && videoLoaded && flashTestFinished) {
+    if (this.playerNode && App.isInViewport(this.playerNode.videoNode)) {
+      if (!pausedByUser && videoLoaded && flashTestFinished) {
         if (CLIENT === 'cityam' || CLIENT === 'beautyandthedirt') {
           console.log('SUGGESTV: click-to-play');
         } else {
           this.playerNode.player.play();
         }
       }
-    } else if (!playedByUser) {
+    } else if (this.playerNode && !playedByUser) {
       this.playerNode.player.pause();
     }
   }
@@ -286,15 +277,11 @@ class App extends React.Component {
   }
 
   render() {
-    const url = window.location.href;
-
-    return (
+    return this.state.videos.length > 0 && !this.loading ? (
       <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}
@@ -305,8 +292,9 @@ class App extends React.Component {
         postAnalytics={this.postAnalytics}
         CLIENT={CLIENT}
         Modernizr={Modernizr}
+        container={document.getElementById('suggestvplayer')}
       />
-    );
+    ) : null;
   }
 }
 

src/Player.jsx

@@ -11,23 +11,13 @@ class Player extends React.PureComponent {
     this.player = videojs(this.videoNode, this.props.videoJsOptions, () => {
       this.plugins(this.player);
 
-      this.props.getVideos.then((data) => {
-        console.log('SUGGESTV: DATA', data);
-
-        this.props.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.props.videos);
-        this.videoNode.muted = true;
-      }).catch((err) => {
-        console.log('SUGGESTV: Promise Error', err);
-        this.player.dispose();
-      });
+      // Only deal with tap events from users, ignore generated events
+      this.props.container.addEventListener('tap', (e) => {
+        if (!e.isTrusted) e.stopImmediatePropagation();
+      }, true);
+
+      this.videoJsInit(this.props.videos);
+      this.videoNode.muted = true;
     });
   }