Moved to electron-webpack directory structure

- smaller app icon
- much less devDependencies (more to cull...)
- moved renovate config into package.json
- added DEBUG and LOCAL modes to dev easier with static files

Author: mountainash

Diff for: .dockerignore

@@ -22,5 +22,4 @@
 dist/
 build/
 README.md
-renovate.json
-screenshot.png
+Screenshot.png

Diff for: .gitignore

@@ -1,3 +1,6 @@
+.env
+Electron.app
 node_modules/
 dist/
 build/
+app_contents/

Diff for: .vscode/settings.json

@@ -8,5 +8,22 @@
 		"env": {
 			"es6": true
 		}
-	}
+	},
+	"workbench.colorCustomizations": {
+		"activityBar.background": "#7da4b5",
+		"activityBar.activeBackground": "#7da4b5",
+		"activityBar.activeBorder": "#8e517c",
+		"activityBar.foreground": "#15202b",
+		"activityBar.inactiveForeground": "#15202b99",
+		"activityBarBadge.background": "#8e517c",
+		"activityBarBadge.foreground": "#e7e7e7",
+		"titleBar.activeBackground": "#5c8da3",
+		"titleBar.inactiveBackground": "#5c8da399",
+		"titleBar.activeForeground": "#15202b",
+		"titleBar.inactiveForeground": "#15202b99",
+		"statusBar.background": "#5c8da3",
+		"statusBarItem.hoverBackground": "#4a7182",
+		"statusBar.foreground": "#15202b"
+	},
+	"peacock.color": "#5c8da3"
 }

Diff for: MixCloud.icns

@@ -2,9 +2,9 @@ Mixcloud Play
 =====
 Mixcloud Play is the missing desktop experience for [Mixcloud.com](https://www.mixcloud.com) with support for media controls and showing current track in menu bar. Enjoy listening to new music for hours...
 
-## [Download for Mac](https://github.com/mountainash/MixCloud-Play/releases/download/v0.9.7/MixCloud.Play.app.zip)
+## [Download for Mac](https://github.com/mountainash/Mixcloud-Play/releases/download/v0.9.7/MixCloud.Play.app.zip)
 
-![screenshot](https://raw.githubusercontent.com/uffou/MixCloud-Play/master/Screenshot.png)
+![screenshot](https://raw.githubusercontent.com/mountainash/Mixcloud-Play/master/Screenshot.png)
 
 ## Features
 1. Media controls - play/pause, next
@@ -13,22 +13,41 @@ Mixcloud Play is the missing desktop experience for [Mixcloud.com](https://www.m
 4. Modern desktop look
 
 ## Getting started
+## Building
+```sh
+yarn dist
+```
+
+### Development
+Download "Electron.app" into the project root.
+
 ```sh
 yarn
-yarn watch
-yarn start
+yarn build:local
+Electron.app/Contents/MacOS/Electron .
 ```
 
-## Building
+Use the compile macOS .app with Dev Tools and some extra debugging enabled.
+
 ```sh
-yarn dist
-OR
-yarn pack
+yarn
+yarn dist:debug
 ```
 
-## Docker
+
+### Docker Compose
 ```sh
 docker-compose build
-docker-compose run --rm mixcloud-play
+docker-compose run --rm mixcloud-play {any command here}
 ```
-Built app will output to `./dist/mac/MixCloud Play.app`
+
+Built app will output to `./dist/mac/Mixcloud Play.app`
+
+## Dev Tips
+### Asar Extract
+Linking/locating files inside the build can be hard to know what's going on inside the app.asar (inside Electron). Us the following commands to extract the contents of the .asar.
+
+1. Build the app fist `docker-compose run --rm mixcloud-play`
+1. `docker run --rm -it -v $(pwd):/project electronuserland/builder:12-11.19` to enter bash inside the container
+1. `npm install -g asar`
+1. `asar extract dist/mac/Mixcloud\ Play.app/Contents/Resources/app.asar app_contents` will extract the MacOS "dist" contents to `/app_contents/`

Diff for: README.md

@@ -2,14 +2,13 @@ version: "3"
 
 services:
   mixcloud-play:
-    image: electronuserland/builder:wine-mono-11.19
+    image: electronuserland/builder:12-11.19
     volumes:
-      - .:/usr/src/app
-      - ./node_modules:/project/node_modules
+      - .:/project
       - ~/.cache/electron:/root/.cache/electron
       - ~/.cache/electron-builder:/root/.cache/electron-builder
     environment:
       ELECTRON_CACHE: "/root/.cache/electron"
       ELECTRON_BUILDER_CACHE: "/root/.cache/electron-builder"
-    working_dir: /usr/src/app
+    working_dir: /project
     command: /bin/bash -c "yarn && yarn dist"

Diff for: docker-compose.yml

@@ -8,7 +8,8 @@
 		"macOS",
 		"mixcloud",
 		"wrapper",
-		"media keys"
+		"media keys",
+		"electron"
 	],
 	"author": {
 		"name": "Codemotion Ltd."
@@ -25,43 +26,62 @@
 		"type": "git",
 		"url": "[email protected]:uffou/MixCloud-Play.git"
 	},
+	"homepage": "https://github.com/uffou/MixCloud-Play/issues",
 	"bugs": {
 		"url": "https://github.com/uffou/MixCloud-Play/issues"
 	},
 	"license": "UNLICENSED",
 	"scripts": {
-		"start": "electron .",
-		"pack": "electron-builder --dir",
-		"build": "electron-builder --dir -m",
-		"dist": "electron-builder -m"
+		"dev": "electron-webpack dev",
+		"compile": "electron-webpack",
+		"compile:debug": "ELECTRON_WEBPACK_APP_DEBUG=true electron-webpack",
+		"compile:local": "ELECTRON_WEBPACK_APP_LOCAL=true yarn compile:debug",
+		"build": "electron-builder --mac",
+		"dist": "yarn compile && yarn build",
+		"dist:debug": "yarn compile:debug && yarn build",
+		"dist:dir": "yarn dist --dir -c.compression=store -c.mac.identity=null"
+	},
+	"electronWebpack": {
+		"title": false,
+		"staticSourceDirectory": "static",
+		"main": {
+			"extraEntries": ["@/preload.js"]
+		},
+		"renderer": {
+			"template": "src/renderer/index.html"
+		}
 	},
 	"build": {
 		"files": [
-			"build"
+			"static"
 		],
 		"appId": "com.codemotionapps.mixcloud",
 		"copyright": "Copyright © 2019 Codemotion Ltd.",
 		"productName": "Mixcloud Play",
 		"mac": {
+			"target": "tar.gz",
 			"category": "public.app-category.music",
-			"icon": "Mixcloud.icns",
-			"target": "dmg"
+			"icon": "Mixcloud.icns"
 		}
 	},
-	"main": "build/main.js",
+	"main": "dist/main/main.js",
 	"devDependencies": {
 		"@babel/core": "7.8.7",
 		"@babel/plugin-proposal-class-properties": "7.8.3",
-		"@babel/plugin-proposal-decorators": "7.8.3",
-		"@babel/plugin-proposal-function-bind": "7.8.3",
 		"@babel/preset-env": "7.8.7",
-		"babel-loader": "8.0.6",
 		"copy-webpack-plugin": "5.1.1",
-		"electron": "3",
-		"electron-builder": "^22.4.0",
-		"webpack": "4.42.0",
-		"webpack-cli": "3.3.11"
+		"electron": "3.1.13",
+		"electron-builder": "22.4.0",
+		"electron-webpack": "2.7.4",
+		"webpack": "4.42.0"
+	},
+	"resolutions": {
+		"webpack-sources": "1.4.3"
+	},
+	"dependencies": {
+		"source-map-support": "0.5.16"
 	},
-	"dependencies": {},
-	"postinstall": "electron-builder install-app-deps"
-}
+	"renovate": {
+		"extends": ["config:base"]
+	}
+}

Diff for: package.json

@@ -1,6 +1,6 @@
-const path = require('path');
+// 'use strict'
 
-const {
+import {
     app,
     BrowserWindow,
     globalShortcut,
@@ -9,23 +9,41 @@ const {
     Notification,
     Tray,
     shell
-} = require('electron');
-const menuTemplate = require(`./menu`);
+} from 'electron'
 
-var mainWindow = null;
-var tray = null;
-var contextMenu = null;
+import * as path from 'path'
+import * as url from 'url'
+
+const DEBUG = process.env.ELECTRON_WEBPACK_APP_DEBUG || false
+const LOCAL = process.env.ELECTRON_WEBPACK_APP_LOCAL || false
+
+if (DEBUG)
+	console.log(JSON.stringify(process.env, null, 4))
+	console.info(__dirname)
+	console.info(__static)
+
+const getStatic = (val) => {
+	if (LOCAL) {
+		return path.resolve(__dirname, '../../static/'+val) // __dirname is /build/main/
+	}
+	return path.resolve(__static, val)
+}
+
+let mainWindow = null
+const menuTemplate = require('./menu.js')
+
+let tray = null;
+let contextMenu = null;
 var _isPlaying = false;
-var DEBUG = false;
 
 const toggleWindow = () => {
 	mainWindow.show();
 	mainWindow.focus();
-};
+}
 
-async function initTray() {
+const initTray = () => {
 	if (!tray) {
-		tray = new Tray(path.join(__dirname, './img/logoTemplate.png'));
+		tray = new Tray(getStatic('logoTemplate.png'));
 		tray.on('click', togglePlay);
 		tray.on('right-click', displayContextMenu);
 		tray.on('double-click', toggleWindow);
@@ -80,21 +98,45 @@ app.on('ready', () => {
 
     mainWindow = new BrowserWindow({
 		titleBarStyle: 'hiddenInset',
+		backgroundColor: '#ADADAD',
         width: 1100,
         minWidth: 768,
         height: 800,
 		minHeight: 400,
+		isMinimizable: false, // don't seem to work in current version
+		isMaximizable: false,
 		webPreferences: {
-            // preload: 'preload.js', //
+            preload: 'preload.js',
 			nodeIntegration: true //TODO turn this off
 		}
-    });
+	})
 
-	mainWindow.loadFile(path.join(__dirname, 'index.html'));
-    //mainWindow.loadURL(path.join('file://', __dirname, '/index.html'))
+	let template_path = LOCAL ? '../renderer/index.html' : 'index.html'
+
+	mainWindow.loadURL(url.format({
+		pathname: path.join(__dirname, template_path),
+		protocol: 'file'
+	}))
 
 	if (DEBUG) {
-		mainWindow.openDevTools();
+		// mainWindow.openDevTools();
+
+		// auto-open dev tools
+		mainWindow.webContents.on('did-frame-finish-load', () => {
+			mainWindow.webContents.openDevTools();
+		})
+
+		// add inspect element on right click menu
+		mainWindow.webContents.on('context-menu', (e, props) => {
+			Menu.buildFromTemplate([
+				{label: 'Inspect element',
+					click() {
+						mainWindow.inspectElement(props.x, props.y);
+					},
+				},
+			]).popup(mainWindow);
+		});
+
 	}
 
     // mainWindow.on('focus', () => {
@@ -232,4 +274,12 @@ ipcMain.on('handlePlay', (_, track) => {
     setTimeout(() => {
         notification.close();
     }, 7000);
-});
+});
+
+app.on('window-all-closed', () => {
+	// On OS X it is common for applications and their menu bar
+	// to stay active until the user quits explicitly with Cmd + Q
+	if (process.platform !== 'darwin') {
+		app.quit()
+	}
+})

Diff for: renovate.json

@@ -2,6 +2,8 @@ const path = require(`path`);
 
 const { ipcRenderer, webFrame, shell } = require(`electron`);
 
+console.log('preload called');
+
 // Open all links in external browser
 document.addEventListener('click', function(event) {
 	if (event.target.href) {

Diff for: src/@util/noop.js

@@ -1,13 +1,11 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<meta charset="utf-8" />
+	<meta charset="utf-8">
 	<title>Mixcloud Play</title>
-	<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
 </head>
 <body>
-	<div id="dragger"></div>
-	<div id="hud">
+	<div id="hud" style="display:none">
 		<div id="info">
 			<p id="name"><span class="label">ℹ️</span> <span id="title">track title</span> <span id="artist">track artist</span></p>
 			<p id="link"><span class="label">🔗</span> <span id="url">https://mixcloud.com/play/this/song</span></p>
@@ -24,10 +22,9 @@
 		allowpopups
 		disablewebsecurity
 		preload="./preload.js"
-		src="https://www.mixcloud.com"
+		src="https://www.mixcloud.com/"
 		partition="persist:mixcloud"
 		webpreferences="nativeWindowOpen=true;experimentalFeatures"
 	></webview>
-	<script src="renderer.js"></script>
 </body>
 </html>