From cd8816a811768b8443cceb73eb76afd8f5ba47ce Mon Sep 17 00:00:00 2001 From: dwithana Date: Thu, 18 Apr 2024 11:10:35 -0400 Subject: [PATCH] Use player.src() instead of player.readyState() to enable button for iOS Safari --- .../media_objects/_add_to_playlist.html.erb | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/app/views/media_objects/_add_to_playlist.html.erb b/app/views/media_objects/_add_to_playlist.html.erb index a08c60a1f6..f66ac4bd2a 100644 --- a/app/views/media_objects/_add_to_playlist.html.erb +++ b/app/views/media_objects/_add_to_playlist.html.erb @@ -202,8 +202,23 @@ Unless required by applicable law or agreed to in writing, software distributed function enableAddToPlaylist() { let player = document.getElementById('iiif-media-player'); let addToPlaylistBtn = document.getElementById('addToPlaylistBtn'); - if(addToPlaylistBtn && addToPlaylistBtn.disabled && player?.player.readyState() === 4) { - addToPlaylistBtn.disabled = false; + if(addToPlaylistBtn && addToPlaylistBtn.disabled) { + const USER_AGENT = window.navigator.userAgent; + const IS_MOBILE = (/Mobi/i).test(USER_AGENT); + const IS_SAFARI = (/Safari/i).test(USER_AGENT); + /* + For iOS Safari, player.readyState() never gets to 4 until media playback is + started. Therefore, use player.src() to check whether there's a playable media + loaded into the player instead of player.readyState(). + Keep the player.readyState() === 4 check for desktop browsers, because without + that check the add to playlist form populates NaN values for time fields when user + clicks the 'Add to Playlist' button immediately on page load, which does not + happen in mobile context. + */ + if((IS_MOBILE && IS_SAFARI && player?.player.src() != '') + || player?.player.readyState() === 4) { + addToPlaylistBtn.disabled = false; + } } if(!listenersAdded) { // Add 'Add new playlist' option to dropdown