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>
This commit is contained in:
dean 2024-02-21 14:04:23 -07:00
commit 63faa9397e
15 changed files with 70 additions and 70 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -1,27 +1,27 @@
import React from "react"; import React from "react";
import { StyleSheet, View } from "react-native"; import { StyleSheet, View } from "react-native";
import SessionCardStat from "./session-card-stat"; import VideoCardStat from "./video-card-stat";
const SessionCardStatsRowContainer = ({ const VideoCardStatsRowContainer = ({
makePercent, makePercent,
medianRun, medianRun,
duration, duration,
shotPacing, shotPacing,
}) => { }) => {
const stats = [ 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 ( return (
<View style={styles.statsContainer}> <View style={styles.statsContainer}>
{stats.map((stat, index) => ( {stats.map((stat, index) => (
<React.Fragment key={index}> <React.Fragment key={index}>
<SessionCardStat <VideoCardStat
displayName={stat.displayName} displayName={stat.displayName}
sessionStat={stat.sessionStat} videoStat={stat.videoStat}
/> />
{index < stats.length - 1 && <View style={styles.verticalSpacer} />} {index < stats.length - 1 && <View style={styles.verticalSpacer} />}
</React.Fragment> </React.Fragment>
@ -45,4 +45,4 @@ const styles = StyleSheet.create({
}, },
}); });
export default SessionCardStatsRowContainer; export default VideoCardStatsRowContainer;

View File

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

View File

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

View File

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

View File

@ -8,7 +8,7 @@ import BarGraph from "../../component/charts/bar-graph/bar-graph";
import ChartContainer from "../../component/charts/container/chart-container"; import ChartContainer from "../../component/charts/container/chart-container";
import LineGraph from "../../component/charts/line-graph/line-graph"; import LineGraph from "../../component/charts/line-graph/line-graph";
export default function SessionScreen() { export default function VideoScreen() {
return ( return (
<View style={StyleSheet.absoluteFill}> <View style={StyleSheet.absoluteFill}>
<ChartContainer data={line_chart_two_y_data} ChartComponent={LineGraph} /> <ChartContainer data={line_chart_two_y_data} ChartComponent={LineGraph} />

View File

@ -1,28 +1,28 @@
import { StackNavigationProp } from "@react-navigation/stack"; import { StackNavigationProp } from "@react-navigation/stack";
import React from "react"; import React from "react";
import { StyleSheet, TouchableOpacity, View } from "react-native"; 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 // 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 ( return (
<View style={styles.container}> <View style={styles.container}>
<TouchableOpacity onPress={() => navigation.push("Session")}> <TouchableOpacity onPress={() => navigation.push("Video")}>
<SessionCard <VideoCard
playerName="Dean Machine" playerName="Dean Machine"
location="Family Billiards, San Francisco" location="Family Billiards, San Francisco"
gameType="Straight Pool" gameType="Straight Pool"
@ -30,8 +30,8 @@ const SessionFeed: React.FC<SessionFeedProps> = ({ navigation }) => {
medianRun="7.3" medianRun="7.3"
duration="5:03:10" duration="5:03:10"
shotPacing="0:00:26" shotPacing="0:00:26"
imageURL={sampleSessionImage} imageURL={sampleVideoImage}
sessionName="Dusting off the chalk" videoName="Dusting off the chalk"
lastPlayed="Today at 2:37pm" lastPlayed="Today at 2:37pm"
profileImageURL="https://www.pngall.com/wp-content/uploads/5/Profile-PNG-File.png" 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" 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;