[Outdated] Plugin for BetterDiscord. Creates caret to hide image/video previews.

CollapsibleEmbeds.plugin.js

//META{"name":"CollapsibleEmbeds"}*//
/*
 Check for Updates: https://gist.github.com/shtrih/59a8be1f9ff53f0499c2
 How to install:
     1. If you don't have it, get Discord from https://discordapp.com/apps
     2. Download BetterDiscord for your platform on https://betterdiscord.net/home
     3. Push the button «Raw» then Ctrl + S.
     3. Place the plugin in %appdata%\BetterDiscord\plugins\.
     4. Refresh Discord with Ctrl + Shift + R or just restart Discord completely.
     5. Go to the BetterDiscord settings → plugins tab and check plugin.
 */
function CollapsibleEmbeds() {
    this.initiated = false;
    this.oDefaultSettings = {
        defaultCollapsed: false
    };
    this.oSettings = {};

    var that = this,
        oData,
        iDataTTL = 86400 * 7,
        tagCaret = '&nbsp;<a class="embed-toggle" href="#"><span class="Select-arrow"></span></a>',
        handlerCaretClick = function (e, isTriggered) {
            e.stopPropagation();
            var self = $(e.currentTarget),
                message = self.closest('.message'),
                accessory = $('.accessory', message),
                url = self.prev().attr('href'),
                state
            ;

            if (accessory.children('.attachment').length) {
                accessory.children('.embed, .embed-wrapper').toggleClass('CollapsibleEmbeds-hidden');
            }
            else {
                accessory.toggleClass('CollapsibleEmbeds-hidden');
            }
            self.toggleClass('embed-closed');

            if (!isTriggered && url) {
                state = (self.hasClass('embed-closed') ^ that.oSettings['defaultCollapsed'] ? Date.now() : false);
                that.setState(url, state);
            }
        },
        handlerEachLink = function () {
            var self = $(this),
                message = self.closest('.message'),
                accessory = $('.accessory', message)
            ;
            self.addClass('CollapsibleEmbeds-processed');

            // wait other plugins to create embeds
            setTimeout(function () {
                // In some cases here children <noscript> tag, so no need caret (example message: http://store.otaku.ru/catalog/product/48459.html)
                if (accessory.children(':not(noscript)').length) {
                    self.after(tagCaret)
                        .next('.embed-toggle').on('click', handlerCaretClick)
                    ;

                    loadState(self);
                }
            }, 300);
        },
        loadState = function ($link) {
            var url = $link.attr('href');

            if (!!(url && oData[url]) ^ that.oSettings['defaultCollapsed']) {
                $link.next('.embed-toggle').trigger('click', true /* isTriggered*/);
            }
        },
        tagStyles = '<style>\
            .CollapsibleEmbeds-hidden {\
                display: none !important\
            }\
            .message-group .comment .attachment a.CollapsibleEmbeds-processed,\
            .message-group .comment .attachment .embed-toggle{\
                display: inline-block;\
            }\
            .embed-toggle > .Select-arrow {\
                border-color: #0096cf transparent transparent;\
            }\
            .embed-closed > .Select-arrow {\
                border-width: 4px 0 5px 5px;\
                border-color: transparent #0096cf transparent;\
                margin-left: 2px;\
                padding-right: 4px;\
            }\
        </style>',
        cleanData = function () {
            var expireTime = Date.now() - iDataTTL;
            $.each(oData, function (key, value) {
                if (typeof(value) === 'number' && value < expireTime
                    // remove old v1.* values
                    || typeof(value) !== 'number'
                ) {
                    delete oData[key];
                }
            });
        },
        loadSettings = function () {
            that.oSettings = $.extend(
                that.oDefaultSettings,
                JSON.parse(localStorage.getItem('CollapsibleEmbeds-Settings')) || {}
            );
        },
        saveSettings = function () {
            localStorage.setItem('CollapsibleEmbeds-Settings', JSON.stringify(that.oSettings));
        }
    ;

    this.init = function () {
        $('head').append(tagStyles);

        loadSettings();
        oData = JSON.parse(localStorage.getItem('CollapsibleEmbeds-Data')) || {};
        cleanData();
    };

    this.destroy = function () {
        $('.embed-toggle').remove();
        $('.CollapsibleEmbeds-hidden').removeClass('CollapsibleEmbeds-hidden');
    };

    this.process = function ($links) {
        $links.each(handlerEachLink);
    };

    this.apply = function (){
        if (!this.initiated) {
            this.init();
            this.initiated = true;
        }

        var links = $('.message .markup a:not(.CollapsibleEmbeds-processed):not(.embed-toggle),' +
            '.message .attachment a:not(.CollapsibleEmbeds-processed):not(.embed-toggle)');

        this.process(links);

        // Dealing with attachment images
        var attachment_links = $('.message .attachment-image a:not(.CollapsibleEmbeds-processed):not(.embed-toggle)'),
            attachment_fake_link = $('<a/>', {
                target: '_blank'
            }),
            links_to_process = $()
        ;
        attachment_links.each(function () {
            var self = $(this),
                message = self.closest('.message'),
                link = attachment_fake_link
                    .clone()
                    .attr('href', self.attr('href'))
                    .text(self.attr('href').split('/').pop())
            ;

            self.addClass('CollapsibleEmbeds-processed');
            message.find('.markup').append(link);
            links_to_process = links_to_process.add(link);
        });
        this.process(links_to_process);
    };

    this.setState = function (key, value) {
        if (!value) {
            delete oData[key];
        }
        else {
            oData[key] = value;
        }
        localStorage.setItem('CollapsibleEmbeds-Data', JSON.stringify(oData));
    };

    this.setOption = function (key, value) {
        that.oSettings[key] = value;
        saveSettings();
    };
}
CollapsibleEmbeds.prototype.getName = function() {
    return "CollapsibleEmbeds";
};
CollapsibleEmbeds.prototype.getDescription = function() {
    return "Near each link adds a carriage, which allows you to hide image/video preview. It works with \"embed\" plugins.\n";
};
CollapsibleEmbeds.prototype.getVersion = function() {
    return "2.1.1";
};
CollapsibleEmbeds.prototype.getAuthor = function() {
    return "shtrih";
};
CollapsibleEmbeds.prototype.getSettingsPanel = function() {
    if (!this.oSettings)
        this.loadSettings();

    return '<label><input type="checkbox"'+ (this.oSettings['defaultCollapsed'] ? ' checked="checked" ' : '')
        +' onchange="BdApi.getPlugin(\'CollapsibleEmbeds\').setOption(\'defaultCollapsed\', $(this).is(\':checked\'))" /> Collapsed previews by default</label>'
        +'<p>ProTip: Settings will take effect when you switch the channel. No need to restart Discord.</p>';
};

CollapsibleEmbeds.prototype.load = function() {
    console.info("%c[BetterDiscord]" + " %c" + this.getName() + " v" + this.getVersion() + " by " + this.getAuthor() + " loaded.", "color: purple; font-weight: bold;", "");
};
CollapsibleEmbeds.prototype.unload = function() {
    this.destroy();
};
CollapsibleEmbeds.prototype.start = function() {
    this.apply();
};
CollapsibleEmbeds.prototype.stop = function() {
    this.destroy();
};
CollapsibleEmbeds.prototype.onMessage = function() {
    this.apply();
};
CollapsibleEmbeds.prototype.onSwitch = function() {
    this.apply();
};

An option to start with hiding the embeds would be nice.
(You'd then have to click the caret to show the embeds every time)

This adds spotify embeds to the plugin: https://gist.github.com/Bluscream/7e3b4c7b1138f5c73e1104f397b3fd9a/revisions

I'm thinking about pastebin and gist embeds too, what do you think?

@bluescream I think in this case it's best to make a separate plug-in for spotify, since this functionality is not very popular with the masses. Therefore, it is more logical not to force all people to use a monstrous plug-in with a bunch of sites, but to enable the inclusion of the necessary sites through several small plug-ins.

Super buggy, the option disappears straight after I change channel

Also, why isn't it in a repo? Then people could easily make issues and you could keep track easily

Also, with a rich embed, where you do something like [link](https://github.com) and you collapse it, it causes the message to disappear

This doesn't seem to work at all now. Can't find any other plugins like it. Any chance of an update?

Only seems to work when i go from Direct Messages (Where i see which of my friends are online), and then to a server. But it doesn't work after i change channel or server. Can anyone confirm if the same thing happens to them?

Updating/Using BandagedBD seems to fix it, and it works fine now.

Sadly doesn't seem to work anymore.
If someone picks this up that be nice. Could also add options to include Spotify, and such.

Whoops, didn't think that anyone was still using it 😖

Also, why isn't it in a repo?

Yeah, good question 🤔

Whoops, didn't think that anyone was still using it

Also, why isn't it in a repo?

Yeah, good question

I've been hoping this would miraculously get an update myself, by far one of my most important/favorite plugins. Any plans of updating this? Also, it should be in the main server's repo unless it's been taken off in the past week.

Any plans of updating this?

Yes. I'm on vacation in six weeks so I can update 📆.

That's great news, been a lot of situations where I wish I had this plugin working still. Thanks!

Any updates on progress?

Can you please update this to work with current version? I really want this feature and can't find it anywhere else.

Yes please!

It's been years m8. Either say your not gonna update it or just update it. No one likes devs who ghosts on projects where the dev doesn't even say if they aren't going to touch it or not. Either one is fine as long as there's some transparency here or even an attempt at communicating the state of things.

Life goes on, plans change. I haven't used betterdiscord plugins for a long time. And this plugin was made, first of all, for myself. So don't expect any updates.
There are many people in betterdiscord team with relevant knowledge who are developing plugins. I think you should contact them.