add default notif. sounds and volume settings

Author: martinkadlec0

options.html

@@ -175,12 +175,37 @@ <h3 class="section-header">Sound notifications</h3>
 							<input type="checkbox" id="soundNotifications" />
 						</label>
 					</div>
-					<div class="settings-row learn-more" title="If enabled, browser will make a sound when new articles are downloaded.">
+
+					<div class="settings-row learn-more" title="">
 						<label class="web-content-select-label">
-							<span class="selectLabel">Default sound:</span>
+							<span class="selectLabel">Use sound:</span>
+							<select id="useSound">
+								<option value=":user">User sound</option>
+								<option value=":none">None</option>
+								<optgroup label="Default sounds">
+									<option value="knock">Knock</option>
+									<option value="taptap">Taptap</option>
+									<option value="glass">Glass</option>
+									<option value="pop">Pop</option>
+									<option value="nightbird">Nightbird</option>
+								</optgroup>
+							</select>
+						</label>
+					</div>
+
+					<div class="settings-row learn-more" title="Select sound file to be played.">
+						<label class="web-content-select-label">
+							<span class="selectLabel">User sound:</span>
 							<input type="file" id="default-sound" />
 						</label>
 					</div>
+
+					<div class="settings-row learn-more" title="">
+						<label class="web-content-select-label">
+							<span class="selectLabel">Volume:</span>
+							<span class="valspan">0% <input type="range" id="soundVolume" min="0" max="1" step="0.05" /> 100%</span>
+						</label>
+					</div>
 				</section>
 
 				<section>

scripts/bgprocess/models/Loader.js

@@ -76,11 +76,28 @@ define(['backbone', 'modules/RSSParser', 'modules/Animation'], function (BB, RSS
 
 	}
 
+	function playNotificationSound() {
+
+		var audio;
+		if (!settings.get('useSound') || settings.get('useSound') == ':user') {
+			audio = new Audio(settings.get('defaultSound'));
+		} else if (settings.get('useSound') == ':none') {
+			audio = false;
+		} else {
+			audio = new Audio('/sounds/' + settings.get('useSound') + '.ogg');
+		}
+		if (audio) {
+			audio.volume = parseFloat(settings.get('soundVolume'));
+			audio.play();
+		}
+		
+	}
+
 	function downloadStopped() {
 		if (loader.itemsDownloaded && settings.get('soundNotifications')) {
-			var audio = new Audio(settings.get('defaultSound'));
-			audio.play();
+			playNotificationSound();
 		}
+
 		loader.set('maxSources', 0);
 		loader.set('loaded', 0);
 		loader.set('loading', false);
@@ -244,7 +261,8 @@ define(['backbone', 'modules/RSSParser', 'modules/Animation'], function (BB, RSS
 		download: download,
 		downloadURL: downloadURL,
 		downloadOne: downloadOne,
-		downloadAll: downloadAll
+		downloadAll: downloadAll,
+		playNotificationSound: playNotificationSound
 	});
 
 	return Loader;

scripts/bgprocess/models/Settings.js

@@ -53,7 +53,9 @@ define(['backbone', 'preps/indexeddb'], function (BB) {
 			askRmPinned: true,
 			titleIsLink: true,
 			soundNotifications: false,
-			defaultSound: ''
+			defaultSound: '',
+			useSound: ':user',
+			soundVolume: 1 // min: 0, max: 1
 		},
 
 		/**

scripts/options/options.js

@@ -53,7 +53,7 @@ chrome.runtime.getBackgroundPage(function(bg) {
 		$('#version').html(bg.version || 'dev build');
 
 
-		$('select[id], input[type=number], input[type=range]').each(function(i, item) {
+		$('select[id], input[type=number], input[type=range], input[type=range]').each(function(i, item) {
 			$(item).val(bg.settings.get(item.id));
 			if (item.type == 'number') {
 				$(item).on('input', handleChange);
@@ -67,6 +67,10 @@ chrome.runtime.getBackgroundPage(function(bg) {
 			$(item).change(handleCheck);
 		});
 
+		$('#useSound').change(function() {
+			bg.loader.playNotificationSound();
+		});
+
 		$('#default-sound').change(handleDefaultSound);
 		$('#export-smart').click(handleExportSmart);
 		$('#export-opml').click(handleExportOPML);

sounds/glass.ogg

@@ -132,6 +132,18 @@ section div {
 	cursor: pointer;
 }
 
+.valspan {
+	vertical-align: middle;
+	font-size: 0.8rem;
+	color: #666;
+}
+
+.valspan input[type=range] {
+	padding: 0;
+	margin: 0;
+	vertical-align: middle;
+}
+
 select {
 	cursor: pointer;
 	min-width: 110px;