Greasy Fork is available in English.
라이브 페이지: 자동 미화, 마우스 호버 시 자동으로 버튼 접기, 재생 기능 자동 트리거. 홈 페이지: 원래 스타일 복원, 자동 일시정지 및 음소거, 라이브 창 드래그 및 확대/축소 가능.
// ==UserScript==
// @name Twitch Beautify
// @name:zh-TW Twitch Beautify
// @name:zh-CN Twitch Beautify
// @name:ko Twitch Beautify
// @name:ja Twitch Beautify
// @name:en Twitch Beautify
// @version 0.0.22
// @author Canaan HS
// @description 直播頁面: 自動美化、滑鼠懸浮時自動收合按鈕、重新播放功能自動觸發。 首頁: 恢復原始樣式、自動暫停與靜音、可拖曳與縮放直播窗口。
// @description:zh-TW 直播頁面: 自動美化、滑鼠懸浮時自動收合按鈕、重新播放功能自動觸發。 首頁: 恢復原始樣式、自動暫停與靜音、可拖曳與縮放直播窗口。
// @description:zh-CN 直播页面：自动美化、鼠标悬浮时自动收合按钮、重新播放功能自动触发。 首页： 恢复原始样式、自动暂停与静音、可拖拽与缩放直播窗口。
// @description:ko 라이브 페이지: 자동 미화, 마우스 호버 시 자동으로 버튼 접기, 재생 기능 자동 트리거. 홈 페이지: 원래 스타일 복원, 자동 일시정지 및 음소거, 라이브 창 드래그 및 확대/축소 가능.
// @description:ja ライブページ：自動美化、マウスホバー時に自動的にボタンを折りたたむ、再生機能が自動的にトリガーされる。ホーム：元のスタイルに戻す、自動停止とミュート、ライブウィンドウをドラッグアンドドロップして拡大縮小できる。
// @description:en Live page: Auto-beautify, auto-collapse buttons on mouse hover, auto-trigger replay function. Home page: Restore original style, auto-pause and mute, draggable and scalable live window.
// @match *://*.twitch.tv/*
// @icon https://cdn-icons-png.flaticon.com/512/9290/9290165.png
// @license MIT
// @namespace https://greasyfork.org/users/989635
// @run-at document-body
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_getResourceText
// @grant window.onurlchange
// @grant GM_registerMenuCommand
// @require https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js
// @require https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js
// @require https://update.greasyfork.org/scripts/487608/1361998/SyntaxSimplified.js
// @resource jui https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css
// ==/UserScript==
(function(){const d=function(a){var b={MS_01:"\ud83d\udee0\ufe0f \u5df2\u7981\u7528\u7f8e\u5316\u274c",MS_02:"\ud83d\udee0\ufe0f \u5df2\u542f\u7528\u7f8e\u5316\u2705"},c={MS_01:"\ud83d\udee0\ufe0f \u5df2\u7981\u7528\u7f8e\u5316\u274c",MS_02:"\ud83d\udee0\ufe0f \u5df2\u555f\u7528\u7f8e\u5316\u2705"};b={ja:{MS_01:"\ud83d\udee0\ufe0f \u30d3\u30e5\u30fc\u30c6\u30a3\u30d5\u30a1\u30a4\u304c\u7121\u52b9\u3067\u3059\u274c",MS_02:"\ud83d\udee0\ufe0f \u30d3\u30e5\u30fc\u30c6\u30a3\u30d5\u30a1\u30a4\u304c\u6709\u52b9\u3067\u3059\u2705"},ko:{MS_01:"\ud83d\udee0\ufe0f \ubdf0\ud2f0\ud30c\uc774 \ube44\ud65c\uc131\ud654\ub428\u274c",MS_02:"\ud83d\udee0\ufe0f \ubdf0\ud2f0\ud30c\uc774 \ud65c\uc131\ud654\ub428\u2705"},"en-US":{MS_01:"\ud83d\udee0\ufe0f Beautification disabled\u274c",MS_02:"\ud83d\udee0\ufe0f Beautification enabled\u2705"},"zh-CN":b,"zh-SG":b,"zh-TW":c,"zh-HK":c,"zh-MO":c};return b[a]||b["en-US"]}(navigator.language);(new class extends Syntax{constructor(){super();this.Channel_Parent=this.Channel_Button=this.Chat_Button=this.Resume=this.Frame=this.Nav=null;this.IsLive=a=>/^https:\/\/www\.twitch\.tv\/(?!directory|settings|drops|wallet|subscriptions).+[^\/]$/.test(a);this.RegisterMenu=a=>{this.Menu({[a]:{func:()=>this.Use(),close:!1}})};this.Start=async()=>{this.AddListener(window,"urlchange",a=>{this.IsLive(a.url)&&(this.RemovListener(window,"urlchange"),this.Trigger())})};this.End=async()=>{this.AddListener(window,"urlchange",a=>{this.IsLive(a.url)||(this.Reset(),this.Fun($("div[data-a-player-state='mini']")),this.Start())})};this.Use=async()=>{this.store("g","Beautify",[])?(this.Reset(),this.RegisterMenu(d.MS_01),this.store("s","Beautify",!1)):(this.IsLive(document.URL)?this.Trigger():this.Start(),this.RegisterMenu(d.MS_02),this.store("s","Beautify",!0))};this.Reset=async()=>{this.Nav&&(this.Resume.disconnect(),this.RemovListener(window,"urlchange"),requestAnimationFrame(()=>{this.Nav.classList.remove("Nav_Effect");this.Channel_Button.removeAttribute("style");this.Channel_Button.classList.remove("Button_Effect");this.Channel_Parent.classList.remove("Channel_Expand_Effect")}),this.RemovListener(this.Channel_Button,"mouseenter"),this.RemovListener(this.Channel_Button,"mouseleave"))}}async Main(){this.ImportStyle();this.store("g","Beautify",[])?(this.ClearFooter(),this.RegisterMenu(d.MS_02),this.IsLive(document.URL)?this.Trigger():(this.Start(),this.PlayControl(!1))):this.RegisterMenu(d.MS_01)}async Trigger(){this.WaitMap("nav;.side-nav;.side-nav-section div;[data-a-player-state=''];[data-a-target='side-nav-arrow'];[data-a-target='right-column__toggle-collapse-btn']".split(";"),a=>{const [b,c,g,e,f,h]=a;this.Nav=b;this.Frame=e;this.Chat_Button=h;this.Channel_Button=f;this.Channel_Parent=c.parentNode;this.Beautify();this.AutoClick();this.ResumeWatching();this.PlayControl(!0);this.Fun($(e),!1);!g.getAttribute("data-a-target")&&f.click();this.End()},{raf:!0})}async Beautify(){requestAnimationFrame(()=>{this.Nav.classList.add("Nav_Effect");this.Channel_Parent.classList.add("Channel_Expand_Effect")})}async AutoClick(){this.Chat_Button.classList.add("Button_Effect");this.Channel_Button.classList.add("Button_Effect");this.Channel_Button.style.transform="translateY(15px)";let a;this.AddListener(this.Channel_Button,"mouseenter",()=>{a=setTimeout(()=>{this.Channel_Button.click()},250)});this.AddListener(this.Channel_Button,"mouseleave",()=>{clearTimeout(a);this.Channel_Button.classList.add("Button_Effect")});let b;this.AddListener(this.Chat_Button,"mouseenter",()=>{b=setTimeout(()=>{this.Chat_Button.click()},250)});this.AddListener(this.Chat_Button,"mouseleave",()=>{clearTimeout(b);this.Chat_Button.classList.add("Button_Effect")})}async ResumeWatching(){let a;this.Resume=new MutationObserver(()=>{(a=this.$$(".itFOsv"))&&a.click()});this.Resume.observe(this.Frame,{childList:!0,subtree:!0})}async PlayControl(a){let b;this.WaitElem("video",c=>{a?(b=setInterval(()=>{c.play();c.muted=!1},500),setTimeout(()=>{c.muted||c.paused||clearInterval(b)},5E3)):(b=setInterval(()=>{c.pause();c.muted=!0},500),setTimeout(()=>{c.muted&&c.paused&&clearInterval(b)},5E3))},{raf:!0})}async ClearFooter(){this.WaitElem("#twilight-sticky-footer-root",a=>{a.remove()},{throttle:200})}async Fun(a,b=!0){0<a.length&&(b?(a.draggable({cursor:"grabbing",start:function(){$(this).find(".doeqbO").addClass("Drag_Effect")},stop:function(){$(this).find(".doeqbO").removeClass("Drag_Effect")}}),a.css({top:$("nav").height()-10,left:$(".side-nav").width()-10,width:.68*window.innerWidth,height:.88*window.innerHeight}),a.resizable({minWidth:50,minHeight:50,handles:"all",aspectRatio:1.6})):a.data("ui-draggable")&&(a.draggable("destroy"),a.resizable("destroy")))}async ImportStyle(){this.AddStyle(`${GM_getResourceText("jui")}.Nav_Effect {opacity: 0;height: 1rem !important;transition: opacity 0.5s , height 0.8s;}.Nav_Effect:hover {opacity: 1;height: 5rem !important;}.Channel_Expand_Effect {opacity: 0;width: 1rem;transition: opacity 0.4s , width 0.7s;}.Channel_Expand_Effect:hover {opacity: 1;width: 24rem;}.Button_Effect {transform: translateY(10px);color: rgba(239, 239, 241, 0.3) !important;}.Button_Effect:hover {color: rgb(239, 239, 241) !important;}.Drag_Effect {border-radius: 10px;border: 2px solid white;}`,"Effect")}}).Main()})();