Merge pull request #19241 from ramonlsouza/remove-external-video-meetings
refactor: remove unused external video code
This commit is contained in:
Ramón Souza
GitHub
commit
52c7194957
@ -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),
|
||||
|
||||
@ -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);
|
||||
@ -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);
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
@ -1,2 +1 @@
|
||||
import './methods';
|
||||
import './eventHandlers';
|
||||
|
||||
@ -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}`);
|
||||
}
|
||||
}
|
||||
@ -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}`);
|
||||
}
|
||||
}
|
||||
@ -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}`);
|
||||
}
|
||||
}
|
||||
@ -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,
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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),
|
||||
|
||||
@ -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 });
|
||||
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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(),
|
||||
|
||||
@ -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(),
|
||||
};
|
||||
|
||||
@ -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 ? <ScreenshareContainer isLayoutSwapped={!presentationIsOpen} /> : null}
|
||||
{
|
||||
shouldShowExternalVideo
|
||||
? <ExternalVideoContainer isLayoutSwapped={!presentationIsOpen} isPresenter={isPresenter} />
|
||||
? <ExternalVideoPlayerContainer isLayoutSwapped={!presentationIsOpen} isPresenter={isPresenter} />
|
||||
: null
|
||||
}
|
||||
{shouldShowSharedNotes
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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 (
|
||||
<FullscreenButtonContainer
|
||||
key={uniqueId('fullscreenButton-')}
|
||||
elementName={intl.formatMessage(intlMessages.fullscreenLabel)}
|
||||
fullscreenRef={this.playerParent}
|
||||
elementId={fullscreenElementId}
|
||||
isFullscreen={fullscreenContext}
|
||||
dark
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
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 (
|
||||
<span
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top,
|
||||
left,
|
||||
right,
|
||||
height,
|
||||
width,
|
||||
pointerEvents: isResizing ? 'none' : 'inherit',
|
||||
display: isMinimized && 'none',
|
||||
background: 'var(--color-black)',
|
||||
}}
|
||||
>
|
||||
<Styled.VideoPlayerWrapper
|
||||
id="video-player"
|
||||
data-test="videoPlayer"
|
||||
fullscreen={fullscreenContext}
|
||||
ref={(ref) => { this.playerParent = ref; }}
|
||||
>
|
||||
{
|
||||
autoPlayBlocked
|
||||
? (
|
||||
<Styled.AutoPlayWarning>
|
||||
{intl.formatMessage(intlMessages.autoPlayWarning)}
|
||||
</Styled.AutoPlayWarning>
|
||||
)
|
||||
: ''
|
||||
}
|
||||
|
||||
<Styled.VideoPlayer
|
||||
url={videoUrl}
|
||||
config={this.opts}
|
||||
volume={(muted || mutedByEchoTest) ? 0 : volume}
|
||||
muted={muted || mutedByEchoTest}
|
||||
playing={playing}
|
||||
playbackRate={playbackRate}
|
||||
onProgress={this.handleOnProgress}
|
||||
onReady={this.handleOnReady}
|
||||
onPlay={this.handleOnPlay}
|
||||
onPause={this.handleOnPause}
|
||||
controls={isPresenter}
|
||||
key={`react-player${key}`}
|
||||
ref={(ref) => { this.player = ref; }}
|
||||
height="100%"
|
||||
width="100%"
|
||||
/>
|
||||
{
|
||||
!isPresenter
|
||||
? [
|
||||
(
|
||||
<Styled.HoverToolbar key="hover-toolbar-external-video">
|
||||
<VolumeSlider
|
||||
hideVolume={this.hideVolume[playerName]}
|
||||
volume={volume}
|
||||
muted={muted || mutedByEchoTest}
|
||||
onMuted={this.handleOnMuted}
|
||||
onVolumeChanged={this.handleVolumeChanged}
|
||||
/>
|
||||
<Styled.ButtonsWrapper>
|
||||
<ReloadButton
|
||||
handleReload={this.handleReload}
|
||||
label={intl.formatMessage(intlMessages.refreshLabel)}
|
||||
/>
|
||||
{playerName === 'YouTube' && (
|
||||
<Subtitles
|
||||
toggleSubtitle={this.toggleSubtitle}
|
||||
label={subtitlesOn
|
||||
? intl.formatMessage(intlMessages.subtitlesOn)
|
||||
: intl.formatMessage(intlMessages.subtitlesOff)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Styled.ButtonsWrapper>
|
||||
{this.renderFullscreenButton()}
|
||||
|
||||
<Styled.ProgressBar>
|
||||
<Styled.Loaded
|
||||
style={{ width: loaded * 100 + '%' }}
|
||||
>
|
||||
<Styled.Played
|
||||
style={{ width: played * 100 / loaded + '%'}}
|
||||
/>
|
||||
</Styled.Loaded>
|
||||
</Styled.ProgressBar>
|
||||
</Styled.HoverToolbar>
|
||||
),
|
||||
(deviceInfo.isMobile && playing) && (
|
||||
<Styled.MobileControlsOverlay
|
||||
key="mobile-overlay-external-video"
|
||||
ref={(ref) => { this.overlay = ref; }}
|
||||
onTouchStart={() => {
|
||||
clearTimeout(this.mobileHoverSetTimeout);
|
||||
this.setState({ showHoverToolBar: true });
|
||||
}}
|
||||
onTouchEnd={() => {
|
||||
this.mobileHoverSetTimeout = setTimeout(
|
||||
() => this.setState({ showHoverToolBar: false }),
|
||||
5000,
|
||||
);
|
||||
}}
|
||||
/>
|
||||
),
|
||||
]
|
||||
: null
|
||||
}
|
||||
</Styled.VideoPlayerWrapper>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
VideoPlayer.propTypes = {
|
||||
intl: PropTypes.shape({
|
||||
formatMessage: PropTypes.func.isRequired,
|
||||
}).isRequired,
|
||||
fullscreenElementId: PropTypes.string.isRequired,
|
||||
fullscreenContext: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(injectWbResizeEvent(VideoPlayer));
|
||||
@ -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 (
|
||||
<ExternalVideoComponent
|
||||
{
|
||||
...{
|
||||
layoutContextDispatch,
|
||||
...props,
|
||||
...externalVideo,
|
||||
isResizing,
|
||||
fullscreenElementId,
|
||||
fullscreenContext,
|
||||
}
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
withTracker(({ isPresenter }) => {
|
||||
const inEchoTest = Session.get('inEchoTest');
|
||||
return {
|
||||
inEchoTest,
|
||||
isPresenter,
|
||||
videoUrl: getVideoUrl(),
|
||||
};
|
||||
})(ExternalVideoContainer);
|
||||
|
||||
export default ExternalVideoPlayerContainer;
|
||||
@ -1,147 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import { isUrlValid } from '../service';
|
||||
import Settings from '/imports/ui/services/settings';
|
||||
import Styled from './styles';
|
||||
|
||||
const intlMessages = defineMessages({
|
||||
start: {
|
||||
id: 'app.externalVideo.start',
|
||||
description: 'Share external video',
|
||||
},
|
||||
urlError: {
|
||||
id: 'app.externalVideo.urlError',
|
||||
description: 'Not a video URL error',
|
||||
},
|
||||
input: {
|
||||
id: 'app.externalVideo.input',
|
||||
description: 'Video URL',
|
||||
},
|
||||
urlInput: {
|
||||
id: 'app.externalVideo.urlInput',
|
||||
description: 'URL input field placeholder',
|
||||
},
|
||||
title: {
|
||||
id: 'app.externalVideo.title',
|
||||
description: 'Modal title',
|
||||
},
|
||||
close: {
|
||||
id: 'app.externalVideo.close',
|
||||
description: 'Close',
|
||||
},
|
||||
note: {
|
||||
id: 'app.externalVideo.noteLabel',
|
||||
description: 'provides hint about Shared External videos',
|
||||
},
|
||||
});
|
||||
|
||||
class ExternalVideoModal extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const { videoUrl } = props;
|
||||
|
||||
this.state = {
|
||||
url: videoUrl,
|
||||
sharing: videoUrl,
|
||||
};
|
||||
|
||||
this.startWatchingHandler = this.startWatchingHandler.bind(this);
|
||||
this.updateVideoUrlHandler = this.updateVideoUrlHandler.bind(this);
|
||||
this.renderUrlError = this.renderUrlError.bind(this);
|
||||
this.updateVideoUrlHandler = this.updateVideoUrlHandler.bind(this);
|
||||
}
|
||||
|
||||
startWatchingHandler() {
|
||||
const {
|
||||
startWatching,
|
||||
setIsOpen,
|
||||
} = this.props;
|
||||
|
||||
const { url } = this.state;
|
||||
|
||||
startWatching(url.trim());
|
||||
setIsOpen(false);
|
||||
}
|
||||
|
||||
updateVideoUrlHandler(ev) {
|
||||
this.setState({ url: ev.target.value });
|
||||
}
|
||||
|
||||
renderUrlError() {
|
||||
const { intl } = this.props;
|
||||
const { url } = this.state;
|
||||
const { animations } = Settings.application;
|
||||
|
||||
const valid = (!url || url.length <= 3) || isUrlValid(url);
|
||||
|
||||
return (
|
||||
!valid
|
||||
? (
|
||||
<Styled.UrlError animations={animations}>
|
||||
{intl.formatMessage(intlMessages.urlError)}
|
||||
</Styled.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 (
|
||||
<Styled.ExternalVideoModal
|
||||
onRequestClose={() => setIsOpen(false)}
|
||||
contentLabel={intl.formatMessage(intlMessages.title)}
|
||||
title={intl.formatMessage(intlMessages.title)}
|
||||
{...{
|
||||
setIsOpen,
|
||||
isOpen,
|
||||
onRequestClose,
|
||||
priority,
|
||||
}}
|
||||
>
|
||||
<Styled.Content>
|
||||
<Styled.VideoUrl animations={animations}>
|
||||
<label htmlFor="video-modal-input">
|
||||
{intl.formatMessage(intlMessages.input)}
|
||||
<input
|
||||
autoFocus
|
||||
id="video-modal-input"
|
||||
onChange={this.updateVideoUrlHandler}
|
||||
name="video-modal-input"
|
||||
placeholder={intl.formatMessage(intlMessages.urlInput)}
|
||||
disabled={sharing}
|
||||
aria-describedby="exernal-video-note"
|
||||
onPaste={(e) => { e.stopPropagation(); }}
|
||||
onCut={(e) => { e.stopPropagation(); }}
|
||||
onCopy={(e) => { e.stopPropagation(); }}
|
||||
/>
|
||||
</label>
|
||||
<Styled.ExternalVideoNote id="external-video-note">
|
||||
{intl.formatMessage(intlMessages.note)}
|
||||
</Styled.ExternalVideoNote>
|
||||
</Styled.VideoUrl>
|
||||
|
||||
<div>
|
||||
{this.renderUrlError()}
|
||||
</div>
|
||||
|
||||
<Styled.StartButton
|
||||
label={intl.formatMessage(intlMessages.start)}
|
||||
onClick={this.startWatchingHandler}
|
||||
disabled={startDisabled}
|
||||
data-test="startNewVideo"
|
||||
color="primary"
|
||||
/>
|
||||
</Styled.Content>
|
||||
</Styled.ExternalVideoModal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default injectIntl(ExternalVideoModal);
|
||||
@ -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) => <ExternalVideoModal {...props} />;
|
||||
|
||||
withTracker(() => ({
|
||||
startWatching,
|
||||
videoUrl: getVideoUrl(),
|
||||
}))(ExternalVideoModalContainer);
|
||||
|
||||
export default ExternalVideoPlayerModal;
|
||||
@ -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,
|
||||
};
|
||||
@ -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,
|
||||
|
||||
@ -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,
|
||||
};
|
||||
@ -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,
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -27,7 +27,6 @@ const SUBSCRIPTIONS = [
|
||||
'video-streams',
|
||||
'connection-status',
|
||||
'voice-call-states',
|
||||
'external-video-meetings',
|
||||
'breakouts',
|
||||
'breakouts-history',
|
||||
'pads',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user