☰

Soop(숲) 채팅 확장 스크립트

채팅창 편의기능 추가

  1. // ==UserScript==
  2. // @name         Soop(숲) 채팅 확장 스크립트
  3. // @namespace    https://gf.qytechs.cn/scripts/512780
  4. // @icon         https://res.sooplive.co.kr/afreeca.ico
  5. // @version      1.2.6
  6. // @description  채팅창 편의기능 추가
  7. // @match        https://play.sooplive.co.kr/*
  8. // @match        https://vod.sooplive.co.kr/*
  9. // @license      MIT
  10. // @author       ekzmchoco
  11. // @grant        none
  12. // ==/UserScript==
  13. // Referenced Code: https://gf.qytechs.cn/scripts/512724
  14.  
  15. (function() {
  16.     'use strict';
  17.  
  18.     const DEFAULT_SETTINGS = {
  19.         chatWidthAdjustment: true,
  20.         customEmoticonBox: true,
  21.         allowPasteInChat: true,
  22.         emoticonButtonReposition: true,
  23.         emoticonButtonColor: false,
  24.         emoticonWindowPositionChange: true,
  25.         autoSendAfterEmoticons: false
  26.     };
  27.  
  28.     const userSettings = JSON.parse(localStorage.getItem('soopChatSettings')) || DEFAULT_SETTINGS;
  29.  
  30.     function saveSettings() {
  31.         localStorage.setItem('soopChatSettings', JSON.stringify(userSettings));
  32.     }
  33.  
  34.     function initSettingsUI() {
  35.         const chattingArea = document.querySelector("#chatting_area");
  36.         if (!chattingArea) return;
  37.  
  38.         const personSettingEl = chattingArea.querySelector(".chat_layer.sub.person .contents > ul");
  39.         if (!personSettingEl) return;
  40.  
  41.         if (document.getElementById('script-settings')) return;
  42.  
  43.         const settingsLI = document.createElement("li");
  44.         settingsLI.id = 'script-settings';
  45.  
  46.         const settingsOptions = [
  47.             { key: 'chatWidthAdjustment', label: '채팅 너비 조절 기능' },
  48.             { key: 'customEmoticonBox', label: '커스텀 이모티콘 박스*' },
  49.             { key: 'allowPasteInChat', label: '채팅 붙여넣기 허용*' },
  50.             { key: 'emoticonButtonReposition', label: '이모티콘 버튼 위치 변경*' },
  51.             { key: 'emoticonButtonColor', label: '이모티콘 버튼 색상 (밝게/어둡게)*' },
  52.             { key: 'emoticonWindowPositionChange', label: '이모티콘 창 위치 변경*' },
  53.             { key: 'autoSendAfterEmoticons', label: '이모티콘 입력 후 자동 전송' }
  54.         ];
  55.  
  56.         settingsOptions.forEach(option => {
  57.             const div = document.createElement("div");
  58.             div.classList.add("checkbox_wrap");
  59.  
  60.             const checkbox = document.createElement("input");
  61.             checkbox.type = "checkbox";
  62.             checkbox.id = option.key;
  63.             checkbox.checked = userSettings[option.key];
  64.  
  65.             const label = document.createElement("label");
  66.             label.htmlFor = option.key;
  67.             label.textContent = option.label;
  68.  
  69.             checkbox.addEventListener("change", () => {
  70.                 userSettings[option.key] = checkbox.checked;
  71.                 saveSettings();
  72.                 applySettings(option.key);
  73.  
  74.                 if (option.label.includes('*')) {
  75.                     alert('이 설정은 페이지를 새로고침해야 적용됩니다.');
  76.                 }
  77.             });
  78.  
  79.             div.appendChild(checkbox);
  80.             div.appendChild(label);
  81.             settingsLI.appendChild(div);
  82.         });
  83.  
  84.         personSettingEl.appendChild(settingsLI);
  85.     }
  86.  
  87.     function applySettings(optionKey) {
  88.         switch(optionKey) {
  89.             case 'chatWidthAdjustment':
  90.                 if (userSettings.chatWidthAdjustment) {
  91.                     initChatWidthAdjustment();
  92.                 } else {
  93.                     removeChatWidthAdjustment();
  94.                 }
  95.                 break;
  96.             case 'customEmoticonBox':
  97.                 if (userSettings.customEmoticonBox) {
  98.                     initCustomEmoticonBox();
  99.                 } else {
  100.                     removeCustomEmoticonBox();
  101.                 }
  102.                 break;
  103.             case 'allowPasteInChat':
  104.                 if (userSettings.allowPasteInChat) {
  105.                     enablePasteInChat();
  106.                 } else {
  107.                     alert('이 설정은 페이지를 새로고침해야 적용됩니다.');
  108.                 }
  109.                 break;
  110.             case 'emoticonButtonColor':
  111.                 if (userSettings.emoticonButtonReposition) {
  112.                     alert('이 설정은 페이지를 새로고침해야 적용됩니다.');
  113.                 }
  114.                 break;
  115.             case 'autoSendAfterEmoticons':
  116.             case 'emoticonButtonReposition':
  117.             case 'emoticonWindowPositionChange':
  118.                 break;
  119.             default:
  120.                 break;
  121.         }
  122.     }
  123.  
  124.     function init() {
  125.         initSettingsUI();
  126.  
  127.         if (userSettings.allowPasteInChat) {
  128.             enablePasteInChat();
  129.         }
  130.  
  131.         if (userSettings.chatWidthAdjustment) {
  132.             initChatWidthAdjustment();
  133.         }
  134.  
  135.         if (userSettings.customEmoticonBox) {
  136.             initCustomEmoticonBox();
  137.         }
  138.  
  139.         if (userSettings.emoticonButtonReposition || userSettings.emoticonWindowPositionChange) {
  140.             initEmoticonRelatedFeatures();
  141.         }
  142.     }
  143.  
  144.     function initChatWidthAdjustment() {
  145.         const chattingArea = document.querySelector("#chatting_area");
  146.         if (!chattingArea) return;
  147.  
  148.         const chatTitleDiv = chattingArea.querySelector(".chat_title");
  149.         if (!chatTitleDiv) return;
  150.  
  151.         if (document.getElementById('chatWidthSlider')) return;
  152.  
  153.         let ul = chatTitleDiv.querySelector("ul");
  154.         if (!ul) {
  155.             ul = document.createElement("ul");
  156.             chatTitleDiv.appendChild(ul);
  157.         }
  158.  
  159.         let insertBeforeElement = ul.querySelector("#setbox_viewer") || ul.querySelector("#setbox_set");
  160.         if (!insertBeforeElement) {
  161.             insertBeforeElement = ul.querySelector("li.set");
  162.         }
  163.         if (!insertBeforeElement) {
  164.             insertBeforeElement = ul.firstChild;
  165.         }
  166.  
  167.         const sliderLi = document.createElement("li");
  168.         sliderLi.style.padding = "0 10px";
  169.         sliderLi.style.display = "flex";
  170.         sliderLi.style.alignItems = "center";
  171.  
  172.         const rangeInput = document.createElement("input");
  173.         rangeInput.type = "range";
  174.         rangeInput.min = 300;
  175.         rangeInput.max = 450;
  176.         rangeInput.step = 5;
  177.         rangeInput.value = localStorage.getItem("customChattingAreaWidth")
  178.           ? localStorage.getItem("customChattingAreaWidth")
  179.           : 380;
  180.         rangeInput.style.width = "80px";
  181.         rangeInput.style.marginRight = "1px";
  182.         rangeInput.id = 'chatWidthSlider';
  183.  
  184.         const rangeLabel = document.createElement("span");
  185.         rangeLabel.style.color = "#fff";
  186.         rangeLabel.style.fontSize = "12px";
  187.  
  188.         rangeInput.addEventListener("input", () => {
  189.             changeChatAreaWidth(rangeInput.value);
  190.             localStorage.setItem("customChattingAreaWidth", rangeInput.value);
  191.         });
  192.  
  193.         sliderLi.appendChild(rangeInput);
  194.         sliderLi.appendChild(rangeLabel);
  195.  
  196.         if (insertBeforeElement && insertBeforeElement.nextSibling) {
  197.             ul.insertBefore(sliderLi, insertBeforeElement.nextSibling);
  198.         } else {
  199.             ul.appendChild(sliderLi);
  200.         }
  201.  
  202.         const chatStyleEl = document.createElement("style");
  203.         chatStyleEl.id = 'custom-chat-width-style';
  204.         document.head.append(chatStyleEl);
  205.  
  206.         function changeChatAreaWidth(width) {
  207.             chatStyleEl.textContent = `
  208.                 #webplayer.chat_open {
  209.                     --chatting_W: ${width}px;
  210.                 }
  211.                 #webplayer.chat_open .chatting_area {
  212.                     width: var(--chatting_W);
  213.                 }
  214.  
  215.                 .vod #chatting_area {
  216.                     --chatting_W: ${width}px;
  217.                     width: var(--chatting_W);
  218.                     position: fixed;
  219.                     right: 0;
  220.                     left: auto;
  221.                 }
  222.             `;
  223.         }
  224.  
  225.         const storedWidth = localStorage.getItem("customChattingAreaWidth") || 380;
  226.         changeChatAreaWidth(storedWidth);
  227.         rangeInput.value = storedWidth;
  228.     }
  229.  
  230.     function removeChatWidthAdjustment() {
  231.         const chatWidthSlider = document.getElementById('chatWidthSlider');
  232.         if (chatWidthSlider) {
  233.             chatWidthSlider.parentElement.remove();
  234.         }
  235.         const chatStyleEl = document.getElementById('custom-chat-width-style');
  236.         if (chatStyleEl) {
  237.             chatStyleEl.remove();
  238.         }
  239.  
  240.         const chattingArea = document.querySelector("#chatting_area");
  241.         if (chattingArea) {
  242.             chattingArea.style.width = '';
  243.             chattingArea.style.position = '';
  244.             chattingArea.style.right = '';
  245.             chattingArea.style.left = '';
  246.         }
  247.     }
  248.  
  249.     function initCustomEmoticonBox() {
  250.         const chattingArea = document.querySelector("#chatting_area");
  251.         const actionBox = chattingArea.querySelector("#actionbox");
  252.         if (!actionBox) return;
  253.  
  254.         if (document.querySelector(".customEmojiBtn")) return;
  255.  
  256.         const emoticonBox = document.querySelector("#emoticonBox");
  257.         if (!emoticonBox) return;
  258.  
  259.         const recentEmoticonBtn = emoticonBox.querySelector(
  260.             ".tab_area .item_list ul > li[data-type='RECENT'] .ic_clock"
  261.         );
  262.         const subTabArea = emoticonBox.querySelector(".subTab_area");
  263.         const defaultSubTab = subTabArea.querySelector("li[data-type='DEFAULT']");
  264.         const OGQSubTab = subTabArea.querySelector("li[data-type='OGQ']");
  265.  
  266.         if (!recentEmoticonBtn || !defaultSubTab || !OGQSubTab) return;
  267.  
  268.         function defaultEmoticonClick() {
  269.             recentEmoticonBtn.click();
  270.             setTimeout(() => {
  271.                 defaultSubTab.click();
  272.             }, 100);
  273.         }
  274.         function OGQEmoticonClick() {
  275.             recentEmoticonBtn.click();
  276.             setTimeout(() => {
  277.                 OGQSubTab.click();
  278.             }, 100);
  279.         }
  280.  
  281.         const chattingItemWrap = chattingArea.querySelector(".chatting-item-wrap");
  282.         const chatArea = chattingItemWrap.querySelector("#chat_area");
  283.         const customEmojiBox = document.createElement("div");
  284.         customEmojiBox.classList.add("customEmojiBox");
  285.         let isLoading = false;
  286.  
  287.         const sliderContainer = document.createElement('div');
  288.         sliderContainer.classList.add('slider-container');
  289.         sliderContainer.style.display = 'none';
  290.  
  291.         const sliderWrapper = document.createElement('div');
  292.         sliderWrapper.classList.add('slider-wrapper');
  293.  
  294.         const sliderTrack = document.createElement('div');
  295.         sliderTrack.classList.add('slider-track');
  296.  
  297.         const sliderRange = document.createElement('div');
  298.         sliderRange.classList.add('slider-range');
  299.  
  300.         const minSlider = document.createElement('input');
  301.         minSlider.type = 'range';
  302.         minSlider.min = '1';
  303.         minSlider.max = '10';
  304.         minSlider.value = parseInt(localStorage.getItem('minSliderValue')) || 3;
  305.         minSlider.classList.add('slider');
  306.         minSlider.id = 'slider-min';
  307.  
  308.         const maxSlider = document.createElement('input');
  309.         maxSlider.type = 'range';
  310.         maxSlider.min = '1';
  311.         maxSlider.max = '10';
  312.         maxSlider.value = parseInt(localStorage.getItem('maxSliderValue')) || 5;
  313.         maxSlider.classList.add('slider');
  314.         maxSlider.id = 'slider-max';
  315.  
  316.         const rangeDisplay = document.createElement('div');
  317.         rangeDisplay.classList.add('range-display');
  318.         rangeDisplay.textContent = `${minSlider.value}-${maxSlider.value}`;
  319.  
  320.         sliderWrapper.appendChild(sliderTrack);
  321.         sliderWrapper.appendChild(sliderRange);
  322.         sliderWrapper.appendChild(minSlider);
  323.         sliderWrapper.appendChild(maxSlider);
  324.  
  325.         sliderContainer.appendChild(sliderWrapper);
  326.         sliderContainer.appendChild(rangeDisplay);
  327.  
  328.         function updateRange() {
  329.             const min = parseInt(minSlider.value);
  330.             const max = parseInt(maxSlider.value);
  331.  
  332.             if (min > max) {
  333.                 if (this === minSlider) {
  334.                     maxSlider.value = min;
  335.                 } else {
  336.                     minSlider.value = max;
  337.                 }
  338.             }
  339.  
  340.             const minVal = parseInt(minSlider.value);
  341.             const maxVal = parseInt(maxSlider.value);
  342.  
  343.             const leftPercent = ((minVal - 1) / 9) * 100;
  344.             const rightPercent = ((maxVal - 1) / 9) * 100;
  345.             sliderRange.style.left = leftPercent + '%';
  346.             sliderRange.style.right = (100 - rightPercent) + '%';
  347.  
  348.             rangeDisplay.textContent = `${minVal}-${maxVal}`;
  349.  
  350.             localStorage.setItem('minSliderValue', minVal);
  351.             localStorage.setItem('maxSliderValue', maxVal);
  352.         }
  353.  
  354.         minSlider.addEventListener('input', updateRange);
  355.         maxSlider.addEventListener('input', updateRange);
  356.  
  357.         updateRange();
  358.  
  359.         function renderEmoticon(type = "default") {
  360.             if (isLoading) return;
  361.             isLoading = true;
  362.  
  363.             type === "default" ? defaultEmoticonClick() : OGQEmoticonClick();
  364.  
  365.             setTimeout(() => {
  366.                 proceedWithRender(type);
  367.                 isLoading = false;
  368.             }, 500);
  369.         }
  370.  
  371.         function proceedWithRender(type) {
  372.             const diffType = type === "default" ? "OGQ" : "default";
  373.             const isOn = customEmojiBox.classList.contains(type);
  374.             const isDiffOn = customEmojiBox.classList.contains(diffType);
  375.  
  376.             if (isOn) {
  377.                 customEmojiBox.classList.remove(type);
  378.                 customEmojiBox.innerHTML = "";
  379.                 customEmojiBox.style.display = "none";
  380.                 chatArea.style.bottom = "0";
  381.                 sliderContainer.style.display = "none";
  382.                 return;
  383.             }
  384.  
  385.             if (isDiffOn) {
  386.                 customEmojiBox.classList.remove(diffType);
  387.                 customEmojiBox.innerHTML = "";
  388.             }
  389.  
  390.             const emoticonItemBox = emoticonBox.querySelector(".emoticon_item");
  391.             if (!emoticonItemBox) {
  392.                 console.error("이모티콘 아이템을 찾을 수 없습니다.");
  393.                 return;
  394.             }
  395.  
  396.             const itemList = [];
  397.             emoticonItemBox.querySelectorAll("span > a")?.forEach((item, index) => {
  398.                 if (index < 21) {
  399.                     const itemClone = item.cloneNode(true);
  400.  
  401.                     itemClone.addEventListener("click", () => {
  402.                         const minCount = parseInt(minSlider.value);
  403.                         const maxCount = parseInt(maxSlider.value);
  404.                         const repeatCount = Math.floor(Math.random() * (maxCount - minCount + 1)) + minCount;
  405.  
  406.                         for (let i = 0; i < repeatCount; i++) {
  407.                             item.click();
  408.                         }
  409.                         if (userSettings.autoSendAfterEmoticons) {
  410.                             setTimeout(() => {
  411.                                 const sendBtn = document.querySelector("#btn_send");
  412.                                 if (sendBtn) sendBtn.click();
  413.                             }, 100);
  414.                         }
  415.                     });
  416.  
  417.                     itemList.push(itemClone);
  418.                 }
  419.             });
  420.  
  421.             customEmojiBox.innerHTML = '';
  422.             customEmojiBox.append(...itemList);
  423.  
  424.             if (!chattingItemWrap.contains(customEmojiBox)) {
  425.                 chattingItemWrap.append(customEmojiBox);
  426.             }
  427.             customEmojiBox.style.display = "flex";
  428.             customEmojiBox.classList.add(type);
  429.             chatArea.style.position = "relative";
  430.             chatArea.style.bottom = `${customEmojiBox.offsetHeight + sliderContainer.offsetHeight + 8}px`;
  431.  
  432.             if (!chattingItemWrap.contains(sliderContainer)) {
  433.                 chattingItemWrap.append(sliderContainer);
  434.             }
  435.             sliderContainer.style.display = 'flex';
  436.         }
  437.  
  438.         const recentEmoticonCustomBtnLI = document.createElement("li");
  439.         const recentEmoticonCustomBtn = document.createElement("a");
  440.         recentEmoticonCustomBtn.href = "javascript:;";
  441.         recentEmoticonCustomBtn.classList.add("customEmojiBtn");
  442.         recentEmoticonCustomBtn.textContent = "최근";
  443.         recentEmoticonCustomBtnLI.append(recentEmoticonCustomBtn);
  444.  
  445.         const OGQEmoticonCustomBtnLI = document.createElement("li");
  446.         const OGQEmoticonCustomBtn = document.createElement("a");
  447.         OGQEmoticonCustomBtn.href = "javascript:;";
  448.         OGQEmoticonCustomBtn.classList.add("customEmojiBtn");
  449.         OGQEmoticonCustomBtn.textContent = "OGQ";
  450.         OGQEmoticonCustomBtnLI.append(OGQEmoticonCustomBtn);
  451.  
  452.         recentEmoticonCustomBtnLI.addEventListener("click", () => {
  453.             renderEmoticon("default");
  454.         });
  455.         OGQEmoticonCustomBtnLI.addEventListener("click", () => {
  456.             renderEmoticon("OGQ");
  457.         });
  458.  
  459.         const itemBox = actionBox.querySelector(".item_box");
  460.         if (itemBox) {
  461.             itemBox.append(recentEmoticonCustomBtnLI, OGQEmoticonCustomBtnLI);
  462.         }
  463.  
  464.         const iconColor = userSettings.emoticonButtonColor ? '#333' : '#D5D7DC';
  465.         const rangeTextColor = userSettings.emoticonButtonColor ? '#000' : '#fff';
  466.  
  467.         const defaultStyleEl = document.createElement("style");
  468.         const defaultStyle = `
  469.         .chatbox .actionbox .chat_item_list .item_box li a.customEmojiBtn {
  470.           line-height: 32px;
  471.           font-size: 15px;
  472.           font-weight: bold;
  473.           color: ${iconColor};
  474.           background-color: transparent;
  475.         }
  476.         .chatbox .actionbox .chat_item_list .item_box li a.customEmojiBtn:hover {
  477.           color: ${iconColor};
  478.           background-color: transparent;
  479.         }
  480.         .chatting-item-wrap .customEmojiBox {
  481.           position: absolute;
  482.           margin-bottom: 20px;
  483.           bottom: 0;
  484.           left: 0;
  485.           width: 100%;
  486.           display: flex;
  487.           flex-wrap: wrap;
  488.           gap: 8px 4px;
  489.           padding: 8px 8px 0 8px;
  490.           background-color: #fefefe;
  491.         }
  492.         [dark="true"] .chatting-item-wrap .customEmojiBox {
  493.           background-color: #222;
  494.           border-top: 1px solid #444;
  495.         }
  496.         .chatting-item-wrap .customEmojiBox a {
  497.           width: 36px;
  498.           height: 36px;
  499.           display: inline-flex;
  500.           align-items: center;
  501.           justify-content: center;
  502.           border-radius: 4px;
  503.         }
  504.         .chatting-item-wrap .customEmojiBox a:hover {
  505.           background-color: rgba(117, 123, 138, 0.2);
  506.         }
  507.         .slider-container {
  508.           position: absolute;
  509.           bottom: 0;
  510.           left: 0;
  511.           width: 100%;
  512.           height: 20px;
  513.           margin: 0;
  514.           background-color: #fefefe;
  515.           display: flex;
  516.           align-items: center;
  517.           padding: 0 8px 8px 8px;
  518.           flex-wrap: nowrap;
  519.         }
  520.         [dark="true"] .slider-container {
  521.           background-color: #222;
  522.         }
  523.         .slider-wrapper {
  524.             position: relative;
  525.           width: 90%;
  526.           height: 20px;
  527.         }
  528.         .range-display {
  529.           width: 10%;
  530.           text-align: center;
  531.           font-size: 12px;
  532.           color: ${rangeTextColor};
  533.           margin-left: 8px;
  534.         }
  535.         .slider-track {
  536.           position: absolute;
  537.           top: 50%;
  538.           left: 0;
  539.           right: 0;
  540.           height: 3px;
  541.           background: #ddd;
  542.           border-radius: 10px;
  543.           transform: translateY(-50%);
  544.         }
  545.         .slider {
  546.           position: absolute;
  547.           top: 50%;
  548.           left: 0;
  549.           width: 100%;
  550.           -webkit-appearance: none;
  551.           appearance: none;
  552.           background: none;
  553.           pointer-events: none;
  554.           transform: translateY(-50%);
  555.         }
  556.         .slider-range {
  557.           position: absolute;
  558.           top: 50%;
  559.           height: 3px;
  560.           background: #4444ff;
  561.           border-radius: 10px;
  562.           pointer-events: none;
  563.           transform: translateY(-50%);
  564.         }
  565.         .slider::-webkit-slider-thumb {
  566.           -webkit-appearance: none;
  567.           appearance: none;
  568.           width: 15px;
  569.           height: 15px;
  570.           border-radius: 50%;
  571.           background: #ffffff;
  572.           border: 2px solid #4444ff;
  573.           cursor: pointer;
  574.           pointer-events: all;
  575.           box-shadow: 0 0 5px rgba(0,0,0,0.2);
  576.           position: relative;
  577.           z-index: 1;
  578.         }
  579.         .slider::-moz-range-thumb {
  580.           width: 15px;
  581.           height: 15px;
  582.           border-radius: 50%;
  583.           background: #ffffff;
  584.           border: 2px solid #4444ff;
  585.           cursor: pointer;
  586.           pointer-events: all;
  587.           box-shadow: 0 0 5px rgba(0,0,0,0.2);
  588.           position: relative;
  589.           z-index: 1;
  590.         }
  591.         `;
  592.         defaultStyleEl.textContent = defaultStyle;
  593.         document.head.append(defaultStyleEl);
  594.     }
  595.  
  596.     function removeCustomEmoticonBox() {
  597.         const customEmojiBtns = document.querySelectorAll('.customEmojiBtn');
  598.         customEmojiBtns.forEach(btn => btn.parentElement.remove());
  599.         const customEmojiBox = document.querySelector('.customEmojiBox');
  600.         if (customEmojiBox) customEmojiBox.remove();
  601.  
  602.         const sliderContainer = document.querySelector('.slider-container');
  603.         if (sliderContainer) sliderContainer.remove();
  604.  
  605.         const styleEl = document.querySelector('#custom-chat-width-style');
  606.         if (styleEl) {
  607.             styleEl.remove();
  608.         }
  609.  
  610.         const styleCustomEl = document.querySelector('style');
  611.         if (styleCustomEl && styleCustomEl.textContent.includes('.customEmojiBox')) {
  612.             styleCustomEl.remove();
  613.         }
  614.     }
  615.  
  616.     function enablePasteInChat() {
  617.         const writeArea = document.querySelector("#write_area");
  618.         if (!writeArea) return;
  619.  
  620.         writeArea.removeAttribute("readonly");
  621.         writeArea.removeAttribute("disabled");
  622.  
  623.         writeArea.addEventListener("paste", function(e) {
  624.             e.preventDefault();
  625.             const clipboardData = (e.originalEvent || e).clipboardData || window.clipboardData;
  626.             const pastedData = clipboardData.getData('text');
  627.             document.execCommand('insertText', false, pastedData);
  628.         });
  629.     }
  630.  
  631.     function initEmoticonRelatedFeatures() {
  632.         const observer = new MutationObserver((mutations, obs) => {
  633.             const ul = document.querySelector('ul.item_box');
  634.             if (!ul) return;
  635.  
  636.             const btnStarLi = document.getElementById('btn_star');
  637.             const btnAdballoonLi = document.getElementById('btn_adballoon');
  638.             const sooptoreLi = ul.querySelector('li.sooptore');
  639.             const btnEmo = document.getElementById('btn_emo');
  640.  
  641.             if (!btnStarLi || !btnAdballoonLi || !sooptoreLi || !btnEmo) return;
  642.  
  643.             btnStarLi.classList.remove('off');
  644.             btnAdballoonLi.classList.remove('off');
  645.             sooptoreLi.classList.remove('off');
  646.             btnEmo.classList.remove('off');
  647.  
  648.             if (userSettings.emoticonButtonReposition) {
  649.                 const chatWriteDiv = document.getElementById('chat_write');
  650.                 if (chatWriteDiv && chatWriteDiv.contains(btnEmo)) {
  651.                     chatWriteDiv.removeChild(btnEmo);
  652.                 }
  653.  
  654.                 let btnEmoLi = document.createElement('li');
  655.                 btnEmoLi.id = 'btn_emo_li';
  656.                 btnEmoLi.className = 'emoticon';
  657.  
  658.                 btnEmoLi.appendChild(btnEmo);
  659.  
  660.                 if (ul.firstChild !== btnEmoLi) {
  661.                     ul.insertBefore(btnEmoLi, ul.firstChild);
  662.                 }
  663.  
  664.                 ul.appendChild(btnStarLi);
  665.                 ul.appendChild(btnAdballoonLi);
  666.                 ul.appendChild(sooptoreLi);
  667.  
  668.                 btnStarLi.classList.add('right-align');
  669.  
  670.                 const iconColor = userSettings.emoticonButtonColor ? '#333' : '#D5D7DC';
  671.  
  672.                 const svgIcon = encodeURIComponent(
  673.                     `<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none'>
  674.                         <g opacity='1'>
  675.                             <path fill='${iconColor}' d='M19.56 18.396a.498.498 0 1 1 .86.506c-.598 1.015-1.973 2.735-4.421 2.735-2.445 0-3.82-1.717-4.418-2.73a.497.497 0 0 1 .176-.684.5.5 0 0 1 .684.176c.498.845 1.617 2.24 3.558 2.24 1.943 0 3.063-1.397 3.56-2.243Z'/>
  676.                             <path stroke='${iconColor}' stroke-width='.4' d='M11.581 18.906c.598 1.014 1.973 2.732 4.418 2.732 2.448 0 3.823-1.72 4.42-2.736a.498.498 0 1 0-.86-.506c-.497.846-1.617 2.243-3.56 2.243-1.94 0-3.06-1.395-3.559-2.24a.5.5 0 0 0-.683-.176.497.497 0 0 0-.176.683Zm0 0 .078-.045'/>
  677.                             <path fill='${iconColor}' stroke='${iconColor}' stroke-width='.45' d='M19.527 15.805a1.227 1.227 0 1 1 0-2.455 1.227 1.227 0 0 1 0 2.455ZM12.477 15.805a1.228 1.228 0 1 1 .001-2.456 1.228 1.228 0 0 1 0 2.456Z'/>
  678.                             <path stroke='${iconColor}' stroke-width='1.4' d='M16 25.8a9.3 9.3 0 1 1 0-18.6 9.3 9.3 0 0 1 0 18.6Z'/>
  679.                         </g>
  680.                     </svg>`
  681.                 );
  682.  
  683.                 const dataURL = `data:image/svg+xml,${svgIcon}`;
  684.  
  685.                 btnEmo.style.backgroundImage = `url("${dataURL}")`;
  686.                 btnEmo.style.backgroundRepeat = 'no-repeat';
  687.                 btnEmo.style.backgroundPosition = 'center';
  688.                 btnEmo.style.backgroundSize = 'contain';
  689.                 btnEmo.style.width = '32px';
  690.                 btnEmo.style.height = '32px';
  691.                 btnEmo.style.border = 'none';
  692.                 btnEmo.style.cursor = 'pointer';
  693.                 btnEmo.style.padding = '0';
  694.                 btnEmo.style.margin = '0';
  695.                 btnEmo.style.backgroundColor = 'transparent';
  696.                 btnEmo.textContent = '';
  697.             }
  698.  
  699.             if (userSettings.emoticonWindowPositionChange) {
  700.                 const emoticonContainer = document.getElementById('emoticonContainer');
  701.                 if (emoticonContainer) {
  702.                     const styleEl = document.createElement('style');
  703.                     styleEl.id = 'custom-emoticon-position-style';
  704.                     styleEl.textContent = `
  705.                     .chatbox #emoticonContainer {
  706.                         bottom: 10px;
  707.                         transform: translateX(0);
  708.                         transition: none !important;
  709.                     }
  710.                     .chatbox #emoticonContainer.on {
  711.                         bottom: 10px;
  712.                         max-width: 360px;
  713.                         min-width: 320px;
  714.                         right: unset;
  715.                         left: 0;
  716.                         transform: translateX(-105%);
  717.                         transition: none !important;
  718.                     }
  719.                     `;
  720.                     document.head.appendChild(styleEl);
  721.                 }
  722.             }
  723.  
  724.             if (!document.getElementById('sooplive-custom-style')) {
  725.                 const style = document.createElement('style');
  726.                 style.id = 'sooplive-custom-style';
  727.                 style.innerHTML = `
  728.                     ul.item_box {
  729.                         display: flex;
  730.                         align-items: center;
  731.                     }
  732.                     ul.item_box li {
  733.                         margin: 0 3px;
  734.                     }
  735.                     ul.item_box li.right-align {
  736.                         margin-left: auto;
  737.                     }
  738.                 `;
  739.                 document.head.appendChild(style);
  740.             }
  741.  
  742.             obs.disconnect();
  743.         });
  744.  
  745.         observer.observe(document.body, {
  746.             childList: true,
  747.             subtree: true
  748.         });
  749.     }
  750.  
  751.     function startScript() {
  752.         if (document.querySelector("#chatting_area")) {
  753.             init();
  754.         } else {
  755.             setTimeout(startScript, 500);
  756.         }
  757.     }
  758.  
  759.     startScript();
  760.  
  761. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址