Generator

by yijiang

HTML

<div id="container">
    <h1>Video Link Generator</h1>
    
    <label for="url">Video URL</label>
    <input type="url" id="url" />
    
    <label for="title">Optional Title</label>
    <input type="text" id="title" />
    
    <p id="notice">Reticulating Splines...</p>
    
    <div id="help">
        <h3>Supported URL formats</h3>
        <ul>
            <li><h4>YouTube</h4>
                <ul>
                    <li>http://www.youtube.com/watch?v=[id]</li>
                    <li>http://youtu.be/[id]</li>
                </ul>
            </li>
            <li><h4>Vimeo</h4>
                <ul>
                    <li>http://vimeo.com/[id]</li>
                    <li>http://vimeo.com/channels/[name]#[id]</li>
                    <li>http://vimeo.com/groups/[name]/videos/[id]</li>
                </ul>
            </li>
        </ul>
    </div>
    
    <button id="submit">Go!</button>
    <a href="#" id="open_help">help</a>
    
    <pre id="result">
    </pre>
</div>

CSS

#container {
    width: 350px;
    margin: 10px auto;
    font-family: Arial, sans-serif;
}

h1 {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
}

label {
    color: #999;
    text-transform: uppercase;
    font-size: 10px;
    display: block;
}

input {
    padding: 2px 3px;
    margin: 2px 0 8px;
    font-size: 15px;
    width: 342px;
    display: block;
}

#notice {
    border: 1px solid #FED22F;
    color: #363636;
    background-color: #FFE45C;
    padding: 5px 10px 7px;
    margin: 10px 0;
    font-size: 11px;
    font-weight: bold;
    display: none;
}

#notice.warning {
    background: #B81900;
    border: 1px solid #CD0A0A;
    color: white;
}

#result {
    padding: 5px 10px 7px;
    background-color: #eee;
    margin: 10px 0;
    font-size: 11px;
    font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace;
    word-wrap: break-word;
    white-space: pre-wrap;
    display: none;
    line-height: 1.3em;
    
    -moz-user-select: all;
    -webkit-user-select: all;
    user-select: all;
}

#open_help {
    font-size: 11px;
    float: right;
    color: #999;
    padding: 1px 3px 2px;
}

#open_help:hover {
    text-decoration: none;
    background: #999;
    color: #fff;
}

#help {
    padding: 5px 10px 10px;
    font-size: 11px;
    background: #333;
    color: #fff;
    margin-bottom: 10px;
    display: none;
}

#help h3, #help h4 {
    font-weight: bold;
    margin-bottom: 2px;
}

#help h3 {
    font-size: 13px;
    margin-bottom: 5px;
}

#help ul ul {
    padding-left: 10px;
}

JavaScript

var notice = $('#notice');

$('#submit').click(function() {
    var url = $('#url').val().replace(/https?:\/\/(www.)?/, ''),
        title = $('#title').val().replace('"', '\"'),
        id;

    try {
        if (url.indexOf('youtube.com') > -1) {
            id = url.split('/')[1].split('v=')[1].split('&')[0];
            processYouTube(id, title);
        } else if (url.indexOf('youtu.be') > -1) {
            id = url.split('/')[1];
            processYouTube(id, title)
        } else if (url.indexOf('vimeo.com') > -1) {
            if (url.match(/^vimeo.com\/[0-9]+/)) {
                id = url.split('/')[1];
            } else if (url.match(/^vimeo.com\/channels\/[\d\w]+#[0-9]+/)) {
                id = url.split('#')[1];
            } else if (url.match(/vimeo.com\/groups\/[\d\w]+\/videos\/[0-9]+/)) {
                id = url.split('/')[4];
            } else {
                throw new Error('Unsupported Vimeo URL');
            }

            notice.slideUp(100).text('Reticulating Splines...').slideDown(100);

            $.ajax({
                url: 'http://vimeo.com/api/v2/video/' + id + '.json',
                dataType: 'jsonp',
                success: function(data) {
                    notice.slideUp(100);
                    generateMarkdown(data[0].thumbnail_large, data[0].url, title || 'Watch ' + data[0].title + ' by ' + data[0].user_name + ' on Vimeo]');
                }
            });
        } else {
            throw new Error('Unrecognised URL');
        }
    } catch (e) {
        if(console) console.log(e);
        
        notice.addClass('warning').text(e.message).slideDown(100);
        $('#url').one('focus', function() {
            $('#notice').slideUp(100, function(){
                $(this).removeClass('warning');
            });
        });
    }

    return false;
});

function processYouTube(id, title) {
    if (!id) {
        throw new Error('Unsupported YouTube URL');
    }

    generateMarkdown('http://i2.ytimg.com/vi/' +...