Can now play sound on magnet download!

assets/App.vue

@@ -23,14 +23,14 @@
             v-divider
           v-subheader.white--text(v-else-if='item.header') {{ item.header }}
           v-divider(v-else-if='item.divider')
-    
+
     v-system-bar.wb.dragable(dark, status, v-if='!browser')
       v-spacer
       div(v-if="$store.state.platform !== 'darwin'")
         v-icon.window-icon.non-dragable(@click="actOnWindow('minimize')") remove
         v-icon.window-icon.non-dragable(@click="actOnWindow('maximize')") check_box_outline_blank
         v-icon.window-icon.non-dragable(@click="actOnWindow('close')") close
-    
+
     v-toolbar.mablue.tb(fixed, dark)
       v-toolbar-side-icon(@click.stop='toggleDrawer()')
       v-toolbar-title.white--text.title.hidden-xs-only かわニメ
@@ -39,15 +39,15 @@
       v-btn.open-in-browser(icon, v-tooltip:left="{ html: 'Open KawAnime in your browser' }", @click='openInBrowser()')
         v-icon open_in_new
       settings
-    
+
     main.m
       transition(name='page', mode='out-in')
         router-view
-    
+
     env(v-show='$store.state.NODE_ENV')
-    
+
     info-results(v-show='$store.state.info.show')
-    
+
     // Used for displaying any info
     v-snackbar(
       :timeout='5000',
@@ -58,7 +58,7 @@
       v-model='$store.state.infoSnackbar.show'
     ) {{ $store.state.infoSnackbar.text }}
       v-btn.pink--text(flat, @click='$store.state.infoSnackbar.show = false') Close
-    
+
     v-footer.grey.darken-4
       v-spacer
       .white--text © 2016 - 2017 Kylart

components/settings.vue

@@ -3,7 +3,7 @@
     v-btn(icon, slot='activator')
       v-icon settings
     v-card.white--text.main
-      v-toolbar.mablue(dark)
+      v-toolbar.mablue.tb(fixed dark)
         v-btn(icon, @click='configModal = false', dark)
           v-icon close
         v-toolbar-title.headline Settings
@@ -18,11 +18,9 @@
               v-list-tile.ripple(slot='item', ripple)
                 v-list-tile-action
                   v-icon {{ item.action }}
-                v-list-tile-title
-                  | {{ item.title }}
+                v-list-tile-title {{ item.title }}
                 v-list-tile-action
-                  v-icon
-                    | keyboard_arrow_down
+                  v-icon keyboard_arrow_down
               v-list-tile.ripple(
                 v-for='subItem in item.items',
                 ripple, :to='subItem.href',
@@ -40,6 +38,7 @@
                 v-icon {{ item.action }}
               v-list-tile-title
                 | {{ item.title }}
+
       v-container.container(fluid)
         v-layout(row, wrap, justify-center)
           v-flex(xs11)
@@ -86,6 +85,23 @@
                     v-model='config.inside',
                     dark
                   )
+            v-card.section
+              v-card-title#local.headline Notification
+              v-divider
+              v-layout(row, wrap, justify-center)
+                v-flex.section-title(xs12) Sound
+                v-flex(xs4)
+                  v-select(
+                    v-bind:items='soundChoices',
+                    v-model='config.sound',
+                    hint='The sound you want KawAnime to use when notifying you!',
+                    persistent-hint,
+                    dark,
+                    item-value='text'
+                  )
+                v-flex(xs5)
+                  v-btn(icon large @click="play()")
+                    v-icon(large) play_circle_outline
 </template>
 
 <script>
@@ -104,6 +120,10 @@
             title: 'Local',
             action: 'folder',
             to: '#local'
+          }, {
+            title: 'Notification',
+            action: 'play_circle_outline',
+            to: '#notification'
           }
         ]
       }
@@ -114,6 +134,9 @@
       },
       fansubChoices () {
         return this.$store.state.fansubList
+      },
+      soundChoices () {
+        return this.$store.state.soundList
       }
     },
     methods: {
@@ -129,6 +152,10 @@
       saveAndClose () {
         this.save()
         this.configModal = false
+      },
+      play () {
+        this.$store.dispatch('setUpPlayer')
+        this.$store.dispatch('playSound')
       }
     }
   }
@@ -141,14 +168,15 @@
     width: 23%;
   }
 
-  .main
+  .tb
   {
-    padding-left: 23%;
+    top: 24px;
   }
 
   .container
   {
     padding-left: 23%;
+    padding-top: calc(24px + 48px);
   }
 
   .section

pages/downloader.vue

@@ -62,7 +62,7 @@
           v-if='!$store.state.downloaderForm.loading'
         ) Download!
         v-btn(dark, block, secondary, loading, v-else)
-    v-dialog.magnet-modal(v-model='$store.state.downloaderModal.show', lazy, absolute, width='800')
+    v-dialog.magnet-modal(v-model='magnetModal', lazy, absolute, width='800')
       v-card.secondary.white--text
         v-card-text.white--text
           h2.title.white--text
@@ -122,6 +122,14 @@
       },
       links () {
         return this.$store.state.downloaderModal.text
+      },
+      magnetModal () {
+        return this.$store.state.downloaderModal.show
+      }
+    },
+    watch: {
+      magnetModal () {
+        this.magnetModal && this.$store.dispatch('playSound')
       }
     },
     methods: {

pages/index.vue

@@ -87,12 +87,12 @@
   export default {
     mounted () {
       if (this.releases.length) {
-        this.updateTime(this.$store)
+        this.updateTime()
       }
 
       setInterval(() => {
         if (this.releases.length) {
-          this.updateTime(this.$store)
+          this.updateTime()
         }
       }, 60 * 1000)
     },
@@ -156,8 +156,8 @@
         this.choiceTitle = name
         this.$store.commit('setAddToChoice', true)
       },
-      updateTime (store = this.$store) {
-        const updated = store.state.releasesUpdateTime
+      updateTime () {
+        const updated = this.$store.state.releasesUpdateTime
         if (updated) {
           this.lastUpdateTime = updated.fromNow()
         }

server/index.js

@@ -36,6 +36,7 @@ const createConfig = () => {
         fansub: 'HorribleSubs',
         quality: '720p',
         localPath: join(BASE_PATH, 'Downloads'),
+        sound: 'Nyanpasu',
         inside: true,
         magnets: false
       }

store/actions.js

@@ -17,6 +17,7 @@ export default {
     dispatch('localInit').catch(err => { void (err) })
     dispatch('listInit').catch(err => { void (err) })
     dispatch('getHistory').catch(err => { void (err) })
+    dispatch('setUpPlayer').catch(err => { void (err) })
 
     // Online
     try {
@@ -40,6 +41,20 @@ export default {
 
     commit('setEnv', data)
   },
+  setUpPlayer ({state}) {
+    try {
+      const sound = state.config.sound
+      document.player = new window.Audio()
+      document.player.src = `static/sounds/${sound}.m4a`
+      document.player.volume = 0.5
+    } catch (e) { void e }
+  },
+  playSound () {
+    if (!document.player.src.includes('sounds/None.m4a')) {
+      document.player.currentTime = 0
+      document.player.play()
+    }
+  },
   async releasesInit ({state, commit, dispatch}) {
     console.log('[INIT] Releases')
 

store/mutations.js

@@ -21,6 +21,7 @@ export default {
     //   fansub: 'HorribleSubs',
     //   quality: '720p',
     //   localPath: join(userInfo().homedir, 'Downloads'),
+    //   sound: 'Nyanpasu',
     //   inside: true,
     //   magnets: false
     // }

store/state.js

@@ -18,6 +18,11 @@ export default {
     'DurandalSubs',
     'DefinitelyNotMe'
   ],
+  soundList: [
+    'Nyanpasu',
+    'Nico Nico Nii',
+    'None'
+  ],
   releaseFansub: '',
   releaseQuality: '',
   releases: [],