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:
commit
63faa9397e
@ -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,
|
@ -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;
|
@ -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;
|
@ -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;
|
@ -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;
|
@ -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;
|
@ -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
|
||||||
|
@ -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>
|
@ -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} />
|
@ -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;
|
Loading…
Reference in New Issue
Block a user