Skip to content

Commit 969bcca

Browse files
Nwagba Okechukwu MartinNwagba Okechukwu Martin
Nwagba Okechukwu Martin
authored and
Nwagba Okechukwu Martin
committed
second commit... sdk integration following tutorial
1 parent f80d9e5 commit 969bcca

File tree

5 files changed

+163
-65
lines changed

5 files changed

+163
-65
lines changed

‎projects/twitchCloneExpo/App.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { StatusBar } from 'expo-status-bar';
21
import { Ionicons } from "@expo/vector-icons";
32
import { Pressable, View,Image } from 'react-native';
43
import { NavigationContainer } from "@react-navigation/native";
@@ -79,7 +78,7 @@ export default function App() {
7978
),
8079
}}
8180
/>
82-
<Stack.Screen name="Live" component={LiveScreen} />
81+
<Stack.Screen name="Live" component={LiveScreen} options={{headerShown:false}} />
8382
</Stack.Navigator>
8483
</NavigationContainer>
8584
);

‎projects/twitchCloneExpo/src/components/thumbnail.tsx‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,30 @@ import { Image, View, Dimensions, StyleSheet, Text } from "react-native";
33
import * as VideoThumbnails from "expo-video-thumbnails";
44

55
export default function ThumbNailComponent({ uri }: { uri: string }) {
6-
const [image, setImage] = useState(
7-
"https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
8-
);
6+
// const [image, setImage] = useState(
7+
// "https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
8+
// );
99

10-
useEffect(() => {
11-
VideoThumbnails.getThumbnailAsync(uri, {
12-
time: 15000,
13-
})
14-
.then(({ uri }) => {
15-
setImage(uri);
16-
})
17-
.catch((e) => console.warn(e));
18-
}, [uri]);
10+
// useEffect(() => {
11+
// VideoThumbnails.getThumbnailAsync(uri, {
12+
// time: 15000,
13+
// })
14+
// .then(({ uri }) => {
15+
// setImage(uri);
16+
// })
17+
// .catch((e) => console.warn(e));
18+
// }, [uri]);
1919

2020
return (
2121
<View style={styles.boxContainer}>
2222
<View>
23-
<Image source={{ uri: image }} style={styles.image} />
23+
<Image source={{ uri: uri }} style={styles.image} />
2424
</View>
2525
<View>
2626
<Text style={{ paddingHorizontal: 20, paddingVertical: 4 }}>User</Text>
27-
<Text style={{ paddingHorizontal: 20, paddingVertical: 4 }}>Stream</Text>
27+
<Text style={{ paddingHorizontal: 20, paddingVertical: 4 }}>
28+
Stream
29+
</Text>
2830
</View>
2931
</View>
3032
);
@@ -39,9 +41,9 @@ const styles = StyleSheet.create({
3941
justifyContent: "flex-start",
4042
paddingVertical: 4,
4143
paddingLeft: 20,
42-
4344
},
4445
image: {
46+
resizeMode: "cover",
4547
flex: 1,
4648
alignSelf: "center",
4749
width: Dimensions.get("window").width / 4,

‎projects/twitchCloneExpo/src/components/videoComponent.tsx‎

Lines changed: 18 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,34 @@
11
import Reac, { useRef, useState } from "react";
2-
import { StyleSheet, View, Text, Dimensions } from "react-native";
2+
import { StyleSheet, Dimensions } from "react-native";
33
import { Video, AVPlaybackStatus } from "expo-av";
44

55
const VideoComponent = ({ url }: { url: string }) => {
6-
const video = useRef(null);
7-
// const [status, setStatus] = useState({});
6+
7+
88
return (
9-
<View style={{ ...styles.boxContainer }}>
10-
<Video
11-
12-
isMuted={true}
13-
// shouldPlay={false}
14-
ref={video}
15-
style={styles.video}
16-
source={{
17-
uri: url,
18-
}}
19-
useNativeControls
20-
resizeMode="cover"
21-
isLooping
22-
// onPlaybackStatusUpdate={(status) => setStatus(() => status)}
23-
/>
24-
</View>
9+
<Video
10+
isMuted={true}
11+
shouldPlay={true}
12+
// ref={video}
13+
style={styles.video}
14+
source={{
15+
uri: url,
16+
}}
17+
useNativeControls
18+
resizeMode="cover"
19+
isLooping
20+
// onPlaybackStatusUpdate={(status) => setStatus(() => status)}
21+
/>
2522
);
2623
};
2724

2825
const styles = StyleSheet.create({
29-
boxContainer: {
30-
height: Dimensions.get("window").width / 2,
31-
position: "absolute",
32-
top: 5,
33-
},
3426
video: {
27+
backgroundColor:"black",
3528
flex: 1,
3629
alignSelf: "auto",
3730
width: Dimensions.get("window").width,
31+
height: Dimensions.get("window").height / 4,
3832
},
3933
});
4034

‎projects/twitchCloneExpo/src/screen/liveStream.tsx‎

Lines changed: 61 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import * as React from "react";
2-
import { View, Text, StyleSheet } from "react-native";
1+
import React, { useState, useEffect } from "react";
2+
import { View, StyleSheet, Text } from "react-native";
3+
import { StreamChat } from "stream-chat";
34
import VideoComponent from "../components/videoComponent";
45
import {
56
Channel,
@@ -8,13 +9,66 @@ import {
89
MessageList,
910
OverlayProvider as ChatOverlayProvider,
1011
} from "stream-chat-expo";
12+
import {
13+
SafeAreaProvider,
14+
SafeAreaView,
15+
useSafeAreaInsets,
16+
} from "react-native-safe-area-context";
17+
18+
const chatClient = StreamChat.getInstance("62mwbdkdfv8j");
19+
const userToken =
20+
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoib2tlY2h1a3d1In0.7SNsBLTxoBlGX7KfXvP-dDAZ7pGJF-sO-NPZwXkYk4o";
21+
22+
const user = {
23+
id: "okechukwu",
24+
};
25+
26+
const connectUserPromise = chatClient.connectUser(user, userToken);
27+
28+
const channel = chatClient.channel("messaging", "channel_id");
29+
1130
function LiveScreen() {
31+
const { bottom } = useSafeAreaInsets();
32+
const [ready, setReady] = useState(false);
33+
34+
useEffect(() => {
35+
const initChat = async () => {
36+
await connectUserPromise;
37+
await channel.watch();
38+
setReady(true);
39+
};
40+
41+
initChat();
42+
}, []);
43+
44+
if (!ready) {
45+
return (
46+
<View>
47+
<Text>Failed to load</Text>;
48+
</View>
49+
);
50+
}
51+
1252
return (
13-
<View style={StyleSheet.absoluteFill}>
14-
<VideoComponent url="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
15-
<MessageList />
16-
<MessageInput />
17-
</View>
53+
<SafeAreaProvider>
54+
<View style={StyleSheet.absoluteFill}>
55+
<View style={{ flex: 2 }}>
56+
<VideoComponent url="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
57+
</View>
58+
<View style={{ flex: 4 }}>
59+
<ChatOverlayProvider bottomInset={bottom} topInset={0}>
60+
<SafeAreaView>
61+
<Chat client={chatClient}>
62+
<Channel channel={channel} keyboardVerticalOffset={0}>
63+
<MessageList />
64+
<MessageInput />
65+
</Channel>
66+
</Chat>
67+
</SafeAreaView>
68+
</ChatOverlayProvider>
69+
</View>
70+
</View>
71+
</SafeAreaProvider>
1872
);
1973
}
2074

‎projects/twitchCloneExpo/src/screen/main_screens/following.tsx‎

Lines changed: 66 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
import * as React from "react";
2-
import { View, Text, TouchableOpacity, Pressable, FlatList, ScrollView } from "react-native";
2+
import {
3+
View,
4+
Text,
5+
TouchableOpacity,
6+
Pressable,
7+
FlatList,
8+
ScrollView,
9+
SafeAreaView,
10+
} from "react-native";
311
import VideoComponent from "../../components/videoComponent";
412

513
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
@@ -15,24 +23,65 @@ type MainScreenNavigationProp = NativeStackNavigationProp<
1523
navigation: MainScreenNavigationProp;
1624
};
1725

26+
const IMAGE_DATA = [
27+
"https://storage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg",
28+
"https://storage.googleapis.com/gtv-videos-bucket/sample/images/ElephantsDream.jpg",
29+
"https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerBlazes.jpg",
30+
"https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerEscapes.jpg",
31+
"https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerFun.jpg",
32+
"https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerJoyrides.jpg",
33+
"https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerMeltdowns.jpg",
34+
"https://storage.googleapis.com/gtv-videos-bucket/sample/images/Sintel.jpg",
35+
"https://storage.googleapis.com/gtv-videos-bucket/sample/images/SubaruOutbackOnStreetAndDirt.jpg",
36+
"https://storage.googleapis.com/gtv-videos-bucket/sample/images/TearsOfSteel.jpg",
37+
];
38+
39+
const videos = [
40+
"https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
41+
"https://storage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
42+
"https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
43+
"https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4",
44+
"https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4",
45+
"https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4",
46+
"https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4",
47+
"https://storage.googleapis.com/gtv-videos-bucket/sample/Sintel.jpg",
48+
"https://storage.googleapis.com/gtv-videos-bucket/sample/SubaruOutbackOnStreetAndDirt.mp4",
49+
"https://storage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4",
50+
];
51+
1852
function FollowingScreen({ navigation }: Props) {
19-
return (
20-
<View style={{ flex: 1, justifyContent: "flex-start" }}>
21-
<ScrollView>
22-
<Pressable onPress={() => navigation.navigate("Live")}>
23-
<ThumbNailComponent uri="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
24-
</Pressable>
25-
26-
<Pressable onPress={() => navigation.navigate("Live")}>
27-
<ThumbNailComponent uri="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" />
28-
</Pressable>
29-
30-
{/* <Pressable onPress={() => navigation.navigate("Live")}>
31-
<BoxContainer url="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/a2/Elephants_Dream_%282006%29.webm/Elephants_Dream_%282006%29.webm.480p.vp9.webm" />
32-
</Pressable> */}
33-
</ScrollView>
34-
</View>
53+
const renderItem = ({ item }: { item: string }) => (
54+
<Pressable onPress={() => navigation.navigate("Live")}>
55+
<ThumbNailComponent uri={item} />
56+
</Pressable>
3557
);
58+
// return (
59+
// <View style={{ flex: 1, justifyContent: "flex-start" }}>
60+
// <ScrollView>
61+
// <Pressable onPress={() => navigation.navigate("Live")}>
62+
// <ThumbNailComponent uri="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
63+
// </Pressable>
64+
65+
// <Pressable onPress={() => navigation.navigate("Live")}>
66+
// <ThumbNailComponent uri="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" />
67+
// </Pressable>
68+
69+
// {/* <Pressable onPress={() => navigation.navigate("Live")}>
70+
// <BoxContainer url="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/a2/Elephants_Dream_%282006%29.webm/Elephants_Dream_%282006%29.webm.480p.vp9.webm" />
71+
// </Pressable> */}
72+
// </ScrollView>
73+
// </View>
74+
// );
75+
76+
return (
77+
<SafeAreaView>
78+
<FlatList
79+
data={IMAGE_DATA}
80+
renderItem={renderItem}
81+
keyExtractor={(item) => item}
82+
/>
83+
</SafeAreaView>
84+
);
3685
}
3786

3887
export default FollowingScreen;

0 commit comments

Comments
 (0)