☰

GFYCAT | Show all Download Links (GIF, MP4, WEBP, WEBM)

Adds direct links to all image (.gif, .webp) and video (.mp4, .webm) formats and sizes on Gfycat.

Verze ze dne 06. 08. 2020. Zobrazit nejnovější verzi.

// ==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
// ==/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()
})