Merge pull request #2238 from tf/ios-18-4-ogg-fix

Exclude ogg audio source on mobile Safari

Author: tf

entry_types/paged/packages/pageflow-paged-react/src/media/components/AudioFilePlayer.jsx

@@ -3,11 +3,11 @@ import createFilePlayer from './createFilePlayer';
 export default createFilePlayer({
   tagName: 'audio',
 
-  sources: audioFile => [
-    {type: 'audio/ogg', src: `${audioFile.urls.ogg}?u=1`},
+  sources: (audioFile, _, {hasBrokenOggSupport}) => [
+    !hasBrokenOggSupport && {type: 'audio/ogg', src: `${audioFile.urls.ogg}?u=1`},
     {type: 'audio/mp4', src: `${audioFile.urls.m4a}?u=1`},
     {type: 'audio/mp3', src: `${audioFile.urls.mp3}?u=1`}
-  ],
+  ].filter(Boolean),
 
   emulateTextTracksDisplay: true
 });

entry_types/paged/packages/pageflow-paged-react/src/media/components/__spec__/createFilePlayer-spec.jsx

@@ -93,6 +93,20 @@ describe('createFilePlayer', () => {
       expect(wrapper.render()).toHaveDescendant('source[src="high.mp4"]');
     });
 
+    it('passes hasBrokenOggSupport option to sources', () => {
+      const {FilePlayer} = setup({
+        sources: (file, quality, {hasBrokenOggSupport}) => [
+          hasBrokenOggSupport ?
+          {type: 'audio/mp3', src: 'audio.mp3'} :
+          {type: 'audio/ogg', src: 'audio.ogg'}
+        ]
+      });
+
+      const wrapper = mount(<FilePlayer {...requiredProps} hasBrokenOggSupport={true} />);
+
+      expect(wrapper.render()).toHaveDescendant('source[src="audio.mp3"]');
+    });
+
     it('passes forceBestQuality option to sources', () => {
       const {FilePlayer} = setup({
         sources: (file, quality, {forceBestQuality}) => [

entry_types/paged/packages/pageflow-paged-react/src/media/components/createFilePlayer/index.jsx

@@ -123,6 +123,7 @@ export default function({
                   sources={sources(this.props.file,
                                    this.props.quality,
                                    {hasHighBandwidth: this.props.hasHighBandwidth,
+                                    hasBrokenOggSupport: this.props.hasBrokenOggSupport,
                                     forceBestQuality: this.props.forceBestQuality,
                                     forceFullhdQuality: this.props.forceFullhdQuality})}
                   tracks={textTracksFromFiles(this.props.textTracks.files,
@@ -163,6 +164,7 @@ export default function({
       quality: setting({property: 'videoQuality'}),
       hasNativeVideoPlayer: has('native video player'),
       hasHighBandwidth: has('high bandwidth'),
+      hasBrokenOggSupport: has('broken ogg support'),
       forceBestQuality: isFeatureEnabled('force_best_video_quality'),
       forceFullhdQuality: isFeatureEnabled('force_fullhd_video_quality'),
       textTrackPosition

entry_types/scrolled/package/spec/frontend/AudioPlayer/processSources-spec.js

@@ -0,0 +1,32 @@
+import {processSources} from 'frontend/AudioPlayer';
+import {browser} from 'pageflow/frontend';
+
+describe('AudioPlayer processSources', () => {
+  beforeEach(() => jest.restoreAllMocks());
+
+  it('includes ogg, mp3 and m4a by default', () => {
+    const audioFile = {urls: {
+      'ogg': 'http://example.com/4/audio.ogg',
+      'mp3': 'http://example.com/4/audio.mp3',
+      'm4a': 'http://example.com/4/audio.m4a',
+    }};
+
+    const result = processSources(audioFile);
+
+    expect(result.map(s => s.type)).toEqual(['audio/ogg', 'audio/mp3', 'audio/m4a']);
+  });
+
+  it('excludes ogg source if broken', () => {
+    jest.spyOn(browser, 'has').mockImplementation(name => name === 'broken ogg support');
+
+    const audioFile = {urls: {
+      'ogg': 'http://example.com/4/audio.ogg',
+      'mp3': 'http://example.com/4/audio.mp3',
+      'm4a': 'http://example.com/4/audio.m4a',
+    }};
+
+    const result = processSources(audioFile);
+
+    expect(result.map(s => s.type)).toEqual(['audio/mp3', 'audio/m4a']);
+  });
+});

entry_types/scrolled/package/src/frontend/AudioPlayer/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
+import {browser} from 'pageflow/frontend';
 
 import {MediaPlayer} from '../MediaPlayer';
 import {useTextTracks} from '../useTextTracks';
@@ -52,7 +53,7 @@ AudioPlayer.defaultProps = {
 
 export function processSources(audioFile){
   var sources = [];
-  if (audioFile.urls['ogg']) {
+  if (audioFile.urls['ogg'] && !has('broken ogg support')) {
     sources.push({type: 'audio/ogg', src: `${audioFile.urls['ogg']}?u=1`});
   }
   if (audioFile.urls['mp3']) {
@@ -63,3 +64,7 @@ export function processSources(audioFile){
   }
   return sources;
 }
+
+function has(featureName) {
+  return typeof window !== 'undefined' && browser.has(featureName);
+}

package/src/frontend/browser/audio.js

@@ -0,0 +1,7 @@
+import {browser} from './browser';
+import {agent} from './Agent';
+
+browser.feature('broken ogg support', function() {
+  // ogg is not supported on iOS < 18.4 and broken on iOS 18.4
+  return agent.matchesMobileSafari();;
+});

package/src/frontend/browser/index.js

@@ -1,7 +1,7 @@
-
 import {agent, Agent} from './Agent';
 import {browser} from './browser';
 
+import './audio';
 import './autoplaySupport';
 import './cssAnimations';
 import './facebook';
@@ -18,4 +18,4 @@ import './volumeControlSupport';
 export * from './browser';
 
 browser.agent = agent;
-browser.Agent = Agent;
+browser.Agent = Agent;