render() {
const { description } = this.props;
const { days, hours, minutes, seconds } = this.state.timeRemaining;
return (
<Box
rootClassName={styles.timerContainer}
flexDirection="column"
alignItems="center"
justifyContent="center"
>
<Box rootClassName="p-y-1" justifyContent="center">
{days > 0 && (
<Box
rootClassName={styles.timerBox}
flexDirection="column"
alignItems="center"
justifyContent="center"
>
<h1 {...css(styles.timerNumber)}>{days}</h1>
<p {...css(styles.timerText)}>{getPluralText(days, 'day')}</p>
</Box>
)}
<Box
rootClassName={styles.timerBox}
flexDirection="column"
alignItems="center"
justifyContent="center"
>
<h1 {...css(styles.timerNumber)}>{hours}</h1>
<p {...css(styles.timerText)}>{getPluralText(hours, 'hour')}</p>
</Box>
<Box
rootClassName={styles.timerBox}
flexDirection="column"
alignItems="center"
justifyContent="center"
>
<h1 {...css(styles.timerNumber)}>{minutes}</h1>
<p {...css(styles.timerText)}>{getPluralText(minutes, 'minute')}</p>
</Box>
<Box
rootClassName={styles.timerBox}
flexDirection="column"
alignItems="center"
justifyContent="center"
>
<h1 {...css(styles.timerNumber)}>{seconds}</h1>
<p {...css(styles.timerText)}>{getPluralText(seconds, 'second')}</p>
</Box>
</Box>
{description && <p {...css(styles.description)}>{description}</p>}
</Box>
);
}
render() {
const { text, htmlAttributes, rootClassName } = this.props;
let renderText = text;
if (this.scopeRef) {
renderText = this.getRenderText();
}
return (
<div
{...htmlAttributes}
ref={r => (this.scopeRef = r)}
{...css(rootClassName, styles.TextTruncate)}
>
{renderText}
</div>
);
}
function IdeaPresent({
data: { loading, error, Idea: idea },
slug,
userId,
isSuperuser,
...rest
}: Props) {
const {
title,
coverBackgroundUrl,
isBackgroundImageDark,
createdBy,
courseraVideoUrl,
youtubeVideoUrl,
slidesUrl,
contributorsText,
} = idea;
const haveLink = courseraVideoUrl || youtubeVideoUrl || slidesUrl;
return (
<div {...css('IdeaPresent header-margin-offset', animationUtils.fadeInSlow)}>
<Box
rootClassName={styles.banner}
flexDirection="column"
justifyContent="center"
alignItems="center"
style={{
backgroundImage: `url(${coverBackgroundUrl || DEFAULT_COVER_BG})`,
position: 'relative',
}}
>
<div
className={cx('p-a-3', { inverse: isBackgroundImageDark })}
style={{
textShadow: `0 0 15px ${isBackgroundImageDark ? color.black : color.white}`,
}}
>
<TextTruncate
rootClassName="h1 m-b-2 font-weight-900"
line={3}
truncateText="…"
text={title}
style={{
// fontSize: '8rem',
lineHeight: 1.2,
}}
/>
<h3 className="text-secondary font-lg">{`${createdBy && createdBy.name}${contributorsText
? ` | ${contributorsText}`
: ''}`}</h3>
<Box rootClassName="p-t-2" justifyContent="center">
{haveLink && (
<div
style={{
padding: 4,
paddingTop: 8,
borderRadius: 10,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
textShadow: 'none',
}}
>
{youtubeVideoUrl && (
<a {...css('p-a-1', styles.youtubeIcon)} href={youtubeVideoUrl} target="_blank">
<FontIcon value="subscriptions" style={{ fontSize: '2rem' }} />
</a>
)}
{courseraVideoUrl && (
<a className="p-a-1" href={courseraVideoUrl} target="_blank">
<FontIcon value="videocam" style={{ fontSize: '2rem' }} />
</a>
)}
{slidesUrl && (
<a {...css('p-a-1', styles.slideIcon)} href={slidesUrl} target="_blank">
<FontIcon value="assessment" style={{ fontSize: '2rem' }} />
</a>
)}
</div>
)}
</Box>
</div>
<div style={{ position: 'absolute', bottom: 0, width: '100%' }}>
<IdeaPresentBar
currentSlug={slug}
currentCreatedBy={createdBy.id}
id={idea.id}
userId={userId}
isSuperuser={isSuperuser}
/>
</div>
</Box>
</div>
);
}