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 0.8.7
// @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/*
// @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;
}
`)
}
/**
* Get GIF Name
* @return {String|void} - GIF Image URL
*/
let getGfyName = () => {
console.debug('getGfyName')
const gfyName = Object.values(unsafeWindow.___INITIAL_STATE__.cache.gifs)[0].gfyName
// Return
return gfyName
}
/**
* Add a buttons
* @param {Element} targetElement - Target Element
* @param {String} gfyName - GFY Name
*/
let addButtons = (targetElement, gfyName) => {
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="https://thumbs.gfycat.com/${gfyName}-size_restricted.gif" target="_blank" type="image/gif">GIF</a>
<a href="https://thumbs.gfycat.com/${gfyName}-small.gif" target="_blank" type="image/gif">GIF (small)</a>
<a href="https://thumbs.gfycat.com/${gfyName}-max-1mb.gif" target="_blank" type="image/gif">GIF (very small)</a>
<a href="https://thumbs.gfycat.com/${gfyName}.webp" target="_blank" type="image/webp">WEBP</a>
<a href="https://zippy.gfycat.com/${gfyName}.mp4" target="_blank" type="video/mp4">MP4</a>
<a href="https://thumbs.gfycat.com/${gfyName}-mobile.mp4" target="_blank" type="video/mp4">MP4 (small)</a>
<a href="https://zippy.gfycat.com/${gfyName}.webm" target="_blank" type="video/webm">WEBM</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 gfyName = getGfyName()
if (!gfyName) {
console.warning('Could not find GFY Name, aborting.')
return
}
// Set target container element
const element = document.querySelector('.share-desktop-container .gif-info')
// Add download buttons
addButtons(element, gfyName)
})
}
/**
* @listens window:Event#load
*/
window.addEventListener('load', () => {
console.debug('window#load')
init()
})