From f82120dc776b862af4f4a53b7382400604fdc8a9 Mon Sep 17 00:00:00 2001 From: Dnouv Date: Wed, 6 Apr 2022 04:21:43 +0530 Subject: [PATCH 1/9] Add admin access --- app/.env.local.sample | 1 + .../clientsideonly/jitsibroadcaster.js | 49 +++++++++++-------- app/pages/virtualconf/greenroom/index.js | 10 ++++ 3 files changed, 39 insertions(+), 21 deletions(-) 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..d1fe7b97 100644 --- a/app/components/clientsideonly/jitsibroadcaster.js +++ b/app/components/clientsideonly/jitsibroadcaster.js @@ -23,9 +23,9 @@ const JitsiMeeting = dynamic( { 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([]); @@ -268,25 +268,31 @@ const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat }) => { ref.current.executeCommand("setTileView", true); }; - const renderStream = (key) => ( -
- - - -
- ); + const renderStream = (key) => { + if (!isAdmin) { + return
; + } + + return ( +
+ + + +
+ ); + }; const toggleDevice = () => (
@@ -387,6 +393,7 @@ const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat }) => { variant="danger" as="button" onClick={() => apiRef.current.stopRecording("stream")} + disabled={!isAdmin} > End for everyone! diff --git a/app/pages/virtualconf/greenroom/index.js b/app/pages/virtualconf/greenroom/index.js index 0143409d..43b507ee 100644 --- a/app/pages/virtualconf/greenroom/index.js +++ b/app/pages/virtualconf/greenroom/index.js @@ -4,13 +4,22 @@ 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 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 && ( From bce6b4264a69f56b63d7958b34c020adce8a1bbe Mon Sep 17 00:00:00 2001 From: Dnouv Date: Wed, 6 Apr 2022 04:38:48 +0530 Subject: [PATCH 2/9] Remove buttons jitsi --- .../clientsideonly/jitsibroadcaster.js | 76 +------------------ app/pages/virtualconf/greenroom/index.js | 2 +- app/styles/Jitsi.module.css | 13 +--- 3 files changed, 4 insertions(+), 87 deletions(-) diff --git a/app/components/clientsideonly/jitsibroadcaster.js b/app/components/clientsideonly/jitsibroadcaster.js index d1fe7b97..152184de 100644 --- a/app/components/clientsideonly/jitsibroadcaster.js +++ b/app/components/clientsideonly/jitsibroadcaster.js @@ -11,12 +11,9 @@ import { import { BiMicrophone, BiMicrophoneOff } from "react-icons/bi"; import { RiMic2Line } from "react-icons/ri"; 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), @@ -29,31 +26,6 @@ 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 printEventOutput = (payload) => { updateLog((items) => [...items, JSON.stringify(payload)]); @@ -334,54 +306,9 @@ const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat, isAdmin }) => {
); - const toggleView = () => ( -
- - - Tile View} - > - - - First User} - > - - - Second User} - > - - - -
- ); - const toolButton = () => (
- { displayName: disName, }} /> - {toggleView()}
{toolButton()}
{renderLog()}
diff --git a/app/pages/virtualconf/greenroom/index.js b/app/pages/virtualconf/greenroom/index.js index 43b507ee..5edbd9e3 100644 --- a/app/pages/virtualconf/greenroom/index.js +++ b/app/pages/virtualconf/greenroom/index.js @@ -12,7 +12,7 @@ const host = process.env.NODE_ENV === "development" ? "http://localhost:3000" : 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"), diff --git a/app/styles/Jitsi.module.css b/app/styles/Jitsi.module.css index 1d32191e..a47e933c 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 { @@ -38,9 +34,4 @@ display: flex; flex-direction: column; } - .view { - margin: auto; - display: flex; - flex-direction: column; - } } From c784cdeceab2844a4574d4ebdf57a83946b4c622 Mon Sep 17 00:00:00 2001 From: Dnouv Date: Wed, 6 Apr 2022 04:47:10 +0530 Subject: [PATCH 3/9] Fix lgtm --- .../clientsideonly/jitsibroadcaster.js | 22 +------------------ 1 file changed, 1 insertion(+), 21 deletions(-) diff --git a/app/components/clientsideonly/jitsibroadcaster.js b/app/components/clientsideonly/jitsibroadcaster.js index 152184de..a7d3336e 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,7 +8,6 @@ import { OverlayTrigger, Tooltip, } from "react-bootstrap"; -import { BiMicrophone, BiMicrophoneOff } from "react-icons/bi"; import { RiMic2Line } from "react-icons/ri"; import { MdCameraswitch, MdHeadset } from "react-icons/md"; import { AiFillSetting } from "react-icons/ai"; @@ -220,25 +219,6 @@ const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat, isAdmin }) => { 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 makeTile = (ref) => { - ref.current.executeCommand("setTileView", true); - }; const renderStream = (key) => { if (!isAdmin) { From fffbe5b74791c30960e40f912783c3b8bfe4bf47 Mon Sep 17 00:00:00 2001 From: Dnouv Date: Wed, 6 Apr 2022 04:56:55 +0530 Subject: [PATCH 4/9] Joins with non-mute and disable remote muting --- app/components/clientsideonly/jitsibroadcaster.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/components/clientsideonly/jitsibroadcaster.js b/app/components/clientsideonly/jitsibroadcaster.js index a7d3336e..c84c6996 100644 --- a/app/components/clientsideonly/jitsibroadcaster.js +++ b/app/components/clientsideonly/jitsibroadcaster.js @@ -349,7 +349,7 @@ const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat, isAdmin }) => { onApiReady={(externalApi) => handleApiReady(externalApi, apiRef)} getIFrameRef={handleJitsiIFrameRef1} configOverwrite={{ - startWithAudioMuted: true, + startWithAudioMuted: false, disableModeratorIndicator: true, startScreenSharing: false, enableEmailInStats: false, @@ -365,6 +365,7 @@ const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat, isAdmin }) => { p2p: { enabled: false, }, + disableRemoteMute: true }} interfaceConfigOverwrite={{ DISABLE_JOIN_LEAVE_NOTIFICATIONS: true, From 798969c15fb440c8d29ac0f85e0d61c425b6fd12 Mon Sep 17 00:00:00 2001 From: Dnouv Date: Wed, 6 Apr 2022 05:25:29 +0530 Subject: [PATCH 5/9] remove kicking and resizable strip --- app/components/clientsideonly/jitsibroadcaster.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/app/components/clientsideonly/jitsibroadcaster.js b/app/components/clientsideonly/jitsibroadcaster.js index c84c6996..13ac7aeb 100644 --- a/app/components/clientsideonly/jitsibroadcaster.js +++ b/app/components/clientsideonly/jitsibroadcaster.js @@ -365,13 +365,21 @@ const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat, isAdmin }) => { p2p: { enabled: false, }, - disableRemoteMute: true + 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, From 90f21ec9bf519e6d3dafb055a9ab4e078496f004 Mon Sep 17 00:00:00 2001 From: Dnouv Date: Wed, 6 Apr 2022 05:43:02 +0530 Subject: [PATCH 6/9] Remove self tile --- app/components/clientsideonly/jitsibroadcaster.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/components/clientsideonly/jitsibroadcaster.js b/app/components/clientsideonly/jitsibroadcaster.js index 13ac7aeb..36cdcced 100644 --- a/app/components/clientsideonly/jitsibroadcaster.js +++ b/app/components/clientsideonly/jitsibroadcaster.js @@ -216,7 +216,7 @@ const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat, isAdmin }) => { knockingParticipant: handleKnockingParticipant, }); - await ref.current.executeCommand("toggleFilmStrip"); + await ref.current.executeCommand("toggleTileView"); }; @@ -358,7 +358,8 @@ const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat, isAdmin }) => { prejoinPageEnabled: false, startWithVideoMuted: false, liveStreamingEnabled: true, - disableSelfView: false, + disableSelfView: true, + disableTileView: false, disableSelfViewSettings: true, disableShortcuts: true, disable1On1Mode: true, From 03a891ad440f3efe5a4cbb2925f42808c4008d8d Mon Sep 17 00:00:00 2001 From: Dnouv Date: Wed, 6 Apr 2022 10:54:39 +0530 Subject: [PATCH 7/9] tooglefilmstrip on api ready --- app/components/clientsideonly/jitsibroadcaster.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/clientsideonly/jitsibroadcaster.js b/app/components/clientsideonly/jitsibroadcaster.js index 36cdcced..3268dd34 100644 --- a/app/components/clientsideonly/jitsibroadcaster.js +++ b/app/components/clientsideonly/jitsibroadcaster.js @@ -216,7 +216,7 @@ const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat, isAdmin }) => { knockingParticipant: handleKnockingParticipant, }); - await ref.current.executeCommand("toggleTileView"); + await ref.current.executeCommand("toggleFilmStrip"); }; From cd786a62f4894fb520d4a61b41eb51e8d39c6af2 Mon Sep 17 00:00:00 2001 From: Dnouv Date: Wed, 6 Apr 2022 12:31:25 +0530 Subject: [PATCH 8/9] re-add mute toggle switch --- .../clientsideonly/jitsibroadcaster.js | 16 ++++++++++++++-- app/styles/Jitsi.module.css | 2 ++ 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/app/components/clientsideonly/jitsibroadcaster.js b/app/components/clientsideonly/jitsibroadcaster.js index 3268dd34..ab9cc0e8 100644 --- a/app/components/clientsideonly/jitsibroadcaster.js +++ b/app/components/clientsideonly/jitsibroadcaster.js @@ -9,6 +9,8 @@ import { Tooltip, } from "react-bootstrap"; import { RiMic2Line } from "react-icons/ri"; +import { BiMicrophone, BiMicrophoneOff } from "react-icons/bi"; + import { MdCameraswitch, MdHeadset } from "react-icons/md"; import { AiFillSetting } from "react-icons/ai"; import styles from "../../styles/Jitsi.module.css"; @@ -25,6 +27,8 @@ const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat, isAdmin }) => { const apiRef = useRef(); const [logItems, updateLog] = useState([]); const [knockingParticipants, updateKnockingParticipants] = useState([]); + const [mute, setMute] = useState(false); + const printEventOutput = (payload) => { updateLog((items) => [...items, JSON.stringify(payload)]); @@ -289,6 +293,16 @@ const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat, isAdmin }) => { const toolButton = () => (
+ { prejoinPageEnabled: false, startWithVideoMuted: false, liveStreamingEnabled: true, - disableSelfView: true, disableTileView: false, - disableSelfViewSettings: true, disableShortcuts: true, disable1On1Mode: true, p2p: { diff --git a/app/styles/Jitsi.module.css b/app/styles/Jitsi.module.css index a47e933c..6d099ee0 100644 --- a/app/styles/Jitsi.module.css +++ b/app/styles/Jitsi.module.css @@ -31,6 +31,8 @@ @media (min-width: 830px) { .device { margin: auto; + margin-left: 1em; + margin-right: 2em; display: flex; flex-direction: column; } From 90a26a6a3a331d043951bf8010e44b5719a11902 Mon Sep 17 00:00:00 2001 From: Dnouv Date: Wed, 6 Apr 2022 13:14:32 +0530 Subject: [PATCH 9/9] change mic state logic --- app/components/clientsideonly/jitsibroadcaster.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/app/components/clientsideonly/jitsibroadcaster.js b/app/components/clientsideonly/jitsibroadcaster.js index ab9cc0e8..a43d264e 100644 --- a/app/components/clientsideonly/jitsibroadcaster.js +++ b/app/components/clientsideonly/jitsibroadcaster.js @@ -29,7 +29,6 @@ const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat, isAdmin }) => { const [knockingParticipants, updateKnockingParticipants] = useState([]); const [mute, setMute] = useState(false); - const printEventOutput = (payload) => { updateLog((items) => [...items, JSON.stringify(payload)]); }; @@ -37,8 +36,10 @@ const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat, isAdmin }) => { const handleAudioStatusChange = (payload, feature) => { if (payload.muted) { updateLog((items) => [...items, `${feature} off`]); + setMute(true); } else { updateLog((items) => [...items, `${feature} on`]); + setMute(false); } }; @@ -223,7 +224,6 @@ const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat, isAdmin }) => { await ref.current.executeCommand("toggleFilmStrip"); }; - const renderStream = (key) => { if (!isAdmin) { return
; @@ -293,12 +293,11 @@ const Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat, isAdmin }) => { const toolButton = () => (
-