#1 - connect button to real progress

moshfeu · Nov 21, 2018 · d12ae0c · d12ae0c
1 parent 883f413
commit d12ae0c
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 14 deletions.
diff --git a/src/components/button-progress.tsx b/src/components/button-progress.tsx
@@ -3,13 +3,16 @@ import * as React from 'react';
 export interface IButtonProgressProps {
   text: string;
   onClick: () => void;
+  progress?: number;
 }
 
 export interface IButtonProgressState {
   progress: number;
 }
 
 export class ButtonProgress extends React.Component<IButtonProgressProps, IButtonProgressState> {
+  private readonly progressDone = 100;
+
   constructor(props) {
     super(props);
     this.state = {
@@ -18,11 +21,27 @@ export class ButtonProgress extends React.Component<IButtonProgressProps, IButto
   }
 
   get isLoading(): boolean {
-    return this.state.progress > 0 && this.state.progress < 1;
+    return this.state.progress > 0 && this.state.progress < this.progressDone;
   }
 
   get isDone(): boolean {
-    return this.state.progress === 1;
+    return this.state.progress === this.progressDone;
+  }
+
+  componentWillReceiveProps(nextProps: IButtonProgressProps, currentProps: IButtonProgressProps) {
+    if (nextProps.progress && currentProps.progress !== nextProps.progress) {
+      if (nextProps.progress === this.progressDone) {
+        this.done();
+      }
+
+      if (currentProps.progress != this.progressDone) {
+        // if current progress is complete which means this operation is reset it again to the start
+        // and that what `done` function do for the UI so ignore it
+        this.setState({
+          progress: nextProps.progress
+        });
+      }
+    }
   }
 
   done() {
@@ -34,6 +53,9 @@ export class ButtonProgress extends React.Component<IButtonProgressProps, IButto
   }
 
   onClick = () => {
+    if (this.props.onClick) {
+      return this.props.onClick();
+    }
     const makeProgress = () => {
       const {progress} = this.state;
       if (progress === 1) {
@@ -47,8 +69,6 @@ export class ButtonProgress extends React.Component<IButtonProgressProps, IButto
       setTimeout(() => {
         makeProgress()
       }, Math.random()*500);
-
-      this.props.onClick();
     }
 
     makeProgress();
@@ -60,6 +80,7 @@ export class ButtonProgress extends React.Component<IButtonProgressProps, IButto
     } else if (this.isDone) {
       return 'state-success';
     }
+    return '';
   }
 
   render() {
@@ -71,7 +92,7 @@ export class ButtonProgress extends React.Component<IButtonProgressProps, IButto
         <span className="progress-wrap">
           <span className="content">{text}</span>
           <span className="progress">
-            <span className={`progress-inner${!this.isLoading ? ' notransition' : ''}`} style={{width: `${progress * 100}%`, opacity: 1}}></span>
+            <span className={`progress-inner${!this.isLoading ? ' notransition' : ''}`} style={{width: `${progress}%`, opacity: 1}}></span>
           </span>
         </span>
       </button>

diff --git a/src/components/main.tsx b/src/components/main.tsx
@@ -70,14 +70,18 @@ class Main extends React.Component<any, IMainState> {
 
   private addToQueue = (videoId: string) => {
     const { videos } = this.state;
-    videos[this.videoIndex(videoId)].status = EVideoStatus.PENDING;
+    const videoIndex = this.videoIndex(videoId);
+    videos[videoIndex].status = EVideoStatus.PENDING;
+    videos[videoIndex].progress = 2;
     console.log(videos, 'addToQueue');
     this.setState({videos});
   }
 
   private gettingInfo = (videoId: string) => {
     const { videos } = this.state;
-    videos[this.videoIndex(videoId)].status = EVideoStatus.GETTING_INFO;
+    const videoIndex = this.videoIndex(videoId);
+    videos[videoIndex].status = EVideoStatus.GETTING_INFO;
+    videos[videoIndex].progress = 20;
     console.log(videos, 'gettingInfo');
     this.setState({videos});
   }
@@ -86,15 +90,17 @@ class Main extends React.Component<any, IMainState> {
     const { videos } = this.state;
     const videoIndex = this.videoIndex(videoId);
     videos[videoIndex].status = EVideoStatus.DOWNLOADING;
-    videos[videoIndex].progress = progress.percentage;
+    videos[videoIndex].progress = 20 + (progress.percentage * 0.8);
     console.log(videos, 'progress');
     this.setState({videos});
   }
 
   private finished = (err, data) => {
     const { videos } = this.state;
     const  { videoId } = data;
-    videos[this.videoIndex(videoId)].status = EVideoStatus.DONE;
+    const videoIndex = this.videoIndex(videoId);
+    videos[videoIndex].status = EVideoStatus.DONE;
+    videos[videoIndex].progress = 0;
     this.setState({videos});
     console.log('done');
 
@@ -145,7 +151,7 @@ class Main extends React.Component<any, IMainState> {
             }
             <div className="videos">
               {videos.map(video => (
-                <Video key={video.id} video={video} onVideoStartClick={this.downloadVideo} />
+                <Video key={video.id} video={video} onVideoDownloadClick={this.downloadVideo} />
               ))}
             </div>
           </Form>

diff --git a/src/components/video.tsx b/src/components/video.tsx
@@ -4,7 +4,7 @@ import { ButtonProgress } from './button-progress';
 
 interface IVideoProps {
   video: IVideoEntity;
-  onVideoStartClick: (video :IVideoEntity) => void;
+  onVideoDownloadClick: (video :IVideoEntity) => void;
 }
 
 export class Video extends React.Component<IVideoProps, any> {
@@ -27,17 +27,26 @@ export class Video extends React.Component<IVideoProps, any> {
   //   }
   // }
 
+  get backgroundImage(): string {
+    return `url(https://img.youtube.com/vi/${this.props.video.id}/mqdefault.jpg)`;
+  }
+
   render() {
-    const { video } = this.props;
+    const { video, onVideoDownloadClick } = this.props;
+    const { backgroundImage } = this;
 
     return (
-      <div className="video" style={{backgroundImage: `url(https://img.youtube.com/vi/${video.id}/mqdefault.jpg)`}}>
+      <div className="video" style={{backgroundImage}}>
         <div className="details">
           <div className="name">
             {video.name}
           </div>
           <div className="button">
-            <ButtonProgress text="Download" onClick={() => console.warn('not yet implemented')} />
+            <ButtonProgress
+              text="Download"
+              progress={video.progress}
+              onClick={() => onVideoDownloadClick(video)}
+            />
           </div>
         </div>
       </div>