refactor(media): change media components api to simplify using static media (#207)

alebiavati · web-flow · commit c1f5aab53eac · 2021-04-06T19:52:10.000-07:00
diff --git a/README.md b/README.md
@@ -4,9 +4,11 @@ Marketing website for Commit (commit.dev)
 ### Importing static images
 
 **1)** Place the image you want to display in the `/static/` folder
-**2)** Display the image with [`<Image>`](./components/media/image.js) component:
+**2)** Display the image with [`<StaticImage>`](./components/media/static-image.js) component:
 ```jsx
-<Image {...getStaticImage('my-image-name.png')} alt="My image" />
+import { StaticImage } from 'components'
+
+<StaticImage name="my-image-name.png" alt="My image" />
 ```
 
 Images are automatically generated at build time and lazy-loaded at run time.
@@ -34,9 +36,11 @@ Processing ~/path/to/video.mov (13.4 MB)...
  -- generated static/videos/video.mp4 (1.28 MB)
 ```
 
-**3)** Use generated files with [`<BackgroundVideo>`](./components/media/video.js) component:
+**3)** Use generated files with [`<StaticBackgroundVideo>`](./components/media/background-video.js) component:
 ```jsx
-<BackgroundVideo {...getStaticVideo('video')} alt="My background video" />
+import { StaticBackgroundVideo } from 'components'
+
+<StaticBackgroundVideo name="video" alt="My background video" />
 ```
 
 Videos are lazy-loaded at run time.
diff --git a/components/index.js b/components/index.js
@@ -13,3 +13,4 @@ export { default as SocialIcons } from './social-icons'
 export { default as Testimonials } from './testimonials'
 export { default as Text } from './text'
 export { default as TextArea } from './textarea'
+export * from './media'
diff --git a/components/media/background-video.js b/components/media/background-video.js
@@ -0,0 +1,7 @@
+import { Video } from './video'
+
+function BackgroundVideo(props) {
+  return <Video muted data-autoplay="" loop playsinline {...props} />
+}
+
+export { BackgroundVideo }
diff --git a/components/media/get-static-image.js b/components/media/get-static-image.js
diff --git a/components/media/get-static-video.js b/components/media/get-static-video.js
diff --git a/components/media/image.js b/components/media/image.js
@@ -56,4 +56,4 @@ Image.propTypes = {
   className: string,
 }
 
-export default Image
+export { Image }
diff --git a/components/media/index.js b/components/media/index.js
@@ -17,6 +17,10 @@ const GlobalMediaStyles = createGlobalStyle`
   ${lazyStyles}
 `
 
-export { default as Image } from './image'
-export { Video, BackgroundVideo } from './video'
+export { Image } from './image'
+export { StaticImage } from './static-image'
+export { Video } from './video'
+export { StaticVideo } from './static-video'
+export { BackgroundVideo } from './background-video'
+export { StaticBackgroundVideo } from './static-background-video'
 export { GlobalMediaStyles }
diff --git a/components/media/static-background-video.js b/components/media/static-background-video.js
@@ -0,0 +1,7 @@
+import { StaticVideo } from './static-video'
+
+function StaticBackgroundVideo(props) {
+  return <StaticVideo muted data-autoplay="" loop playsinline {...props} />
+}
+
+export { StaticBackgroundVideo }
diff --git a/components/media/static-image.js b/components/media/static-image.js
@@ -0,0 +1,14 @@
+import { string } from 'prop-types'
+
+import { getStaticImage } from './get-static-image'
+import { Image } from './image'
+
+function StaticImage({ name, ...otherProps }) {
+  return <Image {...getStaticImage(name)} {...otherProps} />
+}
+
+StaticImage.propTypes = {
+  name: string,
+}
+
+export { StaticImage }
diff --git a/components/media/static-video.js b/components/media/static-video.js
@@ -0,0 +1,14 @@
+import { string } from 'prop-types'
+
+import { getStaticVideo } from './get-static-video'
+import { Video } from './video'
+
+function StaticVideo({ name, ...otherProps }) {
+  return <Video {...getStaticVideo(name)} {...otherProps} />
+}
+
+StaticVideo.propTypes = {
+  name: string,
+}
+
+export { StaticVideo }
diff --git a/components/media/video.js b/components/media/video.js
@@ -41,8 +41,4 @@ Video.propTypes = {
   className: string,
 }
 
-function BackgroundVideo(props) {
-  return <Video muted data-autoplay="" loop playsinline {...props} />
-}
-
-export { Video, BackgroundVideo }
+export { Video }
diff --git a/sections/platform-section/features/community.js b/sections/platform-section/features/community.js
@@ -1,18 +1,16 @@
 import React from 'react'
 
-import { Heading, Text } from 'components'
+import { Heading, Text, StaticBackgroundVideo } from 'components'
 
-import { BackgroundVideo } from '../../../components/media'
-import { getStaticVideo } from '../../../helpers/get-static-video'
 import { StyledFeaturesListItem } from '../styled-features-list-item'
 
 function CommunityFeature(props) {
   return (
     <StyledFeaturesListItem
       {...props}
       media={
-        <BackgroundVideo
-          {...getStaticVideo('community')}
+        <StaticBackgroundVideo
+          name="community"
           alt="Screenshot of Commit's Community page"
         />
       }
diff --git a/sections/platform-section/features/opportunities.js b/sections/platform-section/features/opportunities.js
@@ -1,18 +1,16 @@
 import React from 'react'
 
-import { Text, Heading } from 'components'
+import { Text, Heading, StaticBackgroundVideo } from 'components'
 
-import { BackgroundVideo } from '../../../components/media'
-import { getStaticVideo } from '../../../helpers/get-static-video'
 import { StyledFeaturesListItem } from '../styled-features-list-item'
 
 function OpportunitiesFeature(props) {
   return (
     <StyledFeaturesListItem
       {...props}
       media={
-        <BackgroundVideo
-          {...getStaticVideo('community')}
+        <StaticBackgroundVideo
+          name="community"
           alt="Screenshot of Commit's Opportunities page"
         />
       }
diff --git a/sections/platform-section/features/profile.js b/sections/platform-section/features/profile.js
@@ -1,18 +1,16 @@
 import React from 'react'
 
-import { Text, Heading } from 'components'
+import { Text, Heading, StaticBackgroundVideo } from 'components'
 
-import { BackgroundVideo } from '../../../components/media'
-import { getStaticVideo } from '../../../helpers/get-static-video'
 import { StyledFeaturesListItem } from '../styled-features-list-item'
 
 function ProfileFeature(props) {
   return (
     <StyledFeaturesListItem
       {...props}
       media={
-        <BackgroundVideo
-          {...getStaticVideo('profile')}
+        <StaticBackgroundVideo
+          name="profile"
           alt="Screenshot of Commit's Opportunities page"
         />
       }

Original file line number	Diff line number	Diff line change
`@@ -56,4 +56,4 @@ Image.propTypes = {`
`56`	`56`	`className: string,`
`57`	`57`	`}`
`58`	`58`
`59`		`-export default Image`
	`59`	`+export { Image }`