setVideocall(true)}>Start Call
+ ) +} + +export default App +``` + +**Replace the `'
+
+ )
+}
+
+const styles = {
+ container: { width: '100vw', height: '100vh', display: 'flex', flex: 1, backgroundColor: '#007bff22'},
+ heading: { textAlign: 'center' as const, marginBottom: 0 },
+ videoContainer: { display: 'flex', flexDirection: 'column', flex: 1 } as React.CSSProperties,
+ nav: { display: 'flex', justifyContent: 'space-around' },
+ btn: { backgroundColor: '#007bff', cursor: 'pointer', borderRadius: 5, padding: 5, color: '#ffffff', fontSize: 20 },
+}
+
+export default App
diff --git a/example/src/index.css b/example/src/index.css
new file mode 100644
index 0000000..e2bd8f3
--- /dev/null
+++ b/example/src/index.css
@@ -0,0 +1,14 @@
+body {
+ margin: 0;
+ padding: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+}
diff --git a/example/src/index.tsx b/example/src/index.tsx
new file mode 100644
index 0000000..90b6253
--- /dev/null
+++ b/example/src/index.tsx
@@ -0,0 +1,7 @@
+import './index.css'
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+ReactDOM.render(
+ setVideocall(false),
+ }} />
+ ) : (
+
+ Agora React Web UI Kit
+ {videocall ? (<> +
+
+ You're {role ? 'an audience' : 'a host'}
+setRole(!role)}>Change Role
+setPinned(!isPinned)}>Change Layout
+
+
+ )}
+ setVideocall(true)}>Start Call
+
+ {rtcProps.role === 'audience' ? (
+
+
+ )}
+
+
+ {customIcon ? (
+ 
+ ) : (
+
+ )}
+
+ )
+}
+
+export default BtnTemplate
diff --git a/src/Controls/Icons.tsx b/src/Controls/Icons.tsx
new file mode 100644
index 0000000..21b6295
--- /dev/null
+++ b/src/Controls/Icons.tsx
@@ -0,0 +1,49 @@
+import React from 'react'
+
+const icons = {
+ videocam: (
+
+ mute(local, dispatch)}
+ />
+
+ )
+}
+
+export default LocalAudioMute
diff --git a/src/Controls/Local/LocalVideoMute.tsx b/src/Controls/Local/LocalVideoMute.tsx
new file mode 100644
index 0000000..8896d72
--- /dev/null
+++ b/src/Controls/Local/LocalVideoMute.tsx
@@ -0,0 +1,64 @@
+import React, { useContext } from 'react'
+import RtcContext, { DispatchType } from '../../RtcContext'
+import BtnTemplate from '../BtnTemplate'
+import { LocalContext } from '../../LocalUserContext'
+import PropsContext, { LocalUIKitUser, ToggleState } from '../../PropsContext'
+
+function LocalVideoMute() {
+ const { styleProps } = useContext(PropsContext)
+ const { localBtnStyles } = styleProps || {}
+ const { muteLocalVideo } = localBtnStyles || {}
+ const { dispatch, localVideoTrack } = useContext(RtcContext)
+ const local = useContext(LocalContext)
+
+ const mute = async (user: LocalUIKitUser, dispatch: DispatchType) => {
+ if (user.uid === 0) {
+ const localState = user.hasVideo
+ if (
+ localState === ToggleState.enabled ||
+ localState === ToggleState.disabled
+ ) {
+ // Disable UI
+ dispatch({
+ type: 'local-user-mute-video',
+ value: [
+ localState === ToggleState.enabled
+ ? ToggleState.disabling
+ : ToggleState.enabling
+ ]
+ })
+ try {
+ await localVideoTrack?.setEnabled(localState !== ToggleState.enabled)
+ // Enable UI
+ dispatch({
+ type: 'local-user-mute-video',
+ value: [
+ localState === ToggleState.enabled
+ ? ToggleState.disabled
+ : ToggleState.enabled
+ ]
+ })
+ } catch (e) {
+ dispatch({
+ type: 'local-user-mute-video',
+ value: [localState]
+ })
+ }
+ }
+ }
+ }
+
+ return (
+
+ mute(local, dispatch)}
+ />
+
+ )
+}
+
+export default LocalVideoMute
diff --git a/src/Controls/LocalControls.tsx b/src/Controls/LocalControls.tsx
new file mode 100644
index 0000000..4ef78d4
--- /dev/null
+++ b/src/Controls/LocalControls.tsx
@@ -0,0 +1,37 @@
+import React, { useContext } from 'react'
+import EndCall from './Local/EndCall'
+import LocalAudioMute from './Local/LocalAudioMute'
+import LocalVideoMute from './Local/LocalVideoMute'
+import LocalUserContextComponent from '../LocalUserContext'
+import PropsContext from '../PropsContext'
+
+function LocalControls() {
+ const { styleProps, rtcProps } = useContext(PropsContext)
+ const { localBtnContainer } = styleProps || {}
+
+ return (
+
+ {rtcProps.role === 'host' &&
+
+ mute()}
+ />
+
+ ) : (
+
+ mute()}
+ />
+
+ ) : (
+
+ dispatch({ type: 'user-swap', value: [UIKitUser] })}
+ />
+
+ )
+}
+
+export default SwapUser
diff --git a/src/GridVideo.tsx b/src/GridVideo.tsx
new file mode 100644
index 0000000..75028b0
--- /dev/null
+++ b/src/GridVideo.tsx
@@ -0,0 +1,75 @@
+import React, { useContext, useEffect, useRef, useState } from 'react'
+import MinUidContext from './MinUidContext'
+import MaxUidContext from './MaxUidContext'
+import PropsContext from './PropsContext'
+import MaxVideoView from './MaxVideoView'
+
+const GridVideo: React.FC = () => {
+ const { styleProps, rtcProps } = useContext(PropsContext)
+ const { gridVideoCells, gridVideoContainer } = styleProps || {}
+ const max = useContext(MaxUidContext)
+ const min = useContext(MinUidContext)
+ const users =
+ rtcProps.role === 'audience'
+ ? [...max, ...min].filter((user) => user.uid !== 0)
+ : [...max, ...min]
+ const parentRef = useRef 9
+ ? unit.repeat(4)
+ : users.length > 4
+ ? unit.repeat(3)
+ : users.length > 1
+ ? unit.repeat(2)
+ : unit
+ : users.length > 8
+ ? unit.repeat(3)
+ : users.length > 2
+ ? unit.repeat(2)
+ : unit
+ },
+ ...gridVideoContainer
+ }}
+ >
+ {users.map((user) => (
+
+ )
+}
+
+export default GridVideo
diff --git a/src/LocalUserContext.tsx b/src/LocalUserContext.tsx
new file mode 100644
index 0000000..0707151
--- /dev/null
+++ b/src/LocalUserContext.tsx
@@ -0,0 +1,31 @@
+import React, { useContext, createContext } from 'react'
+import MaxUidContext from './MaxUidContext'
+import MinUidContext from './MinUidContext'
+import { LocalUIKitUser } from './PropsContext'
+
+export const LocalContext = createContext setIsShown(true)}
+ onMouseLeave={() => setIsShown(false)}
+ >
+ {user.hasVideo === 1 ? (
+ // hasVideo is 1 if the local user has video enabled, or if remote user video is subbed
+
+ )
+}
+
+export default MaxVideoView
diff --git a/src/MinUidContext.tsx b/src/MinUidContext.tsx
new file mode 100644
index 0000000..ecc079a
--- /dev/null
+++ b/src/MinUidContext.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import { UIKitUser } from './PropsContext'
+
+const MinUidContext = React.createContext
+
+ ) : (
+
+
+ )}
+ setIsShown(true)}
+ onMouseLeave={() => setIsShown(false)}
+ >
+ {user.hasVideo === 1 ? (
+
+ )
+}
+
+export default MinVideoView
diff --git a/src/PinnedVideo.tsx b/src/PinnedVideo.tsx
new file mode 100644
index 0000000..6cb02fb
--- /dev/null
+++ b/src/PinnedVideo.tsx
@@ -0,0 +1,109 @@
+import React, { useContext, useEffect, useRef, useState } from 'react'
+import { MinUidConsumer } from './MinUidContext'
+import { MaxUidConsumer } from './MaxUidContext'
+import MaxVideoView from './MaxVideoView'
+import MinVideoView from './MinVideoView'
+import PropsContext from './PropsContext'
+import styles from './styles.module.css'
+
+const PinnedVideo: React.FC = () => {
+ const { styleProps, rtcProps } = useContext(PropsContext)
+ const {
+ minViewContainer,
+ pinnedVideoContainer,
+ maxViewContainer,
+ scrollViewContainer
+ } = styleProps || {}
+ const parentRef = useRef
+
+ ) : (
+
+
+ )}
+
+
+ )
+}
+
+export default PinnedVideo
diff --git a/src/PropsContext.tsx b/src/PropsContext.tsx
new file mode 100644
index 0000000..9b4dbcf
--- /dev/null
+++ b/src/PropsContext.tsx
@@ -0,0 +1,557 @@
+import {
+ IAgoraRTCClient,
+ VideoPlayerConfig,
+ IRemoteAudioTrack,
+ IRemoteVideoTrack,
+ ILocalVideoTrack,
+ ILocalAudioTrack,
+ UID,
+ RemoteStreamFallbackType,
+ ConnectionState,
+ ConnectionDisconnectedReason,
+ IAgoraRTCRemoteUser,
+ RemoteStreamType,
+ ChannelMediaRelayState,
+ ChannelMediaRelayError,
+ ChannelMediaRelayEvent,
+ NetworkQuality,
+ AgoraRTCError,
+ IMicrophoneAudioTrack,
+ ICameraVideoTrack
+} from 'agora-rtc-react'
+import React from 'react'
+
+interface media {
+ videoTrack?: IRemoteVideoTrack
+ audioTrack?: IRemoteAudioTrack
+}
+interface localMedia {
+ videoTrack?: ILocalVideoTrack
+ audioTrack?: ILocalAudioTrack
+}
+
+export type mediaStore = {
+ [key in UID]: media | localMedia
+}
+
+export enum remoteTrackState {
+ yes = 0, // remote published
+ subbed = 1, // remote published and subscribed
+ no = 2 // remote unpublished
+}
+
+export type UIKitUser = RemoteUIKitUser | LocalUIKitUser
+export interface LocalUIKitUser {
+ /**
+ * The ID of the remote user.
+ */
+ uid: 0
+ /**
+ * Whether the remote user is sending an audio track.
+ * - `true`: The remote user is sending an audio track.
+ * - `false`: The remote user is not sending an audio track.
+ */
+ hasAudio: ToggleState
+ /**
+ * Whether the remote user is sending a video track.
+ * - `true`: The remote user is sending an audio track.
+ * - `false`: The remote user is not sending an audio track.
+ */
+ hasVideo: ToggleState
+}
+export interface RemoteUIKitUser {
+ /**
+ * The ID of the remote user.
+ */
+ uid: UID
+ /**
+ * Whether the remote user is sending an audio track.
+ * - `true`: The remote user is sending an audio track.
+ * - `false`: The remote user is not sending an audio track.
+ */
+ hasAudio: remoteTrackState
+ /**
+ * Whether the remote user is sending a video track.
+ * - `true`: The remote user is sending an audio track.
+ * - `false`: The remote user is not sending an audio track.
+ */
+ hasVideo: remoteTrackState
+}
+
+// // import { StyleProp, ViewStyle } from 'react-native'
+// // import { StreamFallbackOptions, VideoRenderMode } from 'react-native-agora'
+// // import { RtcEngineEvents } from 'react-native-agora/src/common/RtcEvents'
+// // import {IAgoraRTCClient} from 'agora-rtc-react'
+// /**
+// * The user object
+// */
+// interface UidInterface {
+// // TODO: refactor local to 0 and remove string.
+// uid: number | string
+// audio: boolean
+// video: boolean
+// }
+
+/**
+ * Remote Buttons styles
+ */
+interface remoteBtnStylesInterface {
+ /**
+ * Style for the remote mute audio button
+ */
+ muteRemoteAudio?: React.CSSProperties
+ /**
+ * Style for the remote mute video button
+ */
+ muteRemoteVideo?: React.CSSProperties
+ /**
+ * Style for the remote swap button in pinned layout
+ */
+ remoteSwap?: React.CSSProperties
+ /**
+ * Style for the overlay close button
+ */
+ minCloseBtnStyles?: React.CSSProperties
+}
+
+/**
+ * Local Buttons styles
+ */
+interface localBtnStylesInterface {
+ /**
+ * Style for the local mute audio button
+ */
+ muteLocalAudio?: React.CSSProperties
+ /**
+ * Style for the local mute video button
+ */
+ muteLocalVideo?: React.CSSProperties
+ /**
+ * Style for the switch camera button
+ */
+ switchCamera?: React.CSSProperties
+ /**
+ * Style for the end call button
+ */
+ endCall?: React.CSSProperties
+}
+
+/**
+ * Props object for customising the UI Kit, takes in react native styling
+ */
+export interface StylePropInterface {
+ /**
+ * Sets the scaling of the video
+ */
+ videoMode?: {
+ max?: VideoPlayerConfig['fit']
+ min?: VideoPlayerConfig['fit']
+ }
+ /**
+ * Color tint for icons
+ */
+ theme?: string
+ /**
+ * Color tint for icons
+ */
+ iconSize?: number
+ /**
+ * Custom base64 string for icon
+ */
+ customIcon?: Partial
+
+ {(maxUsers) =>
+ rtcProps.role === 'audience' && maxUsers[0].uid === 0 ? null : (
+
+
+
+
+ {(minUsers) =>
+ minUsers.map((user) =>
+ rtcProps.role === 'audience' && user.uid === 0 ? null : (
+
+
+
+
+ )
+ )
+ }
+
+
+ ) : (
+ CustomVideoPlaceholder && CustomVideoPlaceholder({ ...props }, null)
+ )
+}
+
+const style = {
+ max: {
+ flex: 1,
+ display: 'flex',
+ backgroundColor: '#007bff33',
+ flexDirection: 'row',
+ position: 'relative'
+ } as React.CSSProperties,
+ imgContainer: {
+ flex: 10,
+ display: 'flex',
+ justifyContent: 'center'
+ },
+ img: {
+ width: 100,
+ height: 100,
+ position: 'absolute',
+ alignSelf: 'center',
+ justifySelf: 'center',
+ margin: 'auto',
+ display: 'flex'
+ } as React.CSSProperties,
+ btnContainer: {
+ position: 'absolute',
+ margin: 5,
+ flexDirection: 'column',
+ display: 'flex'
+ } as React.CSSProperties
+}
+
+export default VideoPlaceholder
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..bd9d934
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,57 @@
+/**
+ * @module agora-rn-uikit
+ */
+import AgoraUIKit from './AgoraUIKit'
+import LocalVideoMute from './Controls/Local/LocalVideoMute'
+import LocalAudioMute from './Controls/Local/LocalAudioMute'
+import EndCall from './Controls/Local/EndCall'
+import BtnTemplate from './Controls/BtnTemplate'
+import icons from './Controls/Icons'
+import LocalControls from './Controls/LocalControls'
+import RemoteAudioMute from './Controls/Remote/RemoteAudioMute'
+import RemoteVideoMute from './Controls/Remote/RemoteVideoMute'
+import SwapUser from './Controls/SwapUser'
+import GridVideo from './GridVideo'
+import PinnedVideo from './PinnedVideo'
+import MaxVideoView from './MaxVideoView'
+import MinVideoView from './MinVideoView'
+import VideoPlaceholder from './VideoPlaceholder'
+import RtcConfigure from './RTCConfigure'
+import LocalUserContext from './LocalUserContext'
+import MinUidContext from './MinUidContext'
+import MaxUidContext from './MaxUidContext'
+import PropsContext from './PropsContext'
+import RtcContext from './RtcContext'
+import TracksConfigure from './TracksConfigure'
+export default AgoraUIKit
+export {
+ RemoteVideoMute,
+ RemoteAudioMute,
+ SwapUser,
+ LocalVideoMute,
+ LocalAudioMute,
+ EndCall,
+ BtnTemplate,
+ icons,
+ LocalControls,
+ GridVideo,
+ PinnedVideo,
+ MaxVideoView,
+ MinVideoView,
+ VideoPlaceholder,
+ RtcConfigure,
+ TracksConfigure,
+ LocalUserContext,
+ MaxUidContext,
+ MinUidContext,
+ PropsContext,
+ RtcContext
+}
+
+export type {
+ RtcPropsInterface,
+ StylePropInterface,
+ PropsInterface,
+ VideoPlaceholderProps
+} from './PropsContext'
+export { layout } from './PropsContext'
diff --git a/src/styles.module.css b/src/styles.module.css
new file mode 100644
index 0000000..bf2d55e
--- /dev/null
+++ b/src/styles.module.css
@@ -0,0 +1,23 @@
+/* add css module styles here (optional) */
+
+.test {
+ margin: 2em;
+ padding: 0.5em;
+ border: 2px solid #000;
+ font-size: 2em;
+ text-align: center;
+}
+
+.scrollbar::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+.scrollbar::-webkit-scrollbar-track {
+ background: #ccc;
+}
+.scrollbar::-webkit-scrollbar-thumb {
+ background: #007bffcc;
+}
+.scrollbar::-webkit-scrollbar-thumb:hover {
+ background: #007bff;
+}
\ No newline at end of file
diff --git a/src/typings.d.ts b/src/typings.d.ts
new file mode 100644
index 0000000..2c5b76f
--- /dev/null
+++ b/src/typings.d.ts
@@ -0,0 +1,18 @@
+/**
+ * Default CSS definition for typescript,
+ * will be overridden with file-specific definitions by rollup
+ */
+declare module '*.css' {
+ const content: { [className: string]: string }
+ export default content
+}
+
+interface SvgrComponent
+ extends React.FunctionComponent
+ 
+
+ {props.isShown && (
+
+
+ {props.showButtons && (
+
+
+ )}
+
+ )}
+