Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Session Page #39

Merged
merged 3 commits into from
Jul 4, 2023
Merged

Session Page #39

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
897782e
Session Page
kharioki Jul 3, 2023
fee937a
update icon color on dark mode
kharioki Jul 3, 2023
610fdad
added paddings, text contrasts and image fixes
kharioki Jul 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
243 changes: 216 additions & 27 deletions app/(app)/session/[session].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,184 @@
import { AntDesign } from '@expo/vector-icons';
import { AntDesign, FontAwesome5, MaterialCommunityIcons } from '@expo/vector-icons';
import { useTheme } from '@react-navigation/native';
import { Image } from 'expo-image';
import { Stack, useRouter, useSearchParams } from 'expo-router';
import React from 'react';
import { StyleSheet, View } from 'react-native';
import React, { useState } from 'react';
import { Pressable, StyleSheet, View } from 'react-native';
import Row from '../../../components/common/Row';
import Space from '../../../components/common/Space';
import StyledText from '../../../components/common/StyledText';
import MainContainer from '../../../components/container/MainContainer';

// TODO: Session page
/**
* - should show details of the event session: speaker name, title of session, description, level, speaker's twitter handle, and a floating action button to share the session info
*/
// TODO: Use real data from mock/sessions.ts
import { Sessions } from '../../../mock/sessions';
import { getSessionTimesAndLocation, getTwitterHandle, truncate } from '../../../util/helpers';

const Session = () => {
const { colors } = useTheme();
const { colors, dark } = useTheme();
const { slug } = useSearchParams();
const router = useRouter();

// filter session by slug
const session = Sessions.data.filter((_session) => _session.slug === slug)[0];

const [showMoreBio, setShowMoreBio] = useState(false);

return (
<MainContainer preset="scroll">
<Stack.Screen
options={{
title: `Session ${slug}`,
headerTitleAlign: 'center',
headerTintColor: colors.text,
headerStyle: {
backgroundColor: colors.background,
},
headerLeft: () => <AntDesign name="arrowleft" size={24} color={colors.text} onPress={() => router.back()} />,
}}
/>

<View style={styles.main}>
<StyledText>session slug: {slug}</StyledText>
</View>
</MainContainer>
<View style={styles.main}>
<MainContainer preset="scroll">
<Stack.Screen
options={{
title: `Session Details`,
headerTitleAlign: 'center',
headerTintColor: colors.text,
headerStyle: {
backgroundColor: dark ? colors.bg : colors.background,
},
headerTitleStyle: {
fontSize: 18,
fontWeight: '300',
},
headerLeft: () => (
<AntDesign name="arrowleft" size={24} color={colors.text} onPress={() => router.back()} />
),
}}
/>

<View style={styles.main}>
<View style={[styles.centered, { borderColor: dark ? colors.background : colors.border }]}>
<Row>
<View>
<View style={styles.row}>
<FontAwesome5 name="android" size={18} color={colors.tertiary} />
<Space size={5} horizontal />
<StyledText size="sm" font="regular" style={{ color: colors.tertiary }}>
{session?.speakers && session?.speakers.length > 1 ? 'Speakers' : 'Speaker'}
</StyledText>
</View>
<StyledText size="lg" font="bold" style={{ color: dark ? colors.text : colors.primary }}>
{session?.speakers.map((speaker) => speaker.name).join(', ')}
</StyledText>
</View>
<View>
<Space size={14} />
<FontAwesome5 name="star" size={24} color={colors.primary} />
</View>
</Row>

<Space size={20} />

<StyledText size="lg" font="bold">
{session?.title}
</StyledText>

<Space size={16} />

{session?.speakers && session?.speakers.length > 1 ? (
session?.speakers.map((speaker, index) => (
<View key={index.toString()}>
<StyledText font="regular" style={{ color: colors.primary }}>
{speaker.name} - {''}
<StyledText font="regular" style={{ color: colors.textLight }}>
kharioki marked this conversation as resolved.
Show resolved Hide resolved
{!showMoreBio ? truncate(140, speaker.biography) : speaker.biography}
{speaker.biography && speaker.biography.length > 140 && (
<StyledText
size="sm"
font="semiBold"
style={{ color: colors.primary }}
onPress={() => setShowMoreBio(!showMoreBio)}
>
{showMoreBio ? ' ...Show less' : ' Show more'}
</StyledText>
)}
</StyledText>
</StyledText>
<Space size={10} />
</View>
))
) : (
<StyledText font="regular" style={{ color: colors.textLight }}>
{!showMoreBio ? truncate(140, session?.speakers[0]?.biography) : session?.speakers[0]?.biography}
{session?.speakers[0]?.biography && session?.speakers[0]?.biography.length > 140 && (
<StyledText
size="sm"
font="semiBold"
style={{ color: colors.primary }}
onPress={() => setShowMoreBio(!showMoreBio)}
>
{showMoreBio ? ' ...Show less' : ' Show more'}
</StyledText>
)}
</StyledText>
)}

<Space size={16} />

<Image
source={{ uri: session?.session_image || '' }}
style={styles.image}
contentFit="fill"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The images looks squashed because of contentFit="fill". We should give them the same treatment as we do on the home screen with cover.

image

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I converted to cover with contentPosition="left" like on home screen, but because of width constraints, this may have uneven edges. if I remove contentPosition="left" the text in the image is cut. then again since the title is already in the page should that be an issue. please advice

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The images have a different aspect ratio to the usage in the designs and therefore something has to give. We should keep the current options since the right side of the image only contains the graphic and no text. Cutting off the text in the image does not look good.

contentPosition="left center"
/>
</View>

<View style={[styles.centered, { borderColor: dark ? colors.background : colors.border }]}>
<StyledText font="light">{getSessionTimesAndLocation(session?.slug || '')}</StyledText>

<Space size={16} />

<View style={[styles.chip, { backgroundColor: dark ? colors.background : colors.text }]}>
<StyledText style={[styles.chipText, { color: dark ? colors.text : colors.background }]}>
kharioki marked this conversation as resolved.
Show resolved Hide resolved
#{session?.session_level}
</StyledText>
</View>
</View>

<View style={styles.withPadding}>
{session?.speakers && session?.speakers.length > 1 ? (
<View>
<StyledText font="medium" size="lg">
kharioki marked this conversation as resolved.
Show resolved Hide resolved
Twitter Handles
</StyledText>

<Space size={16} />

<Row>
{session?.speakers.map((speaker, index) => (
<Pressable
key={index.toString()}
style={[styles.button, { borderColor: colors.primary, backgroundColor: colors.background }]}
>
<FontAwesome5 name="twitter" size={20} color={colors.primary} />
<Space size={4} horizontal />
<StyledText font="medium" style={{ color: colors.primary }}>
{speaker.twitter ? getTwitterHandle(speaker.twitter) : 'N/A'}
</StyledText>
</Pressable>
))}
</Row>
</View>
) : (
<Row>
<StyledText font="medium" size="lg">
kharioki marked this conversation as resolved.
Show resolved Hide resolved
Twitter Handle
</StyledText>

<Pressable style={[styles.button, { borderColor: colors.primary, backgroundColor: colors.background }]}>
<FontAwesome5 name="twitter" size={20} color={colors.primary} />
<Space size={4} horizontal />
<StyledText font="medium" style={{ color: colors.primary }}>
{session?.speakers[0]?.twitter ? getTwitterHandle(session?.speakers[0]?.twitter) : 'N/A'}
</StyledText>
</Pressable>
</Row>
)}
</View>
</View>
</MainContainer>

{/** Floating action button. TODO: Add share functionality */}
<Pressable style={[styles.fab, { backgroundColor: colors.tertiary }]}>
<MaterialCommunityIcons name="share" size={30} color="white" />
</Pressable>
kharioki marked this conversation as resolved.
Show resolved Hide resolved
</View>
);
};

Expand All @@ -43,6 +187,51 @@ export default Session;
const styles = StyleSheet.create({
main: {
flex: 1,
width: '100%',
},
centered: {
paddingHorizontal: 16,
paddingVertical: 20,
borderBottomWidth: 0.5,
},
row: {
flexDirection: 'row',
alignItems: 'center',
},
image: {
height: 190,
width: '100%',
borderRadius: 10,
},
chip: {
paddingHorizontal: 10,
paddingVertical: 5,
borderRadius: 5,
alignSelf: 'flex-start',
},
chipText: {
textTransform: 'uppercase',
},
withPadding: {
padding: 20,
},
button: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-evenly',
paddingHorizontal: 12,
paddingVertical: 8,
borderRadius: 8,
borderWidth: 1,
},
fab: {
position: 'absolute',
bottom: 30,
right: 20,
width: 60,
height: 60,
borderRadius: 30,
justifyContent: 'center',
alignItems: 'center',
},
});
36 changes: 9 additions & 27 deletions components/lists/SessionsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import { useRouter } from 'expo-router';
import React from 'react';
import type { ListRenderItemInfo } from 'react-native';
import { Dimensions, FlatList, StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
import type { Session, SessionForSchedule } from '../../global';
import { Schedule } from '../../mock/schedule';
import type { Session } from '../../global';
import { Sessions } from '../../mock/sessions';
import { getSessionTimeAndLocation, truncate } from '../../util/helpers';
import ViewAllButton from '../buttons/ViewAllButton';
import Row from '../common/Row';
import Space from '../common/Space';
Expand All @@ -20,29 +20,6 @@ const SessionsList = () => {
const sessions = Sessions.data.slice(0, 5); // filter sessions to 5
const sessionCount = (Sessions.data.length - 5).toString();

// truncate title to 2 lines, and add ellipsis at the end
const truncateTitle = (title: string) => {
const titleLength = title.length;
const maxTitleLength = 50;
if (titleLength > maxTitleLength) {
return `${title.substring(0, maxTitleLength)}...`;
}
return title;
};

// a function that gets the start time and room.title of a session from the schedule.data array
const getSessionTimeAndLocation = (slug: string) => {
for (const key in Schedule.data) {
const sessionData = Schedule.data[key];
const session = sessionData?.find((item: SessionForSchedule) => item.slug === slug);
if (session) {
const startTime = session.start_time.split(':').slice(0, 2).join(':');
return `@ ${startTime} | Room ${session?.rooms[0]?.title}`;
}
}
return '';
};

return (
<View style={styles.list}>
<Row>
Expand All @@ -62,12 +39,17 @@ const SessionsList = () => {
onPress={() => router.replace({ pathname: `/session/${item.slug}`, params: { slug: item.slug } })}
>
<View style={[styles.card, { backgroundColor: colors.card }]}>
<Image source={{ uri: item.session_image || '' }} style={styles.image} contentFit="cover" />
<Image
source={{ uri: item.session_image || '' }}
style={styles.image}
contentFit="cover"
contentPosition="left"
/>
<Space size={8} />
<View style={styles.bottom}>
<View style={styles.description}>
<StyledText font="bold" numberOfLines={2} style={styles.title}>
{truncateTitle(item.title)}
{truncate(50, item.title)}
</StyledText>
</View>

Expand Down
1 change: 0 additions & 1 deletion components/player/VideoPlayer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* eslint-disable react/no-unstable-nested-components */
import { Ionicons } from '@expo/vector-icons';
import { useTheme } from '@react-navigation/native';
import type { VideoProps } from 'expo-av';
Expand Down
Loading