673 vimeo auto embed

app/components/cards/MarkdownViewer.jsx

@@ -96,19 +96,34 @@ class MarkdownViewer extends Component {
         // In addition to inserting the youtube compoennt, this allows react to compare separately preventing excessive re-rendering.
         let idx = 0
         const sections = []
-        // HtmlReady inserts ~~~ youtube:${id} ~~~
-        for(let section of cleanText.split('~~~ youtube:')) {
-            if(/^[A-Za-z0-9\_\-]+ ~~~/.test(section)) {
-                const youTubeId = section.split(' ')[0]
-                section = section.substring(youTubeId.length + ' ~~~'.length)
+
+        // HtmlReady inserts ~~~ embed:${id} type ~~~
+        for(let section of cleanText.split('~~~ embed:')) {
+            const match = section.match(/^([A-Za-z0-9\_\-]+) (youtube|vimeo) ~~~/)
+            if(match && match.length >= 3) {
+                const id = match[1]
+                const type = match[2]
                 const w = large ? 640 : 480,
                       h = large ? 360 : 270
-                sections.push(
-                    <YoutubePreview key={idx++} width={w} height={h} youTubeId={youTubeId}
-                        frameBorder="0" allowFullScreen="true" />
-                )
+                if(type === 'youtube') {
+                    sections.push(
+                        <YoutubePreview key={idx++} width={w} height={h} youTubeId={id}
+                            frameBorder="0" allowFullScreen="true" />
+                    )
+                } else if(type === 'vimeo') {
+                    const url = `https://player.vimeo.com/video/${id}`
+                    sections.push(
+                        <div className="videoWrapper">
+                            <iframe key={idx++} src={url} width={w} height={h} frameBorder="0"
+                                webkitallowfullscreen mozallowfullscreen allowFullScreen></iframe>
+                        </div>
+                    )
+                } else {
+                    console.error('MarkdownViewer unknown embed type', type);
+                }
+                section = section.substring(`${id} ${type} ~~~`.length)
+                if(section === '') continue
             }
-            if(section === '') continue
             sections.push(<div key={idx++} dangerouslySetInnerHTML={{__html: section}} />)
         }
 

shared/HtmlReady.js

@@ -166,6 +166,7 @@ function linkifyNode(child, state) {try{
     const {mutate} = state
     if(!child.data) return
     if(embedYouTubeNode(child, state.links, state.images)) return
+    if(embedVimeoNode(child, state.links, state.images)) return
 
     const data = XMLSerializer.serializeToString(child)
     const content = linkify(data, state.mutate, state.hashtags, state.usertags, state.images, state.links)
@@ -229,12 +230,33 @@ function embedYouTubeNode(child, links, images) {try{
     }
     if(!id) return false
 
-    const v = DOMParser.parseFromString(`~~~ youtube:${id} ~~~`)
+    const v = DOMParser.parseFromString(`~~~ embed:${id} youtube ~~~`)
     child.parentNode.replaceChild(v, child)
     if(links) links.add(url)
     if(images) images.add('https://img.youtube.com/vi/' + id + '/0.jpg')
     return true
+} catch(error) {console.log(error); return false}}
+
+function embedVimeoNode(child, links, /*images*/) {try{
+    if(!child.data) return false
+    const data = child.data
 
+    let id
+    {
+        const m = data.match(linksRe.vimeoId)
+        id = m && m.length >= 2 ? m[1] : null
+    }
+    if(!id) return false;
+
+    const url = `https://player.vimeo.com/video/${id}`
+    const v = DOMParser.parseFromString(`~~~ embed:${id} vimeo ~~~`)
+    child.parentNode.replaceChild(v, child)
+    if(links) links.add(url)
+
+    // Preview image requires a callback.. http://stackoverflow.com/questions/1361149/get-img-thumbnails-from-vimeo
+    // if(images) images.add('https://.../vi/' + id + '/0.jpg')
+
+    return true
 } catch(error) {console.log(error); return false}}
 
 function ipfsPrefix(url) {