Merge pull request 'renamed files to be consistent with naming paradigm of videos and recordings (removing references to sessions)' (#131) from rename-session-as-video into master

Reviewed-on: railbird/railbird-mobile#131
Reviewed-by: Kat Huang <kkathuang@gmail.com>

src/component/recording/use-recording-details.tsx

@@ -118,7 +118,7 @@ export const useVideoDetails = ({
 		}
 
 		// Navigate if starting flow, terminateUploadStream if completing flow
-		if (mode === "start-video") {
+		if (mode === "start-recording") {
 			const params: VideoFlowInputParams = {
 				sessionName,
 				gameType: gameType.value,

src/component/video-card/video-card-footer.tsx

@@ -1,26 +1,26 @@
 import React from "react";
 import { StyleSheet, Text, View } from "react-native";
 
-const SessionCardFooter = ({ sessionName, lastPlayed }) => {
+const VideoCardFooter = ({ videoName, lastPlayed }) => {
 	return (
 		<View>
-			<Text style={styles.sessionName}>{sessionName}</Text>
+			<Text style={styles.videoName}>{videoName}</Text>
-			<Text style={styles.sessionDatetime}>{lastPlayed}</Text>
+			<Text style={styles.videoDatetime}>{lastPlayed}</Text>
 		</View>
 	);
 };
 
 const styles = StyleSheet.create({
-	sessionName: {
+	videoName: {
 		fontSize: 18,
 		paddingTop: 5,
 		marginHorizontal: 16,
 	},
-	sessionDatetime: {
+	videoDatetime: {
 		fontSize: 10,
 		color: "#A3A3A3",
 		marginHorizontal: 16,
 	},
 });
 
-export default SessionCardFooter;
+export default VideoCardFooter;

src/component/video-card/video-card-header.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Image, StyleSheet, Text, View } from "react-native";
 
-const SessionCardHeader = ({
+const VideoCardHeader = ({
 	playerName,
 	location,
 	gameType,
@@ -65,4 +65,4 @@ const styles = StyleSheet.create({
 	},
 });
 
-export default SessionCardHeader;
+export default VideoCardHeader;

src/component/video-card/video-card-stat.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { StyleSheet, Text, View } from "react-native";
 
-const SessionCardStat = ({ sessionStat, displayName }) => {
+const VideoCardStat = ({ videoStat, displayName }) => {
 	return (
 		<View>
 			<Text style={styles.statItem}>{displayName}</Text>
-			<Text style={styles.statValue}>{sessionStat}</Text>
+			<Text style={styles.statValue}>{videoStat}</Text>
 		</View>
 	);
 };
@@ -22,4 +22,4 @@ const styles = StyleSheet.create({
 	},
 });
 
-export default SessionCardStat;
+export default VideoCardStat;

src/component/video-card/video-card-stats-row-container.tsx

@@ -1,27 +1,27 @@
 import React from "react";
 import { StyleSheet, View } from "react-native";
-import SessionCardStat from "./session-card-stat";
+import VideoCardStat from "./video-card-stat";
 
-const SessionCardStatsRowContainer = ({
+const VideoCardStatsRowContainer = ({
 	makePercent,
 	medianRun,
 	duration,
 	shotPacing,
 }) => {
 	const stats = [
-		{ displayName: "Make Percent", sessionStat: makePercent },
+		{ displayName: "Make Percent", videoStat: makePercent },
-		{ displayName: "Median Run", sessionStat: medianRun },
+		{ displayName: "Median Run", videoStat: medianRun },
-		{ displayName: "Time Played", sessionStat: duration },
+		{ displayName: "Time Played", videoStat: duration },
-		{ displayName: "Shot Pacing", sessionStat: shotPacing },
+		{ displayName: "Shot Pacing", videoStat: shotPacing },
 	];
 
 	return (
 		<View style={styles.statsContainer}>
 			{stats.map((stat, index) => (
 				<React.Fragment key={index}>
-					<SessionCardStat
+					<VideoCardStat
 						displayName={stat.displayName}
-						sessionStat={stat.sessionStat}
+						videoStat={stat.videoStat}
 					/>
 					{index < stats.length - 1 && <View style={styles.verticalSpacer} />}
 				</React.Fragment>
@@ -45,4 +45,4 @@ const styles = StyleSheet.create({
 	},
 });
 
-export default SessionCardStatsRowContainer;
+export default VideoCardStatsRowContainer;

src/component/video-card/video-card.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { Image, StyleSheet, View } from "react-native";
-import SessionCardFooter from "./session-card-footer";
+import VideoCardFooter from "./video-card-footer";
-import SessionCardHeader from "./session-card-header";
+import VideoCardHeader from "./video-card-header";
-import SessionCardStatsRowContainer from "./session-card-stats-row-container";
+import VideoCardStatsRowContainer from "./video-card-stats-row-container";
 
-const SessionCard = ({
+const VideoCard = ({
 	playerName,
 	location,
 	gameType,
@@ -12,7 +12,7 @@ const SessionCard = ({
 	medianRun,
 	duration,
 	shotPacing,
-	sessionName,
+	videoName,
 	lastPlayed,
 	imageURL,
 	profileImageURL,
@@ -20,21 +20,21 @@ const SessionCard = ({
 }) => {
 	return (
 		<View style={styles.card}>
-			<SessionCardHeader
+			<VideoCardHeader
 				playerName={playerName}
 				location={location}
 				gameType={gameType}
 				locationIconURL={locationIconURL}
 				profileImageURL={profileImageURL}
 			/>
-			<SessionCardStatsRowContainer
+			<VideoCardStatsRowContainer
 				makePercent={makePercent}
 				medianRun={medianRun}
 				duration={duration}
 				shotPacing={shotPacing}
 			/>
 			<Image source={imageURL} style={styles.image} />
-			<SessionCardFooter sessionName={sessionName} lastPlayed={lastPlayed} />
+			<VideoCardFooter videoName={videoName} lastPlayed={lastPlayed} />
 		</View>
 	);
 };
@@ -62,4 +62,4 @@ const styles = StyleSheet.create({
 	},
 });
 
-export default SessionCard;
+export default VideoCard;

src/navigation/tab-navigator.tsx

@@ -1,11 +1,11 @@
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { Image } from "react-native";
-import CameraScreen from "../component/video/camera";
+import CameraScreen from "../component/recording/camera";
 import Profile from "../screens/profile";
-import Session from "../screens/session-stack/session";
+import RecordingDetails from "../screens/recording-stack/recording-details";
-import SessionFeed from "../screens/session-stack/session-feed";
+import Video from "../screens/video-stack/video-detail";
-import VideoDetails from "../screens/video-stack/video-details";
+import VideoFeed from "../screens/video-stack/video-feed";
 import { tabIconColors } from "../styles";
 
 import Icon from "../assets/icons/favicon.png";
@@ -15,34 +15,34 @@ const RecordStack = createNativeStackNavigator();
 
 // tabBarIcon configuration should live on separate file and contain all logic/icons/rendering for the Tabs
 const tabIcons = {
-	SessionStack: <Image source={Icon} style={{ width: 20, height: 20 }} />,
 	VideoStack: <Image source={Icon} style={{ width: 20, height: 20 }} />,
+	RecordingStack: <Image source={Icon} style={{ width: 20, height: 20 }} />,
 	Profile: <Image source={Icon} style={{ width: 20, height: 20 }} />,
 };
 
-function VideoTabStack() {
+function RecordingTabStack() {
 	return (
 		<RecordStack.Navigator screenOptions={{ headerShown: false }}>
 			<RecordStack.Screen
 				name="Record"
-				component={VideoDetails}
+				component={RecordingDetails}
-				initialParams={{ mode: "start-video" }}
+				initialParams={{ mode: "start-recording" }}
 			/>
 			<RecordStack.Screen name="Camera" component={CameraScreen} />
 			<RecordStack.Screen
-				name="SaveVideo"
+				name="SaveRecording"
-				component={VideoDetails}
+				component={RecordingDetails}
-				initialParams={{ mode: "save-video" }}
+				initialParams={{ mode: "save-recording" }}
 			/>
 		</RecordStack.Navigator>
 	);
 }
 
-function SessionTabStack() {
+function VideoTabStack() {
 	return (
 		<RecordStack.Navigator screenOptions={{ headerShown: false }}>
-			<RecordStack.Screen name="SessionFeed" component={SessionFeed} />
+			<RecordStack.Screen name="VideoFeed" component={VideoFeed} />
-			<RecordStack.Screen name="Session" component={Session} />
+			<RecordStack.Screen name="Video" component={Video} />
 		</RecordStack.Navigator>
 	);
 }
@@ -67,14 +67,14 @@ export default function Tabs(): React.JSX.Element {
 				},
 			})}
 		>
-			<Tab.Screen
-				name="SessionStack"
-				component={SessionTabStack}
-				options={{ tabBarLabel: "Session" }}
-			/>
 			<Tab.Screen
 				name="VideoStack"
 				component={VideoTabStack}
+				options={{ tabBarLabel: "Video" }}
+			/>
+			<Tab.Screen
+				name="RecordingStack"
+				component={RecordingTabStack}
 				options={{ tabBarLabel: "Record" }}
 			/>
 			<Tab.Screen

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

@@ -9,7 +9,7 @@ import {
 	View,
 } from "react-native";
 import DropDownPicker from "react-native-dropdown-picker";
-import { useVideoDetails } from "../../component/video/use-video-details";
+import { useVideoDetails } from "../../component/recording/use-recording-details";
 import { globalInputStyles } from "../../styles";
 import { recordStyles as styles } from "./styles";
 
@@ -32,7 +32,7 @@ export default function VideoDetails({ navigation, route }): React.JSX.Element {
 		<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
 			<View style={styles.container}>
 				<Text style={styles.headerText}>
-					{mode === "start-video" ? "Record Session" : "Save Session"}
+					{mode === "start-recording" ? "Record Session" : "Save Session"}
 				</Text>
 				<View style={globalInputStyles.dropdownContainer}>
 					<Text style={globalInputStyles.dropdownTitle}>Session Name</Text>
@@ -70,7 +70,7 @@ export default function VideoDetails({ navigation, route }): React.JSX.Element {
 				</View>
 
 				<View style={styles.buttonContainer}>
-					{mode === "start-video" && (
+					{mode === "start-recording" && (
 						<TouchableOpacity
 							style={styles.buttonStyle}
 							onPress={() => navigation.goBack()}
@@ -83,7 +83,7 @@ export default function VideoDetails({ navigation, route }): React.JSX.Element {
 							<ActivityIndicator color="#fff" />
 						) : (
 							<Text style={styles.buttonText}>
-								{mode === "start-video" ? "Next" : "Save"}
+								{mode === "start-recording" ? "Next" : "Save"}
 							</Text>
 						)}
 					</TouchableOpacity>

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

@@ -8,7 +8,7 @@ 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 SessionScreen() {
+export default function VideoScreen() {
 	return (
 		<View style={StyleSheet.absoluteFill}>
 			<ChartContainer data={line_chart_two_y_data} ChartComponent={LineGraph} />

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

@@ -1,28 +1,28 @@
 import { StackNavigationProp } from "@react-navigation/stack";
 import React from "react";
 import { StyleSheet, TouchableOpacity, View } from "react-native";
-import sampleSessionImage from "../../assets/sample_session.png";
+import sampleVideoImage from "../../assets/sample_session.png";
-import SessionCard from "../../component/session-card/session-card";
+import VideoCard from "../../component/video-card/video-card";
 
 // Define the types for your navigation stack
-type SessionStackParamList = {
+type VideoStackParamList = {
-	Session: undefined; // Add other screens as needed
+	Video: undefined; // Add other screens as needed
 };
 
-type SessionFeedNavigationProp = StackNavigationProp<
+type VideoFeedNavigationProp = StackNavigationProp<
-	SessionStackParamList,
+	VideoStackParamList,
-	"Session"
+	"Video"
 >;
 
-// Define the props for SessionFeed component
+// Define the props for VideoFeed component
-interface SessionFeedProps {
+interface VideoFeedProps {
-	navigation: SessionFeedNavigationProp;
+	navigation: VideoFeedNavigationProp;
 }
-const SessionFeed: React.FC<SessionFeedProps> = ({ navigation }) => {
+const VideoFeed: React.FC<VideoFeedProps> = ({ navigation }) => {
 	return (
 		<View style={styles.container}>
-			<TouchableOpacity onPress={() => navigation.push("Session")}>
+			<TouchableOpacity onPress={() => navigation.push("Video")}>
-				<SessionCard
+				<VideoCard
 					playerName="Dean Machine"
 					location="Family Billiards, San Francisco"
 					gameType="Straight Pool"
@@ -30,8 +30,8 @@ const SessionFeed: React.FC<SessionFeedProps> = ({ navigation }) => {
 					medianRun="7.3"
 					duration="5:03:10"
 					shotPacing="0:00:26"
-					imageURL={sampleSessionImage}
+					imageURL={sampleVideoImage}
-					sessionName="Dusting off the chalk"
+					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"
@@ -49,4 +49,4 @@ const styles = StyleSheet.create({
 	},
 });
 
-export default SessionFeed;
+export default VideoFeed;