Video feed

apps/expo/App.tsx

@@ -1,13 +1,15 @@
-import { useEffect } from "react";
-import { AppState, LogBox } from "react-native";
+import { useEffect, useRef, useCallback } from "react";
+import { AppState, AppStateStatus, LogBox, Platform } from "react-native";
 
 import { configure as configureWalletMobileSDK } from "@coinbase/wallet-mobile-sdk";
-import { Audio, InterruptionModeIOS, InterruptionModeAndroid } from "expo-av";
 import { Image } from "expo-image";
+import { useKeepAwake } from "expo-keep-awake";
 import * as SplashScreen from "expo-splash-screen";
 import { AvoidSoftInput } from "react-native-avoid-softinput";
 import { enableFreeze, enableScreens } from "react-native-screens";
+import { VolumeManager } from "react-native-volume-manager";
 
+import { useAppState } from "app/hooks/use-app-state";
 import { useExpoUpdate } from "app/hooks/use-expo-update";
 import { Logger } from "app/lib/logger";
 import { Sentry } from "app/lib/sentry";
@@ -35,12 +37,6 @@ configureWalletMobileSDK({
   hostPackageName: "org.toshi",
 });
 
-Audio.setAudioModeAsync({
-  playsInSilentModeIOS: true,
-  interruptionModeIOS: InterruptionModeIOS.DoNotMix,
-  interruptionModeAndroid: InterruptionModeAndroid.DoNotMix,
-}).catch(() => {});
-
 LogBox.ignoreLogs([
   "Constants.deviceYearClass",
   "No native splash screen",
@@ -75,6 +71,52 @@ function App() {
     };
   }, []);
 
+  const volumeWasTriggered = useRef<boolean>(false);
+  const volumeSystemChangesRunning = useRef<boolean>(false);
+  const audioSessionIsInactive = useRef<boolean>(false);
+
+  useKeepAwake();
+
+  useEffect(() => {
+    const volumeListener = VolumeManager.addVolumeListener(async () => {
+      if (
+        Platform.OS === "ios" &&
+        !volumeSystemChangesRunning.current &&
+        !volumeWasTriggered.current
+      ) {
+        try {
+          volumeSystemChangesRunning.current = true;
+          await VolumeManager.enableInSilenceMode(true);
+          volumeWasTriggered.current = true;
+        } catch {
+        } finally {
+          volumeSystemChangesRunning.current = false;
+        }
+      }
+    });
+
+    return function blur() {
+      volumeListener.remove();
+    };
+  }, []);
+
+  const onAppStateChange = useCallback(async (status: AppStateStatus) => {
+    // VolumeManager.enable(true);
+    if (status === "active") {
+      if (audioSessionIsInactive.current) {
+        // VolumeManager.setActive(true);
+        audioSessionIsInactive.current = false;
+      }
+    } else if (status === "background") {
+      // VolumeManager.setActive(false);
+      audioSessionIsInactive.current = true;
+    }
+  }, []);
+
+  useAppState({
+    onChange: onAppStateChange,
+  });
+
   // Handle push notifications
   useEffect(() => {
     // a memory warning listener for free up FastImage Cache

apps/expo/app.config.ts

@@ -238,7 +238,7 @@ const expoConfig: ExpoConfig = {
           unstable_networkInspector: true,
         },
         ios: {
-          deploymentTarget: "13.0",
+          deploymentTarget: "13.4",
           unstable_networkInspector: true,
         },
       },

apps/expo/package.json

@@ -74,6 +74,7 @@
     "@walletconnect/core": "2.9.1",
     "@walletconnect/react-native-compat": "^2.9.1",
     "@walletconnect/universal-provider": "2.9.1",
+    "amazon-ivs-react-native-player": "^1.4.1",
     "app": "*",
     "array-to-image": "^1.0.0",
     "assert": "^2.1.0",
@@ -93,7 +94,6 @@
     "events": "^3.3.0",
     "expo": "^49.0.19",
     "expo-application": "~5.4.0",
-    "expo-av": "~13.6.0",
     "expo-blur": "~12.6.0",
     "expo-build-properties": "~0.8.3",
     "expo-clipboard": "~4.5.0",
@@ -106,7 +106,7 @@
     "expo-haptics": "~12.6.0",
     "expo-image": "~1.8.1",
     "expo-image-manipulator": "~11.3.0",
-    "expo-image-picker": "~14.5.0",
+    "expo-image-picker": "~14.6.0",
     "expo-insights": "~0.4.0",
     "expo-linear-gradient": "~12.5.0",
     "expo-linking": "~5.0.2",
@@ -122,6 +122,7 @@
     "expo-status-bar": "~1.7.1",
     "expo-system-ui": "~2.6.0",
     "expo-updates": "~0.18.17",
+    "expo-video-thumbnails": "~7.4.0",
     "expo-web-browser": "~12.5.0",
     "fastestsmallesttextencoderdecoder": "^1.0.22",
     "https-browserify": "~1.0.0",
@@ -173,13 +174,15 @@
     "react-string-replace": "1.1.1",
     "readable-stream": "4.4.2",
     "sentry-expo": "~7.1.1",
+    "sf-symbols-typescript": "^1.0.0",
     "solito": "~3.2.9",
     "stream-browserify": "^3.0.0",
     "string_decoder": "~1.3.0",
     "timers-browserify": "^2.0.12",
     "tinycolor2": "^1.6.0",
     "tldts": "^6.0.12",
     "tty-browserify": "0.0.1",
+    "tus-js-client": "^3.1.1",
     "universal-tooltip": "1.0.2",
     "url": "~0.11.3",
     "use-timer": "^2.0.1",

apps/next/next.config.js

@@ -82,6 +82,7 @@ const nextConfig = {
     "react-native-compressor",
     "expo-sharing",
     "@gorhom/bottom-sheet",
+    "expo-video-thumbnails",
   ],
   webpack: (config, options) => {
     if (!options.isServer) {

apps/next/package.json

@@ -50,6 +50,7 @@
     "date-fns": "^2.30.0",
     "design-system": "*",
     "dom-to-image": "^2.6.0",
+    "expo-av": "~13.6.0",
     "export-from-json": "^1.7.3",
     "fortmatic": "^2.4.0",
     "magic-sdk": "^13.1.0",

apps/next/src/pages/_app.tsx

@@ -42,12 +42,14 @@ import { EnterInviteCodeModalScreen } from "app/screens/creatro-tokens-enter-inv
 import { EditProfileScreen } from "app/screens/edit-profile";
 import { LoginScreen } from "app/screens/login";
 import { OnboardingScreen } from "app/screens/onboarding";
+import { PostCreateSuccessScreen } from "app/screens/post-create-success-screen";
 import { CreatorTokensImportAllowlistScreen } from "app/screens/profile/import-allowlist";
 import { CreatorTokensImportAllowlistSuccessScreen } from "app/screens/profile/imported-allowlist-succeeded";
 import { QRCodeShareScreen } from "app/screens/qr-code-share";
 import { ReportScreen } from "app/screens/report";
 import { AddEmailScreen } from "app/screens/settings-add-email";
 import { VerifyPhoneNumberScreen } from "app/screens/settings-verify-phone-number";
+import { UploadComposerScreen } from "app/screens/upload-composer/upload-composer";
 import { prevRouteRef } from "app/utilities";
 
 import { Toaster } from "design-system/toast";
@@ -198,23 +200,19 @@ function App({ Component, pageProps, router }: AppProps) {
       </Head>
       <AppProviders>
         <Container>
-          <View tw="mx-auto flex-col md:flex-row">
-            <Header
-              canGoBack={
-                router.pathname === "/search" ||
-                router.pathname.split("/").length - 1 >= 2
-              }
-            />
+          <Header
+            canGoBack={
+              router.pathname === "/search" ||
+              router.pathname.split("/").length - 1 >= 2
+            }
+          />
 
-            <View tw="w-full items-center md:ml-auto md:w-[calc(100%-248px)]">
-              <NextNProgress
-                color="#4F46E5"
-                options={{ showSpinner: false }}
-                showOnShallow={false}
-              />
-              <Component {...pageProps} />
-            </View>
-          </View>
+          <NextNProgress
+            color="#4F46E5"
+            options={{ showSpinner: false }}
+            showOnShallow={false}
+          />
+          <Component {...pageProps} />
           <Footer />
         </Container>
 
@@ -243,6 +241,8 @@ function App({ Component, pageProps, router }: AppProps) {
         <CreatorTokenCollectorsScreen />
         <CreatorTokensShareModalScreen />
         <CreatorTokenSocialShareScreen />
+        <PostCreateSuccessScreen />
+        <UploadComposerScreen />
         {/* Login should be the last so it renders on top of others if needed */}
         <LoginScreen />
         <Toaster />
@@ -259,18 +259,18 @@ const inter = Inter({
 const Container = withColorScheme(
   ({ children }: { children: React.ReactNode }) => {
     const fonts = [inter.variable].join(" ");
-    const headerHeight = useHeaderHeight();
-    const bottomBarHeight = usePlatformBottomHeight();
     return (
       <View
-        tw="bg-white dark:bg-black md:bg-gray-100 dark:md:bg-gray-900"
+        tw={
+          "bg-white dark:bg-black md:bg-gray-100 dark:md:bg-gray-900 " + fonts
+        }
         // @ts-ignore
         style={{
-          paddingTop: headerHeight,
-          paddingBottom: `calc(${bottomBarHeight}px + env(safe-area-inset-bottom))`,
+          flex: 1,
+          flexDirection: "row",
         }}
       >
-        <div className={fonts}>{children}</div>
+        {children}
       </View>
     );
   }

apps/next/src/pages/posts/[postId]/index.tsx

@@ -0,0 +1,5 @@
+import { PostDetail } from "app/components/post-detail";
+
+export default function PostDetailPage() {
+  return <PostDetail />;
+}

apps/next/src/pages/posts/[postId]/share.tsx

@@ -0,0 +1 @@
+export { Fragment as default } from "react";

apps/next/src/pages/posts/index.tsx

@@ -0,0 +1,5 @@
+import { Posts } from "app/components/posts";
+
+export default function PostsPage() {
+  return <Posts />;
+}

apps/next/src/styles/styles.css

@@ -172,3 +172,20 @@ textarea:focus-visible {
   overflow: hidden;
   height: 100%;
 }
+
+/* To prevent chromd mobile web from collapsing the address bar */
+/* Start */
+html {
+  overflow: hidden;
+  width: 100%;
+}
+
+body {
+  height: 100%;
+  position: fixed;
+  /* prevent overscroll bounce*/
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  /* iOS velocity scrolling */
+}
+/* End */