simplified video snapshot code

react/components/AssetPreview/index.js

@@ -5,16 +5,18 @@ const AssetPreview = ({ name, claimId, fileExt, contentType }) => {
   const directSourceLink = `${claimId}/${name}.${fileExt}`;
   const showUrlLink = `${claimId}/${name}`;
   const previewHolderStyle = {
-    clear  : 'both',
-    display: 'inline-block',
-    width  : '31%',
-    padding: '0px',
-    margin : '1%',
+    clear          : 'both',
+    display        : 'inline-block',
+    width          : '31%',
+    padding        : '0px',
+    margin         : '1%',
+    backgroundColor: 'black',
   };
   const assetStyle = {
     width  : '100%',
     padding: '0px',
     margin : '0px',
+    display: 'block',
   };
   return (
     <div style={previewHolderStyle}>

react/containers/PublishThumbnailInput/view.jsx

@@ -1,15 +1,20 @@
 import React from 'react';
 
 const ThumbnailPreview = ({dataUrl}) => {
-  const thumbnailPreviewStyle = {
+  const divStyle = {
     width  : '30%',
-    padding: '1%',
+    margin : '1%',
     display: 'inline-block',
+    border : 'solid 1px black',
+  }
+  const imageStyle = {
+    width  : '100%',
+    display: 'block',
   }
   return (
-    <div style={thumbnailPreviewStyle}>
+    <div style={divStyle}>
       { dataUrl ? (
-        <img style={{width: '100%'}} src={dataUrl} alt='image preview here' />
+        <img style={imageStyle} src={dataUrl} alt='image preview here' />
       ) : (
         <p>loading...</p>
         )
@@ -26,67 +31,62 @@ class PublishThumbnailInput extends React.Component {
     };
   }
   componentDidMount () {
-    this.setClaimAndThumbnail(this.props.publishClaim);
-    this.createThreePotentialThumbnails();
+    this.setClaimAndThumbailUrl(this.props.publishClaim);
+    this.previewThumbnails(this.props.publishFile);
   }
   componentWillReceiveProps (nextProps) {
-    if (nextProps.publishFile !== this.publishFile) {
-      // this.createThreePotentialThumbnails();
-    }
+    // if (nextProps.publishFile !== this.publishFile) {
+    //   this.createThumbnails(nextProps.publishFile);
+    // }
     if (nextProps.publishClaim !== this.props.publishClaim) {
       console.log(nextProps.publishClaim, this.props.publishClaim);
-      this.setClaimAndThumbnail(nextProps.publishClaim);
+      this.setClaimAndThumbailUrl(nextProps.publishClaim);
     }
   }
-  createThreePotentialThumbnails () {
-    const videoFile = this.props.publishFile;
-    console.log('video file', videoFile);
-    Promise.all([this.createThumbnail(videoFile), this.createThumbnail(videoFile), this.createThumbnail(videoFile)])
-      .then(([thumbOne, thumbTwo, thumbThree]) => {
-        // set the potential thumbnails
-        console.log([thumbOne, thumbTwo, thumbThree]);
-        this.selectVideoThumb(thumbOne);
-        this.setPossibleThumbnailFiles(thumbOne, thumbTwo, thumbThree);
+  previewThumbnails (videoFile) {
+    console.log('video file:', videoFile);
+    this.loadFileAndReturnThumbnails(videoFile)
+      .then((thumbnail) => {
+        console.log('thumbs:', thumbnail);
+        this.selectVideoThumb(thumbnail);
+        this.setPossibleThumbnailFiles(thumbnail, thumbnail, thumbnail);
       })
       .catch(error => {
+        console.log('error:', error);
         this.setState({error: error.message});
       });
   }
-  createThumbnail (file) {
+  loadFileAndReturnThumbnails (file) {
     return new Promise((resolve, reject) => {
-      console.log('creating a thumbnail');
       var fileReader = new FileReader();
       fileReader.onload = () => {
-        console.log('thumbnail loaded');
+        console.log('file loaded');
         const blob = new Blob([fileReader.result], {type: file.type});
         const url = URL.createObjectURL(blob);
         let video = document.createElement('video');
-        const timeupdate = () => {
-          if (snapImage()) {
-            video.removeEventListener('timeupdate', timeupdate);
-            video.pause();
-          }
-        };
-        const snapImage = () => {
+        const snapShot = (time) => {
+          console.log('creating thubmnail @', time);
+          // video.currentTime = time;
           let canvas = document.createElement('canvas');
           canvas.width = video.videoWidth;
           canvas.height = video.videoHeight;
           canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
           const imageDataUrl = canvas.toDataURL();
-          // console.log('imageDataUrl', imageDataUrl);
           const success = imageDataUrl.length > 1000;
-          if (success) { // do something with the image
-            return resolve(imageDataUrl);
-            // URL.revokeObjectURL(url);
+          if (success) {
+            return imageDataUrl;
           }
-          reject(success);
-        };
-        video.addEventListener('loadeddata', () => {
-          if (snapImage()) {
-            video.removeEventListener('timeupdate', timeupdate);
-          }
-        });
-        video.addEventListener('timeupdate', timeupdate);
+          return success;
+        }
+        const loadedata = () => {
+          console.log('loadeddata');
+          console.log('readyState', video.readyState);
+          const duration = video.duration;
+          console.log('readyState', duration);
+          const thumb = snapShot(duration / 2);
+          resolve(thumb);
+        }
+        video.addEventListener('loadeddata', loadedata);
         video.preload = 'metadata';
         video.src = url;
         // Load video in Safari / IE11
@@ -105,7 +105,7 @@ class PublishThumbnailInput extends React.Component {
     console.log('updating thumbnail file options');
     this.props.onThumbnailFileOptionsChange(fileOne, fileTwo, fileThree);
   }
-  setClaimAndThumbnail (claim) {
+  setClaimAndThumbailUrl (claim) {
     // set thumbnail claim based on publish claim name
     const url = `${this.props.host}/${this.props.channel}/${claim}.jpeg`;
     this.props.onThumbnailClaimChange(claim, url);