From f3b84cadadc75ba2a519e3ff97c8964393dd2363 Mon Sep 17 00:00:00 2001 From: Georgi Stamatov Date: Mon, 10 Apr 2023 12:06:00 +0300 Subject: [PATCH 1/5] enable airplay for audioplayer --- src/components/nowPlayingBar/nowPlayingBar.js | 16 +++++++++ src/plugins/htmlAudioPlayer/plugin.js | 35 +++++++++++++++++++ 2 files changed, 51 insertions(+) diff --git a/src/components/nowPlayingBar/nowPlayingBar.js b/src/components/nowPlayingBar/nowPlayingBar.js index 2bf29a2a9c..b25097e325 100644 --- a/src/components/nowPlayingBar/nowPlayingBar.js +++ b/src/components/nowPlayingBar/nowPlayingBar.js @@ -32,6 +32,7 @@ import { appRouter } from '../appRouter'; let volumeSliderContainer; let playPauseButtons; let positionSlider; + let toggleAirPlayButton; let toggleRepeatButton; let toggleRepeatButtonIcon; @@ -80,6 +81,8 @@ import { appRouter } from '../appRouter'; html += ''; html += ''; + html += ''; + html += ''; html += ''; @@ -190,6 +193,13 @@ import { appRouter } from '../appRouter'; } }); + toggleAirPlayButton = elem.querySelector('.btnAirPlay'); + toggleAirPlayButton.addEventListener('click', function () { + if (currentPlayer) { + playbackManager.toggleAirPlay(currentPlayer); + } + }); + elem.querySelector('.btnShuffleQueue').addEventListener('click', function () { if (currentPlayer) { playbackManager.toggleQueueShuffleMode(); @@ -326,6 +336,12 @@ import { appRouter } from '../appRouter'; toggleRepeatButton.classList.remove('hide'); } + if (supportedCommands.indexOf('AirPlay') === -1) { + toggleAirPlayButton.classList.add('hide'); + } else { + toggleAirPlayButton.classList.remove('hide'); + } + updateRepeatModeDisplay(playbackManager.getRepeatMode()); onQueueShuffleModeChange(); diff --git a/src/plugins/htmlAudioPlayer/plugin.js b/src/plugins/htmlAudioPlayer/plugin.js index 585d935f05..30e1cb4880 100644 --- a/src/plugins/htmlAudioPlayer/plugin.js +++ b/src/plugins/htmlAudioPlayer/plugin.js @@ -347,6 +347,10 @@ class HtmlAudioPlayer { return getDefaultProfile(); } + toggleAirPlay() { + return this.setAirPlayEnabled(!this.isAirPlayEnabled()); + } + // Save this for when playback stops, because querying the time at that point might return 0 currentTime(val) { const mediaElement = this._mediaElement; @@ -488,6 +492,33 @@ class HtmlAudioPlayer { return false; } + isAirPlayEnabled() { + if (document.AirPlayEnabled) { + return !!document.AirplayElement; + } + return false; + } + + setAirPlayEnabled(isEnabled) { + const mediaElement = this._mediaElement; + + if (document.AirPlayEnabled) { + if (mediaElement) { + if (isEnabled) { + mediaElement.requestAirPlay().catch(function(err) { + console.error('Error requesting AirPlay', err); + }); + } else { + document.exitAirPLay().catch(function(err) { + console.error('Error exiting AirPlay', err); + }); + } + } + } else { + mediaElement.webkitShowPlaybackTargetPicker(); + } + } + supports(feature) { if (!supportedFeatures) { supportedFeatures = getSupportedFeatures(); @@ -507,6 +538,10 @@ function getSupportedFeatures() { list.push('PlaybackRate'); } + if (browser.safari || browser.iOS || browser.iPad) { + list.push('AirPlay'); + } + return list; } From 14fca37e783a15f8f5f924d01efd0abc635ab827 Mon Sep 17 00:00:00 2001 From: Georgi Stamatov Date: Tue, 18 Apr 2023 20:17:25 +0300 Subject: [PATCH 2/5] Convert if/else add/remove statements to toggle --- src/components/nowPlayingBar/nowPlayingBar.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/nowPlayingBar/nowPlayingBar.js b/src/components/nowPlayingBar/nowPlayingBar.js index b25097e325..8ec7103fe3 100644 --- a/src/components/nowPlayingBar/nowPlayingBar.js +++ b/src/components/nowPlayingBar/nowPlayingBar.js @@ -336,11 +336,8 @@ import { appRouter } from '../appRouter'; toggleRepeatButton.classList.remove('hide'); } - if (supportedCommands.indexOf('AirPlay') === -1) { - toggleAirPlayButton.classList.add('hide'); - } else { - toggleAirPlayButton.classList.remove('hide'); - } + const hideAirPlayButton = supportedCommands.indexOf('AirPlay') === -1; + toggleAirPlayButton.classList.toggle('hide', hideAirPlayButton); updateRepeatModeDisplay(playbackManager.getRepeatMode()); onQueueShuffleModeChange(); From 90fc207c9eecb6a9f6e7e8224bdaadd93f1def7b Mon Sep 17 00:00:00 2001 From: Georgi Stamatov Date: Thu, 20 Apr 2023 22:26:01 +0300 Subject: [PATCH 3/5] fix eslint newline required at end of file --- src/components/nowPlayingBar/nowPlayingBar.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/nowPlayingBar/nowPlayingBar.js b/src/components/nowPlayingBar/nowPlayingBar.js index b2c892e85c..ba14fc41d8 100644 --- a/src/components/nowPlayingBar/nowPlayingBar.js +++ b/src/components/nowPlayingBar/nowPlayingBar.js @@ -793,4 +793,5 @@ document.addEventListener('viewbeforeshow', function (e) { hideNowPlayingBar(); } } -}); \ No newline at end of file +}); + From 70f1557086aee41f26f9f96549e4a7b21527a473 Mon Sep 17 00:00:00 2001 From: Georgi Stamatov Date: Thu, 11 May 2023 22:27:57 +0300 Subject: [PATCH 4/5] Add AirPlay for html audioplayer only if is safari desktop --- src/plugins/htmlAudioPlayer/plugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/htmlAudioPlayer/plugin.js b/src/plugins/htmlAudioPlayer/plugin.js index fb6afc72e7..66b95ecc1d 100644 --- a/src/plugins/htmlAudioPlayer/plugin.js +++ b/src/plugins/htmlAudioPlayer/plugin.js @@ -538,7 +538,7 @@ function getSupportedFeatures() { list.push('PlaybackRate'); } - if (browser.safari || browser.iOS || browser.iPad) { + if (browser.safari) { list.push('AirPlay'); } From 23158a352c4bb7d2050003bf712a32c584a3191b Mon Sep 17 00:00:00 2001 From: Georgi Stamatov Date: Sat, 17 Jun 2023 13:18:13 +0300 Subject: [PATCH 5/5] update airplay conditions for htmlaudioplayer --- src/plugins/htmlAudioPlayer/plugin.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/plugins/htmlAudioPlayer/plugin.js b/src/plugins/htmlAudioPlayer/plugin.js index 66b95ecc1d..653796055c 100644 --- a/src/plugins/htmlAudioPlayer/plugin.js +++ b/src/plugins/htmlAudioPlayer/plugin.js @@ -502,8 +502,8 @@ class HtmlAudioPlayer { setAirPlayEnabled(isEnabled) { const mediaElement = this._mediaElement; - if (document.AirPlayEnabled) { - if (mediaElement) { + if (mediaElement) { + if (document.AirPlayEnabled) { if (isEnabled) { mediaElement.requestAirPlay().catch(function(err) { console.error('Error requesting AirPlay', err); @@ -513,9 +513,9 @@ class HtmlAudioPlayer { console.error('Error exiting AirPlay', err); }); } + } else { + mediaElement.webkitShowPlaybackTargetPicker(); } - } else { - mediaElement.webkitShowPlaybackTargetPicker(); } }