feat: Creator Channels Group Chat and Audio, Camera and Image upload

.eslintrc.js

@@ -34,7 +34,14 @@ module.exports = {
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
     "react/prop-types": "off",
-    "unused-imports/no-unused-vars": "warn",
+    "unused-imports/no-unused-vars": [
+      "warn",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+        caughtErrorsIgnorePattern: "^_",
+      },
+    ],
     "no-empty": "warn",
     "react/display-name": "warn",
     "no-async-promise-executor": "warn",

apps/expo/app.config.ts

@@ -67,6 +67,7 @@ const expoConfig: ExpoConfig = {
   ios: {
     bundleIdentifier: config.scheme,
     buildNumber: majorVersion.toString(),
+    usesIcloudStorage: true,
     supportsTablet: false, // TODO:
     jsEngine: "hermes",
     backgroundColor: "#FFFFFF",
@@ -150,17 +151,28 @@ const expoConfig: ExpoConfig = {
     [
       "expo-media-library",
       {
-        photosPermission: "Allow $(PRODUCT_NAME) to access your photos.",
-        savePhotosPermission: "Allow $(PRODUCT_NAME) to save photos.",
+        savePhotosPermission:
+          "Allow $(PRODUCT_NAME) to save photos to your media library.",
         isAccessMediaLocationEnabled: true,
       },
     ],
+    [
+      "expo-document-picker",
+      {
+        iCloudContainerEnvironment:
+          STAGE === "production" ? "Production" : "Development",
+      },
+    ],
     "expo-localization",
     [
       "expo-image-picker",
       {
         photosPermission:
-          "$(PRODUCT_NAME) needs to access your camera roll so that you can upload photos on Showtime.",
+          "$(PRODUCT_NAME) accesses your photos to allow you to share them with your audience and to personalize your profile.",
+        cameraPermission:
+          "$(PRODUCT_NAME) requires access to your camera to capture photos and videos, allowing you to share moments with your audience and enhance your creator channel.",
+        microphonePermission:
+          "$(PRODUCT_NAME) requires access to your microphone to record voice messages. This also ensures that when you record videos, they aren't muted, providing a richer interactive experience for your audience.",
       },
     ],
     [
@@ -233,6 +245,7 @@ const expoConfig: ExpoConfig = {
         },
       },
     ],
+    ["react-native-compressor"],
   ],
   hooks: {
     postPublish: [

apps/expo/index.js

@@ -7,10 +7,17 @@ import "expo-dev-launcher";
 import "expo/build/Expo.fx";
 import "react-native-gesture-handler";
 
+import { PlaybackService } from "app/components/audio-player/service";
+
+import TrackPlayer from "design-system/track-player";
+
 import App from "./App";
 
 // if (__DEV__) {
 //   activateKeepAwake();
 // }
 
 registerRootComponent(App);
+
+// register audio service
+TrackPlayer.registerPlaybackService(() => PlaybackService);

apps/expo/package.json

@@ -52,6 +52,7 @@
     "@hookform/resolvers": "^3.1.1",
     "@magic-ext/react-native-expo-oauth": "^8.1.0",
     "@magic-sdk/react-native-expo": "^14.1.0",
+    "@miblanchard/react-native-slider": "^2.3.1",
     "@react-native-async-storage/async-storage": "~1.19.1",
     "@react-native-community/blur": "^4.3.2",
     "@react-native-community/datetimepicker": "7.4.1",
@@ -98,6 +99,7 @@
     "expo-constants": "~14.4.2",
     "expo-dev-client": "~2.4.7",
     "expo-device": "~5.4.0",
+    "expo-document-picker": "~11.5.4",
     "expo-font": "~11.4.0",
     "expo-gl": "~13.0.1",
     "expo-haptics": "~12.4.0",
@@ -137,11 +139,12 @@
     "react-native-bignumber": "^0.2.1",
     "react-native-blob-jsi-helper": "^0.3.1",
     "react-native-blurhash": "^1.1.10",
-    "react-native-gesture-handler": "2.12.0",
+    "react-native-compressor": "^1.8.4",
+    "react-native-gesture-handler": "2.13.1",
     "react-native-get-random-values": "~1.9.0",
     "react-native-image-colors": "^2.3.0",
     "react-native-ios-context-menu": "^1.15.3",
-    "react-native-keyboard-controller": "^1.5.8",
+    "react-native-keyboard-controller": "^1.7.0",
     "react-native-level-fs": "^3.0.1",
     "react-native-localhost": "^1.0.0",
     "react-native-mmkv": "2.10.1",
@@ -151,13 +154,14 @@
     "react-native-popper": "^0.3.2",
     "react-native-quick-base64": "^2.0.7",
     "react-native-quick-crypto": "^0.6.1",
-    "react-native-reanimated": "3.4.1",
+    "react-native-reanimated": "3.5.4",
     "react-native-reanimated-carousel": "^3.5.1",
     "react-native-safe-area-context": "4.7.1",
     "react-native-screens": "^3.23.0",
     "react-native-share": "^9.2.3",
     "react-native-svg": "13.10.0",
     "react-native-tab-view": "^3.5.2",
+    "react-native-track-player": "v4.0.0-rc08",
     "react-native-view-shot": "3.7.0",
     "react-native-volume-manager": "^1.10.0",
     "react-native-web": "~0.19.7",

apps/next/next.config.js

@@ -75,6 +75,10 @@ const nextConfig = {
     "universal-tooltip",
     "react-native-image-colors",
     "react-native-reanimated-carousel",
+    "@miblanchard/react-native-slider",
+    "react-native-track-player",
+    "expo-document-picker",
+    "react-native-compressor",
   ],
   webpack: (config, options) => {
     if (!options.isServer) {
@@ -139,6 +143,7 @@ const nextConfig = {
       "storage.googleapis.com",
       "testingservice-dot-showtimenft.wl.r.appspot.com",
       "media.showtime.xyz",
+      "media-stage.showtime.xyz",
     ],
   },
   async headers() {

apps/next/package.json

@@ -70,6 +70,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "screenfull": "^6.0.2",
     "setimmediate": "^1.0.5",
+    "shaka-player": "^4.3.8",
     "swiper": "^10.0.4",
     "swr": "^2.2.0",
     "twitter-lite": "^1.1.0",

apps/next/src/pages/_app.tsx

@@ -13,6 +13,7 @@ import "react-datepicker/dist/react-datepicker.css";
 
 import { View } from "@showtime-xyz/universal.view";
 
+import { PlaybackService } from "app/components/audio-player/service";
 import Footer from "app/components/footer";
 import Header from "app/components/header";
 import { withColorScheme } from "app/components/memo-with-theme";
@@ -58,6 +59,7 @@ import { VerifyPhoneNumberScreen } from "app/screens/settings-verify-phone-numbe
 import { prevRouteRef } from "app/utilities";
 
 import { Toaster } from "design-system/toast";
+import TrackPlayer from "design-system/track-player";
 
 import "../styles/styles.css";
 
@@ -66,6 +68,8 @@ Sentry.init({
   environment: process.env.STAGE,
 });
 
+TrackPlayer.registerPlaybackService(() => PlaybackService);
+
 function App({ Component, pageProps, router }: AppProps) {
   const meta = pageProps.meta;
 

package.json

@@ -67,7 +67,7 @@
     "react-dom": "18.2.0",
     "@jest/create-cache-key-function": "29.2.1",
     "jest-runtime": "29.5.0",
-    "react-native-reanimated": "3.4.1",
+    "react-native-reanimated": "3.5.4",
     "@types/react": "~18.2.14",
     "@ethersproject/bignumber": "5.7.0",
     "@ethersproject/signing-key": "5.7.0",