bigbluebutton-Github/bigbluebutton-html5/imports/startup/client/base.jsx

105 lines
2.9 KiB
JavaScript
Executable File

import React, { Component } from 'react';
import AppContainer from '/imports/ui/components/app/container';
import Session from '/imports/ui/services/storage/in-memory';
import DebugWindow from '/imports/ui/components/debug-window/component';
import { ACTIONS } from '/imports/ui/components/layout/enums';
import useSettings from '/imports/ui/services/settings/hooks/useSettings';
import { SETTINGS } from '/imports/ui/services/settings/enums';
const HTML = document.getElementsByTagName('html')[0];
const fullscreenChangedEvents = [
'fullscreenchange',
'webkitfullscreenchange',
'mozfullscreenchange',
'MSFullscreenChange',
];
class Base extends Component {
constructor(props) {
super(props);
this.handleFullscreenChange = this.handleFullscreenChange.bind(this);
}
componentDidMount() {
const { animations } = this.props;
const APP_CONFIG = window.meetingClientSettings.public.app;
const CAPTIONS_ALWAYS_VISIBLE = APP_CONFIG.audioCaptions.alwaysVisible;
if (animations) HTML.classList.add('animationsEnabled');
if (!animations) HTML.classList.add('animationsDisabled');
fullscreenChangedEvents.forEach((event) => {
document.addEventListener(event, this.handleFullscreenChange);
});
Session.setItem('isFullscreen', false);
Session.setItem('audioCaptions', CAPTIONS_ALWAYS_VISIBLE);
}
componentDidUpdate(prevProps) {
const { animations } = this.props;
const enabled = HTML.classList.contains('animationsEnabled');
const disabled = HTML.classList.contains('animationsDisabled');
if (animations && animations !== prevProps.animations) {
if (disabled) HTML.classList.remove('animationsDisabled');
HTML.classList.add('animationsEnabled');
} else if (!animations && animations !== prevProps.animations) {
if (enabled) HTML.classList.remove('animationsEnabled');
HTML.classList.add('animationsDisabled');
}
}
componentWillUnmount() {
fullscreenChangedEvents.forEach((event) => {
document.removeEventListener(event, this.handleFullscreenChange);
});
}
handleFullscreenChange() {
const { layoutContextDispatch } = this.props;
if (document.fullscreenElement
|| document.webkitFullscreenElement
|| document.mozFullScreenElement
|| document.msFullscreenElement) {
Session.setItem('isFullscreen', true);
} else {
layoutContextDispatch({
type: ACTIONS.SET_FULLSCREEN_ELEMENT,
value: {
element: '',
group: '',
},
});
Session.setItem('isFullscreen', false);
}
}
render() {
return (
<>
<DebugWindow />
<AppContainer {...this.props} />
</>
);
}
}
const BaseContainer = (props) => {
const { animations } = useSettings(SETTINGS.APPLICATION);
return (
<Base
{...{
animations,
...props,
}}
/>
);
};
export default BaseContainer;