FCE-2534: Create mobile fishjam chat example app

examples/mobile-client/mobile-fishjam-chat/.env.example

@@ -0,0 +1,2 @@
+EXPO_PUBLIC_FISHJAM_ID=
+EXPO_PUBLIC_VIDEOROOM_STAGING_SANDBOX_URL=

examples/mobile-client/mobile-fishjam-chat/.gitignore

@@ -0,0 +1,41 @@
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+app-example
+
+# generated native folders
+/ios
+/android

examples/mobile-client/mobile-fishjam-chat/.vscode/extensions.json

@@ -0,0 +1 @@
+{ "recommendations": ["expo.vscode-expo-tools"] }

examples/mobile-client/mobile-fishjam-chat/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit",
+    "source.sortMembers": "explicit"
+  }
+}

examples/mobile-client/mobile-fishjam-chat/README.md

@@ -0,0 +1,60 @@
+# React Native Fishjam example
+
+## Prerequisites
+
+Create a `.env` file in the `examples/mobile-client/mobile-fishjam-chat` directory (optional), or copy the `.env.example` file. The following environment variables are required:
+
+- `EXPO_PUBLIC_VIDEOROOM_STAGING_SANDBOX_URL` - Sandbox URL for VideoRoom staging environment
+- `EXPO_PUBLIC_FISHJAM_ID` - Fishjam ID for production environment
+
+## Example Overview
+
+The app has 2 tabs showing different ways to connect to Fishjam video calls:
+
+**VideoRoom** - Connect to VideoRoom (Fishjam's demo service, something like Google Meet) by entering a room name and username. The app automatically creates the room and generates tokens for you.
+
+**Livestream** - Join existing livestreams or create your own livestream.
+
+## Project setup
+
+1. Clone the repository:
+
+```
+git clone https://github.com/fishjam-cloud/web-client-sdk.git
+cd web-client-sdk
+```
+
+2. Install dependencies and build project:
+
+```cmd
+yarn
+yarn build
+```
+
+3. Prebuild native files in example directory:
+
+```cmd
+cd examples/mobile-client/mobile-fishjam-chat
+npx expo prebuild --clean
+```
+
+> [!NOTE]
+> Be sure to run `npx expo prebuild` and not `yarn prebuild` as there's an issue with path generation for the `ios/.xcode.env.local` file
+
+4. Build app:
+
+```
+yarn ios
+yarn android
+```
+
+## Development
+
+1. Whenever you make changes in the `packages` directory, make sure to build the app in the root directory (not in `examples/mobile-client/mobile-fishjam-chat`). This ensures that all related workspaces are also built:
+```cmd
+yarn build
+```
+2. Linter (run in the root directory):
+```cmd
+yarn lint
+```

examples/mobile-client/mobile-fishjam-chat/app.json

@@ -0,0 +1,60 @@
+{
+  "expo": {
+    "name": "mobile-fishjam-chat",
+    "slug": "mobile-fishjam-chat",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "mobilefishjamchat",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.anonymous.mobilefishjamchat",
+      "infoPlist": {
+        "NSCameraUsageDescription": "Allow $(PRODUCT_NAME) to access your camera.",
+        "NSMicrophoneUsageDescription": "Allow $(PRODUCT_NAME) to access your microphone."
+      },
+      "appleTeamId": "J5FM626PE2"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "monochromeImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "edgeToEdgeEnabled": true,
+      "predictiveBackGestureEnabled": false,
+      "permissions": [
+        "android.permission.CAMERA",
+        "android.permission.RECORD_AUDIO",
+        "android.permission.MODIFY_AUDIO_SETTINGS",
+        "android.permission.ACCESS_NETWORK_STATE",
+        "android.permission.ACCESS_WIFI_STATE"
+      ],
+      "package": "com.anonymous.mobilefishjamchat"
+    },
+    "web": {
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/images/splash.png",
+          "resizeMode": "contain",
+          "backgroundColor": "#ffffff",
+          "dark": {
+            "backgroundColor": "#000000"
+          }
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true,
+      "reactCompiler": true
+    }
+  }
+}

examples/mobile-client/mobile-fishjam-chat/app/(tabs)/_layout.tsx

@@ -0,0 +1,34 @@
+import { Tabs } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
+import { BrandColors } from "../../utils/Colors";
+
+export default function TabLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: BrandColors.darkBlue100,
+        tabBarInactiveTintColor: "#8E8E93",
+        headerShown: false,
+      }}
+    >
+      <Tabs.Screen
+        name="room"
+        options={{
+          title: "Room",
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="videocam" size={size} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="livestream"
+        options={{
+          title: "Livestream",
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="radio" size={size} color={color} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}

examples/mobile-client/mobile-fishjam-chat/app/(tabs)/livestream.tsx

@@ -0,0 +1,143 @@
+import React, { useState } from "react";
+import {
+  Dimensions,
+  Image,
+  KeyboardAvoidingView,
+  Keyboard,
+  StyleSheet,
+  Text,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { router } from "expo-router";
+import { Button, TextInput, DismissKeyboard } from "../../components";
+
+const FishjamLogo = require("../../assets/images/fishjam-logo.png");
+
+export default function LivestreamScreen() {
+  const [connectionError, setConnectionError] = useState<string | null>(null);
+
+  const [fishjamId, setFishjamId] = useState(
+    process.env.EXPO_PUBLIC_FISHJAM_ID ?? "",
+  );
+  const [roomName, setRoomName] = useState("");
+
+  const validateInputs = () => {
+    if (!fishjamId) {
+      throw new Error("Fishjam ID is required");
+    }
+
+    if (!roomName) {
+      throw new Error("Room name is required");
+    }
+  };
+
+  const onTapConnectViewerButton = async () => {
+    try {
+      validateInputs();
+      setConnectionError(null);
+      Keyboard.dismiss();
+      router.push({
+        pathname: "/livestream/viewer",
+        params: { fishjamId, roomName },
+      });
+    } catch (e) {
+      const message =
+        "message" in (e as Error) ? (e as Error).message : "Unknown error";
+      setConnectionError(message);
+    }
+  };
+
+  const onTapConnectStreamerButton = async () => {
+    try {
+      validateInputs();
+      setConnectionError(null);
+      Keyboard.dismiss();
+      router.push({
+        pathname: "/livestream/streamer",
+        params: { fishjamId, roomName },
+      });
+    } catch (e) {
+      const message =
+        "message" in (e as Error) ? (e as Error).message : "Unknown error";
+      setConnectionError(message);
+    }
+  };
+
+  const onTapConnectScreenSharingButton = async () => {
+    try {
+      validateInputs();
+      setConnectionError(null);
+      Keyboard.dismiss();
+      router.push({
+        pathname: "/livestream/screen-sharing",
+        params: { fishjamId, roomName },
+      });
+    } catch (e) {
+      const message =
+        "message" in (e as Error) ? (e as Error).message : "Unknown error";
+      setConnectionError(message);
+    }
+  };
+
+  return (
+    <DismissKeyboard>
+      <SafeAreaView style={styles.safeArea}>
+        <KeyboardAvoidingView behavior="height" style={styles.container}>
+          {connectionError && (
+            <Text style={styles.errorMessage}>{connectionError}</Text>
+          )}
+          <Image
+            style={styles.logo}
+            source={FishjamLogo}
+            resizeMode="contain"
+          />
+          <TextInput
+            onChangeText={setFishjamId}
+            placeholder="Fishjam ID"
+            defaultValue={fishjamId}
+          />
+          <TextInput
+            onChangeText={setRoomName}
+            placeholder="Room Name"
+            defaultValue={roomName}
+          />
+          <Button
+            title="Connect to Livestream"
+            onPress={onTapConnectViewerButton}
+          />
+          <Button
+            title="Stream Livestream"
+            onPress={onTapConnectStreamerButton}
+          />
+          <Button
+            title="Stream Screen Sharing"
+            onPress={onTapConnectScreenSharingButton}
+          />
+        </KeyboardAvoidingView>
+      </SafeAreaView>
+    </DismissKeyboard>
+  );
+}
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: "#BFE7F8",
+  },
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    backgroundColor: "#BFE7F8",
+    padding: 20,
+    gap: 24,
+  },
+  errorMessage: {
+    color: "black",
+    textAlign: "center",
+    margin: 25,
+    fontSize: 20,
+  },
+  logo: {
+    width: Dimensions.get("window").width - 40,
+  },
+});