feat: add iframe support

packages/react/src/index.js

@@ -11,9 +11,8 @@ import {
   imageProxy,
   isFunction,
   isLazySupported,
-  isNil,
   isObject,
-  preferMedia,
+  getPreferredMedia,
   someProp,
   castArray
 } from './utils'
@@ -61,6 +60,7 @@ function Microlink (props) {
     () => getApiUrl({ ...props, media: mediaProps }),
     [props]
   )
+  const [iframeMedia, setIframeMedia] = useState(null)
 
   const isLazyEnabled = useMemo(
     () => isLazySupported && (lazy === true || isObject(lazy)),
@@ -94,7 +94,16 @@ function Microlink (props) {
         ? setData(fetchData)
         : { ...fetchData, ...setData }
 
-      const { title, description, url, video, audio, image, logo } = payload
+      const {
+        title,
+        description,
+        url,
+        video,
+        audio,
+        image,
+        logo,
+        iframe
+      } = payload
 
       const mediaFallback = image || logo || {}
       let media = mediaFallback
@@ -103,14 +112,23 @@ function Microlink (props) {
       let isVideo = false
       let isAudio = false
 
-      if (!isNil(audio) && preferMedia(mediaProps) === 'audio') {
-        isAudio = true
-        audioUrl = getUrlPath(audio)
-      } else if (!isNil(video)) {
-        isVideo = true
-        videoUrl = getUrlPath(video)
-      } else {
-        media = someProp(payload, mediaProps) || mediaFallback
+      const preferredMedia = getPreferredMedia(payload, mediaProps)
+
+      switch (preferredMedia) {
+        case 'audio':
+          isAudio = true
+          audioUrl = getUrlPath(audio)
+          break
+        case 'video':
+          isVideo = true
+          videoUrl = getUrlPath(video)
+          break
+        case 'iframe':
+          setIframeMedia(iframe)
+          break
+        default:
+          media = someProp(payload, mediaProps) || mediaFallback
+          break
       }
 
       const imageUrl = getUrlPath(media)
@@ -151,6 +169,15 @@ function Microlink (props) {
 
   const isLoading = isLoadingUndefined ? loadingState : loadingProp
 
+  if (iframeMedia) {
+    return (
+      <div
+        className={classNames.iframe}
+        dangerouslySetInnerHTML={{ __html: iframeMedia }}
+      />
+    )
+  }
+
   return (
     <CardWrap
       className={`${classNames.main} ${className}`}
@@ -216,7 +243,7 @@ Microlink.propTypes = {
   playsInline: PropTypes.bool,
   prerender: PropTypes.oneOf(['auto', true, false]),
   size: PropTypes.oneOf(['normal', 'large', 'small']),
-  url: PropTypes.string
+  url: PropTypes.string.isRequired
 }
 
 export { imageProxy, getApiUrl, fetchFromApi }

packages/react/src/utils/index.js

@@ -7,10 +7,19 @@ 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'
+export const getPreferredMedia = (data, mediaProps) => {
+  let prefer
+
+  for (let index = 0; index < mediaProps.length; index++) {
+    const key = mediaProps[index]
+    const value = data[key]
+    if (!isNil(value)) {
+      prefer = key
+      break
+    }
+  }
+
+  return prefer
 }
 
 export const isFunction = fn => typeof fn === 'function'
@@ -43,8 +52,8 @@ export const getApiUrl = ({
   data,
   force,
   headers,
+  iframe,
   media,
-  prerender = 'auto',
   proxy,
   ttl,
   url
@@ -55,8 +64,8 @@ export const getApiUrl = ({
     data,
     force,
     headers,
+    iframe: media.includes('iframe'),
     palette: contrast,
-    prerender,
     proxy,
     screenshot: media.includes('screenshot'),
     ttl,
@@ -101,5 +110,6 @@ export const classNames = {
   ffwControl: `${CONTROLS_BASE_CLASSNAME}_fast_forward`,
   rateControl: `${CONTROLS_BASE_CLASSNAME}_rate`,
   progressBar: `${CONTROLS_BASE_CLASSNAME}_progress`,
-  progressTime: `${CONTROLS_BASE_CLASSNAME}_progress_time`
+  progressTime: `${CONTROLS_BASE_CLASSNAME}_progress_time`,
+  iframe: `${BASE_CLASSNAME}__iframe`
 }