TweetDeck Image Assistant

Download/Share Images Faster

目前為 2017-05-18 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         TweetDeck Image Assistant
// @namespace    http://ejew.in/
// @version      0.3
// @description  Download/Share Images Faster
// @author       EntranceJew
// @match        https://tweetdeck.twitter.com/*
// @require      https://cdn.rawgit.com/eligrey/FileSaver.js/5ed507ef8aa53d8ecfea96d96bc7214cd2476fd2/FileSaver.min.js
// @noframes
// @grant        none
// ==/UserScript==
/*
0.3 - gif support wasn't that hard
0.2 - removed debug prints, updated mimes, added video download link, instant-spice now grabs videos
0.1 - initial version
*/

(function() {
    'use strict';
    
    var wait_for_zoom_delay = 300;

    var tool_icon = '<li class="tweet-action-item pull-left margin-r--13 margin-l--1">';
    tool_icon += '<a class="js-show-tip tweet-action position-rel" href="#" rel="spice" title="" data-original-title="Spice It Up">';
    tool_icon += '<i class="icon icon-home icon-home-toggle txt-center"></i> <span class="is-vishidden"> Spice </span>';
    tool_icon += '</a> </li>';

    var mime_db = {
        jpeg: "image/jpeg",
        jpg: "image/jpeg",
        gif: "image/gif",
        webp: "image/webp",
        mp4: "video/mp4",
        m3u8: "application/x-mpegURL",
        undefined: "text/plain"
    };
    
    // http://stackoverflow.com/a/2091331
    function getQueryVariable(str, variable) {
        var query = str.substring(1);
        var vars = query.split('&');
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split('=');
            if (decodeURIComponent(pair[0]) == variable) {
                return decodeURIComponent(pair[1]);
            }
        }
        console.log('Query variable %s not found', variable);
    }

    function detect_mime(url){
        return mime_db[ /(?:\.([^.]+))?$/.exec(url)[1] ];
    }

    function get_img_data( url, on_load ) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.responseType = "blob";
        xhr.onload = on_load;
        xhr.send();
    }

    function download_now( url ){
        get_img_data( url, function( e ){
            var img_name = url.substring( url.lastIndexOf('/')+1 );
            var the_blob = new Blob([this.response], {type: detect_mime(url)});
            saveAs( the_blob, img_name.replace(/:orig$/, "") );
        });
    }

    function nice_url( url, replacement ){
        replacement = replacement || ":orig";
        var bg = url;
        bg = bg.replace('url(','').replace(')','').replace(/\"/gi, "");
        bg = bg.replace(/:thumb$/, "");
        bg = bg.replace(/:small$/, "");
        bg = bg.replace(/:medium$/, "");
        bg = bg.replace(/:large$/, "");
        return bg;
    }

    setInterval(function(){
        $('.stream-item:not([data-ejew])').each(function(){
            var grand_dad = $( this );

            /*
            // for appending to the dropdown menu if we wanted that
            var tool_bar = grand_dad.find('.js-dropdown-content > ul');
            tool_bar.prepend('<li class="is-selectable"><a href="#" data-action="ejew">Spice it up</a></li>');
            */

            // find all the images and store their links in data
            var images = [];
            grand_dad.find('.js-media-image-link, .js-media .media-image').each( function(i, el){
                images.push( nice_url( $( el ).css('background-image'), ":orig" ) );
            });
            grand_dad.data('ejew-imgs', images);

            // make an instance of the toolbar button
            var new_tool = $( tool_icon );
            new_tool.on('click', function(){
                if( grand_dad.find('.is-video').length ){
                    // video spotted
                    var anchor = grand_dad.find('.js-media-image-link');
                    anchor.attr('target', '');
                    anchor.attr('src', '#');
                    anchor.click();
                    setTimeout( function(){
                        $('.js-embeditem').each(function(){
                            var iframe_src = $( this ).find( 'iframe' ).attr('src');
                            var vid_url = getQueryVariable( iframe_src, 'video_url' );
                            download_now( vid_url );
                            $('.icon-close').click();
                        });
                    }, wait_for_zoom_delay);
                } else if( grand_dad.find('.is-gif').length ){
                    // gif spotted
                    download_now( grand_dad.find('video.js-media-gif').attr('src') );
                } else {
                    // images I guess
                    var imgs = grand_dad.data('ejew-imgs');
                    for( var i = 0; i < imgs.length; i++ ){
                        download_now( imgs[i] );
                    }
                }
            });
            // attach
            grand_dad.find('ul.tweet-actions > li:nth-last-child(2)').before( new_tool );

            // prevent loading up this element again
            grand_dad.attr('data-ejew', 'in');
        });

        // make it so that you can copy image source from previews
        $('img.media-img:not([data-ejew])').each(function(){
            $( this ).attr('src', nice_url( $( this ).attr('src') ) );
            $( this ).attr('data-ejew', 'in');
        });
        
        // provide a download source link in zoomable previews for videos
        $('.js-embeditem:not([data-ejew])').each(function(){
            var iframe_src = $( this ).find( 'iframe' ).attr('src');
            var vid_url = getQueryVariable( iframe_src, 'video_url' );
            var dl_link = $( '<a href="#">Download Source</a>' ); 
            dl_link.on('click', function(){
                download_now( vid_url );
            });
            $(".med-origlink").after( dl_link );
            $( this ).attr('data-ejew', 'in');
        });
    }, 300);
})();