jeffemmett
/
daily-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update the active-speaker layout

This commit is contained in:
harshithpabbati 2022-01-17 13:39:39 +05:30
parent 71987c3f2b
commit 623c15f2d3
4 changed files with 87 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
custom/fitness-demo/components/Call/Room.js
View File

@ -1,17 +1,6 @@
import React from 'react';
import VideoContainer from '@custom/shared/components/VideoContainer/VideoContainer';
import { Container } from './Container';
import { Header } from './Header';
import { VideoView } from './VideoView';
export function Room({ children }) {
return (
<Container>
<Header />
<VideoContainer>{children ? children : <VideoView />}</VideoContainer>
</Container>
);
}
export const Room = () => <VideoView />;
export default Room;

132
custom/fitness-demo/components/GridView/GridView.js
View File

@ -7,6 +7,7 @@ import React, {
} from 'react';
import Button from '@custom/shared/components/Button';
import Tile from '@custom/shared/components/Tile';
import VideoContainer from '@custom/shared/components/VideoContainer';
import {
DEFAULT_ASPECT_RATIO,
MEETING_STATE_JOINED,
@ -20,6 +21,8 @@ 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';
import Container from '../Call/Container';
import Header from '../Call/Header';
// --- Constants
@ -294,69 +297,74 @@ export const GridView = ({
const handleNextClick = () => setPage((p) => p + 1);
return (
<div ref={gridRef} className="grid">
{(pages > 1 && page > 1) && (
<Button
className="page-button prev"
type="button"
onClick={handlePrevClick}
>
<IconArrow />
</Button>
)}
<div className="tiles">{tiles}</div>
{(pages > 1 && page < pages) && (
<Button
className="page-button next"
type="button"
onClick={handleNextClick}
>
<IconArrow />
</Button>
)}
<Container>
<Header />
<VideoContainer>
<div ref={gridRef} className="grid">
{(pages > 1 && page > 1) && (
<Button
className="page-button prev"
type="button"
onClick={handlePrevClick}
>
<IconArrow />
</Button>
)}
<div className="tiles">{tiles}</div>
{(pages > 1 && page < pages) && (
<Button
className="page-button next"
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>
<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>
</VideoContainer>
</Container>
);
};

2
custom/fitness-demo/components/Prejoin/Intro.js
View File

@ -118,7 +118,7 @@ export const Intro = ({
/>
</Field>
</CardBody>
<CardFooter divider>
<CardFooter>
<Button
loading={fetching}
fullWidth

22
custom/fitness-demo/components/SpeakerView/SpeakerView.js
View File

@ -1,10 +1,13 @@
import React, { useEffect, useMemo, useRef } from 'react';
import ParticipantBar from '@custom/shared/components/ParticipantBar/ParticipantBar';
import VideoContainer from '@custom/shared/components/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 Container from '../Call/Container';
import Header from '../Call/Header';
import { ScreensAndPins } from './ScreensAndPins';
import { SpeakerTile } from './SpeakerTile';
@ -77,13 +80,18 @@ export const SpeakerView = () => {
return (
<div className="speaker-view">
<div ref={activeRef} className="active">
{screensAndPinned.length > 0 ? (
screenShareTiles
) : (
<SpeakerTile screenRef={activeRef} participant={currentSpeaker} />
)}
</div>
<Container>
<Header />
<VideoContainer>
<div ref={activeRef} className="active">
{screensAndPinned.length > 0 ? (
screenShareTiles
) : (
<SpeakerTile screenRef={activeRef} participant={currentSpeaker} />
)}
</div>
</VideoContainer>
</Container>
{showSidebar && (
<ParticipantBar
fixed={fixedItems}