// ==UserScript== // @name 아프리카TV - 사이드바 UI 변경 // @name:ko 아프리카TV - 사이드바 UI 변경 // @namespace https://www.afreecatv.com/ // @version 2024-01-32 // @description 아프리카TV의 사이드바 UI를 변경합니다. // @description:ko 아프리카TV의 사이드바 UI를 변경합니다. // @author You // @match https://www.afreecatv.com/ // @match https://www.afreecatv.com/?hash=* // @icon https://www.google.com/s2/favicons?sz=64&domain=afreecatv.com // @grant GM_addStyle // @grant GM_xmlhttpRequest // @grant GM_setValue // @grant GM_getValue // @grant GM_registerMenuCommand // @grant GM_unregisterMenuCommand // @license MIT // @downloadURL none // ==/UserScript== (function() { 'use strict'; let coloring_live = GM_getValue("coloring_live", 1); let display_follow = GM_getValue("display_follow", 6); let display_myplus = GM_getValue("display_myplus", 6); let display_top = GM_getValue("display_top", 6); let myplus_position = GM_getValue("myplus_position", 1); let myplus_order = GM_getValue("myplus_order", 1); let blockedUsers = GM_getValue('blockedUsers', []); let menuIds = {}; const css_Darkmode = ` #sidebar .user span.username, #sidebar .user span.description, #sidebar .user span.watchers, .top-section span, .top-section span a { font-family: 'Malgun Gothic', sans-serif !important; } button.block-icon-svg-white { width: 40px; height: 50px; } button.block-icon-svg-white span { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 64 64" style="fill:%23B2B2B2;"%3E%3Cpath d="M32 6C17.641 6 6 17.641 6 32C6 46.359 17.641 58 32 58C46.359 58 58 46.359 58 32C58 17.641 46.359 6 32 6zM32 10C37.331151 10 42.225311 11.905908 46.037109 15.072266L14.505859 45.318359C11.682276 41.618415 10 37.00303 10 32C10 19.869 19.869 10 32 10zM48.927734 17.962891C52.094092 21.774689 54 26.668849 54 32C54 44.131 44.131 54 32 54C26.99697 54 22.381585 52.317724 18.681641 49.494141L48.927734 17.962891z"%3E%3C/path%3E%3C/svg%3E'); background-size: 100% 100%; width: 20px; height: 20px; } button.block-icon-svg-white:hover span { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 64 64" style="fill:%235285FF;"%3E%3Cpath d="M32 6C17.641 6 6 17.641 6 32C6 46.359 17.641 58 32 58C46.359 58 58 46.359 58 32C58 17.641 46.359 6 32 6zM32 10C37.331151 10 42.225311 11.905908 46.037109 15.072266L14.505859 45.318359C11.682276 41.618415 10 37.00303 10 32C10 19.869 19.869 10 32 10zM48.927734 17.962891C52.094092 21.774689 54 26.668849 54 32C54 44.131 44.131 54 32 54C26.99697 54 22.381585 52.317724 18.681641 49.494141L48.927734 17.962891z"%3E%3C/path%3E%3C/svg%3E'); } html { overflow: hidden; } .users-section.myplus > .user.show-more { display: none; } .users-section.follow > .user.show-more { display: none; } .users-section.top > .user.show-more { display: none; } #toggleButton, #toggleButton2, #toggleButton3 { padding:12px; color:#e5e5e5; } .left_navbar { display: flex; align-items: center; justify-content: flex-end; position: absolute; flex-direction: row-reverse; top: 0px; left: 160px; } .left_nav_button { position: relative; width: 70px; height: 70px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; z-index: 3001; transition: all .2s; color: #e5e5e5; font-size: 15px; font-weight: 600; } .left_nav_button.active { color: #019BFE; } #sidebar { width: 240px; grid-area: sidebar; background-color: #1F1F23; color:white; margin-right:10px; padding-bottom:260px; } #sidebar .top-section { display: flex; align-items: center; justify-content: space-around; margin: 10px 0px; } #sidebar .top-section>span { text-transform: uppercase; font-weight: 550; font-size: 14px; margin-top: 6px; margin-bottom: 4px; color:#DEDEE3; } #sidebar .top-section>span>a { color:#DEDEE3; } #sidebar .twitch-message-section { margin: 0px 10px; margin-top: 10px; padding: 0 25px; background-color: #1F1F23; } #sidebar .twitch-message-section .title { margin: 0px; font-size: 1.5rem; font-weight: 500; } #sidebar .twitch-message-section .title>span { color: var(--primary-color); } #sidebar .twitch-message-section .description { margin: 8px 0px; line-height: 1.3rem; font-size: 0.9rem; color: #A1A1A1; } #sidebar .twitch-message-section .description>span { display: block; text-align: center; } .user { display: grid; grid-template-areas: "profile-picture username watchers" "profile-picture description blank"; grid-template-columns: 40px auto auto; padding: 6px 10px; } .user:hover { background-color: #26262c; cursor: pointer; } .user .profile-picture { grid-area: profile-picture; width: 32px; height: 32px; border-radius: 50%; } .user .username { grid-area: username; font-size: 14px; font-weight: 600; color:#DEDEE3; } .user .description { grid-area: description; font-size: 13px; color: #a1a1a1; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user .watchers { grid-area: watchers; display: flex; align-items: center; justify-content: flex-end; font-weight: 400; font-size: 13px; color: #c0c0c0; margin-right: 2px; } .user .watchers .dot { font-size: 7px; margin-right: 5px; } #listMain #wrap #serviceHeader #afLogo { left: 30px; height: 72px; } .btn_flexible { display: none; } #innerLnb { display: none; } #list-container { height: 100vh; overflow-y: auto; } #sidebar { height: 100vh; overflow-y: auto; position: fixed; } #sidebar::-webkit-scrollbar { display: none; /* Chrome, Safari, Edge */ } .tooltip-container { z-index: 999; width: 320px; height: auto; position: fixed; background-color: #26262C; } .tooltip-container img { position: relative; z-index: 999; width: auto; height: auto; max-height:240px } .tooltiptext { position: relative; z-index: 999; width: 320px; height: 48px; background-color: #26262C; color: #fff; text-align: center; display: flex; align-items: center; /* 세로 가운데 정렬 */ justify-content: center; /* 가로 가운데 정렬 */ top:-4px; } `; const css_Whitemode = ` #sidebar .user span.username, #sidebar .user span.description, #sidebar .user span.watchers, .top-section span, .top-section span a { font-family: 'Malgun Gothic', sans-serif !important; } button.block-icon-svg { width: 40px; height: 50px; } button.block-icon-svg span { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 64 64" style="fill:%237C7D7D;"%3E%3Cpath d="M32 6C17.641 6 6 17.641 6 32C6 46.359 17.641 58 32 58C46.359 58 58 46.359 58 32C58 17.641 46.359 6 32 6zM32 10C37.331151 10 42.225311 11.905908 46.037109 15.072266L14.505859 45.318359C11.682276 41.618415 10 37.00303 10 32C10 19.869 19.869 10 32 10zM48.927734 17.962891C52.094092 21.774689 54 26.668849 54 32C54 44.131 44.131 54 32 54C26.99697 54 22.381585 52.317724 18.681641 49.494141L48.927734 17.962891z"%3E%3C/path%3E%3C/svg%3E'); background-size: 100% 100%; width: 20px; height: 20px; } button.block-icon-svg:hover span { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 64 64" style="fill:%235285FF;"%3E%3Cpath d="M32 6C17.641 6 6 17.641 6 32C6 46.359 17.641 58 32 58C46.359 58 58 46.359 58 32C58 17.641 46.359 6 32 6zM32 10C37.331151 10 42.225311 11.905908 46.037109 15.072266L14.505859 45.318359C11.682276 41.618415 10 37.00303 10 32C10 19.869 19.869 10 32 10zM48.927734 17.962891C52.094092 21.774689 54 26.668849 54 32C54 44.131 44.131 54 32 54C26.99697 54 22.381585 52.317724 18.681641 49.494141L48.927734 17.962891z"%3E%3C/path%3E%3C/svg%3E'); } html { overflow: hidden; } .users-section.myplus > .user.show-more { display: none; } .users-section.follow > .user.show-more { display: none; } .users-section.top > .user.show-more { display: none; } #toggleButton, #toggleButton2, #toggleButton3 { padding:12px; color:black; } .left_navbar { display: flex; align-items: center; justify-content: flex-end; position: absolute; flex-direction: row-reverse; top: 0px; left: 160px; } .left_nav_button { position: relative; width: 70px; height: 70px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; z-index: 3001; transition: all .2s; color: black; font-size: 15px; font-weight: 600; } .left_nav_button.active { color: #0545B1; } #sidebar { font-family:'Malgun Gothic'; width: 240px; grid-area: sidebar; background-color: #EFEFF1; color:black; padding-bottom:260px; } #sidebar .top-section { display: flex; align-items: center; justify-content: space-around; margin: 10px 0px; } #sidebar .top-section>span { text-transform: uppercase; font-weight: 600; font-size: 14px; margin-top: 6px; margin-bottom: 4px; color:#0E0E10; } #sidebar .top-section>span>a { color:#0E0E10; } #sidebar .twitch-message-section { margin: 0px 10px; margin-top: 10px; padding: 0 25px; background-color: #EFEFF1; } #sidebar .twitch-message-section .title { margin: 0px; font-size: 1.5rem; font-weight: 500; } #sidebar .twitch-message-section .title>span { color: var(--primary-color); } #sidebar .twitch-message-section .description { margin: 8px 0px; line-height: 1.3rem; font-size: 0.9rem; color: #53535F; } #sidebar .twitch-message-section .description>span { display: block; text-align: center; } .user { display: grid; grid-template-areas: "profile-picture username watchers" "profile-picture description blank"; grid-template-columns: 40px auto auto; padding: 6px 10px; } .user:hover { background-color: #E6E6EA; cursor: pointer; } .user .profile-picture { grid-area: profile-picture; width: 32px; height: 32px; border-radius: 50%; } .user .username { grid-area: username; font-size: 14px; font-weight: 600; color:#1F1F23; } .user .description { grid-area: description; font-size: 13px; font-weight: 400; color: #53535F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user .watchers { grid-area: watchers; display: flex; align-items: center; justify-content: flex-end; font-size: 13px; font-weight: 400; color: black; margin-right: 2px; } .user .watchers .dot { font-size: 7px; margin-right: 5px; } #listMain #wrap #serviceHeader #afLogo { left: 30px; height: 72px; } .btn_flexible { display: none; } #innerLnb { display: none; } #list-container { height: 100vh; overflow-y: auto; } #sidebar { height: 100vh; overflow-y: auto; position: fixed; } #sidebar::-webkit-scrollbar { display: none; /* Chrome, Safari, Edge */ } .tooltip-container { z-index: 999; width: 320px; height: auto; position: fixed; background-color: #E6E6EA; } .tooltip-container img { position: relative; z-index: 999; width: auto; height: auto; max-height:240px } .tooltiptext { position: relative; z-index: 999; width: 320px; height: 48px; background-color: #E6E6EA; color: black; text-align: center; display: flex; align-items: center; /* 세로 가운데 정렬 */ justify-content: center; /* 가로 가운데 정렬 */ top:-4px; } `; // 차단 목록을 저장합니다. function saveBlockedUsers() { GM_setValue('blockedUsers', blockedUsers); } // 사용자를 차단 목록에 추가합니다. function blockUser(userName, userId) { // 이미 차단된 사용자인지 확인 if (!isUserBlocked(userId)) { blockedUsers.push({ userName, userId }); saveBlockedUsers(); alert(`사용자 ${userName}(${userId})를 차단했습니다.`); registerUnblockMenu({ userName, userId }); } else { alert(`사용자 ${userName}(${userId})는 이미 차단되어 있습니다.`); } } // 함수: 사용자 차단 해제 function unblockUser(userId) { // 차단된 사용자 목록에서 해당 사용자 찾기 let unblockedUser = blockedUsers.find(user => user.userId === userId); // 사용자를 찾았을 때만 차단 해제 및 메뉴 삭제 수행 if (unblockedUser) { // 차단된 사용자 목록에서 해당 사용자 제거 blockedUsers = blockedUsers.filter(user => user.userId !== userId); // 변경된 목록을 저장 GM_setValue('blockedUsers', blockedUsers); alert(`사용자 ${userId}의 차단이 해제되었습니다.`); unregisterUnblockMenu(unblockedUser.userName); } } // 사용자가 이미 차단되어 있는지 확인합니다. function isUserBlocked(userId) { return blockedUsers.some(user => user.userId === userId); } // 함수: 동적으로 메뉴 등록 function registerUnblockMenu(user) { // GM_registerMenuCommand로 메뉴를 등록하고 메뉴 ID를 기록 let menuId = GM_registerMenuCommand(`💔 차단 해제 - ${user.userName}`, function() { unblockUser(user.userId); }); // 메뉴 ID를 기록 menuIds[user.userName] = menuId; } // 함수: 동적으로 메뉴 삭제 function unregisterUnblockMenu(userName) { // userName을 기반으로 저장된 메뉴 ID를 가져와서 삭제 let menuId = menuIds[userName]; if (menuId) { GM_unregisterMenuCommand(menuId); delete menuIds[userName]; // 삭제된 메뉴 ID를 객체에서도 제거 } } function waitForElement(elementSelector, callBack) { const element = document.querySelector(elementSelector); if (element) { callBack(elementSelector, element); } else { setTimeout(function () { waitForElement(elementSelector, callBack); }, 200); } } function desc_order(selector){ // Get the container element const container = document.querySelector(selector); // Get all user elements const userElements = document.querySelectorAll(`${selector} >.user`); // Convert NodeList to Array for easier manipulation const userArray = Array.from(userElements); // Sort userArray based on the data-watchers attribute userArray.sort((a, b) => { const watchersA = parseInt(a.getAttribute('data-watchers') || '0'); const watchersB = parseInt(b.getAttribute('data-watchers') || '0'); return watchersB - watchersA; }); // Clear container and append sorted elements container.innerHTML = ''; userArray.forEach(user => { container.appendChild(user); }); } function addNumberSeparator(number) { // toLocaleString 메서드를 사용하여 숫자에 구분자 추가 number = Number(number); return number.toLocaleString(); } // 사용자 요소를 생성하는 함수 function createUserElement(channel) { const userElement = document.createElement('div'); const playerLink = "https://play.afreecatv.com/"+channel.user_id; const broad_thumnail = `https://liveimg.afreecatv.com/m/${channel.broad_no}`; userElement.classList.add('user'); userElement.setAttribute('onclick',`window.open('${playerLink}', '_blank')`); userElement.setAttribute('data-watchers',`${channel.total_view_cnt}`); userElement.setAttribute('broad_thumnail',`${broad_thumnail}`); userElement.setAttribute('tooltip',`${channel.broad_title}`); userElement.setAttribute('user_id',`${channel.user_id}`); const profilePicture = document.createElement('img'); const pp_webp="https://stimg.afreecatv.com/LOGO/"+channel.user_id.slice(0, 2)+"/"+channel.user_id+"/m/"+channel.user_id+".webp"; const pp_jpg="https://profile.img.afreecatv.com/LOGO/"+channel.user_id.slice(0, 2)+"/"+channel.user_id+"/m/"+channel.user_id+".jpg"; profilePicture.src = pp_webp; // 프로필사진 profilePicture.setAttribute('onerror', `this.onerror=null; this.src='${pp_jpg}'`); profilePicture.setAttribute('alt', `${channel.user_id}'`); profilePicture.setAttribute('onclick', `event.stopPropagation();window.open('https://bj.afreecatv.com/${channel.user_id}', '_blank');`); //profilePicture.onerror=`this.onerror=null; this.src='${pp_jpg}'`; profilePicture.classList.add('profile-picture'); const username = document.createElement('span'); username.classList.add('username'); username.textContent = channel.user_nick; //스트리머명 const cat_no = channel.broad_cate_no; const categoryList = oMainCategory.category_list; const filteredList = categoryList.filter(word => !["전체", "제한"].some(keyword => word.menu_name.includes(keyword))); const targetActionContent = cat_no; const regexPattern = new RegExp(targetActionContent.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "i"); const matchedItem = filteredList.find(item => regexPattern.test(item.action_content)); // 일치하는 항목이 있다면 해당 항목의 menu_name 리턴, 없으면 null 리턴 let result = matchedItem ? matchedItem.menu_name : cat_no; if(result==="00040121"){ result = "종합게임"; } if(result==="00300000"){ result = "연령제한"; } if(result==="ADULT_BROAD_CATE"){ result = "연령제한"; } if(result==="LoL"){ result = "리그 오브 레전드"; } if(result==="스타"){ result = "스타크래프트"; } if(result==="00720000"){ result = "LCK"; } const description = document.createElement('span'); description.classList.add('description'); description.textContent = result; //카테고리 const watchers = document.createElement('span'); watchers.classList.add('watchers'); if(coloring_live === 1){ if(channel.auto_hashtags[0]==="웰컴"){ watchers.innerHTML = `🟣${addNumberSeparator(channel.total_view_cnt)}`; } else if(channel.broad_resolution==="2560x1440"){ watchers.innerHTML = `🟠${addNumberSeparator(channel.total_view_cnt)}`; } else { watchers.innerHTML = `🔴${addNumberSeparator(channel.total_view_cnt)}`; } } else { watchers.innerHTML = `🔴${addNumberSeparator(channel.total_view_cnt)}`; } userElement.appendChild(profilePicture); userElement.appendChild(username); userElement.appendChild(description); userElement.appendChild(watchers); return userElement; } // 특정 HTML 삽입 const newHtml = `
`; // #serviceLnb 하위에 HTML 삽입 const serviceLnbElement = document.getElementById('serviceLnb'); if (serviceLnbElement) { serviceLnbElement.insertAdjacentHTML('beforeend', newHtml); } function insertTopChannels(){ // 특정 HTML 삽입 const newHtml = `