Skip to content

Commit

Permalink
Merge pull request #12729 from ramonlsouza/fullscreen-camera
Browse files Browse the repository at this point in the history
feat: fullscreen cameras and screenshare in new Layout Manager
  • Loading branch information
antobinary committed Jul 12, 2021
2 parents c5da37e + 07ab688 commit 36595c7
Show file tree
Hide file tree
Showing 17 changed files with 152 additions and 121 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,15 @@ const FullscreenButtonComponent = ({
dark,
bottom,
elementName,
elementId,
className,
fullscreenRef,
handleToggleFullScreen,
isIphone,
isFullscreen,
layoutManagerLoaded,
newLayoutContextDispatch,
currentElement,
}) => {
if (isIphone) return null;

Expand Down Expand Up @@ -78,9 +80,11 @@ const FullscreenButtonComponent = ({
if (layoutManagerLoaded === 'legacy') {
handleToggleFullScreen(fullscreenRef);
} else {
const newValue = (elementId === currentElement) ? '' : elementId;

newLayoutContextDispatch({
type: ACTIONS.SET_PRESENTATION_IS_FULLSCREEN,
value: !isFullscreen,
type: ACTIONS.SET_FULLSCREEN_ELEMENT,
value: newValue,
});
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,32 @@ import FullscreenButtonComponent from './component';
import FullscreenService from './service';
import { NLayoutContext } from '../layout/context/context';

const FullscreenButtonContainer = props => <FullscreenButtonComponent {...props} />;
const FullscreenButtonContainer = (props) => <FullscreenButtonComponent {...props} />;

export default (props) => {
const handleToggleFullScreen = ref => FullscreenService.toggleFullScreen(ref);
const isIphone = (navigator.userAgent.match(/iPhone/i)) ? true : false;
const handleToggleFullScreen = (ref) => FullscreenService.toggleFullScreen(ref);
const isIphone = !!(navigator.userAgent.match(/iPhone/i));

const { isFullscreen: fullscreenProps } = props;
const newLayoutContext = useContext(NLayoutContext);
const { newLayoutContextState, newLayoutContextDispatch } = newLayoutContext;
const { layoutLoaded: layoutManagerLoaded } = newLayoutContextState;
const { input } = newLayoutContextState;
const { presentation } = input;

const isFullscreen = layoutManagerLoaded === 'new' ? presentation.isFullscreen : props.isFullscreen;
const { fullscreen } = input;
const { element: currentElement } = fullscreen;
const isFullscreen = layoutManagerLoaded === 'new' ? !!currentElement : fullscreenProps;

return (
<FullscreenButtonContainer {...props} {...{
handleToggleFullScreen,
isIphone,
layoutManagerLoaded,
isFullscreen,
newLayoutContextDispatch
}} />
<FullscreenButtonContainer
{...props}
{...{
handleToggleFullScreen,
isIphone,
layoutManagerLoaded,
isFullscreen,
currentElement,
newLayoutContextDispatch,
}}
/>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -666,22 +666,6 @@ const reducer = (state, action) => {
},
};
}
case ACTIONS.SET_CAMERA_DOCK_IS_FULLSCREEN: {
const { cameraDock } = state.input;
if (cameraDock.isFullscreen === action.value) {
return state;
}
return {
...state,
input: {
...state.input,
cameraDock: {
...cameraDock,
isFullscreen: action.value,
},
},
};
}
case ACTIONS.SET_CAMERA_DOCK_RESIZABLE_EDGE: {
const {
top, right, bottom, left,
Expand Down Expand Up @@ -742,22 +726,6 @@ const reducer = (state, action) => {
},
};
}
case ACTIONS.SET_PRESENTATION_IS_FULLSCREEN: {
const { presentation } = state.input;
if (presentation.isFullscreen === action.value) {
return state;
}
return {
...state,
input: {
...state.input,
presentation: {
...presentation,
isFullscreen: action.value,
},
},
};
}
case ACTIONS.SET_PRESENTATION_SLIDES_LENGTH: {
const { presentation } = state.input;
if (presentation.slidesLength === action.value) {
Expand Down Expand Up @@ -924,6 +892,24 @@ const reducer = (state, action) => {
};
}

// FULLSCREEN
case ACTIONS.SET_FULLSCREEN_ELEMENT: {
const { fullscreen } = state.input;
if (fullscreen.element === action.value) {
return state;
}
return {
...state,
input: {
...state.input,
fullscreen: {
...fullscreen,
element: action.value,
},
},
};
}

// SCREEN SHARE
case ACTIONS.SET_HAS_SCREEN_SHARE: {
const { screenShare } = state.input;
Expand Down Expand Up @@ -972,12 +958,14 @@ const reducer = (state, action) => {
height,
top,
left,
zIndex,
} = action.value;
const { screenShare } = state.output;
if (screenShare.width === width
&& screenShare.height === height
&& screenShare.top === top
&& screenShare.left === left) {
&& screenShare.left === left
&& screenShare.zIndex === zIndex) {
return state;
}
return {
Expand All @@ -990,6 +978,7 @@ const reducer = (state, action) => {
height,
top,
left,
zIndex,
},
},
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,9 @@ export const INITIAL_INPUT_STATE = {
browserWidth: 0,
browserHeight: 0,
isDragging: false,
isFullscreen: false,
},
presentation: {
isOpen: true,
isFullscreen: false,
slidesLength: 0,
currentSlide: {
num: 0,
Expand All @@ -71,6 +69,9 @@ export const INITIAL_INPUT_STATE = {
browserWidth: 0,
browserHeight: 0,
},
fullscreen: {
element: '',
},
screenShare: {
hasScreenShare: false,
width: 0,
Expand Down
4 changes: 2 additions & 2 deletions bigbluebutton-html5/imports/ui/components/layout/enums.js
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,6 @@ export const ACTIONS = {
SET_CAMERA_DOCK_SIZE: 'setCameraDockSize',
SET_CAMERA_DOCK_OUTPUT: 'setCameraDockOutput',
SET_CAMERA_DOCK_IS_DRAGGABLE: 'setCameraDockIsDraggable',
SET_CAMERA_DOCK_IS_FULLSCREEN: 'setCameraDockIsFullscreen',
SET_CAMERA_DOCK_IS_RESIZABLE: 'setCameraDockIsResizable',
SET_CAMERA_DOCK_RESIZABLE_EDGE: 'setCameraDockResizableEdge',

Expand All @@ -76,11 +75,12 @@ export const ACTIONS = {
SET_PRESENTATION_NUM_CURRENT_SLIDE: 'setPresentationNumCurrentSlide',
SET_PRESENTATION_SLIDES_LENGTH: 'setPresentationSlideslength',
SET_PRESENTATION_SIZE: 'setPresentationSize',
SET_PRESENTATION_IS_FULLSCREEN: 'setPresentationIsFullscreen',
SET_PRESENTATION_OUTPUT: 'setPresentationOutput',
SET_PRESENTATION_IS_RESIZABLE: 'setPresentationIsResizable',
SET_PRESENTATION_RESIZABLE_EDGE: 'setPresentationResizableEdge',

SET_FULLSCREEN_ELEMENT: 'setFullscreenElement',

SET_HAS_SCREEN_SHARE: 'setHasScreenShare',
SET_SCREEN_SHARE_SIZE: 'setScreenShareSize',
SET_SCREEN_SHARE_OUTPUT: 'setScreenShareOutput',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -419,19 +419,6 @@ class CustomLayout extends Component {

const cameraDockBounds = {};

if (input.cameraDock.isFullscreen) {
cameraDockBounds.width = this.mainWidth();
cameraDockBounds.minWidth = this.mainWidth();
cameraDockBounds.maxWidth = this.mainWidth();
cameraDockBounds.height = this.mainHeight();
cameraDockBounds.minHeight = this.mainHeight();
cameraDockBounds.maxHeight = this.mainHeight();
cameraDockBounds.top = 0;
cameraDockBounds.left = 0;
cameraDockBounds.zIndex = 99;
return cameraDockBounds;
}

if (input.cameraDock.numCameras > 0) {
let cameraDockLeft = 0;
let cameraDockHeight = 0;
Expand Down Expand Up @@ -590,8 +577,9 @@ class CustomLayout extends Component {
- (DEFAULT_VALUES.navBarHeight + DEFAULT_VALUES.actionBarHeight);
const mediaAreaWidth = this.mainWidth() - (sidebarNavWidth + sidebarContentWidth);
const mediaBounds = {};
const { element: fullscreenElement } = input.fullscreen;

if (input.presentation.isFullscreen) {
if (fullscreenElement === 'Presentation' || fullscreenElement === 'Screenshare') {
mediaBounds.width = this.mainWidth();
mediaBounds.height = this.mainHeight();
mediaBounds.top = 0;
Expand Down Expand Up @@ -818,6 +806,7 @@ class CustomLayout extends Component {
height: mediaBounds.height,
top: mediaBounds.top,
left: mediaBounds.left,
zIndex: mediaBounds.zIndex,
},
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -354,19 +354,6 @@ class PresentationFocusLayout extends Component {
const { deviceType, input } = newLayoutContextState;
const cameraDockBounds = {};

if (input.cameraDock.isFullscreen) {
cameraDockBounds.width = this.mainWidth();
cameraDockBounds.minWidth = this.mainWidth();
cameraDockBounds.maxWidth = this.mainWidth();
cameraDockBounds.height = this.mainHeight();
cameraDockBounds.minHeight = this.mainHeight();
cameraDockBounds.maxHeight = this.mainHeight();
cameraDockBounds.top = 0;
cameraDockBounds.left = 0;
cameraDockBounds.zIndex = 99;
return cameraDockBounds;
}

if (input.cameraDock.numCameras > 0) {
let cameraDockHeight = 0;
if (deviceType === DEVICE_TYPE.MOBILE) {
Expand Down Expand Up @@ -411,8 +398,9 @@ class PresentationFocusLayout extends Component {
const { newLayoutContextState } = this.props;
const { deviceType, input } = newLayoutContextState;
const mediaBounds = {};
const { element: fullscreenElement } = input.fullscreen;

if (input.presentation.isFullscreen) {
if (fullscreenElement === 'Presentation' || fullscreenElement === 'Screenshare') {
mediaBounds.width = this.mainWidth();
mediaBounds.height = this.mainHeight();
mediaBounds.top = 0;
Expand Down Expand Up @@ -598,6 +586,7 @@ class PresentationFocusLayout extends Component {
height: mediaBounds.height,
top: mediaBounds.top,
left: mediaBounds.left,
zIndex: mediaBounds.zIndex,
},
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -349,19 +349,6 @@ class SmartLayout extends Component {

const cameraDockBounds = {};

if (input.cameraDock.isFullscreen) {
cameraDockBounds.width = this.mainWidth();
cameraDockBounds.minWidth = this.mainWidth();
cameraDockBounds.maxWidth = this.mainWidth();
cameraDockBounds.height = this.mainHeight();
cameraDockBounds.minHeight = this.mainHeight();
cameraDockBounds.maxHeight = this.mainHeight();
cameraDockBounds.top = 0;
cameraDockBounds.left = 0;
cameraDockBounds.zIndex = 99;
return cameraDockBounds;
}

if (input.cameraDock.numCameras > 0) {
cameraDockBounds.top = mediaAreaBounds.top;
cameraDockBounds.left = mediaAreaBounds.left;
Expand Down Expand Up @@ -423,10 +410,11 @@ class SmartLayout extends Component {
const { newLayoutContextState } = this.props;
const { input } = newLayoutContextState;
const mediaBounds = {};
const { element: fullscreenElement } = input.fullscreen;

// TODO Adicionar min e max para a apresentação

if (input.presentation.isFullscreen) {
if (fullscreenElement === 'Presentation' || fullscreenElement === 'Screenshare') {
mediaBounds.width = this.mainWidth();
mediaBounds.height = this.mainHeight();
mediaBounds.top = 0;
Expand Down Expand Up @@ -625,6 +613,7 @@ class SmartLayout extends Component {
height: mediaBounds.height,
top: mediaBounds.top,
left: mediaBounds.left,
zIndex: mediaBounds.zIndex,
},
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -377,23 +377,10 @@ class VideoFocusLayout extends Component {
const { newLayoutContextState } = this.props;
const { deviceType, input } = newLayoutContextState;
const { cameraDock } = input;
const { isFullscreen, numCameras } = cameraDock;
const { numCameras } = cameraDock;

const cameraDockBounds = {};

if (isFullscreen) {
cameraDockBounds.width = this.mainWidth();
cameraDockBounds.minWidth = this.mainWidth();
cameraDockBounds.maxWidth = this.mainWidth();
cameraDockBounds.height = this.mainHeight();
cameraDockBounds.minHeight = this.mainHeight();
cameraDockBounds.maxHeight = this.mainHeight();
cameraDockBounds.top = 0;
cameraDockBounds.left = 0;
cameraDockBounds.zIndex = 99;
return cameraDockBounds;
}

if (numCameras > 0) {
if (deviceType === DEVICE_TYPE.MOBILE) {
cameraDockBounds.minHeight = mediaAreaBounds.height * 0.7;
Expand Down Expand Up @@ -433,8 +420,9 @@ class VideoFocusLayout extends Component {
const { newLayoutContextState } = this.props;
const { deviceType, input } = newLayoutContextState;
const mediaBounds = {};
const { element: fullscreenElement } = input.fullscreen;

if (input.presentation.isFullscreen) {
if (fullscreenElement === 'Presentation' || fullscreenElement === 'Screenshare') {
mediaBounds.width = this.mainWidth();
mediaBounds.height = this.mainHeight();
mediaBounds.top = 0;
Expand Down Expand Up @@ -636,6 +624,7 @@ class VideoFocusLayout extends Component {
height: mediaBounds.height,
top: mediaBounds.top,
left: mediaBounds.left,
zIndex: mediaBounds.zIndex,
},
});

Expand Down

0 comments on commit 36595c7

Please sign in to comment.