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}

src/screens/Playbacks/Playbacks.web.js

@@ -1,9 +1,17 @@
 import { useIsFocused, useRoute } from "@react-navigation/native";
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { FlatList, StyleSheet, View, useWindowDimensions } from "react-native";
+import {
+  FlatList,
+  StyleSheet,
+  Text,
+  View,
+  useWindowDimensions,
+} from "react-native";
 import { projectsRef } from "../../config/firebase";
 import useDataFromRef from "../../hooks/useDataFromRef";
 import { useUser } from "../../providers/UserDataProvider";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
 import PlaybackItem from "./components/PlaybackItem.web";
 
 const Playbacks = () => {
@@ -25,6 +33,12 @@ const Playbacks = () => {
 
   const activePlayback = playbacks?.[activeIndex] || null;
   const activeVideoUrl = activePlayback?.playbackUrl || null;
+  const activeTitle =
+    typeof activePlayback?.title === "string"
+      ? activePlayback.title.trim()
+      : "";
+
+  const activeCreatorName = activePlayback?.userName;
   const backgroundVideoRef = useRef(null);
   const lastActiveIndexRef = useRef(0);
   const backgroundSeekPendingRef = useRef(false);
@@ -207,6 +221,22 @@ const Playbacks = () => {
 
   return (
     <View style={styles.screen}>
+      {(activeTitle || activeCreatorName) && (
+        <View pointerEvents="none" style={styles.topOverlayContainer}>
+          <View style={styles.topOverlayContent}>
+            {activeTitle ? (
+              <Text numberOfLines={1} style={styles.topOverlayTitle}>
+                {activeTitle}
+              </Text>
+            ) : null}
+            {activeCreatorName ? (
+              <Text numberOfLines={1} style={styles.topOverlaySubtitle}>
+                {activeCreatorName}
+              </Text>
+            ) : null}
+          </View>
+        </View>
+      )}
       {activeVideoUrl ? (
         <View pointerEvents="none" style={styles.backgroundVideoWrapper}>
           <video
@@ -285,4 +315,30 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFillObject,
     backgroundColor: "rgba(2, 2, 2, 0.35)",
   },
+  topOverlayContainer: {
+    position: "absolute",
+    top: 32,
+    left: 24,
+    right: 24,
+    zIndex: 10,
+  },
+  topOverlayContent: {
+    alignSelf: "flex-start",
+    paddingVertical: 12,
+    paddingHorizontal: 18,
+    borderRadius: 18,
+    backgroundColor: "rgba(0,0,0,0.45)",
+    gap: 4,
+  },
+  topOverlayTitle: {
+    color: Palette.white,
+    fontSize: 20,
+    fontFamily: FONT_FAMILY.InterSemiBold,
+  },
+  topOverlaySubtitle: {
+    color: Palette.white,
+    fontSize: 15,
+    fontFamily: FONT_FAMILY.InterMedium,
+    opacity: 0.9,
+  },
 });