fix playbacks view

src/screens/Playbacks/Playbacks.web.js

@@ -3,7 +3,6 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import { FlatList, StyleSheet, View, useWindowDimensions } from "react-native";
 import { projectsRef } from "../../config/firebase";
 import useDataFromRef from "../../hooks/useDataFromRef";
-import Page from "../../layouts/Page";
 import { useUser } from "../../providers/UserDataProvider";
 import PlaybackItem from "./components/PlaybackItem.web";
 
@@ -207,63 +206,58 @@ const Playbacks = () => {
   );
 
   return (
-    <Page
+    <View style={styles.screen}>
-      headerType="NONE"
+      {activeVideoUrl ? (
-      width="100%"
+        <View pointerEvents="none" style={styles.backgroundVideoWrapper}>
-      containerStyle={{ padding: 0, margin: 0 }}
+          <video
-    >
+            ref={backgroundVideoRef}
-      <View style={styles.screen}>
+            key={activeVideoUrl}
-        {activeVideoUrl ? (
+            src={activeVideoUrl}
-          <View pointerEvents="none" style={styles.backgroundVideoWrapper}>
+            autoPlay
-            <video
+            muted
-              ref={backgroundVideoRef}
+            loop
-              key={activeVideoUrl}
+            playsInline
-              src={activeVideoUrl}
+            preload="auto"
-              autoPlay
+            style={{
-              muted
+              position: "absolute",
-              loop
+              inset: 0,
-              playsInline
+              width: "100%",
-              preload="auto"
+              height: "100%",
-              style={{
+              objectFit: "cover",
-                position: "absolute",
+              filter: "blur(28px) saturate(120%) brightness(55%)",
-                inset: 0,
+              transform: "scale(1.1)",
-                width: "100%",
+            }}
-                height: "100%",
+          />
-                objectFit: "cover",
+          <View style={styles.backgroundOverlay} />
-                filter: "blur(28px) saturate(120%) brightness(55%)",
+        </View>
-                transform: "scale(1.1)",
+      ) : null}
-              }}
+      <FlatList
+        ref={listRef}
+        data={playbacks}
+        keyExtractor={(item, index) => String(item?.id || index)}
+        renderItem={({ item, index }) => (
+          <View style={{ width: "100%", height: windowHeight }}>
+            <PlaybackItem
+              item={item}
+              userCache={userCache}
+              getUserByUid={getUserByUid}
+              isActive={isFocused && index === activeIndex}
+              onBackgroundSync={syncBackgroundVideo}
             />
-            <View style={styles.backgroundOverlay} />
           </View>
-        ) : null}
+        )}
-        <FlatList
+        pagingEnabled
-          ref={listRef}
+        showsVerticalScrollIndicator={false}
-          data={playbacks}
+        onMomentumScrollEnd={onMomentumScrollEnd}
-          keyExtractor={(item, index) => String(item?.id || index)}
+        getItemLayout={getItemLayout}
-          renderItem={({ item, index }) => (
+        initialNumToRender={3}
-            <View style={{ width: "100%", height: windowHeight }}>
+        windowSize={5}
-              <PlaybackItem
+        removeClippedSubviews
-                item={item}
+        onScroll={onScroll}
-                userCache={userCache}
+        scrollEventThrottle={16}
-                getUserByUid={getUserByUid}
+      />
-                isActive={isFocused && index === activeIndex}
+    </View>
-                onBackgroundSync={syncBackgroundVideo}
+    // </Page>
-              />
-            </View>
-          )}
-          pagingEnabled
-          showsVerticalScrollIndicator={false}
-          onMomentumScrollEnd={onMomentumScrollEnd}
-          getItemLayout={getItemLayout}
-          initialNumToRender={3}
-          windowSize={5}
-          removeClippedSubviews
-          onScroll={onScroll}
-          scrollEventThrottle={16}
-        />
-      </View>
-    </Page>
   );
 };