diff options
| -rw-r--r-- | ios/Podfile.lock | 9 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/screens/chat/ChatListScreen.tsx | 288 | ||||
| -rw-r--r-- | yarn.lock | 34 |
4 files changed, 211 insertions, 122 deletions
diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 7d6ce3a8..5679c1c7 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -345,6 +345,11 @@ PODS: - React-Core - react-native-splash-screen (3.2.0): - React + - react-native-video (5.1.1): + - React-Core + - react-native-video/Video (= 5.1.1) + - react-native-video/Video (5.1.1): + - React-Core - React-RCTActionSheet (0.63.3): - React-Core/RCTActionSheetHeaders (= 0.63.3) - React-RCTAnimation (0.63.3): @@ -531,6 +536,7 @@ DEPENDENCIES: - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)" - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`) - react-native-splash-screen (from `../node_modules/react-native-splash-screen`) + - react-native-video (from `../node_modules/react-native-video`) - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`) - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`) - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`) @@ -639,6 +645,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native-safe-area-context" react-native-splash-screen: :path: "../node_modules/react-native-splash-screen" + react-native-video: + :path: "../node_modules/react-native-video" React-RCTActionSheet: :path: "../node_modules/react-native/Libraries/ActionSheetIOS" React-RCTAnimation: @@ -745,6 +753,7 @@ SPEC CHECKSUMS: react-native-netinfo: e849fc21ca2f4128a5726c801a82fc6f4a6db50d react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79 react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865 + react-native-video: 0bb76b6d6b77da3009611586c7dbf817b947f30e React-RCTActionSheet: 53ea72699698b0b47a6421cb1c8b4ab215a774aa React-RCTAnimation: 1befece0b5183c22ae01b966f5583f42e69a83c2 React-RCTBlob: 0b284339cbe4b15705a05e2313a51c6d8b51fa40 diff --git a/package.json b/package.json index bc524f94..399a40ea 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@reduxjs/toolkit": "^1.4.0", "@stream-io/flat-list-mvcp": "^0.10.1", "@types/react-native-vector-icons": "^6.4.5", + "@types/react-native-video": "^5.0.6", "moment": "^2.29.1", "patch-package": "^6.4.7", "postinstall-postinstall": "^2.1.0", @@ -59,6 +60,7 @@ "react-native-splash-screen": "^3.2.0", "react-native-svg": "^12.1.0", "react-native-vector-icons": "^7.0.0", + "react-native-video": "^5.1.1", "react-promise-tracker": "^2.1.0", "react-redux": "^7.2.2", "reanimated-bottom-sheet": "^1.0.0-alpha.22", diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index 1df5c2da..08b41151 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -1,26 +1,10 @@ -import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {StackNavigationProp} from '@react-navigation/stack'; -import React, {useContext, useEffect, useMemo, useState} from 'react'; -import {Alert, SafeAreaView, StatusBar, StyleSheet, View} from 'react-native'; -import {useStore} from 'react-redux'; -import {ChannelList, Chat} from 'stream-chat-react-native'; -import {ChatContext} from '../../App'; -import {TabsGradient} from '../../components'; -import {ChannelPreview, MessagesHeader} from '../../components/messages'; +import React from 'react'; +import {StyleSheet} from 'react-native'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import Video from 'react-native-video'; import {MainStackParams} from '../../routes'; -import {RootState} from '../../store/rootReducer'; -import EmptyContentView from '../../components/common/EmptyContentView'; -import { - LocalAttachmentType, - LocalChannelType, - LocalCommandType, - LocalEventType, - LocalMessageType, - LocalReactionType, - LocalUserType, -} from '../../types'; -import {connectChatAccount, HeaderHeight} from '../../utils'; -import NewChatModal from './NewChatModal'; +import {SCREEN_WIDTH} from '../../utils'; type ChatListScreenNavigationProp = StackNavigationProp< MainStackParams, @@ -29,114 +13,174 @@ type ChatListScreenNavigationProp = StackNavigationProp< interface ChatListScreenProps { navigation: ChatListScreenNavigationProp; } -/* - * Screen that displays all of the user's active conversations. - */ -const ChatListScreen: React.FC<ChatListScreenProps> = () => { - const {chatClient} = useContext(ChatContext); - const [modalVisible, setChatModalVisible] = useState(false); - const state: RootState = useStore().getState(); - const loggedInUserId = state.user.user.userId; - const tabbarHeight = useBottomTabBarHeight(); - - const memoizedFilters = useMemo( - () => ({ - members: {$in: [loggedInUserId]}, - type: 'messaging', - }), - [], - ); - - const chatTheme = { - channelListMessenger: { - flatListContent: { - backgroundColor: 'white', - paddingBottom: tabbarHeight + HeaderHeight + 20, - }, - }, - }; - - useEffect(() => { - if (loggedInUserId) { - connectChatAccount(loggedInUserId, chatClient) - .then((success) => { - if (!success) { - Alert.alert('Something wrong with chat'); - } - }) - .catch((err) => { - console.log('Error connecting to chat: ', err); - Alert.alert('Something wrong with chat'); - }); - } - }, [loggedInUserId]); +const ChatListScreen: React.FC<ChatListScreenProps> = () => { return ( - <View style={styles.background}> - <SafeAreaView> - <StatusBar barStyle="dark-content" /> - <MessagesHeader - createChannel={() => { - setChatModalVisible(true); - }} - /> - <Chat client={chatClient} style={chatTheme}> - <View style={styles.chatContainer}> - <ChannelList< - LocalAttachmentType, - LocalChannelType, - LocalCommandType, - LocalEventType, - LocalMessageType, - LocalReactionType, - LocalUserType - > - filters={memoizedFilters} - options={{ - presence: true, - state: true, - watch: true, - }} - sort={{last_message_at: -1}} - maxUnreadCount={99} - Preview={ChannelPreview} - EmptyStateIndicator={() => { - return <EmptyContentView viewType={'ChatList'} />; - }} - /> - </View> - </Chat> - <NewChatModal {...{modalVisible, setChatModalVisible}} /> - </SafeAreaView> - <TabsGradient /> - </View> + <SafeAreaView> + <Video + // HLS m3u8 version + source={{ + uri: 'https://multiplatform-f.akamaihd.net/i/multi/will/bunny/big_buck_bunny_,640x360_400,640x360_700,640x360_1000,950x540_1500,.f4v.csmil/master.m3u8', + }} + // mp4 version + // source={{ + // uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', + // }} + volume={5} + style={styles.video} + /> + </SafeAreaView> ); }; const styles = StyleSheet.create({ - background: { - flex: 1, - backgroundColor: 'white', - }, - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - placeholder: { - fontSize: 14, - fontWeight: 'bold', - marginBottom: 10, - }, - button: { - backgroundColor: '#CCE4FC', - padding: 15, - borderRadius: 5, - }, - chatContainer: { - height: '100%', - marginTop: 10, + video: { + width: SCREEN_WIDTH, + aspectRatio: 2, }, }); export default ChatListScreen; + +// import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; +// import {StackNavigationProp} from '@react-navigation/stack'; +// import React, {useContext, useEffect, useMemo, useState} from 'react'; +// import {Alert, SafeAreaView, StatusBar, StyleSheet, View} from 'react-native'; +// import {useStore} from 'react-redux'; +// import {ChannelList, Chat} from 'stream-chat-react-native'; +// import {ChatContext} from '../../App'; +// import {TabsGradient} from '../../components'; +// import {ChannelPreview, MessagesHeader} from '../../components/messages'; +// import {MainStackParams} from '../../routes'; +// import {RootState} from '../../store/rootReducer'; +// import EmptyContentView from '../../components/common/EmptyContentView'; +// import { +// LocalAttachmentType, +// LocalChannelType, +// LocalCommandType, +// LocalEventType, +// LocalMessageType, +// LocalReactionType, +// LocalUserType, +// } from '../../types'; +// import {connectChatAccount, HeaderHeight} from '../../utils'; +// import NewChatModal from './NewChatModal'; + +// type ChatListScreenNavigationProp = StackNavigationProp< +// MainStackParams, +// 'ChatList' +// >; +// interface ChatListScreenProps { +// navigation: ChatListScreenNavigationProp; +// } +// /* +// * Screen that displays all of the user's active conversations. +// */ +// const ChatListScreen: React.FC<ChatListScreenProps> = () => { +// const {chatClient} = useContext(ChatContext); +// const [modalVisible, setChatModalVisible] = useState(false); +// const state: RootState = useStore().getState(); +// const loggedInUserId = state.user.user.userId; +// const tabbarHeight = useBottomTabBarHeight(); + +// const memoizedFilters = useMemo( +// () => ({ +// members: {$in: [loggedInUserId]}, +// type: 'messaging', +// }), +// [], +// ); + +// const chatTheme = { +// channelListMessenger: { +// flatListContent: { +// backgroundColor: 'white', +// paddingBottom: tabbarHeight + HeaderHeight + 20, +// }, +// }, +// }; + +// useEffect(() => { +// if (loggedInUserId) { +// connectChatAccount(loggedInUserId, chatClient) +// .then((success) => { +// if (!success) { +// Alert.alert('Something wrong with chat'); +// } +// }) +// .catch((err) => { +// console.log('Error connecting to chat: ', err); +// Alert.alert('Something wrong with chat'); +// }); +// } +// }, [loggedInUserId]); + +// return ( +// <View style={styles.background}> +// <SafeAreaView> +// <StatusBar barStyle="dark-content" /> +// <MessagesHeader +// createChannel={() => { +// setChatModalVisible(true); +// }} +// /> +// <Chat client={chatClient} style={chatTheme}> +// <View style={styles.chatContainer}> +// <ChannelList< +// LocalAttachmentType, +// LocalChannelType, +// LocalCommandType, +// LocalEventType, +// LocalMessageType, +// LocalReactionType, +// LocalUserType +// > +// filters={memoizedFilters} +// options={{ +// presence: true, +// state: true, +// watch: true, +// }} +// sort={{last_message_at: -1}} +// maxUnreadCount={99} +// Preview={ChannelPreview} +// EmptyStateIndicator={() => { +// return <EmptyContentView viewType={'ChatList'} />; +// }} +// /> +// </View> +// </Chat> +// <NewChatModal {...{modalVisible, setChatModalVisible}} /> +// </SafeAreaView> +// <TabsGradient /> +// </View> +// ); +// }; + +// const styles = StyleSheet.create({ +// background: { +// flex: 1, +// backgroundColor: 'white', +// }, +// container: { +// flex: 1, +// justifyContent: 'center', +// alignItems: 'center', +// }, +// placeholder: { +// fontSize: 14, +// fontWeight: 'bold', +// marginBottom: 10, +// }, +// button: { +// backgroundColor: '#CCE4FC', +// padding: 15, +// borderRadius: 5, +// }, +// chatContainer: { +// height: '100%', +// marginTop: 10, +// }, +// }); + +// export default ChatListScreen; @@ -1335,6 +1335,14 @@ "@types/react" "*" "@types/react-native" "*" +"@types/react-native-video@^5.0.6": + version "5.0.6" + resolved "https://registry.yarnpkg.com/@types/react-native-video/-/react-native-video-5.0.6.tgz#1a84eff00820b8d3136dd6d6333ce471738293a6" + integrity sha512-elf7Y7qornIySK5yR9yOINtQcqXScSQoe9yz5Kuisq/IV5Kf3BprsNGHloRXT+WYVQflii6+EJwyAUs1R4izAw== + dependencies: + "@types/react" "*" + "@types/react-native" "*" + "@types/react-native@*": version "0.64.10" resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.64.10.tgz#5eb6a72c77ce0f7e6e14b19c61a6bc585975eef5" @@ -2784,6 +2792,11 @@ electron-to-chromium@^1.3.723: resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz#0728587f1b9b970ec9ffad932496429aef750d09" integrity sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A== +eme-encryption-scheme-polyfill@^2.0.1: + version "2.0.3" + resolved "https://registry.yarnpkg.com/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.0.3.tgz#2ca6e06480e06cceb5e50efd27943ac46c959878" + integrity sha512-44CNFMsqzHdKHrzWxlS7xZ8KUHn5XutBqpmCuWzNIynmAyFInHrrD3ozv/RvK9ZhgV6QY6Easx8EWAmxteNodg== + emoji-regex@^7.0.1: version "7.0.3" resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156" @@ -4860,6 +4873,11 @@ jws@^3.2.2: jwa "^1.4.1" safe-buffer "^5.0.1" +keymirror@^0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/keymirror/-/keymirror-0.1.1.tgz#918889ea13f8d0a42e7c557250eee713adc95c35" + integrity sha1-kYiJ6hP40KQufFVyUO7nE63JXDU= + kind-of@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-1.1.0.tgz#140a3d2d41a36d2efcfa9377b62c24f8495a5c44" @@ -6588,6 +6606,15 @@ react-native-vector-icons@^7.0.0: prop-types "^15.7.2" yargs "^15.0.2" +react-native-video@^5.1.1: + version "5.1.1" + resolved "https://registry.yarnpkg.com/react-native-video/-/react-native-video-5.1.1.tgz#89a7989efeb8d404611c06154d1da227a745d7d8" + integrity sha512-zee8gRUrjPWRoZSEBiMebClqu1iAuCQNLjzqpmXFrRWEoJj7azM3BPqLQWJgsnfLiYUYGySeApC/G60THM5+tw== + dependencies: + keymirror "^0.1.1" + prop-types "^15.7.2" + shaka-player "^2.5.9" + react-native@0.63.3: version "0.63.3" resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.63.3.tgz#4a7f6540e049ff41810887bbd1125abc4672f3bf" @@ -7130,6 +7157,13 @@ setprototypeof@1.1.1: resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683" integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw== +shaka-player@^2.5.9: + version "2.5.23" + resolved "https://registry.yarnpkg.com/shaka-player/-/shaka-player-2.5.23.tgz#db92d1c6cf2314f0180a2cec11b0e2f2560336f5" + integrity sha512-3MC9k0OXJGw8AZ4n/ZNCZS2yDxx+3as5KgH6Tx4Q5TRboTBBCu6dYPI5vp1DxKeyU12MBN1Zcbs7AKzXv2EnCg== + dependencies: + eme-encryption-scheme-polyfill "^2.0.1" + shallow-clone@^0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-0.1.2.tgz#5909e874ba77106d73ac414cfec1ffca87d97060" |