leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merge

Browse Source
This commit is contained in:
leon-morival
2025-09-30 14:10:46 +02:00
parent 9ed4cbdf15 e3ced021c3
commit a78f8dcc9c
3 changed files with 83 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App.js
+29 -21
View File
@@ -1,32 +1,29 @@
import React, {
useState,
useCallback,
useEffect,
setGlobal,
useGlobal,
} from "reactn";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import "@expo/metro-runtime";
import { PortalProvider } from "@gorhom/portal";
import { DefaultTheme, NavigationContainer } from "@react-navigation/native";
import { useFonts } from "expo-font";
import * as SplashScreen from "expo-splash-screen";
import { StatusBar } from "expo-status-bar";
import { Platform } from "react-native";
import { NavigationContainer, DefaultTheme } from "@react-navigation/native";
import moment from "moment";
import "moment/locale/fr";
import "@expo/metro-runtime";
import { PortalProvider } from "@gorhom/portal";
import { Platform } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import React, {
setGlobal,
useCallback,
useEffect,
useGlobal,
useState,
} from "reactn";
import { MainStack, Routes } from "./src/navigation";
import { Palette } from "./src/styles";
import { navigationRef, reset } from "./src/navigation/NavigationService";
import initialGlobalState from "./src/config/initialGlobalState";
import { MenuProvider } from "react-native-popup-menu";
import initialGlobalState from "./src/config/initialGlobalState";
import firebase from "./src/config/firebase";
import Providers from "./src/providers";
import AppLayout from "./src/layouts/AppLayout";
import {
Inter_400Regular,
Inter_400Regular_Italic,
@@ -34,10 +31,12 @@ import {
Inter_600SemiBold,
Inter_700Bold,
} from "@expo-google-fonts/inter";
import firebase from "./src/config/firebase";
import Providers from "./src/providers";
import "./src/utils/Sheet";
import { LogBox } from "react-native";
import CommentsBottomSheet from "./src/components/bottomsheets/CommentsBottomSheet";
import "./src/utils/Sheet";
console.disableYellowBox = true;
console.reportErrorsAsExceptions = false;
@@ -120,18 +119,27 @@ const App = () => {
<GestureHandlerRootView
onLayout={onLayoutRootView}
style={[{ flex: 1, backgroundColor: Platform.OS === 'web' ? 'transparent' : Palette.darkPurple }]}
style={[
{
flex: 1,
backgroundColor:
Platform.OS === "web" ? "transparent" : Palette.darkPurple,
},
]}
>
<PortalProvider>
<Providers>
<MenuProvider>
<AppLayout currentUID={currentUID}>
{/* <AppLayout currentUID={currentUID}> */}
<NavigationContainer
theme={{
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: Platform.OS === 'web' ? 'transparent' : Palette.darkPurple,
background:
Platform.OS === "web"
? "transparent"
: Palette.darkPurple,
},
}}
ref={navigationRef}
@@ -145,7 +153,7 @@ const App = () => {
<MainStack />
</NavigationContainer>
<CommentsBottomSheet />
</AppLayout>
{/* </AppLayout> */}
</MenuProvider>
</Providers>
</PortalProvider>
src/layouts/AppLayout.js
-86
View File
@@ -1,86 +0,0 @@
import { Image, View } from "react-native";
import { useGlobal } from "reactn";
import useLayoutType from "../hooks/useLayoutType";
import { background as backgrounds } from "../assets";
import { Style } from "../styles";
// eslint-disable-next-line react/display-name
export default ({ currentUID = null, children }) => {
const { isWeb = false } = useLayoutType();
// Web: full-screen background with a centered content area (30% width)
const [webBackgroundImg] = useGlobal("webBackgroundImg");
const [webLayoutMode] = useGlobal("webLayoutMode");
if (isWeb) {
return (
<View
style={{
flex: 1,
alignItems: "center",
justifyContent: "center",
minHeight: "100svh",
position: "relative",
}}
>
{/* Full-viewport background for web */}
<Image
source={webBackgroundImg || backgrounds.homeBG}
resizeMode="cover"
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
}}
/>
{/* Centered content column (phone-like width) */}
<View
style={{
width:
webLayoutMode === "playbacks-wide"
? "90%"
: isWeb
? "60%"
: "30%",
minWidth: 360,
maxWidth:
webLayoutMode === "playbacks-wide" ? 1440 : isWeb ? 800 : 520,
height: "100svh",
backgroundColor: "transparent",
}}
>
<View style={{ flex: 1 }}>{children}</View>
</View>
</View>
);
}
// Native / non-web: original layout
const sharedPanelStyle = {};
return (
<View
style={{
flex: 1,
flexDirection: "row-reverse",
}}
>
<View
style={{
flex: 2,
position: "relative",
...Style.defaultBorder,
borderTopWidth: 0,
borderBottomWidth: 0,
...sharedPanelStyle,
}}
>
{children}
</View>
</View>
);
};
src/layouts/Page.js
+32 -31
View File
@@ -1,18 +1,17 @@
/* eslint-disable react/display-name */
import { Alert, Image, Pressable, Text, View, Platform } from "react-native";
import { Image, View } from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import { SafeAreaView } from "react-native-safe-area-context";
import React, { setGlobal, useEffect } from "reactn";
import React from "reactn";
import { responsiveHeight } from "../actions/responsiveSizes.js";
import { gutters, Palette } from "../styles";
import BaseHeader from "../components/BaseHeader";
import NavigateHeader from "../components/NavigateHeader";
import { background, icons } from "../assets";
import { isDesktop, isWeb } from "../hooks/useLayoutType.js";
import { useUserData } from "../providers/UserDataProvider.js";
import { BlurView } from "expo-blur";
import { FONT_FAMILY } from "../styles/Fonts";
import ShareBtnWeb from "../components/ShareBtnWeb";
import { gutters } from "../styles";
import { background } from "../assets/index.js";
import { isWeb } from "../hooks/useLayoutType.js";
// import { useUserData } from "../providers/UserDataProvider.js";
export default ({
children,
@@ -36,32 +35,38 @@ export default ({
backgroundImg = background.writingBG,
headerTitleStyle = {},
hideBackButton = false,
shareBtn = false,
width = undefined,
}) => {
const { currentUID } = useUserData();
// const { currentUID } = useUserData();
const PageContainer =
containerType === "SAFE_AREA_VIEW" ? SafeAreaView : View;
const ContentContainer = scrollEnabled ? KeyboardAwareScrollView : View;
// On web, push the background image to a global so AppLayout can render
// a full-screen background behind the phone frame. We avoid rendering
// the per-screen background inside the phone on web to prevent duplication.
useEffect(() => {
if (isWeb && backgroundImg) {
setGlobal({ webBackgroundImg: backgroundImg });
}
}, [isWeb, backgroundImg]);
const handleScroll = () => {};
const computedWidth = width ?? (isWeb ? "60%" : "100%");
return (
<>
{!isWeb && (
<View
style={{
flex: 1,
minHeight: isWeb ? "100svh" : "100%",
position: "relative",
}}
>
<Image
source={backgroundImg}
style={{ width: "100%", height: "100%", position: "absolute" }}
resizeMode="cover"
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
}}
/>
)}
<PageContainer
{...(containerType === "SAFE_AREA_VIEW" ? { edges: ["top"] } : {})}
style={{
@@ -69,10 +74,9 @@ export default ({
paddingTop: isWeb ? gutters / 2 : 0,
padding: gutters,
paddingBottom: 0,
...(isWeb ? { maxHeight: "100vh", width: "100%" } : {}),
...(!currentUID && isDesktop
? { maxWidth: 500, alignSelf: "center" }
: {}),
...(isWeb ? { maxHeight: "100svh" } : {}),
width: computedWidth,
alignSelf: isWeb ? "center" : "auto",
...containerStyle,
}}
>
@@ -109,9 +113,6 @@ export default ({
</PageContainer>
{bottomStickyContent?.()}
{shareBtn && (
<ShareBtnWeb style={{ position: "absolute", top: 24, right: 24 }} />
)}
</>
</View>
);
};