Skip to content

Presenter mode slide preview #724

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Sep 13, 2019
Merged

Presenter mode slide preview #724

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a7f2104
Ensure aspect ratio scaled slide is always centered.
carloskelly13 Sep 12, 2019
c3d7eb3
Merge branch 'task/rewrite' into rewrite/aspect-center-slide
SunburtReynolds Sep 12, 2019
36b103a
show slide previews in pres. mode
SunburtReynolds Sep 13, 2019
efee974
polish pres. mode design and fix slide elem bug
SunburtReynolds Sep 13, 2019
f38d51f
Merge branch 'task/rewrite' into rewrite/presenter-slide-preview
SunburtReynolds Sep 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 19 additions & 12 deletions src/components/deck/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,33 +170,40 @@ const Deck = ({
immediate: state.immediate
});

const slides = transitions.map(({ item, props, key }) => (
<AnimatedDeckDiv style={props} key={key}>
{React.cloneElement(filteredChildren[item], {
slideNum: item,
numberOfSlides,
template: rest.template
})}
</AnimatedDeckDiv>
));

let content = null;
if (state.resolvedInitialUrl) {
if (state.presenterMode) {
const staticSlides = filteredChildren.map((slide, index) =>
React.cloneElement(slide, {
slideNum: index,
numberOfSlides,
template: rest.template
})
);
content = (
<PresenterDeck
isController={isController}
isReceiver={isReceiver}
startConnection={startConnection}
terminateConnection={terminateConnection}
>
{filteredChildren}
{staticSlides}
</PresenterDeck>
);
} else {
const animatedSlides = transitions.map(({ item, props, key }) => (
<AnimatedDeckDiv style={props} key={key}>
{React.cloneElement(filteredChildren[item], {
slideNum: item,
numberOfSlides,
template: rest.template
})}
</AnimatedDeckDiv>
));

content = (
<AudienceDeck addMessageHandler={addMessageHandler}>
{slides}
{animatedSlides}
</AudienceDeck>
);
}
Expand Down
43 changes: 25 additions & 18 deletions src/components/deck/presenter-deck.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,43 +7,49 @@ import defaultTheme from '../../theme/default-theme';
import * as queryString from 'query-string';

const PresenterDeckContainer = styled('div')`
height: calc(100vh - 8em);
width: calc(100vw - 8em);
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: row;
padding: 4em;
background-color: ${defaultTheme.colors.tertiary};
background-color: black;
`;

const NotesColumn = styled('div')`
padding: 2em 4em;
display: flex;
flex-direction: column;
flex: 1;
width: 50%;
`;

const PreviewColumn = styled('div')`
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
width: 50%;
`;

const PresentationHeader = styled(Heading)`
align-items: flex-start;
text-align: start;
`;

const SlidePreviewPlaceholder = styled('div')`
flex: 1;
background-color: ${defaultTheme.colors.primary};
const SlideContainer = styled('div')`
height: calc(50% - 1em);
width: 100%;
`;

const SlideDivider = styled('div')`
height: 2em;
`;

const Button = styled('button')`
border: 0;
width: 250px;
padding: 1em;
margin-bottom: 1em;
background-color: ${defaultTheme.colors.secondary};
color: ${defaultTheme.colors.primary};
font-size: ${defaultTheme.fontSizes.text};
Expand All @@ -58,7 +64,8 @@ const PresenterDeck = props => {
isController,
isReceiver,
startConnection,
terminateConnection
terminateConnection,
children
} = props;

const onStartConnection = React.useCallback(() => {
Expand All @@ -70,6 +77,11 @@ const PresenterDeck = props => {
startConnection(urlParams);
}, [currentSlide, currentSlideElement, immediate, startConnection]);

const activeSlide =
children.length > currentSlide ? children[currentSlide] : null;
const nextSlide =
children.length > currentSlide + 1 ? children[currentSlide + 1] : null;

return (
<PresenterDeckContainer>
<NotesColumn>
Expand All @@ -83,14 +95,9 @@ const PresenterDeck = props => {
<Text lineHeight="180%">{currentNotes}</Text>
</NotesColumn>
<PreviewColumn>
<PresentationHeader fontSize="subHeader">
Current Slide:
</PresentationHeader>
<SlidePreviewPlaceholder />
<PresentationHeader fontSize="subHeader">
Next Slide:
</PresentationHeader>
<SlidePreviewPlaceholder />
<SlideContainer>{activeSlide}</SlideContainer>
<SlideDivider />
<SlideContainer>{nextSlide}</SlideContainer>
</PreviewColumn>
</PresenterDeckContainer>
);
Expand Down