FFZ Panel Resize 1.2.26

Расширение и перемещение панели эмодзи FFZ

Versão de: 20/05/2025. Veja: a última versão.

Você precisará instalar uma extensão como Tampermonkey, Greasemonkey ou Violentmonkey para instalar este script.

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

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Userscripts para instalar este script.

Você precisará instalar uma extensão como o Tampermonkey para instalar este script.

Você precisará instalar um gerenciador de scripts de usuário para instalar este script.

(Eu já tenho um gerenciador de scripts de usuário, me deixe instalá-lo!)

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

(Eu já possuo um gerenciador de estilos de usuário, me deixar fazer a instalação!)

// ==UserScript==
// @name         FFZ   Panel Resize 1.2.26
// @namespace    http://tampermonkey.net/
// @version      1.2.26
// @description  Расширение и перемещение панели эмодзи FFZ
// @author       gullampis810
// @match        https://www.twitch.tv/*
// @license      MIT
// @icon         https://png.pngtree.com/png-vector/20220703/ourmid/pngtree-send-dark-mode-glyph-icon-png-image_5561369.png
// @grant        GM_addStyle
// ==/UserScript==



(function() {
    'use strict';
  //  кнопка Chat Paused Due to Scroll   //
        const observer = new MutationObserver(() => {
    const buttonContainer = document.querySelector('.tw-absolute.tw-border-radius-medium.tw-bottom-0.tw-c-background-overlay.tw-c-text-overlay.tw-mg-b-1');
    if (buttonContainer) {
        buttonContainer.style.height = '34px';
        buttonContainer.style.minHeight = '34px';
        buttonContainer.style.maxHeight = '34px';
        console.log('Высота контейнера кнопки установлена на 34px');
    }
});

observer.observe(document.body, { childList: true, subtree: true });



        // Добавляем стили для изменения размеров контейнера эмодзи
    GM_addStyle(`

     .emote-picker__controls-container.tw-relative {
         bottom: 3px !important;
     }

        .emote-picker {
               width: 107rem !important; /* Увеличенная ширина */
              height: 100rem !important; /* Увеличенная высота */
              left: 24px !important;;               /* Сдвиг влево */
              position: relative !important;

        }

         .ffz--emote-picker {
          position: relative !important;
         height: 785px !important;
         width: 1097px !important;
         left: -243px !important;
        }


         .ffz--emote-picker.ffz--emote-picker__tall .emote-picker__nav-content-overflow, .ffz--emote-picker.ffz--emote-picker__tall .emote-picker__tab-content {
         height: unset !important;
         max-height: 73rem !important;
}

         .tw-absolute.ffz-attached.ffz-attached--right.ffz-attached--up {
           width: 857px !important;
    right: 368px !important;
    bottom: 533px !important;
    }


/* fix ballon when clicked ffz emote picke in chat input */
.ffz-balloon.ffz-balloon--auto.tw-inline-block.tw-border-radius-large.tw-c-background-base.tw-c-text-inherit.tw-elevation-2.ffz--emote-picker.ffz--emote-picker__tall {
    top: 290px !important;
}

       .ffz-attached--up {
           bottom: 510% !important;
       }


       .tw-border-b.tw-border-l.tw-border-r.tw-border-t.tw-border-radius-medium.tw-c-background-base.tw-elevation-1 {
           width: 63px; !important;
           height: 216px; !important;
       }

        .tw-absolute {
            position: absolute !important;
            height: 570px !important;
        }

.tw-border-b.tw-border-l.tw-border-r.tw-border-t.tw-border-radius-medium.tw-c-background-base.tw-elevation-1 {
    width: 60px !important;
    height: 200px !important;
    bottom: 6px !important;
    position: absolute !important;
    right: 5px !important;
}      /* emoji standard color choice mini panel */


    `);

    console.log("[FFZ Emote Panel] Контейнер .emote-picker изменен: шире, выше, сдвинут влево.");

})();





// ============== FFZ Dialog Unconstrained Dragging свободное перемещение Панели ffz Settings main-menu vue js css ============ //


(function() {
    'use strict';

    console.log('[FFZ Dialog Unconstrained Dragging v1.2] Script started');

    // Функция для инициализации перетаскивания
    function initDragging(dialog) {
        if (!dialog) {
            console.log('[FFZ Dialog Unconstrained Dragging] Dialog not found');
            return;
        }

        const header = dialog.querySelector('header');
        if (!header) {
            console.log('[FFZ Dialog Unconstrained Dragging] Header not found');
            return;
        }

        // Проверяем, не инициализировано ли уже
        if (dialog.dataset.draggingInitialized) {
            console.log('[FFZ Dialog Unconstrained Dragging] Dragging already initialized, skipping');
            return;
        }
        dialog.dataset.draggingInitialized = 'true';

        console.log('[FFZ Dialog Unconstrained Dragging] Initializing dragging for dialog');

        // Переменные для перетаскивания
        let isDragging = false;
        let startX, startY;

        // Обработчик начала перетаскивания
        header.addEventListener('mousedown', (e) => {
            // Игнорируем клики по кнопкам
            if (e.target.closest('button')) {
                console.log('[FFZ Dialog Unconstrained Dragging] Ignoring button click');
                return;
            }

            isDragging = true;
            startX = e.clientX - (parseFloat(dialog.style.left) || dialog.offsetLeft);
            startY = e.clientY - (parseFloat(dialog.style.top) || dialog.offsetTop);

            // Повышаем z-index
            dialog.style.zIndex = Math.max(parseInt(dialog.style.zIndex) || 9000, 9000) + 1;

            console.log('[FFZ Dialog Unconstrained Dragging] Drag started at', e.clientX, e.clientY);
            e.preventDefault();
            e.stopPropagation(); // Останавливаем оригинальные обработчики
        }, { capture: true, passive: false });

        // Обработчик движения мыши
        document.addEventListener('mousemove', (e) => {
            if (!isDragging) return;

            requestAnimationFrame(() => {
                const newLeft = e.clientX - startX;
                const newTop = e.clientY - startY;

                dialog.style.left = `${newLeft}px`;
                dialog.style.top = `${newTop}px`;

                console.log('[FFZ Dialog Unconstrained Dragging] Moved to', newLeft, newTop);
            });
        }, { capture: true, passive: true });

        // Обработчик окончания перетаскивания
        document.addEventListener('mouseup', () => {
            if (isDragging) {
                console.log('[FFZ Dialog Unconstrained Dragging] Drag ended');
                isDragging = false;
            }
        }, { capture: true, passive: true });

        // Поддержка сенсорных устройств
        header.addEventListener('touchstart', (e) => {
            if (e.target.closest('button')) {
                console.log('[FFZ Dialog Unconstrained Dragging] Ignoring button touch');
                return;
            }

            isDragging = true;
            const touch = e.touches[0];
            startX = touch.clientX - (parseFloat(dialog.style.left) || dialog.offsetLeft);
            startY = touch.clientY - (parseFloat(dialog.style.top) || dialog.offsetTop);

            dialog.style.zIndex = Math.max(parseInt(dialog.style.zIndex) || 9000, 9000) + 1;

            console.log('[FFZ Dialog Unconstrained Dragging] Touch drag started at', touch.clientX, touch.clientY);
            e.preventDefault();
            e.stopPropagation();
        }, { capture: true, passive: false });

        document.addEventListener('touchmove', (e) => {
            if (!isDragging) return;

            const touch = e.touches[0];
            requestAnimationFrame(() => {
                const newLeft = touch.clientX - startX;
                const newTop = touch.clientY - startY;

                dialog.style.left = `${newLeft}px`;
                dialog.style.top = `${newTop}px`;

                console.log('[FFZ Dialog Unconstrained Dragging] Touch moved to', newLeft, newTop);
            });
        }, { capture: true, passive: true });

        document.addEventListener('touchend', () => {
            if (isDragging) {
                console.log('[FFZ Dialog Unconstrained Dragging] Touch drag ended');
                isDragging = false;
            }
        }, { capture: true, passive: true });

        // Добавляем кнопку для сброса позиции
        const resetButton = document.createElement('button');
        resetButton.textContent = 'Reset Position';
        resetButton.style.position = 'absolute';
        resetButton.style.top = '625px';
        resetButton.style.right = ' 5px';
        resetButton.style.zIndex = '10000';
        resetButton.style.padding = '5px';
        resetButton.style.background = '#34767c';
        resetButton.style.borderRadius = '12px';
        resetButton.style.border = '1px solid #ffffff';
        resetButton.addEventListener('click', () => {
            dialog.style.left = '25%';
            dialog.style.top = '25%';
            console.log('[FFZ Dialog Unconstrained Dragging] Position reset to 25%, 25%');
        });
        dialog.appendChild(resetButton);

        console.log('[FFZ Dialog Unconstrained Dragging] Dragging initialized successfully');
    }

    // Наблюдатель за появлением диалога
    const observer = new MutationObserver((mutations) => {
        for (const mutation of mutations) {
            if (mutation.addedNodes.length) {
                const dialog = document.querySelector('.ffz-dialog.ffz-main-menu:not([data-dragging-initialized])');
                if (dialog) {
                    console.log('[FFZ Dialog Unconstrained Dragging] Dialog detected via observer');
                    initDragging(dialog);
                }
            }
        }
    });

    // Запускаем наблюдатель
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    // Проверяем, если диалог уже существует
    const initialDialog = document.querySelector('.ffz-dialog.ffz-main-menu:not([data-dragging-initialized])');
    if (initialDialog) {
        console.log('[FFZ Dialog Unconstrained Dragging] Initial dialog found');
        initDragging(initialDialog);
    }

    console.log('[FFZ Dialog Unconstrained Dragging] Setup complete');
})();