FiFo POC

by Paulo Ávila

HTML

<script id="template-new-src" type="text/template">
<div class="video-src">
    <img class="video-src-thumb" src="{thumb}" title="{title}">
    <input type="text" placeholder="from" name="from" size="5" value="0" /><br>
    <input type="text" placeholder="to" name="to" size="5" value="{duration}" /><br>
    <span class="video-src-remove" data-video-id="{id}">×</span>
</div>
</script>

<div id="video-player">
    <div id="yt-player"></div>
    <div id="video-player-controls">
        <button class="video-player-controls-play">play</button>
        <span class="video-player-controls-status"></span>
    </div>
</div>
    
<div id="video-srcs">
    <input id="video-src-input" placeholder="id,id,id">
    <button class="add-src">add</button>
    <hr>
</div>

<script src="http://www.youtube.com/iframe_api"></script>

CSS

#video-player { float: left; }
#yt-player { float: left; }
#video-srcs { position: relative; float: left; padding-left: 10px; }

.video-src { clear: both; }
.video-src-thumb { float: left; }
p { clear: both; }

JavaScript

// (65,80)
// (72,80)

var yt_player,
    videoSrcs = [],
    $videoSrcs = $('#video-srcs'),
    $videoSrcTemplate = $('#template-new-src').html();

//$('#video-src-input').on('input', function () {
$('.add-src').on('click', function () {
    var videoId = $('#video-src-input').val();

    $.ajax({
        url: 'https://gdata.youtube.com/feeds/api/videos/' + videoId + '?v=2&alt=json&callback=?',
        dataType: 'json',
        success: addVideoSrc
    });
});


function addVideoSrc(data) {
    var newVideo,
        $videoSrc;
    
    if (!data.entry) {
        return;
    }

    newVideo = {
        id: data.entry.media$group.yt$videoid.$t,
        title: data.entry.media$group.media$title.$t,
        thumb: 'http://img.youtube.com/vi/'+ data.entry.media$group.yt$videoid.$t + '/default.jpg',
        duration: data.entry.media$group.yt$duration.seconds,
        from: 0,
        to: data.entry.media$group.yt$duration.seconds
    }

    //console.log(data.entry.yt$accessControl);

    if (videoSrcs[getVidIndxById(newVideo.id)]) {
        return;
    }

    videoSrcs.push(newVideo);
    $videoSrc = $($videoSrcTemplate.supplant(newVideo));

    $('input', $videoSrc).on('blur', function () {
        var videoId = $(this).siblings('.video-src-remove').attr('data-video-id');

        if ($(this).attr('name') === 'from') {
            videoSrcs[getVidIndxById(videoId)].from = $(this).val();
        } else if ($(this).attr('name') === 'to') {
            videoSrcs[getVidIndxById(videoId)].to = $(this).val();
        }
    })

    $('.video-src-remove', $videoSrc).on('click', function () {
        var vidId = $(this).attr('data-video-id'),
            removedVidIndx = getVidIndxById($(this).attr('data-video-id')),
            removedVid = videoSrcs.splice(removedVidIndx, 1);

        $(this).parent().remove();
        console.log(removedVid);
    })

    $videoSrcs.append($videoSrc);
    console.log('vids=' +...