Use lazysizes, better images

Closes #48, closes #58
urfonline · Feb 10, 2018 · 3ac6b66 · 3ac6b66
1 parent 5b324ee
commit 3ac6b66
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 31 deletions.
diff --git 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) {
     >
       <ShowBlockContainer size={props.size}>
         <ShowCover size={props.size}>
-          <Image src={show.cover.resource} width={220} height={220} />
+          <OneImage src={show.cover.resource} aspectRatio={AspectRatio.r1by1} alt="" />
         </ShowCover>
         <div>
           <BlockKicker>{props.block.overrideKicker || 'Show'}</BlockKicker>

diff --git 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 = (
     <div>
       {props.image && (
-        <Image
+        <OneImage
           className={imageScaleStyle}
           src={props.image.resource}
-          width={16 * 50}
-          height={6 * 50}
+          aspectRatio={AspectRatio.rPanovision70}
+          alt=""
         />
       )}
       <BoxInner className={props.innerClassName}>

diff --git 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)}
     >
       <div className={centeredStyles}>
-        <BlockKicker>{player.userState ? 'Playing live' : 'On Air - click to play'}</BlockKicker>
-        <Image
+        <BlockKicker>
+          {player.userState ? 'Playing live' : 'On Air - click to play'}
+        </BlockKicker>
+        <div
           className={cx(coverStyles, { [onAirCoverStyles]: player.userState })}
-          src={show.cover.resource}
-          width={128}
-          height={128}
-        />
+        >
+          {' '}
+          <OneImage
+            src={show.cover.resource}
+            aspectRatio={AspectRatio.r1by1}
+            alt=""
+          />
+        </div>{' '}
         <BlockTitle>{show.name}</BlockTitle>
         <div>
-          {formatTime(schedule.currentlyOnAir.startDate)}-{formatTime(schedule.currentlyOnAir.endDate)}
+          {formatTime(schedule.currentlyOnAir.startDate)}-{formatTime(
+            schedule.currentlyOnAir.endDate,
+          )}
         </div>
       </div>
     </Block>
@@ -89,5 +97,5 @@ export const OnAirBlock = connect(
   }),
   {
     playerUserStateChange: PlayerActions.playerUserStateChange,
-  }
+  },
 )(OnAirBlockComponent);
diff --git 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<IProps> = (props: IProps) => {
     <div className="Player">
       <div className="Player__container">
         <div className="Player__show-cover">
-          <Image src={show.cover.resource} width={100} height={100} />
+          <OneImage src={show.cover.resource} aspectRatio={AspectRatio.r1by1} alt="" />
         </div>
         <div className="Player__content">
           <div className="Player__button">

diff --git 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) {
         <div className="Container">
           <div className="ShowHeader__container">
             <div className="ShowHeader__cover">
-              <Image src={show.cover.resource} width={400} height={400} />
+              <OneImage src={show.cover.resource} aspectRatio={AspectRatio.r1by1} alt="" />
             </div>
             <div className="ShowHeader__info">
               <h1 className="ShowHeader__show-title">{show.name}</h1>

diff --git 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
@@ -13,7 +13,7 @@ export default (prefs, WrappedComponent) =>
     componentDidMount() {
       setInterval(
         () => this.setState({ dateInterval: new Date() }),
-        prefs.interval,
+        prefs.interval
       );
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,7 +23,6 @@ @@
             content: '/';
             display: inline;
           }
         }
       }
@@ Expand Down @@