sidebar-image.js

// @flow

import React from 'react';
import styled from 'styled-components';

import { EnsureDefaultTheme } from '../../theme';
import PopularPostOverlay, { Overlay } from '../popular-posts/popular-post-overlay';
import ProgressiveImage from '../../progressive-image';
import type SidebarPost from 'kinja-magma/models/SidebarPost';
import Video from '../../elements/video';
const Image16by9Container = styled.div`
	height: 0;
	width: 100%;
	padding-bottom: 56.25%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-color: ${props => props.theme.color.whitesmoke};
	overflow: hidden;
	position: relative;

	&:hover ${Overlay} {
		bottom: 0;
	}

	img {
		width: 100%;
	}
`;

type Props = {
	post: SidebarPost,
	withOverlay?: boolean,
	hideRecommendations?: boolean,
	commentsDisabled?: boolean
};

const SidebarImage = (props: Props) => {
	const { post, withOverlay, hideRecommendations, commentsDisabled } = props;
	const { image } = post;
	if (image && image.format) {
		const contents = () => {
			if (image.format === 'gif') {
				return (
					<Video
						style={{
							width: '100%',
							height: 'auto'
						}}
						noLazy
						id={image.id}
						transform='KinjaCenteredLarge'
						videoOptions={['autoPlay', 'playsInline', 'loop', 'muted']}
					/>
				);
			} else {
				return (
					<ProgressiveImage
						alt={post.headline}
						ariaLabel={post.headline}
						blurredImageSize="KinjaCenteredSmall" // temporary override
						format={image.format}
						id={image.id}
						pageLoaded={true} // this component is only rendered on client
					/>
				);
			}
		};

		return (
			<EnsureDefaultTheme>
				<Image16by9Container>
					{withOverlay &&
					<PopularPostOverlay
						post={post}
						hideRecommendations={hideRecommendations}
						commentsDisabled={commentsDisabled}
					/>}
					<div className="js_lazy-image">
						{contents()}
					</div>
				</Image16by9Container>
			</EnsureDefaultTheme>
		);
	}
	return null;
};

export default SidebarImage;