✨ improve volume controls

STORE_VARIABLES.md

@@ -24,6 +24,8 @@
 | `settings-app-audio-output`                | String  | `Audio devices`              | DEFAULT_AUDIO_DEVICE         | Define default audio output                                    |
 | `settings-custom-css-app`                  | Boolean | `true` or `false`            | `false`                      | Custom css for main app                                        |
 | `settings-custom-css-page`                 | Boolean | `true` or `false`            | `false`                      | Custom css for web page                                        |
+| `settings-volume`                          | String  | `0` ~ `100`                  | `100`                        | Playback volume                                                |
+| `settings-volume-media-keys`               | Boolean | `true` or `false`            | `false`                      | Enable media volume keys for the playback volume               |
 
 ## Window
 | Key                                   | Type    | Values                       | Default                      | Description                                   |

main.js

@@ -814,6 +814,16 @@ function createWindow() {
         mediaControl.nextTrack(view)
     })
 
+    if (settingsProvider.get('settings-volume-media-keys')) {
+        globalShortcut.register('VolumeUp', function () {
+            mediaControl.volumeUp(view)
+        })
+
+        globalShortcut.register('VolumeDown', function () {
+            mediaControl.volumeDown(view)
+        })
+    }
+
     ipcMain.handle('invoke-all-info', async (event, args) => {
         return infoPlayerProvider.getAllInfo()
     })
@@ -1518,6 +1528,10 @@ function createWindow() {
         setAudioOutput(dataRenderer !== undefined ? dataRenderer : dataMain)
     })
 
+    ipcMain.on('change-volume', (dataMain, dataRenderer) => {
+        settingsProvider.set('settings-volume', dataRenderer.volume)
+    })
+
     function setAudioOutput(audioLabel) {
         view.webContents
             .executeJavaScript(

src/locales/de.json

@@ -71,6 +71,7 @@
     "LABEL_SETTINGS_TAB_SHORTCUTS_GLOBAL": "Global",
     "LABEL_SETTINGS_TAB_SHORTCUTS_LOCAL": "Lokal",
     "LABEL_SETTINGS_TAB_SHORTCUTS_PRESS_ANY_KEYS": "Drücke eine beliebige Taste",
+    "LABEL_SETTINGS_TAB_SHORTCUTS_VOLUME_MEDIA_KEYS": "Lautstärke Medientasten aktivieren",
     "MEDIA_CONTROL_MUTE_UNMUTE": "Ton aus / Ton an",
     "MEDIA_CONTROL_NEXT": "Weiter",
     "MEDIA_CONTROL_PAUSE": "Anhalten",

src/locales/en.json

@@ -71,6 +71,7 @@
     "LABEL_SETTINGS_TAB_SHORTCUTS_LOCAL": "Local",
     "LABEL_SETTINGS_TAB_SHORTCUTS_PRESS_ANY_KEYS": "Press any key",
     "LABEL_SETTINGS_TAB_SHORTCUTS": "Shortcuts",
+    "LABEL_SETTINGS_TAB_SHORTCUTS_VOLUME_MEDIA_KEYS": "Enable media volume keys",
     "LABEL_SETTINGS": "Settings",
     "LYRICS": "Lyrics",
     "MEDIA_CONTROL_MINIPLAYER": "Open/Close Miniplayer",

src/pages/settings/settings.html

@@ -323,7 +323,7 @@
                                                 >
                                                 <option value="cs"
                                                     >Čeština</option
-                                                >												
+                                                >
                                             </select>
                                         </td>
                                     </tr>
@@ -1133,6 +1133,29 @@
                                                     </button>
                                                 </th>
                                             </tr>
+                                            <tr>
+                                                <td>
+                                                    <span
+                                                        i18n="i18n_LABEL_SETTINGS_TAB_SHORTCUTS_VOLUME_MEDIA_KEYS"
+                                                    ></span>
+                                                </td>
+                                                <th>
+                                                    <div
+                                                        class="switch"
+                                                        style="display: inline;"
+                                                    >
+                                                        <label>
+                                                            <input
+                                                                type="checkbox"
+                                                                id="settings-volume-media-keys"
+                                                            />
+                                                            <span
+                                                                class="lever"
+                                                            ></span>
+                                                        </label>
+                                                    </div>
+                                                </th>
+                                            </tr>
                                             <tr>
                                                 <td>
                                                     <span

src/pages/settings/settings.js

@@ -145,6 +145,21 @@ document.addEventListener('DOMContentLoaded', function () {
     })
     initElement('settings-rainmeter-web-now-playing', 'click')
     initElement('settings-enable-double-tapping-show-hide', 'click')
+    initElement('settings-volume-media-keys', 'click', () => {
+        let enableVolumeMediaKeys = settingsProvider.get(
+            'settings-volume-media-keys'
+        )
+        ipc.send('change-accelerator', {
+            type: 'media-volume-up',
+            oldValue: enableVolumeMediaKeys ? 'disabled' : 'VolumeUp',
+            newValue: enableVolumeMediaKeys ? 'VolumeUp' : 'disabled',
+        })
+        ipc.send('change-accelerator', {
+            type: 'media-volume-down',
+            oldValue: enableVolumeMediaKeys ? 'disabled' : 'VolumeDown',
+            newValue: enableVolumeMediaKeys ? 'VolumeDown' : 'disabled',
+        })
+    })
     initElement(
         'settings-disable-hardware-acceleration',
         'click',

src/providers/infoPlayerProvider.js

@@ -1,3 +1,5 @@
+const settingsProvider = require('./settingsProvider')
+
 var webContents, initialized
 
 var player = {
@@ -46,6 +48,12 @@ function init(view) {
     initialized = true
     toggleMoreActions(webContents)
     toggleMoreActions(webContents)
+
+    initVolume()
+}
+
+function initVolume() {
+    setVolume(webContents, settingsProvider.get('settings-volume'))
 }
 
 function getAllInfo() {
@@ -187,8 +195,8 @@ function getVolume(webContents) {
             `document.querySelector('.volume-slider.ytmusic-player-bar').getAttribute('value');`
         )
         .then((volume) => {
-            debug(`Volume % is: ${parseInt(volume)}`)
-            player.volumePercent = parseInt(volume)
+            debug(`Volume % is: ${parseFloat(volume)}`)
+            player.volumePercent = parseFloat(volume)
         })
         .catch((_) => console.log('error getVolume'))
 }

src/providers/mediaProvider.js

@@ -28,11 +28,19 @@ function mediaDownVote(mainWindow) {
 }
 
 function mediaVolumeUp(mainWindow) {
-    mainWindow.webContents.sendInputEvent({ type: 'keydown', keyCode: '=' })
+    let percent = infoPlayerProvider.getPlayerInfo().volumePercent
+    infoPlayerProvider.setVolume(
+        mainWindow.webContents,
+        decibelToPercent(percentToDecibel(percent) + 1.5)
+    )
 }
 
 function mediaVolumeDown(mainWindow) {
-    mainWindow.webContents.sendInputEvent({ type: 'keydown', keyCode: '-' })
+    let percent = infoPlayerProvider.getPlayerInfo().volumePercent
+    infoPlayerProvider.setVolume(
+        mainWindow.webContents,
+        decibelToPercent(percentToDecibel(percent) - 1.5)
+    )
 }
 
 function mediaForwardTenSeconds(mainWindow) {
@@ -185,6 +193,17 @@ function createThumbar(mainWindow, mediaInfo) {
     }
 }
 
+function percentToDecibel(percent) {
+    return Math.min(Math.max(20.0 * Math.log10(percent / 100.0), -100.0), 0.0)
+}
+
+function decibelToPercent(decibel) {
+    return Math.min(
+        Math.max(Math.pow(10.0, decibel / 20.0) * 100.0, 0.0),
+        100.0
+    )
+}
+
 function setProgress(mainWindow, progress, isPaused) {
     if (mainWindow) {
         if (systemInfo.isWindows()) {

src/utils/defaultSettings.js

@@ -96,3 +96,10 @@ settingsProvider.setInitialValue('settings-skip-track-shorter-than', '0')
 settingsProvider.setInitialValue('settings-clipboard-always-ask-read', true)
 
 settingsProvider.setInitialValue('settings-tray-icon', true)
+
+settingsProvider.setInitialValue('settings-volume', 100)
+
+settingsProvider.setInitialValue(
+    'settings-enable-double-tapping-show-hide',
+    false
+)

src/utils/injectControls.js

@@ -616,6 +616,17 @@ function createBottomPlayerBarContent() {
                     .classList.remove('ytmd-icons')
             }
         })
+
+        // Volume slider
+        document.querySelector('#volume-slider').setAttribute('step', 0)
+        document.querySelector('#expand-volume-slider').setAttribute('step', 0)
+        document
+            .querySelector('#volume-slider')
+            .addEventListener('value-change', function (e) {
+                ipcRenderer.send('change-volume', {
+                    volume: e.target.getAttribute('value'),
+                })
+            })
     } catch (err) {
         console.error(err)
         ipcRenderer.send('log', {