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 React from 'react';
import VideoContainer from '@custom/shared/components/VideoContainer/VideoContainer';
import { Container } from './Container';
import { Header } from './Header';
import { VideoView } from './VideoView'; import { VideoView } from './VideoView';
export function Room({ children }) { export const Room = () => <VideoView />;
return (
<Container>
<Header />
<VideoContainer>{children ? children : <VideoView />}</VideoContainer>
</Container>
);
}
export default Room; export default Room;

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

@ -7,6 +7,7 @@ import React, {
} from 'react'; } from 'react';
import Button from '@custom/shared/components/Button'; import Button from '@custom/shared/components/Button';
import Tile from '@custom/shared/components/Tile'; import Tile from '@custom/shared/components/Tile';
import VideoContainer from '@custom/shared/components/VideoContainer';
import { import {
DEFAULT_ASPECT_RATIO, DEFAULT_ASPECT_RATIO,
MEETING_STATE_JOINED, 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 sortByKey from '@custom/shared/lib/sortByKey';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useDeepCompareMemo } from 'use-deep-compare'; import { useDeepCompareMemo } from 'use-deep-compare';
import Container from '../Call/Container';
import Header from '../Call/Header';
// --- Constants // --- Constants
@ -294,69 +297,74 @@ export const GridView = ({
const handleNextClick = () => setPage((p) => p + 1); const handleNextClick = () => setPage((p) => p + 1);
return ( return (
<div ref={gridRef} className="grid"> <Container>
{(pages > 1 && page > 1) && ( <Header />
<Button <VideoContainer>
className="page-button prev" <div ref={gridRef} className="grid">
type="button" {(pages > 1 && page > 1) && (
onClick={handlePrevClick} <Button
> className="page-button prev"
<IconArrow /> type="button"
</Button> onClick={handlePrevClick}
)} >
<div className="tiles">{tiles}</div> <IconArrow />
{(pages > 1 && page < pages) && ( </Button>
<Button )}
className="page-button next" <div className="tiles">{tiles}</div>
type="button" {(pages > 1 && page < pages) && (
onClick={handleNextClick} <Button
> className="page-button next"
<IconArrow /> type="button"
</Button> onClick={handleNextClick}
)} >
<IconArrow />
</Button>
)}
<style jsx>{` <style jsx>{`
.grid { .grid {
align-items: center; align-items: center;
display: flex; display: flex;
height: 100%; height: 100%;
justify-content: center; justify-content: center;
position: relative; position: relative;
width: 100%; width: 100%;
} }
.grid .tiles { .grid .tiles {
align-items: center; align-items: center;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
gap: 1px; gap: 1px;
max-height: 100%; max-height: 100%;
justify-content: center; justify-content: center;
margin: auto; margin: auto;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
} }
.grid :global(.page-button) { .grid :global(.page-button) {
border-radius: var(--radius-sm) 0 0 var(--radius-sm); border-radius: var(--radius-sm) 0 0 var(--radius-sm);
height: 84px; height: 84px;
padding: 0px var(--spacing-xxxs) 0px var(--spacing-xxs); padding: 0px var(--spacing-xxxs) 0px var(--spacing-xxs);
background-color: var(--blue-default); background-color: var(--blue-default);
color: white; color: white;
border-right: 0px; border-right: 0px;
} }
.grid :global(.page-button):disabled { .grid :global(.page-button):disabled {
color: var(--blue-dark); color: var(--blue-dark);
background-color: var(--blue-light); background-color: var(--blue-light);
border-color: var(--blue-light); border-color: var(--blue-light);
} }
.grid :global(.page-button.prev) { .grid :global(.page-button.prev) {
transform: scaleX(-1); transform: scaleX(-1);
} }
`}</style> `}</style>
</div> </div>
</VideoContainer>
</Container>
); );
}; };

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

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

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

@ -1,10 +1,13 @@
import React, { useEffect, useMemo, useRef } from 'react'; import React, { useEffect, useMemo, useRef } from 'react';
import ParticipantBar from '@custom/shared/components/ParticipantBar/ParticipantBar'; import ParticipantBar from '@custom/shared/components/ParticipantBar/ParticipantBar';
import VideoContainer from '@custom/shared/components/VideoContainer';
import { useCallState } from '@custom/shared/contexts/CallProvider'; import { useCallState } from '@custom/shared/contexts/CallProvider';
import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider'; import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
import { useTracks } from '@custom/shared/contexts/TracksProvider'; import { useTracks } from '@custom/shared/contexts/TracksProvider';
import { useUIState } from '@custom/shared/contexts/UIStateProvider'; import { useUIState } from '@custom/shared/contexts/UIStateProvider';
import { isScreenId } from '@custom/shared/contexts/participantsState'; import { isScreenId } from '@custom/shared/contexts/participantsState';
import Container from '../Call/Container';
import Header from '../Call/Header';
import { ScreensAndPins } from './ScreensAndPins'; import { ScreensAndPins } from './ScreensAndPins';
import { SpeakerTile } from './SpeakerTile'; import { SpeakerTile } from './SpeakerTile';
@ -77,13 +80,18 @@ export const SpeakerView = () => {
return ( return (
<div className="speaker-view"> <div className="speaker-view">
<div ref={activeRef} className="active"> <Container>
{screensAndPinned.length > 0 ? ( <Header />
screenShareTiles <VideoContainer>
) : ( <div ref={activeRef} className="active">
<SpeakerTile screenRef={activeRef} participant={currentSpeaker} /> {screensAndPinned.length > 0 ? (
)} screenShareTiles
</div> ) : (
<SpeakerTile screenRef={activeRef} participant={currentSpeaker} />
)}
</div>
</VideoContainer>
</Container>
{showSidebar && ( {showSidebar && (
<ParticipantBar <ParticipantBar
fixed={fixedItems} fixed={fixedItems}