playback name & username

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,
+  },
 });