fix: ensure props.media is an array

microlinkhq · Dec 21, 2019 · 435f570 · 435f570
1 parent 006168a
commit 435f570
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
@@ -14,7 +14,8 @@ import {
   isNil,
   isObject,
   preferMedia,
-  someProp
+  someProp,
+  castArray
 } from './utils'
 
 import { useIntersectionObserver } from './utils/hooks'
@@ -43,16 +44,23 @@ function Microlink (props) {
     className = '',
     size,
     lazy,
+    media: mediaProp,
     ...restProps
   } = props
+
+  const mediaProps = castArray(mediaProp)
+
   const isLoadingUndefined = useMemo(() => loadingProp === undefined, [
     loadingProp
   ])
   const [loadingState, setLoading] = useState(
     isLoadingUndefined ? true : loadingProp
   )
   const [cardData, setCardData] = useState({})
-  const [apiUrl, apiUrlProps] = useMemo(() => getApiUrl(props), [props])
+  const [apiUrl, apiUrlProps] = useMemo(
+    () => getApiUrl({ ...props, media: mediaProps }),
+    [props]
+  )
 
   const isLazyEnabled = useMemo(
     () => isLazySupported && (lazy === true || isObject(lazy)),
@@ -95,14 +103,14 @@ function Microlink (props) {
       let isVideo = false
       let isAudio = false
 
-      if (!isNil(audio) && preferMedia(props.media) === 'audio') {
+      if (!isNil(audio) && preferMedia(mediaProps) === 'audio') {
         isAudio = true
         audioUrl = getUrlPath(audio)
       } else if (!isNil(video)) {
         isVideo = true
         videoUrl = getUrlPath(video)
       } else {
-        media = someProp(payload, props.media) || mediaFallback
+        media = someProp(payload, mediaProps) || mediaFallback
       }
 
       const imageUrl = getUrlPath(media)

diff --git a/packages/react/src/utils/index.js b/packages/react/src/utils/index.js
@@ -5,10 +5,12 @@ const REGEX_LOCALHOST = /http:\/\/localhost/
 
 const isSSR = typeof window === 'undefined'
 
+export const castArray = value => [].concat(value)
+
 export const preferMedia = props => {
   const audioIndex = props.findIndex(propName => propName === 'audio')
   const videoIndex = props.findIndex(propName => propName === 'video')
-  return audioIndex < videoIndex ? 'audio' : 'video'
+  return audioIndex > videoIndex ? 'audio' : 'video'
 }
 
 export const isFunction = fn => typeof fn === 'function'
@@ -37,7 +39,6 @@ export const media = {
 
 export const getApiUrl = ({
   apiKey,
-  audio,
   contrast = false,
   data,
   force,