Merge pull request #2090 from tf/ios-17-video-bug

Add workaround for video scaling issue in iOS 17 below 17.4

entry_types/scrolled/package/src/frontend/__stories__/browserBugs-stories.js → entry_types/scrolled/package/src/frontend/__stories__/browserBugs/chromeWebaudioCurrentTimeSegfault/stories.js

@@ -22,7 +22,7 @@ function Test() {
 
   function setup() {
     const audio = document.createElement('audio');
-    
+
     audio.setAttribute('controls', true);
     audio.setAttribute('crossorigin', 'anonymous');
 
@@ -90,4 +90,3 @@ async function run(commands) {
     await c;
   }
 }
-

entry_types/scrolled/package/src/frontend/__stories__/browserBugs/safariVideoDimension/stories.js

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import squareVideo from './100x100.mp4';
+import landscapeVideo from './200x100.mp4';
+
+export default {
+  title: 'Frontend/Browser Bugs',
+  parameters: {
+    percy: {skip: true}
+  }
+}
+
+export const safariVideoDimension = () => (
+  <div>
+    <style>
+      {`
+      .wr {width: 300px; height: 300px; }
+      .wr > div,
+      .video-js { height: 100%; }
+
+      video {
+        border: solid 1px red;
+      }
+      `}`
+    </style>
+    <p>
+      Load video 1, release it, load  video 2. Observe the video being scaled
+      down to only cover parts of the upper part of the video element.
+    </p>
+    <div className="wr" id="container"></div>
+    <button onClick={() => loadVideo(0)}>Load video 1</button>
+    <button onClick={() => loadVideo(1)}>Load video 2</button>
+    <button onClick={() => release()}>Release</button>
+  </div>
+);
+
+const srcs = [
+  landscapeVideo,
+  squareVideo
+];
+
+let video;
+
+function loadVideo(i) {
+  if (!video) {
+    video = document.createElement('video');
+    video.setAttribute('crossorigin', 'anonymous');
+    video.setAttribute('playsinline', true);
+    video.setAttribute('loop', true);
+    video.setAttribute('class', 'video-js wr');
+  }
+
+  video.src = srcs[i];
+
+  // Uncomment to fix
+  // video.load();
+
+  document.getElementById('container').appendChild(video);
+
+  setTimeout(() => {
+    video.play();
+  }, 1000);
+}
+
+function release() {
+  if (video) {
+    video.pause();
+
+    document.getElementById('container').removeChild(video);
+  }
+}

package/spec/frontend/browser/agent_spec.js

@@ -231,4 +231,53 @@ describe('pageflow.browser.Agent', function() {
       expect(agent.matchesDesktopChrome({minVersion: 20})).toBe(false);
     });
   });
+
+  describe('#matchesMobileSafari', function() {
+    it('returns true for Safari on iPhone', function() {
+      var agent = new Agent(
+        'Mozilla/5.0 (iPhone; CPU iPhone OS 10_0_1 like Mac OS X) '+
+        'AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.0 Mobile/14A403 Safari/602.1'
+      );
+
+      expect(agent.matchesMobileSafari()).toBe(true);
+    });
+
+    it('returns false for desktop Safari', function() {
+      var agent = new Agent(
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14) ' +
+        'AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Safari/605.1.15'
+      );
+
+      expect(agent.matchesMobileSafari()).toBe(false);
+    });
+
+    describe('with osVersions option', () => {
+      it('returns true for matching mobile Safari', () => {
+        var agent = new Agent(
+          'Mozilla/5.0 (iPhone; CPU iPhone OS 17_3 like Mac OS X) ' +
+          'AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.3.1 Mobile/15E148 Safari/604.1'
+        );
+
+        expect(agent.matchesMobileSafari({osVersions: ['17.1', '17.2', '17.3']})).toBe(true);
+      });
+
+      it('returns false for other mobile Safari', () => {
+        var agent = new Agent(
+          'Mozilla/5.0 (iPhone; CPU iPhone OS 17_4 like Mac OS X) ' +
+          'AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Mobile/15E148 Safari/604.1'
+        );
+
+        expect(agent.matchesMobileSafari({osVersions: ['17.1', '17.2', '17.3']})).toBe(false);
+      });
+
+      it('returns true for matching Chrome on iPhone', () => {
+        var agent = new Agent(
+          'Mozilla/5.0 (iPhone; CPU iPhone OS 17_4 like Mac OS X) ' +
+          'AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/123.0.6312.52 Mobile/15E148 Safari/604.1'
+        );
+
+        expect(agent.matchesMobileSafari({osVersions: ['17.4']})).toBe(true);
+      });
+    });
+  });
 });

package/src/frontend/browser/Agent.js

@@ -60,14 +60,24 @@ export const Agent = function(userAgent) {
      * Returns true on iOS Safari.
      * @return {boolean}
      */
-    matchesMobileSafari: function() {
-      var matchers = [/iPod/i, /iPad/i, /iPhone/i];
-
-      return (matchers.some(function(matcher) {
-              return userAgent.match(matcher);
-             }) &&
-             !window.MSStream) || //IE exclusion from being detected as an iOS device;
-             matchesiPadSafari13AndAbove();
+    matchesMobileSafari: function({osVersions} = {}) {
+      var deviceMatchers = [/iPod/i, /iPad/i, /iPhone/i];
+
+      if (osVersions) {
+        return (
+          deviceMatchers.some(matcher => userAgent.match(matcher)) &&
+          osVersions.some(osVersion => userAgent.includes(osVersion.replace('.', '_')))
+        )
+      }
+      else {
+        return (
+          matchesiPadSafari13AndAbove() ||
+          (
+            deviceMatchers.some(matcher => userAgent.match(matcher)) &&
+            !window.MSStream // IE exclusion from being detected as an iOS device;
+          )
+        );
+      }
     },
 
     /**

package/src/frontend/browser/video.js

@@ -37,3 +37,12 @@ browser.feature('mse and native hls support', function(has) {
 browser.feature('native video player', function(has) {
   return has('iphone platform');
 });
+
+browser.feature('video scaling bug fixed by load', function(has) {
+  // When reusing video elements for videos with different
+  // resolutions, Safari gets confused and scales videos incorrectly -
+  // drawing them to only cover a part of the element. This appears to
+  // not happen when the video is loaded or played immediately after
+  // changing the source. No longer reproducible in iOS 17.4.
+  return agent.matchesMobileSafari({osVersions: ['17.0', '17.1', '17.2', '17.3']});
+});

package/src/frontend/media/media.js

@@ -1,6 +1,7 @@
 import {MediaPool, MediaType} from './MediaPool';
 import BackboneEvents from 'backbone-events-standalone';
 import {features} from '../features';
+import {browser} from '../browser';
 
 export const media = {
   playerPool: new MediaPool({
@@ -25,6 +26,10 @@ export const media = {
         options.textTrackSources.forEach(track => player.addRemoteTextTrack(track, true));
       }
 
+      if (browser.has('video scaling bug fixed by load')) {
+        player.load();
+      }
+
       return player;
     }
   },