@mohamed-karawia/react-storybook 0.1.1

package/src/stories/Agora/Chat/Components/ChatItem/ChatItem.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const ChatItem = ({ onClick, channelName, channelCaption }) => {
+  return (
+    <Item onClick={onClick}>
+      <ChannelName>{channelName}</ChannelName>
+      <ChannelTagLine>{channelCaption}</ChannelTagLine>
+    </Item>
+  );
+};
+
+const Item = styled.div`
+  margin-top: 10px;
+  width: 70%;
+  height: 60px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid black;
+  border-radius: 20px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 10px;
+  background-color: aliceblue;
+  font-family: Arial, Helvetica, sans-serif;
+  cursor: pointer;
+`;
+
+const ChannelName = styled.label`
+  font-size: 18px;
+`;
+const ChannelTagLine = styled.label`
+  font-size: 14px;
+  color: grey;
+  margin-top: 10px;
+`;
+
+export default ChatItem;

package/src/stories/Agora/Chat/Components/ChatRoom/ChatRoom.jsx

@@ -0,0 +1,167 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import AgoraRTM from 'agora-rtm-sdk';
+
+const appID = '3f54ddbde65d4f0ab9a9f5a46baa4310';
+const client = AgoraRTM.createInstance(appID);
+
+const ChatRoom = ({ setInChannel, channelName, user }) => {
+  const [message, setMessage] = useState('');
+  const [messages, setMessages] = useState([]);
+  const channel = useRef(client.createChannel(channelName)).current;
+  useEffect(() => {
+    channel.on('ChannelMessage', function (message, memberId) {
+      console.log('channel message:', message, 'from:', memberId);
+      setMessages((messages) => [
+        ...messages,
+        { text: message.text, author: memberId },
+      ]);
+      updateScroll();
+    });
+    channel.on('MemberJoined', function (memberId) {
+      console.log('member joined:', memberId);
+    });
+    channel.on('MemberLeft', function (memberId) {
+      console.log('member left:', memberId);
+    });
+  }, [client, channel]);
+
+  useEffect(() => {
+    login();
+    return () => {
+      channel.leave();
+      client.logout();
+    };
+  }, []);
+  const login = async () => {
+    await client.login({ uid: user.name, token: user.token });
+    await channel.join().then(() => {
+      console.log('joined successfully');
+    });
+  };
+
+  const sendMessage = async (message) => {
+    console.log('message', message);
+    await channel.sendMessage({ text: message }).then(() => {
+      console.log('message sent successfully');
+      setMessages((messages) => [...messages, { text: message, author: 'me' }]);
+      updateScroll();
+    });
+  };
+  const updateScroll = () => {
+    var element = document.getElementById('chat');
+    element.scrollTop = element.scrollHeight;
+  };
+  return (
+    <Container>
+      <button
+        onClick={() => {
+          channel.leave();
+          setInChannel(false);
+        }}
+      >
+        Go to Channels
+      </button>
+      <LabelContainer>
+        <label>Welcome to {channelName}</label>
+      </LabelContainer>
+      <ChatContainer id='chat'>
+        {messages.map((message) => {
+          console.log(message);
+          if (message.author === 'me') {
+            return (
+              <Sent>
+                <Sender>{message.author}:</Sender>
+                <Message>{message.text}</Message>
+              </Sent>
+            );
+          } else {
+            return (
+              <Received>
+                <Sender>{message.author}:</Sender>
+                <Message>{message.text}</Message>
+              </Received>
+            );
+          }
+        })}
+      </ChatContainer>
+
+      <ChatInputContainer>
+        <ChatInput
+          placeholder='Type your message'
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          onKeyUp={(e) => {
+            console.log('message', e.target.value);
+            if (e.key === 'Enter') {
+              sendMessage(e.target.value);
+              setMessage('');
+            }
+          }}
+        />
+      </ChatInputContainer>
+    </Container>
+  );
+};
+const Container = styled.div`
+  width: 100%;
+`;
+
+const ChatContainer = styled.div`
+  width: 100%;
+  height: 350px;
+  border: 1px solid black;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  margin: auto;
+  padding-bottom: 10px;
+  font-family: Arial, Helvetica, sans-serif;
+`;
+
+const Received = styled.div`
+  border: 1px solid #fdfdfd;
+  width: 50%;
+  margin: 15px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 20px;
+  background-color: #f5f5f5;
+  font-weight: 500;
+`;
+
+const Sent = styled.div`
+  border: 1px solid #fdfdfd;
+  border-radius: 20px;
+  background-color: blue;
+  color: white;
+  font-weight: 500;
+  width: 50%;
+  margin: 15px;
+  margin-left: auto;
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+`;
+const Sender = styled.label``;
+
+const Message = styled.label`
+  margin-left: 5px;
+`;
+const ChatInputContainer = styled.div`
+  margin-top: 20px;
+`;
+const ChatInput = styled.input`
+  width: 100%;
+  height: 30px;
+  border: 1px solid black;
+  margin: auto;
+  display: flex;
+  padding: 3px;
+`;
+const LabelContainer = styled.div`
+  display: flex;
+  justify-content: center;
+`;
+export default ChatRoom;

package/src/stories/Agora/Controls/Controls.jsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import ShareScreen from '../Preview/ShareScreen';
+
+const Controls = ({ muteVideo, pauseVideo }) => {
+  const [muted, setMuted] = useState(false);
+  const [stopVideo, setStopVideo] = useState(false);
+  const [screenShared, setScreenShared] = useState(false);
+  return (
+    <Container>
+      <MuteButton
+        onClick={() => {
+          setMuted(!muted);
+          muteVideo(!muted);
+        }}
+        muted={muted}
+      >
+        Mute
+      </MuteButton>
+      <StopVideoButton
+        onClick={() => {
+          setStopVideo(!stopVideo);
+          pauseVideo(!stopVideo);
+        }}
+        stopped={stopVideo}
+      >
+        Stop Video
+      </StopVideoButton>
+      <ShareScreenButton
+        onClick={() => {
+          setScreenShared(!screenShared);
+        }}
+        color={screenShared}
+      >
+        {screenShared ? 'Stop' : 'Share'} Screen
+      </ShareScreenButton>
+      {screenShared && <ShareScreen />}
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  margin-left: 120px;
+`;
+const MuteButton = styled.button`
+  background-color: ${(props) => (props.muted ? 'black' : 'grey')};
+`;
+
+const StopVideoButton = styled.button`
+  background-color: ${(props) => (props.stopped ? 'black' : 'grey')};
+`;
+
+const ShareScreenButton = styled.button`
+  background-color: ${(props) => (props.color ? 'blue' : 'grey')};
+`;
+export default Controls;

package/src/stories/Agora/Preview/PreviewCamera.jsx

@@ -0,0 +1,259 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  createCameraVideoTrack,
+  getDevices,
+  createClient,
+  createMicrophoneAudioTrack,
+} from 'agora-rtc-react';
+import styled from 'styled-components';
+const rtc = {
+  localVideoTrack: null,
+  localAudioTrack: null,
+};
+
+var options = {
+  appid: '3f54ddbde65d4f0ab9a9f5a46baa4310',
+  channel: 'bcd',
+  uid: '123',
+  token:
+    '0063f54ddbde65d4f0ab9a9f5a46baa4310IAALsgGjVTL2Av/GANIuUU61cNObFj9T7krqkn2UG1uXeHlbHbAAAAAAEAAw9+/yVoJUYQEAAQBWglRh',
+  audienceLatency: 2,
+};
+const createCameraTrack = createCameraVideoTrack();
+const createAudioTrack = createMicrophoneAudioTrack();
+const useuplinkClient = createClient();
+const usedownlinkClient = createClient();
+
+export const PreviewCamera = ({ getDeviceIds, token, uid, uid2, token2 }) => {
+  const [audioDevices, setAudioDevices] = useState([]);
+  const [videoDevices, setVideoDevices] = useState([]);
+  const [selectedAudioDevice, setSelectedAudioDevice] = useState();
+  const [selectedVideoDevice, setSelectedVideoDevice] = useState();
+  const [muted, setMuted] = useState(false);
+  const uplinkClient = useuplinkClient();
+  const downlinkClient = usedownlinkClient();
+  const localVideo = createCameraTrack();
+  const localAudio = createAudioTrack();
+  rtc.localAudioTrack = localAudio.track;
+  rtc.localVideoTrack = localVideo.track;
+  const localPlayerContainer = document.createElement('div');
+  localPlayerContainer.id = 'player';
+  if (localPlayerContainer && rtc.localVideoTrack) {
+    localPlayerContainer.style.width = '450px';
+    localPlayerContainer.style.height = '360px';
+    localPlayerContainer.style.borderRadius = '10px';
+    const container = document.getElementById('playerContainer');
+    container.appendChild(localPlayerContainer);
+    rtc.localVideoTrack.play(localPlayerContainer);
+  }
+
+  useEffect(() => {
+    getDevices().then((devices) => {
+      const audioDeviceList = devices.filter(function (device) {
+        return device.kind === 'audioinput';
+      });
+      const videoDeviceList = devices.filter(function (device) {
+        return device.kind === 'videoinput';
+      });
+      setSelectedAudioDevice(audioDeviceList[0]?.deviceId);
+      setAudioDevices(audioDeviceList);
+      setSelectedVideoDevice(videoDeviceList[0]?.deviceId);
+      setVideoDevices(videoDeviceList);
+    });
+
+    return () => {
+      rtc.localVideoTrack.stop();
+      rtc.localVideoTrack.close();
+      rtc.localAudioTrack.stop();
+      rtc.localAudioTrack.close();
+      uplinkClient.leave();
+      downlinkClient.leave();
+      uplinkClient.removeAllListeners();
+      downlinkClient.removeAllListeners();
+      const player = document.getElementById('player');
+      player.remove();
+     
+    };
+  }, []);
+  useEffect(() => {
+    let init = async () => {
+      downlinkClient.on('user-published', (user, mediaType) => {
+        downlinkClient.subscribe(user, mediaType);
+      });
+      downlinkClient.on('network-quality', (quality) => {
+        const networkQuality = quality.downlinkNetworkQuality;
+        const networkAdapters = document.getElementsByClassName(
+          'networkAdapter'
+        );
+        networkAdapters.forEach((networkAdapter) => {
+          if (networkQuality === 1) {
+            networkAdapter.style.backgroundColor = 'green';
+          }
+          if (networkQuality === 3) {
+            networkAdapter.style.backgroundColor = 'yellow';
+          }
+          if (networkQuality === 5) {
+            networkAdapter.style.backgroundColor = 'red';
+          }
+        });
+      });
+      uplinkClient.on('network-quality', (quality) => {
+        const networkQuality = quality.uplinkNetworkQuality;
+        const networkAdapters = document.getElementsByClassName(
+          'networkAdapter'
+        );
+        networkAdapters.forEach((networkAdapter) => {
+          if (networkQuality === 1) {
+            networkAdapter.style.backgroundColor = 'green';
+          }
+          if (networkQuality === 3) {
+            networkAdapter.style.backgroundColor = 'yellow';
+          }
+          if (networkQuality === 5) {
+            networkAdapter.style.backgroundColor = 'red';
+          }
+        });
+      });
+
+      await uplinkClient.join(
+        options.appid,
+        options.channel,
+        token || null,
+        uid
+      );
+      await downlinkClient.join(
+        options.appid,
+        options.channel,
+        token2 || null,
+        uid2
+      );
+      uplinkClient.publish([rtc.localAudioTrack, rtc.localVideoTrack]);
+    };
+    if (rtc.localAudioTrack && rtc.localVideoTrack) {
+      init();
+    }
+  }, [rtc.localAudioTrack, rtc.localVideoTrack]);
+  getDeviceIds({ selectedAudioDevice, selectedVideoDevice });
+
+  // Get the uplink statistics
+  const uplinkVideoStats = uplinkClient.getLocalVideoStats();
+
+  return (
+    <Container>
+      <h1>handsome preview</h1>
+      {/* <button
+        onClick={() => {
+          setMuted(!muted);
+        }}
+        style={{
+          backgroundColor: `${muted ? 'black' : 'grey'}`,
+          color: 'white',
+        }}
+      >
+        Mute
+      </button> */}
+      <OptionContainer>
+        <TextContainer>
+          <h3>Audio Device</h3>
+        </TextContainer>
+        <DropDownContainer>
+          <select>
+            {audioDevices?.map((audioDevice, i) => {
+              return (
+                <option
+                  onClick={() => {
+                    setSelectedAudioDevice(audioDevice.id);
+                  }}
+                  key={i}
+                >
+                  {audioDevice.label}
+                </option>
+              );
+            })}
+          </select>
+        </DropDownContainer>
+      </OptionContainer>
+      <OptionContainer>
+        <TextContainer>
+          <h3>Video device</h3>
+        </TextContainer>
+        <DropDownContainer>
+          <select>
+            {videoDevices?.map((videoDevice, i) => {
+              return (
+                <option
+                  onClick={() => {
+                    setSelectedVideoDevice(videoDevice.id);
+
+                    rtc.localVideoTrack.setDevice(videoDevice.id).then(() => {
+                    });
+                  }}
+                  key={i}
+                >
+                  {videoDevice.label}
+                </option>
+              );
+            })}
+          </select>
+        </DropDownContainer>
+      </OptionContainer>
+      <OptionContainer>
+        <NetworkContainer>
+          <TextContainer>
+            <h3>Network Quality</h3>
+          </TextContainer>
+          <NetworkAdapterContainer>
+            <NetworkAdapter className='networkAdapter' />
+            <NetworkAdapter className='networkAdapter' />
+            <NetworkAdapter className='networkAdapter' />
+            <NetworkAdapter className='networkAdapter' />
+            <NetworkAdapter className='networkAdapter' />
+          </NetworkAdapterContainer>
+        </NetworkContainer>
+      </OptionContainer>
+      <div id='playerContainer'>
+        <div id='player'></div>
+      </div>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const OptionContainer = styled.div`
+  display: flex;
+  align-items: center;
+  width: 50%;
+  justify-content: space-between;
+  border-bottom: 1px solid grey;
+`;
+
+const TextContainer = styled.div`
+  /* margin-right: 20px; */
+`;
+const DropDownContainer = styled.div`
+  height: 20px;
+  width: 40%;
+  margin-bottom: 5px;
+`;
+
+const NetworkContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`;
+const NetworkAdapterContainer = styled.div`
+  border: 1px solid black;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 57px;
+`;
+const NetworkAdapter = styled.div`
+  width: 10px;
+  height: 10px;
+`;

package/src/stories/Agora/Preview/ShareScreen.jsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { createScreenVideoTrack, createClient } from 'agora-rtc-react';
+import styled from 'styled-components';
+const rtc = {
+  localVideoTrack: null,
+};
+const config = {
+  mode: 'rtc',
+  codec: 'vp8',
+};
+const createScreenTrack = () =>
+  createScreenVideoTrack({
+    encoderConfig: '480p_1',
+    optimizationMode: 'detail',
+  });
+var options = {
+  appid: '3f54ddbde65d4f0ab9a9f5a46baa4310',
+  channel: 'bcd',
+  uid: '123',
+  token:
+    '0063f54ddbde65d4f0ab9a9f5a46baa4310IABfwrauypm943Sff/0EgA8ZZgYszFEd918opDbcDyTQMnlbHbAAAAAAEAApikciJ9RVYQEAAQAn1FVh',
+  audienceLatency: 2,
+};
+const useClient = createClient(config);
+const ShareScreen = () => {
+  const client = useClient();
+  const [uid, setUid] = useState();
+  const [token, setToken] = useState();
+  const useLocalScreenTrack = createScreenTrack();
+  rtc.localVideoTrack = useLocalScreenTrack().tracks;
+  useEffect(() => {
+    const _uid = Math.floor(Math.random() * 1000);
+    setUid(_uid);
+    axios.get(`/getToken/${_uid}`).then((res) => setToken(res.data.token));
+  }, []);
+  useEffect(() => {
+    let init = async () => {
+      await client.join(options.appid, options.channel, token, uid);
+      await client.publish(rtc.localVideoTrack);
+    };
+    if (rtc.localVideoTrack && uid && token) {
+      init();
+    }
+  }, [client, rtc.localVideoTrack, uid, token]);
+
+  useEffect(() => {
+    return () => {
+      rtc.localVideoTrack.stop();
+      rtc.localVideoTrack.close();
+      client.leave();
+      client.removeAllListeners();
+    };
+  }, []);
+  return <div></div>;
+};
+
+export default ShareScreen;

package/src/stories/Agora/Room/Room.jsx

@@ -0,0 +1,85 @@
+import React, { useState, useRef, useEffect } from 'react';
+import axios from 'axios';
+import { PreviewCamera } from '../Preview/PreviewCamera';
+// import VideoCall from '../VideoCall/VideoCall';
+import Call from '../Call/Call';
+const Room = () => {
+  const [source, setSource] = useState(0);
+  const [join, setJoin] = useState(false);
+  const [token, setToken] = useState('');
+  const [token2, setToken2] = useState('');
+  const videoDeviceId = useRef();
+  const audioDeviceId = useRef();
+  const [uid, setUid] = useState();
+  const [uid2, setUid2] = useState();
+  useEffect(() => {
+    const _uid = Math.floor(Math.random() * 1000);
+    setUid(_uid);
+    const _uid2 = Math.floor(Math.random() * 1000);
+    setUid2(_uid2);
+    axios
+      .get(`/getToken/${_uid}`)
+      .then((response) => setToken(response.data.token));
+      
+    axios
+      .get(`/getToken/${_uid2}`)
+      .then((response) => setToken2(response.data.token));
+
+  }, []);
+  return (
+    <div>
+      <h1>Room</h1>
+      <button onClick={() => setSource(0)}>Preview</button>
+      <button
+        onClick={() => {
+          setJoin(true);
+        }}
+      >
+        Join Video Call
+      </button>
+      <button
+        onClick={() => {
+          setJoin(false);
+        }}
+      >
+        Leave video call
+      </button>
+      {!join && source === 0 && token.length > 0 && uid && (
+        <PreviewCamera
+          token={token}
+          token2={token2}
+          uid={uid}
+          uid2={uid2}
+          getDeviceIds={({ selectedAudioDevice, selectedVideoDevice }) => {
+            if (selectedAudioDevice) {
+              audioDeviceId.current = selectedAudioDevice;
+            }
+            if (selectedVideoDevice) {
+              videoDeviceId.current = selectedVideoDevice;
+            }
+          }}
+        />
+      )}
+
+      {/* {join && (
+        <VideoCall
+          videoDeviceId={videoDeviceId.current}
+          audioDeviceId={audioDeviceId.current}
+          source={source}
+          join={true}
+        />
+      )} */}
+
+      {join && token.length > 0 && uid && (
+        <Call
+          videoDeviceId={videoDeviceId.current}
+          audioDeviceId={audioDeviceId.current}
+          token={token}
+          uid={uid}
+        />
+      )}
+    </div>
+  );
+};
+
+export default Room;

package/src/stories/Agora/Room/Room.stories.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import Room from './Room';
+
+export default {
+  title: 'Agora/Room/Item',
+  component: Room,
+};
+
+export const Default = (args) => <Room {...args} />