Add button to adjust audio playback rate

src/components/nowPlayingBar/nowPlayingBar.js

@@ -4,6 +4,7 @@
 import { AppFeature } from 'constants/appFeature';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
 
+import actionsheet from '../actionSheet/actionSheet';
 import datetime from '../../scripts/datetime';
 import Events from '../../utils/events.ts';
 import browser from '../../scripts/browser';
@@ -37,6 +38,7 @@
 let toggleAirPlayButton;
 let toggleRepeatButton;
 let toggleRepeatButtonIcon;
+let showPlaybackRateMenuButton;
 let lyricButton;
 
 let lastUpdateTime = 0;
@@ -90,6 +92,7 @@
 
     html += `<button is="paper-icon-button-light" class="openLyricsButton mediaButton hide" title="${globalize.translate('Lyrics')}"><span class="material-icons lyrics" style="top:0.1em" aria-hidden="true"></span></button>`;
 
+    html += `<button is="paper-icon-button-light" class="showPlaybackRateMenuButton mediaButton" title="${globalize.translate('PlaybackRate')}"><span class="material-icons speed" aria-hidden="true"></span></button>`;
     html += `<button is="paper-icon-button-light" class="toggleRepeatButton mediaButton" title="${globalize.translate('Repeat')}"><span class="material-icons repeat" aria-hidden="true"></span></button>`;
     html += `<button is="paper-icon-button-light" class="btnShuffleQueue mediaButton" title="${globalize.translate('Shuffle')}"><span class="material-icons shuffle" aria-hidden="true"></span></button>`;
 
@@ -152,6 +155,7 @@
     muteButton = elem.querySelector('.muteButton');
     playPauseButtons = elem.querySelectorAll('.playPauseButton');
     toggleRepeatButton = elem.querySelector('.toggleRepeatButton');
+    showPlaybackRateMenuButton = elem.querySelector('.showPlaybackRateMenuButton');
     volumeSlider = elem.querySelector('.nowPlayingBarVolumeSlider');
     volumeSliderContainer = elem.querySelector('.nowPlayingBarVolumeSliderContainer');
     lyricButton = nowPlayingBarElement.querySelector('.openLyricsButton');
@@ -245,6 +249,28 @@
 
     toggleRepeatButtonIcon = toggleRepeatButton.querySelector('.material-icons');
 
+    showPlaybackRateMenuButton.addEventListener('click', function () {
+        // each has a name and id
+        const currentId = playbackManager.getPlaybackRate(currentPlayer);
+        const menuItems = playbackManager.getSupportedPlaybackRates(currentPlayer).map(i => ({
+            id: i.id,
+            name: i.name,
+            selected: i.id === currentId
+        }));
+
+        return actionsheet.show({
+            items: menuItems,
+            positionTo: showPlaybackRateMenuButton,
+        }).then(function (id) {
+            if (id) {
+                playbackManager.setPlaybackRate(id, currentPlayer);
+                return Promise.resolve();
+            }
+
+            return Promise.reject();
+        });
+    });
+
     volumeSliderContainer.classList.toggle('hide', appHost.supports(AppFeature.PhysicalVolumeControl));
 
     volumeSlider.addEventListener('input', (e) => {

src/components/remotecontrol/remotecontrol.js

@@ -4,6 +4,7 @@
 import { getItemTextLines } from 'apps/stable/features/playback/utils/itemText';
 import { AppFeature } from 'constants/appFeature';
 
+import actionsheet from '../actionSheet/actionSheet';
 import datetime from '../../scripts/datetime';
 import { clearBackdrop, setBackdrops } from '../backdrop/backdrop';
 import listView from '../listview/listview';
@@ -47,7 +48,7 @@
         return menuItem;
     });
 
     import('../actionSheet/actionSheet').then((actionsheet) => {
         actionsheet.show({
             items: menuItems,
             positionTo: button,
@@ -79,7 +80,7 @@
         selected: currentIndex == null
     });
 
     import('../actionSheet/actionSheet').then((actionsheet) => {
         actionsheet.show({
             items: menuItems,
             positionTo: button,
@@ -829,6 +830,29 @@
                 }
             }
         });
+
+        let showPlaybackRateMenuButton = context.querySelector('.showPlaybackRateMenuButton')
+        showPlaybackRateMenuButton.addEventListener('click', function () {
+            // each has a name and id
+            const currentId = playbackManager.getPlaybackRate(currentPlayer);
+            const menuItems = playbackManager.getSupportedPlaybackRates(currentPlayer).map(i => ({
+                id: i.id,
+                name: i.name,
+                selected: i.id === currentId
+            }));
+
+            return actionsheet.show({
+                items: menuItems,
+                positionTo: showPlaybackRateMenuButton,
+            }).then(function (id) {
+                if (id) {
+                    playbackManager.setPlaybackRate(id, currentPlayer);
+                    return Promise.resolve();
+                }
+
+                return Promise.reject();
+            });
+        });
     }
 
     function onPlayerChange() {

src/components/remotecontrol/remotecontrol.scss

@@ -213,6 +213,11 @@
     border-radius: 0;
 }
 
+.layout-mobile .playlistSectionButton .showPlaybackRateMenuButton {
+    font-size: larger;
+    margin: 0;
+}
+
 .layout-mobile .playlistSectionButton .volumecontrol {
     margin: 0;
     padding-right: 0;

src/controllers/playback/queue/index.html

@@ -187,6 +187,9 @@ <h2 class="nowPlayingPageTitle"></h2>
                 <button is="paper-icon-button-light" class="btnSavePlaylist hide" title="${Save}">
                     <span class="material-icons save" aria-hidden="true"></span>
                 </button>
+                <button id="showPlaybackRateMenu" is="paper-icon-button-light" class="showPlaybackRateMenuButton" title="${PlaybackRate}">
+                    <span class="material-icons speed" aria-hidden="true"></span>
+                </button>
                 <button id="toggleContextMenu" is="paper-icon-button-light" class="btnToggleContextMenu" title="${ButtonMore}">
                     <span class="material-icons more_vert" aria-hidden="true"></span>
                 </button>

src/plugins/htmlAudioPlayer/plugin.js

@@ -517,6 +517,43 @@ class HtmlAudioPlayer {
         return null;
     }
 
+    getSupportedPlaybackRates() {
+        return [{
+            name: '0.5x',
+            id: 0.5
+        }, {
+            name: '0.75x',
+            id: 0.75
+        }, {
+            name: '1x',
+            id: 1.0
+        }, {
+            name: '1.25x',
+            id: 1.25
+        }, {
+            name: '1.5x',
+            id: 1.5
+        }, {
+            name: '1.75x',
+            id: 1.75
+        }, {
+            name: '2x',
+            id: 2.0
+        }, {
+            name: '2.5x',
+            id: 2.5
+        }, {
+            name: '3x',
+            id: 3.0
+        }, {
+            name: '3.5x',
+            id: 3.5
+        }, {
+            name: '4.0x',
+            id: 4.0
+        }];
+    }
+
     setVolume(val) {
         const mediaElement = this._mediaElement;
         if (mediaElement) {