Merge pull request #532 from numo-labs/videoPlayOnScroll

Destination video scroll play
numo-labs · Aug 23, 2016 · fc1dd5b · fc1dd5b
2 parents dade73a + 99f389f
commit fc1dd5b
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 34 deletions.
diff --git a/lib/destination-tile/index.js b/lib/destination-tile/index.js
@@ -4,65 +4,94 @@ import ReactPlayer from 'react-player';
 import FadeImage from '../fade-image';
 import striptags from 'striptags';
 import defaultImage from '../../src/constants/default-image';
-import { VIEW_FILM } from '../../src/constants/actionTypes';
+
+function findNodeOffsetFromWindowTop (node) {
+  if (!node) { // offsetParent of the body node is null
+    return 0;
+  }
+  return node.offsetTop + findNodeOffsetFromWindowTop(node.offsetParent);
+}
 
 class DestinationTile extends Component {
   constructor () {
     super();
     this.state = {
-      viewFilm: false
+      tileInView: false
     };
+    this._scrollHandler = this._scrollHandler.bind(this);
   }
-  rawMarkup (value) {
-    return { __html: value };
+
+  componentDidMount () {
+    this._attachScrollListeners();
   }
 
-  handleOnClick () {
-    this.setState({
-      viewFilm: true
-    });
+  _attachScrollListeners () {
+    ['scroll', 'resize'].map((e) => window.addEventListener(e, this._scrollHandler));
   }
 
-  componentWillReceiveProps (nextProps) {
-    if (
-      !this.props.filmInView &&
-      nextProps.filmInView
-    ) {
-      this.props.dispatch({
-        type: VIEW_FILM
+  _removeScrollListeners () {
+    ['scroll', 'resize'].map((e) => window.removeEventListener(e, this._scrollHandler));
+  }
+
+  findNodeOffset () {
+    const node = this._scrollView;
+    const nodeHeight = node.offsetHeight; // height of the element
+    const fromTop = findNodeOffsetFromWindowTop(node); // y displacement of the top of the node from the top of the window
+    return fromTop + nodeHeight - window.pageYOffset - window.innerHeight; // offset of the node from the bottom of the window
+  }
+
+  _scrollHandler () {
+    const nodeOffsetFromWindowBottom = this.findNodeOffset();
+    if (nodeOffsetFromWindowBottom < window.pageYOffset) {
+      this.setState({
+        tileInView: true
       });
     }
   }
 
+  componentDidUpdate () {
+    this._attachScrollListeners();
+  }
+
+  rawMarkup (value) {
+    return { __html: value };
+  }
+
+  componentWillUnmount () {
+    this._removeScrollListeners();
+  }
+
   render () {
     const { tile: { sections } } = this.props;
     const { image, title, text } = sections[0];
     const imageSrc = image || defaultImage;
     const videoUrl = sections[0].videoUrl;
-    const tileMedia = videoUrl ? <ReactPlayer url={videoUrl} loop playing volume={0} width={'100%'} height={'100%'} /> : <FadeImage className='destinationImage' src={imageSrc}/>;
+    const tileMedia = videoUrl ? <ReactPlayer url={videoUrl} playing={this.state.tileInView} controls volume={0} width={'100%'} height={'100%'} /> : <FadeImage className='destinationImage' src={imageSrc}/>;
     let previewTextArray = text.trim()
                                .split('')
                                .slice(0, 292);
 
     const previewText = striptags(previewTextArray.join('').trim()) + '…';
     return (
-      <div className='destinationTileContainer'>
-        { tileMedia }
-        <div className='destinationContentContainer'>
-          <div className='titleDestHotelContainer'>
-            <div className='destinationTitleContainer'>
-              <div className='destinationTitle'>{title}</div>
-            </div>
-            <div className='destHotelContainer'>
-              <div className='destHotelFigures'>20 / 183</div>
-              <div className='destHotelTagContainer'>
-                <div className='destTag'>Dest.</div>
-                <div className='hotelsTag'>Hotels</div>
+      <div ref={(ref) => this._scrollView = ref}>
+        <div className='destinationTileContainer'>
+          { tileMedia }
+          <div className='destinationContentContainer'>
+            <div className='titleDestHotelContainer'>
+              <div className='destinationTitleContainer'>
+                <div className='destinationTitle'>{title}</div>
+              </div>
+              <div className='destHotelContainer'>
+                <div className='destHotelFigures'>20 / 183</div>
+                <div className='destHotelTagContainer'>
+                  <div className='destTag'>Dest.</div>
+                  <div className='hotelsTag'>Hotels</div>
+                </div>
               </div>
             </div>
-          </div>
-          <div className='destinationDescription'>
-            {previewText}
+            <div className='destinationDescription'>
+              {previewText}
+            </div>
           </div>
         </div>
       </div>
@@ -74,7 +103,6 @@ export default DestinationTile;
 
 DestinationTile.propTypes = {
   tile: PropTypes.object,
-  filmInView: PropTypes.bool,
   dispatch: PropTypes.func,
   videoUrl: PropTypes.string
 };
diff --git a/lib/destination-tile/test/index.test.js b/lib/destination-tile/test/index.test.js
@@ -21,7 +21,7 @@ describe('Component', function () {
   const children = wrapper.children().nodes;
   describe('<DestinationTile />', function () {
     it('should render our DestinationTile component', function (done) {
-      expect(children).to.have.length(2);
+      expect(children).to.have.length(1);
       done();
     });
   });

diff --git a/src/components/search-results/index.js b/src/components/search-results/index.js
@@ -165,7 +165,6 @@ class SearchResults extends Component {
           </div>
         );
       } else if (item.tile.type === 'destination' && contentExists) {
-        console.log('destination tile', item.tile);
         return (
           <div className='shadowHover'>
             {this.removeButton(item)}