Creating a Youtube Widget

Creating a Youtube Widget.carbide.md

Creating a Youtube Widget

This Gist was automatically created by Carbide, a free online programming environment.

You can view a live, interactive version of this Gist here.

cell0.js

import React from 'react'

function ytId(url){
	var matchYt = /^(http(s)?:\/\/)?((w){3}\.)?youtu(be\.com\/watch\?v=|\.be\/)(\w+)$/
	var parts = matchYt.exec(url)
	return parts && parts[parts.length-1]
}

class YoutubeWidget extends React.Component {
    static title = "Youtube";
    static match(value, ast){
        return value 
            && typeof value == 'string'
            && ytId(value)
    }
    render(){ 
    	return <div><b>Hello!</b><iframe style={{border: 0}} src={"https://www.youtube.com/embed/"+ytId(this.props.value)} /></div>
    }
}

export function __unload(){ ///This cleans everything up so we can run this cell multiple times.
	var index = doc.kernel.widgets.indexOf(YoutubeWidget)
    doc.kernel.splice(index, 1)
}

doc.kernel.widgets.unshift(YoutubeWidget)

cell1.js

'https://www.youtube.com/watch?v=c1ZlqXyj_FI'