v0.5.0 Code cleanup; modules upgrade; Tray features

.babelrc

@@ -1,10 +1,9 @@
 {
     "presets": [
+        "modern-browsers",
         "react"
     ],
     "plugins": [
-        "transform-class-properties",
-        "transform-es2015-modules-commonjs",
-        "transform-react-inline-elements"
+        "transform-class-properties"
     ]
 }

.travis.yml

@@ -5,7 +5,6 @@ os:
   - osx
 
 before_install:
-  - npm install
   - npm install -g gulp
 
 script:

README.md

@@ -20,10 +20,6 @@ Mainly, the project may showcase how this may work together.
 ### Node
 
 ```
-# global modules
-npm install -g electron-prebuilt
-npm install -g bower
-
 # local dependencies, may take some time
 npm install
 
@@ -32,6 +28,9 @@ npm start
 
 # build binaries for Desktop
 gulp build
+# build binaries, OS specific only
+gulp build:osx
+gulp build:win
 
 # build front-end only
 gulp build:ui
@@ -55,6 +54,6 @@ This stuff seems useful, feel free to contribute with a PR (not sure when will h
 - [x] Translations
 - [ ] Volume control
 - [ ] Playlists
-- [ ] Tray icon: most of menu items just mocked, implement
-- [ ] Drag'n'Drop URLs to app Dock/Taskbar icon
+- [x] Tray icon: menu items
+- [x] Tray icon: Drag'n'Drop URL
 - [ ] YouTube links support

app/index.html

@@ -11,9 +11,25 @@
         }
 
         body {
+            cursor: default;
             font-size: 18px;
             line-height: 1.8em;
+            min-height: 100%;
             text-rendering: geometricPrecision;
+
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+
+            -webkit-app-region: drag;
+            -webkit-user-select: none;
+        }
+
+        button,
+        input {
+            -webkit-app-region: no-drag !important;
         }
     </style>
 </head>

app/main.js

@@ -14,6 +14,8 @@ app.on('open-url', (e, path) => {
 });
 
 ui.init(() => {
+    let isPlaying = false;
+
     // Locale
     ui.send('locale', app.getLocale());
     // Window
@@ -24,16 +26,36 @@ ui.init(() => {
     services.on('service', () => {
         let uiList = [];
         services.list.forEach((device) => {
-            uiList.push(device);
+            uiList.push({
+                host: device.host,
+                name: device.name
+            });
         });
 
         ui.send('services', uiList);
-        ui.setMenu(services.list);
+        ui.setMenu();
+    });
+    services.on('close', () => {
+        ui.send('close');
+        ui.setMenu();
+    });
+    services.on('connected', (host) => {
+        ui.send('connected', host);
+        ui.setMenu();
+    });
+    services.on('status', (status) => {
+        ui.send('status', status);
+
+        let statusPlaying = services.isPlaying();
+        console.log(' --- STATUS', status, statusPlaying);
+        if (!status || isPlaying !== statusPlaying) {
+            isPlaying = statusPlaying;
+            ui.setMenu();
+        }
+    });
+    services.on('unsupported', () => {
+        ui.send('unsupported');
     });
-    services.on('close', () => ui.send('close'));
-    services.on('connected', (host) => ui.send('connected', host));
-    services.on('status', (status) => ui.send('status', status));
-    services.on('unsupported', () => ui.send('unsupported'));
     services.browse();
 
     // IPC
@@ -49,3 +71,8 @@ ui.init(() => {
         }
     });
 });
+
+module.exports = {
+    app,
+    ui
+};

app/package.json

@@ -1,7 +1,7 @@
 {
     "name": "chromecast-app",
     "productName": "Chromecast app",
-    "version": "0.4.0",
+    "version": "0.5.0",
     "description": "Desktop application for Chromecast, based on Node.js, Electron, React & Material-UI",
     "main": "main.js",
     "scripts": {
@@ -30,11 +30,10 @@
     "homepage": "",
     "dependencies": {
         "castv2-client": "*",
-        "chromecasts": "*",
         "chromecast-scanner": "*",
         "material-ui": "~0.15.4",
-        "react": "~15.1.0",
-        "react-dom": "~15.1.0",
+        "react": "~15.3.1",
+        "react-dom": "~15.3.1",
         "react-intl": "^2.1.2",
         "react-tap-event-plugin": "*",
         "request": "*"

app/src/menu.js

@@ -127,7 +127,7 @@ let template = [
             {
                 label: 'Learn More',
                 click: function () {
-                    Electron.shell.openExternal('http://electron.atom.io');
+                    Electron.shell.openExternal('http://annexare.github.io/Chromecast/');
                 }
             },
         ]

app/src/services.js

@@ -2,17 +2,16 @@
 
 const CastClient = require('castv2-client').Client;
 const DefaultMediaReceiver = require('castv2-client').DefaultMediaReceiver;
-// TODO https://github.com/xat/castv2-youtube
 const EventEmitter = require('events').EventEmitter;
-// const mdns = require('mdns');
-// const mdns = require('mdns-js');
 const scanner = require('chromecast-scanner');
 const request = require('request');
 
-// const
+const PREVIEW_ICON_URL = 'https://www.google.com/chromecast/static/images/tv/what-is-chromecast.jpg';
+const PREVIEW_TITLE = 'Chromecast Stream';
+
+const STATE_PLAYING = 'PLAYING';
 //     BUFFERING = 'BUFFERING',
 //     PAUSED = 'PAUSED',
-//     PLAYING = 'PLAYING',
 //     REPEAT_OFF = 'REPEAT_OFF',
 //     REPEAT_ON = 'REPEAT_ON'
 //     ;
@@ -27,7 +26,10 @@ class Services extends EventEmitter {
         this.host = null;
         this.list = new Map();
         this.isReconnect = false;
+        this.status = false;
         this.url = '';
+
+        this.isPlaying = this.isPlaying.bind(this);
     }
 
     handleDevice(host) {
@@ -50,6 +52,11 @@ class Services extends EventEmitter {
     }
 
     handleHeaders(err, res) {
+        if (err || !res) {
+            console.log(' - ERROR HEAD ', err, res);
+            return;
+        }
+
         console.log(' - HEAD ', res.headers);
 
         if (!this.player || !this.player.session) {
@@ -62,26 +69,22 @@ class Services extends EventEmitter {
             return;
         }
 
-        let media = {
+        let contentType = res.headers['content-type'] || '',
+            media = {
             // Here you can plug an URL to any mp4, webm, mp3 or jpg file with the proper contentType.
             contentId: this.url,
-            contentType: res.headers['content-type'],
+            contentType: contentType,
             streamType: 'BUFFERED', // or LIVE
             // Title and cover displayed while buffering
             metadata: {
                 type: 0,
                 metadataType: 0,
-                title: 'Chromecast Stream',
-                images: [
-                    {
-                        // TODO replace with CC icon
-                        url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg'
-                    }
-                ]
+                title: `${PREVIEW_TITLE}: ${contentType}.`,
+                images: [{ url: PREVIEW_ICON_URL }]
             }
         };
 
-        console.log('App "%s" is launched, loading media: "%s"', this.player.session.displayName, media.contentId);
+        console.log(`App "${this.player.session.displayName}" is launched, loading media: "${this.url}"`);
         this.player.load(media, { autoplay: true }, this.handleLoadFile.bind(this));
     }
 
@@ -130,6 +133,8 @@ class Services extends EventEmitter {
         let host = service.data,
             name = (service.name || 'Chromecast').replace('.local', '');
 
+        service.host = host;
+
         console.log('Found device "%s" at %s', name, host);
         console.log(service);
 
@@ -139,6 +144,7 @@ class Services extends EventEmitter {
     }
 
     handleStatus(status) {
+        this.status = status;
         this.emit('status', status);
     }
 
@@ -151,10 +157,16 @@ class Services extends EventEmitter {
             scanner(this.handleService.bind(this));
         } catch (e) {
             // On contents reload, mdns is already running
-            console.error(e);
+            console.error('Scanner Error', e);
         }
     }
 
+    isPlaying() {
+        return this.status
+            ? this.status.playerState === STATE_PLAYING
+            : false;
+    }
+
     load(url, event) {
         this.url = url || this.url;
         this.event = event || this.event;
@@ -198,9 +210,13 @@ class Services extends EventEmitter {
         if (this.player) {
             this.player.stop(this.handleStatusCallback);
         }
+        this.handleStatus(false);
     }
 
     close() {
+        this.host = null;
+        this.status = false;
+
         if (this.client) {
             this.client.emit('close');
             console.log('Client: Closed.');