Adds direct links to all image (.gif, .webp) and video (.mp4, .webm) formats and sizes on Gfycat.
目前为
// ==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()
})