From a8a5d7612552a6c95aefb1285594689ed4eca5dc Mon Sep 17 00:00:00 2001
From: Daniel Eden <dan.eden@me.com>
Date: Sat, 8 Feb 2020 17:10:40 +0000
Subject: [PATCH] Extract figure and caption from Image so they can be reused
 for CFVideo

---
 src/components/CFVideo.tsx                  | 35 +++++++++++++------
 src/components/Image.tsx                    | 38 ++-------------------
 src/components/designSystem/Caption.tsx     | 10 ++++++
 src/components/designSystem/Figure.tsx      | 32 +++++++++++++++++
 src/components/designSystem/designSystem.ts |  4 +++
 5 files changed, 73 insertions(+), 46 deletions(-)
 create mode 100644 src/components/designSystem/Caption.tsx
 create mode 100644 src/components/designSystem/Figure.tsx

diff --git a/src/components/CFVideo.tsx b/src/components/CFVideo.tsx
index 748e91518..9aea8e25f 100644
--- a/src/components/CFVideo.tsx
+++ b/src/components/CFVideo.tsx
@@ -1,27 +1,42 @@
-import styled from '@emotion/styled'
 import React, { FunctionComponent } from 'react'
 import ScriptTag from 'react-script-tag'
-import { Atoms } from './designSystem/designSystem'
+import mdToHTML from '../utils/mdToHTML'
+import { Caption, Figure } from './designSystem/designSystem'
 
 interface CFVideoProps {
+  autoPlay: boolean
+  caption?: string
+  controls: boolean
   id: string
+  loop: boolean
+  preload: boolean
 }
 
-const Container = styled.div`
-  margin-bottom: ${Atoms.spacing.medium};
-`
-
-const CFVideo: FunctionComponent<CFVideoProps> = ({ id }) => {
+const CFVideo: FunctionComponent<CFVideoProps> = ({
+  autoPlay = false,
+  caption,
+  controls = true,
+  id,
+  loop = false,
+  preload = true,
+}) => {
   return (
-    <Container>
-      <stream src={id} controls></stream>
+    <Figure>
+      <stream
+        autoPlay={autoPlay}
+        preload={String(preload)}
+        controls={controls}
+        loop={loop}
+        src={id}
+      ></stream>
       <ScriptTag
         data-cfasync="false"
         defer
         type="text/javascript"
         src={`https://embed.videodelivery.net/embed/r4xu.fla9.latest.js?video=${id}`}
       />
-    </Container>
+      {caption && <Caption>{mdToHTML(caption)}</Caption>}
+    </Figure>
   )
 }
 
diff --git a/src/components/Image.tsx b/src/components/Image.tsx
index 92eecb02b..01414cd0b 100755
--- a/src/components/Image.tsx
+++ b/src/components/Image.tsx
@@ -1,14 +1,8 @@
-import styled from '@emotion/styled'
 import React, { FunctionComponent } from 'react'
 import Imgix from 'react-imgix'
 import mdToHTML from '../utils/mdToHTML'
-import { Align, Atoms } from './designSystem/designSystem'
-
-interface FigureProps {
-  className?: string
-  responsive?: boolean
-  margin?: boolean
-}
+import { Align, Atoms, Caption, Figure } from './designSystem/designSystem'
+import { FigureProps } from './designSystem/Figure'
 
 interface ImageProps extends FigureProps {
   align?: 'left' | 'right'
@@ -19,34 +13,6 @@ interface ImageProps extends FigureProps {
   src: string
 }
 
-const Figure = styled('figure')<FigureProps>(
-  ({ margin, responsive }) => `
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  writing-mode: horizontal-tb;
-  margin-bottom: ${margin ? Atoms.spacing.medium : 0};
-
-  img {
-    display: block;
-    width: ${responsive ? '100%' : 'auto'};
-    flex: 1 1 auto;
-    order: 2;
-  }
-
-  figcaption {
-    order: 3;
-    margin-top: ${Atoms.spacing.xxsmall};
-  }
-`
-)
-
-const Caption = styled('figcaption')`
-  font-size: ${Atoms.font.size.small};
-  color: var(--meta-color, ${Atoms.colors.meta});
-  letter-spacing: 0.025em;
-`
-
 const Image: FunctionComponent<ImageProps> = ({
   align,
   alt,
diff --git a/src/components/designSystem/Caption.tsx b/src/components/designSystem/Caption.tsx
new file mode 100644
index 000000000..449222881
--- /dev/null
+++ b/src/components/designSystem/Caption.tsx
@@ -0,0 +1,10 @@
+import styled from '@emotion/styled'
+import Atoms from './atoms'
+
+const Caption = styled('figcaption')`
+  font-size: ${Atoms.font.size.small};
+  color: var(--meta-color, ${Atoms.colors.meta});
+  letter-spacing: 0.025em;
+`
+
+export default Caption
diff --git a/src/components/designSystem/Figure.tsx b/src/components/designSystem/Figure.tsx
new file mode 100644
index 000000000..bc53fc505
--- /dev/null
+++ b/src/components/designSystem/Figure.tsx
@@ -0,0 +1,32 @@
+import styled from '@emotion/styled'
+import Atoms from './atoms'
+
+export interface FigureProps {
+  className?: string
+  responsive?: boolean
+  margin?: boolean
+}
+
+const Figure = styled('figure')<FigureProps>(
+  ({ margin = true, responsive = true }) => `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  writing-mode: horizontal-tb;
+  margin-bottom: ${margin ? Atoms.spacing.medium : 0};
+
+  img {
+    display: block;
+    width: ${responsive ? '100%' : 'auto'};
+    flex: 1 1 auto;
+    order: 2;
+  }
+
+  figcaption {
+    order: 3;
+    margin-top: ${Atoms.spacing.xxsmall};
+  }
+`
+)
+
+export default Figure
diff --git a/src/components/designSystem/designSystem.ts b/src/components/designSystem/designSystem.ts
index 68f2a7cef..41e72eb9c 100755
--- a/src/components/designSystem/designSystem.ts
+++ b/src/components/designSystem/designSystem.ts
@@ -1,7 +1,9 @@
 import Align from './Align'
 import Atoms from './atoms'
 import Blockquote from './Blockquote'
+import Caption from './Caption'
 import Code from './Code'
+import Figure from './Figure'
 import H1 from './H1'
 import H2 from './H2'
 import H3 from './H3'
@@ -19,7 +21,9 @@ export {
   Align,
   Atoms,
   Blockquote,
+  Caption,
   Code,
+  Figure,
   H1,
   H2,
   H3,