playback name & username

src/screens/Playbacks/Playbacks.js

@@ -111,6 +111,10 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
     setIsLiked(currentUID ? lb.includes(currentUID) : false);
   }, [item?.likedBy, currentUID]);
 
+  const projectTitle = typeof item?.title === "string" ? item.title.trim() : "";
+
+  const creatorName = item?.userName;
+
   const audioPlayer = useAudioPlayer(audioSource || undefined);
   const videoPlayer = useVideoPlayer(videoUrl || null, (p) => {
     p.loop = false;
@@ -206,6 +210,57 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
         backgroundColor: "black",
       }}
     >
+      {(projectTitle || creatorName) && (
+        <View
+          pointerEvents="none"
+          style={{
+            position: "absolute",
+            top: Platform.select({ ios: 64, default: 48 }),
+            left: 24,
+            right: 24,
+            zIndex: 12,
+          }}
+        >
+          <BlurView
+            tint="dark"
+            intensity={Platform.OS !== "ios" ? 20 : 30}
+            style={{
+              paddingHorizontal: 16,
+              paddingVertical: 12,
+              borderRadius: 18,
+              backgroundColor: "rgba(0,0,0,0.45)",
+              gap: 4,
+              overflow: "hidden",
+            }}
+          >
+            {projectTitle ? (
+              <Text
+                numberOfLines={1}
+                style={{
+                  color: Palette.white,
+                  fontSize: 18,
+                  fontFamily: FONT_FAMILY.InterSemiBold,
+                }}
+              >
+                {projectTitle}
+              </Text>
+            ) : null}
+            {creatorName ? (
+              <Text
+                numberOfLines={1}
+                style={{
+                  color: Palette.white,
+                  fontSize: 14,
+                  fontFamily: FONT_FAMILY.InterMedium,
+                  opacity: 0.9,
+                }}
+              >
+                {creatorName}
+              </Text>
+            ) : null}
+          </BlurView>
+        </View>
+      )}
       {!!videoUrl ? (
         <VideoView
           player={videoPlayer}