Add support for grid and speaker view
This commit is contained in:
harshithpabbati
parent
273ba22dd5
commit
1ae4de54f2
|
|
@ -3,13 +3,13 @@ import VideoContainer from '@custom/shared/components/VideoContainer/VideoContai
|
|||
|
||||
import { Container } from './Container';
|
||||
import { Header } from './Header';
|
||||
import { VideoGrid } from './VideoGrid';
|
||||
import { VideoView } from './VideoView';
|
||||
|
||||
export function Room({ children }) {
|
||||
return (
|
||||
<Container>
|
||||
<Header />
|
||||
<VideoContainer>{children ? children : <VideoGrid />}</VideoContainer>
|
||||
<VideoContainer>{children ? children : <VideoView />}</VideoContainer>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,191 +0,0 @@
|
|||
import React, { useState, useMemo, useEffect, useRef } from 'react';
|
||||
import ParticipantBar from '@custom/shared/components/ParticipantBar';
|
||||
import Tile from '@custom/shared/components/Tile';
|
||||
import { DEFAULT_ASPECT_RATIO } from '@custom/shared/constants';
|
||||
import { useCallState } from '@custom/shared/contexts/CallProvider';
|
||||
import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
|
||||
import { useDeepCompareMemo } from 'use-deep-compare';
|
||||
|
||||
const SIDEBAR_WIDTH = 186;
|
||||
|
||||
/**
|
||||
* Basic unpaginated video tile grid, scaled by aspect ratio
|
||||
*
|
||||
* Note: this component is designed to work with automated track subscriptions
|
||||
* and is only suitable for small call sizes as it will show all participants
|
||||
* and not paginate.
|
||||
*
|
||||
* Note: this grid does not show screenshares (just participant cams)
|
||||
*
|
||||
* Note: this grid does not sort participants
|
||||
*/
|
||||
export const VideoGrid = React.memo(
|
||||
() => {
|
||||
const containerRef = useRef();
|
||||
const { allParticipants, participants, screens, localParticipant } = useParticipants();
|
||||
const { showLocalVideo } = useCallState();
|
||||
const [dimensions, setDimensions] = useState({
|
||||
width: 1,
|
||||
height: 1,
|
||||
});
|
||||
|
||||
// Keep a reference to the width and height of the page, so we can repack
|
||||
useEffect(() => {
|
||||
let frame;
|
||||
const handleResize = () => {
|
||||
if (frame) cancelAnimationFrame(frame);
|
||||
frame = requestAnimationFrame(() =>
|
||||
setDimensions({
|
||||
width: containerRef.current?.clientWidth,
|
||||
height: containerRef.current?.clientHeight,
|
||||
})
|
||||
);
|
||||
};
|
||||
handleResize();
|
||||
window.addEventListener('resize', handleResize);
|
||||
window.addEventListener('orientationchange', handleResize);
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
window.removeEventListener('orientationchange', handleResize);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const hasScreenshares = useMemo(() => screens.length > 0, [screens]);
|
||||
|
||||
// Basic brute-force packing algo
|
||||
const layout = useMemo(() => {
|
||||
const aspectRatio = DEFAULT_ASPECT_RATIO;
|
||||
const tileCount = hasScreenshares ? screens.length : participants.length || 0;
|
||||
const w = dimensions.width;
|
||||
const h = dimensions.height;
|
||||
|
||||
// brute-force search layout where video occupy the largest area of the container
|
||||
let bestLayout = {
|
||||
area: 0,
|
||||
cols: 0,
|
||||
rows: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
};
|
||||
|
||||
for (let cols = 0; cols <= tileCount; cols += 1) {
|
||||
const rows = Math.ceil(tileCount / cols);
|
||||
const hScale = w / (cols * aspectRatio);
|
||||
const vScale = h / rows;
|
||||
let width;
|
||||
let height;
|
||||
if (hScale <= vScale) {
|
||||
width = Math.floor(w / cols);
|
||||
height = Math.floor(width / aspectRatio);
|
||||
} else {
|
||||
height = Math.floor(h / rows);
|
||||
width = Math.floor(height * aspectRatio);
|
||||
}
|
||||
const area = width * height;
|
||||
if (area > bestLayout.area) {
|
||||
bestLayout = {
|
||||
area,
|
||||
width,
|
||||
height,
|
||||
rows,
|
||||
cols,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return bestLayout;
|
||||
}, [hasScreenshares, screens.length, participants.length, dimensions.width, dimensions.height]);
|
||||
|
||||
const otherParticipants = useMemo(
|
||||
() => participants.filter(({ isLocal }) => !isLocal),
|
||||
[participants]
|
||||
);
|
||||
|
||||
const fixedItems = useMemo(() => {
|
||||
const items = [];
|
||||
if (showLocalVideo) {
|
||||
items.push(localParticipant);
|
||||
}
|
||||
if (hasScreenshares && otherParticipants.length > 0) {
|
||||
items.push(otherParticipants[0]);
|
||||
}
|
||||
return items;
|
||||
}, [hasScreenshares, localParticipant, otherParticipants, showLocalVideo]);
|
||||
|
||||
const otherItems = useMemo(() => {
|
||||
if (otherParticipants.length > 1) {
|
||||
return otherParticipants.slice(hasScreenshares ? 1 : 0);
|
||||
}
|
||||
return [];
|
||||
}, [hasScreenshares, otherParticipants]);
|
||||
|
||||
// Memoize our tile list to avoid unnecassary re-renders
|
||||
const tiles = useDeepCompareMemo(
|
||||
() =>
|
||||
participants.map((p) => (
|
||||
<Tile
|
||||
participant={p}
|
||||
key={p.id}
|
||||
mirrored
|
||||
style={{ maxWidth: layout.width, maxHeight: layout.height }}
|
||||
/>
|
||||
)),
|
||||
[layout, participants]
|
||||
);
|
||||
|
||||
const screenShareTiles = useDeepCompareMemo(
|
||||
() =>
|
||||
screens.map((p) => (
|
||||
<Tile
|
||||
participant={p}
|
||||
key={p.id}
|
||||
mirrored={false}
|
||||
style={{ maxWidth: layout.width, maxHeight: layout.height }}
|
||||
/>
|
||||
)),
|
||||
[layout, screens]
|
||||
);
|
||||
|
||||
if (!participants.length) return null;
|
||||
|
||||
return (
|
||||
<div className="video-grid" ref={containerRef}>
|
||||
<div className="tiles">
|
||||
{screenShareTiles}
|
||||
{!hasScreenshares && tiles}
|
||||
</div>
|
||||
{hasScreenshares && (
|
||||
<ParticipantBar
|
||||
fixed={fixedItems}
|
||||
others={otherItems}
|
||||
width={SIDEBAR_WIDTH}
|
||||
/>
|
||||
)}
|
||||
<style jsx>{`
|
||||
.video-grid {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.video-grid .tiles {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
max-height: 100%;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
() => true
|
||||
);
|
||||
|
||||
export default VideoGrid;
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import React from 'react';
|
||||
import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
|
||||
import { useUIState, VIEW_MODE_SPEAKER } from '@custom/shared/contexts/UIStateProvider';
|
||||
import { GridView } from '../GridView/GridView';
|
||||
import { SpeakerView } from '../SpeakerView';
|
||||
|
||||
export const VideoView = () => {
|
||||
const { viewMode } = useUIState();
|
||||
const { participants } = useParticipants();
|
||||
|
||||
if (!participants.length) return null;
|
||||
return viewMode === VIEW_MODE_SPEAKER ? <SpeakerView />: <GridView />;
|
||||
};
|
||||
|
||||
export default VideoView;
|
||||
|
|
@ -0,0 +1,367 @@
|
|||
import React, {
|
||||
useRef,
|
||||
useCallback,
|
||||
useMemo,
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react';
|
||||
import Button from '@custom/shared/components/Button';
|
||||
import Tile from '@custom/shared/components/Tile';
|
||||
import {
|
||||
DEFAULT_ASPECT_RATIO,
|
||||
MEETING_STATE_JOINED,
|
||||
} from '@custom/shared/constants';
|
||||
import { useCallState } from '@custom/shared/contexts/CallProvider';
|
||||
import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
|
||||
import { isLocalId } from '@custom/shared/contexts/participantsState';
|
||||
import { useActiveSpeaker } from '@custom/shared/hooks/useActiveSpeaker';
|
||||
import { useCamSubscriptions } from '@custom/shared/hooks/useCamSubscriptions';
|
||||
import { ReactComponent as IconArrow } from '@custom/shared/icons/raquo-md.svg';
|
||||
import sortByKey from '@custom/shared/lib/sortByKey';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useDeepCompareMemo } from 'use-deep-compare';
|
||||
|
||||
// --- Constants
|
||||
|
||||
const MIN_TILE_WIDTH = 280;
|
||||
const MAX_TILES_PER_PAGE = 12;
|
||||
|
||||
export const GridView = ({
|
||||
maxTilesPerPage = MAX_TILES_PER_PAGE,
|
||||
}) => {
|
||||
const { callObject } = useCallState();
|
||||
const {
|
||||
activeParticipant,
|
||||
participantCount,
|
||||
participants,
|
||||
swapParticipantPosition,
|
||||
} = useParticipants();
|
||||
const activeSpeakerId = useActiveSpeaker();
|
||||
|
||||
// Memoized participant count (does not include screen shares)
|
||||
const displayableParticipantCount = useMemo(
|
||||
() => participantCount,
|
||||
[participantCount]
|
||||
);
|
||||
|
||||
// Grid size (dictated by screen size)
|
||||
const [dimensions, setDimensions] = useState({
|
||||
width: 1,
|
||||
height: 1,
|
||||
});
|
||||
const [page, setPage] = useState(1);
|
||||
const [pages, setPages] = useState(1);
|
||||
|
||||
const gridRef = useRef(null);
|
||||
|
||||
// -- Layout / UI
|
||||
|
||||
// Update width and height of grid when window is resized
|
||||
useEffect(() => {
|
||||
let frame;
|
||||
const handleResize = () => {
|
||||
if (frame) cancelAnimationFrame(frame);
|
||||
frame = requestAnimationFrame(() => {
|
||||
const width = gridRef.current?.clientWidth;
|
||||
const height = gridRef.current?.clientHeight;
|
||||
setDimensions({ width, height });
|
||||
});
|
||||
};
|
||||
handleResize();
|
||||
window.addEventListener('resize', handleResize);
|
||||
window.addEventListener('orientationchange', handleResize);
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
window.removeEventListener('orientationchange', handleResize);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Memoized reference to the max columns and rows possible given screen size
|
||||
const [maxColumns, maxRows] = useMemo(() => {
|
||||
const { width, height } = dimensions;
|
||||
const columns = Math.max(1, Math.floor(width / MIN_TILE_WIDTH));
|
||||
const widthPerTile = width / columns;
|
||||
const rows = Math.max(1, Math.floor(height / (widthPerTile * (9 / 16))));
|
||||
return [columns, rows];
|
||||
}, [dimensions]);
|
||||
|
||||
// Memoized count of how many tiles can we show per page
|
||||
const pageSize = useMemo(
|
||||
() => Math.min(maxColumns * maxRows, maxTilesPerPage),
|
||||
[maxColumns, maxRows, maxTilesPerPage]
|
||||
);
|
||||
|
||||
// Calc and set the total number of pages as participant count mutates
|
||||
useEffect(() => {
|
||||
setPages(Math.ceil(displayableParticipantCount / pageSize));
|
||||
}, [pageSize, displayableParticipantCount]);
|
||||
|
||||
// Make sure we never see a blank page (if we're on the last page and people leave)
|
||||
useEffect(() => {
|
||||
if (page <= pages) return;
|
||||
setPage(pages);
|
||||
}, [page, pages]);
|
||||
|
||||
// Brutishly calculate the dimensions of each tile given the size of the grid
|
||||
const [tileWidth, tileHeight] = useMemo(() => {
|
||||
const { width, height } = dimensions;
|
||||
const n = Math.min(pageSize, displayableParticipantCount);
|
||||
if (n === 0) return [width, height];
|
||||
const dims = [];
|
||||
for (let i = 1; i <= n; i += 1) {
|
||||
let maxWidthPerTile = (width - (i - 1)) / i;
|
||||
let maxHeightPerTile = maxWidthPerTile / DEFAULT_ASPECT_RATIO;
|
||||
const rows = Math.ceil(n / i);
|
||||
if (rows * maxHeightPerTile > height) {
|
||||
maxHeightPerTile = (height - (rows - 1)) / rows;
|
||||
maxWidthPerTile = maxHeightPerTile * DEFAULT_ASPECT_RATIO;
|
||||
dims.push([maxWidthPerTile, maxHeightPerTile]);
|
||||
} else {
|
||||
dims.push([maxWidthPerTile, maxHeightPerTile]);
|
||||
}
|
||||
}
|
||||
return dims.reduce(
|
||||
([rw, rh], [w, h]) => {
|
||||
if (w * h < rw * rh) return [rw, rh];
|
||||
return [w, h];
|
||||
},
|
||||
[0, 0]
|
||||
);
|
||||
}, [dimensions, pageSize, displayableParticipantCount]);
|
||||
|
||||
// -- Track subscriptions
|
||||
|
||||
// Memoized array of participants on the current page (those we can see)
|
||||
const visibleParticipants = useMemo(
|
||||
() =>
|
||||
participants.length - page * pageSize > 0
|
||||
? participants.slice((page - 1) * pageSize, page * pageSize)
|
||||
: participants.slice(-pageSize),
|
||||
[page, pageSize, participants]
|
||||
);
|
||||
|
||||
/**
|
||||
* Play / pause tracks based on pagination
|
||||
* Note: we pause adjacent page tracks and unsubscribe from everything else
|
||||
*/
|
||||
const camSubscriptions = useMemo(() => {
|
||||
const maxSubs = 3 * pageSize;
|
||||
|
||||
// Determine participant ids to subscribe to or stage, based on page
|
||||
let renderedOrBufferedIds = [];
|
||||
switch (page) {
|
||||
// First page
|
||||
case 1:
|
||||
renderedOrBufferedIds = participants
|
||||
.slice(0, Math.min(maxSubs, 2 * pageSize))
|
||||
.map((p) => p.id);
|
||||
break;
|
||||
// Last page
|
||||
case Math.ceil(participants.length / pageSize):
|
||||
renderedOrBufferedIds = participants
|
||||
.slice(-Math.min(maxSubs, 2 * pageSize))
|
||||
.map((p) => p.id);
|
||||
break;
|
||||
// Any other page
|
||||
default:
|
||||
{
|
||||
const buffer = (maxSubs - pageSize) / 2;
|
||||
const min = (page - 1) * pageSize - buffer;
|
||||
const max = page * pageSize + buffer;
|
||||
renderedOrBufferedIds = participants.slice(min, max).map((p) => p.id);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
const subscribedIds = [];
|
||||
const stagedIds = [];
|
||||
|
||||
// Decide whether to subscribe to or stage participants'
|
||||
// track based on visibility
|
||||
renderedOrBufferedIds.forEach((id) => {
|
||||
if (id !== isLocalId()) {
|
||||
if (visibleParticipants.some((vp) => vp.id === id)) {
|
||||
subscribedIds.push(id);
|
||||
} else {
|
||||
stagedIds.push(id);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
subscribedIds,
|
||||
stagedIds,
|
||||
};
|
||||
}, [page, pageSize, participants, visibleParticipants]);
|
||||
|
||||
useCamSubscriptions(
|
||||
camSubscriptions?.subscribedIds,
|
||||
camSubscriptions?.pausedIds
|
||||
);
|
||||
|
||||
/**
|
||||
* Set bandwidth layer based on amount of visible participants
|
||||
*/
|
||||
useEffect(() => {
|
||||
if (!(callObject && callObject.meetingState() === MEETING_STATE_JOINED))
|
||||
return;
|
||||
const count = visibleParticipants.length;
|
||||
|
||||
let layer;
|
||||
if (count < 5) {
|
||||
// highest quality layer
|
||||
layer = 2;
|
||||
} else if (count < 10) {
|
||||
// mid quality layer
|
||||
layer = 1;
|
||||
} else {
|
||||
// low qualtiy layer
|
||||
layer = 0;
|
||||
}
|
||||
|
||||
const receiveSettings = visibleParticipants.reduce(
|
||||
(settings, participant) => {
|
||||
if (isLocalId(participant.id)) return settings;
|
||||
return { ...settings, [participant.id]: { video: { layer } } };
|
||||
},
|
||||
{}
|
||||
);
|
||||
callObject.updateReceiveSettings(receiveSettings);
|
||||
}, [visibleParticipants, callObject]);
|
||||
|
||||
// -- Active speaker
|
||||
|
||||
/**
|
||||
* Handle position updates based on active speaker events
|
||||
*/
|
||||
const handleActiveSpeakerChange = useCallback(
|
||||
(peerId) => {
|
||||
if (!peerId) return;
|
||||
// active participant is already visible
|
||||
if (visibleParticipants.some(({ id }) => id === peerId)) return;
|
||||
// ignore repositioning when viewing page > 1
|
||||
if (page > 1) return;
|
||||
|
||||
/**
|
||||
* We can now assume that
|
||||
* a) the user is looking at page 1
|
||||
* b) the most recent active participant is not visible on page 1
|
||||
* c) we'll have to promote the most recent participant's position to page 1
|
||||
*
|
||||
* To achieve that, we'll have to
|
||||
* - find the least recent active participant on page 1
|
||||
* - swap least & most recent active participant's position via setParticipantPosition
|
||||
*/
|
||||
const sortedVisibleRemoteParticipants = visibleParticipants
|
||||
.filter(({ isLocal }) => !isLocal)
|
||||
.sort((a, b) => sortByKey(a, b, 'lastActiveDate'));
|
||||
|
||||
if (!sortedVisibleRemoteParticipants.length) return;
|
||||
|
||||
swapParticipantPosition(sortedVisibleRemoteParticipants[0].id, peerId);
|
||||
},
|
||||
[page, swapParticipantPosition, visibleParticipants]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (page > 1 || !activeSpeakerId) return;
|
||||
handleActiveSpeakerChange(activeSpeakerId);
|
||||
}, [activeSpeakerId, handleActiveSpeakerChange, page]);
|
||||
|
||||
const tiles = useDeepCompareMemo(
|
||||
() =>
|
||||
visibleParticipants.map((p) => (
|
||||
<Tile
|
||||
participant={p}
|
||||
mirrored
|
||||
key={p.id}
|
||||
style={{
|
||||
maxHeight: tileHeight,
|
||||
maxWidth: tileWidth,
|
||||
}}
|
||||
/>
|
||||
)),
|
||||
[
|
||||
activeParticipant,
|
||||
participantCount,
|
||||
tileWidth,
|
||||
tileHeight,
|
||||
visibleParticipants,
|
||||
]
|
||||
);
|
||||
|
||||
const handlePrevClick = () => setPage((p) => p - 1);
|
||||
const handleNextClick = () => setPage((p) => p + 1);
|
||||
|
||||
return (
|
||||
<div ref={gridRef} className="grid">
|
||||
<Button
|
||||
className="page-button prev"
|
||||
disabled={!(pages > 1 && page > 1)}
|
||||
type="button"
|
||||
onClick={handlePrevClick}
|
||||
>
|
||||
<IconArrow />
|
||||
</Button>
|
||||
|
||||
<div className="tiles">{tiles}</div>
|
||||
|
||||
<Button
|
||||
className="page-button next"
|
||||
disabled={!(pages > 1 && page < pages)}
|
||||
type="button"
|
||||
onClick={handleNextClick}
|
||||
>
|
||||
<IconArrow />
|
||||
</Button>
|
||||
|
||||
<style jsx>{`
|
||||
.grid {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid .tiles {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: 1px;
|
||||
max-height: 100%;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid :global(.page-button) {
|
||||
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
|
||||
height: 84px;
|
||||
padding: 0px var(--spacing-xxxs) 0px var(--spacing-xxs);
|
||||
background-color: var(--blue-default);
|
||||
color: white;
|
||||
border-right: 0px;
|
||||
}
|
||||
|
||||
.grid :global(.page-button):disabled {
|
||||
color: var(--blue-dark);
|
||||
background-color: var(--blue-light);
|
||||
border-color: var(--blue-light);
|
||||
}
|
||||
|
||||
.grid :global(.page-button.prev) {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
GridView.propTypes = {
|
||||
maxTilesPerPage: PropTypes.number,
|
||||
};
|
||||
|
||||
export default GridView;
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export { GridView as default } from './GridView';
|
||||
export { GridView } from './GridView';
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import Tile from '@custom/shared/components/Tile';
|
||||
import { DEFAULT_ASPECT_RATIO } from '@custom/shared/constants';
|
||||
import { useResize } from '@custom/shared/hooks/useResize';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const MAX_RATIO = DEFAULT_ASPECT_RATIO;
|
||||
const MIN_RATIO = 4 / 3;
|
||||
|
||||
export const SpeakerTile = ({ participant, screenRef }) => {
|
||||
const [ratio, setRatio] = useState(MAX_RATIO);
|
||||
const [nativeAspectRatio, setNativeAspectRatio] = useState(null);
|
||||
const [screenHeight, setScreenHeight] = useState(1);
|
||||
|
||||
const updateRatio = useCallback(() => {
|
||||
const rect = screenRef.current?.getBoundingClientRect();
|
||||
setRatio(rect.width / rect.height);
|
||||
setScreenHeight(rect.height);
|
||||
}, [screenRef]);
|
||||
|
||||
useResize(() => {
|
||||
updateRatio();
|
||||
}, [updateRatio]);
|
||||
|
||||
useEffect(() => updateRatio(), [updateRatio]);
|
||||
|
||||
/**
|
||||
* Only use the video's native aspect ratio if it's in portrait mode
|
||||
* (e.g. mobile) to update how we crop videos. Otherwise, use landscape
|
||||
* defaults.
|
||||
*/
|
||||
const handleNativeAspectRatio = (r) => {
|
||||
const isPortrait = r < 1;
|
||||
setNativeAspectRatio(isPortrait ? r : null);
|
||||
};
|
||||
|
||||
const { height, finalRatio, videoFit } = useMemo(
|
||||
() =>
|
||||
// Avoid cropping mobile videos, which have the nativeAspectRatio set
|
||||
({
|
||||
height: (nativeAspectRatio ?? ratio) >= MIN_RATIO ? '100%' : null,
|
||||
finalRatio:
|
||||
nativeAspectRatio || (ratio <= MIN_RATIO ? MIN_RATIO : MAX_RATIO),
|
||||
videoFit: ratio >= MAX_RATIO || nativeAspectRatio ? 'contain' : 'cover',
|
||||
}),
|
||||
[nativeAspectRatio, ratio]
|
||||
);
|
||||
|
||||
const style = {
|
||||
height,
|
||||
maxWidth: screenHeight * finalRatio,
|
||||
overflow: 'hidden',
|
||||
};
|
||||
|
||||
return (
|
||||
<Tile
|
||||
aspectRatio={finalRatio}
|
||||
participant={participant}
|
||||
style={style}
|
||||
videoFit={videoFit}
|
||||
showActiveSpeaker={false}
|
||||
onVideoResize={handleNativeAspectRatio}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
SpeakerTile.propTypes = {
|
||||
participant: PropTypes.object,
|
||||
screenRef: PropTypes.object,
|
||||
};
|
||||
|
||||
export default SpeakerTile;
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export { SpeakerTile as default } from './SpeakerTile';
|
||||
export { SpeakerTile } from './SpeakerTile';
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
import React, { useEffect, useMemo, useRef } from 'react';
|
||||
import { Container } from '@custom/basic-call/components/Call/Container';
|
||||
import Header from '@custom/basic-call/components/Call/Header';
|
||||
import ParticipantBar from '@custom/shared/components/ParticipantBar/ParticipantBar';
|
||||
import VideoContainer from '@custom/shared/components/VideoContainer/VideoContainer';
|
||||
import { useCallState } from '@custom/shared/contexts/CallProvider';
|
||||
import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
|
||||
import { useTracks } from '@custom/shared/contexts/TracksProvider';
|
||||
import { useUIState } from '@custom/shared/contexts/UIStateProvider';
|
||||
import { isScreenId } from '@custom/shared/contexts/participantsState';
|
||||
import { SpeakerTile } from './SpeakerTile';
|
||||
|
||||
const SIDEBAR_WIDTH = 186;
|
||||
|
||||
export const SpeakerView = () => {
|
||||
const { currentSpeaker, localParticipant, participants, screens } =
|
||||
useParticipants();
|
||||
const { updateCamSubscriptions } = useTracks();
|
||||
const { showLocalVideo } = useCallState();
|
||||
const { pinnedId } = useUIState();
|
||||
const activeRef = useRef();
|
||||
|
||||
const screensAndPinned = useMemo(
|
||||
() => [...screens, ...participants.filter(({ id }) => id === pinnedId)],
|
||||
[participants, pinnedId, screens]
|
||||
);
|
||||
|
||||
const otherParticipants = useMemo(
|
||||
() => participants.filter(({ isLocal }) => !isLocal),
|
||||
[participants]
|
||||
);
|
||||
|
||||
const showSidebar = useMemo(() => {
|
||||
const hasScreenshares = screens.length > 0;
|
||||
|
||||
if (isScreenId(pinnedId)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return participants.length > 1 || hasScreenshares;
|
||||
}, [participants, pinnedId, screens]);
|
||||
|
||||
/* const screenShareTiles = useMemo(
|
||||
() => <ScreensAndPins items={screensAndPinned} />,
|
||||
[screensAndPinned]
|
||||
); */
|
||||
|
||||
const hasScreenshares = useMemo(() => screens.length > 0, [screens]);
|
||||
|
||||
const fixedItems = useMemo(() => {
|
||||
const items = [];
|
||||
if (showLocalVideo) {
|
||||
items.push(localParticipant);
|
||||
}
|
||||
if (hasScreenshares && otherParticipants.length > 0) {
|
||||
items.push(otherParticipants[0]);
|
||||
}
|
||||
return items;
|
||||
}, [hasScreenshares, localParticipant, otherParticipants, showLocalVideo]);
|
||||
|
||||
const otherItems = useMemo(() => {
|
||||
if (otherParticipants.length > 1) {
|
||||
return otherParticipants.slice(hasScreenshares ? 1 : 0);
|
||||
}
|
||||
return [];
|
||||
}, [hasScreenshares, otherParticipants]);
|
||||
|
||||
/**
|
||||
* Update cam subscriptions, in case ParticipantBar is not shown.
|
||||
*/
|
||||
useEffect(() => {
|
||||
// Sidebar takes care of cam subscriptions for all displayed participants.
|
||||
if (showSidebar) return;
|
||||
updateCamSubscriptions([
|
||||
currentSpeaker?.id,
|
||||
...screensAndPinned.map((p) => p.id),
|
||||
]);
|
||||
}, [currentSpeaker, screensAndPinned, showSidebar, updateCamSubscriptions]);
|
||||
|
||||
return (
|
||||
<div className="speaker-view">
|
||||
<div ref={activeRef} className="active">
|
||||
<SpeakerTile participant={currentSpeaker} screenRef={activeRef} />
|
||||
</div>
|
||||
{showSidebar && (
|
||||
<ParticipantBar
|
||||
fixed={fixedItems}
|
||||
others={otherItems}
|
||||
width={SIDEBAR_WIDTH}
|
||||
/>
|
||||
)}
|
||||
|
||||
<style jsx>{`
|
||||
.speaker-view {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.active {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SpeakerView;
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export { SpeakerView as default } from './SpeakerView';
|
||||
export { SpeakerView } from './SpeakerView';
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import React from 'react';
|
||||
|
||||
import { TrayButton } from '@custom/shared/components/Tray';
|
||||
import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
|
||||
import { useUIState, VIEW_MODE_GRID, VIEW_MODE_SPEAKER } from '@custom/shared/contexts/UIStateProvider';
|
||||
import { ReactComponent as IconGridView } from '@custom/shared/icons/grid-md.svg';
|
||||
import { ReactComponent as IconSpeakerView } from '@custom/shared/icons/speaker-view-md.svg';
|
||||
|
||||
export const ViewTray = () => {
|
||||
const { participants } = useParticipants();
|
||||
const { viewMode, setPreferredViewMode } = useUIState();
|
||||
|
||||
const onClick = () =>
|
||||
setPreferredViewMode(viewMode === VIEW_MODE_SPEAKER ? VIEW_MODE_GRID: VIEW_MODE_SPEAKER);
|
||||
|
||||
return (
|
||||
<TrayButton
|
||||
label={viewMode === VIEW_MODE_GRID ? 'Speaker': 'Grid'}
|
||||
disabled={participants.length < 2}
|
||||
onClick={onClick}
|
||||
>
|
||||
{viewMode === VIEW_MODE_SPEAKER ? <IconGridView />: <IconSpeakerView />}
|
||||
</TrayButton>
|
||||
);
|
||||
};
|
||||
|
||||
export default ViewTray;
|
||||
|
|
@ -3,6 +3,7 @@ import ChatTray from './Chat';
|
|||
import RecordTray from './Record';
|
||||
import ScreenShareTray from './ScreenShare';
|
||||
import StreamTray from './Stream';
|
||||
import ViewTray from './View';
|
||||
|
||||
export const Tray = () => {
|
||||
return (
|
||||
|
|
@ -11,6 +12,7 @@ export const Tray = () => {
|
|||
<ScreenShareTray />
|
||||
<RecordTray />
|
||||
<StreamTray />
|
||||
<ViewTray />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>grid_on</title><g fill="none" class="nc-icon-wrapper"><path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 20H4v-4h4v4zm0-6H4v-4h4v4zm0-6H4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4z" fill="#ffffff"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 395 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>view_sidebar</title><g fill="none" class="nc-icon-wrapper"><path d="M2 4v16h20V4H2zm18 4.67h-2.5V6H20v2.67zm-2.5 2H20v2.67h-2.5v-2.67zM4 6h11.5v12H4V6zm13.5 12v-2.67H20V18h-2.5z" fill="#ffffff"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 301 B |
Loading…
Reference in New Issue