import React, { useState, useRef, useEffect } from 'react'; import { View, StyleSheet, Text, Dimensions } from 'react-native'; import { Video, ResizeMode } from 'expo-av'; import DateSelector from '../components/DateSelector'; const { height } = Dimensions.get('window'); const CCTVPlaybackScreen = () => { const video = useRef(null); const [status, setStatus] = useState({}); const [selectedDate, setSelectedDate] = useState(new Date()); const [videoSource, setVideoSource] = useState(null); // Placeholder function to get video URL based on date // In a real app, this would fetch the URL from a server const getVideoUrlForDate = (date) => { console.log("Fetching video for date:", date.toDateString()); // Replace with your actual logic to get video URL // Example: return `https://your-cctv-server.com/video?date=${date.toISOString()}`; // Using a placeholder video for demonstration return 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4'; }; useEffect(() => { const url = getVideoUrlForDate(selectedDate); setVideoSource({ uri: url }); }, [selectedDate]); const handleDateChange = (date) => { setSelectedDate(date); // Optionally, stop the current video and load the new one if (video.current) { video.current.stopAsync(); video.current.unloadAsync(); // Unload previous source // Loading the new source is handled by the useEffect hook reacting to videoSource change } }; return ( {videoSource ? (

); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f0f0f0', }, videoContainer: { height: height * 0.5, // Top 50% backgroundColor: '#000', justifyContent: 'center', alignItems: 'center', }, video: { width: '100%', height: '100%', }, placeholder: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#333', width: '100%', height: '100%', }, dateSelectorContainer: { height: height * 0.5, // Bottom 50% backgroundColor: '#fff', justifyContent: 'center', // Center the DateSelector vertically }, }); export default CCTVPlaybackScreen; import React, { useState, useRef, useEffect } from 'react'; import { View, Text, ScrollView, TouchableOpacity, StyleSheet, Dimensions } from 'react-native'; const { width } = Dimensions.get('window'); const ITEM_WIDTH = 80; // Width of each date item const ITEM_MARGIN = 10; // Margin between items const DateSelector = ({ onDateChange, initialDate, daysToShow = 30 }) => { const [selectedDate, setSelectedDate] = useState(initialDate || new Date()); const [dates, setDates] = useState([]); const scrollViewRef = useRef(null); useEffect(() => { const generateDates = (centerDate, count) => { const result = []; const halfCount = Math.floor(count / 2); for (let i = -halfCount; i <= halfCount; i++) { const date = new Date(centerDate); date.setDate(centerDate.getDate() + i); date.setHours(0, 0, 0, 0); // Normalize time part result.push(date); } return result; }; setDates(generateDates(selectedDate, daysToShow)); }, [daysToShow]); // Regenerate dates only if daysToShow changes useEffect(() => { // Find the index of the initial/selected date const initialIndex = dates.findIndex( (d) => d.toDateString() === selectedDate.toDateString() ); // Scroll to the initial/selected date when dates are loaded or selectedDate changes if (scrollViewRef.current && initialIndex !== -1) { // Calculate the offset to center the item const scrollToX = initialIndex * (ITEM_WIDTH + ITEM_MARGIN * 2) + (ITEM_WIDTH + ITEM_MARGIN * 2) / 2 - width / 2; // Use setTimeout to ensure layout is complete before scrolling setTimeout(() => { scrollViewRef.current?.scrollTo({ x: Math.max(0, scrollToX), animated: true }); }, 100); // Small delay } }, [dates, selectedDate]); // Depend on dates and selectedDate const handlePress = (date) => { setSelectedDate(date); onDateChange(date); // Optional: Regenerate dates centered around the new selected date // setDates(generateDates(date, daysToShow)); }; const formatDate = (date) => { const day = date.getDate(); const month = date.toLocaleDateString('en-US', { month: 'short' }); const weekday = date.toLocaleDateString('en-US', { weekday: 'short' }); return { day, month, weekday }; }; return ( {dates.map((date, index) => { const isSelected = date.toDateString() === selectedDate.toDateString(); const { day, month, weekday } = formatDate(date); return ( handlePress(date)} activeOpacity={0.7} > {weekday} {day} {month} ); })} ); }; const styles = StyleSheet.create({ container: { height: 100, // Fixed height for the selector justifyContent: 'center', alignItems: 'center', backgroundColor: '#eee', // Light background for the selector area paddingVertical: 10, }, scrollViewContent: { alignItems: 'center', // Vertically center items in the scroll view paddingHorizontal: (width - ITEM_WIDTH) / 2 - ITEM_MARGIN, // Center the list initially }, dateItem: { width: ITEM_WIDTH, height: 80, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff', borderRadius: 8, marginHorizontal: ITEM_MARGIN, paddingVertical: 10, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.1, shadowRadius: 2, elevation: 2, }, selectedDateItem: { backgroundColor: '#007AFF', // Highlight color for selected date elevation: 4, }, dateText: { fontSize: 14, color: '#333', }, weekdayText: { fontSize: 12, fontWeight: '500', color: '#666', marginBottom: 4, }, dayText: { fontSize: 20, fontWeight: 'bold', marginBottom: 2, }, monthText: { fontSize: 12, fontWeight: '500', color: '#666', }, selectedText: { color: '#fff', // White text for selected item }, }); export default DateSelector; import React from 'react'; import { SafeAreaView, StyleSheet, StatusBar } from 'react-native'; import CCTVPlaybackScreen from './src/screens/CCTVPlaybackScreen'; export default function App() { return ( <> ); } const styles = StyleSheet.create({ safeArea: { flex: 1, }, }); { "name": "cctv-playback-app", "version": "1.0.0", "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "expo": "~51.0.8", "expo-status-bar": "~1.12.1", "react": "18.2.0", "react-native": "0.74.1", "expo-av": "~14.0.5" }, "devDependencies": { "@babel/core": "^7.20.0" }, "private": true } module.exports = function(api) { api.cache(true); return { presets: ['babel-preset-expo'], }; }; { "expo": { "name": "CCTV Playback", "slug": "cctv-playback", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", "userInterfaceStyle": "light", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#ffffff" }, "ios": { "supportsTablet": true, "infoPlist": { "NSAppTransportSecurity": { "NSAllowsArbitraryLoads": true } } }, "android": { "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", "backgroundColor": "#ffffff" }, "permissions": [ "android.permission.INTERNET" ] }, "web": { "favicon": "./assets/favicon.png" }, "plugins": [ "expo-av" ], "assetBundlePatterns": [ "**/*" ] } } placeholder content for icon.png placeholder content for splash.png placeholder content for adaptive-icon.png