diff --git a/.expo/packager-info.json b/.expo/packager-info.json index 36cff4cb..ac02bb60 100644 --- a/.expo/packager-info.json +++ b/.expo/packager-info.json @@ -1,9 +1,10 @@ { - "expoServerPort": null, - "packagerPort": null, + "expoServerPort": 8081, + "packagerPort": 8081, "packagerPid": null, "expoServerNgrokUrl": null, "packagerNgrokUrl": null, "ngrokPid": null, - "webpackServerPort": null + "webpackServerPort": null, + "devToolsPort": 19002 } diff --git a/.expo/settings.json b/.expo/settings.json index 37f384fc..4377edd6 100644 --- a/.expo/settings.json +++ b/.expo/settings.json @@ -1,10 +1,10 @@ { - "scheme": "com.livelike.demo", "hostType": "lan", "lanType": "ip", "devClient": true, "dev": true, "minify": false, "urlRandomness": null, - "https": false + "https": false, + "scheme": "com.livelike.demo" } diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..df1aca84 --- /dev/null +++ b/.gitignore @@ -0,0 +1,106 @@ +# Built application files +*.apk +*.ap_ +*.aab + +# Files for the ART/Dalvik VM +*.dex + +# Java class files +*.class + +# Generated files +bin/ +gen/ +out/ +.idea/ +# Uncomment the following line in case you need and you don't have the release build type files in your app +# release/ + +# Gradle files +.gradle/ +build/ + +# expo files +.expo/packager-info.json +.expo/settings.json + +# Local configuration file (sdk path, etc) +local.properties + +# Proguard folder generated by Eclipse +proguard/ + +# Log Files +*.log + +# Android Studio Navigation editor temp files +.navigation/ + +# Android Studio captures folder +captures/ + +# IntelliJ +*.iml +.idea/workspace.xml +.idea/tasks.xml +.idea/gradle.xml +.idea/assetWizardSettings.xml +.idea/dictionaries +.idea/libraries +# Android Studio 3 in .gitignore file. +.idea/caches +.idea/modules.xml +# Comment next line if keeping position of elements in Navigation Editor is relevant for you +.idea/navEditor.xml +.idea/ +android/.idea/ + +# Keystore files +# Uncomment the following lines if you do not want to check your keystore files in. +#*.jks +#*.keystore + +# External native build folder generated in Android Studio 2.2 and later +.externalNativeBuild +.cxx/ + +# Google Services (e.g. APIs or Firebase) +# google-services.json + +# Freeline +freeline.py +freeline/ +freeline_project_description.json + +# fastlane +fastlane/report.xml +fastlane/Preview.html +fastlane/screenshots +fastlane/test_output +fastlane/readme.md + +# Version control +vcs.xml + +# lint +lint/intermediates/ +lint/generated/ +lint/outputs/ +lint/tmp/ +# lint/reports/ + +# Android Profiling +*.hprof + +#node_modules of commitizen library +node_modules/ +package.json +yarn.lock +android/.idea/gradle.xml +node_modules +ios/Pods/ +ios/Pods/boost-for-react-native/README.md +ios/Podfile.lock +android/.idea/gradle.xml +ios/Podfile.lock diff --git a/LiveLikeAndroidView.jsx b/LiveLikeAndroidView.jsx index 1a846812..6572291c 100644 --- a/LiveLikeAndroidView.jsx +++ b/LiveLikeAndroidView.jsx @@ -1,33 +1,287 @@ -import React, { useEffect, useRef } from 'react'; -import { UIManager, findNodeHandle } from 'react-native'; -import { PixelRatio} from "react-native"; -import { LiveLikeAndroidViewManager } from './android-view-manager'; - -const createFragment = (viewId) => - UIManager.dispatchViewManagerCommand( - viewId, - // we are calling the 'create' command - UIManager.LiveLikeAndroidViewManager.Commands.create.toString(), - [viewId] - ); +import React, {useEffect, useRef, useState} from 'react'; +import {findNodeHandle, NativeModules, requireNativeComponent, UIManager} from 'react-native'; + +export const LiveLikeChatWidgetView = requireNativeComponent('LiveLikeChatWidgetView'); +export const LiveLikeWidgetView = requireNativeComponent('LiveLikeWidgetView'); + +const clientId = "mOBYul18quffrBDuq2IACKtVuLbUzXIPye5S3bq5" + + + +// ClientID = BJSFlQAxraN9F99EcVOzpva7G8ohtJdGKpRdx3Ml +// let programId = "5337f725-f580-49b5-9697-822f69e6d16e" +// let chatRoomId = "65735146-5f90-4b75-bbcc-e1b75eff6014" + +// const programId = "08c5c27e-952d-4392-bd2a-c042db036ac5" +// const chatRoomId = "bda23d2a-da84-4fc1-bd39-7e9ddba73d71" // TODO: Pinned Message +// const chatRoomId = "bda23d2a-da84-4fc1-bd39-7e9ddba73d71" // TODO: Video Pinned New + + +// Messages + Pinned Video +const programId = "71add52f-dd99-42ac-8e96-743aaad41c3b" +const chatRoomId = "3b097ea8-2b74-42b7-a810-5853b9796e00" +// // https://cf-blast.livelikecdn.com/producer/applications/BJSFlQAxraN9F99EcVOzpva7G8ohtJdGKpRdx3Ml/chat-rooms/1ad3b3ae-c25f-4f3b-8873-727b1bf7ebbb/pinned-messages + + +// Sequential pinned messages +// const programId = "5337f725-f580-49b5-9697-822f69e6d16e" +// const chatRoomId = "65735146-5f90-4b75-bbcc-e1b75eff6014" +// const data = "{programId: '5337f725-f580-49b5-9697-822f69e6d16e', chatRoomId: '65735146-5f90-4b75-bbcc-e1b75eff6014', userAvatarUrl: 'https://websdk.livelikecdn.com/demo/assets/images/redrobot.png'}" +// https://cf-blast.livelikecdn.com/producer/applications/OPba08mrr8gLZ2UMQ3uWMBOLiGhfovgIeQAEfqgI/chat-rooms/65735146-5f90-4b75-bbcc-e1b75eff6014 + + +const {LiveLikeModule} = NativeModules + + +const sendMessage = (viewId, message, timeOut) => { + setTimeout(() => { + console.log('DEBUG: MESSAGE SENT: ', message) + UIManager.dispatchViewManagerCommand( + viewId, + UIManager.LiveLikeChatWidgetView.Commands.sendMessage.toString(), + [viewId, message] + ); + }, timeOut) +} + + +const updateNickName = (viewId, nickName) => { + UIManager.dispatchViewManagerCommand( + viewId, + UIManager.LiveLikeChatWidgetView.Commands.updateNickName.toString(), + [viewId, nickName] + ); +} + +const updateUserAvatar = (viewId, userAvatar) => { + UIManager.dispatchViewManagerCommand( + viewId, + UIManager.LiveLikeChatWidgetView.Commands.updateUserAvatar.toString(), + [viewId, userAvatar] + ); +} + +let redAvatar = "https://websdk.livelikecdn.com/demo/assets/images/redrobot.png" +let yellowAvatar = "https://websdk.livelikecdn.com/demo/assets/images/yellowrobot.png" + + +const TIME_DELAY = 13000 export const LiveLikeAndroidView = () => { - const ref = useRef(null); - - useEffect(() => { - const viewId = findNodeHandle(ref.current); - createFragment(viewId); - }, []); - - return ( - - ); -}; \ No newline at end of file + + const [show, setShow] = useState(true) + const [showAskWidget, setShowAskWidget] = useState(false) + const ref = useRef(null); + + useEffect(() => { + LiveLikeModule.initializeSDK(clientId) + }, []) + + + useEffect(() => { + console.log('SHOW CHAT: ', show) + }, [show]) + + useEffect(() => { + console.log('SHOW ASK: ', showAskWidget) + }, [showAskWidget]) + + + // useEffect(() => { + // let viewId = findNodeHandle(ref.current) + // setTimeout(() => { + // updateUserAvatar(viewId, yellowAvatar) + // }, 5000) + // }, []) + + // useEffect(() => { + // setTimeout(() => { + // setShowAskWidget(true) + // }, 5000) + // }, []) + // + // + // useEffect(() => { + // setTimeout(() => { + // setShow(!show) + // }, TIME_DELAY) + // }, [show]) + // + // useEffect(() => { + // let viewId = findNodeHandle(ref.current) + // if (show && viewId) { + // let message1 = 'Send ' + Math.floor(Math.random() * 100) + // let message2 = 'Send ' + Math.floor(Math.random() * 100) + // sendMessage(viewId, message1, 5000) + // sendMessage(viewId, message2, 8000) + // } + // }, [show]) + + + // useEffect(() => { + // setTimeout(() => { + // programId = "08c5c27e-952d-4392-bd2a-c042db036ac5" + // chatRoomId = "bda23d2a-da84-4fc1-bd39-7e9ddba73d71" + // }, TIME_DELAY * 1.5) + // }, []) + + return ( + { + LayoutAnimation.configureNext(LayoutAnimation.Presets.linear) + this.setState({widgetHeight: event.nativeEvent.height}) + }} + onWidgetHidden={(event) => { + LayoutAnimation.configureNext(LayoutAnimation.Presets.linear) + this.setState({widgetHeight: 0}) + }} + onEvent={event => { + }} + onChatMessageSent={(event) => { + console.log('DEBUG: ON CHAT MESSAGE SUCCESS', event.nativeEvent.message) + }} + onVideoPlayed={(event) => { + console.log('DEBUG: ON Video message Clicked', event.nativeEvent) + }} + onAskInfluencer={(event) => { + console.log('DEBUG: ON ASK INFLUENCER', event.nativeEvent) + }} + onRemoveAllPinMessages={(event) => { + console.log('DEBUG: ON REMOVE ALL PIN MESSAGES', event.nativeEvent) + }} + /> + ) +}; + + +/* + + { + LayoutAnimation.configureNext(LayoutAnimation.Presets.linear) + this.setState({widgetHeight: event.nativeEvent.height}) + }} + onWidgetHidden={(event) => { + LayoutAnimation.configureNext(LayoutAnimation.Presets.linear) + this.setState({widgetHeight: 0}) + }} + onEvent={event => { + }} + onChatMessageSent={(event) => { + console.log('DEBUG: ON CHAT MESSAGE SUCCESS', event.nativeEvent.message) + }} + onVideoPlayed={(event) => { + console.log('DEBUG: ON Video message Clicked', event.nativeEvent.videoUrl) + }} + onAskInfluencer={(event) => { + console.log('DEBUG: ON ASK INFLUENCER', event.nativeEvent) + }} + /> + + */ + +/* + + + { + setShow(!show) + }} + /> + + + { + LayoutAnimation.configureNext(LayoutAnimation.Presets.linear) + this.setState({widgetHeight: event.nativeEvent.height}) + }} + onWidgetHidden={(event) => { + LayoutAnimation.configureNext(LayoutAnimation.Presets.linear) + this.setState({widgetHeight: 0}) + }} + onEvent={event => { + }} + onChatMessageSent={(event) => { + console.log('DEBUG: ON CHAT MESSAGE SUCCESS', event.nativeEvent.message) + }} + onVideoPlayed={(event) => { + console.log('DEBUG: ON Video message Clicked', event.nativeEvent.videoUrl) + }} + onAskInfluencer={(event) => { + console.log('DEBUG: ON ASK INFLUENCER', event.nativeEvent) + }} + /> + + + + + { + console.log('DEBUG1:', 'widget shown') + }} + onWidgetHidden={(event) => { + console.log('DEBUG2:', 'widget hidden') + }} + /> + + + + useEffect(() => { + setTimeout(() => { + LiveLikeModule.subscribeUserStream("nickName").then(nickName => { + console.log('NICKNAME', nickName) + }) + }, 2000) + }, []) + + + useEffect(() => { + const newMessage = 'Hey, New Message' + Math.floor(Math.random() * 100) + const viewId = findNodeHandle(ref.current); + setTimeout(() => { + sendMessage(viewId, newMessage) + }, 5000) + }, []) + + + */ \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 00000000..ebcfd362 --- /dev/null +++ b/README.md @@ -0,0 +1,32 @@ + +## Run Application + +Clone the project + +```bash + git clone https://github.com/LiveLike/ReactNativeWrapperExample +``` + +Go to the project directory + +```bash + cd ReactNativeWrapperExample +``` + +Install dependencies + +```bash + npm install +``` + +Run on iOS + +```bash + npm run iOS +``` + +Run on Android + +```bash + npm run Android +``` diff --git a/android-view-manager.jsx b/android-view-manager.jsx deleted file mode 100644 index 32a270b5..00000000 --- a/android-view-manager.jsx +++ /dev/null @@ -1,5 +0,0 @@ -import { requireNativeComponent } from 'react-native'; - -export const LiveLikeAndroidViewManager = requireNativeComponent( - 'LiveLikeAndroidViewManager' -); \ No newline at end of file diff --git a/android/.expo/settings.json b/android/.expo/settings.json new file mode 100644 index 00000000..92bc513b --- /dev/null +++ b/android/.expo/settings.json @@ -0,0 +1,8 @@ +{ + "hostType": "lan", + "lanType": "ip", + "dev": true, + "minify": false, + "urlRandomness": null, + "https": false +} diff --git a/android/.idea/gradle.xml b/android/.idea/gradle.xml index f9c779e9..09d2578b 100644 --- a/android/.idea/gradle.xml +++ b/android/.idea/gradle.xml @@ -33,6 +33,5 @@ -