Add new message notification tone #655

TechnionYearlyProject · Jun 24, 2018 · a957e3e · a957e3e
1 parent 547c4b0
commit a957e3e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/views/src/components/sub-components/AppChatButton.vue b/views/src/components/sub-components/AppChatButton.vue
@@ -10,6 +10,7 @@
         <small>Chat</small>
       </span>
     </span>
+    <audio src="static/new-message-tone.mp3" hidden preload="auto" ref="audio"></audio>
   </v-btn>
 </template>
 
@@ -20,9 +21,15 @@
       return {
         newMessages: 0,
         intervalHandler: null,
-        pageDefaultTitle: document.title
+        pageDefaultTitle: document.title,
+        audioLoaded: false
       }
     },
+    mounted() {
+      this.$refs.audio.addEventListener("canplaythrough", () => {
+        this.audioLoaded = true;
+      });
+    },
     methods: {
       nullifyMessages() {
         if (this.newMessages > 0) {
@@ -35,6 +42,10 @@
     },
     sockets: {
       chat_message(m) {
+        if (!document.hasFocus() && this.audioLoaded) {
+          this.$refs.audio.play();
+        }
+
         if (this.$router.history.current.name === 'AppChat') {
           return;
         }

diff --git a/views/static/new-message-tone.mp3 b/views/static/new-message-tone.mp3