|
@@ -1,139 +0,0 @@
|
|
|
-import React from "react";
|
|
|
-import styled from "styled-components";
|
|
|
-
|
|
|
-import useOpenVidu from "./useOpenVidu";
|
|
|
-import useLocalStorage from "../hooks/useLocalStorage";
|
|
|
-
|
|
|
-import LocalStream from "./LocalStream";
|
|
|
-import RemoteStream from "./RemoteStream";
|
|
|
-
|
|
|
-const StyledWebConference = styled.div`
|
|
|
- position: fixed;
|
|
|
- top: 5em;
|
|
|
- right: 1em;
|
|
|
- bottom: 5.5em;
|
|
|
- z-index: 1;
|
|
|
- width: 150px;
|
|
|
- overflow-y: auto;
|
|
|
- overflow-x: hidden;
|
|
|
- padding: 0.5em;
|
|
|
- & video {
|
|
|
- border-radius: 5px;
|
|
|
- }
|
|
|
- & .local-stream {
|
|
|
- position: relative;
|
|
|
- & .actions {
|
|
|
- position: absolute;
|
|
|
- bottom: 2px;
|
|
|
- right: 0;
|
|
|
- left: 0;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- & button {
|
|
|
- padding: 5px;
|
|
|
- margin: 5px;
|
|
|
- border-radius: 50%;
|
|
|
- opacity: 0.5;
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- }
|
|
|
- & button.active {
|
|
|
- background-color: var(--color-primary);
|
|
|
- }
|
|
|
- &:hover button {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- & .remote-stream {
|
|
|
- position: relative;
|
|
|
- margin-bottom: 0.5em;
|
|
|
- & .name {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- padding: 2px 5px;
|
|
|
- background-color: #95959540;
|
|
|
- text-align: center;
|
|
|
- border-radius: 0 0 5px 5px;
|
|
|
- }
|
|
|
- }
|
|
|
-`;
|
|
|
-
|
|
|
-const WebConferenceContent = ({ users }) => {
|
|
|
- const { remoteStreams = [], localStream } = useOpenVidu();
|
|
|
-
|
|
|
- const [showLocalVideo, setShowLocalVideo] = useLocalStorage(
|
|
|
- "showLocalVideo",
|
|
|
- true
|
|
|
- );
|
|
|
- const [showLocalAudio, setShowLocalAudio] = useLocalStorage(
|
|
|
- "showLocalAudio",
|
|
|
- true
|
|
|
- );
|
|
|
-
|
|
|
- const toggleVideo = React.useCallback(() => {
|
|
|
- setShowLocalVideo((prev) => !prev);
|
|
|
- }, [setShowLocalVideo]);
|
|
|
-
|
|
|
- const toggleAudio = React.useCallback(() => {
|
|
|
- setShowLocalAudio((prev) => !prev);
|
|
|
- }, [setShowLocalAudio]);
|
|
|
-
|
|
|
- const streamMap = React.useMemo(
|
|
|
- () =>
|
|
|
- remoteStreams.reduce((acc, stream) => {
|
|
|
- acc[stream.data.uid] = stream;
|
|
|
- return acc;
|
|
|
- }, {}),
|
|
|
- [remoteStreams]
|
|
|
- );
|
|
|
-
|
|
|
- return (
|
|
|
- <StyledWebConference>
|
|
|
- {localStream && (
|
|
|
- <div className="local-stream">
|
|
|
- <LocalStream
|
|
|
- stream={localStream}
|
|
|
- video={showLocalVideo}
|
|
|
- audio={showLocalAudio}
|
|
|
- />
|
|
|
- <div className="actions">
|
|
|
- <button
|
|
|
- onClick={toggleVideo}
|
|
|
- className={showLocalVideo ? "active" : ""}
|
|
|
- >
|
|
|
- <img
|
|
|
- src={"https://icongr.am/entypo/camera.svg?size=16&color=f9fbfa"}
|
|
|
- />
|
|
|
- </button>
|
|
|
- <button
|
|
|
- onClick={toggleAudio}
|
|
|
- className={showLocalAudio ? "active" : ""}
|
|
|
- >
|
|
|
- <img
|
|
|
- src={"https://icongr.am/entypo/mic.svg?size=16&color=f9fbfa"}
|
|
|
- />
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- {users.map(
|
|
|
- ({ name, uid, color }) =>
|
|
|
- streamMap[uid] && (
|
|
|
- <div key={uid} className="remote-stream">
|
|
|
- <RemoteStream stream={streamMap[uid]} />
|
|
|
- <span className="name" style={{ backgroundColor: color }}>
|
|
|
- {name}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- )
|
|
|
- )}
|
|
|
- </StyledWebConference>
|
|
|
- );
|
|
|
-};
|
|
|
-
|
|
|
-export default WebConferenceContent;
|