Add ability for media players to play base64 on iOS (#887)

Author: YoussefHenna

example/package.json

@@ -36,7 +36,7 @@
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "~3.29.0",
     "react-native-web": "~0.19.6",
-    "uuid": "3.4.0"
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

packages/core/package.json

@@ -60,21 +60,22 @@
     "react-native-confirmation-code-field": "^7.3.1",
     "react-native-deck-swiper": "^2.0.12",
     "react-native-dropdown-picker": "^5.4.7-beta.1",
-    "react-native-select-dropdown": "4.0.1",
     "react-native-gesture-handler": "~2.14.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-markdown-display": "^7.0.0-alpha.2",
     "react-native-modal-datetime-picker": "^13.0.0",
     "react-native-pager-view": "6.2.3",
     "react-native-reanimated": "~3.6.2",
+    "react-native-select-dropdown": "4.0.1",
     "react-native-shadow-2": "^7.0.7",
     "react-native-svg": "14.1.0",
     "react-native-swipe-list-view": "^3.2.9",
     "react-native-tab-view": "^3.4.0",
     "react-native-typography": "^1.4.1",
     "react-native-web-swiper": "^2.2.3",
     "react-native-youtube-iframe": "^2.2.2",
-    "react-youtube": "^10.1.0"
+    "react-youtube": "^10.1.0",
+    "uuid": "^9.0.1"
   },
   "peerDependencies": {
     "react-native-avoid-softinput": "^4.0.1"
@@ -92,6 +93,7 @@
     "@types/lodash.isnumber": "^3.0.6",
     "@types/lodash.omit": "^4.5.6",
     "@types/lodash.tonumber": "^4.0.6",
+    "@types/uuid": "^9.0.8",
     "metro-react-native-babel-preset": "^0.77.0",
     "react-native-avoid-softinput": "^4.0.1"
   },

packages/core/src/components/MediaPlayer/AudioPlayer/HeadlessAudioPlayer.tsx

@@ -6,7 +6,11 @@ import {
   InterruptionModeAndroid,
 } from "expo-av";
 import { HeadlessAudioPlayerProps } from "./AudioPlayerCommon";
-import { mapToMediaPlayerStatus } from "../MediaPlayerCommon";
+import {
+  mapToMediaPlayerStatus,
+  normalizeBase64Source,
+  useSourceDeepCompareEffect,
+} from "../MediaPlayerCommon";
 import type { MediaPlayerRef } from "../MediaPlayerCommon";
 import MediaPlaybackWrapper from "../MediaPlaybackWrapper";
 
@@ -89,7 +93,9 @@ const HeadlessAudioPlayer = React.forwardRef<
         isError: false,
       });
 
-      const { sound } = await Audio.Sound.createAsync(source);
+      let finalSource = await normalizeBase64Source(source);
+
+      const { sound } = await Audio.Sound.createAsync(finalSource);
       setCurrentSound(sound);
       sound.setOnPlaybackStatusUpdate(onPlaybackStatusUpdate);
     };
@@ -111,33 +117,4 @@ const HeadlessAudioPlayer = React.forwardRef<
   }
 );
 
-// The source provided into the AudioPlayer can be of type {uri: "some uri"}
-// In the case that this object is created inline, each rerender provides a new source object because a new object is initialized everytime
-// This creates an issue with being a useEffect dependency
-//
-// This creates variants of useEffect that checks deep equality of 'uri' to determine if dependency changed or not
-// Follows: https://stackoverflow.com/a/54096391
-function sourceDeepCompareEquals(a: any, b: any) {
-  if (a?.uri && b?.uri) {
-    return a.uri === b.uri;
-  }
-  return a === b;
-}
-
-function useSourceDeepCompareMemoize(value: any) {
-  const ref = React.useRef();
-  if (!sourceDeepCompareEquals(value, ref.current)) {
-    ref.current = value;
-  }
-  return ref.current;
-}
-
-function useSourceDeepCompareEffect(
-  callback: React.EffectCallback,
-  dependencies: React.DependencyList
-) {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  React.useEffect(callback, dependencies.map(useSourceDeepCompareMemoize));
-}
-
 export default HeadlessAudioPlayer;

packages/core/src/components/MediaPlayer/MediaPlayerCommon.ts

@@ -1,4 +1,8 @@
 import { AVPlaybackSource, AVPlaybackStatus } from "expo-av";
+import * as FileSystem from "expo-file-system";
+import { v4 as uuid } from "uuid";
+import { Platform } from "react-native";
+import React from "react";
 
 export interface MediaPlayerStatus {
   isPlaying: boolean;
@@ -50,3 +54,55 @@ export function mapToMediaPlayerStatus(
     error: status.error,
   };
 }
+
+// https://stackoverflow.com/a/7874175/8805150
+const BASE_64_REGEX =
+  /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/;
+
+/**
+ * Base64 strings are not playable on iOS and needs to be saved to a file before playing
+ */
+export async function normalizeBase64Source(
+  source: AVPlaybackSource
+): Promise<AVPlaybackSource> {
+  const uri: string | undefined = (source as any)?.uri;
+
+  if (Platform.OS === "ios" && uri && uri.match(BASE_64_REGEX)) {
+    const fileName = `${FileSystem.cacheDirectory}${uuid()}`;
+    await FileSystem.writeAsStringAsync(fileName, uri, {
+      encoding: FileSystem.EncodingType.Base64,
+    });
+    return { uri: fileName };
+  }
+
+  return source;
+}
+
+// The source provided into the AudioPlayer can be of type {uri: "some uri"}
+// In the case that this object is created inline, each rerender provides a new source object because a new object is initialized everytime
+// This creates an issue with being a useEffect dependency
+//
+// This creates variants of useEffect that checks deep equality of 'uri' to determine if dependency changed or not
+// Follows: https://stackoverflow.com/a/54096391
+function sourceDeepCompareEquals(a: any, b: any) {
+  if (a?.uri && b?.uri) {
+    return a.uri === b.uri;
+  }
+  return a === b;
+}
+
+function useSourceDeepCompareMemoize(value: any) {
+  const ref = React.useRef();
+  if (!sourceDeepCompareEquals(value, ref.current)) {
+    ref.current = value;
+  }
+  return ref.current;
+}
+
+export function useSourceDeepCompareEffect(
+  callback: React.EffectCallback,
+  dependencies: React.DependencyList
+) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  React.useEffect(callback, dependencies.map(useSourceDeepCompareMemoize));
+}

packages/core/src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx

@@ -6,11 +6,16 @@ import {
   ResizeMode as ExpoResizeMode,
   AVPlaybackStatus,
   VideoFullscreenUpdate,
+  AVPlaybackSource,
 } from "expo-av";
 import { extractSizeStyles } from "../../../utilities";
 import MediaPlaybackWrapper from "../MediaPlaybackWrapper";
 import type { Playback } from "expo-av/src/AV";
-import { mapToMediaPlayerStatus } from "../MediaPlayerCommon";
+import {
+  mapToMediaPlayerStatus,
+  normalizeBase64Source,
+  useSourceDeepCompareEffect,
+} from "../MediaPlayerCommon";
 import type { MediaPlayerRef, MediaPlayerProps } from "../MediaPlayerCommon";
 
 type ResizeMode = "contain" | "cover" | "stretch";
@@ -36,6 +41,7 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
       posterResizeMode = "cover",
       onPlaybackStatusUpdate: onPlaybackStatusUpdateProp,
       onPlaybackFinish,
+      source,
       ...rest
     },
     ref
@@ -44,6 +50,8 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
       React.useState<VideoPlayerComponent | null>();
     const [isPlaying, setIsPlaying] = React.useState(false);
     const [isFullscreen, setIsFullscreen] = React.useState(false);
+    const [currentSource, setCurrentSource] =
+      React.useState<AVPlaybackSource>();
     const mediaPlaybackWrapperRef = React.useRef<MediaPlayerRef>(null);
 
     const sizeStyles = extractSizeStyles(style);
@@ -110,6 +118,14 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
       [toggleFullscreen, isPlaying]
     );
 
+    useSourceDeepCompareEffect(() => {
+      const updateSource = async () => {
+        const finalSource = await normalizeBase64Source(source);
+        setCurrentSource(finalSource);
+      };
+      updateSource();
+    }, [source]);
+
     return (
       <MediaPlaybackWrapper
         media={videoMediaObject as Playback | undefined}
@@ -125,6 +141,7 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
           posterStyle={[sizeStyles, { resizeMode: posterResizeMode }]}
           onPlaybackStatusUpdate={onPlaybackStatusUpdate}
           onFullscreenUpdate={(e) => onFullscreenUpdate(e.fullscreenUpdate)}
+          source={currentSource}
           {...rest}
         />
       </MediaPlaybackWrapper>

yarn.lock

@@ -4267,6 +4267,11 @@
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.2.tgz#6286b4c7228d58ab7866d19716f3696e03a09397"
   integrity sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==
 
+"@types/uuid@^9.0.8":
+  version "9.0.8"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.8.tgz#7545ba4fc3c003d6c756f651f3bf163d8f0f29ba"
+  integrity sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==
+
 "@types/ws@^8.5.1":
   version "8.5.4"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.4.tgz#bb10e36116d6e570dd943735f86c933c1587b8a5"
@@ -15204,11 +15209,6 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
-[email protected]:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
-  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
-
 uuid@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.3.tgz#c5c9f2c8cf25dc0a372c4df1441c41f5bd0c680b"
@@ -15219,6 +15219,11 @@ uuid@^8.0.0, uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+uuid@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
+  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
+
 v8-compile-cache-lib@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"