fix: iOS file selection (fixes #146)

Author: Danielku15

src/components/AlphaTabFull/player-controls-group.tsx

@@ -9,7 +9,7 @@ import styles from "./styles.module.scss";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as solid from "@fortawesome/free-solid-svg-icons";
 import { useAlphaTabEvent } from "@site/src/hooks";
-import { openFile } from "@site/src/utils";
+import { openFile, openInputFile } from "@site/src/utils";
 
 export interface PlayerControlsGroupProps {
   api: alphaTab.AlphaTabApi;
@@ -57,20 +57,6 @@ export const PlayerControlsGroup: React.FC<PlayerControlsGroupProps> = ({
     setCurrentTime(e.currentTime);
   });
 
-  const open = () => {
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = ".gp,.gp3,.gp4,.gp5,.gpx,.musicxml,.mxml,.xml,.capx";
-    input.onchange = () => {
-      if (input.files?.length === 1) {
-        openFile(api, input.files[0]);
-      }
-    };
-    document.body.appendChild(input);
-    input.click();
-    document.body.removeChild(input);
-  };
-
   useEffect(() => {
     api.countInVolume = isCountInActive ? 1 : 0;
   }, [isCountInActive]);
@@ -121,7 +107,7 @@ export const PlayerControlsGroup: React.FC<PlayerControlsGroupProps> = ({
             href="#"
             onClick={(e) => {
               e.preventDefault();
-              open();
+              openInputFile(api);
             }}
             title="Open File"
           >

src/components/AlphaTabPlayground/player-controls-group.tsx

@@ -5,7 +5,7 @@ import styles from './styles.module.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as solid from '@fortawesome/free-solid-svg-icons';
 import { useAlphaTabEvent } from '@site/src/hooks';
-import { openFile } from '@site/src/utils';
+import { openFile, openInputFile } from '@site/src/utils';
 import { PlayerProgressIndicator } from '../AlphaTabFull/player-progress-indicator';
 
 export interface PlayerControlsGroupProps {
@@ -62,20 +62,6 @@ export const PlayerControlsGroup: React.FC<PlayerControlsGroupProps> = ({
         setCurrentTime(e.currentTime);
     });
 
-    const open = () => {
-        const input = document.createElement('input');
-        input.type = 'file';
-        input.accept = '.gp,.gp3,.gp4,.gp5,.gpx,.musicxml,.mxml,.xml,.capx';
-        input.onchange = () => {
-            if (input.files?.length === 1) {
-                openFile(api, input.files[0]);
-            }
-        };
-        document.body.appendChild(input);
-        input.click();
-        document.body.removeChild(input);
-    };
-
     const formatDuration = (milliseconds: number) => {
         let seconds = milliseconds / 1000;
         const minutes = (seconds / 60) | 0;
@@ -99,7 +85,7 @@ export const PlayerControlsGroup: React.FC<PlayerControlsGroupProps> = ({
                         type="button"
                         onClick={e => {
                             e.preventDefault();
-                            open();
+                            openInputFile(api);
                         }}
                         data-tooltip-id="tooltip-playground"
                         data-tooltip-content="Open File">

src/utils.ts

@@ -8,6 +8,22 @@ export function openFile(api: alphaTab.AlphaTabApi, file: Blob) {
   reader.readAsArrayBuffer(file);
 }
 
+export function openInputFile(api: alphaTab.AlphaTabApi) {
+  const input = document.createElement('input');
+  input.type = 'file';
+  if (!isIOS()) {
+    input.accept = '.gp,.gp3,.gp4,.gp5,.gpx,.musicxml,.mxml,.xml,.capx';
+  }
+  input.onchange = () => {
+    if (input.files?.length === 1) {
+      openFile(api, input.files[0]);
+    }
+  };
+  document.body.appendChild(input);
+  input.click();
+  document.body.removeChild(input);
+};
+
 
 export function downloadFile(api: alphaTab.AlphaTabApi) {
   const exporter = new alphaTab.exporter.Gp7Exporter();
@@ -19,4 +35,27 @@ export function downloadFile(api: alphaTab.AlphaTabApi) {
   document.body.appendChild(a);
   a.click();
   document.body.removeChild(a);
-}
+}
+
+
+const iOSPlatforms = new Set(['iPhone', 'iPad', 'iPod']);
+function isIOS() {
+  // Tested: 
+  // - iPad Pro 12.9 - iOS 12 (navigator.platform = "iPad")
+  // - iPad Pro 11 2020 - iOS 13 (navigator.platform = "iPad")
+  // - iPad Air 4 - iOS 14 (navigator.platform = "iPad")
+  // - iPad Mini 2021 - iOS 15 (navigator.platform = "iPad")
+  // - iPad Pro 12.9 2022 - iOS 16 (navigator.platform = "iPad")
+  // - iPad Pro 12.9 2021 - iOS 17 (navigator.platform = "MacIntel" && navigator.maxTouchPoints > 1)
+  // - iPad 9th - iOS 18 (navigator.platform = "iPad")
+  // - iPhone XS - iOS 12 (navigator.platform = "iPhone")
+  // - iPhone 11 - iOS 13 (navigator.platform = "iPhone")
+  // - iPhone 12 - iOS 14 (navigator.platform = "iPhone")
+  // - iPhone 13 - iOS 15 (navigator.platform = "iPhone")
+  // - iPhone 14 - iOS 16 (navigator.platform = "iPhone")
+  // - iPhone 15 - iOS 17 (navigator.platform = "iPhone")
+  // - iPhone 16 - iOS 18 (navigator.platform = "iPhone")
+  // - iPhone 16 - iOS 18.6 (navigator.platform = "iPhone")
+  return iOSPlatforms.has(navigator.platform) ||
+    navigator.platform == "MacIntel" && navigator.maxTouchPoints > 1;
+}