public/assets/js/generalFunctions.js

@@ -4,10 +4,10 @@ function getRequest (url) {
         xhttp.open('GET', url, true);
         xhttp.responseType = 'json';
         xhttp.onreadystatechange = () => {
-            if (xhttp.readyState == 4 ) {
-                if ( xhttp.status == 200) {
+            if (xhttp.readyState === 4 ) {
+                if ( xhttp.status === 200) {
                     resolve(xhttp.response);
-                } else if (xhttp.status == 403) {
+                } else if (xhttp.status === 403) {
                     reject('Wrong channel name or password');
                 } else {
                     reject('request failed with status:' + xhttp.status);
@@ -25,10 +25,10 @@ function postRequest (url, params) {
         xhttp.responseType = 'json';
         xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
         xhttp.onreadystatechange = () => {
-            if (xhttp.readyState == 4 ) {
-                if ( xhttp.status == 200) {
+            if (xhttp.readyState === 4 ) {
+                if ( xhttp.status === 200) {
                     resolve(xhttp.response);
-                } else if (xhttp.status == 401) {
+                } else if (xhttp.status === 401) {
                     reject( new AuthenticationError('Wrong channel name or password'));
                 } else {
                     reject('request failed with status:' + xhttp.status);

react/components/Preview.jsx

@@ -5,8 +5,9 @@ class Preview extends React.Component {
   constructor (props) {
     super(props);
     this.state = {
-      previewSource: '',
-    }
+      imgSource       : '',
+      defaultThumbnail: '/assets/img/video_thumb_default.png',
+    };
     this.previewFile = this.previewFile.bind(this);
   }
   componentWillMount () {
@@ -14,25 +15,32 @@ class Preview extends React.Component {
     this.previewFile(this.props.file);
   }
   componentWillReceiveProps (newProps) {
+    console.log('Preview will receive props', newProps);
+    if (newProps.file !== this.props.file) {
       this.previewFile(newProps.file);
     }
+    if (newProps.thumbnail !== this.props.thumbnail) {
+      console.log('updating thumbnail', this.props.thumbnail);
+      this.setState({imgSource: (newProps.thumbnail || this.state.defaultThumbnail)});
+    }
+  }
   previewFile (file) {
     const that = this;
     if (file.type !== 'video/mp4') {
       const previewReader = new FileReader();
       previewReader.readAsDataURL(file);
       previewReader.onloadend = function () {
-        that.setState({previewSource: previewReader.result});
+        that.setState({imgSource: previewReader.result});
       };
     } else {
-      that.setState({previewSource: (this.props.thumbnail || '/assets/img/video_thumb_default.png')});
+      that.setState({imgSource: (this.props.thumbnail || this.state.defaultThumbnail)});
     }
   }
   render () {
     return (
       <img
         id="asset-preview"
-        src={this.state.previewSource}
+        src={this.state.imgSource}
         className={this.props.dimPreview ? 'dim' : ''}
         alt="publish preview"
       />

react/containers/PublishThumbnailInput/view.jsx

@@ -5,51 +5,56 @@ class PublishThumbnailInput extends React.Component {
     super(props);
     this.state = {
       videoPreviewSrc: null,
+      thumbnailError : null,
+      thumbnailInput : '',
     }
+    this.handleInput = this.handleInput.bind(this);
     this.urlIsAnImage = this.urlIsAnImage.bind(this);
     this.testImage = this.testImage.bind(this);
     this.updateVideoThumb = this.updateVideoThumb.bind(this);
   }
+  handleInput (event) {
+    event.preventDefault();
+    const value = event.target.value;
+    this.setState({thumbnailInput: value});
+  }
   urlIsAnImage (url) {
     return (url.match(/\.(jpeg|jpg|gif|png)$/) != null);
   }
-  testImage (url, timeoutT) {
-    return new Promise(function (resolve, reject) {
-      const timeout = timeoutT || 5000;
-      let timer;
-      let img = new Image();
-      img.onerror = img.onabort = function () {
-        clearTimeout(timer);
-        reject('error');
+  testImage (url) {
+    return new Promise((resolve, reject) => {
+      const xhttp = new XMLHttpRequest();
+      xhttp.open('HEAD', url, true);
+      xhttp.onreadystatechange = () => {
+        if (xhttp.readyState === 4) {
+          if (xhttp.status === 200) {
+            resolve();
+          } else {
+            reject();
+          }
+        }
       };
-      img.onload = function () {
-        clearTimeout(timer);
-        resolve('success');
-      };
-      timer = setTimeout(function () {
-        // reset .src to invalid URL so it stops previous
-        // loading, but doesn't trigger new load
-        img.src = '//!!!!/test.jpg';
-        reject('timeout');
-      }, timeout);
-      img.src = url;
+      xhttp.send();
     });
   }
   updateVideoThumb (event) {
-    var imageUrl = event.target.value;
+    const imageUrl = event.target.value;
     const that = this;
     if (this.urlIsAnImage(imageUrl)) {
       this.testImage(imageUrl, 3000)
-        .then(function (result) {
-          if (result === 'success') {
+        .then(() => {
+          console.log('thumbnail is a valid image');
           that.props.onThumbnailChange('thumbnail', imageUrl);
-          } else if (result === 'timeout') {
-            console.log('could not resolve the provided thumbnail image url');
-          }
+          that.setState({thumbnailError: null});
         })
         .catch(error => {
           console.log('encountered an error loading thumbnail image url:', error);
+          that.props.onThumbnailChange('thumbnail', null);
+          that.setState({thumbnailError: 'That is an invalid image url'});
         });
+    } else {
+      that.props.onThumbnailChange('thumbnail', null);
+      that.setState({thumbnailError: null});
     }
   }
   render () {
@@ -59,7 +64,16 @@ class PublishThumbnailInput extends React.Component {
           <label className="label">Thumbnail:</label>
         </div><div className="column column--6 column--sml-10">
           <div className="input-text--primary">
-            <input type="text" id="claim-thumbnail-input" className="input-text input-text--full-width" placeholder="https://spee.ch/xyz/example.jpg" value={this.props.thumbnail} onInput={this.updateVideoThumb} />
+            <p className="info-message-placeholder info-message--failure">{this.state.thumbnailError}</p>
+            <input
+              type="text" id="claim-thumbnail-input"
+              className="input-text input-text--full-width"
+              placeholder="https://spee.ch/xyz/example.jpg"
+              value={this.state.thumbnailInput}
+              onChange={ (event) => {
+                this.handleInput(event);
+                this.updateVideoThumb(event);
+              }} />
           </div>
         </div>
       </div>