// ==UserScript==
// @name            GFYCAT | Show all Download Links (GIF, MP4, WEBP, WEBM)
// @namespace       de.sidneys.userscripts
// @homepage        https://gist.githubusercontent.com/sidneys/1af7b31282fa5019b6213d48e3b47c88/raw/
// @version         1.0.0
// @description     Adds direct links to all image (.gif, .webp) and video (.mp4, .webm) formats and sizes on Gfycat.
// @author          sidneys
// @icon            https://gfycat.com/assets/apple-touch-icon/apple-touch-icon-180x180.png
// @include         http*://*.gfycat.com/*
// @include         http*://gfycat.com/*
// @include         http*://redgifs.com/*
// @include         http*://*.redgifs.com/*
// @require         https://greasyfork.org/scripts/38888-greasemonkey-color-log/code/Greasemonkey%20%7C%20Color%20Log.js
// @require         https://greasyfork.org/scripts/374849-library-onelementready-es6/code/Library%20%7C%20onElementReady%20ES6.js
// @grant           GM.addStyle
// @grant           unsafeWindow
// @run-at          document-idle
// @downloadURL none
// ==/UserScript==

/**
 * ESLint
 * @global
 */
/* global onElementReady */
Debug = false


/**
 * Inject Stylesheet
 */
let injectStylesheet = () => {
    console.debug('injectStylesheet')

    GM.addStyle(`
        /* a
           ======================================= */

        .gif-info__direct-download-links
        {
            display: block;
        }

        .gif-info__direct-download-links a
        {
            display: inline;
            list-style: none;
            transition: all 150ms ease-in-out;
        }

        .gif-info__direct-download-links a:after
        {
            content: "\\A";
            white-space: pre;
        }

        .gif-info__direct-download-links a:hover
        {
            text-decoration: underline;
            color: white;
        }

        /* h4
           ======================================= */

        .gif-info__direct-download-links h4
        {
            margin: unset;
        }
    `)
}

/**
 * Convert filesize in bytes to human-readable format
 * @param {Number} bytes - Filesize in bytes
 * @return {String} - Filesize, human-readable
 */
let bytesToSize = (bytes = 0) => {
    console.debug('bytesToSize')

    const sizeList = ['B', 'K', 'M', 'G', 'T']
    const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)))

    return `${Math.round(bytes / Math.pow(1024, i), 2)}${sizeList[i]}`
}

/**
 * Get GIF Data
 * @return {Object} - GIF Info
 */
let getGifInfo = () => Object.values(unsafeWindow.___INITIAL_STATE__.cache.gifs)[0]

/**
 * Add buttons
 * @param {Element} targetElement - Target Element
 * @param {String} gifInfo - Info
 */
let addButtons = (targetElement, gifInfo) => {
    console.debug('addButtons')

    // Create Link
    const containerElement = document.createElement('div')
    containerElement.className = 'gif-views gif-info__direct-download-links'
    containerElement.innerHTML = `
        <h4 class="gif-created">Download Links</h4>
        <a href="${gifInfo.max5mbGif}" target="_blank" type="image/gif">GIF (${!!gifInfo.gifSize ? bytesToSize(gifInfo.gifSize) : 'large'})</a>
        <a href="${gifInfo.max2mbGif}" target="_blank" type="image/gif">GIF (< 2M)</a>
        <a href="${gifInfo.max1mbGif}" target="_blank" type="image/gif">GIF (< 1M)</a>
        <a href="${gifInfo.mp4Url}" target="_blank" type="video/mp4">MP4 (${!!gifInfo.mp4Size ? bytesToSize(gifInfo.mp4Size) : 'large'})</a>
        <a href="${gifInfo.mobileUrl}" target="_blank" type="video/mp4">MP4 (${!!gifInfo.mobileSize ? bytesToSize(gifInfo.mobileSize) : 'mobile'})</a>
        <a href="${gifInfo.webpUrl}" target="_blank" type="image/webp">WEBP ${!!gifInfo.webpSize ? '(' + bytesToSize(gifInfo.webpSize) + ')' : ''}</a>
        <a href="${gifInfo.webmUrl}" target="_blank" type="video/webm">WEBM ${!!gifInfo.webmSize ? '(' + bytesToSize(gifInfo.webmSize) + ')' : ''}</a>
    `

    targetElement.insertBefore(containerElement, targetElement.firstChild.nextSibling)
}


/**
 * Init
 */
let init = () => {
    console.info('init')

    // Add Stylesheet
    injectStylesheet()

    // Wait for button container
    onElementReady('.share-desktop-container .gif-info .title', false, () => {

        // Lookup info
        const gifInfo = getGifInfo()

        if (!gifInfo) {
            console.warning('Could not find GIF info, aborting.')
            return
        }

        // Set target container element
        const element = document.querySelector('.share-desktop-container .gif-info')

        // Add download buttons
        addButtons(element, gifInfo)
    })
}

/**
 * @listens window:Event#load
 */
window.addEventListener('load', () => {
    console.debug('window#load')

    init()
})