home disposition

src/components/FeatureCarousel/FeatureCarousel.js

@@ -1,3 +1,4 @@
+import { BlurView } from "expo-blur";
 import React, {
   useCallback,
   useEffect,
@@ -15,9 +16,8 @@ import {
 } from "react-native";
 import { ai } from "../../assets";
 import { getCreationStageStates } from "../../utils/projectStages";
-import PersonaCard from "../cards/PersonaCard/PersonaCard";
 import AnimatedPaginationDot from "../AnimatedPaginationDot/AnimatedPaginationDot";
-import { BlurView } from "expo-blur";
+import PersonaCard from "../cards/PersonaCard/PersonaCard";
 
 const STAGE_CARD_CONTENT = [
   {
@@ -84,14 +84,14 @@ const FeatureCarousel = ({
           description: state?.description ?? item.description,
         };
       }),
-    [stageStatesByKey],
+    [stageStatesByKey]
   );
 
   const { height: windowHeight } = useWindowDimensions();
   const isWeb = Platform.OS === "web";
 
   const [viewportHeight, setViewportHeight] = useState(() =>
-    Math.max(windowHeight, 1),
+    Math.max(windowHeight, 1)
   );
 
   const updateSnapHeight = useCallback((height) => {
@@ -116,7 +116,7 @@ const FeatureCarousel = ({
   const pendingScrollRef = useRef(false);
   const alignTimeoutRef = useRef(null);
   const activeIndexRef = useRef(
-    typeof activeIndex === "number" ? activeIndex : 0,
+    typeof activeIndex === "number" ? activeIndex : 0
   );
   const onActiveIndexChangeRef = useRef(onActiveIndexChange);
   const scrollY = useRef(new Animated.Value(0)).current;
@@ -144,7 +144,7 @@ const FeatureCarousel = ({
       }
       return index;
     },
-    [carouselItems.length],
+    [carouselItems.length]
   );
 
   const clearPendingAlignment = useCallback(() => {
@@ -189,7 +189,7 @@ const FeatureCarousel = ({
         pendingScrollRef.current = false;
       }
     },
-    [clampIndex, isWeb, itemHeight, updateSnapHeight],
+    [clampIndex, isWeb, itemHeight, updateSnapHeight]
   );
 
   useEffect(() => {
@@ -254,7 +254,7 @@ const FeatureCarousel = ({
         scrollToIndex(nextIndex, shouldAnimate, height);
       }
     },
-    [clampIndex, isWeb, itemHeight, scrollToIndex, updateSnapHeight],
+    [clampIndex, isWeb, itemHeight, scrollToIndex, updateSnapHeight]
   );
 
   const handleScrollEnd = useCallback(
@@ -264,7 +264,7 @@ const FeatureCarousel = ({
       const layoutHeight = event?.nativeEvent?.layoutMeasurement?.height;
       alignToOffset(offsetY, layoutHeight);
     },
-    [alignToOffset, clearPendingAlignment],
+    [alignToOffset, clearPendingAlignment]
   );
 
   const handleScroll = useCallback(
@@ -280,7 +280,7 @@ const FeatureCarousel = ({
         alignTimeoutRef.current = null;
       }, 80);
     },
-    [alignToOffset, clearPendingAlignment, isWeb],
+    [alignToOffset, clearPendingAlignment, isWeb]
   );
 
   const animatedScrollHandler = useMemo(
@@ -289,7 +289,7 @@ const FeatureCarousel = ({
         useNativeDriver: false,
         listener: isWeb ? handleScroll : undefined,
       }),
-    [handleScroll, isWeb, scrollY],
+    [handleScroll, isWeb, scrollY]
   );
 
   const handleLayout = useCallback(
@@ -299,7 +299,7 @@ const FeatureCarousel = ({
         updateSnapHeight(layoutHeight);
       }
     },
-    [updateSnapHeight],
+    [updateSnapHeight]
   );
 
   const keyExtractor = useCallback((item) => item.key, []);
@@ -313,7 +313,7 @@ const FeatureCarousel = ({
         height={itemHeight}
       />
     ),
-    [itemHeight],
+    [itemHeight]
   );
 
   const getItemLayout = useCallback(
@@ -322,7 +322,7 @@ const FeatureCarousel = ({
       offset: itemHeight * index,
       index,
     }),
-    [itemHeight],
+    [itemHeight]
   );
 
   const viewabilityConfig = useRef({ viewAreaCoveragePercentThreshold: 60 });
@@ -359,7 +359,7 @@ const FeatureCarousel = ({
       styles.dotsWrapperBase,
       isWeb ? styles.dotsWrapperWeb : styles.dotsWrapperNative,
     ],
-    [isWeb],
+    [isWeb]
   );
 
   return (

src/screens/Home/Home.js

@@ -285,7 +285,7 @@ const Home = () => {
           projectId={menuProject?.id || null}
           extraItems={moreMenuItems}
         />
-        <View style={styles.carouselSection}>
+        <View style={[styles.carouselSection, styles.carouselSectionElevated]}>
           <FeatureCarousel
             selectedProject={currentProject}
             stageStates={stageStates}
@@ -360,6 +360,9 @@ const styles = StyleSheet.create({
   carouselSection: {
     width: "100%",
     flex: 1,
-    marginBottom: 40,
+  },
+  carouselSectionElevated: {
+    marginTop: -100,
+    paddingTop: 80,
   },
 });

src/screens/Studio/SongReady.js

@@ -181,7 +181,7 @@ const SongReady = () => {
           player1?.pause?.();
         } catch {}
       };
-    }, [player0, player1]);
+    }, [player0, player1])
   );
 
   useEffect(() => {
@@ -265,7 +265,7 @@ const SongReady = () => {
                       } catch (e) {
                         console.log(
                           "SongReady pause on seek start",
-                          e?.message,
+                          e?.message
                         );
                       }
                     }}