diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml index 59a002db..04780ec3 100644 --- a/.github/workflows/build-and-deploy.yml +++ b/.github/workflows/build-and-deploy.yml @@ -359,7 +359,6 @@ jobs: NODE_OPTIONS: '--max-old-space-size=4096' run: | cd react - mv .env.production.conferencing .env.production sed -i "s#^REACT_APP_TURN_SERVER_URL=.*#REACT_APP_TURN_SERVER_URL=\"turn:${{ secrets.STAGING_TURN_URL }}\"#" .env.production sed -i "s#^REACT_APP_TURN_SERVER_USERNAME=.*#REACT_APP_TURN_SERVER_USERNAME=\"${{ secrets.STAGING_TURN_USERNAME }}\"#" .env.production sed -i "s#^REACT_APP_TURN_SERVER_CREDENTIAL=.*#REACT_APP_TURN_SERVER_CREDENTIAL=\"${{ secrets.STAGING_TURN_PASSWORD }}\"#" .env.production diff --git a/.gitignore b/.gitignore index 01aea159..458aa1fd 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,5 @@ webapp/src/main/webapp/ react/.env.development react/.idea/workspace.xml react/.env.fakeeh +test/run.sh +test/runw.sh diff --git a/react/.env.development.conference b/react/.env.development.conference new file mode 100644 index 00000000..8387365c --- /dev/null +++ b/react/.env.development.conference @@ -0,0 +1,77 @@ +## Ant Media Server WebRTC Conference App Environment Variables +# Path: .env.production + +# IMPORTANT: This file is for production environment. +# If you wanted to make local tests, you can copy this file to .env.development and change the values. +# When you run the application with npm start, .env.development file will be used. +# When you run the application with npm run build, .env.production file will be used. + +# We don't suggest to set REACT_APP_WEBSOCKET_URL and REACT_APP_REST_BASE_URL in production environment. +# When you create a war file and deploy it to the Ant Media Server, these variables will be set automatically. + +# Ant Media Server URL configurations +REACT_APP_WEBSOCKET_URL="ws://localhost:5080/Conference/websocket" +#REACT_APP_WEBSOCKET_URL="wss://circle.antmedia.io/Conference/websocket" +#REACT_APP_WEBSOCKET_URL="ws://localhost:7080/demo/websocket" + +# Turn Server URL configurations +REACT_APP_TURN_SERVER_URL="turn:ovh36.antmedia.io:3478" +REACT_APP_TURN_SERVER_USERNAME="ovh36" +REACT_APP_TURN_SERVER_CREDENTIAL="ovh36" + +# Footer buttons configurations +REACT_APP_FOOTER_OPTION_BUTTON_VISIBILITY=true +REACT_APP_FOOTER_CAMERA_BUTTON_VISIBILITY=true +REACT_APP_FOOTER_MIC_BUTTON_VISIBILITY=true +REACT_APP_FOOTER_SCREEN_SHARE_BUTTON_VISIBILITY=true +REACT_APP_FOOTER_REACTIONS_BUTTON_VISIBILITY=true +REACT_APP_FOOTER_MESSAGE_BUTTON_VISIBILITY=true +REACT_APP_FOOTER_PARTICIPANT_LIST_BUTTON_VISIBILITY=true +REACT_APP_FOOTER_END_CALL_BUTTON_VISIBILITY=true +REACT_APP_FOOTER_CLOCK_VISIBILITY=true +REACT_APP_FOOTER_PUBLISHER_REQUEST_BUTTON_VISIBILITY=false + +# Option menu buttons configurations +REACT_APP_OPTION_MENU_GENERAL_SETTINGS_BUTTON_VISIBILITY=true +REACT_APP_OPTION_MENU_CHANGE_LAYOUT_BUTTON_VISIBILITY=true +REACT_APP_OPTION_MENU_CALL_SETTINGS_BUTTON_VISIBILITY=true +REACT_APP_OPTION_MENU_REPORT_PROBLEM_BUTTON_VISIBILITY=true + +# General settings configurations +REACT_APP_GENERAL_SETTINGS_LANGUAGE_VISIBILITY=true +REACT_APP_GENERAL_SETTINGS_THEME_VISIBILITY=true + +# Call settings configurations +REACT_APP_CALL_SETTINGS_VIRTUAL_BACKGROUND_MODE_VISIBILITY=true + +# Waiting room configurations +REACT_APP_WAITING_ROOM_PARTICIPANT_NAME_READONLY=false + +# Layout configurations +# If you make REACT_APP_LAYOUT_OTHERS_CARD_VISIBILITY false, you won't see other participants' video in case of number of participants is more than the max participant number of the layout +REACT_APP_LAYOUT_OTHERS_CARD_VISIBILITY=true + +# Time Zone Widget configurations +REACT_APP_TIME_ZONE_LIVE_TEXT_VISIBILITY=true + +# Video Overlay configurations +REACT_APP_VIDEO_OVERLAY_ADMIN_MODE_ENABLED=false + +# Participant Tab configurations +REACT_APP_PARTICIPANT_TAB_ADMIN_MODE_ENABLED=false + +# Meeting Recording configuration +REACT_APP_RECORDING_MANAGED_BY_ADMIN=false + +# Used to force the theme +#REACT_APP_FORCE_THEME="white" + +# Speed Test configurations +REACT_APP_SPEED_TEST_BEFORE_JOINING_THE_ROOM=false + +# Auto Pin configurations for screen share +REACT_APP_AUTO_PIN_WHEN_SCREEN_SHARE=true + +# URL configurations +REACT_APP_FOOTER_LOGO_ON_CLICK_URL="https://antmedia.io/circle" +REACT_APP_REPORT_PROBLEM_URL="https://github.com/ant-media/conference-call-application/issues" diff --git a/react/.env.development.webinar b/react/.env.development.webinar new file mode 100644 index 00000000..a0a40ed1 --- /dev/null +++ b/react/.env.development.webinar @@ -0,0 +1,76 @@ +## Ant Media Server WebRTC Conference App Environment Variables +# Path: .env.production + +# IMPORTANT: This file is for production environment. +# If you wanted to make local tests, you can copy this file to .env.development and change the values. +# When you run the application with npm start, .env.development file will be used. +# When you run the application with npm run build, .env.production file will be used. + +# We don't suggest to set REACT_APP_WEBSOCKET_URL and REACT_APP_REST_BASE_URL in production environment. +# When you create a war file and deploy it to the Ant Media Server, these variables will be set automatically. + +# Ant Media Server URL configurations +#REACT_APP_WEBSOCKET_URL="ws://localhost:5080/Conference/websocket" + +# Turn Server URL configurations +REACT_APP_TURN_SERVER_URL="turn:ovh36.antmedia.io:3478" +REACT_APP_TURN_SERVER_USERNAME="ovh36" +REACT_APP_TURN_SERVER_CREDENTIAL="ovh36" + +# Footer buttons configurations +REACT_APP_FOOTER_APP_LOGO_VISIBILITY=false +REACT_APP_FOOTER_OPTION_BUTTON_VISIBILITY=true +REACT_APP_FOOTER_CAMERA_BUTTON_VISIBILITY=true +REACT_APP_FOOTER_MIC_BUTTON_VISIBILITY=true +REACT_APP_FOOTER_SCREEN_SHARE_BUTTON_VISIBILITY=true +REACT_APP_FOOTER_REACTIONS_BUTTON_VISIBILITY=true +REACT_APP_FOOTER_MESSAGE_BUTTON_VISIBILITY=true +REACT_APP_FOOTER_PARTICIPANT_LIST_BUTTON_VISIBILITY=true +REACT_APP_FOOTER_END_CALL_BUTTON_VISIBILITY=true +REACT_APP_FOOTER_CLOCK_VISIBILITY=true +REACT_APP_FOOTER_PUBLISHER_REQUEST_BUTTON_VISIBILITY=false + +# Option menu buttons configurations +REACT_APP_OPTION_MENU_GENERAL_SETTINGS_BUTTON_VISIBILITY=false +REACT_APP_OPTION_MENU_CHANGE_LAYOUT_BUTTON_VISIBILITY=false +REACT_APP_OPTION_MENU_CALL_SETTINGS_BUTTON_VISIBILITY=true +REACT_APP_OPTION_MENU_REPORT_PROBLEM_BUTTON_VISIBILITY=true + +# General settings configurations +REACT_APP_GENERAL_SETTINGS_LANGUAGE_VISIBILITY=true +REACT_APP_GENERAL_SETTINGS_THEME_VISIBILITY=true + +# Call settings configurations +REACT_APP_CALL_SETTINGS_VIRTUAL_BACKGROUND_MODE_VISIBILITY=true + +# Waiting room configurations +REACT_APP_WAITING_ROOM_PARTICIPANT_NAME_READONLY=true + +# Layout configurations +# If you make REACT_APP_LAYOUT_OTHERS_CARD_VISIBILITY false, you won't see other participants' video in case of number of participants is more than the max participant number of the layout +REACT_APP_LAYOUT_OTHERS_CARD_VISIBILITY=false + +# Time Zone Widget configurations +REACT_APP_TIME_ZONE_LIVE_TEXT_VISIBILITY=true + +# Video Overlay configurations +REACT_APP_VIDEO_OVERLAY_ADMIN_MODE_ENABLED=true + +# Speed Test configurations +REACT_APP_SPEED_TEST_BEFORE_JOINING_THE_ROOM=true + +# Participant Tab configurations +REACT_APP_PARTICIPANT_TAB_ADMIN_MODE_ENABLED=true + +# Meeting Recording configuration +REACT_APP_RECORDING_MANAGED_BY_ADMIN=true + +# Used to force the theme +REACT_APP_FORCE_THEME="white" + +# Speed Test configurations +REACT_APP_SPEED_TEST_BEFORE_JOINING_THE_ROOM=true + +# URL configurations +REACT_APP_FOOTER_LOGO_ON_CLICK_URL="" +REACT_APP_REPORT_PROBLEM_URL="" diff --git a/react/src/Components/Cards/VideoCard.js b/react/src/Components/Cards/VideoCard.js index 074ff7f8..003c5207 100644 --- a/react/src/Components/Cards/VideoCard.js +++ b/react/src/Components/Cards/VideoCard.js @@ -82,9 +82,9 @@ function VideoCard(props) { // eslint-disable-next-line react-hooks/exhaustive-deps }, [conference.isPublished]); - const OverlayButton = ({ title, icon, color, onClick }) => ( + const OverlayButton = ({ title, icon, color, onClick, label }) => ( - + @@ -113,11 +113,12 @@ function VideoCard(props) { return ( <> - {(!useAvatar && process.env.REACT_APP_VIDEO_OVERLAY_ADMIN_MODE_ENABLED === "true") && ( + {(process.env.REACT_APP_VIDEO_OVERLAY_ADMIN_MODE_ENABLED === "true") && ( )} @@ -125,6 +126,7 @@ function VideoCard(props) { title={`Microphone ${micMuted ? "on" : "off"} ${props.name}`} icon={micMuted ? "muted-microphone" : "microphone"} color={micMuted ? "error" : "primary"} + label={micMuted ? "unmute" : "mute"} onClick={handleToggleMic} /> @@ -136,6 +138,7 @@ function VideoCard(props) { title={`${props.pinned ? t("unpin") : t("pin")} ${props.name}`} icon={props.pinned ? "unpin" : "pin"} color="primary" + label={props.pinned ? "unpin" : "pin"} onClick={() => conference.pinVideo(props.trackAssignment.streamId)} /> ); @@ -166,7 +169,7 @@ function VideoCard(props) { {!isMobile && !isTablet && } - {isAdministrativeButtonsVisible && } + {isAdministrativeButtonsVisible && } @@ -187,6 +190,7 @@ function VideoCard(props) { height: "100%", transform: isMine ? "rotateY(180deg)" : "none", }} + > switchTheme(e.target.value)} diff --git a/react/src/Components/Footer/Components/LayoutSettingsDialog.js b/react/src/Components/Footer/Components/LayoutSettingsDialog.js index ea718506..fa3ede90 100644 --- a/react/src/Components/Footer/Components/LayoutSettingsDialog.js +++ b/react/src/Components/Footer/Components/LayoutSettingsDialog.js @@ -93,14 +93,8 @@ export function LayoutSettingsDialog(props) { } }); } else if (mode === "sidebar") { - const participants = document.querySelectorAll( - ".single-video-container.not-pinned video" - ); - const firstParticipant = - participants.length > 1 ? participants[1] : participants[0]; - - //pin the first participant - conference.pinVideo(firstParticipant?.id ? firstParticipant.streamId : "localVideo"); + //pins your video + conference.pinVideo(conference.videoTrackAssignments[0]?.streamId); } }; const radioLabel = (label, icon) => { diff --git a/react/src/Components/Footer/Components/OptionButton.js b/react/src/Components/Footer/Components/OptionButton.js index 61d69bbd..873c5603 100644 --- a/react/src/Components/Footer/Components/OptionButton.js +++ b/react/src/Components/Footer/Components/OptionButton.js @@ -147,7 +147,7 @@ function OptionButton({footer, ...props}) { {conference.isPlayOnly === false && process.env.REACT_APP_OPTION_MENU_CALL_SETTINGS_BUTTON_VISIBILITY === 'true' ? - handleDialogOpen()}> + handleDialogOpen()} id="call-settings"> @@ -157,7 +157,8 @@ function OptionButton({footer, ...props}) { {conference.isPlayOnly === false && process.env.REACT_APP_CALL_SETTINGS_VIRTUAL_BACKGROUND_MODE_VISIBILITY === 'true' ? - { conference.handleEffectsOpen(!conference.effectsDrawerOpen); handleClose(); }}> + { conference.handleEffectsOpen(!conference.effectsDrawerOpen); handleClose(); }} + id="virtual-effects"> diff --git a/react/src/Components/Footer/Components/SettingsDialog.js b/react/src/Components/Footer/Components/SettingsDialog.js index d507da14..6540ea7c 100644 --- a/react/src/Components/Footer/Components/SettingsDialog.js +++ b/react/src/Components/Footer/Components/SettingsDialog.js @@ -67,7 +67,7 @@ export default function SettingsDialog(props) { }, [conference.devices]); return ( - + {t('Set Camera and Microphone')} @@ -80,7 +80,7 @@ export default function SettingsDialog(props) { conference.setVideoSendResolution(e.target.value)} sx={{ color: '#fff' }}> + switchAudioMode(e.target.value)} sx={{ color: '#fff' }}> +