renamed files and directories to get rid of session references

src/screens/video-stack/styles.ts

@@ -1,32 +0,0 @@
-import { StyleSheet } from "react-native";
-
-export const recordStyles = StyleSheet.create({
-	container: {
-		flex: 1,
-		alignItems: "center",
-		justifyContent: "center",
-		padding: 20,
-	},
-	headerText: {
-		fontSize: 22,
-		fontWeight: "500",
-		paddingBottom: "10%",
-	},
-	buttonContainer: {
-		marginTop: 10,
-		flexDirection: "row",
-		justifyContent: "space-between",
-		width: "100%",
-	},
-	buttonStyle: {
-		backgroundColor: "lightblue",
-		paddingVertical: 10,
-		paddingHorizontal: 20,
-		borderRadius: 20,
-		margin: 10,
-	},
-	buttonText: {
-		color: "white",
-		textAlign: "center",
-	},
-});

src/screens/video-stack/video-detail.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import {
+	graph_data_two_measures,
+	line_chart_two_y_data,
+} from "../../../test/mock/charts/mock-data";
+import BarGraph from "../../component/charts/bar-graph/bar-graph";
+import ChartContainer from "../../component/charts/container/chart-container";
+import LineGraph from "../../component/charts/line-graph/line-graph";
+
+export default function VideoScreen() {
+	return (
+		<View style={StyleSheet.absoluteFill}>
+			<ChartContainer data={line_chart_two_y_data} ChartComponent={LineGraph} />
+			<ChartContainer
+				data={graph_data_two_measures}
+				ChartComponent={BarGraph}
+			/>
+		</View>
+	);
+}

src/screens/video-stack/video-details.tsx

@@ -1,94 +0,0 @@
-import React from "react";
-import {
-	ActivityIndicator,
-	Keyboard,
-	Text,
-	TextInput,
-	TouchableOpacity,
-	TouchableWithoutFeedback,
-	View,
-} from "react-native";
-import DropDownPicker from "react-native-dropdown-picker";
-import { useVideoDetails } from "../../component/video/use-video-details";
-import { globalInputStyles } from "../../styles";
-import { recordStyles as styles } from "./styles";
-
-export default function VideoDetails({ navigation, route }): React.JSX.Element {
-	const { mode } = route.params;
-	const {
-		sessionName,
-		setSessionName,
-		gameType,
-		tableSize,
-		handleSubmit,
-		loading,
-	} = useVideoDetails({ params: route.params, navigation });
-
-	const dropDownStyles = {
-		style: globalInputStyles.dropdownStyle,
-	};
-
-	return (
-		<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
-			<View style={styles.container}>
-				<Text style={styles.headerText}>
-					{mode === "start-video" ? "Record Session" : "Save Session"}
-				</Text>
-				<View style={globalInputStyles.dropdownContainer}>
-					<Text style={globalInputStyles.dropdownTitle}>Session Name</Text>
-					<TextInput
-						style={globalInputStyles.input}
-						placeholder="Session name"
-						autoCapitalize="none"
-						value={sessionName}
-						onChangeText={setSessionName}
-					/>
-					<Text style={globalInputStyles.dropdownTitle}>Game Type</Text>
-					<DropDownPicker
-						zIndex={3000}
-						zIndexInverse={1000}
-						open={gameType.isDropdownOpen}
-						value={gameType.value}
-						items={gameType.optionsList}
-						setOpen={gameType.toggleOpen}
-						setValue={gameType.setValue}
-						setItems={gameType.setOptionsList}
-						{...dropDownStyles}
-					/>
-					<Text style={globalInputStyles.dropdownTitle}>Table Size</Text>
-					<DropDownPicker
-						zIndex={2000}
-						zIndexInverse={2000}
-						open={tableSize.isDropdownOpen}
-						value={tableSize.value}
-						items={tableSize.optionsList}
-						setOpen={tableSize.toggleOpen}
-						setValue={tableSize.setValue}
-						setItems={tableSize.setOptionsList}
-						{...dropDownStyles}
-					/>
-				</View>
-
-				<View style={styles.buttonContainer}>
-					{mode === "start-video" && (
-						<TouchableOpacity
-							style={styles.buttonStyle}
-							onPress={() => navigation.goBack()}
-						>
-							<Text style={styles.buttonText}>Back</Text>
-						</TouchableOpacity>
-					)}
-					<TouchableOpacity style={styles.buttonStyle} onPress={handleSubmit}>
-						{loading ? (
-							<ActivityIndicator color="#fff" />
-						) : (
-							<Text style={styles.buttonText}>
-								{mode === "start-video" ? "Next" : "Save"}
-							</Text>
-						)}
-					</TouchableOpacity>
-				</View>
-			</View>
-		</TouchableWithoutFeedback>
-	);
-}

src/screens/video-stack/video-feed.tsx

@@ -0,0 +1,52 @@
+import { StackNavigationProp } from "@react-navigation/stack";
+import React from "react";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+import sampleVideoImage from "../../assets/sample_session.png";
+import VideoCard from "../../component/video-card/video-card";
+
+// Define the types for your navigation stack
+type VideoStackParamList = {
+	Video: undefined; // Add other screens as needed
+};
+
+type VideoFeedNavigationProp = StackNavigationProp<
+	VideoStackParamList,
+	"Video"
+>;
+
+// Define the props for VideoFeed component
+interface VideoFeedProps {
+	navigation: VideoFeedNavigationProp;
+}
+const VideoFeed: React.FC<VideoFeedProps> = ({ navigation }) => {
+	return (
+		<View style={styles.container}>
+			<TouchableOpacity onPress={() => navigation.push("Video")}>
+				<VideoCard
+					playerName="Dean Machine"
+					location="Family Billiards, San Francisco"
+					gameType="Straight Pool"
+					makePercent="34"
+					medianRun="7.3"
+					duration="5:03:10"
+					shotPacing="0:00:26"
+					imageURL={sampleVideoImage}
+					videoName="Dusting off the chalk"
+					lastPlayed="Today at 2:37pm"
+					profileImageURL="https://www.pngall.com/wp-content/uploads/5/Profile-PNG-File.png"
+					locationIconURL="https://www.shutterstock.com/image-vector/blank-map-marker-vector-illustration-260nw-1150566347.jpg"
+				/>
+			</TouchableOpacity>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: "#f0f0f0", // Light gray background
+		alignItems: "center",
+	},
+});
+
+export default VideoFeed;