|
@@ -1,16 +1,96 @@
|
|
import React from "react";
|
|
import React from "react";
|
|
|
|
+import styled from "styled-components";
|
|
|
|
|
|
import { getConfToken } from "../utils/api";
|
|
import { getConfToken } from "../utils/api";
|
|
|
|
+import useLocalStorage from "../hooks/useLocalStorage";
|
|
|
|
|
|
-import { OpenViduProvider } from "./useOpenVidu";
|
|
|
|
-import StreamList from "./StreamList";
|
|
|
|
|
|
+import { OpenViduProvider, StreamList } from "./react-useOpenVidu";
|
|
|
|
|
|
-const WebConference = ({ room, currentUser, users }) => {
|
|
|
|
|
|
+const StyledWebConference = styled.div`
|
|
|
|
+ position: fixed;
|
|
|
|
+ top: 5em;
|
|
|
|
+ right: 1em;
|
|
|
|
+ line-height: 1em;
|
|
|
|
+ bottom: 5.5em;
|
|
|
|
+ z-index: 1;
|
|
|
|
+ width: ${({ audioOnly }) => (audioOnly ? 80 : 150)}px;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ overflow-x: hidden;
|
|
|
|
+ padding: 0.5em;
|
|
|
|
+
|
|
|
|
+ .stream-list {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ gap: 5px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ & .local-stream {
|
|
|
|
+ position: relative;
|
|
|
|
+ & .actions {
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: 2px;
|
|
|
|
+ right: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ & button {
|
|
|
|
+ padding: 0;
|
|
|
|
+ margin: 0;
|
|
|
|
+ background-color: transparent;
|
|
|
|
+ width: 30px;
|
|
|
|
+ height: 30px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ & .remote-stream {
|
|
|
|
+ position: relative;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ & .user-stream {
|
|
|
|
+ position: relative;
|
|
|
|
+ border: 1px solid #333;
|
|
|
|
+ & .name {
|
|
|
|
+ line-height: 1.6em;
|
|
|
|
+ display: block;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding: 1px 2px;
|
|
|
|
+ background-color: #95959540;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+ & .mic {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 2px;
|
|
|
|
+ right: 2px;
|
|
|
|
+ width: 30px;
|
|
|
|
+ height: 30px;
|
|
|
|
+ padding: 7px;
|
|
|
|
+ & img {
|
|
|
|
+ max-height: 100%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+`;
|
|
|
|
+
|
|
|
|
+const WebConference = ({ room, currentUser, users, enableVideo = false }) => {
|
|
const getUserData = React.useCallback(
|
|
const getUserData = React.useCallback(
|
|
() => JSON.stringify({ uid: currentUser.uid }),
|
|
() => JSON.stringify({ uid: currentUser.uid }),
|
|
[currentUser.uid]
|
|
[currentUser.uid]
|
|
);
|
|
);
|
|
|
|
|
|
|
|
+ const [showLocalVideo, setShowLocalVideo] = useLocalStorage(
|
|
|
|
+ "wcEnableLocalVideo",
|
|
|
|
+ false
|
|
|
|
+ );
|
|
|
|
+ const [showLocalAudio, setShowLocalAudio] = useLocalStorage(
|
|
|
|
+ "wcEnableLocalAudio",
|
|
|
|
+ true
|
|
|
|
+ );
|
|
|
|
+
|
|
return (
|
|
return (
|
|
<OpenViduProvider
|
|
<OpenViduProvider
|
|
room={room}
|
|
room={room}
|
|
@@ -18,7 +98,17 @@ const WebConference = ({ room, currentUser, users }) => {
|
|
getUserData={getUserData}
|
|
getUserData={getUserData}
|
|
getToken={getConfToken}
|
|
getToken={getConfToken}
|
|
>
|
|
>
|
|
- <StreamList users={users} />
|
|
|
|
|
|
+ <StyledWebConference audioOnly={true}>
|
|
|
|
+ <StreamList
|
|
|
|
+ currentUser={currentUser}
|
|
|
|
+ users={users}
|
|
|
|
+ audioOnly={!enableVideo}
|
|
|
|
+ setLocalAudio={setShowLocalAudio}
|
|
|
|
+ setLocalVideo={setShowLocalVideo}
|
|
|
|
+ enableLocalVideo={showLocalVideo}
|
|
|
|
+ enableLocalAudio={showLocalAudio}
|
|
|
|
+ />
|
|
|
|
+ </StyledWebConference>
|
|
</OpenViduProvider>
|
|
</OpenViduProvider>
|
|
);
|
|
);
|
|
};
|
|
};
|