feat: add iframe support (#173)

* feat: add iframe support * test: update snapshot * build: url is required * build: remove unnecessary prop type * fix: pass prerender parameter * build: create DOM scripts on client side * test: update story * fix: add export
microlinkhq · Dec 26, 2019 · e73ad1a · e73ad1a
1 parent 301df2c
commit e73ad1a
Show file tree

Hide file tree

Showing 6 changed files with 582 additions and 808 deletions.
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
@@ -11,11 +11,11 @@ import {
   imageProxy,
   isFunction,
   isLazySupported,
-  isNil,
   isObject,
-  preferMedia,
+  getPreferredMedia,
   someProp,
-  castArray
+  castArray,
+  isSSR
 } from './utils'
 
 import { useIntersectionObserver } from './utils/hooks'
@@ -61,6 +61,7 @@ function Microlink (props) {
     () => getApiUrl({ ...props, media: mediaProps }),
     [props]
   )
+  const [iframeMedia, setIframeMedia] = useState(null)
 
   const isLazyEnabled = useMemo(
     () => isLazySupported && (lazy === true || isObject(lazy)),
@@ -94,7 +95,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 +113,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 +170,26 @@ function Microlink (props) {
 
   const isLoading = isLoadingUndefined ? loadingState : loadingProp
 
+  if (iframeMedia) {
+    if (!isSSR) {
+      iframeMedia.scripts.forEach(attrs => {
+        const hasScript = document.querySelector(`script[src="${attrs.src}"]`)
+        if (!hasScript) {
+          const script = document.createElement('script')
+          Object.keys(attrs).forEach(key => (script[key] = attrs[key]))
+          document.body.appendChild(script)
+        }
+      })
+    }
+
+    return (
+      <div
+        className={classNames.iframe}
+        dangerouslySetInnerHTML={{ __html: iframeMedia.html }}
+      />
+    )
+  }
+
   return (
     <CardWrap
       className={`${classNames.main} ${className}`}
@@ -216,7 +255,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 }

diff --git a/packages/react/src/utils/index.js b/packages/react/src/utils/index.js
@@ -3,14 +3,23 @@ import { fetchFromApi, getApiUrl as createApiUrl } from '@microlink/mql'
 
 const REGEX_LOCALHOST = /http:\/\/localhost/
 
-const isSSR = typeof window === 'undefined'
+export 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'
@@ -44,7 +53,7 @@ export const getApiUrl = ({
   force,
   headers,
   media,
-  prerender = 'auto',
+  prerender,
   proxy,
   ttl,
   url
@@ -55,6 +64,7 @@ export const getApiUrl = ({
     data,
     force,
     headers,
+    iframe: media.includes('iframe'),
     palette: contrast,
     prerender,
     proxy,
@@ -101,5 +111,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`
 }