Release v7.7.2

app/views/media_objects/_add_to_playlist.html.erb

@@ -202,8 +202,27 @@ 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;
+          // Identify both iPad and iPhone devices
+          const IS_MOBILE = (/Mobi/i).test(USER_AGENT);
+          const IS_IPHONE = (/iPhone/i).test(USER_AGENT);
+          const IS_TOUCH_ONLY = navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && !window.matchMedia("(pointer: fine").matches;
+          // Identify browser is Safari
+          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_TOUCH_ONLY || IS_IPHONE || IS_MOBILE) && IS_SAFARI && player?.player.src() != '') 
+            || player?.player.readyState() === 4) {
+           addToPlaylistBtn.disabled = false;
+          }
         }
         if(!listenersAdded) {
           // Add 'Add new playlist' option to dropdown

app/views/media_objects/_thumbnail.html.erb

@@ -50,6 +50,59 @@ Unless required by applicable law or agreed to in writing, software distributed
     let offset = ''
     let timeCheck = setInterval(enableCreateThumbnail, 500);
 
+    function handleCreateThumbnailModalShow() {
+      let currentPlayer = document.getElementById('iiif-media-player');
+      let $imgPolaroid = document.getElementById('img-polaroid');
+      offset = currentPlayer.player.currentTime();
+
+      canvasIndex = parseInt(currentPlayer.dataset.canvasindex);
+      const sectionId = sectionIds[canvasIndex];
+      baseUrl = '/master_files/' + sectionId;
+
+      if ($imgPolaroid) {
+        let src = baseUrl + '/poster?offset=' + offset + '&preview=true';
+
+        // Display a preview of thumbnail to user
+        $imgPolaroid.setAttribute('src', src);
+        $($imgPolaroid).fadeIn('slow');
+      }
+    };
+
+    function handleUpdateThumbnail() {
+      let currentPlayer = document.getElementById('iiif-media-player');
+      canvasIndex = parseInt(currentPlayer.dataset.canvasindex);
+      const sectionId = sectionIds[canvasIndex];
+      baseUrl = '/master_files/' + sectionId;
+      offset = currentPlayer.player.currentTime();
+
+      const modalBody = document.getElementsByClassName('modal-body')[0];
+      // Put in a loading spinner and disable buttons to prevent double clicks
+      modalBody.classList.add('spinner');
+      $('#thumbnailModal')
+        .find('button')
+        .attr({ disabled: true });
+
+      $.ajax({
+        url: baseUrl + '/still',
+        type: 'POST',
+        data: {
+          offset: offset
+        }
+      })
+        .done(response => {
+          $('#thumbnailModal').modal('hide');
+        })
+        .fail(error => {
+          console.log(error);
+        })
+        .always(() => {
+          modalBody.classList.remove('spinner');
+          $('#thumbnailModal')
+            .find('button')
+            .attr({ disabled: false });
+        });
+    };
+
     function enableCreateThumbnail() {
       let player = document.getElementById('iiif-media-player');
 
@@ -85,53 +138,9 @@ Unless required by applicable law or agreed to in writing, software distributed
           }
         });
       }
-
-      $('#thumbnailModal').on('show.bs.modal', function(e) {
-        let currentPlayer = document.getElementById('iiif-media-player');
-        let $imgPolaroid = document.getElementById('img-polaroid');
-        offset = currentPlayer.player.currentTime();
-
-        canvasIndex = parseInt(currentPlayer.dataset.canvasindex);
-        const sectionId = sectionIds[canvasIndex];
-        baseUrl = '/master_files/' + sectionId;
-
-        if ($imgPolaroid) {
-          let src = baseUrl + '/poster?offset=' + offset + '&preview=true';
-
-          // Display a preview of thumbnail to user
-          $imgPolaroid.setAttribute('src', src);
-          $($imgPolaroid).fadeIn('slow');
-        }
-      });
-
-      $('#create-thumbnail-submit-button').on('click', function(e) {
-        const modalBody = document.getElementsByClassName('modal-body')[0];
-        // Put in a loading spinner and disable buttons to prevent double clicks
-        modalBody.classList.add('spinner');
-        $('#thumbnailModal')
-          .find('button')
-          .attr({ disabled: true });
-
-        $.ajax({
-          url: baseUrl + '/still',
-          type: 'POST',
-          data: {
-            offset: offset
-          }
-        })
-          .done(response => {
-            $('#thumbnailModal').modal('hide');
-          })
-          .fail(error => {
-            console.log(error);
-          })
-          .always(() => {
-            modalBody.classList.remove('spinner');
-            $('#thumbnailModal')
-              .find('button')
-              .attr({ disabled: false });
-          });
-      });
+
+      document.getElementById('create-thumbnail-btn').addEventListener('click', handleCreateThumbnailModalShow);
+      document.getElementById('create-thumbnail-submit-button').addEventListener('click', handleUpdateThumbnail);
     };
   });
 </script>

config/application.rb

@@ -8,7 +8,7 @@
 Bundler.require(*Rails.groups)
 
 module Avalon
-  VERSION = '7.7.1'
+  VERSION = '7.7.2'
 
   class Application < Rails::Application
     require 'avalon/configuration'

package.json

@@ -5,7 +5,7 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "7",
-    "@samvera/ramp": "^3.1.0",
+    "@samvera/ramp": "https://github.com/samvera-labs/ramp.git#v3.1.3",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "buffer": "^6.0.3",

yarn.lock

@@ -1440,10 +1440,9 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
-"@samvera/ramp@^3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@samvera/ramp/-/ramp-3.1.0.tgz#6254646f34b9a434ff6e6046f1e013130d036e28"
-  integrity sha512-B5UiU0DDxi7Ub+DfbKC7j80zjMCmkuLnmDJNUqnftjO1L2gocdMOuUfYZ30pAh9SO9HbMCEtAFtLUHPlizPz3A==
+"@samvera/ramp@https://github.com/samvera-labs/ramp.git#v3.1.3":
+  version "3.1.3"
+  resolved "https://github.com/samvera-labs/ramp.git#6c233c2cd668856b6bce1ce63076455a9e58b0f2"
   dependencies:
     "@rollup/plugin-json" "^6.0.1"
     "@silvermine/videojs-quality-selector" "^1.2.4"