bottom tab

2025-09-30 10:26:36 +02:00
parent 542fa23a98
commit 27fab69997
3 changed files with 85 additions and 89 deletions
@@ -1,34 +1,20 @@
-import React, { useGlobal } from "reactn";
-import { StyleSheet } from "react-native";
-import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { Motion } from "@legendapp/motion";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import React from "reactn";

-import { responsiveHeight } from "../actions/responsiveSizes.js";
-
-import useLayoutType from "../hooks/useLayoutType.js";
-
-import { Routes } from "./Routes";
 import { Palette } from "../styles";
+import { Routes } from "./Routes";

 import { tabs } from "../assets";

 import TabBar from "./TabBar";

-import HomeStack from "./HomeStack";
-import ChatStack from "./ChatStack";
-import SettingsStack from "./SettingsStack";
-import Library from "../screens/Library/Library.js";
-import Profile from "../screens/Profile/Profile.js";
+import { Platform } from "react-native";
 import HitParade from "../screens/HitParade/HitParade.js";
+import Library from "../screens/Library/Library.js";
 import Playbacks from "../screens/Playbacks.js";
-
-const bottomTabStyles = StyleSheet.create({
-  icon: {
-    width: responsiveHeight(5),
-    height: responsiveHeight(5),
-    resizeMode: "contain",
-  },
-});
+import Profile from "../screens/Profile/Profile.js";
+import HomeStack from "./HomeStack";

 const BottomTab = createBottomTabNavigator();

@@ -40,10 +26,11 @@ export const BottomTabScreen = () => {
        tintColor: focused ? Palette.white : "#8B8883",
      }}
      style={[
-        bottomTabStyles.icon,
        {
-          width: 24,
-          height: 24,
+          width: Platform.OS === "web" ? 30 : 24,
+          height: Platform.OS === "web" ? 30 : 24,
+          marginBottom: Platform.OS === "web" ? 13 : 0,
+          marginTop: Platform.OS === "web" ? 13 : 0,
        },
      ]}
      source={icon}
@@ -1,13 +1,10 @@
-import React from "react";
-import { View, TouchableOpacity, Text } from "react-native";
 import * as Haptics from "expo-haptics";
+import React from "react";
+import { Text, TouchableOpacity, View } from "react-native";

-import { gutters, Palette, Style } from "../styles";
-import useLayoutType from "../hooks/useLayoutType";
-import BorderGradient from "../components/BorderGradient/BorderGradient";
-import { colors } from "react-native-swiper-flatlist/src/themes";
-import { BlurView } from "expo-blur";
 import ItemContainer from "../components/ItemContainer/ItemContainer";
+import useLayoutType from "../hooks/useLayoutType";
+import { gutters, Palette, Style } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";

 const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
@@ -32,7 +29,7 @@ const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
          end: { x: 1, y: 0 },
        }}
        style={{
-          height: 65,
+          height: isWeb ? 80 : 65,
        }}
      >
        <View
@@ -97,7 +94,7 @@ const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
                  {options?.tabBarIcon({ focused: isFocused })}
                  <Text
                    style={{
-                      fontSize: 10,
+                      fontSize: isWeb ? 14 : 10,
                      color: isFocused ? Palette.white : "#8B8883",
                      fontFamily: FONT_FAMILY.HelveticaNeueRegular,
                      marginTop: 2,
@@ -1,33 +1,33 @@
-import { useIsFocused, useRoute } from '@react-navigation/native';
-import { useAudioPlayer } from 'expo-audio';
-import { BlurView } from 'expo-blur';
-import { VideoView, useVideoPlayer } from 'expo-video';
+import { useIsFocused, useRoute } from "@react-navigation/native";
+import { useAudioPlayer } from "expo-audio";
+import { BlurView } from "expo-blur";
+import { VideoView, useVideoPlayer } from "expo-video";
 import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
-} from 'react';
-import { Image, Platform, Pressable, Share, Text, View } from 'react-native';
-import Carousel from 'react-native-reanimated-carousel';
-import { responsiveHeight } from 'react-native-responsive-dimensions';
-import { icons, img } from '../assets';
-import { openComments } from '../components/bottomsheets/CommentsBottomSheet';
-import KaraokeLyrics from '../components/KaraokeLyrics';
+} from "react";
+import { Image, Platform, Pressable, Share, Text, View } from "react-native";
+import Carousel from "react-native-reanimated-carousel";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { icons, img } from "../assets";
+import { openComments } from "../components/bottomsheets/CommentsBottomSheet";
+import KaraokeLyrics from "../components/KaraokeLyrics";
 import {
  arrayRemove,
  arrayUnion,
  projectsRef,
  usersRef,
-} from '../config/firebase';
-import useDataFromRef from '../hooks/useDataFromRef';
-import { Routes } from '../navigation';
-import { navigate } from '../navigation/NavigationService';
-import { useUser } from '../providers/UserDataProvider';
-import { Palette } from '../styles';
-import { FONT_FAMILY } from '../styles/Fonts';
-import { size } from '../styles/Style';
+} from "../config/firebase";
+import useDataFromRef from "../hooks/useDataFromRef";
+import { Routes } from "../navigation";
+import { navigate } from "../navigation/NavigationService";
+import { useUser } from "../providers/UserDataProvider";
+import { Palette } from "../styles";
+import { FONT_FAMILY } from "../styles/Fonts";
+import { size } from "../styles/Style";

 const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
  const { currentUID, followUser, unfollowUser } = useUser() || {};
@@ -176,7 +176,7 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {

    const arr = Array.isArray(ts?.alignedWords) ? ts.alignedWords : [];
    return arr.map((w) => ({
-      word: String(w?.word ?? ''),
+      word: String(w?.word ?? ""),
      startS: Number(w?.startS ?? 0),
      endS: Number(w?.endS ?? 0),
    }));
@@ -202,43 +202,47 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
    <View
      style={{
        height: responsiveHeight(100),
-        position: 'relative',
-        backgroundColor: 'black',
-      }}>
+        position: "relative",
+        backgroundColor: "black",
+      }}
+    >
      {!!videoUrl ? (
        <VideoView
          player={videoPlayer}
          nativeControls={false}
          contentFit="cover"
-          style={{ width: '100%', height: '100%' }}
+          style={{ width: "100%", height: "100%" }}
        />
      ) : (
        <Image
          source={img.placeholder3}
-          style={{ width: '100%', height: '100%' }}
+          style={{ width: "100%", height: "100%" }}
        />
      )}

      {/* Right side actions */}
      <View
        style={{
-          position: 'absolute',
-          width: '100%',
+          position: "absolute",
+          width: "100%",
          bottom: 130,
          gap: 18,
-        }}>
+        }}
+      >
        <View
          style={{
-            alignSelf: 'flex-end',
-            alignItems: 'center',
+            alignSelf: "flex-end",
+            alignItems: "center",
            gap: 20,
            paddingHorizontal: 13,
-          }}>
-          <View style={{ gap: 6, alignItems: 'center' }}>
+          }}
+        >
+          <View style={{ gap: 6, alignItems: "center" }}>
            <Pressable
              onPress={() => {
                navigate(Routes.SingerProfile, { userId: item?.userId });
-              }}>
+              }}
+            >
              {owner?.profilePictureURL ? (
                <Image
                  source={{ uri: owner.profilePictureURL }}
@@ -279,18 +283,19 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
                    // rollback on failure
                    setIsFollowing((v) => !v);
                  }
-                }}>
+                }}
+              >
                <BlurView
                  tint="dark"
-                  intensity={Platform.OS !== 'ios' ? 10 : 20}
+                  intensity={Platform.OS !== "ios" ? 10 : 20}
                  style={{
                    paddingVertical: 6,
                    paddingHorizontal: 12,
                    borderRadius: 12,
                    borderWidth: 1,
                    borderColor: Palette.white,
-                    overflow: 'hidden',
-                    backgroundColor: isFollowing ? '#FFFFFF1A' : undefined,
+                    overflow: "hidden",
+                    backgroundColor: isFollowing ? "#FFFFFF1A" : undefined,
                  }}
                  // experimentalBlurMethod={
                  //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
@@ -301,8 +306,9 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
                      fontSize: 13,
                      color: Palette.white,
                      fontFamily: FONT_FAMILY.InterMedium,
-                    }}>
-                    {isFollowing ? 'Ne plus suivre' : 'Suivre'}
+                    }}
+                  >
+                    {isFollowing ? "Ne plus suivre" : "Suivre"}
                  </Text>
                </BlurView>
              </Pressable>
@@ -332,7 +338,8 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
                setLikesCount((c) => (isLiked ? c + 1 : Math.max(0, c - 1)));
              }
            }}
-            style={{ alignItems: 'center' }}>
+            style={{ alignItems: "center" }}
+          >
            <Image
              source={isLiked ? icons.heart : icons.heartOutline}
              style={size({ size: 26 })}
@@ -345,15 +352,17 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
                  fontSize: 11,
                  marginTop: 4,
                  fontFamily: FONT_FAMILY.InterMedium,
-                  textAlign: 'center',
-                }}>
+                  textAlign: "center",
+                }}
+              >
                {likesCount}
              </Text>
            )}
          </Pressable>
          <Pressable
            onPress={() => item?.id && openComments(item.id)}
-            style={{ alignItems: 'center' }}>
+            style={{ alignItems: "center" }}
+          >
            <Image source={icons.chatBubble} style={size({ size: 26 })} />
            {!!commentsCount && (
              <Text
@@ -362,8 +371,9 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
                  fontSize: 11,
                  marginTop: 4,
                  fontFamily: FONT_FAMILY.InterMedium,
-                  textAlign: 'center',
-                }}>
+                  textAlign: "center",
+                }}
+              >
                {commentsCount}
              </Text>
            )}
@@ -371,8 +381,8 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
          <Pressable
            onPress={async () => {
              try {
-                const url = item?.playbackUrl || '';
-                const title = item?.title || 'Partager';
+                const url = item?.playbackUrl || "";
+                const title = item?.title || "Partager";
                const base = item?.title
                  ? `Découvre « ${item.title} » sur MusicLand`
                  : `Découvre ce playback sur MusicLand`;
@@ -385,20 +395,21 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
                  })
                );
              } catch (e) {}
-            }}>
+            }}
+          >
            <Image source={icons.share} style={size({ size: 26 })} />
          </Pressable>
        </View>
        <View style={{ paddingHorizontal: 28 }}>
          <BlurView
            tint="dark"
-            intensity={Platform.OS !== 'ios' ? 10 : 20}
+            intensity={Platform.OS !== "ios" ? 10 : 20}
            style={{
              paddingHorizontal: 14,
              paddingVertical: 8,
              borderRadius: 20,
              backgroundColor: Palette.glass,
-              overflow: 'hidden',
+              overflow: "hidden",
            }}
            // experimentalBlurMethod={
            //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
@@ -415,8 +426,9 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
                  fontSize: 12,
                  color: Palette.white,
                  fontFamily: FONT_FAMILY.InterRegular,
-                }}>
-                {item?.title || 'Description chanson'}
+                }}
+              >
+                {item?.title || "Description chanson"}
              </Text>
            )}
          </BlurView>
@@ -436,7 +448,7 @@ const Playbacks = () => {
  const { getUserByUid } = useUser() || {};
  const isFocused = useIsFocused();
  const { data: playbacks = [], loadMore } = useDataFromRef({
-    ref: projectsRef.where('playbackUrl', '!=', null),
+    ref: projectsRef.where("playbackUrl", "!=", null),
    simpleRef: false,
    listener: false,
    usePagination: true,
@@ -475,7 +487,7 @@ const Playbacks = () => {
  }, [focusProjectId, playbacks, loadMore]);

  return (
-    <View style={{ flex: 1, backgroundColor: 'black' }}>
+    <View style={{ flex: 1, backgroundColor: "black" }}>
      <Carousel
        ref={carouselRef}
        data={playbacks}