From 761d42cbcf3587ed9bc723b3d6504b3540a103c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ram=C3=B3n=20Souza?= Date: Wed, 29 Nov 2023 14:22:59 +0100 Subject: [PATCH 1/2] remove external-video-meetings collection and related files --- .../client/collection-mirror-initializer.js | 6 +- .../external-videos/server/eventHandlers.js | 8 - .../server/handlers/startExternalVideo.js | 13 - .../server/handlers/stopExternalVideo.js | 11 - .../server/handlers/updateExternalVideo.js | 19 - .../api/external-videos/server/index.js | 1 - .../server/modifiers/startExternalVideo.js | 19 - .../server/modifiers/stopExternalVideo.js | 18 - .../server/modifiers/updateExternalVideo.js | 27 - .../imports/api/meetings/index.js | 3 - .../meetings/server/modifiers/addMeeting.js | 21 - .../modifiers/clearExternalVideoMeeting.js | 26 - .../server/modifiers/meetingHasEnded.js | 2 - .../imports/api/meetings/server/publishers.js | 23 - .../actions-dropdown/component.jsx | 2 +- .../ui/components/actions-bar/container.jsx | 9 +- .../ui/components/actions-bar/service.js | 2 - .../imports/ui/components/app/component.jsx | 6 +- .../imports/ui/components/app/container.jsx | 20 +- .../external-video-player/component.jsx | 723 ------------------ .../external-video-player/container.jsx | 49 -- .../component.tsx | 1 + .../external-video-player/modal/component.jsx | 147 ---- .../external-video-player/modal/container.jsx | 14 - .../external-video-player/modal/styles.js | 110 --- .../external-video-player/service.js | 10 - .../external-video-player/styles.js | 119 --- .../imports/ui/components/media/service.js | 11 +- .../imports/ui/components/pads/service.js | 3 +- .../ui/components/subscriptions/component.jsx | 1 - 30 files changed, 31 insertions(+), 1393 deletions(-) delete mode 100644 bigbluebutton-html5/imports/api/external-videos/server/eventHandlers.js delete mode 100644 bigbluebutton-html5/imports/api/external-videos/server/handlers/startExternalVideo.js delete mode 100644 bigbluebutton-html5/imports/api/external-videos/server/handlers/stopExternalVideo.js delete mode 100644 bigbluebutton-html5/imports/api/external-videos/server/handlers/updateExternalVideo.js delete mode 100644 bigbluebutton-html5/imports/api/external-videos/server/modifiers/startExternalVideo.js delete mode 100644 bigbluebutton-html5/imports/api/external-videos/server/modifiers/stopExternalVideo.js delete mode 100644 bigbluebutton-html5/imports/api/external-videos/server/modifiers/updateExternalVideo.js delete mode 100644 bigbluebutton-html5/imports/api/meetings/server/modifiers/clearExternalVideoMeeting.js delete mode 100644 bigbluebutton-html5/imports/ui/components/external-video-player/component.jsx delete mode 100644 bigbluebutton-html5/imports/ui/components/external-video-player/container.jsx delete mode 100644 bigbluebutton-html5/imports/ui/components/external-video-player/modal/component.jsx delete mode 100644 bigbluebutton-html5/imports/ui/components/external-video-player/modal/container.jsx delete mode 100644 bigbluebutton-html5/imports/ui/components/external-video-player/modal/styles.js delete mode 100644 bigbluebutton-html5/imports/ui/components/external-video-player/styles.js diff --git a/bigbluebutton-html5/client/collection-mirror-initializer.js b/bigbluebutton-html5/client/collection-mirror-initializer.js index 835f019a22..5baf7b87b2 100644 --- a/bigbluebutton-html5/client/collection-mirror-initializer.js +++ b/bigbluebutton-html5/client/collection-mirror-initializer.js @@ -18,7 +18,7 @@ import Breakouts from '/imports/api/breakouts'; import BreakoutsHistory from '/imports/api/breakouts-history'; import guestUsers from '/imports/api/guest-users'; import Meetings, { - RecordMeetings, ExternalVideoMeetings, MeetingTimeRemaining, Notifications, + RecordMeetings, MeetingTimeRemaining, Notifications, } from '/imports/api/meetings'; import Users, { CurrentUser } from '/imports/api/users'; @@ -45,10 +45,6 @@ export const localCollectionRegistry = { localPadsUpdatesSync: new AbstractCollection(PadsUpdates, PadsUpdates), localAuthTokenValidationSync: new AbstractCollection(AuthTokenValidation, AuthTokenValidation), localRecordMeetingsSync: new AbstractCollection(RecordMeetings, RecordMeetings), - localExternalVideoMeetingsSync: new AbstractCollection( - ExternalVideoMeetings, - ExternalVideoMeetings, - ), localMeetingTimeRemainingSync: new AbstractCollection(MeetingTimeRemaining, MeetingTimeRemaining), localBreakoutsSync: new AbstractCollection(Breakouts, Breakouts), localBreakoutsHistorySync: new AbstractCollection(BreakoutsHistory, BreakoutsHistory), diff --git a/bigbluebutton-html5/imports/api/external-videos/server/eventHandlers.js b/bigbluebutton-html5/imports/api/external-videos/server/eventHandlers.js deleted file mode 100644 index 2cd4077869..0000000000 --- a/bigbluebutton-html5/imports/api/external-videos/server/eventHandlers.js +++ /dev/null @@ -1,8 +0,0 @@ -import RedisPubSub from '/imports/startup/server/redis'; -import handleStartExternalVideo from './handlers/startExternalVideo'; -import handleStopExternalVideo from './handlers/stopExternalVideo'; -import handleUpdateExternalVideo from './handlers/updateExternalVideo'; - -RedisPubSub.on('StartExternalVideoEvtMsg', handleStartExternalVideo); -RedisPubSub.on('StopExternalVideoEvtMsg', handleStopExternalVideo); -RedisPubSub.on('UpdateExternalVideoEvtMsg', handleUpdateExternalVideo); diff --git a/bigbluebutton-html5/imports/api/external-videos/server/handlers/startExternalVideo.js b/bigbluebutton-html5/imports/api/external-videos/server/handlers/startExternalVideo.js deleted file mode 100644 index e8cd8f4e30..0000000000 --- a/bigbluebutton-html5/imports/api/external-videos/server/handlers/startExternalVideo.js +++ /dev/null @@ -1,13 +0,0 @@ -import { check } from 'meteor/check'; -import startExternalVideo from '../modifiers/startExternalVideo'; - -export default async function handleStartExternalVideo({ header, body }, meetingId) { - check(header, Object); - check(body, Object); - check(meetingId, String); - - const { userId } = header; - const { externalVideoUrl } = body; - - await startExternalVideo(meetingId, userId, externalVideoUrl); -} diff --git a/bigbluebutton-html5/imports/api/external-videos/server/handlers/stopExternalVideo.js b/bigbluebutton-html5/imports/api/external-videos/server/handlers/stopExternalVideo.js deleted file mode 100644 index ac4a401750..0000000000 --- a/bigbluebutton-html5/imports/api/external-videos/server/handlers/stopExternalVideo.js +++ /dev/null @@ -1,11 +0,0 @@ -import { check } from 'meteor/check'; -import stopExternalVideo from '../modifiers/stopExternalVideo'; - -export default async function handleStopExternalVideo({ header }, meetingId) { - check(header, Object); - check(meetingId, String); - - const { userId } = header; - - await stopExternalVideo(userId, meetingId); -} diff --git a/bigbluebutton-html5/imports/api/external-videos/server/handlers/updateExternalVideo.js b/bigbluebutton-html5/imports/api/external-videos/server/handlers/updateExternalVideo.js deleted file mode 100644 index 9e06102651..0000000000 --- a/bigbluebutton-html5/imports/api/external-videos/server/handlers/updateExternalVideo.js +++ /dev/null @@ -1,19 +0,0 @@ -import { check } from 'meteor/check'; -import updateExternalVideo from '../modifiers/updateExternalVideo'; - -export default async function handleUpdateExternalVideo({ header, body }, meetingId) { - check(header, Object); - check(body, Object); - check(meetingId, String); - - const { userId } = header; - - const { - status, - rate, - time, - state, - } = body; - - await updateExternalVideo(meetingId, userId, status, rate, time, state); -} diff --git a/bigbluebutton-html5/imports/api/external-videos/server/index.js b/bigbluebutton-html5/imports/api/external-videos/server/index.js index b0d5d3295b..ba55c4a16e 100644 --- a/bigbluebutton-html5/imports/api/external-videos/server/index.js +++ b/bigbluebutton-html5/imports/api/external-videos/server/index.js @@ -1,2 +1 @@ import './methods'; -import './eventHandlers'; diff --git a/bigbluebutton-html5/imports/api/external-videos/server/modifiers/startExternalVideo.js b/bigbluebutton-html5/imports/api/external-videos/server/modifiers/startExternalVideo.js deleted file mode 100644 index 335eb7ce24..0000000000 --- a/bigbluebutton-html5/imports/api/external-videos/server/modifiers/startExternalVideo.js +++ /dev/null @@ -1,19 +0,0 @@ -import { check } from 'meteor/check'; -import Logger from '/imports/startup/server/logger'; -import { ExternalVideoMeetings } from '/imports/api/meetings'; - -export default async function startExternalVideo(meetingId, userId, externalVideoUrl) { - try { - check(meetingId, String); - check(userId, String); - check(externalVideoUrl, String); - - const selector = { meetingId }; - const modifier = { $set: { externalVideoUrl } }; - - Logger.info(`User id=${userId} sharing an external video: ${externalVideoUrl} for meeting ${meetingId}`); - await ExternalVideoMeetings.updateAsync(selector, modifier); - } catch (err) { - Logger.error(`Error on setting shared external video start in Meetings collection: ${err}`); - } -} diff --git a/bigbluebutton-html5/imports/api/external-videos/server/modifiers/stopExternalVideo.js b/bigbluebutton-html5/imports/api/external-videos/server/modifiers/stopExternalVideo.js deleted file mode 100644 index cab986bd3a..0000000000 --- a/bigbluebutton-html5/imports/api/external-videos/server/modifiers/stopExternalVideo.js +++ /dev/null @@ -1,18 +0,0 @@ -import { check } from 'meteor/check'; -import Logger from '/imports/startup/server/logger'; -import { ExternalVideoMeetings } from '/imports/api/meetings'; - -export default async function stopExternalVideo(userId, meetingId) { - try { - check(meetingId, String); - check(userId, String); - - const selector = { meetingId }; - const modifier = { $set: { externalVideoUrl: null } }; - - Logger.info(`External video stop sharing was initiated by:[${userId}] for meeting ${meetingId}`); - await ExternalVideoMeetings.updateAsync(selector, modifier); - } catch (err) { - Logger.error(`Error on setting shared external video stop in Meetings collection: ${err}`); - } -} diff --git a/bigbluebutton-html5/imports/api/external-videos/server/modifiers/updateExternalVideo.js b/bigbluebutton-html5/imports/api/external-videos/server/modifiers/updateExternalVideo.js deleted file mode 100644 index 2549295567..0000000000 --- a/bigbluebutton-html5/imports/api/external-videos/server/modifiers/updateExternalVideo.js +++ /dev/null @@ -1,27 +0,0 @@ -import { check } from 'meteor/check'; -import Logger from '/imports/startup/server/logger'; -import ExternalVideoStreamer from '/imports/api/external-videos/server/streamer'; - -export default async function updateExternalVideo(meetingId, userId, status, rate, time, state) { - try { - check(meetingId, String); - check(userId, String); - check(status, String); - check(rate, Number); - check(time, Number); - check(state, Number); - - const modifier = { - meetingId, - userId, - rate, - time, - state, - }; - - Logger.debug(`UpdateExternalVideoEvtMsg received for user ${userId} and meeting ${meetingId} event:${status}`); - ExternalVideoStreamer(meetingId).emit(status, modifier); - } catch (err) { - Logger.error(`Error on setting shared external video update in Meetings collection: ${err}`); - } -} diff --git a/bigbluebutton-html5/imports/api/meetings/index.js b/bigbluebutton-html5/imports/api/meetings/index.js index 638a0a4d3e..199c2a843b 100644 --- a/bigbluebutton-html5/imports/api/meetings/index.js +++ b/bigbluebutton-html5/imports/api/meetings/index.js @@ -6,7 +6,6 @@ const collectionOptions = Meteor.isClient ? { const Meetings = new Mongo.Collection('meetings', collectionOptions); const RecordMeetings = new Mongo.Collection('record-meetings', collectionOptions); -const ExternalVideoMeetings = new Mongo.Collection('external-video-meetings', collectionOptions); const MeetingTimeRemaining = new Mongo.Collection('meeting-time-remaining', collectionOptions); const Notifications = new Mongo.Collection('notifications', collectionOptions); const LayoutMeetings = new Mongo.Collection('layout-meetings'); @@ -17,14 +16,12 @@ if (Meteor.isServer) { Meetings.createIndexAsync({ meetingId: 1 }); RecordMeetings.createIndexAsync({ meetingId: 1 }); - ExternalVideoMeetings.createIndexAsync({ meetingId: 1 }); MeetingTimeRemaining.createIndexAsync({ meetingId: 1 }); LayoutMeetings.createIndexAsync({ meetingId: 1 }); } export { RecordMeetings, - ExternalVideoMeetings, MeetingTimeRemaining, Notifications, LayoutMeetings, diff --git a/bigbluebutton-html5/imports/api/meetings/server/modifiers/addMeeting.js b/bigbluebutton-html5/imports/api/meetings/server/modifiers/addMeeting.js index 36ff545e27..1a4cd08b83 100755 --- a/bigbluebutton-html5/imports/api/meetings/server/modifiers/addMeeting.js +++ b/bigbluebutton-html5/imports/api/meetings/server/modifiers/addMeeting.js @@ -6,7 +6,6 @@ import { import SanitizeHTML from 'sanitize-html'; import Meetings, { RecordMeetings, - ExternalVideoMeetings, LayoutMeetings, } from '/imports/api/meetings'; import Logger from '/imports/startup/server/logger'; @@ -17,25 +16,6 @@ import { addExternalVideoStreamer } from '/imports/api/external-videos/server/st import addUserReactionsObserver from '/imports/api/user-reaction/server/helpers'; import { LAYOUT_TYPE } from '/imports/ui/components/layout/enums'; -const addExternalVideo = async (meetingId) => { - const selector = { meetingId }; - - const modifier = { - meetingId, - externalVideoUrl: null, - }; - - try { - const { numberAffected } = await ExternalVideoMeetings.upsertAsync(selector, modifier); - - if (numberAffected) { - Logger.verbose(`Added external video meetingId=${meetingId}`); - } - } catch (err) { - Logger.error(`Adding external video: ${err}`); - } -}; - const addLayout = async (meetingId, layout) => { const selector = { meetingId }; @@ -254,7 +234,6 @@ export default async function addMeeting(meeting) { Logger.error(`Adding record prop to collection: ${err}`); } - await addExternalVideo(meetingId); await addLayout(meetingId, LAYOUT_TYPE[meetingLayout] || 'smart'); try { diff --git a/bigbluebutton-html5/imports/api/meetings/server/modifiers/clearExternalVideoMeeting.js b/bigbluebutton-html5/imports/api/meetings/server/modifiers/clearExternalVideoMeeting.js deleted file mode 100644 index d9f4bc4eb8..0000000000 --- a/bigbluebutton-html5/imports/api/meetings/server/modifiers/clearExternalVideoMeeting.js +++ /dev/null @@ -1,26 +0,0 @@ -import { ExternalVideoMeetings } from '/imports/api/meetings'; -import Logger from '/imports/startup/server/logger'; - -export default async function clearExternalVideoMeeting(meetingId) { - if (meetingId) { - try { - const numberAffected = await ExternalVideoMeetings.removeAsync({ meetingId }); - - if (numberAffected) { - Logger.info(`Cleared ExternalVideoMeetings in (${meetingId})`); - } - } catch (err) { - Logger.info(`Error on clearing ExternalVideoMeetings in (${meetingId}). ${err}`); - } - } else { - try { - const numberAffected = await ExternalVideoMeetings.removeAsync({}); - - if (numberAffected) { - Logger.info('Cleared ExternalVideoMeetings in all meetings'); - } - } catch (err) { - Logger.error(`Error on clearing ExternalVideoMeetings in all meetings. ${err}`); - } - } -} diff --git a/bigbluebutton-html5/imports/api/meetings/server/modifiers/meetingHasEnded.js b/bigbluebutton-html5/imports/api/meetings/server/modifiers/meetingHasEnded.js index 0b9a630f2f..705fa3495d 100755 --- a/bigbluebutton-html5/imports/api/meetings/server/modifiers/meetingHasEnded.js +++ b/bigbluebutton-html5/imports/api/meetings/server/modifiers/meetingHasEnded.js @@ -19,7 +19,6 @@ import clearAudioCaptions from '/imports/api/audio-captions/server/modifiers/cle import clearMeetingTimeRemaining from '/imports/api/meetings/server/modifiers/clearMeetingTimeRemaining'; import clearLocalSettings from '/imports/api/local-settings/server/modifiers/clearLocalSettings'; import clearRecordMeeting from './clearRecordMeeting'; -import clearExternalVideoMeeting from './clearExternalVideoMeeting'; import clearVoiceCallStates from '/imports/api/voice-call-states/server/modifiers/clearVoiceCallStates'; import clearVideoStreams from '/imports/api/video-streams/server/modifiers/clearVideoStreams'; import clearAuthTokenValidation from '/imports/api/auth-token-validation/server/modifiers/clearAuthTokenValidation'; @@ -51,7 +50,6 @@ export default async function meetingHasEnded(meetingId) { clearLocalSettings(meetingId), clearMeetingTimeRemaining(meetingId), clearRecordMeeting(meetingId), - clearExternalVideoMeeting(meetingId), clearVoiceCallStates(meetingId), clearVideoStreams(meetingId), clearAuthTokenValidation(meetingId), diff --git a/bigbluebutton-html5/imports/api/meetings/server/publishers.js b/bigbluebutton-html5/imports/api/meetings/server/publishers.js index ab7b8240f5..4a39b23f51 100755 --- a/bigbluebutton-html5/imports/api/meetings/server/publishers.js +++ b/bigbluebutton-html5/imports/api/meetings/server/publishers.js @@ -3,7 +3,6 @@ import { Random } from 'meteor/random'; import Meetings, { RecordMeetings, MeetingTimeRemaining, - ExternalVideoMeetings, LayoutMeetings, } from '/imports/api/meetings'; import Users from '/imports/api/users'; @@ -116,28 +115,6 @@ function layoutPublish(...args) { Meteor.publish('layout-meetings', layoutPublish); -function externalVideoMeetings() { - const tokenValidation = AuthTokenValidation.findOne({ connectionId: this.connection.id }); - - if (!tokenValidation || tokenValidation.validationStatus !== ValidationStates.VALIDATED) { - Logger.warn(`Publishing ExternalVideoMeetings was requested by unauth connection ${this.connection.id}`); - return ExternalVideoMeetings.find({ meetingId: '' }); - } - - const { meetingId, userId } = tokenValidation; - - Logger.debug(`Publishing ExternalVideoMeetings for ${meetingId} ${userId}`); - - return ExternalVideoMeetings.find({ meetingId }); -} - -function externalVideoPublish(...args) { - const boundExternalVideoMeetings = externalVideoMeetings.bind(this); - return boundExternalVideoMeetings(...args); -} - -Meteor.publish('external-video-meetings', externalVideoPublish); - function meetingTimeRemaining() { const tokenValidation = AuthTokenValidation.findOne({ connectionId: this.connection.id }); diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx index a185357a87..3f55470ff4 100755 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx @@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { defineMessages } from 'react-intl'; import withShortcutHelper from '/imports/ui/components/shortcut-help/service'; -import ExternalVideoModal from '/imports/ui/components/external-video-player/modal/container'; +import ExternalVideoModal from '/imports/ui/components/external-video-player/external-video-player-graphql/modal/component'; import RandomUserSelectContainer from '/imports/ui/components/common/modal/random-user/container'; import LayoutModalContainer from '/imports/ui/components/layout/modal/container'; import BBBMenu from '/imports/ui/components/common/menu/component'; diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/container.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/container.jsx index 9ec6ab4e76..06cc340bf3 100644 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/container.jsx @@ -20,6 +20,7 @@ import { CURRENT_PRESENTATION_PAGE_SUBSCRIPTION, } from '/imports/ui/components/whiteboard/queries'; import MediaService from '../media/service'; +import useMeeting from '/imports/ui/core/hooks/useMeeting'; const ActionsBarContainer = (props) => { const actionsBarStyle = layoutSelectOutput((i) => i.actionBar); @@ -29,6 +30,12 @@ const ActionsBarContainer = (props) => { const presentationPage = presentationPageData?.pres_page_curr[0] || {}; const isThereCurrentPresentation = !!presentationPage?.presentationId; + const { data: currentMeeting } = useMeeting((m) => ({ + externalVideo: m.externalVideo, + })); + + const isSharingVideo = !!currentMeeting?.externalVideo?.externalVideoUrl; + const usingUsersContext = useContext(UsersContext); const { pluginsExtensibleAreasAggregatedState, @@ -58,6 +65,7 @@ const ActionsBarContainer = (props) => { amIPresenter, actionBarItems, isThereCurrentPresentation, + isSharingVideo, } } /> @@ -81,7 +89,6 @@ export default withTracker(() => ({ enableVideo: getFromUserSettings('bbb_enable_video', Meteor.settings.public.kurento.enableVideo), setPresentationIsOpen: MediaService.setPresentationIsOpen, handleTakePresenter: Service.takePresenterRole, - isSharingVideo: Service.isSharingVideo(), isSharedNotesPinned: Service.isSharedNotesPinned(), hasScreenshare: isScreenBroadcasting(), hasCameraAsContent: isCameraAsContentBroadcasting(), diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/service.js b/bigbluebutton-html5/imports/ui/components/actions-bar/service.js index 9b111e99a0..4bb6e79296 100755 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/service.js +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/service.js @@ -3,7 +3,6 @@ import Users from '/imports/api/users'; import { makeCall } from '/imports/ui/services/api'; import Meetings from '/imports/api/meetings'; import Breakouts from '/imports/api/breakouts'; -import { getVideoUrl } from '/imports/ui/components/external-video-player/service'; import NotesService from '/imports/ui/components/notes/service'; import BreakoutsHistory from '/imports/api/breakouts-history'; @@ -82,5 +81,4 @@ export default { getUsersNotJoined, takePresenterRole, isSharedNotesPinned: () => NotesService.isSharedNotesPinned(), - isSharingVideo: () => getVideoUrl(), }; diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx index 684956f530..b8225198bd 100644 --- a/bigbluebutton-html5/imports/ui/components/app/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/app/component.jsx @@ -28,7 +28,7 @@ import ScreenReaderAlertContainer from '../screenreader-alert/container'; import WebcamContainer from '../webcam/container'; import PresentationContainer from '../presentation/container'; import ScreenshareContainer from '../screenshare/container'; -import ExternalVideoContainer from '../external-video-player/container'; +import ExternalVideoPlayerContainer from '../external-video-player/external-video-player-graphql/component'; import EmojiRainContainer from '../emoji-rain/container'; import Styled from './styles'; import { DEVICE_TYPE, ACTIONS, SMALL_VIEWPORT_BREAKPOINT, PANELS } from '../layout/enums'; @@ -600,7 +600,7 @@ class App extends Component { darkTheme, intl, } = this.props; - +console.log({shouldShowExternalVideo}) const { isAudioModalOpen, isRandomUserSelectModalOpen, @@ -640,7 +640,7 @@ class App extends Component { {shouldShowScreenshare ? : null} { shouldShowExternalVideo - ? + ? : null } {shouldShowSharedNotes diff --git a/bigbluebutton-html5/imports/ui/components/app/container.jsx b/bigbluebutton-html5/imports/ui/components/app/container.jsx index 27afe4e87f..fcc2d860cc 100755 --- a/bigbluebutton-html5/imports/ui/components/app/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/app/container.jsx @@ -14,7 +14,7 @@ import UserInfos from '/imports/api/users-infos'; import Settings from '/imports/ui/services/settings'; import MediaService from '/imports/ui/components/media/service'; import LayoutService from '/imports/ui/components/layout/service'; -import { isPresentationEnabled } from '/imports/ui/services/features'; +import { isPresentationEnabled, isExternalVideoEnabled } from '/imports/ui/services/features'; import { layoutSelect, layoutSelectInput, @@ -23,6 +23,7 @@ import { } from '../layout/context'; import { isEqual } from 'radash'; import useCurrentUser from '/imports/ui/core/hooks/useCurrentUser'; +import useMeeting from '/imports/ui/core/hooks/useMeeting'; import { LAYOUT_TYPE } from '/imports/ui/components/layout/enums'; const ROLE_MODERATOR = Meteor.settings.public.user.role_moderator; @@ -145,10 +146,18 @@ const AppContainer = (props) => { }); }; + const { data: currentMeeting } = useMeeting((m) => ({ + externalVideo: m.externalVideo, + })); + + const isSharingVideo = !!currentMeeting?.externalVideo?.externalVideoUrl; + useEffect(() => { - MediaService.buildLayoutWhenPresentationAreaIsDisabled(layoutContextDispatch) + MediaService.buildLayoutWhenPresentationAreaIsDisabled(layoutContextDispatch, isSharingVideo); }); + const shouldShowExternalVideo = isExternalVideoEnabled() && isSharingVideo; + const validateEnforceLayout = (currentUserData) => { const layoutTypes = Object.values(LAYOUT_TYPE); const enforceLayout = currentUserData?.enforceLayout; @@ -192,7 +201,8 @@ const AppContainer = (props) => { sidebarNavigationIsOpen, sidebarContentPanel, sidebarContentIsOpen, - shouldShowPresentation, + shouldShowPresentation: shouldShowPresentation && !shouldShowExternalVideo, + shouldShowExternalVideo, mountRandomUserModal, setMountRandomUserModal, isPresenter, @@ -281,7 +291,6 @@ export default withTracker(() => { const { selectedLayout, pushLayout } = AppSettings; const { viewScreenshare } = Settings.dataSaving; const shouldShowSharedNotes = MediaService.shouldShowSharedNotes(); - const shouldShowExternalVideo = MediaService.shouldShowExternalVideo(); const shouldShowScreenshare = MediaService.shouldShowScreenshare() && (viewScreenshare || currentUser?.presenter); let customStyleUrl = getFromUserSettings('bbb_custom_style_url', false); @@ -326,8 +335,7 @@ export default withTracker(() => { pushAlertEnabled: AppSettings.chatPushAlerts, darkTheme: AppSettings.darkTheme, shouldShowScreenshare, - shouldShowPresentation: !shouldShowScreenshare && !shouldShowExternalVideo && !shouldShowSharedNotes, - shouldShowExternalVideo, + shouldShowPresentation: !shouldShowScreenshare && !shouldShowSharedNotes, shouldShowSharedNotes, isLargeFont: Session.get('isLargeFont'), presentationRestoreOnUpdate: getFromUserSettings( diff --git a/bigbluebutton-html5/imports/ui/components/external-video-player/component.jsx b/bigbluebutton-html5/imports/ui/components/external-video-player/component.jsx deleted file mode 100644 index cacb84bffa..0000000000 --- a/bigbluebutton-html5/imports/ui/components/external-video-player/component.jsx +++ /dev/null @@ -1,723 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import injectWbResizeEvent from '/imports/ui/components/presentation/resize-wrapper/component'; -import { defineMessages, injectIntl } from 'react-intl'; -import { - sendMessage, - onMessage, - removeAllListeners, - getPlayingState, -} from './service'; -import deviceInfo from '/imports/utils/deviceInfo'; - -import logger from '/imports/startup/client/logger'; - -import Subtitles from './subtitles/component'; -import VolumeSlider from './volume-slider/component'; -import ReloadButton from '/imports/ui/components/reload-button/component'; -import FullscreenButtonContainer from '/imports/ui/components/common/fullscreen-button/container'; - -import ArcPlayer from '/imports/ui/components/external-video-player/custom-players/arc-player'; -import PeerTubePlayer from '/imports/ui/components/external-video-player/custom-players/peertube'; -import { ACTIONS } from '/imports/ui/components/layout/enums'; -import { uniqueId } from '/imports/utils/string-utils'; -import { throttle } from 'radash'; - -import Styled from './styles'; - -const intlMessages = defineMessages({ - autoPlayWarning: { - id: 'app.externalVideo.autoPlayWarning', - description: 'Shown when user needs to interact with player to make it work', - }, - refreshLabel: { - id: 'app.externalVideo.refreshLabel', - }, - fullscreenLabel: { - id: 'app.externalVideo.fullscreenLabel', - }, - subtitlesOn: { - id: 'app.externalVideo.subtitlesOn', - }, - subtitlesOff: { - id: 'app.externalVideo.subtitlesOff', - }, -}); - -const SYNC_INTERVAL_SECONDS = 5; -const THROTTLE_INTERVAL_SECONDS = 0.5; -const AUTO_PLAY_BLOCK_DETECTION_TIMEOUT_SECONDS = 5; -const ALLOW_FULLSCREEN = Meteor.settings.public.app.allowFullscreen; -const THROTTLE_RELOAD_INTERVAL = 5000; - -Styled.VideoPlayer.addCustomPlayer(PeerTubePlayer); -Styled.VideoPlayer.addCustomPlayer(ArcPlayer); - -class VideoPlayer extends Component { - static clearVideoListeners() { - removeAllListeners('play'); - removeAllListeners('stop'); - removeAllListeners('playerUpdate'); - removeAllListeners('presenterReady'); - } - - constructor(props) { - super(props); - - const { isPresenter } = props; - - this.player = null; - this.syncInterval = null; - this.autoPlayTimeout = null; - this.hasPlayedBefore = false; - this.playerIsReady = false; - - this.lastMessage = null; - this.lastMessageTimestamp = Date.now(); - - this.throttleTimeout = null; - - this.state = { - subtitlesOn: false, - muted: false, - playing: false, - autoPlayBlocked: false, - volume: 1, - playbackRate: 1, - key: 0, - played:0, - loaded:0, - }; - - this.hideVolume = { - Vimeo: true, - Facebook: true, - ArcPlayer: true, - //YouTube: true, - }; - - this.opts = { - // default option for all players, can be overwritten - playerOptions: { - autoplay: true, - playsinline: true, - controls: isPresenter, - }, - file: { - attributes: { - controls: isPresenter ? 'controls' : '', - autoplay: 'autoplay', - playsinline: 'playsinline', - }, - }, - facebook: { - controls: isPresenter, - }, - dailymotion: { - params: { - controls: isPresenter, - }, - }, - youtube: { - playerVars: { - autoplay: 1, - modestbranding: 1, - autohide: 1, - rel: 0, - ecver: 2, - controls: isPresenter ? 1 : 0, - cc_lang_pref: document.getElementsByTagName('html')[0].lang.substring(0, 2), - }, - }, - peertube: { - isPresenter, - }, - twitch: { - options: { - controls: isPresenter, - }, - playerId: 'externalVideoPlayerTwitch', - }, - preload: true, - showHoverToolBar: false, - }; - - this.registerVideoListeners = this.registerVideoListeners.bind(this); - this.autoPlayBlockDetected = this.autoPlayBlockDetected.bind(this); - this.handleFirstPlay = this.handleFirstPlay.bind(this); - this.handleReload = throttle({ interval: THROTTLE_RELOAD_INTERVAL }, this.handleReload.bind(this)); - this.handleOnProgress = this.handleOnProgress.bind(this); - this.handleOnReady = this.handleOnReady.bind(this); - this.handleOnPlay = this.handleOnPlay.bind(this); - this.handleOnPause = this.handleOnPause.bind(this); - this.handleVolumeChanged = this.handleVolumeChanged.bind(this); - this.handleOnMuted = this.handleOnMuted.bind(this); - this.sendSyncMessage = this.sendSyncMessage.bind(this); - this.getCurrentPlaybackRate = this.getCurrentPlaybackRate.bind(this); - this.getCurrentTime = this.getCurrentTime.bind(this); - this.getCurrentVolume = this.getCurrentVolume.bind(this); - this.getMuted = this.getMuted.bind(this); - this.setPlaybackRate = this.setPlaybackRate.bind(this); - this.onBeforeUnload = this.onBeforeUnload.bind(this); - this.toggleSubtitle = this.toggleSubtitle.bind(this); - - this.mobileHoverSetTimeout = null; - } - - componentDidMount() { - const { - layoutContextDispatch, - } = this.props; - - window.addEventListener('beforeunload', this.onBeforeUnload); - - clearInterval(this.syncInterval); - clearTimeout(this.autoPlayTimeout); - - VideoPlayer.clearVideoListeners(); - this.registerVideoListeners(); - - layoutContextDispatch({ - type: ACTIONS.SET_HAS_EXTERNAL_VIDEO, - value: true, - }); - - layoutContextDispatch({ - type: ACTIONS.SET_PRESENTATION_IS_OPEN, - value: true, - }); - } - - shouldComponentUpdate(nextProps, nextState) { - const { isPresenter } = this.props; - const { playing } = this.state; - - // If user is presenter we don't re-render playing state changes - // Because he's in control of the play/pause status - if (nextProps.isPresenter && isPresenter && nextState.playing !== playing) { - return false; - } - - return true; - } - - componentDidUpdate(prevProp) { - // Detect presenter change and redo the sync and listeners to reassign video to the new one - const { isPresenter } = this.props; - if (isPresenter !== prevProp.isPresenter) { - VideoPlayer.clearVideoListeners(); - - clearInterval(this.syncInterval); - clearTimeout(this.autoPlayTimeout); - - this.registerVideoListeners(); - } - } - - componentWillUnmount() { - const { - layoutContextDispatch, - hidePresentationOnJoin, - } = this.props; - - window.removeEventListener('beforeunload', this.onBeforeUnload); - - VideoPlayer.clearVideoListeners(); - - clearInterval(this.syncInterval); - clearTimeout(this.autoPlayTimeout); - - this.player = null; - - layoutContextDispatch({ - type: ACTIONS.SET_HAS_EXTERNAL_VIDEO, - value: false, - }); - layoutContextDispatch({ - type: ACTIONS.SET_PRESENTATION_IS_OPEN, - value: Session.get('presentationLastState'), - }); - - if (hidePresentationOnJoin) { - layoutContextDispatch({ - type: ACTIONS.SET_PRESENTATION_IS_OPEN, - value: false, - }); - } - } - - toggleSubtitle() { - this.setState((state) => { - return { subtitlesOn: !state.subtitlesOn }; - }, () => { - const { subtitlesOn } = this.state; - const { isPresenter } = this.props; - if (!isPresenter && subtitlesOn) { - this?.player?.getInternalPlayer()?.setOption('captions', 'reload', true); - } else { - this?.player?.getInternalPlayer()?.unloadModule('captions'); - } - }); - } - - handleOnReady() { - const { hasPlayedBefore, playerIsReady } = this; - - if (hasPlayedBefore || playerIsReady) { - return; - } - - this.playerIsReady = true; - - this.autoPlayTimeout = setTimeout( - this.autoPlayBlockDetected, - AUTO_PLAY_BLOCK_DETECTION_TIMEOUT_SECONDS * 1000, - ); - } - - handleFirstPlay() { - const { isPresenter } = this.props; - const { hasPlayedBefore } = this; - - if (!hasPlayedBefore) { - this.hasPlayedBefore = true; - this.setState({ autoPlayBlocked: false }); - - clearTimeout(this.autoPlayTimeout); - - if (isPresenter) { - this.sendSyncMessage('presenterReady'); - } - } - } - - handleOnPlay() { - const { isPresenter } = this.props; - const { playing } = this.state; - - const curTime = this.getCurrentTime(); - const rate = this.getCurrentPlaybackRate(); - - if (isPresenter && !playing) { - this.sendSyncMessage('play', { rate, time: curTime }); - } - this.setState({ playing: true }); - - this.handleFirstPlay(); - - if (!isPresenter && !playing) { - this.setState({ playing: false }); - } - } - - handleOnPause() { - const { isPresenter } = this.props; - const { playing } = this.state; - - const curTime = this.getCurrentTime(); - const rate = this.getCurrentPlaybackRate(); - - if (isPresenter && playing) { - this.sendSyncMessage('stop', { rate, time: curTime }); - } - this.setState({ playing: false }); - - this.handleFirstPlay(); - - if (!isPresenter && playing) { - this.setState({ playing: true }); - } - } - - handleOnProgress(data) { - const { mutedByEchoTest } = this.state; - - const volume = this.getCurrentVolume(); - const muted = this.getMuted(); - - const { played, loaded } = data; - - this.setState({played, loaded}); - - if (!mutedByEchoTest) { - this.setState({ volume, muted }); - } - } - - handleVolumeChanged(volume) { - this.setState({ volume }); - } - - handleOnMuted(muted) { - const { mutedByEchoTest } = this.state; - - if (!mutedByEchoTest) { - this.setState({ muted }); - } - } - - handleReload() { - const { key } = this.state; - // increment key and force a re-render of the video component - this.setState({ key: key + 1 }); - } - - onBeforeUnload() { - const { isPresenter } = this.props; - - if (isPresenter) { - this.sendSyncMessage('stop'); - } - } - - static getDerivedStateFromProps(props) { - const { inEchoTest } = props; - - return { mutedByEchoTest: inEchoTest }; - } - - getCurrentTime() { - if (this.player && this.player.getCurrentTime) { - return Math.round(this.player.getCurrentTime()); - } - return 0; - } - - getCurrentPlaybackRate() { - const intPlayer = this.player && this.player.getInternalPlayer(); - const rate = (intPlayer && intPlayer.getPlaybackRate && intPlayer.getPlaybackRate()); - - return typeof (rate) === 'number' ? rate : 1; - } - - setPlaybackRate(rate) { - const intPlayer = this.player && this.player.getInternalPlayer(); - const currentRate = this.getCurrentPlaybackRate(); - - if (currentRate === rate) { - return; - } - - this.setState({ playbackRate: rate }); - if (intPlayer && intPlayer.setPlaybackRate) { - intPlayer.setPlaybackRate(rate); - } - } - - getCurrentVolume() { - const { volume } = this.state; - const intPlayer = this.player && this.player.getInternalPlayer(); - - return (intPlayer && intPlayer.getVolume && intPlayer.getVolume() / 100.0) || volume; - } - - getMuted() { - const { isPresenter } = this.props; - const { muted } = this.state; - const intPlayer = this?.player?.getInternalPlayer?.(); - - return isPresenter ? intPlayer?.isMuted?.() : muted; - } - - autoPlayBlockDetected() { - this.setState({ autoPlayBlocked: true }); - } - - sendSyncMessage(msg, params) { - const timestamp = Date.now(); - - // If message is just a quick pause/un-pause just send nothing - const sinceLastMessage = (timestamp - this.lastMessageTimestamp) / 1000; - if (( - (msg === 'play' && this.lastMessage === 'stop') - || (msg === 'stop' && this.lastMessage === 'play')) - && sinceLastMessage < THROTTLE_INTERVAL_SECONDS) { - return clearTimeout(this.throttleTimeout); - } - - // Ignore repeat presenter ready messages - if (this.lastMessage === msg && msg === 'presenterReady') { - logger.debug('Ignoring a repeated presenterReady message'); - } else { - // Play/pause messages are sent with a delay, to permit cancelling it in case of - // quick sucessive play/pauses - const messageDelay = (msg === 'play' || msg === 'stop') ? THROTTLE_INTERVAL_SECONDS : 0; - - this.throttleTimeout = setTimeout(() => { - sendMessage(msg, { ...params }); - }, messageDelay * 1000); - - this.lastMessage = msg; - this.lastMessageTimestamp = timestamp; - } - return true; - } - - registerVideoListeners() { - const { isPresenter } = this.props; - - if (isPresenter) { - this.syncInterval = setInterval(() => { - const { playing } = this.state; - const curTime = this.getCurrentTime(); - const rate = this.getCurrentPlaybackRate(); - - // Always pause video if presenter is has not started sharing, e.g., blocked by autoplay - const playingState = this.hasPlayedBefore ? playing : false; - - this.sendSyncMessage('playerUpdate', { rate, time: curTime, state: playingState }); - }, SYNC_INTERVAL_SECONDS * 1000); - } else { - onMessage('play', ({ time }) => { - const { hasPlayedBefore, player } = this; - - if (!player || !hasPlayedBefore) { - return; - } - this.seekTo(time); - this.setState({ playing: true }); - - logger.debug({ logCode: 'external_video_client_play' }, 'Play external video'); - }); - - onMessage('stop', ({ time }) => { - const { hasPlayedBefore, player } = this; - - if (!player || !hasPlayedBefore) { - return; - } - this.seekTo(time); - this.setState({ playing: false }); - - logger.debug({ logCode: 'external_video_client_stop' }, 'Stop external video'); - }); - - onMessage('presenterReady', () => { - const { hasPlayedBefore } = this; - - logger.debug({ logCode: 'external_video_presenter_ready' }, 'Presenter is ready to sync'); - - if (!hasPlayedBefore) { - this.setState({ playing: true }); - } - }); - - onMessage('playerUpdate', (data) => { - const { hasPlayedBefore, player } = this; - const { playing } = this.state; - const { time, rate, state } = data; - - if (!player || !hasPlayedBefore) { - return; - } - - if (rate !== this.getCurrentPlaybackRate()) { - this.setPlaybackRate(rate); - logger.debug({ - logCode: 'external_video_client_update_rate', - extraInfo: { - newRate: rate, - }, - }, 'Change external video playback rate.'); - } - - this.seekTo(time); - - const playingState = getPlayingState(state); - if (playing !== playingState) { - this.setState({ playing: playingState }); - } - }); - } - } - - seekTo(time) { - const { player } = this; - - if (!player) { - return logger.error('No player on seek'); - } - - // Seek if viewer has drifted too far away from presenter - if (Math.abs(this.getCurrentTime() - time) > SYNC_INTERVAL_SECONDS * 0.75) { - player.seekTo(time, true); - logger.debug({ - logCode: 'external_video_client_update_seek', - extraInfo: { time }, - }, `Seek external video to: ${time}`); - } - return true; - } - - renderFullscreenButton() { - const { intl, fullscreenElementId, fullscreenContext } = this.props; - - if (!ALLOW_FULLSCREEN) return null; - - return ( - - ); - } - - render() { - const { - videoUrl, - isPresenter, - intl, - top, - left, - right, - height, - width, - fullscreenContext, - isResizing, - } = this.props; - - const { - playing, playbackRate, mutedByEchoTest, autoPlayBlocked, - volume, muted, key, showHoverToolBar, played, loaded, subtitlesOn - } = this.state; - - // This looks weird, but I need to get this nested player - const playerName = this.player && this.player.player - && this.player.player.player && this.player.player.player.constructor.name; - - let toolbarStyle = 'hoverToolbar'; - - if (deviceInfo.isMobile && !showHoverToolBar) { - toolbarStyle = 'dontShowMobileHoverToolbar'; - } - - if (deviceInfo.isMobile && showHoverToolBar) { - toolbarStyle = 'showMobileHoverToolbar'; - } - const isMinimized = width === 0 && height === 0; - - return ( - - { this.playerParent = ref; }} - > - { - autoPlayBlocked - ? ( - - {intl.formatMessage(intlMessages.autoPlayWarning)} - - ) - : '' - } - - { this.player = ref; }} - height="100%" - width="100%" - /> - { - !isPresenter - ? [ - ( - - - - - {playerName === 'YouTube' && ( - - )} - - {this.renderFullscreenButton()} - - - - - - - - ), - (deviceInfo.isMobile && playing) && ( - { this.overlay = ref; }} - onTouchStart={() => { - clearTimeout(this.mobileHoverSetTimeout); - this.setState({ showHoverToolBar: true }); - }} - onTouchEnd={() => { - this.mobileHoverSetTimeout = setTimeout( - () => this.setState({ showHoverToolBar: false }), - 5000, - ); - }} - /> - ), - ] - : null - } - - - ); - } -} - -VideoPlayer.propTypes = { - intl: PropTypes.shape({ - formatMessage: PropTypes.func.isRequired, - }).isRequired, - fullscreenElementId: PropTypes.string.isRequired, - fullscreenContext: PropTypes.bool.isRequired, -}; - -export default injectIntl(injectWbResizeEvent(VideoPlayer)); diff --git a/bigbluebutton-html5/imports/ui/components/external-video-player/container.jsx b/bigbluebutton-html5/imports/ui/components/external-video-player/container.jsx deleted file mode 100644 index 4faeb97504..0000000000 --- a/bigbluebutton-html5/imports/ui/components/external-video-player/container.jsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -import { withTracker } from 'meteor/react-meteor-data'; -import { Session } from 'meteor/session'; -import { getVideoUrl } from './service'; -import ExternalVideoComponent from './component'; -import { - layoutSelect, - layoutSelectInput, - layoutSelectOutput, - layoutDispatch, -} from '../layout/context'; -import ExternalVideoPlayerContainer from './external-video-player-graphql/component'; - -const ExternalVideoContainer = (props) => { - const fullscreenElementId = 'ExternalVideo'; - const externalVideo = layoutSelectOutput((i) => i.externalVideo); - const cameraDock = layoutSelectInput((i) => i.cameraDock); - const { isResizing } = cameraDock; - const layoutContextDispatch = layoutDispatch(); - const fullscreen = layoutSelect((i) => i.fullscreen); - const { element } = fullscreen; - const fullscreenContext = (element === fullscreenElementId); - - return ( - - ); -}; - -withTracker(({ isPresenter }) => { - const inEchoTest = Session.get('inEchoTest'); - return { - inEchoTest, - isPresenter, - videoUrl: getVideoUrl(), - }; -})(ExternalVideoContainer); - -export default ExternalVideoPlayerContainer; diff --git a/bigbluebutton-html5/imports/ui/components/external-video-player/external-video-player-graphql/component.tsx b/bigbluebutton-html5/imports/ui/components/external-video-player/external-video-player-graphql/component.tsx index b34b391d4e..81a924ec01 100644 --- a/bigbluebutton-html5/imports/ui/components/external-video-player/external-video-player-graphql/component.tsx +++ b/bigbluebutton-html5/imports/ui/components/external-video-player/external-video-player-graphql/component.tsx @@ -236,6 +236,7 @@ const ExternalVideoPlayer: React.FC = ({ if (deviceInfo.isMobile && showHoverToolBar) { toolbarStyle = 'showMobileHoverToolbar'; } + console.log({videoUrl}) return ( - {intl.formatMessage(intlMessages.urlError)} - - ) - : null - ); - } - - render() { - const { intl, setIsOpen, isOpen, onRequestClose, priority, } = this.props; - const { url, sharing } = this.state; - const { animations } = Settings.application; - - const startDisabled = !isUrlValid(url); - - return ( - setIsOpen(false)} - contentLabel={intl.formatMessage(intlMessages.title)} - title={intl.formatMessage(intlMessages.title)} - {...{ - setIsOpen, - isOpen, - onRequestClose, - priority, - }} - > - - - - - {intl.formatMessage(intlMessages.note)} - - - -
- {this.renderUrlError()} -
- - - - - ); - } -} - -export default injectIntl(ExternalVideoModal); diff --git a/bigbluebutton-html5/imports/ui/components/external-video-player/modal/container.jsx b/bigbluebutton-html5/imports/ui/components/external-video-player/modal/container.jsx deleted file mode 100644 index e9453df7d9..0000000000 --- a/bigbluebutton-html5/imports/ui/components/external-video-player/modal/container.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { withTracker } from 'meteor/react-meteor-data'; -import ExternalVideoModal from './component'; -import { startWatching, getVideoUrl } from '../service'; -import ExternalVideoPlayerModal from '../external-video-player-graphql/modal/component'; - -const ExternalVideoModalContainer = (props) => ; - -withTracker(() => ({ - startWatching, - videoUrl: getVideoUrl(), -}))(ExternalVideoModalContainer); - -export default ExternalVideoPlayerModal; diff --git a/bigbluebutton-html5/imports/ui/components/external-video-player/modal/styles.js b/bigbluebutton-html5/imports/ui/components/external-video-player/modal/styles.js deleted file mode 100644 index 872ecf356e..0000000000 --- a/bigbluebutton-html5/imports/ui/components/external-video-player/modal/styles.js +++ /dev/null @@ -1,110 +0,0 @@ -import styled from 'styled-components'; -import { - borderSize, - borderRadius, - smPaddingY, - mdPaddingX, -} from '/imports/ui/stylesheets/styled-components/general'; -import { - colorText, - colorGrayLighter, - colorGray, - colorBlueLight, - colorPrimary, -} from '/imports/ui/stylesheets/styled-components/palette'; -import { fontSizeSmall } from '/imports/ui/stylesheets/styled-components/typography'; -import ModalSimple from '/imports/ui/components/common/modal/simple/component'; -import Button from '/imports/ui/components/common/button/component'; - -const UrlError = styled.div` - color: red; - padding: 1em 0 2.5em 0; - - ${({ animations }) => animations && ` - transition: 1s; - `} -`; - -const ExternalVideoModal = styled(ModalSimple)` - padding: 1rem; - min-height: 23rem; -`; - -const Content = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - padding: 0; - margin-right: auto; - margin-left: auto; - width: 100%; -`; - -const VideoUrl = styled.div` - margin: 0 ${borderSize} 0 ${borderSize}; - - & > label { - display: block; - } - - & > label input { - display: block; - margin: 10px 0 10px 0; - padding: 0.4em; - color: ${colorText}; - line-height: 2rem; - width: 100%; - font-family: inherit; - font-weight: inherit; - border: 1px solid ${colorGrayLighter}; - border-radius: ${borderRadius}; - - ${({ animations }) => animations && ` - transition: box-shadow .2s; - `} - - &:focus { - outline: none; - border-radius: ${borderSize}; - box-shadow: 0 0 0 ${borderSize} ${colorBlueLight}, inset 0 0 0 1px ${colorPrimary}; - } - } - - & > span { - font-weight: 600; - } -`; - -const ExternalVideoNote = styled.div` - color: ${colorGray}; - font-size: ${fontSizeSmall}; - font-style: italic; - padding-top: ${smPaddingY}; -`; - -const StartButton = styled(Button)` - display: flex; - align-self: center; - - &:focus { - outline: none !important; - } - - & > i { - color: #3c5764; - } - - margin: 0; - display: block; - position: absolute; - bottom: ${mdPaddingX}; -`; - -export default { - UrlError, - ExternalVideoModal, - Content, - VideoUrl, - ExternalVideoNote, - StartButton, -}; diff --git a/bigbluebutton-html5/imports/ui/components/external-video-player/service.js b/bigbluebutton-html5/imports/ui/components/external-video-player/service.js index dd7584497c..4976f37529 100644 --- a/bigbluebutton-html5/imports/ui/components/external-video-player/service.js +++ b/bigbluebutton-html5/imports/ui/components/external-video-player/service.js @@ -1,4 +1,3 @@ -import { ExternalVideoMeetings } from '/imports/api/meetings'; import Auth from '/imports/ui/services/auth'; import { getStreamer } from '/imports/api/external-videos'; @@ -76,14 +75,6 @@ const removeAllListeners = (eventType) => { streamer.removeAllListeners(eventType); }; -const getVideoUrl = () => { - const meetingId = Auth.meetingID; - const externalVideo = ExternalVideoMeetings - .findOne({ meetingId }, { fields: { externalVideoUrl: 1 } }); - - return externalVideo && externalVideo.externalVideoUrl; -}; - // Convert state (Number) to playing (Boolean) const getPlayingState = (state) => { if (state === 1) return true; @@ -95,7 +86,6 @@ export { sendMessage, onMessage, removeAllListeners, - getVideoUrl, isUrlValid, startWatching, stopWatching, diff --git a/bigbluebutton-html5/imports/ui/components/external-video-player/styles.js b/bigbluebutton-html5/imports/ui/components/external-video-player/styles.js deleted file mode 100644 index fd056d091b..0000000000 --- a/bigbluebutton-html5/imports/ui/components/external-video-player/styles.js +++ /dev/null @@ -1,119 +0,0 @@ -import styled from 'styled-components'; -import ReactPlayer from 'react-player'; - -const VideoPlayerWrapper = styled.div` - position: relative; - width: 100%; - height: 100%; - - ${({ fullscreen }) => fullscreen && ` - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - z-index: 99; - `} -`; - -const AutoPlayWarning = styled.p` - position: absolute; - z-index: 100; - font-size: x-large; - color: white; - width: 100%; - background-color: rgba(6,23,42,0.5); - bottom: 20%; - vertical-align: middle; - text-align: center; - pointer-events: none; -`; - -const VideoPlayer = styled(ReactPlayer)` - width: 100%; - height: 100%; - & > iframe { - display: flex; - flex-flow: column; - flex-grow: 1; - flex-shrink: 1; - position: relative; - overflow-x: hidden; - overflow-y: auto; - border-style: none; - border-bottom: none; - } -`; - -const MobileControlsOverlay = styled.span` - position: absolute; - top:0; - left: 0; - width: 100%; - height: 100%; - background-color: transparent; -`; - -const HoverToolbar = styled.div` - ${({ toolbarStyle }) => toolbarStyle === 'hoverToolbar' && ` - display: none; - - :hover > & { - display: flex; - } - `} - - ${({ toolbarStyle }) => toolbarStyle === 'dontShowMobileHoverToolbar' && ` - display: none; - `} - - ${({ toolbarStyle }) => toolbarStyle === 'showMobileHoverToolbar' && ` - display: flex; - z-index: 2; - `} -`; - -const ProgressBar = styled.div` - position: absolute; - bottom: 0; - height: 5px; - width: 100%; - - background-color: transparent; -`; - -const Loaded = styled.div` - height: 100%; - background-color: gray; -`; - -const Played = styled.div` - height: 100%; - background-color: #DF2721; -`; - -const ButtonsWrapper = styled.div` - position: absolute; - right: auto; - left: 0; - bottom: 0; - top: 0; - display: flex; - - [dir="rtl"] & { - right: 0; - left : auto; - } -`; - -export default { - VideoPlayerWrapper, - AutoPlayWarning, - VideoPlayer, - MobileControlsOverlay, - HoverToolbar, - ProgressBar, - Loaded, - Played, - ButtonsWrapper, -}; diff --git a/bigbluebutton-html5/imports/ui/components/media/service.js b/bigbluebutton-html5/imports/ui/components/media/service.js index 4c7df5b9fa..4262742855 100755 --- a/bigbluebutton-html5/imports/ui/components/media/service.js +++ b/bigbluebutton-html5/imports/ui/components/media/service.js @@ -2,12 +2,11 @@ import { isScreenBroadcasting, isCameraAsContentBroadcasting } from '/imports/ui import Settings from '/imports/ui/services/settings'; import getFromUserSettings from '/imports/ui/services/users-settings'; import { - isExternalVideoEnabled, isScreenSharingEnabled, isCameraAsContentEnabled, isPresentationEnabled, + isScreenSharingEnabled, isCameraAsContentEnabled, isPresentationEnabled, } from '/imports/ui/services/features'; import { ACTIONS } from '../layout/enums'; import UserService from '/imports/ui/components/user-list/service'; import NotesService from '/imports/ui/components/notes/service'; -import { getVideoUrl } from '/imports/ui/components/external-video-player/service'; import VideoStreams from '/imports/api/video-streams'; import Auth from '/imports/ui/services/auth/index'; @@ -26,10 +25,6 @@ function shouldShowScreenshare() { && (isScreenBroadcasting() || isCameraAsContentBroadcasting()); } -function shouldShowExternalVideo() { - return isExternalVideoEnabled() && !!getVideoUrl(); -} - function shouldShowSharedNotes() { return NotesService.isSharedNotesPinned(); } @@ -51,8 +46,7 @@ const isThereWebcamOn = (meetingID) => { }).count() > 0; } -const buildLayoutWhenPresentationAreaIsDisabled = (layoutContextDispatch) => { - const isSharingVideo = getVideoUrl(); +const buildLayoutWhenPresentationAreaIsDisabled = (layoutContextDispatch, isSharingVideo) => { const isSharedNotesPinned = NotesService.isSharedNotesPinned(); const hasScreenshare = isScreenSharingEnabled(); const isThereWebcam = isThereWebcamOn(Auth.meetingID); @@ -71,7 +65,6 @@ export default { buildLayoutWhenPresentationAreaIsDisabled, shouldShowWhiteboard, shouldShowScreenshare, - shouldShowExternalVideo, shouldShowOverlay, isScreenBroadcasting, isCameraAsContentBroadcasting, diff --git a/bigbluebutton-html5/imports/ui/components/pads/service.js b/bigbluebutton-html5/imports/ui/components/pads/service.js index 3847ae814f..6cf2fab99f 100644 --- a/bigbluebutton-html5/imports/ui/components/pads/service.js +++ b/bigbluebutton-html5/imports/ui/components/pads/service.js @@ -4,7 +4,6 @@ import { makeCall } from '/imports/ui/services/api'; import Auth from '/imports/ui/services/auth'; import Settings from '/imports/ui/services/settings'; import { - getVideoUrl, stopWatching, } from '/imports/ui/components/external-video-player/service'; import { @@ -117,7 +116,7 @@ const getPinnedPad = () => { const pinPad = (externalId, pinned) => { if (pinned) { // Stop external video sharing if it's running. - if (getVideoUrl()) stopWatching(); + stopWatching(); // Stop screen sharing if it's running. if (isScreenBroadcasting()) screenshareHasEnded(); diff --git a/bigbluebutton-html5/imports/ui/components/subscriptions/component.jsx b/bigbluebutton-html5/imports/ui/components/subscriptions/component.jsx index 39ff09dabf..b8005dd2f4 100755 --- a/bigbluebutton-html5/imports/ui/components/subscriptions/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/subscriptions/component.jsx @@ -27,7 +27,6 @@ const SUBSCRIPTIONS = [ 'video-streams', 'connection-status', 'voice-call-states', - 'external-video-meetings', 'breakouts', 'breakouts-history', 'pads', From 87c1ffb2363396eca4f1f40bb48b107792d53953 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ram=C3=B3n=20Souza?= Date: Thu, 30 Nov 2023 09:40:29 +0100 Subject: [PATCH 2/2] remove console log --- .../external-video-player-graphql/component.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/bigbluebutton-html5/imports/ui/components/external-video-player/external-video-player-graphql/component.tsx b/bigbluebutton-html5/imports/ui/components/external-video-player/external-video-player-graphql/component.tsx index 81a924ec01..b34b391d4e 100644 --- a/bigbluebutton-html5/imports/ui/components/external-video-player/external-video-player-graphql/component.tsx +++ b/bigbluebutton-html5/imports/ui/components/external-video-player/external-video-player-graphql/component.tsx @@ -236,7 +236,6 @@ const ExternalVideoPlayer: React.FC = ({ if (deviceInfo.isMobile && showHoverToolBar) { toolbarStyle = 'showMobileHoverToolbar'; } - console.log({videoUrl}) return (