<|start_filename|>css/style.css<|end_filename|>

body{
    display: table;
    font-family: 'Lato', sans-serif;
}

.m-container{
    display: table-cell;
    position: absolute;
    vertical-align: middle;
    height:600px;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

.main-container{

    box-shadow: 0px 5px 20px #aaa;
    -moz-box-shadow: 0px 5px 20px #aaa;
    -webkit-box-shadow: 0px 5px 20px #aaa;
    -o-box-shadow: 0px 5px 20px #aaa;
    text-align: center;
    padding: 25px 45px 45px;
    height:480px;
    background: #ffffff;
}
.logo{
    height: 70px;
    width: 70px;
    margin-bottom: 5px;
}

.lead{
    padding: 0 28px;
    font-size: 18px;
}

.help{
    margin: -10px;
    padding: 0;
}

#help_{
    padding-left: 8px;
    padding-right: 8px;
}

.tweet-input{
    margin: 45px 0 35px;
}

.tweet-url{
    line-height: 40px;
}

.noti{
    margin-top: 12px;
}

.mobile-div, .plugin-div{
    margin-top: 20px;
    text-align: center;
}
.mobile-div a, .plugin-div a{
    text-decoration:none;
}

.mobile, .plugin{
    height: 50px;
    width: 50px;
    color: #8d8d8d;
    margin-bottom: 5px;
    border-radius: 25px;
}

.mobile-div p, .plugin-div p{
    font-size: 15px;
    color: #8d8d8d;
}

.plugin-div{
    margin-top: 27px;
}

.footer{
    margin: 0px auto 10px;
    font-size: 12px;
    text-align: center;
    color: #8d8d8d;
}

.footer span{
    font-size: 18px;
    color: #ec1da0;
}


@media only screen and (max-width: 768px) {
    .main-container{
        height: 500px;
    }

    .lead{
        padding: 0 5px;
        font-size: 16px;
    }
}

<|start_filename|>js/app.js<|end_filename|>
$(function () {

// Enable Tooltip
    $('[data-toggle="tooltip"]').tooltip();


    var fetched = false;
    var cb = new Codebird;
    cb.setConsumerKey("KEY", "SECRET");


    $(".download-form").submit(function (e) {

        e.preventDefault();
        startProcess()

    });

    function startProcess() {

        var tweet_url = $(".tweet-url").val();
        var s_url = tweet_url.split("/")[5];
        if ((tweet_url.indexOf("twitter.com") == -1) || s_url == undefined) {
            $(".tweet-input").addClass("has-warning");
            $("#noti-text").text("Enter a correct tweet url.");
            showNoti(true);
            showSpin(false);
        }
        else {
            $(".tweet-input").removeClass("has-warning");
            showSpin(true);
            showNoti(false);
            fetched = false;

            getVideoUrl(s_url);
        }
    }

    function getVideoUrl(s_url) {

        cb.__call(
            "statuses_show_ID",
            "id=" + s_url,
            null, // no callback needed, we have the promise
            true // app-only auth
        ).then(function (data) {
            console.log(data);
            var i = 0;
            var video_url;
            if (data.reply.extended_entities == null && data.reply.entities.media == null) {
                $("#noti-text").text("The tweet contains no video or gif file (or it is not accessible).");
                showNoti(true);
                showSpin(false);
                fetched = true;
            }
            else if ((data.reply.extended_entities.media[0].type) != "video" && (data.reply.extended_entities.media[0].type) != "animated_gif") {
                $("#noti-text").text("The tweet contains no video or gif file (or it is not accessible).");
                showNoti(true);
                showSpin(false);
                fetched = true;

            } else {

                video_url = data.reply.extended_entities.media[0].video_info.variants[i].url;

                while (!video_url.includes(".mp4")) {
                    video_url = data.reply.extended_entities.media[0].video_info.variants[i].url;
                    i = i + 1;
                }
                download(video_url);

            }
        }).catch(
            function (err) {
                $("#noti-text").text("Unable to fetch tweet, check your internet connection");
                showNoti(true);
                showSpin(false);
                console.log(err);
            });
    }


    function download(video_url) {

        $('<a/>', {
            "href": video_url,
            "download": "video.mp4",
            id: "videoDownloadLink"
        }).appendTo(document.body);
        $('#videoDownloadLink').get(0).click();
        $('#videoDownloadLink').remove();
        fetched = true;
        showSpin(false);
    }

    function showSpin(tf) {
        if (tf == true) {
            $(".spin").prop("hidden", false);
        } else {
            $(".spin").prop("hidden", true);
        }
    }

    function showNoti(tf) {
        if (tf == true) {
            setTimeout(function () {
                $(".noti").prop("hidden", false);
            }, 500);
        } else {
            $(".noti").prop("hidden", true);
        }
    }

});
