JSFiddle - React, Tailwind, and code Playground

by babich_ss

JavaScript

(function(){
    "use strict";
    var videoPopup,
        handlerBlock = document.createElement("div"),
        timeOutput = document.createElement("output"),
        timeOutputShift,
        path = "content/video/moa_movies/",
        files = [
            "2_1_1_Gilenya_MoA_short.mp4",
            "2_1_2_stimulating_generating.mp4",
            "2_1_3_Receptors.mp4",
            "2_1_4_Inflammation.mp4",
            "2_1_5_Damage_Atrophy.mp4",
            "2_1_6_Gilenya.mp4",
            "2_1_7_Neural_cells.mp4"
        ],
        viewWidth = 1024,
        viewHeight = 768;
    handlerBlock.className = "video-handler";
    timeOutput.className = "time-output";
    
    function parseTime(duration){
        var seconds,
            minutes;
        minutes = parseInt(duration / 60, 10);
        if(minutes < 10){
            minutes = "0" + minutes;
        }
        seconds = parseInt(duration - minutes * 60, 10);
        if(seconds < 10){
            seconds = "0" + seconds;
        }
        return "00" + ":" + minutes + ":" + seconds;
    }
    function createMoaVideos(index){
        var video = document.createElement("video");
        videoPopup.innerHTML = "";
        video.width = viewWidth;
        video.height = viewHeight;
        video.controls = false;
        video.src = path + files[index];
        videoPopup.appendChild(video);
        videoPopup.video = video;
        video.addEventListener("loadeddata", function(){
            this.finalDuration = parseTime(this.duration);
        });
    }
    function videoEvents(event){
        var currentX, currentY, position;
        switch(event.type){
            case touchy.events.start:
                videoPopup.isRewind = false;
                break;
            case touchy.events.move:
                outputShift = 
                if(touchy.isTouch){
                    currentX = event.touches[0].pageX;
                    currentY = event.touches[0].pageY;
                }else{
                ...