Added and saving master sound volume

ChangeLog.md

@@ -1,5 +1,9 @@
 # Changelog:
-* **26.05.19**
+* **29.04.19**
+    - Added a master volume slider and separated it from the sounds master volume
+    - Saving changed sound and master volume settings
+    
+* **26.04.19**
     - Significant permission editor performance improve
       Using canvas now instead of a lots of HTML nodes
     - Fixed client related query and music bot issues

shared/css/static/modal-channel.scss

@@ -1,4 +1,6 @@
 .container-channel-edit-general {
+	flex-shrink: 0;
+
 	.container-name-icon {
 		display: flex;
 		flex-direction: row;
@@ -48,6 +50,8 @@
 }
 
 .container-channel-settings-standard {
+	min-height: 300px;
+
 	flex-grow: 1;
 	display: flex;
 	flex-direction: row;

shared/css/static/modal-settings.scss

@@ -66,6 +66,48 @@ $small_device: 800px; /* tested out via audio tab */
 		}
 	}
 
+	.settings-speaker .container-master-volume {
+		display: flex;
+		flex-direction: row;
+		justify-content: stretch;
+
+		.key {
+			flex-grow: 0;
+			max-width: 150px;
+			margin-right: 5px;
+		}
+
+		.value {
+			flex-grow: 1;
+			flex-shrink: 1;
+
+			display: flex;
+			flex-direction: row;
+			justify-content: stretch;
+
+			a {
+				flex-grow: 0;
+				flex-shrink: 0;
+
+				margin-left: 5px;
+			}
+
+			/* added by materialize */
+			span {
+				min-width: 100px;
+
+				flex-grow: 1;
+				flex-shrink: 1;
+
+				padding: 0;
+			}
+
+			input {
+				width: 100%;
+			}
+		}
+	}
+
 	.settings-vad-container {
 		display: flex;
 		margin-top: 5px;

shared/html/templates.html

@@ -1222,6 +1222,13 @@
                                             <button class="btn btn-secondary button-device-update">update</button>
                                         </div>
                                     </div>
+                                    <div class="container-master-volume">
+                                        <div class="key">Master volume:</div>
+                                        <div class="value master-volume">
+                                            <input type="range" min="0" max="100" value="100">
+                                            <a>(66%)</a>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                             <hr>
@@ -1230,8 +1237,8 @@
                                 <div class="content">
                                     <div class="sound-settings">
                                         <div class="property">
-                                            <div class="key">Master volume:</div>
+                                            <div class="key">Sound Master volume:</div>
-                                            <div class="value master-volume">
+                                            <div class="value sound-master-volume">
                                                 <input type="range" min="0" max="100" value="100">
                                                 <a>(66%)</a>
                                             </div>

shared/js/main.ts

@@ -124,10 +124,12 @@ async function initialize_app() {
 
     if(!audio.player.initialize())
         console.warn(tr("Failed to initialize audio controller!"));
+    audio.player.set_master_volume(settings.global(Settings.KEY_SOUND_MASTER, 1) / 100);
 
     sound.initialize().then(() => {
         console.log(tr("Sounds initialitzed"));
     });
+    sound.set_master_volume(settings.global(Settings.KEY_SOUND_MASTER_SOUNDS, 1) / 100);
 
     await profiles.load();
 

shared/js/settings.ts

@@ -194,6 +194,15 @@ class Settings extends StaticSettings {
         key: 'certificate_callback'
     };
 
+    /* sounds */
+    static readonly KEY_SOUND_MASTER: SettingsKey<number> = {
+        key: 'audio_master_volume'
+    };
+
+    static readonly KEY_SOUND_MASTER_SOUNDS: SettingsKey<number> = {
+        key: 'audio_master_volume_sounds'
+    };
+
     static readonly FN_SERVER_CHANNEL_SUBSCRIBE_MODE: (channel: ChannelEntry) => SettingsKey<ChannelSubscribeMode> = channel => {
         return {
             key: 'channel_subscribe_mode_' + channel.getChannelId()

shared/js/ui/modal/ModalSettings.ts

@@ -439,7 +439,6 @@ namespace Modals {
             const setting_tag = tag.find(".settings-speaker");
             const tag_select = setting_tag.find(".audio-select-speaker");
 
-
             const update_devices = () => {
                 tag_select.empty();
 
@@ -461,7 +460,7 @@ namespace Modals {
 
                 if (tag_select.find("option:selected").length == 0)
                     tag_select.find("option").prop("selected", true);
-            }
+            };
 
             {
                 tag_select.on('change', event => {
@@ -477,18 +476,30 @@ namespace Modals {
 
             update_devices();
             setting_tag.find(".button-device-update").on('click', event => update_devices());
+
+            { /* master sound volume */
+                const master_tag = setting_tag.find(".master-volume");
+                master_tag.find("input").on('change input', event => {
+                    const value = parseInt((<HTMLInputElement>event.target).value);
+                    master_tag.find('a').text("(" + value + "%)");
+
+                    audio.player.set_master_volume(value / 100);
+                    settings.changeGlobal(Settings.KEY_SOUND_MASTER, value);
+                }).val((audio.player.get_master_volume() * 100).toString()).trigger('change');
+            }
         }
 
         { /* initialize sounds */
             const sound_tag = tag.find(".sound-settings");
 
-            { /* master volume */
+            { /* master sound volume */
-                const master_tag = sound_tag.find(".master-volume");
+                const master_tag = sound_tag.find(".sound-master-volume");
                 master_tag.find("input").on('change input', event => {
                     const value = parseInt((<HTMLInputElement>event.target).value);
                     master_tag.find('a').text("(" + value + "%)");
 
                     sound.set_master_volume(value / 100);
+                    settings.changeGlobal(Settings.KEY_SOUND_MASTER_SOUNDS, value);
                 }).val((sound.get_master_volume() * 100).toString()).trigger('change');
             }
 

web/js/audio/AudioPlayer.ts

@@ -5,8 +5,11 @@ interface Navigator {
 
 namespace audio.player  {
     let _globalContext: AudioContext;
+    let _global_destination: GainNode;
+
     let _globalContextPromise: Promise<void>;
     let _initialized_listener: (() => any)[] = [];
+    let _master_volume: number = 1;
 
     export interface Device {
         device_id: string;
@@ -34,6 +37,12 @@ namespace audio.player  {
 
         if(!_globalContext)
             _globalContext = new (window.webkitAudioContext || window.AudioContext)();
+
+        _initialized_listener.unshift(() => {
+            _global_destination = _globalContext.createGain();
+            _global_destination.gain.value = _master_volume;
+            _global_destination.connect(_globalContext.destination);
+        });
         if(_globalContext.state == "suspended") {
             if(!_globalContextPromise) {
                 (_globalContextPromise = _globalContext.resume()).then(() => {
@@ -53,11 +62,18 @@ namespace audio.player  {
         return undefined;
     }
 
+    export function get_master_volume() : number {
+        return _master_volume;
+    }
+    export function set_master_volume(volume: number) {
+        _master_volume = volume;
+    }
+
     export function destination() : AudioNode {
         const ctx = context();
         if(!ctx) throw tr("Audio player isn't initialized yet!");
 
-        return ctx.destination;
+        return _global_destination;
     }
 
     export function on_ready(cb: () => any) {