fix: respect media priorities (#170)

* fix: respect media order * build: force * test: update snapshot
microlinkhq · Dec 13, 2019 · 5de299c · 5de299c
1 parent 1c51551
commit 5de299c
Show file tree

Hide file tree

Showing 4 changed files with 576 additions and 46 deletions.
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
@@ -5,16 +5,18 @@ import { CardWrap, CardMedia, CardContent, CardEmpty } from './components/Card'
 
 import {
   classNames,
-  isNil,
-  getApiUrl,
   fetchFromApi,
+  getApiUrl,
   getUrlPath,
   imageProxy,
-  someProp,
   isFunction,
   isLazySupported,
-  isObject
+  isNil,
+  isObject,
+  preferMedia,
+  someProp
 } from './utils'
+
 import { useIntersectionObserver } from './utils/hooks'
 
 const Card = ({ url, size, title, description, ...props }) => (
@@ -78,48 +80,51 @@ function Microlink (props) {
     }
   }, [apiUrl, canFetchData, setData, apiUrlProps.headers['x-api-key']])
 
-  const mergeData = useCallback(fetchData => {
-    const payload = isFunction(setData)
-      ? setData(fetchData)
-      : { ...fetchData, ...setData }
-
-    const { title, description, url, video, audio, image, logo } = payload
-
-    const mediaFallback = image || logo || {}
-    let media = mediaFallback
-    let videoUrl
-    let audioUrl
-    let isVideo = false
-    let isAudio = false
-
-    if (!isNil(audio)) {
-      isAudio = true
-      audioUrl = getUrlPath(audio)
-    } else if (!isNil(video)) {
-      isVideo = true
-      videoUrl = getUrlPath(video)
-    } else {
-      media = someProp(payload, [].concat(props.media)) || mediaFallback
-    }
-
-    const imageUrl = getUrlPath(media)
-    const { color, background_color: backgroundColor } = media
-
-    setCardData({
-      url,
-      color,
-      title,
-      description,
-      imageUrl,
-      videoUrl,
-      audioUrl,
-      isVideo,
-      isAudio,
-      backgroundColor
-    })
-
-    setLoading(false)
-  }, [setData])
+  const mergeData = useCallback(
+    fetchData => {
+      const payload = isFunction(setData)
+        ? setData(fetchData)
+        : { ...fetchData, ...setData }
+
+      const { title, description, url, video, audio, image, logo } = payload
+
+      const mediaFallback = image || logo || {}
+      let media = mediaFallback
+      let videoUrl
+      let audioUrl
+      let isVideo = false
+      let isAudio = false
+
+      if (!isNil(audio) && preferMedia(props.media) === 'audio') {
+        isAudio = true
+        audioUrl = getUrlPath(audio)
+      } else if (!isNil(video)) {
+        isVideo = true
+        videoUrl = getUrlPath(video)
+      } else {
+        media = someProp(payload, props.media) || mediaFallback
+      }
+
+      const imageUrl = getUrlPath(media)
+      const { color, background_color: backgroundColor } = media
+
+      setCardData({
+        url,
+        color,
+        title,
+        description,
+        imageUrl,
+        videoUrl,
+        audioUrl,
+        isVideo,
+        isAudio,
+        backgroundColor
+      })
+
+      setLoading(false)
+    },
+    [setData]
+  )
 
   useEffect(fetchData, [props.url, setData, hasIntersected])
 

diff --git a/packages/react/src/utils/index.js b/packages/react/src/utils/index.js
@@ -5,6 +5,12 @@ const REGEX_LOCALHOST = /http:\/\/localhost/
 
 const isSSR = typeof window === 'undefined'
 
+export const preferMedia = props => {
+  const audioIndex = props.findIndex(propName => propName === 'audio')
+  const videoIndex = props.findIndex(propName => propName === 'video')
+  return audioIndex < videoIndex ? 'audio' : 'video'
+}
+
 export const isFunction = fn => typeof fn === 'function'
 
 export const isObject = obj => typeof obj === 'object'