JSFiddle - React, Tailwind, and code Playground

by oroce

HTML

<script src="https://yahoo.github.io/gifshot/js/dependencies/gifshot.min.js"></script>
<label>Video ID:<input class="videoid" type="text" value="42015" /></label><br />
<label>Start:<input class="start" type="range" value="200" max=1376 min=0 />Value:<span class="start-value">200</span></label>
    <br />
<label>Duration:<input class="duration" type="range" value="5" max=15 min=1 />Value: <span class="duration-value">5</span></label>
    <br />
<button class="change">Change </button>
<p class="progress"></p>
<img class="animated-gif" />

CSS

video {
    display: none;
}

JavaScript

document.querySelector('.change').addEventListener('click', generate, false);
var startEl = document.querySelector('.start');
var durEl = document.querySelector('.duration');
startEl.addEventListener('change', change('.start-value'), false);
durEl.addEventListener('change', change('.duration-value'), false);
var imgEl = document.querySelector('.animated-gif');
var progressEl = document.querySelector('.progress');
var videoIdEl = document.querySelector('.videoid');
console.log('startEl', startEl)
function generate() {
    progressEl.innerText = 'gif is getting created, hold on...';
    var start = +startEl.value;
    var dur = +durEl.value;
    var end = Math.max(start + dur, 1376);
    var frames = dur * 10;
    var videoId = videoIdEl.value;
    console.log('start=%s, duration=%s, end=%s, frames=%s', start, dur, end, frames);

    gifshot.createGIF({
        gifWidth: 400,
        gifHeight: 225,
        numFrames: frames,
        'video': ['http://r8q5w2u7.ssl.hwcdn.net/' + videoId + '/' + videoId + '-sd.mp4?start=' + start + '&end=' + end]
    },function(obj) {
        progressEl.innerText = '';
        if(!obj.error) {
            var image = obj.image;
            imgEl.src = image;
            return
        }
        alert(obj.error);
    });
}
function change(sel) {
    var el = document.querySelector(sel);
    return function(e) {
        el.innerText = e.currentTarget.value;
    }
}

generate();