diff --git a/package.json b/package.json
index 5be0a21..8ce8e5e 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/electron-events-listener/electron-events-listener.tsx b/src/components/electron-events-listener/electron-events-listener.tsx
index 6e0289a..8f618eb 100644
--- a/src/components/electron-events-listener/electron-events-listener.tsx
+++ b/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 {
diff --git a/src/components/main.tsx b/src/components/main.tsx
index 98f5d4e..1edbf01 100644
--- a/src/components/main.tsx
+++ b/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<{}, {}> {
}
+
+ Can't find media (url is not supported or invalid)
+
);
}
diff --git a/src/mobx/store.ts b/src/mobx/store.ts
index ca8ef3d..9d0dbf7 100644
--- a/src/mobx/store.ts
+++ b/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 => {
this.searchTerm = term;
this.searchInProgress = true;
+ this.termsIsInvalid = false;
this.videos = await fetchVideos(this.searchTerm);
+ if (!this.videos.length) {
+ showTermsIsInvalid();
+ }
this.searchInProgress = false;
}
diff --git a/src/services/api.ts b/src/services/api.ts
index 1c10e8b..66bfc39 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -34,6 +34,9 @@ export function setFfmpegPath() {
export function fetchVideos(term: string): Promise {
try {
const parsedTerm = urlParser.parse(term);
+ if (!parsedTerm) {
+ return Promise.resolve([]);
+ }
if (parsedTerm.list) {
return fetchVideosFromList(term);
}
diff --git a/src/services/modals.ts b/src/services/modalsAndAlerts.ts
similarity index 77%
rename from src/services/modals.ts
rename to src/services/modalsAndAlerts.ts
index edf611f..e91df60 100644
--- a/src/services/modals.ts
+++ b/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);
}
\ No newline at end of file
diff --git a/src/styles/components/main.scss b/src/styles/components/main.scss
index 9585f2c..c907947 100644
--- a/src/styles/components/main.scss
+++ b/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;
+ }
+ }
}
\ No newline at end of file