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
-      headerType="NONE"
-      width="100%"
-      containerStyle={{ padding: 0, margin: 0 }}
-    >
-      <View style={styles.screen}>
-        {activeVideoUrl ? (
-          <View pointerEvents="none" style={styles.backgroundVideoWrapper}>
-            <video
-              ref={backgroundVideoRef}
-              key={activeVideoUrl}
-              src={activeVideoUrl}
-              autoPlay
-              muted
-              loop
-              playsInline
-              preload="auto"
-              style={{
-                position: "absolute",
-                inset: 0,
-                width: "100%",
-                height: "100%",
-                objectFit: "cover",
-                filter: "blur(28px) saturate(120%) brightness(55%)",
-                transform: "scale(1.1)",
-              }}
+    <View style={styles.screen}>
+      {activeVideoUrl ? (
+        <View pointerEvents="none" style={styles.backgroundVideoWrapper}>
+          <video
+            ref={backgroundVideoRef}
+            key={activeVideoUrl}
+            src={activeVideoUrl}
+            autoPlay
+            muted
+            loop
+            playsInline
+            preload="auto"
+            style={{
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              filter: "blur(28px) saturate(120%) brightness(55%)",
+              transform: "scale(1.1)",
+            }}
+          />
+          <View style={styles.backgroundOverlay} />
+        </View>
+      ) : 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
-          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>
-          )}
-          pagingEnabled
-          showsVerticalScrollIndicator={false}
-          onMomentumScrollEnd={onMomentumScrollEnd}
-          getItemLayout={getItemLayout}
-          initialNumToRender={3}
-          windowSize={5}
-          removeClippedSubviews
-          onScroll={onScroll}
-          scrollEventThrottle={16}
-        />
-      </View>
-    </Page>
+        )}
+        pagingEnabled
+        showsVerticalScrollIndicator={false}
+        onMomentumScrollEnd={onMomentumScrollEnd}
+        getItemLayout={getItemLayout}
+        initialNumToRender={3}
+        windowSize={5}
+        removeClippedSubviews
+        onScroll={onScroll}
+        scrollEventThrottle={16}
+      />
+    </View>
+    // </Page>
   );
 };