resolve #13 Display not supported URL invalid or unsupported links

package.json

@@ -28,6 +28,7 @@
     "coveralls": "jest --coverage && cat ./coverage/lcov.info | coveralls"
   },
   "dependencies": {
+    "classnames": "^2.2.6",
     "downloads-folder": "^1.0.1",
     "electron-is-dev": "^1.0.1",
     "enzyme": "^3.7.0",

src/components/electron-events-listener/electron-events-listener.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 import { ipcRenderer } from '../../services/electron-adapter';
-import { openAbout, openPreferences } from '../../services/modals';
+import { openAbout, openPreferences } from '../../services/modalsAndAlerts';
 
 @observer
 export class ElectronEventsListener extends React.Component {

src/components/main.tsx

@@ -13,7 +13,9 @@ import { InstallFFMpeg } from './install-ffmpeg';
 import { AboutModal } from './about-modal';
 import { PreferencesModal } from './preferences-modal/preferences-modal';
 import { ElectronEventsListener } from './electron-events-listener';
-import { closeModal} from '../services/modals';
+import { closeModal} from '../services/modalsAndAlerts';
+import { Message } from 'semantic-ui-react';
+import * as classNames from 'classNames';
 
 @observer
 class Main extends React.Component<{}, {}> {
@@ -63,6 +65,9 @@ class Main extends React.Component<{}, {}> {
         }
         <AboutModal open={store.isAboutOpen} onClose={closeModal} />
         <PreferencesModal open={store.isPreferencesOpen} onClose={closeModal} />
+        <div className={classNames('errors', {'-has-errors': store.termsIsInvalid})}>
+          <Message color="red" compact>Can't find media (url is not supported or invalid)</Message>
+        </div>
       </div>
     );
   }

src/mobx/store.ts

@@ -3,6 +3,7 @@ import { IVideoEntity, EVideoStatus } from '../types';
 import { fetchVideos } from '../services/api';
 import { IVideoTask } from 'youtube-mp3-downloader';
 import { isFFMpegInstalled } from '../services/ffmpeg-installer';
+import { showTermsIsInvalid } from '../services/modalsAndAlerts';
 
 class Store {
   @observable searchTerm: string;
@@ -11,6 +12,7 @@ class Store {
   @observable isFFMpegInstalled: boolean;
   @observable isAboutOpen: boolean;
   @observable isPreferencesOpen: boolean;
+  @observable termsIsInvalid: boolean;
 
   constructor() {
     this.isFFMpegInstalled = isFFMpegInstalled();
@@ -19,7 +21,11 @@ class Store {
   @action search = async (term: string): Promise<void> => {
     this.searchTerm = term;
     this.searchInProgress = true;
+    this.termsIsInvalid = false;
     this.videos = await fetchVideos(this.searchTerm);
+    if (!this.videos.length) {
+      showTermsIsInvalid();
+    }
     this.searchInProgress = false;
   }
 

src/services/api.ts

@@ -34,6 +34,9 @@ export function setFfmpegPath() {
 export function fetchVideos(term: string): Promise<IVideoEntity[]> {
   try {
     const parsedTerm = urlParser.parse(term);
+    if (!parsedTerm) {
+      return Promise.resolve([]);
+    }
     if (parsedTerm.list) {
       return fetchVideosFromList(term);
     }

src/services/modals.ts → src/services/modalsAndAlerts.ts

@@ -21,4 +21,11 @@ export function closeModal() {
       store.isPreferencesOpen = false;
     break;``
   }
+}
+
+export function showTermsIsInvalid() {
+  store.termsIsInvalid = true;
+  setTimeout(() => {
+    store.termsIsInvalid = false;
+  }, 3000);
 }

src/styles/components/main.scss

@@ -2,4 +2,18 @@
   .videos {
     margin-top: 10px;
   }
+
+  .errors {
+    position: fixed;
+    opacity: 0;
+    width: 100%;
+    text-align: center;
+    transition: opacity .3s ease;
+    bottom: 10px;
+
+    &.-has-errors {
+      pointer-events: none;
+      opacity: 1;
+    }
+  }
 }