From 3ac6b66e66893fa2398b637b70a012757fb39604 Mon Sep 17 00:00:00 2001 From: James Canning Date: Sat, 10 Feb 2018 20:37:07 +0000 Subject: [PATCH] Use lazysizes, better images Closes #48, closes #58 --- src/components/ContentTypesBlock.tsx | 4 +-- src/components/HomepageBlock.tsx | 17 +++++++----- src/components/OnAirBlock.tsx | 40 +++++++++++++++++----------- src/components/Player.tsx | 4 +-- src/containers/ShowBase.tsx | 4 +-- src/css/components/HeaderNav.css | 1 - src/hoc/DateInterval.js | 2 +- 7 files changed, 41 insertions(+), 31 deletions(-) diff --git a/src/components/ContentTypesBlock.tsx b/src/components/ContentTypesBlock.tsx index 12a18f3..b6e8419 100644 --- a/src/components/ContentTypesBlock.tsx +++ b/src/components/ContentTypesBlock.tsx @@ -6,9 +6,9 @@ import { BlockKicker, BlockDescription, } from './HomepageBlock'; -import Image from './Image'; import styled from 'react-emotion'; import { formatTime, parseTime } from '../utils/schedule'; +import {AspectRatio, OneImage} from "./OneImage"; interface IProps { block: { @@ -84,7 +84,7 @@ function renderShow(props: IProps) { > - +
{props.block.overrideKicker || 'Show'} diff --git a/src/components/HomepageBlock.tsx b/src/components/HomepageBlock.tsx index a6f9dbb..2db977f 100644 --- a/src/components/HomepageBlock.tsx +++ b/src/components/HomepageBlock.tsx @@ -3,20 +3,23 @@ import styled from 'react-emotion'; import { Link } from 'react-router-dom'; import { ImageResource } from '../types'; import { css, cx } from 'emotion'; -import Image from './Image'; +import { AspectRatio, OneImage } from './OneImage'; const Box = styled.div` box-shadow: 0 1px 6px rgba(30, 30, 30, 0.1); display: block; - ${(props: any) => props.accentColor ? `border-top: 6px solid ${props.accentColor};` : `padding-bottom: 6px;`}; + ${(props: any) => + props.accentColor + ? `border-top: 6px solid ${props.accentColor};` + : `padding-bottom: 6px;`}; text-decoration: none; height: 100%; background-color: #ffffff; border-radius: 1px; transition: box-shadow 300ms ease; - + &:hover { - box-shadow: 0 1px 9px rgba(30, 30, 30, 0.15); + box-shadow: 0 1px 9px rgba(30, 30, 30, 0.15); } `; @@ -84,11 +87,11 @@ export function Block(props: IBlockProps) { const inner = (
{props.image && ( - )} diff --git a/src/components/OnAirBlock.tsx b/src/components/OnAirBlock.tsx index a2e01e8..b847a42 100644 --- a/src/components/OnAirBlock.tsx +++ b/src/components/OnAirBlock.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import {Block, BlockKicker, BlockTitle} from './HomepageBlock'; -import {css, cx} from 'emotion'; +import { Block, BlockKicker, BlockTitle } from './HomepageBlock'; +import { css, cx } from 'emotion'; import { connect } from 'react-redux'; import { RootState } from '../types'; import * as PlayerActions from '../ducks/player'; -import Image from './Image'; -import {queries} from "../css/mq"; -import {formatTime} from "../utils/schedule"; +import { queries } from '../css/mq'; +import { formatTime } from '../utils/schedule'; +import { AspectRatio, OneImage } from './OneImage'; const coverStyles = css` width: 80%; @@ -31,16 +31,16 @@ const centeredStyles = css` const onAirStyles = css` color: rgb(177, 34, 32); cursor: pointer; - + & img { display: none; } - + ${queries.large` & img { display: block; } - `} + `}; `; interface IProps { @@ -66,16 +66,24 @@ export function OnAirBlockComponent(props: IProps) { onClick={() => props.playerUserStateChange(!player.userState)} >
- {player.userState ? 'Playing live' : 'On Air - click to play'} - + {player.userState ? 'Playing live' : 'On Air - click to play'} + +
+ > + {' '} + +
{' '} {show.name}
- {formatTime(schedule.currentlyOnAir.startDate)}-{formatTime(schedule.currentlyOnAir.endDate)} + {formatTime(schedule.currentlyOnAir.startDate)}-{formatTime( + schedule.currentlyOnAir.endDate, + )}
@@ -89,5 +97,5 @@ export const OnAirBlock = connect( }), { playerUserStateChange: PlayerActions.playerUserStateChange, - } + }, )(OnAirBlockComponent); diff --git a/src/components/Player.tsx b/src/components/Player.tsx index e236a68..cb9a3b1 100644 --- a/src/components/Player.tsx +++ b/src/components/Player.tsx @@ -1,12 +1,12 @@ import React from 'react'; import { connect } from 'react-redux'; -import Image from './Image'; import PlayPauseButton from './PlayPauseButton'; import PlayerAudio from './PlayerAudio'; import { playerAudioStateChange, playerUserStateChange } from '../ducks/player'; import { Link } from 'react-router-dom'; import { formatTime } from '../utils/schedule'; import { RootState } from '../types'; +import {AspectRatio, OneImage} from "./OneImage"; interface IProps { isLoading: boolean; @@ -31,7 +31,7 @@ const Player: React.SFC = (props: IProps) => {
- +
diff --git a/src/containers/ShowBase.tsx b/src/containers/ShowBase.tsx index 0d43457..cf19523 100644 --- a/src/containers/ShowBase.tsx +++ b/src/containers/ShowBase.tsx @@ -3,13 +3,13 @@ import cx from 'classnames'; import Color from 'color'; import { graphql } from 'react-apollo'; import gql from 'graphql-tag'; -import Image from '../components/Image'; import { formatTime, parseTime } from '../utils/schedule'; import { Helmet } from 'react-helmet'; import styled from 'react-emotion'; import { NavLink } from 'react-router-dom'; import { format } from 'date-fns'; import { queries } from '../css/mq'; +import {AspectRatio, OneImage} from "../components/OneImage"; // TODO: move to a utils thing or i18n file const DAYS_TEXT = [ @@ -110,7 +110,7 @@ function ShowBase(props: IProps) {
- +

{show.name}

diff --git a/src/css/components/HeaderNav.css b/src/css/components/HeaderNav.css index ee9a8d5..3b05f67 100644 --- a/src/css/components/HeaderNav.css +++ b/src/css/components/HeaderNav.css @@ -23,7 +23,6 @@ content: '/'; display: inline; } - } } diff --git a/src/hoc/DateInterval.js b/src/hoc/DateInterval.js index 43efa85..7883d63 100644 --- a/src/hoc/DateInterval.js +++ b/src/hoc/DateInterval.js @@ -13,7 +13,7 @@ export default (prefs, WrappedComponent) => componentDidMount() { setInterval( () => this.setState({ dateInterval: new Date() }), - prefs.interval, + prefs.interval ); }