#1 design form

moshfeu · Nov 16, 2018 · 8e5c121 · 8e5c121
1 parent b67ce50
commit 8e5c121
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 21 deletions.
diff --git a/main.js b/main.js
@@ -8,7 +8,7 @@ const isDev = require('electron-is-dev');
   function createWindow () {
     // Create the browser window.
     // win = new BrowserWindow({ width: 800, height: 600 })
-    win = new BrowserWindow({ width: 800, height: 600, webPreferences: {
+    win = new BrowserWindow({ width: 1600, height: 1200, webPreferences: {
 	    additionalArguments: [`--appData=${app.getPath('appData')}`]
     } });
 

diff --git a/src/components/form.tsx b/src/components/form.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 interface IFormProps {
   onSubmit: (url: string) => void;
   onClear: () => void;
+  hasResult: boolean;
 }
 
 interface IFormState {
@@ -11,15 +12,24 @@ interface IFormState {
 }
 
 export class Form extends React.Component<IFormProps, IFormState> {
-  private clear() {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      terms: 'https://www.youtube.com/playlist?list=PLtKALR6MChBz1gYizYPwjggc5BGAmYRRK',
+      containerActive: true
+    }
+  }
+
+  private clear = (): void => {
     this.setState({
       containerActive: false,
       terms: ''
     });
     this.props.onClear();
   }
 
-  private searchClick() {
+  private searchClick = (): void => {
     const { onSubmit } = this.props;
     const { containerActive, terms } = this.state;
 
@@ -30,16 +40,25 @@ export class Form extends React.Component<IFormProps, IFormState> {
     }
   }
 
-  render() {
+  private onSubmit = (e: React.FormEvent): void => {
     const { terms } = this.state;
     const { onSubmit } = this.props;
+    e.preventDefault();
+    if (terms && onSubmit) {
+      onSubmit(terms);
+    }
+  }
+
+  render() {
+    const { terms, containerActive } = this.state;
+    const { hasResult } = this.props;
 
     return (
-      <form onSubmit={() => terms && onSubmit(terms)}>
-        <div className="search-wrapper">
+      <form onSubmit={this.onSubmit}>
+        <div className={['search-wrapper', containerActive && 'active' || '', hasResult && '-has-result' || ''].join(' ')}>
           <div className="input-holder">
-            <input type="text" className="search-input" placeholder="Type to search" />
-            <button className="search-icon" onClick={this.searchClick}><span></span></button>
+            <input className="search-input" type="url" id="playlistUrl" placeholder="Type to search" value={terms} onChange={e => this.setState({terms: e.target.value})} />
+            <button type="button" className="search-icon" onClick={this.searchClick}><span></span></button>
           </div>
           <span className="close" onClick={this.clear}></span>
           <div className="result-container">

diff --git a/src/components/main.tsx b/src/components/main.tsx
@@ -7,6 +7,7 @@ import { IVideoEntity, EVideoStatus } from '../types';
 import { Video } from './video';
 import { IVideoTask } from 'youtube-mp3-downloader';
 import { installFfmpeg, isFFMpegInstalled } from '../services/ffmpeg-installer';
+import { Form } from './form';
 
 interface IMainState {
   playlistUrl: string;
@@ -32,6 +33,26 @@ class Main extends React.Component<any, IMainState> {
 
   componentDidMount() {
     this.listenToDownloader();
+
+    this.setState({
+      videos: [
+        {
+          "id": "JvKKd32Yw2E",
+          "progress": 0,
+          "status": EVideoStatus.NOT_STARTED
+        },
+        {
+          "id": "tPEE9ZwTmy0",
+          "progress": 0,
+          "status": EVideoStatus.NOT_STARTED
+        },
+        {
+          "id": "cdwal5Kw3Fc",
+          "progress": 0,
+          "status": EVideoStatus.NOT_STARTED
+        }
+      ]
+    })
   }
 
   private fetchVideosClick = async () => {
@@ -110,17 +131,20 @@ class Main extends React.Component<any, IMainState> {
     return (
       <div>
         <div className={isFFMpegInstalled() ? '' : 'hidden'}>
-          <input type="url" id="playlistUrl" placeholder="playlist url" value={playlistUrl} onChange={e => this.setState({playlistUrl: e.target.value})} />
-          <button onClick={this.fetchVideosClick} disabled={process}>Fetch</button>
-          <hr />
-          <div>
-          {videos.length ?
-            <button onClick={this.downloadAll}>Download All</button> : ''
-          }
-          {videos.map(video => (
-            <Video key={video.id} video={video} onVideoStartClick={this.downloadVideo} />
-          ))}
-          </div>
+          <Form
+            hasResult={!!videos.length}
+            onSubmit={this.fetchVideosClick}
+            onClear={() => this.setState({videos: []})}
+          >
+            <div>
+            {videos.length ?
+              <button onClick={this.downloadAll}>Download All</button> : ''
+            }
+            {videos.map(video => (
+              <Video key={video.id} video={video} onVideoStartClick={this.downloadVideo} />
+            ))}
+            </div>
+          </Form>
         </div>
         <div className={isFFMpegInstalled() ? 'hidden' : ''}>
             ffMpeg is not install :(<br />

diff --git a/src/styles/form.scss b/src/styles/form.scss
@@ -5,6 +5,11 @@
   transform: translate(-50%, -50%);
   top:50%;
   left:50%;
+
+  &.-has-result {
+    top: 30px;
+    transform: translate(-50%, 0);
+  }
 }
 
 .search-wrapper .input-holder {
@@ -182,7 +187,7 @@
   text-align: center;
   font-family: "Open Sans", Arial, Verdana;
   font-size: 14px;
-  display:none;
+  // display:none;
   color:#B7B7B7;
 }
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -30,6 +30,7 @@ module.exports = {
             }
           },
         ],
+        exclude: /node_modules/
       }
     ]
   },
@@ -46,7 +47,7 @@ module.exports = {
     sourceMapFilename: 'maps/app.[chunkhash].map.js',
     path: __dirname
   },
-  mode: 'production',
+  mode: 'development',
   target: 'node',
   plugins: [
     new DefinePlugin({