Reorganize the structure

resources/assets/js/app.vue

@@ -38,6 +38,11 @@ import { playback, ls, socket } from './services'
 import { focusDirective, clickawayDirective } from './directives'
 import router from './router'
 
+let ipc
+if (KOEL_ENV === 'app') {
+  ipc = require('electron').ipcRenderer
+}
+
 export default {
   components: { siteHeader, siteFooter, mainWrapper, overlay, loginForm, editSongsForm },
 
@@ -194,6 +199,26 @@ export default {
       socket.listen('favorite:toggle', () => {
         queueStore.current && favoriteStore.toggleOne(queueStore.current)
       })
+    },
+
+    listenToGlobalShortcuts () {
+      ipc.on('shortcut', (e, msg) => {
+        switch (msg) {
+          case 'MediaNextTrack':
+            playback.playNext()
+            break
+          case 'MediaPreviousTrack':
+            playback.playPrev()
+            break
+          case 'MediaStop':
+            playback.stop()
+            break
+          case 'MediaPlayPause':
+            const play = document.querySelector('#mainFooter .play')
+            play ? play.click() : document.querySelector('#mainFooter .pause').click()
+            break
+        }
+      })
     }
   },
 
@@ -215,11 +240,9 @@ export default {
         forceReloadWindow()
       },
 
-      /**
-       * Init our basic, custom router on ready to determine app state.
-       */
       'koel:ready': () => {
         router.init()
+        KOEL_ENV === 'app' && this.listenToGlobalShortcuts()
       }
     })
   }
@@ -242,6 +265,7 @@ Vue.directive('koel-clickaway', clickawayDirective)
 </script>
 
 <style lang="scss">
+@import "~#/app.scss";
 @import "~#/partials/_vars.scss";
 @import "~#/partials/_mixins.scss";
 @import "~#/partials/_shared.scss";

resources/assets/js/components/auth/login-form.vue

@@ -1,5 +1,8 @@
 <template>
   <form @submit.prevent="login" :class="{ error: failed }">
+    <div class="logo">
+      <img src="~#/../img/logo.svg" width="156" height="auto">
+    </div>
     <input v-model="email" type="email" placeholder="Email Address" autofocus required>
     <input v-model="password" type="password" placeholder="Password" required>
     <button type="submit">Log In</button>
@@ -77,12 +80,8 @@ form {
     animation: shake .5s;
   }
 
-  &::before {
-    content: " ";
-    display: block;
-    background: url(~#/../img/logo.svg) center top no-repeat;
-    background-size: 156px;
-    height: 172px;
+  .logo {
+    text-align: center;
   }
 
   @media only screen and (max-width : 414px) {

webpack.config.js

@@ -1,12 +1,21 @@
 const path = require('path')
+const webpack = require('webpack')
 
 module.exports = {
+  externals: {
+    electron: 'electron'
+  },
   resolve: {
     alias: {
       '@': path.resolve(__dirname, 'resources/assets/js'),
       '#': path.resolve(__dirname, 'resources/assets/sass')
     }
   },
+  plugins: [
+    new webpack.DefinePlugin({
+      KOEL_ENV: '"web"'
+    })
+  ],
   module: {
     rules: [
       {

webpack.mix.js

@@ -1,8 +1,8 @@
 const mix = require('laravel-mix')
 const fs = require('fs')
-const resolve = require('./webpack.config.js').resolve
+const { externals, resolve, plugins } = require('./webpack.config.js')
 
-mix.webpackConfig({ resolve })
+mix.webpackConfig({ externals, resolve, plugins })
 mix.setResourceRoot('./public/')
 
 mix.config.detectHotReloading()