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

gfycat.show-all-download-links.js

// ==UserScript==
// @name            GFYCAT | Show all Download Links (GIF, MP4, WEBP, WEBM)
// @namespace       de.sidneys.userscripts
// @homepage        https://gist.githubusercontent.com/sidneys/1af7b31282fa5019b6213d48e3b47c88/raw/
// @version         2.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(`
        /* Container
           ======================================= */

        .gif-info__direct-download-links
        {
            display: block;
            animation: var(--animation-fade-in);
        }


        /* Header
           ======================================= */

        .gif-info__direct-download-links h4
        {
            margin: 1rem 0 0.5rem 0;
            font-weight: 700;
        }

        /* Data
           ======================================= */

        .gif-info__direct-download-links p,
        .gif-info__direct-download-links a
        {
            margin: 0;
        }

        .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;
        }


        /* Animations
           ======================================= */
        :root
        {
            --animation-fade-in: 'fade-in' 500ms ease-in-out 0s 1 normal forwards running;
        }

        @keyframes fade-in {
            from {
                filter: opacity(0);
            }
            to {
                filter: opacity(1);
            }
        }
    `)
}

/**
 * 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 Info
 * @return {Object} - GIF Info
 */
let getGifInfo = () => {
    console.debug('getGifInfo')

    // Get url of current GIF
    const canonicalHref = document.querySelector('link[rel="canonical"]').href

    // Parse id of current GIF, removing trailing tags
    const gifIdFull = canonicalHref.split(/[\\/]/).pop()
    const gifId = gifIdFull.split('-')[0]

    // Use GIF Id to lookup GIF Info
    const cachedGifsMap = new Map(Object.entries(unsafeWindow.___INITIAL_STATE__.cache.gifs))
    const gifInfo = cachedGifsMap.get(gifId)

    return gifInfo
}

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

    // Create link menu from gifInfo.content_urls property
    const containerElement = document.createElement('div')
    containerElement.className = 'gif-views gif-info__direct-download-links'
    containerElement.innerHTML = `
        <h4>GIF Name:</h4>
        <p>${gifInfo.gfyName}</p>
        <h4>GIF Download Links:</h4>
        <a href="${gifInfo.max5mbGif}" target="_blank" type="image/gif">GIF (${!!gifInfo.content_urls.largeGif ? bytesToSize(gifInfo.content_urls.largeGif.size) : 'large'})</a>
        <a href="${gifInfo.max2mbGif}" target="_blank" type="image/gif">GIF (${!!gifInfo.content_urls.max2mbGif ? bytesToSize(gifInfo.content_urls.max2mbGif.size) : '< 2M'})</a>
        <a href="${gifInfo.max1mbGif}" target="_blank" type="image/gif">GIF (${!!gifInfo.content_urls.max1mbGif ? bytesToSize(gifInfo.content_urls.max1mbGif.size) : '< 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.content_urls.mobile ? bytesToSize(gifInfo.content_urls.mobile.size) : 'mobile'})</a>
        <a href="${gifInfo.webpUrl}" target="_blank" type="image/webp">WEBP (${!!gifInfo.content_urls.webp ? bytesToSize(gifInfo.content_urls.webp.size) : ''})</a>
        <a href="${gifInfo.webmUrl}" target="_blank" type="video/webm">WEBM ${!!gifInfo.webmSize ? '(' + bytesToSize(gifInfo.webmSize) + ')' : ''}</a>
    `

    // Render link menu
    targetElement.insertBefore(containerElement, targetElement.firstChild.nextSibling)

    // DEBUG
    console.debug('buttons added:', `${document.querySelectorAll('.gif-info__direct-download-links a').length}`)

    // Callback
    callback()
}


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

    // Add Stylesheet
    injectStylesheet()

    // Wait for button container
    //onElementReady('.share-desktop-container .actual-gif-image', false, () => {
    onElementReady('link[rel="canonical"]', false, () => {
        console.debug('onElementReady', 'link[rel="canonical"]')

        // Lookup GIF info
        const gifInfo = getGifInfo()

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

        // Add buttons to container element
        addButtons(document.querySelector('.share-desktop-container .gif-info'), gifInfo, () => {
            // Status
            console.info('Added Download Links for GIF:', gifInfo.gfyName)
        })
    })
}

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

    init()
})