From ade8f3f46a3a37f0fd77c193a88dae8d525a8421 Mon Sep 17 00:00:00 2001
From: Anna Olak <15946812+anna1901@users.noreply.github.com>
Date: Tue, 2 Dec 2025 12:34:51 +0100
Subject: [PATCH 1/2] Implement proper livestream example app

---
 examples/video-player/App.tsx                 |  50 ++++++--
 examples/video-player/app.json                |  16 ++-
 .../video-player/components/FishjamPlayer.tsx | 108 ------------------
 .../components/FishjamPlayerStreamer.tsx      |  68 +++++++++++
 .../components/FishjamPlayerViewer.tsx        |  63 ++++++++++
 5 files changed, 187 insertions(+), 118 deletions(-)
 delete mode 100644 examples/video-player/components/FishjamPlayer.tsx
 create mode 100644 examples/video-player/components/FishjamPlayerStreamer.tsx
 create mode 100644 examples/video-player/components/FishjamPlayerViewer.tsx

diff --git a/examples/video-player/App.tsx b/examples/video-player/App.tsx
index 4787ae1fe..e51785e02 100644
--- a/examples/video-player/App.tsx
+++ b/examples/video-player/App.tsx
@@ -1,12 +1,33 @@
-import { StyleSheet, View } from 'react-native';
-import FishjamPlayer from './components/FishjamPlayer';
-
-const roomName = 'test';
+import { StyleSheet, TextInput, View, Button } from 'react-native';
+import FishjamPlayerViewer from './components/FishjamPlayerViewer';
+import FishjamPlayerStreamer from './components/FishjamPlayerStreamer';
+import { useState } from 'react';
 
 const App = () => {
+  const [roomName, setRoomName] = useState('test-room');
+  const [selection, setSelection] = useState<'streamer' | 'viewer' | 'none'>('none');
+
   return (
-    <View style={styles.videoContainer}>
-      <FishjamPlayer roomName={roomName} />
+    <View style={styles.container}>
+      {selection === 'none' && (
+        <>
+          <TextInput style={styles.textInput} placeholder="Room Name" value={roomName} onChangeText={setRoomName} />
+          <Button title="Stream" onPress={() => setSelection('streamer')} />
+          <Button title="View stream" onPress={() => setSelection('viewer')} />
+        </>
+      )}
+      {selection === 'streamer' && (
+        <>
+          <FishjamPlayerStreamer roomName={roomName} />
+          <Button title="Back" onPress={() => setSelection('none')} />
+        </>
+      )}
+      {selection === 'viewer' && (
+        <>
+          <FishjamPlayerViewer roomName={roomName} />
+          <Button title="Back" onPress={() => setSelection('none')} />
+        </>
+      )}
     </View>
   );
 };
@@ -14,9 +35,22 @@ const App = () => {
 export default App;
 
 const styles = StyleSheet.create({
-  videoContainer: {
+  container: {
     flex: 1,
-    position: 'relative',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 16,
+    backgroundColor: 'black',
+  },
+  textInput: {
+    width: '100%',
+    height: 40,
+    borderWidth: 1,
+    borderColor: 'gray',
+    borderRadius: 8,
+    padding: 8,
+    color: 'white',
     backgroundColor: 'black',
+    marginBottom: 16,
   },
 });
diff --git a/examples/video-player/app.json b/examples/video-player/app.json
index 82a798563..19d8464ca 100644
--- a/examples/video-player/app.json
+++ b/examples/video-player/app.json
@@ -14,7 +14,15 @@
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "io.fishjam.example.videoplayer",
-      "requireFullScreen": true
+      "requireFullScreen": true,
+      "infoPlist": {
+        "NSAppTransportSecurity": {
+          "NSAllowsArbitraryLoads": true
+        },
+        "NSCameraUsageDescription": "We need to access your camera for video calls.",
+        "NSMicrophoneUsageDescription": "We need to access your microphone so you can talk during calls.",
+      },
+      "appleTeamId": "J5FM626PE2"
     },
     "android": {
       "adaptiveIcon": {
@@ -22,7 +30,11 @@
         "backgroundColor": "#ffffff"
       },
       "edgeToEdgeEnabled": true,
-      "package": "io.fishjam.example.videoplayer"
+      "package": "io.fishjam.example.videoplayer",
+      "permissions": [
+        "android.permission.CAMERA",
+        "android.permission.RECORD_AUDIO"
+      ]
     },
     "web": {
       "favicon": "./assets/favicon.png"
diff --git a/examples/video-player/components/FishjamPlayer.tsx b/examples/video-player/components/FishjamPlayer.tsx
deleted file mode 100644
index 9936d02b1..000000000
--- a/examples/video-player/components/FishjamPlayer.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
-import {
-  LivestreamViewer,
-  useLivestreamViewer,
-} from '@fishjam-cloud/react-native-client/livestream';
-import { useSandbox } from '@fishjam-cloud/react-native-client';
-import { useDeviceOrientation } from '../hooks/useDeviceOrientation';
-import { setStatusBarHidden } from 'expo-status-bar';
-import { setVisibilityAsync } from 'expo-navigation-bar';
-
-interface FishjamPlayerProps {
-  roomName: string;
-  pictureInPicture?: boolean;
-}
-
-const PIP_SIZE = {
-  width: 1920,
-  height: 1080,
-};
-
-const FishjamPlayer = ({
-  roomName,
-  pictureInPicture = true,
-}: FishjamPlayerProps) => {
-  const { isLandscape } = useDeviceOrientation();
-  const styles = useMemo(() => createStyles(isLandscape), [isLandscape]);
-  const { getSandboxViewerToken } = useSandbox({
-    fishjamId: process.env.EXPO_PUBLIC_FISHJAM_ID,
-  });
-
-  const { connect, disconnect, whepClientRef } = useLivestreamViewer();
-
-  const handleConnect = useCallback(async () => {
-    try {
-      const token = await getSandboxViewerToken(roomName);
-      await connect({ token });
-    } catch (err) {
-      console.error(err);
-    }
-  }, [connect, getSandboxViewerToken, roomName]);
-
-  useEffect(() => {
-    handleConnect();
-
-    return () => {
-      disconnect();
-    };
-  }, [handleConnect, disconnect]);
-
-  useEffect(() => {
-    setStatusBarHidden(isLandscape, 'fade');
-    if (Platform.OS === 'android') {
-      setVisibilityAsync(isLandscape ? 'hidden' : 'visible');
-    }
-
-    return () => {
-      setStatusBarHidden(false, 'fade');
-      if (Platform.OS === 'android') {
-        setVisibilityAsync('visible');
-      }
-    };
-  }, [isLandscape]);
-
-  return (
-    <View style={styles.playerContentContainer}>
-      <View style={styles.playerWhepView}>
-        <LivestreamViewer
-          style={styles.playerWhepClientView}
-          pipEnabled={pictureInPicture}
-          autoStartPip={pictureInPicture}
-          autoStopPip={pictureInPicture}
-          pipSize={PIP_SIZE}
-          ref={whepClientRef}
-        />
-      </View>
-    </View>
-  );
-};
-
-export default FishjamPlayer;
-
-const createStyles = (isLandscape: boolean) =>
-  StyleSheet.create({
-    playerWhepClientView: {
-      flex: 1,
-    },
-    playerContentContainer: {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    playerWhepView: {
-      width: '100%',
-      height: isLandscape ? '100%' : undefined,
-      aspectRatio: isLandscape ? undefined : 16 / 9,
-      backgroundColor: 'black',
-    },
-    playerLoader: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-  });
diff --git a/examples/video-player/components/FishjamPlayerStreamer.tsx b/examples/video-player/components/FishjamPlayerStreamer.tsx
new file mode 100644
index 000000000..01d0ffc9d
--- /dev/null
+++ b/examples/video-player/components/FishjamPlayerStreamer.tsx
@@ -0,0 +1,68 @@
+import React, { useCallback, useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import {
+  LivestreamStreamer,
+  useLivestreamStreamer,
+  cameras,
+  VideoParameters,
+} from '@fishjam-cloud/react-native-client/livestream';
+import { useSandbox } from '@fishjam-cloud/react-native-client';
+
+interface FishjamPlayerStreamerProps {
+  roomName: string;
+}
+
+const FishjamPlayerStreamer = ({
+  roomName,
+}: FishjamPlayerStreamerProps) => {
+  const { getSandboxLivestream } = useSandbox({
+    fishjamId: process.env.EXPO_PUBLIC_FISHJAM_ID,
+  });
+
+  const {
+    connect,
+    disconnect,
+    whipClientRef,
+  } = useLivestreamStreamer({
+    videoEnabled: true,
+    audioEnabled: true,
+    camera: cameras[0],
+    videoParameters: VideoParameters.presetHD169,
+  });
+
+  const handleConnect = useCallback(async () => {
+    try {
+      const { streamerToken } = await getSandboxLivestream(roomName, false);
+      await connect(streamerToken);
+    } catch (err) {
+      console.log(err);
+    }
+  }, [connect, getSandboxLivestream, roomName]);
+
+  useEffect(() => {
+    handleConnect();
+
+    return () => {
+      disconnect();
+    };
+  }, [handleConnect, disconnect]);
+
+  return (
+    <View style={styles.playerContentContainer}>
+        <LivestreamStreamer
+          style={{ height: '90%', aspectRatio: 16 / 9 }}
+          ref={whipClientRef}
+      />
+    </View>
+  );
+};
+
+export default FishjamPlayerStreamer;
+
+const styles = StyleSheet.create({
+    playerContentContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+  });
diff --git a/examples/video-player/components/FishjamPlayerViewer.tsx b/examples/video-player/components/FishjamPlayerViewer.tsx
new file mode 100644
index 000000000..186013d9c
--- /dev/null
+++ b/examples/video-player/components/FishjamPlayerViewer.tsx
@@ -0,0 +1,63 @@
+import React, { useCallback, useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import {
+  LivestreamViewer,
+  useLivestreamViewer,
+} from '@fishjam-cloud/react-native-client/livestream';
+import { useSandbox } from '@fishjam-cloud/react-native-client';
+
+interface FishjamPlayerViewerProps {
+  roomName: string;
+  pictureInPicture?: boolean;
+}
+
+const FishjamPlayerViewer = ({
+  roomName,
+  pictureInPicture = true,
+}: FishjamPlayerViewerProps) => {
+  const { getSandboxViewerToken } = useSandbox({
+    fishjamId: process.env.EXPO_PUBLIC_FISHJAM_ID,
+  });
+
+  const { connect, disconnect, whepClientRef } = useLivestreamViewer();
+
+  const handleConnect = useCallback(async () => {
+    try {
+      const token = await getSandboxViewerToken(roomName);
+      await connect({ token });
+    } catch (err) {
+      console.error(err);
+    }
+  }, [connect, getSandboxViewerToken, roomName]);
+
+  useEffect(() => {
+    handleConnect();
+
+    return () => {
+      disconnect();
+    };
+  }, [handleConnect, disconnect]);
+
+  return (
+    <View style={styles.playerContentContainer}>
+      <LivestreamViewer
+        style={{ height: '90%', aspectRatio: 16 / 9 }}
+        pipEnabled={pictureInPicture}
+        autoStartPip={pictureInPicture}
+        autoStopPip={pictureInPicture}
+        pipSize={{ width: 1920, height: 1080 }}
+        ref={whepClientRef}
+      />
+    </View>
+  );
+};
+
+export default FishjamPlayerViewer;
+
+  const styles = StyleSheet.create({
+    playerContentContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    }
+  });

From 2c11913d07ed835f72cc17403af192480bc3c6c5 Mon Sep 17 00:00:00 2001
From: Anna Olak <15946812+anna1901@users.noreply.github.com>
Date: Tue, 2 Dec 2025 13:08:09 +0100
Subject: [PATCH 2/2] Small fixes

---
 examples/video-player/App.tsx                 | 11 ++++--
 examples/video-player/app.json                |  2 +-
 .../components/FishjamPlayerStreamer.tsx      | 34 ++++++++-----------
 .../components/FishjamPlayerViewer.tsx        | 16 ++++-----
 4 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/examples/video-player/App.tsx b/examples/video-player/App.tsx
index e51785e02..70036ec5f 100644
--- a/examples/video-player/App.tsx
+++ b/examples/video-player/App.tsx
@@ -5,13 +5,20 @@ import { useState } from 'react';
 
 const App = () => {
   const [roomName, setRoomName] = useState('test-room');
-  const [selection, setSelection] = useState<'streamer' | 'viewer' | 'none'>('none');
+  const [selection, setSelection] = useState<'streamer' | 'viewer' | 'none'>(
+    'none',
+  );
 
   return (
     <View style={styles.container}>
       {selection === 'none' && (
         <>
-          <TextInput style={styles.textInput} placeholder="Room Name" value={roomName} onChangeText={setRoomName} />
+          <TextInput
+            style={styles.textInput}
+            placeholder="Room Name"
+            value={roomName}
+            onChangeText={setRoomName}
+          />
           <Button title="Stream" onPress={() => setSelection('streamer')} />
           <Button title="View stream" onPress={() => setSelection('viewer')} />
         </>
diff --git a/examples/video-player/app.json b/examples/video-player/app.json
index 19d8464ca..86fb7c625 100644
--- a/examples/video-player/app.json
+++ b/examples/video-player/app.json
@@ -20,7 +20,7 @@
           "NSAllowsArbitraryLoads": true
         },
         "NSCameraUsageDescription": "We need to access your camera for video calls.",
-        "NSMicrophoneUsageDescription": "We need to access your microphone so you can talk during calls.",
+        "NSMicrophoneUsageDescription": "We need to access your microphone so you can talk during calls."
       },
       "appleTeamId": "J5FM626PE2"
     },
diff --git a/examples/video-player/components/FishjamPlayerStreamer.tsx b/examples/video-player/components/FishjamPlayerStreamer.tsx
index 01d0ffc9d..87f08afa4 100644
--- a/examples/video-player/components/FishjamPlayerStreamer.tsx
+++ b/examples/video-player/components/FishjamPlayerStreamer.tsx
@@ -12,18 +12,12 @@ interface FishjamPlayerStreamerProps {
   roomName: string;
 }
 
-const FishjamPlayerStreamer = ({
-  roomName,
-}: FishjamPlayerStreamerProps) => {
+const FishjamPlayerStreamer = ({ roomName }: FishjamPlayerStreamerProps) => {
   const { getSandboxLivestream } = useSandbox({
     fishjamId: process.env.EXPO_PUBLIC_FISHJAM_ID,
   });
 
-  const {
-    connect,
-    disconnect,
-    whipClientRef,
-  } = useLivestreamStreamer({
+  const { connect, disconnect, whipClientRef } = useLivestreamStreamer({
     videoEnabled: true,
     audioEnabled: true,
     camera: cameras[0],
@@ -35,7 +29,7 @@ const FishjamPlayerStreamer = ({
       const { streamerToken } = await getSandboxLivestream(roomName, false);
       await connect(streamerToken);
     } catch (err) {
-      console.log(err);
+      console.error(err);
     }
   }, [connect, getSandboxLivestream, roomName]);
 
@@ -49,20 +43,20 @@ const FishjamPlayerStreamer = ({
 
   return (
     <View style={styles.playerContentContainer}>
-        <LivestreamStreamer
-          style={{ height: '90%', aspectRatio: 16 / 9 }}
-          ref={whipClientRef}
+      <LivestreamStreamer
+        style={{ height: '90%', aspectRatio: 16 / 9 }}
+        ref={whipClientRef}
       />
     </View>
   );
 };
 
-export default FishjamPlayerStreamer;
-
 const styles = StyleSheet.create({
-    playerContentContainer: {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-  });
+  playerContentContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default FishjamPlayerStreamer;
diff --git a/examples/video-player/components/FishjamPlayerViewer.tsx b/examples/video-player/components/FishjamPlayerViewer.tsx
index 186013d9c..d61be8f3e 100644
--- a/examples/video-player/components/FishjamPlayerViewer.tsx
+++ b/examples/video-player/components/FishjamPlayerViewer.tsx
@@ -52,12 +52,12 @@ const FishjamPlayerViewer = ({
   );
 };
 
-export default FishjamPlayerViewer;
+const styles = StyleSheet.create({
+  playerContentContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
 
-  const styles = StyleSheet.create({
-    playerContentContainer: {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-    }
-  });
+export default FishjamPlayerViewer;