Custom discord

Enlarge discord emojis and loop videos

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

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

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name         Custom discord
// @namespace    http://tampermonkey.net/
// @version      0.1.1
// @description  Enlarge discord emojis and loop videos
// @author       Doni
// @match        https://discord.com/*
// @icon         https://i.imgur.com/rE9N0R7.png
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    registerCss("emojiEnlarger", `
        div:not([class^="repliedTextPreview"]) > div[id^="message-content"] img.emoji:not(.jumboable) {
            width: 2.5em;
            height: 2.5em;
        }
        div[id^="message-content"] img.emoji.jumboable {
            width: 6em;
            height: 6em;
        }
    `);

     registerCss("smallMode", `
        @media screen and (max-width: 720px) {
            div[class^="base-"] > div[class^="content-"] {
                position: relative;
                width: 100vmax;
                left: -241px;
            }
            div[class^="container-"] > nav[class^="wrapper-"] {
                visibility: hidden;
                display: none;
            }
            div[class^="content-"] > div[class^="sidebar-"] {
                visibility: hidden;
            }
            main[class^="chatContent-"] div[class^="buttons-"] > div:nth-child(1),
            main[class^="chatContent-"] div[class^="buttons-"] > div:nth-child(2),
            main[class^="chatContent-"] div[class^="buttons-"] > div:nth-child(3) {
                visibility: hidden;
            }
        }
    `);

    observeVideos(node => {
        if(node.tagName == "VIDEO") {
            node.loop = true;
        }
    });

    function registerCss(id, rules) {

        if(!id) return;

        let style = document.getElementById(id);

        if(!style) {
            style = document.createElement('style');
            style.id = id;
        }

        style.type = 'text/css';
        style.innerHTML = rules;
        document.getElementsByTagName('head')[0].appendChild(style);
    }

    function observeVideos(_callback) {
        const bodyObserver = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                mutation.addedNodes.forEach(addedNode => {
                    _callback(addedNode);
                    addedNode.querySelectorAll && addedNode.querySelectorAll("video").forEach(_callback);
                });
            });
        });

        bodyObserver.observe(document.body, {
            attributes: true,
            childList: true,
            subtree: true,
            characterData: true
        });
    }
})();