last tickets

2025-11-21 21:57:41 +01:00
parent a58b13d09f
commit 471a3177e8
13 changed files with 677 additions and 714 deletions
@@ -0,0 +1,107 @@
+import { BlurView } from "expo-blur";
+import React from "react";
+import { Image, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { Feather } from "@expo/vector-icons";
+import ProfilePicture from "../../../components/ProfilePicture";
+import { icons } from "../../../assets";
+import { Palette } from "../../../styles";
+import { FONT_FAMILY } from "../../../styles/Fonts";
+import { size } from "../../../styles/Style";
+
+const PlaybackActions = ({
+  owner,
+  currentUID,
+  isFollowing,
+  isFollowActionPending,
+  onToggleFollow,
+  likesCount,
+  isLiked,
+  onToggleLike,
+  commentsCount,
+  onCommentsPress,
+  onShare,
+  onReport,
+  onOpenProfile,
+}) => {
+  return (
+    <View style={styles.actionsColumn}>
+      <View style={styles.profileWrapper}>
+        <Pressable onPress={onOpenProfile}>
+          <ProfilePicture
+            uri={owner?.profilePictureURL || null}
+            size={45}
+            imageProps={{ priority: "high" }}
+          />
+        </Pressable>
+        {owner?.id && owner.id !== currentUID && (
+          <Pressable disabled={isFollowActionPending} onPress={onToggleFollow}>
+            <BlurView
+              tint="dark"
+              intensity={Platform.OS !== "ios" ? 10 : 20}
+              style={[
+                styles.followButton,
+                { backgroundColor: isFollowing ? "#FFFFFF1A" : undefined },
+              ]}
+            >
+              <Text style={styles.followText}>
+                {isFollowing ? "Suivi(e)" : "Suivre"}
+              </Text>
+            </BlurView>
+          </Pressable>
+        )}
+      </View>
+      <Pressable onPress={onToggleLike} style={styles.centered}>
+        <Image
+          source={isLiked ? icons.heart : icons.heartOutline}
+          style={size({ size: 26 })}
+          resizeMode="contain"
+        />
+        {!!likesCount && <Text style={styles.countText}>{likesCount}</Text>}
+      </Pressable>
+      <Pressable onPress={onCommentsPress} style={styles.centered}>
+        <Image source={icons.chatBubble} style={size({ size: 26 })} />
+        {!!commentsCount && <Text style={styles.countText}>{commentsCount}</Text>}
+      </Pressable>
+      <Pressable onPress={onShare}>
+        <Image source={icons.share} style={size({ size: 26 })} />
+      </Pressable>
+      <Pressable onPress={onReport} style={styles.centered}>
+        <Feather name="flag" size={26} color={Palette.white} />
+        <Text style={styles.countText}>Signaler</Text>
+      </Pressable>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  actionsColumn: {
+    alignSelf: "flex-end",
+    alignItems: "center",
+    gap: 20,
+    paddingHorizontal: 13,
+  },
+  profileWrapper: { gap: 6, alignItems: "center" },
+  followButton: {
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: Palette.white,
+    overflow: "hidden",
+  },
+  followText: {
+    fontSize: 13,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterMedium,
+  },
+  centered: { alignItems: "center" },
+  countText: {
+    color: Palette.white,
+    fontSize: 11,
+    marginTop: 4,
+    fontFamily: FONT_FAMILY.InterMedium,
+    textAlign: "center",
+  },
+});
+
+export default PlaybackActions;