make song title a link (#23)

* make song title a link

* increase app version, add shayan as contributors, and change onclick to arrow function

* modify contributors props

* Add you to the readme too

README.md

@@ -35,6 +35,9 @@ Find your download: [https://github.com/moshfeu/y2mp3/releases/latest](https://g
 
 ## Change log
 
+##### 1.4.0
+make song title a link
+
 ##### 1.3.0
 - Allow to change the audio quality
 - display a proper message when the url is not supported or invalid
@@ -48,6 +51,11 @@ Allow fetch and download a single video
 ##### 1.0.0
 Fetch videos from youtube playlist and download them one by one or all.
 
+## Contributors
+
+- [@shayanypn](https://github.com/shayanypn)
+
+
 <div>
   Os Icons made by <a href="https://www.flaticon.com/authors/pixel-perfect" title="Pixel perfect">Pixel perfect</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
 </div>

package.json

@@ -2,13 +2,20 @@
   "name": "y2mp3",
   "appname": "y2mp3",
   "productName": "y2mp3",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "main": "main.js",
   "author": {
     "name": "MosheF",
     "email": "moshfeu.dev@gmail.com",
     "url": "https://github.com/moshfeu"
   },
+  "contributors": [
+    {
+      "name": "Shayan Yazdanpanah",
+      "email": "shayanypn@gmail.com",
+      "url": "https://github.com/shayanypn"
+    }
+  ],
   "email": "moshfeu.dev@gmail.com",
   "license": "MIT",
   "description": "An app to download youtube videos as mp3",

src/components/video.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import { IVideoEntity, EVideoStatus } from '../types';
 import { ButtonProgress } from './button-progress';
+import { shell } from '../services/electron-adapter';
 
 interface IVideoProps {
   style?: React.CSSProperties,
@@ -19,6 +20,11 @@ export class Video extends React.Component<IVideoProps, any> {
     return `url(https://img.youtube.com/vi/${this.props.video.id}/mqdefault.jpg)`;
   }
 
+  onClickTitle = () =>  {
+    const { video:{id} } = this.props;
+    shell.openExternal(`https://www.youtube.com/watch?v=${this.props.video.id}`);
+  }
+
   render() {
     const { video, onVideoDownloadClick, style } = this.props;
     const { backgroundImage } = this;
@@ -28,7 +34,8 @@ export class Video extends React.Component<IVideoProps, any> {
     return (
       <div className="video" style={{backgroundImage, ...style}}>
         <div className="details">
-          <div className="name">
+          <div className="name"
+            onClick={this.onClickTitle}>
             {video.name}
           </div>
           <div className="button">

src/services/electron-adapter.ts

@@ -1,17 +1,19 @@
-import {IpcRenderer, Remote} from 'electron';
+import {IpcRenderer, Remote, Shell} from 'electron';
 
 declare global {
   interface Window {
     require: (module: 'electron') => {
       ipcRenderer: IpcRenderer,
       remote: Remote
+      shell: Shell
     };
   }
 }
 
 const electron = window.require('electron');
-const { ipcRenderer, remote } = electron;
+const { ipcRenderer, remote, shell } = electron;
 export {
   ipcRenderer,
-  remote
+  remote,
+  shell
 }

src/styles/components/video.scss

@@ -21,6 +21,11 @@
 
   .name {
     padding-right: 10px;
+    cursor: pointer;
+    opacity: 0.8;
+    &:hover {
+      opacity: 1;
+    }
   }
 }