diff --git a/app/.env.local.sample b/app/.env.local.sample index db0e9665..1e716f42 100644 --- a/app/.env.local.sample +++ b/app/.env.local.sample @@ -43,3 +43,4 @@ NEXT_PUBLIC_ROCKET_CHAT_GREENROOM_RTMP="rtmp://bkk.contribute.live-video.net/app IPINFO_TOKEN = "6ea41123456765" NEXT_PUBLIC_SERVER_STREAM_LINK0 = "https://{some_url}/hls/stream.m3u8" NEXT_PUBLIC_SERVER_STREAM_LINK1 = "https://{some_other_url}/hls/stream.m3u8" +NEXT_PUBLIC_ADMIN_UIDS = "3xK6AcX, vvw4qBg, vvw4qBP14" diff --git a/app/components/clientsideonly/jitsibroadcaster.js b/app/components/clientsideonly/jitsibroadcaster.js index 606fa4e9..a43d264e 100644 --- a/app/components/clientsideonly/jitsibroadcaster.js +++ b/app/components/clientsideonly/jitsibroadcaster.js @@ -1,5 +1,5 @@ import dynamic from "next/dynamic"; -import React, { useEffect, useRef, useState } from "react"; +import React, { useRef, useState } from "react"; import { Button, ButtonGroup, @@ -8,52 +8,26 @@ import { OverlayTrigger, Tooltip, } from "react-bootstrap"; -import { BiMicrophone, BiMicrophoneOff } from "react-icons/bi"; import { RiMic2Line } from "react-icons/ri"; +import { BiMicrophone, BiMicrophoneOff } from "react-icons/bi"; + import { MdCameraswitch, MdHeadset } from "react-icons/md"; -import { AiFillEye, AiFillSetting } from "react-icons/ai"; -import { BiUserPin } from "react-icons/bi"; -import { HiViewGridAdd } from "react-icons/hi"; +import { AiFillSetting } from "react-icons/ai"; import styles from "../../styles/Jitsi.module.css"; import { FaRocketchat } from "react-icons/fa"; -import { FiUsers } from "react-icons/fi"; const JitsiMeeting = dynamic( () => import("@jitsi/react-sdk").then((mod) => mod.JitsiMeeting), { ssr: false } ); -const rtmp = process.env.NEXT_PUBLIC_ROCKET_CHAT_GREENROOM_RTMP; +let rtmp = process.env.NEXT_PUBLIC_ROCKET_CHAT_GREENROOM_RTMP; -const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat }) => { +const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat, isAdmin }) => { const apiRef = useRef(); const [logItems, updateLog] = useState([]); const [knockingParticipants, updateKnockingParticipants] = useState([]); - const [mute, setMute] = useState(true); - const [name, setName] = useState(null); - const dataArr = [ - { speaker: "A", hour: "10" }, - { speaker: "B", hour: "20" }, - { speaker: "C", hour: "30" }, - { speaker: "D", hour: "40" }, - { speaker: "Z", hour: "50" }, - ]; - - const handleDisplayName = async (hr) => { - const tar = dataArr.find((o) => o.hour === hr); - if (!tar || tar.speaker == name) { - return; - } - setName(tar.speaker); - await apiRef.current.executeCommand("displayName", tar.speaker); - }; - - useEffect(() => { - setInterval(() => { - const tada = new Date(); - handleDisplayName(tada.getHours().toString()); - }, 900000); - }, []); + const [mute, setMute] = useState(false); const printEventOutput = (payload) => { updateLog((items) => [...items, JSON.stringify(payload)]); @@ -62,8 +36,10 @@ const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat }) => { const handleAudioStatusChange = (payload, feature) => { if (payload.muted) { updateLog((items) => [...items, `${feature} off`]); + setMute(true); } else { updateLog((items) => [...items, `${feature} on`]); + setMute(false); } }; @@ -248,46 +224,32 @@ const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat }) => { await ref.current.executeCommand("toggleFilmStrip"); }; - // Multiple instances demo - const showUsers = async (ref, which) => { - try { - const pinfo = await ref.current.getParticipantsInfo(); - updateLog((items) => [ - ...items, - "participantes " + JSON.stringify(pinfo), - ]); - await ref.current.executeCommand("setTileView", false); - await ref.current.setLargeVideoParticipant(pinfo[which].participantId); - } catch (e) { - console.error("Participant not found!"); - return; + const renderStream = (key) => { + if (!isAdmin) { + return
; } - }; - const makeTile = (ref) => { - ref.current.executeCommand("setTileView", true); + return ( +
+ + + +
+ ); }; - const renderStream = (key) => ( -
- - - -
- ); - const toggleDevice = () => (
); - const toggleView = () => ( -
- - - Tile View} - > - - - First User} - > - - - Second User} - > - - - -
- ); - const toolButton = () => (
@@ -371,7 +298,6 @@ const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat }) => { title="Click to toogle audio" onClick={() => { apiRef.current.executeCommand("toggleAudio"); - setMute(!mute); }} > {mute ? : } @@ -387,6 +313,7 @@ const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat }) => { variant="danger" as="button" onClick={() => apiRef.current.stopRecording("stream")} + disabled={!isAdmin} > End for everyone! @@ -435,7 +362,7 @@ const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat }) => { onApiReady={(externalApi) => handleApiReady(externalApi, apiRef)} getIFrameRef={handleJitsiIFrameRef1} configOverwrite={{ - startWithAudioMuted: true, + startWithAudioMuted: false, disableModeratorIndicator: true, startScreenSharing: false, enableEmailInStats: false, @@ -444,25 +371,32 @@ const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat }) => { prejoinPageEnabled: false, startWithVideoMuted: false, liveStreamingEnabled: true, - disableSelfView: false, - disableSelfViewSettings: true, + disableTileView: false, disableShortcuts: true, disable1On1Mode: true, p2p: { enabled: false, }, + disableRemoteMute: true, + remoteVideoMenu: { + disableKick: true, + }, + filmstrip: { + disableResizable: true, + disableStageFilmstrip: true, + }, }} interfaceConfigOverwrite={{ DISABLE_JOIN_LEAVE_NOTIFICATIONS: true, FILM_STRIP_MAX_HEIGHT: 0, TILE_VIEW_MAX_COLUMNS: 0, VIDEO_QUALITY_LABEL_DISABLED: true, + VERTICAL_FILMSTRIP: true, }} userInfo={{ displayName: disName, }} /> - {toggleView()}
{toolButton()}
{renderLog()}
diff --git a/app/pages/virtualconf/greenroom/index.js b/app/pages/virtualconf/greenroom/index.js index 0143409d..5edbd9e3 100644 --- a/app/pages/virtualconf/greenroom/index.js +++ b/app/pages/virtualconf/greenroom/index.js @@ -4,12 +4,21 @@ import styles from "../../../styles/Mainstage.module.css"; import { Container, Row, Col } from "react-bootstrap"; import Jitsibroadcaster from "../../../components/clientsideonly/jitsibroadcaster"; import InAppChat from "../../../components/inappchat/inappchat"; +import Cookie from "js-cookie"; + const greenroom_rid = "GENERAL"; const host = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://community.liaison.rocketchat.digital"; +const adminArr = process.env.NEXT_PUBLIC_ADMIN_UIDS.split(", "); const Greenroom = () => { - const [openChat, setOpenChat] = useState(false); + const [openChat, setOpenChat] = useState(true); + + const cookies = { + rc_uid: Cookie.get("rc_uid"), + }; + + let isAdmin = adminArr.includes(cookies.rc_uid) const handleOpenChat = () => { setOpenChat((prevState) => !prevState); @@ -29,6 +38,7 @@ const Greenroom = () => { room={"GSOC Alumnus Meet"} disName={"Speaker"} handleChat={handleOpenChat} + isAdmin={isAdmin} /> {openChat && ( diff --git a/app/styles/Jitsi.module.css b/app/styles/Jitsi.module.css index 1d32191e..6d099ee0 100644 --- a/app/styles/Jitsi.module.css +++ b/app/styles/Jitsi.module.css @@ -1,10 +1,6 @@ .device { - margin-top: 5em; -} - -.view { - margin-top: 5em; - margin-left: 17px; + margin-top: 9em; + margin-right: 2em; } .streamButton { @@ -35,11 +31,8 @@ @media (min-width: 830px) { .device { margin: auto; - display: flex; - flex-direction: column; - } - .view { - margin: auto; + margin-left: 1em; + margin-right: 2em; display: flex; flex-direction: column; }