Exclude ogg audio source on mobile Safari

iOS 18.4 claims to introduce support for ogg files. Safari selects the
ogg source, fails to load the file, though. Previous Safari versions
selected the mp3 source.

REDMINE-21034

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;