add notification sound play

MOTOO11 · Dec 10, 2016 · 3cb738c · 3cb738c
1 parent 31dc5c2
commit 3cb738c
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 92 deletions.
diff --git a/package.json b/package.json
@@ -1,76 +1,76 @@
 {
-    "name": "liveport",
-    "version": "1.1.1",
-    "description": "livestream support tool",
-    "main": "build/main.js",
-    "scripts": {
-        "watch": "webpack-dashboard -- webpack -d --watch",
-        "start": "webpack-dashboard -- webpack-dev-server -d --hot --inline",
-        "build": "electron-packager . live_gen --platform=win32 --arch=x64 --version=1.4.6 --out ./release"
-    },
-    "author": "https://github.com/odangosan",
-    "license": "ISC",
-    "devDependencies": {
-        "@types/electron": "^1.4.25",
-        "@types/express": "^4.0.33",
-        "@types/iconv-lite": "0.0.1",
-        "@types/material-design-lite": "^1.1.14",
-        "@types/materialize-css": "^0.97.32",
-        "@types/node": "^6.0.46",
-        "@types/request": "0.0.33",
-        "@types/request-promise": "^4.1.33",
-        "@types/socket.io": "^1.4.27",
-        "@types/socket.io-client": "^1.4.28",
-        "@types/webspeechapi": "0.0.27",
-        "autoprefixer": "^6.5.3",
-        "copy-webpack-plugin": "^4.0.0",
-        "css-loader": "^0.25.0",
-        "electron": "^1.4.5",
-        "electron-connect": "^0.6.0",
-        "electron-packager": "^8.2.0",
-        "event-stream": "^3.3.4",
-        "exports-loader": "^0.6.3",
-        "file-loader": "^0.9.0",
-        "font-awesome": "^4.7.0",
-        "github": "^7.0.0",
-        "gulp": "^3.9.1",
-        "gulp-rename": "^1.2.2",
-        "gulp-typescript": "^3.1.2",
-        "gulp-useref": "^3.1.2",
-        "gulp-util": "^3.0.7",
-        "gulp-webpack": "^1.5.0",
-        "gulp-zip": "^3.2.0",
-        "iconv-lite": "^0.4.13",
-        "imports-loader": "^0.6.5",
-        "jquery": "^3.1.1",
-        "json-loader": "^0.5.4",
-        "less": "^2.7.1",
-        "less-loader": "^2.2.3",
-        "material-design-icons": "^3.0.1",
-        "material-design-lite": "^1.2.1",
-        "open": "0.0.5",
-        "postcss-import": "^8.2.0",
-        "postcss-loader": "^1.1.1",
-        "request": "^2.78.0",
-        "request-promise": "^4.1.1",
-        "resolve-url-loader": "^1.6.0",
-        "run-sequence": "^1.2.2",
-        "script-loader": "^0.7.0",
-        "socket.io-client": "^1.5.1",
-        "style-loader": "^0.13.1",
-        "ts-loader": "^1.0.0",
-        "typescript": "^2.0.8",
-        "typings": "^1.5.0",
-        "url-loader": "^0.5.7",
-        "vue": "^2.0.5",
-        "vue-typed": "^2.0.1",
-        "webpack": "^1.13.3",
-        "webpack-dashboard": "^0.2.0",
-        "webpack-dev-server": "^1.16.2",
-        "webpack-merge": "^0.15.0"
-    },
-    "dependencies": {
-        "express": "^4.14.0",
-        "socket.io": "^1.5.1"
-    }
-}
+  "name": "liveport",
+  "version": "1.2.0",
+  "description": "livestream support tool",
+  "main": "build/main.js",
+  "scripts": {
+    "watch": "webpack-dashboard -- webpack -d --watch",
+    "start": "webpack-dashboard -- webpack-dev-server -d --hot --inline",
+    "build": "electron-packager . live_gen --platform=win32 --arch=x64 --version=1.4.6 --out ./release"
+  },
+  "author": "https://github.com/odangosan",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/electron": "^1.4.25",
+    "@types/express": "^4.0.33",
+    "@types/iconv-lite": "0.0.1",
+    "@types/material-design-lite": "^1.1.14",
+    "@types/materialize-css": "^0.97.32",
+    "@types/node": "^6.0.46",
+    "@types/request": "0.0.33",
+    "@types/request-promise": "^4.1.33",
+    "@types/socket.io": "^1.4.27",
+    "@types/socket.io-client": "^1.4.28",
+    "@types/webspeechapi": "0.0.27",
+    "autoprefixer": "^6.5.3",
+    "copy-webpack-plugin": "^4.0.0",
+    "css-loader": "^0.25.0",
+    "electron": "^1.4.5",
+    "electron-connect": "^0.6.0",
+    "electron-packager": "^8.2.0",
+    "event-stream": "^3.3.4",
+    "exports-loader": "^0.6.3",
+    "file-loader": "^0.9.0",
+    "font-awesome": "^4.7.0",
+    "github": "^7.0.0",
+    "gulp": "^3.9.1",
+    "gulp-rename": "^1.2.2",
+    "gulp-typescript": "^3.1.2",
+    "gulp-useref": "^3.1.2",
+    "gulp-util": "^3.0.7",
+    "gulp-webpack": "^1.5.0",
+    "gulp-zip": "^3.2.0",
+    "iconv-lite": "^0.4.13",
+    "imports-loader": "^0.6.5",
+    "jquery": "^3.1.1",
+    "json-loader": "^0.5.4",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.3",
+    "material-design-icons": "^3.0.1",
+    "material-design-lite": "^1.2.1",
+    "open": "0.0.5",
+    "postcss-import": "^8.2.0",
+    "postcss-loader": "^1.1.1",
+    "request": "^2.78.0",
+    "request-promise": "^4.1.1",
+    "resolve-url-loader": "^1.6.0",
+    "run-sequence": "^1.2.2",
+    "script-loader": "^0.7.0",
+    "socket.io-client": "^1.5.1",
+    "style-loader": "^0.13.1",
+    "ts-loader": "^1.0.0",
+    "typescript": "^2.0.8",
+    "typings": "^1.5.0",
+    "url-loader": "^0.5.7",
+    "vue": "^2.0.5",
+    "vue-typed": "^2.0.1",
+    "webpack": "^1.13.3",
+    "webpack-dashboard": "^0.2.0",
+    "webpack-dev-server": "^1.16.2",
+    "webpack-merge": "^0.15.0"
+  },
+  "dependencies": {
+    "express": "^4.14.0",
+    "socket.io": "^1.5.1"
+  }
+}
diff --git a/src/assets/audio/notification.mp3 b/src/assets/audio/notification.mp3
diff --git a/src/renderer/html/index.html b/src/renderer/html/index.html
@@ -89,6 +89,13 @@
                         <label><i class="material-icons">slow_motion_video</i> 音程：{{pManager.vParam.pitch}}</label>
                         <input class="mdl-slider mdl-js-slider" type="range" max="100" min="0" v-model="pManager.vParam.pitch" v-bind:disabled="!pManager.vParam.use" />
                     </span>
+                    <span class="mdl-navigation__link">
+                        <label><i class="material-icons">audiotrack</i> 着信音</label>
+                        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="playNotificationSound">
+                            <input type="checkbox" id="playNotificationSound" class="mdl-switch__input"  v-model="playingNotificationSound">
+                            <span class="mdl-switch__label">{{playingNotificationSound?"on":"off"}}</span>
+                    </label>
+                    </span>
                     <span class="mdl-navigation__link">
                         <label><i class="material-icons">record_voice_over</i> 読み上げテスト</label>                        
                         <div class="mdl-textfield mdl-js-textfield">

diff --git a/src/renderer/ts/Application.ts b/src/renderer/ts/Application.ts
@@ -15,6 +15,7 @@ const ApplicatonName = require("../../../package.json").name
 const VERSION = require("../../../package.json").version
 import * as $ from "jquery"
 const SETTINGS = "settings";
+
 @Component({})
 export default class Application extends Vue {
     pManager: ProvideManager;
@@ -93,20 +94,24 @@ export default class Application extends Vue {
         clearTimeout(this.provideTimerID);
         if (!this.processing) return;
         this.provideTimerLimitCountDown = this.provideTimeLimit;
-        if (this.thread.bookmark != this.thread.allNum()) {
-            let target = this.thread.messages[this.thread.bookmark];
-            let tmpLetter = LETTER.split("$1");
-            let letter = tmpLetter.length > 1 ?
-                tmpLetter[0] + target.num + tmpLetter[1]
-                : target.num.toString();
-            this.pManager.provide(letter + ":", target.text, this.pManager.reading, this.startProvide, this.provideTimeLimit);
-            this.thread.next();
-            if (this.autoScroll)
-                this.scrollTo(this.thread.bookmark);
-        } else {
-            this.haltProvide();
+        let provide = () => {
+            if (this.thread.bookmark != this.thread.allNum()) {
+                let target = this.thread.messages[this.thread.bookmark];
+                let tmpLetter = LETTER.split("$1");
+                let letter = tmpLetter.length > 1 ?
+                    tmpLetter[0] + target.num + tmpLetter[1]
+                    : target.num.toString();
+                this.pManager.provide(letter + ":", target.text, this.pManager.reading, this.startProvide, this.provideTimeLimit);
+                this.thread.next();
+                if (this.autoScroll)
+                    this.scrollTo(this.thread.bookmark);
+            } else {
+                this.haltProvide();
+            }
+            this.setProvideTimer();
         }
-        this.setProvideTimer();
+        if (this.playingNotificationSound) this.notificationSound(provide);
+        else provide();
     }
     stopProvide() {
         clearTimeout(this.provideTimerID);
@@ -123,7 +128,7 @@ export default class Application extends Vue {
         } else {
             this.provideTimerID = window.setTimeout(() => {
                 this.provideTimerLimitCountDown--;
-                this.setProvideTimer();;
+                this.setProvideTimer();
             }, 1000);
         }
     }
@@ -209,7 +214,7 @@ export default class Application extends Vue {
     }
 
     dummyTextTemp: string = "";
-    
+
     insertDummyText() {
         this.dummyText = this.dummyTextTemp;
         if (!this.processing)
@@ -252,7 +257,7 @@ export default class Application extends Vue {
         this.pManager.provide(letter, body, this.pManager.reading, null, this.provideTimeLimit);
     }
 
-    autoScroll: boolean = false;    cnangeAutoScroll() {
+    autoScroll: boolean = false; cnangeAutoScroll() {
         this.autoScroll = !this.autoScroll;
     }
     scrollTo(value: number, duration?: number) {
@@ -302,6 +307,7 @@ export default class Application extends Vue {
             + this.pManager.vParam.rate
             + this.pManager.vParam.pitch
             + this.pManager.vParam.use
+            + this.playingNotificationSound
             + this.reload + this.provideTimeLimit + this.pManager.reading
             + this.path + this.pManager.voice;
     }
@@ -320,6 +326,7 @@ export default class Application extends Vue {
                     this.loadUrlSource();
                 this.setTitle(this.thread.title);
             };
+            this.playingNotificationSound = Boolean(settings.playingNotificationSound);
             this.autoScroll = Boolean(settings.autoScroll);
             this.pManager.vParam.volume = Number(settings.volume);
             this.pManager.vParam.rate = Number(settings.rate);
@@ -360,6 +367,7 @@ export default class Application extends Vue {
             reading: this.pManager.reading,
             path: this.path,
             voice: this.pManager.voice,
+            playingNotificationSound: this.playingNotificationSound,
             dummyText: this.dummyText
         }));
     };
@@ -396,6 +404,14 @@ export default class Application extends Vue {
         }
     }
 
+    playingNotificationSound: boolean = false;
+    notificationSound(callback: () => void) {
+        let defaultNotificationSound = "../../assets/audio/notification.mp3";
+        let audio = new Audio(defaultNotificationSound);
+        audio.onended = callback;
+        audio.play();
+    }
+
     clearDataSource() {
         for (var a in localStorage) {
             if (a.startsWith("http"))

diff --git a/typings.json b/typings.json
@@ -3,5 +3,6 @@
   "dependencies": {
     "vue": "npm:vue/types/index.d.ts"
   },
-  "globalDependencies": {}
+  "globalDependencies": {},
+  "globalDevDependencies": {}
 }