bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/container.jsx
João Victor Nunes 06500be757
refactor(storage): replace Tracker.Dependency with observer hook (#20322)
* refactor(storage): replace Tracker.Dependency with observer hook

* fix(storage): set initial value

* refactor(storage): stop using Meteor's Session singleton
2024-06-06 10:50:03 -03:00

100 lines
3.7 KiB
JavaScript

import React, { useContext } from 'react';
import { useMutation } from '@apollo/client';
import ActionsDropdown from './component';
import { layoutSelectInput, layoutDispatch, layoutSelect } from '../../layout/context';
import { SMALL_VIEWPORT_BREAKPOINT, ACTIONS, PANELS } from '../../layout/enums';
import { isCameraAsContentEnabled, isTimerFeatureEnabled } from '/imports/ui/services/features';
import { PluginsContext } from '/imports/ui/components/components-data/plugin-context/context';
import { useShortcut } from '/imports/ui/core/hooks/useShortcut';
import {
PROCESSED_PRESENTATIONS_SUBSCRIPTION,
} from '/imports/ui/components/whiteboard/queries';
import useDeduplicatedSubscription from '/imports/ui/core/hooks/useDeduplicatedSubscription';
import { SET_PRESENTER } from '/imports/ui/core/graphql/mutations/userMutations';
import { TIMER_ACTIVATE, TIMER_DEACTIVATE } from '../../timer/mutations';
import Auth from '/imports/ui/services/auth';
import { PRESENTATION_SET_CURRENT } from '../../presentation/mutations';
import { useStorageKey } from '/imports/ui/services/storage/hooks';
const ActionsDropdownContainer = (props) => {
const sidebarContent = layoutSelectInput((i) => i.sidebarContent);
const sidebarNavigation = layoutSelectInput((i) => i.sidebarNavigation);
const { width: browserWidth } = layoutSelectInput((i) => i.browser);
const isMobile = browserWidth <= SMALL_VIEWPORT_BREAKPOINT;
const layoutContextDispatch = layoutDispatch();
const isRTL = layoutSelect((i) => i.isRTL);
const { pluginsExtensibleAreasAggregatedState } = useContext(PluginsContext);
let actionButtonDropdownItems = [];
if (pluginsExtensibleAreasAggregatedState.actionButtonDropdownItems) {
actionButtonDropdownItems = [...pluginsExtensibleAreasAggregatedState.actionButtonDropdownItems];
}
const openActions = useShortcut('openActions');
const { data: presentationData } = useDeduplicatedSubscription(
PROCESSED_PRESENTATIONS_SUBSCRIPTION,
);
const presentations = presentationData?.pres_presentation || [];
const [setPresenter] = useMutation(SET_PRESENTER);
const [timerActivate] = useMutation(TIMER_ACTIVATE);
const [timerDeactivate] = useMutation(TIMER_DEACTIVATE);
const [presentationSetCurrent] = useMutation(PRESENTATION_SET_CURRENT);
const handleTakePresenter = () => {
setPresenter({ variables: { userId: Auth.userID } });
};
const setPresentation = (presentationId) => {
presentationSetCurrent({ variables: { presentationId } });
};
const activateTimer = () => {
const TIMER_CONFIG = window.meetingClientSettings.public.timer;
const MILLI_IN_MINUTE = 60000;
const stopwatch = true;
const running = false;
const time = TIMER_CONFIG.time * MILLI_IN_MINUTE;
timerActivate({ variables: { stopwatch, running, time } });
setTimeout(() => {
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,
value: true,
});
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_PANEL,
value: PANELS.TIMER,
});
}, 500);
};
const isDropdownOpen = useStorageKey('dropdownOpen');
return (
<ActionsDropdown
{...{
layoutContextDispatch,
sidebarContent,
sidebarNavigation,
isMobile,
isRTL,
actionButtonDropdownItems,
presentations,
isTimerFeatureEnabled: isTimerFeatureEnabled(),
isDropdownOpen,
setPresentation,
isCameraAsContentEnabled: isCameraAsContentEnabled(),
handleTakePresenter,
activateTimer,
deactivateTimer: timerDeactivate,
shortcuts: openActions,
...props,
}}
/>
);
};
export default ActionsDropdownContainer;