Replace temporary custom webamp bundle and add macos media keys

.gitignore

@@ -1 +1,2 @@
-node_modules
+.cache
+node_modules

.travis.yml

@@ -3,14 +3,18 @@ matrix:
   - os: osx
     osx_image: xcode9.2
     language: node_js
-    node_js: '10'
+    node_js: '12'
     env:
     - ELECTRON_CACHE=$HOME/.cache/electron
     - ELECTRON_BUILDER_CACHE=$HOME/.cache/electron-builder
   - os: linux
     dist: xenial
     language: node_js
-    node_js: '10'
+    node_js: '12'
+    services:
+      # For Electron e2e UI testing
+      # See https://github.com/electron/spectron#on-travis-ci
+      - xvfb
     env:
     - ELECTRON_CACHE=$HOME/.cache/electron
     - ELECTRON_BUILDER_CACHE=$HOME/.cache/electron-builder
@@ -31,14 +35,6 @@ before_install:
   fi
 before_script:
 - git lfs pull
-# For Electron e2e UI testing
-# See https://github.com/electron/spectron#on-travis-ci
-- |
-  if [ "$TRAVIS_OS_NAME" == "linux" ]; then
-    export DISPLAY=:99.0
-    sh -e /etc/init.d/xvfb start
-    sleep 3 # give xvfb some time to start
-  fi
 script:
 - yarn build
 - |

main.js

@@ -10,7 +10,7 @@ const app = electron.app
 const BrowserWindow = electron.BrowserWindow
 
 if (isDev) {
-  require('electron-debug')({ showDevTools: 'undocked' })
+  require('electron-debug')({ devToolsMode: 'undocked' })
 }
 
 // Keep a global reference of the window object, if you don't, the window will
@@ -48,6 +48,7 @@ function createWindow() {
     fullscreenable: false,
     icon: path.join(__dirname, 'res/icon.png'),
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: false,
       preload: path.join(__dirname, 'src/node/preload.js'),
     }
@@ -97,7 +98,7 @@ app.on('web-contents-created', (event, contents) => {
   contents.on('new-window', (event, navigationUrl) => {
     const parsedUrl = url.parse(navigationUrl)
 
-    if (parsedUrl.protocol === 'file:' || parsedUrl.protocol === 'chrome-devtools:') {
+    if (parsedUrl.protocol === 'file:' || parsedUrl.protocol === 'chrome-devtools:' || parsedUrl.protocol === 'devtools:') {
       return
     }
 

package.json

@@ -1,52 +1,54 @@
 {
   "name": "webamp-desktop",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Desktop version of Winamp 2.9 reimplementation in HTML5 and JS",
   "main": "main.js",
   "scripts": {
     "copy": "cp -r ./bundled/* ./dist",
     "build": "yarn run copy && yarn build:src",
-    "build:src": "npx parcel build --public-url ./ ./src/index.html",
-    "watch": "npx parcel watch --public-url ./ --hmr-hostname 127.0.0.1 --hmr-port 54439 ./src/index.html",
+    "build:src": "npx parcel build --public-url ./ --no-source-maps ./src/index.html",
+    "watch": "npx parcel watch --public-url ./ --no-source-maps --hmr-hostname 127.0.0.1 --hmr-port 54439 ./src/index.html",
     "test": "jest",
     "electron": "./node_modules/.bin/electron .",
     "start": "yarn run build && electron .",
-    "pack:win": "build -w --x64",
-    "pack:linux": "build -l --x64",
-    "pack:mac": "build -m --x64",
+    "pack:win": "electron-builder -w --x64",
+    "pack:linux": "electron-builder -l --x64",
+    "pack:mac": "electron-builder -m --x64",
     "pack": "yarn run pack:win && yarn run pack:linux && yarn run pack:mac",
-    "dist": "yarn run build && build --x64"
+    "dist": "yarn run build && electron-builder --x64"
   },
   "homepage": "https://github.com/durasj/webamp-desktop",
   "repository": "https://github.com/durasj/webamp-desktop",
   "author": "Jakub Duras <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "electron-is-dev": "^1.0.1",
-    "electron-log": "^3.0.1",
-    "electron-updater": "^4.0.6",
-    "html-to-text": "^4.0.0",
+    "butterchurn": "^2.6.7",
+    "butterchurn-presets": "^2.4.7",
+    "electron-is-dev": "^1.1.0",
+    "electron-log": "^4.0.4",
+    "electron-updater": "^4.2.0",
+    "html-to-text": "^5.1.1",
     "left-clicky": "0.1.1",
-    "mime-types": "^2.1.22"
+    "mime-types": "^2.1.26"
   },
   "devDependencies": {
-    "@types/jest": "^24.0.11",
-    "@types/node": "^10.14.1",
+    "@types/jest": "^25.1.0",
+    "@types/node": "^12.12.6",
     "@types/webdriverio": "^4.13.3",
-    "electron": "^4.1.0",
-    "electron-builder": "^20.39.0",
-    "electron-debug": "^2.1.0",
-    "eslint": "^5.15.2",
-    "jest": "^24.5.0",
-    "parcel-bundler": "^1.12.2",
-    "spectron": "^5.0.0",
-    "ts-jest": "^24.0.0",
-    "tslint": "^5.14.0",
-    "typescript": "^3.2.4",
-    "webamp": "^1.3.0"
+    "electron": "^6.1.7",
+    "electron-builder": "^22.3.2",
+    "electron-debug": "^3.0.1",
+    "eslint": "^5.16.0",
+    "jest": "^25.1.0",
+    "parcel-bundler": "~1.12.4",
+    "spectron": "^8.0.0",
+    "ts-jest": "^25.0.0",
+    "tslint": "^6.0.0",
+    "typescript": "^3.7.5",
+    "webamp": "1.4.1-beta01"
   },
   "browserslist": [
-    "Chrome 69"
+    "Chrome 76"
   ],
   "build": {
     "appId": "me.duras.webamp-desktop",

src/node/mediaKeys.js

@@ -0,0 +1,16 @@
+const os = require('os')
+
+function registerMediaKeys(onPause, onPrevious, onNext) {
+    // According to https://electronjs.org/docs/api/global-shortcut
+    //
+    // > The following accelerators will not be registered successfully on macOS
+    // > 10.14 Mojave (Darwin 18.x.y) unless the app has been authorized as a trusted
+    // > accessibility client:
+    if (process.platform === 'darwin' && os.release().indexOf('18') !== 0) {
+        electron.globalShortcut.register('MediaPlayPause', onPause)
+        electron.globalShortcut.register('MediaNextTrack', onNext)
+        electron.globalShortcut.register('MediaPreviousTrack', onPrevious)
+    }
+}
+
+module.exports = registerMediaKeys

src/node/preload.js

@@ -2,6 +2,7 @@ const { remote } = require('electron')
 const handleTransparency = require('./transparency.js')
 const handleThumbnail = require('./thumbnail.js')
 const handleThumbar = require('./thumbar.js')
+const registerMediaKeys = require('./mediaKeys.js')
 
 // We want to completely disable the eval() for security reasons
 // ESLint will warn about any use of eval(), even this one
@@ -41,6 +42,7 @@ window.webampRendered = function () {
         window.webampPrevious,
         window.webampNext,
     )
+    registerMediaKeys(window.webampPause, window.webampPrevious, window.webampNext)
 }
 
 window.webampOnTrackDidChange = function(track) {

src/node/protocol.js

@@ -7,7 +7,8 @@ function interceptStreamProtocol() {
   // Content security policy
   const cspSrc = [
     "default-src 'none'",
-    "script-src 'self'",
+    // TODO: REMOVE unsafe-eval before
+    "script-src 'self' 'unsafe-eval'",
     "style-src 'self' 'unsafe-inline' data:",
     "img-src 'self' data:",
     "font-src 'self' data:",
@@ -26,8 +27,25 @@ function interceptStreamProtocol() {
     const filePath = path.normalize(`${__dirname}/../../${url}`)
     const contentType = mime.contentType(path.extname(request.url))
 
+    if (!fs.existsSync(filePath)) {
+      callback({
+        statusCode: 404,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Cache-Control': 'private, max-age=0',
+          'Content-Type': contentType,
+          'Content-Security-Policy': cspSrc.join(';'),
+          'Date': (new Date).toUTCString(),
+          'Server': 'Electron',
+          'X-Frame-Options': 'DENY',
+          'X-XSS-Protection': '1; mode=block',
+        }
+      })
+      return
+    }
+
     callback({
-      statusCode: fs.existsSync(filePath) ? 200 : 404,
+      statusCode: 200,
       headers: {
         'Access-Control-Allow-Origin': '*',
         'Cache-Control': 'private, max-age=0',

src/node/transparency.js

@@ -22,16 +22,14 @@ function handleTransparency() {
             }
         }
         const mouseleaveHandler = (e) => {
-            if (!e.toElement
-                || !e.toElement.offsetParent
-                || e.toElement.offsetParent.id === 'webamp'
-            ) {
+            // Completely leaving browser window (i.e. to taskbar) or just entering transparent space
+            if (!e.toElement || e.toElement.id === 'app') {
                 mainWindow.setIgnoreMouseEvents(true, { forward: true })
                 ignored = true
             }
             // We want to schedule events again for context menu.
             // Context menu can "stick out" of windows.
-            if (e.toElement.classList.contains('context-menu')) {
+            if (e.toElement && e.toElement.classList.contains('context-menu')) {
                 e.toElement.addEventListener('mouseenter', mouseenterHandler)
                 e.toElement.addEventListener('mouseleave', mouseleaveHandler)
                 e.toElement.addEventListener('click', () => {

src/renderer.ts

@@ -1,6 +1,6 @@
-// Temporary switch to custom webamp build
-// import Webamp from 'webamp'
-import Webamp from './webamp/webamp.bundle.js'
+import Webamp from 'webamp'
+// @ts-ignore TODO: Add typings for butterchurn
+import butterchurnPresets from 'butterchurn-presets'
 
 const DEFAULT_DOCUMENT_TITLE = document.title
 
@@ -28,6 +28,18 @@ const webamp = new Webamp({
     { url: './skins/ZaxonRemake1-0.wsz', name: 'Zaxon Remake v1.0' },
   ],
   enableHotkeys: true,
+  // @ts-ignore
+  __butterchurnOptions: {
+    // @ts-ignore TODO: Add typings for butterchurn
+    importButterchurn: () => import('butterchurn'),
+    getPresets: () => {
+      const presets = butterchurnPresets.getPresets()
+      return Object.keys(presets).map((name) => ({
+        name,
+        butterchurnPresetObject: presets[name]
+      }))
+    },
+  },
 })
 
 const unsubscribeOnMinimize = webamp.onMinimize(() => {
@@ -45,8 +57,6 @@ webamp.onTrackDidChange(track => {
 
   if (track && 'metaData' in track && track.metaData.title && track.metaData.artist) {
     document.title = `${track.metaData.title} - ${track.metaData.artist}`
-  } else if (track && 'defaultName' in track) {
-    document.title = track.defaultName
   } else {
     document.title = DEFAULT_DOCUMENT_TITLE
   }
@@ -59,26 +69,21 @@ webamp.renderWhenReady(document.getElementById('app')).then(
 
 // Expose some webamp API on the window for the main process
 window.webampPlay = function () {
-  // @ts-ignore
   webamp.play()
 }
 
 window.webampPlay = function () {
-  // @ts-ignore
   webamp.play()
 }
 
 window.webampPause = function () {
-  // @ts-ignore
   webamp.pause()
 }
 
 window.webampNext = function () {
-  // @ts-ignore
   webamp.nextTrack()
 }
 
 window.webampPrevious = function () {
-  // @ts-ignore
   webamp.previousTrack()
 }