// ==UserScript==
// @name 아프리카TV - 사이드바 UI 변경
// @name:ko 아프리카TV - 사이드바 UI 변경
// @namespace https://www.afreecatv.com/
// @version 2024-01-71
// @description 아프리카TV의 사이드바 UI를 변경합니다.
// @description:ko 아프리카TV의 사이드바 UI를 변경합니다.
// @author You
// @match https://www.afreecatv.com/
// @match https://www.afreecatv.com/?hash=*
// @match https://www.afreecatv.com/?NaPm=*
// @match https://play.afreecatv.com/*/*
// @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
// @run-at document-end
// @license MIT
// @downloadURL none
// ==/UserScript==
(function() {
'use strict';
const currentUrl = window.location.href;
let installMessage = GM_getValue("installMessage", 1);
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 clickDisplayCount = GM_getValue("clickDisplayCount", 10);
let blockedUsers = GM_getValue('blockedUsers', []);
let blockedCategories = GM_getValue('blockedCategories', []);
let open_newtab = GM_getValue("open_newtab", 0);
let playerSidebar = GM_getValue("playerSidebar", 1);
let playerSmode = GM_getValue("playerSmode", 0);
let preplayerSmode = playerSmode;
let sidebarMinimized = GM_getValue("sidebarMinimized", 0);
let smodeSidebar = GM_getValue("smodeSidebar", 1);
let menuIds = {};
let categoryMenuIds = {};
const isDarkMode = document.body.classList.contains('thema_dark');
let savedCategory = GM_getValue("szBroadCategory",0);
let delayCheckEnabled = true;
let webplayer_scroll_left = 240;
if(sidebarMinimized){
webplayer_scroll_left = 52;
}
// 데이터를 로드하고 처리하는 함수
function loadData() {
// 현재 시간 기록
var currentTime = new Date().getTime();
// 이전 실행 시간 불러오기
var lastExecutionTime = GM_getValue("lastExecutionTime", 0);
// 마지막 실행 시간으로부터 1시간 이상 경과했는지 확인
if (currentTime - lastExecutionTime >= 3600000) { // 1시간은 3600000 밀리초
GM_xmlhttpRequest({
method: "GET",
url: "https://live.afreecatv.com/script/locale/ko_KR/broad_category.js",
onload: function(response) {
if (response.status === 200) {
// 성공적으로 데이터를 받았을 때 처리할 코드 작성
var szBroadCategory = response.responseText;
// 이후 처리할 작업 추가
szBroadCategory = JSON.parse(szBroadCategory.split('var szBroadCategory = ')[1].slice(0, -1));
if (szBroadCategory.CHANNEL.RESULT === "1") {
// 데이터 저장
GM_setValue("szBroadCategory", szBroadCategory);
// 현재 시간을 마지막 실행 시간으로 업데이트
GM_setValue("lastExecutionTime", currentTime);
}
} else {
console.error("Failed to load data:", response.statusText);
}
},
onerror: function(error) {
console.error("Error occurred while loading data:", error);
}
});
} else {
console.log("1 hour not elapsed since last execution. Skipping data load.");
}
}
// 페이지가 로드되면 데이터를 로드하고 처리
window.addEventListener('load', function() {
console.log(GM_getValue("lastExecutionTime"));
loadData();
});
const css_Darkmode = `
@media screen and (max-width: 1136px) {
.left_navbar a:first-child {
display: none;
}
}
#sidebar.min {
width: 52px;
}
#sidebar.min .users-section a.user span {
display: none;
}
#sidebar.min .users-section button {
font-size:11px;
padding: 1px;
}
#sidebar.max .button-fold-sidebar {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none slice' viewBox='0 0 7 11'%3e%3cpath fill='%23f9f9f9' d='M5.87 11.01L.01 5.51 5.87.01l1.08 1.01-4.74 4.45L7 9.96 5.87 11z'/%3e%3c/svg%3e");
background-size: 7px 11px;
background-repeat: no-repeat;
width: 26px;
height: 26px;
background-position: center;
/* background-color: #000000; */
position: absolute;
top: 13px;
left: 206px;
}
#sidebar.max .button-unfold-sidebar {
display:none;
}
#sidebar.min .button-fold-sidebar {
display:none;
}
#sidebar.min .button-unfold-sidebar {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none slice' viewBox='0 0 7 11'%3e%3cpath fill='%23f9f9f9' d='M1.13 11.01l5.86-5.5L1.13.01.05 1.02l4.74 4.45L0 9.96 1.13 11z'/%3e%3c/svg%3e");
background-size: 7px 11px;
background-repeat: no-repeat;
width: 26px;
height: 26px;
background-position: center;
/* background-color: #000000; */
position: relative;
top: 8px;
left: 12px;
padding-bottom:10px;
}
#sidebar.min .top-section span.max{
display:none;
}
#sidebar.max .top-section span.min{
display:none;
}
.game_post_area {
width: 94%;
left: 30px;
}
.game_post_area .scroll_area ul li{
background-color:#0E0E10;
}
#list-container {
overflow-x: hidden;
background-color:#0E0E10;
}
#listMain #wrap {
min-width: 960px;
}
#listMain #wrap #serviceHeader {
min-width: 960px;
}
#listMain #wrap #list-container #list-section {
padding: 12px 22px 0 38px;
}
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,
.users-section.follow > .user.show-more,
.users-section.top > .user.show-more {
display: none;
}
#toggleButton, #toggleButton2, #toggleButton3 {
padding:12px;
color:#A1A1A1;
width: 100%;
text-align: center;
}
.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: 12px 0px 6px 0px;
}
#sidebar .top-section>span {
text-transform: uppercase;
font-weight: 550;
font-size: 14px;
margin-top: 6px;
margin-bottom: 2px;
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;
}
.users-section .user {
display: grid;
grid-template-areas: "profile-picture username watchers" "profile-picture description blank";
grid-template-columns: 40px auto auto;
padding: 6px 10px;
}
.users-section .user:hover {
background-color: #26262c;
cursor: pointer;
}
.users-section .user .profile-picture {
grid-area: profile-picture;
width: 32px;
height: 32px;
border-radius: 50%;
}
.users-section .user .username {
grid-area: username;
font-size: 14px;
font-weight: 600;
color:#DEDEE3;
letter-spacing: 0.6px;
margin-left:1px;
}
.users-section .user .description {
grid-area: description;
font-size: 13px;
color: #a1a1a1;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left:1px;
}
.users-section .user .watchers {
grid-area: watchers;
display: flex;
align-items: center;
justify-content: flex-end;
font-weight: 400;
font-size: 14px;
color: #c0c0c0;
margin-right: 2px;
}
.users-section .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;
display: flex;
}
.tooltip-container img {
position: relative;
z-index: 999;
width: auto;
height: auto;
max-width:320px;
max-height:240px
flex: 0;
}
.tooltiptext {
flex: 0;
position: relative;
z-index: 999;
width: 320px;
max-width: 100%; /* 넘치는 경우 최대 너비 */
height: auto;
background-color: #26262C;
color: #fff;
text-align: center;
align-items: center; /* 세로 가운데 정렬 */
justify-content: center; /* 가로 가운데 정렬 */
box-sizing: border-box; /* 패딩을 포함한 전체 너비 유지 */
padding: 8px 20px 14px 20px;
}
`;
const css_Whitemode = `
@media screen and (max-width: 1136px) {
.left_navbar a:first-child {
display: none;
}
}
#sidebar.max {
width: 240px;
}
#sidebar.min {
width: 52px;
}
#sidebar.min .users-section a.user span {
display: none;
}
#sidebar.min .users-section button {
font-size:11px;
padding: 1px;
}
#sidebar.max .button-fold-sidebar {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none slice' viewBox='0 0 7 11'%3e%3cpath fill='%23888' d='M5.87 11.01L.01 5.51 5.87.01l1.08 1.01-4.74 4.45L7 9.96 5.87 11z'/%3e%3c/svg%3e");
background-size: 7px 11px;
background-repeat: no-repeat;
width: 26px;
height: 26px;
background-position: center;
/* background-color: #000000; */
position: absolute;
top: 13px;
left: 206px;
}
#sidebar.max .button-unfold-sidebar {
display:none;
}
#sidebar.min .button-fold-sidebar {
display:none;
}
#sidebar.min .button-unfold-sidebar {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none slice' viewBox='0 0 7 11'%3e%3cpath fill='%23888' d='M1.13 11.01l5.86-5.5L1.13.01.05 1.02l4.74 4.45L0 9.96 1.13 11z'/%3e%3c/svg%3e");
background-size: 7px 11px;
background-repeat: no-repeat;
width: 26px;
height: 26px;
background-position: center;
/* background-color: #000000; */
position: relative;
top: 8px;
left: 12px;
padding-bottom:10px;
}
#sidebar.min .top-section span.max{
display:none;
}
#sidebar.max .top-section span.min{
display:none;
}
.game_post_area {
width: 94%;
left: 30px;
}
.game_post_area .scroll_area ul li{
background-color:#F7F7F8;
}
#list-container {
overflow-x: hidden;
background-color:#F7F7F8;
}
#listMain #wrap {
min-width: 960px;
}
#listMain #wrap #serviceHeader {
min-width: 960px;
}
#listMain #wrap #list-container #list-section {
padding: 12px 22px 0 38px;
}
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,
.users-section.follow > .user.show-more,
.users-section.top > .user.show-more {
display: none;
}
#toggleButton, #toggleButton2, #toggleButton3 {
padding:12px;
color:#53535F;
width: 100%;
text-align: center;
}
.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: 1F1F23;
font-size: 15px;
font-weight: 600;
}
.left_nav_button.active {
color: #0545B1;
}
#sidebar {
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: 12px 0px 6px 0px;
}
#sidebar .top-section>span {
text-transform: uppercase;
font-weight: 600;
font-size: 14px;
margin-top: 6px;
margin-bottom: 2px;
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;
}
.users-section .user {
display: grid;
grid-template-areas: "profile-picture username watchers" "profile-picture description blank";
grid-template-columns: 40px auto auto;
padding: 6px 10px;
}
.users-section .user:hover {
background-color: #E6E6EA;
cursor: pointer;
}
.users-section .user .profile-picture {
grid-area: profile-picture;
width: 32px;
height: 32px;
border-radius: 50%;
}
.users-section .user .username {
grid-area: username;
font-size: 14px;
font-weight: 600;
color:#1F1F23;
letter-spacing: 0.6px;
margin-left:1px;
}
.users-section .user .description {
grid-area: description;
font-size: 13px;
font-weight: 400;
color: #53535F;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left:1px;
}
.users-section .user .watchers {
grid-area: watchers;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 14px;
font-weight: 400;
color: black;
margin-right: 2px;
}
.users-section .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;
display: flex;
}
.tooltip-container img {
position: relative;
z-index: 999;
width: auto;
height: auto;
max-width:320px;
max-height:240px
flex: 0;
}
.tooltiptext {
flex: 0;
position: relative;
z-index: 999;
width: 320px;
max-width: 100%; /* 넘치는 경우 최대 너비 */
height: auto;
background-color: #E6E6EA;
color: black;
text-align: center;
align-items: center; /* 세로 가운데 정렬 */
justify-content: center; /* 가로 가운데 정렬 */
box-sizing: border-box; /* 패딩을 포함한 전체 너비 유지 */
padding: 8px 20px 14px 20px;
}
`;
const css_Darkmode_player = `
@media (max-width: 1320px) {
.layout_v2#webplayer.chat_open #webplayer_contents,
.layout_v2#webplayer.chat_open.list_open #webplayer_contents,
.layout_v2#webplayer.chat_open.list_bookmark_open #webplayer_contents {
min-width: 600px;
}
}
@media screen and (max-width: 1120px) {
.left_nav_button {
display: none;
}
}
#sidebar.max {
width: 240px;
}
#sidebar.min {
width: 52px;
}
#sidebar.min .users-section a.user span {
display: none;
}
#sidebar.min .users-section button {
font-size:11px;
padding: 1px;
}
#sidebar.max .button-fold-sidebar {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none slice' viewBox='0 0 7 11'%3e%3cpath fill='%23f9f9f9' d='M5.87 11.01L.01 5.51 5.87.01l1.08 1.01-4.74 4.45L7 9.96 5.87 11z'/%3e%3c/svg%3e");
background-size: 7px 11px;
background-repeat: no-repeat;
width: 26px;
height: 26px;
background-position: center;
/* background-color: #000000; */
position: absolute;
top: 13px;
left: 206px;
}
#sidebar.max .button-unfold-sidebar {
display:none;
}
#sidebar.min .button-fold-sidebar {
display:none;
}
#sidebar.min .button-unfold-sidebar {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none slice' viewBox='0 0 7 11'%3e%3cpath fill='%23f9f9f9' d='M1.13 11.01l5.86-5.5L1.13.01.05 1.02l4.74 4.45L0 9.96 1.13 11z'/%3e%3c/svg%3e");
background-size: 7px 11px;
background-repeat: no-repeat;
width: 26px;
height: 26px;
background-position: center;
/* background-color: #000000; */
position: relative;
top: 10px;
left: 12px;
padding-bottom:10px;
}
#sidebar.min .top-section span.max{
display:none;
}
#sidebar.max .top-section span.min{
display:none;
}
#afreecatv_player {
width: 100%;
}
.smode #webplayer_scroll {
top: 0;
left:0;
}
#webplayer_scroll{
left: ${webplayer_scroll_left}px;
}
#sidebar {
height:100vh;
grid-area: sidebar;
background-color: #1F1F23;
color:white;
overflow-y: auto;
position: fixed;
top: 56px;
}
#sidebar > :last-child {
padding-bottom: 240px; /* 마지막 자식에만 padding 추가 */
}
#sidebar::-webkit-scrollbar {
display: none; /* Chrome, Safari, Edge */
}
#sidebar .top-section {
display: flex;
align-items: center;
justify-content: space-around;
margin: 12px 0px 6px 0px;
}
#sidebar .top-section>span {
text-transform: uppercase;
font-weight: 550;
font-size: 14px;
margin-top: 6px;
margin-bottom: 2px;
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;
}
.users-section .user {
display: grid;
grid-template-areas: "profile-picture username watchers" "profile-picture description blank";
grid-template-columns: 40px auto auto;
padding: 6px 10px;
}
.users-section .user:hover {
background-color: #26262c;
cursor: pointer;
}
.users-section .user .profile-picture {
grid-area: profile-picture;
width: 32px;
height: 32px;
border-radius: 50%;
}
.users-section .user .username {
grid-area: username;
font-size: 14px;
font-weight: 600;
color:#DEDEE3;
letter-spacing: 0.6px;
margin-left:1px;
}
.users-section .user .description {
grid-area: description;
font-size: 13px;
color: #a1a1a1;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left:1px;
}
.users-section .user .watchers {
grid-area: watchers;
display: flex;
align-items: center;
justify-content: flex-end;
font-weight: 400;
font-size: 14px;
color: #c0c0c0;
margin-right: 2px;
}
.users-section .user .watchers .dot {
font-size: 7px;
margin-right: 5px;
}
#webplayer_top .logo {
top: 18px;
left: 18px;
}
.left_navbar {
display: flex;
align-items: center;
justify-content: flex-end;
position: absolute;
flex-direction: row-reverse;
top: 0px;
left: 140px;
}
.left_nav_button {
position: relative;
width: 70px;
height: 56px;
padding: 0;
border: 0;
border-radius: 50%;
cursor: pointer;
z-index: 3001;
transition: all .2s;
color: #e5e5e5;
font-size: 15px;
font-weight: 600;
}
.tooltip-container {
z-index: 999;
width: 320px;
height: auto;
position: fixed;
background-color: #26262C;
display: flex;
}
.tooltip-container img {
position: relative;
z-index: 999;
width: auto;
height: auto;
max-width:320px;
max-height:240px
flex: 0;
}
.tooltiptext {
flex: 0;
position: relative;
z-index: 999;
width: 320px;
max-width: 100%; /* 넘치는 경우 최대 너비 */
height: auto;
background-color: #26262C;
color: #fff;
text-align: center;
align-items: center; /* 세로 가운데 정렬 */
justify-content: center; /* 가로 가운데 정렬 */
box-sizing: border-box; /* 패딩을 포함한 전체 너비 유지 */
padding: 8px 20px 14px 20px;
}
.users-section.myplus > .user.show-more,
.users-section.follow > .user.show-more,
.users-section.top > .user.show-more {
display: none;
}
#toggleButton, #toggleButton2, #toggleButton3 {
padding:12px;
color:#A1A1A1;
width: 100%;
text-align: center;
}
`;
const css_Whitemode_player = `
@media (max-width: 1320px) {
.layout_v2#webplayer.chat_open #webplayer_contents,
.layout_v2#webplayer.chat_open.list_open #webplayer_contents,
.layout_v2#webplayer.chat_open.list_bookmark_open #webplayer_contents {
min-width: 600px;
}
}
@media screen and (max-width: 1120px) {
.left_nav_button {
display: none;
}
}
#afSearcharea .search_window .searchInputWrap {
border: 1px solid #E5E5E5 !important;
}
#webplayer_top {
border-bottom: 1px solid #E5E5E5 !important;
}
#sidebar.max {
width: 240px;
}
#sidebar.min {
width: 52px;
}
#sidebar.min .users-section a.user span {
display: none;
}
#sidebar.min .users-section button {
font-size:11px;
padding: 1px;
}
#sidebar.max .button-fold-sidebar {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none slice' viewBox='0 0 7 11'%3e%3cpath fill='%23888' d='M5.87 11.01L.01 5.51 5.87.01l1.08 1.01-4.74 4.45L7 9.96 5.87 11z'/%3e%3c/svg%3e");
background-size: 7px 11px;
background-repeat: no-repeat;
width: 26px;
height: 26px;
background-position: center;
/* background-color: #000000; */
position: absolute;
top: 13px;
left: 206px;
}
#sidebar.max .button-unfold-sidebar {
display:none;
}
#sidebar.min .button-fold-sidebar {
display:none;
}
#sidebar.min .button-unfold-sidebar {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none slice' viewBox='0 0 7 11'%3e%3cpath fill='%23888' d='M1.13 11.01l5.86-5.5L1.13.01.05 1.02l4.74 4.45L0 9.96 1.13 11z'/%3e%3c/svg%3e");
background-size: 7px 11px;
background-repeat: no-repeat;
width: 26px;
height: 26px;
background-position: center;
/* background-color: #000000; */
position: relative;
top: 8px;
left: 12px;
padding-bottom:10px;
}
#sidebar.min .top-section span.max{
display:none;
}
#sidebar.max .top-section span.min{
display:none;
}
#afreecatv_player {
width: 100%;
}
.smode #webplayer_scroll {
top: 0;
left:0;
}
#webplayer_scroll{
left: ${webplayer_scroll_left}px;
}
#sidebar {
width: 240px;
height:100vh;
grid-area: sidebar;
background-color: #EFEFF1;
color:white;
overflow-y: auto;
position: fixed;
top: 56px;
}
#sidebar > :last-child {
padding-bottom: 240px; /* 마지막 자식에만 padding 추가 */
}
#sidebar::-webkit-scrollbar {
display: none; /* Chrome, Safari, Edge */
}
#sidebar .top-section {
display: flex;
align-items: center;
justify-content: space-around;
margin: 12px 0px 6px 0px;
}
#sidebar .top-section>span {
text-transform: uppercase;
font-weight: 600;
font-size: 14px;
margin-top: 6px;
margin-bottom: 2px;
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;
}
.users-section .user {
display: grid;
grid-template-areas: "profile-picture username watchers" "profile-picture description blank";
grid-template-columns: 40px auto auto;
padding: 6px 10px;
}
.users-section .user:hover {
background-color: #E6E6EA;
cursor: pointer;
}
.users-section .user .profile-picture {
grid-area: profile-picture;
width: 32px;
height: 32px;
border-radius: 50%;
}
.users-section .user .username {
grid-area: username;
font-size: 14px;
font-weight: 600;
color:#1F1F23;
letter-spacing: 0.6px;
margin-left:1px;
}
.users-section .user .description {
grid-area: description;
font-size: 13px;
font-weight: 400;
color: #53535F;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left:1px;
}
.users-section .user .watchers {
grid-area: watchers;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 14px;
font-weight: 400;
color: black;
margin-right: 2px;
}
.users-section .user .watchers .dot {
font-size: 7px;
margin-right: 5px;
}
.tooltip-container {
z-index: 999;
width: 320px;
height: auto;
position: fixed;
background-color: #E6E6EA;
display: flex;
}
.tooltip-container img {
position: relative;
z-index: 999;
width: auto;
height: auto;
max-width:320px;
max-height:240px
flex: 0;
}
.tooltiptext {
flex: 0;
position: relative;
z-index: 999;
width: 320px;
max-width: 100%; /* 넘치는 경우 최대 너비 */
height: auto;
background-color: #E6E6EA;
color: black;
text-align: center;
align-items: center; /* 세로 가운데 정렬 */
justify-content: center; /* 가로 가운데 정렬 */
box-sizing: border-box; /* 패딩을 포함한 전체 너비 유지 */
padding: 8px 20px 14px 20px;
}
#webplayer_top .logo {
top: 18px;
left: 18px;
}
.left_navbar {
display: flex;
align-items: center;
justify-content: flex-end;
position: absolute;
flex-direction: row-reverse;
top: 0px;
left: 140px;
}
.left_nav_button {
position: relative;
width: 70px;
height: 56px;
padding: 0;
border: 0;
border-radius: 50%;
cursor: pointer;
z-index: 3001;
transition: all .2s;
color: #1F1F23;
font-size: 15px;
font-weight: 600;
}
.users-section.myplus > .user.show-more,
.users-section.follow > .user.show-more,
.users-section.top > .user.show-more {
display: none;
}
#toggleButton, #toggleButton2, #toggleButton3 {
padding:12px;
color:#53535F;
width: 100%;
text-align: center;
}
`;
//======================================공용 함수======================================//
function refreshPageOnDarkModeToggle() {
var modecheck1 = document.getElementById("modecheck");
var modecheck2 = document.getElementById("modecheck2");
if (modecheck1 !== null) {
modecheck1.addEventListener("change", function () {
location.reload();
});
}
if (modecheck2 !== null) {
modecheck2.addEventListener("change", function () {
location.reload();
});
}
}
function addNumberSeparator(number) {
// toLocaleString 메서드를 사용하여 숫자에 구분자 추가
number = Number(number);
return number.toLocaleString();
}
/*
function getCategoryName(cate_no){
if(savedCategory){
const categoryList = savedCategory.category_list;
const filteredList = categoryList.filter(word => !["전체", "제한"].some(keyword => word.menu_name.includes(keyword)));
const targetActionContent = cate_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 : findCateName(cate_no);
return result;
} else {
return findCateName(cate_no);
}
}*/
function getCategoryName(targetCateNo) {
function searchCategory(categories, targetCateNo) {
// 카테고리 배열을 순회합니다.
for (let category of categories) {
// 현재 카테고리의 cate_no가 목표 cate_no와 일치하는지 확인합니다.
if (category.cate_no === targetCateNo) {
// 일치하는 경우 cate_name을 반환합니다.
return category.cate_name;
} else {
// 현재 카테고리에 child가 있는지 확인합니다.
if (category.child && category.child.length > 0) {
// 재귀적으로 child 카테고리를 검색합니다.
let result = searchCategory(category.child, targetCateNo);
// 재귀 호출 결과가 null이 아니라면 해당 cate_name을 반환합니다.
if (result !== null) {
return result;
}
}
}
}
// cate_no에 해당하는 카테고리가 없는 경우 null을 반환합니다.
return null;
}
// 함수 호출 시 CHANNEL.BROAD_CATEGORY에서 시작합니다.
return searchCategory(savedCategory.CHANNEL.BROAD_CATEGORY, targetCateNo);
}
// 차단 목록을 저장합니다.
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 saveBlockedCategories() {
GM_setValue('blockedCategories', blockedCategories);
}
// 카테고리를 차단 목록에 추가합니다.
function blockCategory(categoryName, categoryId) {
// 이미 차단된 카테고리인지 확인
if (!isCategoryBlocked(categoryId)) {
blockedCategories.push({ categoryName, categoryId });
saveBlockedCategories();
alert(`카테고리 ${categoryName}(${categoryId})를 차단했습니다.`);
registerCategoryUnblockMenu({ categoryName, categoryId });
} else {
alert(`카테고리 ${categoryName}(${categoryId})는 이미 차단되어 있습니다.`);
}
}
// 함수: 카테고리 차단 해제
function unblockCategory(categoryId) {
// 차단된 카테고리 목록에서 해당 카테고리 찾기
let unblockedCategory = blockedCategories.find(category => category.categoryId === categoryId);
// 카테고리를 찾았을 때만 차단 해제 및 메뉴 삭제 수행
if (unblockedCategory) {
// 차단된 카테고리 목록에서 해당 카테고리 제거
blockedCategories = blockedCategories.filter(category => category.categoryId !== categoryId);
// 변경된 목록을 저장
GM_setValue('blockedCategories', blockedCategories);
alert(`카테고리 ${categoryId}의 차단이 해제되었습니다.`);
unregisterCategoryUnblockMenu(unblockedCategory.categoryName);
}
}
// 카테고리가 이미 차단되어 있는지 확인합니다.
function isCategoryBlocked(categoryId) {
return blockedCategories.some(category => category.categoryId === categoryId);
}
// 함수: 동적으로 카테고리 메뉴 등록
function registerCategoryUnblockMenu(category) {
// GM_registerMenuCommand로 카테고리 메뉴를 등록하고 메뉴 ID를 기록
let menuId = GM_registerMenuCommand(`💔 카테고리 차단 해제 - ${category.categoryName}`, function() {
unblockCategory(category.categoryId);
});
// 메뉴 ID를 기록
categoryMenuIds[category.categoryName] = menuId;
}
// 함수: 동적으로 카테고리 메뉴 삭제
function unregisterCategoryUnblockMenu(categoryName) {
// categoryName을 기반으로 저장된 메뉴 ID를 가져와서 삭제
let menuId = categoryMenuIds[categoryName];
if (menuId) {
GM_unregisterMenuCommand(menuId);
delete categoryMenuIds[categoryName]; // 삭제된 메뉴 ID를 객체에서도 제거
}
}
function waitForElement(elementSelector, callBack, attempts = 0, maxAttempts = 100) {
const element = document.querySelector(elementSelector);
if (element) {
callBack(elementSelector, element);
} else {
if (attempts < maxAttempts) {
setTimeout(function () {
waitForElement(elementSelector, callBack, attempts + 1, maxAttempts);
}, 200);
} else {
console.error('Reached maximum attempts. Element not found.');
}
}
}
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 makeTopNavbarAndSidebar(page){
// .left_navbar를 찾거나 생성
var leftNavbar = document.querySelector('.left_navbar');
if (!leftNavbar) {
leftNavbar = document.createElement('div');
leftNavbar.className = 'left_navbar';
// 페이지의 적절한 위치에 추가
var targetElement = document.body; // 원하는 위치에 따라 수정
targetElement.insertBefore(leftNavbar, targetElement.firstChild);
}
var buttonData = [
{ href: 'https://www.afreecatv.com/?hash=all', text: '전체' },
{ href: 'https://www.afreecatv.com/?hash=game', text: '게임' },
{ href: 'https://www.afreecatv.com/?hash=bora', text: '보.라' },
{ href: 'https://www.afreecatv.com/?hash=sports', text: '스포츠' }
];
buttonData.reverse().forEach(function (data) {
var newButton = document.createElement('a');
newButton.href = data.href;
newButton.innerHTML = ``;
leftNavbar.appendChild(newButton);
});
var tooltipContainer = document.createElement('div');
tooltipContainer.classList.add('tooltip-container');
let sidebarClass = "max";
if(sidebarMinimized){
sidebarClass = "min";
}
if(page==="main"){
const newHtml = `
`;
const serviceLnbElement = document.getElementById('serviceLnb');
if (serviceLnbElement) {
serviceLnbElement.insertAdjacentHTML('beforeend', newHtml);
}
var listsection = document.querySelector('#list-section');
listsection.appendChild(tooltipContainer);
}
if(page==="player"){
const sidebarHtml = `
`;
const webplayerElement = document.getElementById('webplayer');
if (webplayerElement) {
webplayerElement.insertAdjacentHTML('beforeend', sidebarHtml);
}
webplayerElement.appendChild(tooltipContainer);
}
}
function updateElementWithContent(targetElement, newContent) {
// DocumentFragment 생성
function createFragment(content) {
var fragment = document.createDocumentFragment();
var tempDiv = document.createElement('div');
tempDiv.innerHTML = content;
while (tempDiv.firstChild) {
fragment.appendChild(tempDiv.firstChild);
}
return fragment;
}
// 기존 내용을 지우고 DocumentFragment를 적용
function applyFragment(fragment) {
targetElement.innerHTML = ''; // 기존 내용을 모두 지움
targetElement.appendChild(fragment); // 새로운 내용 추가
}
// 호출 시점에 전달된 newContent를 사용하여 DocumentFragment 생성 후 적용
applyFragment(createFragment(newContent));
}
// 사용자 요소를 생성하는 함수
function createUserElement(channel) {
const userId = channel.user_id;
const broadNo = channel.broad_no;
const totalViewCnt = channel.total_view_cnt;
const broadTitle = channel.broad_title;
const userNick = channel.user_nick;
const playerLink = "https://play.afreecatv.com/"+userId+"/"+broadNo;
const broad_thumnail = `https://liveimg.afreecatv.com/m/${broadNo}`;
const userElement = document.createElement('a');
userElement.classList.add('user');
if(!open_newtab){
//userElement.setAttribute('onclick',`window.location.href='${playerLink}'`);
userElement.setAttribute('href',`${playerLink}`);
} else {
//userElement.setAttribute('onclick',`window.open('${playerLink}', '_blank')`);
userElement.setAttribute('href',`${playerLink}`);
userElement.setAttribute('target','_blank');
}
userElement.setAttribute('data-watchers',`${totalViewCnt}`);
userElement.setAttribute('broad_thumnail',`${broad_thumnail}`);
userElement.setAttribute('tooltip',`${broadTitle}`);
userElement.setAttribute('user_id',`${userId}`);
//userElement.setAttribute('broad_no',`${broadNo}`);
const profilePicture = document.createElement('img');
const pp_webp="https://stimg.afreecatv.com/LOGO/"+userId.slice(0, 2)+"/"+userId+"/m/"+userId+".webp";
const pp_jpg="https://profile.img.afreecatv.com/LOGO/"+userId.slice(0, 2)+"/"+userId+"/m/"+userId+".jpg";
profilePicture.src = pp_webp; // 프로필사진
profilePicture.setAttribute('onerror', `this.onerror=null; this.src='${pp_jpg}'`);
profilePicture.setAttribute('alt', `${userId}'`);
profilePicture.setAttribute('onclick', `event.preventDefault(); event.stopPropagation(); (document.getElementById('sidebar').offsetWidth === 52) ? (location.href = '${playerLink}') : window.open('https://bj.afreecatv.com/${userId}', '_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 = userNick; //스트리머명
const cat_no = channel.broad_cate_no;
const description = document.createElement('span');
description.classList.add('description');
description.textContent = getCategoryName(cat_no); //카테고리
userElement.setAttribute('broad_cate_no',`${cat_no}`);
const watchers = document.createElement('span');
watchers.classList.add('watchers');
if(coloring_live === 1){
if(channel.auto_hashtags[0]==="웰컴"){
watchers.innerHTML = `🟣${addNumberSeparator(totalViewCnt)}`;
} else if(channel.broad_resolution==="2560x1440"){
watchers.innerHTML = `🟠${addNumberSeparator(totalViewCnt)}`;
} else {
watchers.innerHTML = `🔴${addNumberSeparator(totalViewCnt)}`;
}
} else {
watchers.innerHTML = `🔴${addNumberSeparator(totalViewCnt)}`;
}
userElement.appendChild(profilePicture);
userElement.appendChild(username);
userElement.appendChild(description);
userElement.appendChild(watchers);
return userElement;
}
function isUserInFollowSection(userid) {
const followUsers = document.querySelectorAll('.users-section.follow .user');
// 유저가 포함되어 있는지 확인
for (const user of followUsers) {
if (user.getAttribute('user_id') === userid) {
return true; // 유저가 포함되어 있으면 true를 리턴
}
}
return false; // 유저가 포함되어 있지 않으면 false를 리턴
}
function insertFoldButton() {
const foldButton = `
`;
const newHtml = `${foldButton}`;
const webplayer_scroll = document.getElementById('webplayer_scroll') || document.getElementById('list-container');
const serviceLnbElement = document.getElementById('sidebar');
if (serviceLnbElement) {
serviceLnbElement.insertAdjacentHTML('beforeend', newHtml);
// 버튼 요소 가져오기
const buttons = serviceLnbElement.querySelectorAll('.button-fold-sidebar, .button-unfold-sidebar');
buttons.forEach(function(button) {
// 버튼에 클릭 이벤트 리스너 추가
button.addEventListener('click', function () {
// sidebar 상태 변경
sidebarMinimized = !sidebarMinimized;
// max 클래스가 있으면 제거하고 min 클래스 추가
if (serviceLnbElement.classList.contains('max')) {
serviceLnbElement.classList.remove('max');
serviceLnbElement.classList.add('min');
webplayer_scroll.style.left = '52px';
}
// min 클래스가 있으면 제거하고 min 클래스 추가
else if (serviceLnbElement.classList.contains('min')) {
serviceLnbElement.classList.remove('min');
serviceLnbElement.classList.add('max');
webplayer_scroll.style.left = '240px';
}
// sidebarMinimized 값을 저장
GM_setValue("sidebarMinimized", sidebarMinimized ? 1 : 0);
});
});
}
}
function insertTopChannels(update){
let topIcon = `
`;
if(isDarkMode){
topIcon = `
`;
}
if(!update){
const newHtml = `
인기 채널
${topIcon}
`;
const serviceLnbElement = document.getElementById('sidebar');
if (serviceLnbElement) {
serviceLnbElement.insertAdjacentHTML('beforeend', newHtml);
}
}
/*
if(aBroadList){
try {
const channels = aBroadList.broad;
// users-section에 동적으로 user 요소 추가
const usersSection = document.querySelector('.users-section.top');
channels.forEach(channel => {
if(isCategoryBlocked(channel.broad_cate_no)){
return;
}
if(isUserBlocked(channel.user_id)){
return;
}
const userElement = createUserElement(channel);
usersSection.appendChild(userElement);
});
usersSection.classList.add('loaded');
} catch (error) {
console.error('Error parsing JSON:', error);
}
} else {*/
const openList = document.querySelectorAll('.users-section.top .user:not(.show-more)').length;
GM_xmlhttpRequest({
method: 'GET',
url: 'https://live.afreecatv.com/api/main_broad_list_api.php?selectType=action&orderType=view_cnt&pageNo=1&lang=ko_KR',
headers: {
'Content-Type': 'application/json',
},
onload: function(response) {
try {
// 응답을 JSON으로 파싱
const jsonResponse = JSON.parse(response.responseText);
// 응답에서 필요한 정보 추출
const channels = jsonResponse.broad;
// users-section에 동적으로 user 요소 추가
const usersSection = document.querySelector('.users-section.top');
let temp_html = '';
channels.forEach(function(channel, index) {
if(isCategoryBlocked(channel.broad_cate_no)){
return;
}
if(isUserBlocked(channel.user_id)){
return;
}
const userElement = createUserElement(channel);
if(update){
temp_html += userElement.outerHTML;
} else {
usersSection.appendChild(userElement);
}
});
if(update){
updateElementWithContent(usersSection, temp_html);
}
usersSection.classList.add('loaded');
if(update){
showMore('.users-section.top', 'toggleButton3', openList, display_top);
} else {
showMore('.users-section.top', 'toggleButton3', display_top, display_top);
}
makethumbnailtooltip();
} catch (error) {
console.error('Error parsing JSON:', error);
}
},
onerror: function(error) {
console.error('Error:', error);
}
});
//}
}
function insertFavoriteChannels(response,update){
const openList = document.querySelectorAll('.users-section.follow .user:not(.show-more)').length;
let followIcon = `
`;
if(isDarkMode){
followIcon = `
`;
}
if(!update){
const newHtml = `
`;
const serviceLnbElement = document.getElementById('sidebar');
if (serviceLnbElement) {
serviceLnbElement.insertAdjacentHTML('beforeend', newHtml);
}
}
try {
const jsonData = response;
// users-section에 동적으로 user 요소 추가
const usersSection = document.querySelector('.users-section.follow');
let temp_html = '';
jsonData.data.forEach(function(item, index) {
if (item.broad_info.length > 0) {
let channel = item.broad_info[0];
const userElement = createUserElement(channel);
if(update){
temp_html += userElement.outerHTML;
} else {
usersSection.appendChild(userElement);
}
}
});
if(update){
updateElementWithContent(usersSection, temp_html);
}
document.querySelector('.users-section.follow').classList.add('loaded');
makethumbnailtooltip();
desc_order('.users-section.follow');
if(update){
showMore('.users-section.follow', 'toggleButton2', openList, display_follow);
} else {
showMore('.users-section.follow', 'toggleButton2', display_follow, display_follow);
}
} catch (error) {
console.error('Error parsing JSON:', error);
}
}
function insertMyplusChannels(update){
let myplusIcon = `
`;
if(isDarkMode){
myplusIcon = `
`;
}
if(!update){
const newHtml = `
MY+ 추천 채널
${myplusIcon}
`;
const serviceLnbElement = document.getElementById('sidebar');
if (serviceLnbElement) {
serviceLnbElement.insertAdjacentHTML('beforeend', newHtml);
}
}
const openList = document.querySelectorAll('.users-section.myplus .user:not(.show-more)').length;
GM_xmlhttpRequest({
method: 'GET',
url: 'https://live.afreecatv.com/api/myplus/preferbjLiveVodController.php?nInitCnt=6&szRelationType=C',
headers: {
'Content-Type': 'application/json',
},
onload: function(response) {
try {
// 응답을 JSON으로 파싱
const jsonResponse = JSON.parse(response.responseText);
// 응답에서 필요한 정보 추출
const channels = jsonResponse.DATA.live_list;
// users-section에 동적으로 user 요소 추가
const usersSection = document.querySelector('.users-section.myplus');
/*if(channels.length!==0){
const noti = document.querySelector('.twitch-message-section.myplus');
noti.style.display = 'none';
}*/
let temp_html = '';
channels.forEach(function(channel, index) {
if (isCategoryBlocked(channel.broad_cate_no)){
return;
}
if(isUserBlocked(channel.user_id)){
return;
}
if(update){
if(isUserInFollowSection(channel.user_id)){
return;
}
}
const userElement = createUserElement(channel);
if(update){
temp_html += userElement.outerHTML;
} else {
usersSection.appendChild(userElement);
}
});
if(update){
updateElementWithContent(usersSection, temp_html);
}
usersSection.classList.add('loaded');
makethumbnailtooltip();
if(!myplus_order){
desc_order('.users-section.myplus');
}
waitForElement('.users-section.follow.loaded', function (elementSelector, element) {
removeDuplicates();
});
if(update){
showMore('.users-section.myplus', 'toggleButton', openList, display_myplus);
} else {
showMore('.users-section.myplus', 'toggleButton', display_myplus, display_myplus);
}
} catch (error) {
console.error('Error parsing JSON:', error);
}
},
onerror: function(error) {
console.error('Error:', error);
}
});
}
function makethumbnailtooltip() {
try {
const elements = document.getElementsByClassName('user');
const tooltipcontainer = document.getElementsByClassName('tooltip-container')[0];
// 각 요소에 대해 반복하면서 이벤트 리스너 추가
for (const element of elements) {
// 이미 이벤트 리스너가 적용되어 있는지 확인
const hasEventListener = element.getAttribute('data-tooltip-listener') === 'true';
const username = element.querySelector('span.username');
const description = element.querySelector('span.description');
const watchers = element.querySelector('span.watchers');
if (!hasEventListener) {
element.addEventListener('mouseenter', function () {
const rect = this.getBoundingClientRect();
const elementX = rect.left + document.getElementById('sidebar').offsetWidth; // 요소의 X 좌표
const elementY = rect.top; // 요소의 Y 좌표
// 각 툴팁에 대해 위치 설정
const imgSrc = this.getAttribute('broad_thumnail');
const broad_title = this.getAttribute('tooltip');
let tooltipContent = broad_title;
if(document.getElementById('sidebar').offsetWidth===52){
tooltipContent = `${username.textContent} · ${description.textContent} · ${watchers.textContent}` + tooltipContent;
}
// 새로운 div 요소를 생성하고 스타일과 내용을 설정
tooltipcontainer.style.left = `${elementX}px`;
tooltipcontainer.style.top = `${elementY}px`;
tooltipcontainer.innerHTML = `
${tooltipContent}
`;
tooltipcontainer.style.display = 'block';
});
element.addEventListener('mouseleave', function () {
tooltipcontainer.style.display = 'none';
});
// 이벤트 리스너가 적용되었음을 표시
element.setAttribute('data-tooltip-listener', 'true');
}
}
} catch (error) {
console.error('makethumbnailtooltip 함수에서 오류가 발생했습니다:', error);
// 여기에 적절한 오류 처리 코드를 추가하세요
}
}
function showMore(containerSelector, buttonId, n, fixed_n) {
const userContainer = document.querySelector(containerSelector);
const users = userContainer.querySelectorAll('.user');
const displayperClick = clickDisplayCount || 10;
//n보다 목록이 적으면 함수를 끝낸다
if (users.length < fixed_n + 1) {
return false;
}
// n개를 넘는 모든 요소를 숨긴다
users.forEach((user, index) => {
if (index >= n) {
user.classList.add('show-more');
}
});
const toggleButton = document.createElement('button');
if(users.length === n){
toggleButton.textContent = `접기`;
} else {
toggleButton.textContent = `더 보기 (${users.length - n})`;
}
toggleButton.id = buttonId;
userContainer.appendChild(toggleButton);
const toggleButtonElement = document.getElementById(buttonId);
toggleButtonElement.addEventListener('click', function () {
const users = userContainer.querySelectorAll('.user'); // 전체
const hiddenUsers = userContainer.querySelectorAll('.user.show-more'); // 숨겨진 요소
let hiddenUsers_length = hiddenUsers.length;
// 조건: 클릭시 숨겨진 요소가 0 이상
if (hiddenUsers_length > 0) {
hiddenUsers.forEach((hiddenuser, index) => {
// 클릭당 보여질만큼 목록을 보여주고 숨긴 요소 숫자에서 개수를 뺀다
if (index < displayperClick) {
hiddenuser.classList.remove('show-more');
hiddenUsers_length = hiddenUsers_length - 1;
}
});
// 결과: 숨겨진 요소에 따라 버튼 이름 변경
if(hiddenUsers_length > 0){
toggleButtonElement.textContent = `더 보기(${hiddenUsers_length})`;
} else {
toggleButtonElement.textContent = `접기`;
}
} else { // 조건: 클릭시 숨겨진 요소가 0 = 초기화해야 함
users.forEach((user, index) => {
if (index >= fixed_n) {
user.classList.add('show-more');
//hiddenUsers_length = hiddenUsers_length + 1;
}
});
toggleButtonElement.textContent = `더 보기(${users.length - fixed_n})`;
}
});
}
function removeDuplicates(){
if(document.querySelectorAll('.users-section.follow > .user').length ===0){
return false;
}
// .users-section.follow > .user 모든 요소 반복
document.querySelectorAll('.users-section.follow > .user').forEach(followUser => {
const followUserId = followUser.getAttribute('user_id');
// .users-section.myplus > .user 모든 요소 반복
document.querySelectorAll('.users-section.myplus > .user').forEach(myplusUser => {
const myplusUserId = myplusUser.getAttribute('user_id');
// user_id 일치 여부 확인
if (followUserId === myplusUserId) {
// 일치할 경우 .user 요소 제거
myplusUser.remove();
}
});
});
}
function generateBroadcastElements(update){
GM_xmlhttpRequest({
method: 'GET',
url: 'https://myapi.afreecatv.com/api/favorite',
headers: {
'Content-Type': 'application/json',
},
onload: function(response) {
response = response.responseText;
response = JSON.parse(response);
// if 문으로 code 값 확인
if (response.code === -10000) {
//console.log('로그인 상태가 아닙니다.');
insertTopChannels(update);
waitForElement('.users-section.top.loaded', function (elementSelector, element) {
document.querySelector('.users-section.top.loaded').classList.add('nologinuser');
});
return false;
}
/*
let hasNonEmptyBroadInfo = false;
// "data" 배열의 각 요소를 확인하는 반복문
for (const item of response.data) {
// "broad_info"가 비어 있지 않은 경우
if (item.broad_info.length > 0) {
hasNonEmptyBroadInfo = true;
// 여기에 해당 요소에 대한 추가 동작을 수행할 수 있습니다.
break; // 만약 하나라도 비어 있지 않은 경우에 중단하려면 이 부분을 사용합니다.
}
}
*/
insertFavoriteChannels(response,update);
if(myplus_position){
insertMyplusChannels(update);
insertTopChannels(update);
} else {
insertTopChannels(update);
insertMyplusChannels(update);
}
},
onerror: function(error) {
console.error('Error:', error);
}
});
}
function removeStudioButton(){
var studioPlay = document.querySelector('#studioPlayKorPlayer') || document.querySelector('#studioPlayKor');
if (studioPlay) {
studioPlay.parentNode.removeChild(studioPlay);
}
}
//=================================공용 함수 끝======================================//
//=================================메인 페이지 함수===================================//
function blockButtonOnMutation(){
var target1 = document.querySelector('#broadlist_area > ul');
var target2 = document.querySelector('#btnRefresh');
var observer1 = new MutationObserver(function(mutations) {
//console.log('changed');
target2.classList.add('loaded');
waitForElement('.users-section.top.loaded.nologinuser', function (elementSelector, element) {
appendBlockbutton();
});
waitForElement('.users-section.myplus.loaded', function (elementSelector, element) {
waitForElement('.users-section.top.loaded', function (elementSelector, element) {
appendBlockbutton();
});
});
});
observer1.observe(target1, {
attributes: true,
childList: true
});
}
function appendBlockbutton(){
var nicknames = document.querySelectorAll('.cBox-info > .details > a.nick');
nicknames.forEach(function(nickname) {
if (!nickname.classList.contains("checked")) {
nickname.classList.add("checked");
var user_id = nickname.getAttribute('user_id');
if (isUserBlocked(user_id)) {
//nickname.parentNode.parentNode.parentNode.style.display = 'none';
nickname.parentNode.parentNode.parentNode.remove();
return;
}
if(!open_newtab){
const title_href = nickname.parentNode.parentNode.querySelector("h3 > a");
const thumbnail_href = nickname.parentNode.parentNode.parentNode.querySelector("a");
title_href.removeAttribute('target');
thumbnail_href.removeAttribute('target');
}
var user_name = nickname.querySelector('span').textContent;
nickname.addEventListener('click', function() {
setTimeout(() => {
var buttonElement = document.createElement('button');
buttonElement.type = 'button';
if(isDarkMode){
buttonElement.className = 'block-icon-svg-white';
} else {
buttonElement.className = 'block-icon-svg';
}
buttonElement.setAttribute('tip', '채널 차단');
var spanElement = document.createElement('span');
spanElement.textContent = '채널 차단';
buttonElement.appendChild(spanElement);
buttonElement.onclick = function() {
//nickname.parentNode.parentNode.parentNode.style.display = 'none';
nickname.parentNode.parentNode.parentNode.remove();
blockUser(user_name,user_id);
};
// contextMenu 내에 버튼 요소 추가
var contextMenu = document.querySelector('#contextMenu');
if (contextMenu) {
contextMenu.appendChild(buttonElement);
} else {
console.error('#contextMenu를 찾을 수 없습니다.');
}
var cate_no = nickname.parentNode.parentNode.querySelector('div.tag_wrap.checked').getAttribute('cate_no') || null;
if(cate_no){
var buttonElement2 = document.createElement('button');
buttonElement2.type = 'button';
if(isDarkMode){
buttonElement2.className = 'block-icon-svg-white';
} else {
buttonElement2.className = 'block-icon-svg';
}
buttonElement2.setAttribute('tip', '카테고리 차단');
var spanElement2 = document.createElement('span');
spanElement2.textContent = '카테고리 차단';
buttonElement2.appendChild(spanElement2);
buttonElement2.onclick = function() {
//nickname.parentNode.parentNode.parentNode.remove();
blockCategory(getCategoryName(cate_no),cate_no);
};
// contextMenu 내에 버튼 요소 추가
if (contextMenu) {
contextMenu.appendChild(buttonElement2);
} else {
console.error('#contextMenu를 찾을 수 없습니다.');
}
}
}, 100);
});
appendCategory(nickname);
}
});
}
function appendCategory(nickname){
var broadlist_area = nickname.parentNode.parentNode.parentNode.parentNode.parentNode.getAttribute('id');
var tagContainer = nickname.parentNode.parentNode.querySelector('.tag_wrap');
var user_id_list = nickname.getAttribute('user_id');
if(aBroadList){
const channels = aBroadList.broad;
for (const channel of channels) {
const cate_no = channel.broad_cate_no;
const cate_name = getCategoryName(channel.broad_cate_no);
const user_id_js = channel.user_id;
if (user_id_list === user_id_js){
if (isCategoryBlocked(cate_no)) {
nickname.parentNode.parentNode.parentNode.remove();
}
if(!tagContainer.classList.contains("checked")){
tagContainer.classList.add("checked");
tagContainer.setAttribute("cate_no",`${cate_no}`)
var newATag = document.createElement('a');
newATag.textContent = cate_name;
newATag.setAttribute("href",`javascript:`)
newATag.addEventListener('click', function() {
var cate_no_org = `${cate_no}`;
var tag_wrap_checked = document.querySelectorAll('.cBox-info > .tag_wrap.checked');
if(!newATag.classList.contains("clicked")){
newATag.classList.add("clicked");
tag_wrap_checked.forEach(function(element) {
var cate_no_dst = element.getAttribute('cate_no');
if (cate_no_org === cate_no_dst) {
element.querySelector('a').classList.add("clicked");
element.querySelector('a').textContent=cate_name+" ⨉";
return;
}
element.parentNode.parentNode.style.display = 'none';
});
} else {
newATag.classList.remove("clicked");
tag_wrap_checked.forEach(function(element) {
var cate_no_dst = element.getAttribute('cate_no');
if (cate_no_org === cate_no_dst) {
element.querySelector('a').classList.remove("clicked");
element.querySelector('a').textContent=cate_name;
return;
}
element.parentNode.parentNode.style.display = 'block';
});
}
});
tagContainer.insertBefore(newATag, tagContainer.firstChild);
return;
}
}
}
}
if(broadlist_area === "prefer_broadlist_area"){
waitForElement('div.users-section.myplus.loaded', function (elementSelector, element) {
var users = element.querySelectorAll('.user');
var cate_no;
let checker = 0;
users.forEach(function(user) {
var user_id_myplus = user.getAttribute('user_id');
if (user_id_list === user_id_myplus){
//nickname.parentNode.parentNode.parentNode.remove();
//console.log(user_id_myplus);
cate_no = user.getAttribute('broad_cate_no');
checker = 1;
return;
}
});
if(!checker){
nickname.parentNode.parentNode.parentNode.remove();
} else {
if(!tagContainer.classList.contains("checked")){
tagContainer.classList.add("checked");
tagContainer.setAttribute("cate_no",`${cate_no}`)
var newATag = document.createElement('a');
newATag.textContent = getCategoryName(cate_no);
newATag.setAttribute("href",`javascript:`)
newATag.addEventListener('click', function() {
var cate_no_org = `${cate_no}`;
var tag_wrap_checked = document.querySelectorAll('.cBox-info > .tag_wrap.checked');
if(!newATag.classList.contains("clicked")){
newATag.classList.add("clicked");
tag_wrap_checked.forEach(function(element) {
var cate_no_dst = element.getAttribute('cate_no');
if (cate_no_org === cate_no_dst) {
element.querySelector('a').classList.add("clicked");
element.querySelector('a').textContent=getCategoryName(cate_no)+" ⨉";
return;
}
element.parentNode.parentNode.style.display = 'none';
});
} else {
newATag.classList.remove("clicked");
tag_wrap_checked.forEach(function(element) {
var cate_no_dst = element.getAttribute('cate_no');
if (cate_no_org === cate_no_dst) {
element.querySelector('a').classList.remove("clicked");
element.querySelector('a').textContent=getCategoryName(cate_no);
return;
}
element.parentNode.parentNode.style.display = 'block';
});
}
});
tagContainer.insertBefore(newATag, tagContainer.firstChild);
return;
}
}
});
}
}
function setCategoryOnAjaxResponse(){
var intervalTime = 1000;
// setInterval을 사용하여 주기적으로 실행
var intervalId = setInterval(function() {
// $.ajax가 정의되었는지 확인
if ($.ajax) {
// clearInterval을 사용하여 간격 검사 중지
clearInterval(intervalId);
// 여기에 $.ajax가 설정된 후에 실행할 스크립트를 작성
//console.log('$.ajax is defined:', $.ajax);
// 원본 jQuery.ajax 함수 저장
var originalAjax = $.ajax;
// 새로운 jQuery.ajax 함수 정의
$.ajax = function(settings) {
var url = settings.url;
var data = settings.data;
// 원본 jQuery.ajax 함수 호출
return originalAjax.apply(this, [settings]).done(function(responseData, textStatus, jqXHR) {
if(url==="https://live.afreecatv.com/api/main_broad_list_api.php"){
// tag_wrap_checked가 비어있지 않고, 그 안에 클래스가 'clicked'인 a 태그가 하나라도 있다면 클릭
var isClicked = 0;
var tag_wrap_checked = document.querySelectorAll('.cBox-info > .tag_wrap.checked');
if (tag_wrap_checked.length > 0) {
for (var i = 0; i < tag_wrap_checked.length; i++) {
var aTags = tag_wrap_checked[i].querySelectorAll('a.clicked');
if (aTags.length > 0) {
// 여러 a 태그 중 첫 번째 것을 클릭
aTags[0].click();
isClicked = 1;
break; // 이미 클릭한 경우 더 이상 확인할 필요가 없으므로 반복문 종료
}
}
}
var nicknames = document.querySelectorAll('.cBox-info > .details > a');
nicknames.forEach(function(nickname) {
var tagContainer = nickname.parentNode.parentNode.querySelector('.tag_wrap');
var user_id_org = nickname.getAttribute('user_id');
const elements = responseData.broad;
for (const element of elements) {
const user_id_dst = element.user_id;
if (user_id_org === user_id_dst) {
const cate_no = element.broad_cate_no;
const cate_name = getCategoryName(cate_no);
if (isCategoryBlocked(cate_no)){
nickname.parentNode.parentNode.parentNode.remove();
return;
}
if (!tagContainer.classList.contains("checked")) {
tagContainer.classList.add("checked");
tagContainer.setAttribute("cate_no", `${cate_no}`);
var newATag = document.createElement('a');
newATag.textContent = cate_name;
newATag.setAttribute("href", `javascript:`);
newATag.addEventListener('click', function() {
var cate_no_org = `${cate_no}`;
var tag_wrap_checked = document.querySelectorAll('.cBox-info > .tag_wrap.checked');
if (!newATag.classList.contains("clicked")) {
newATag.classList.add("clicked");
tag_wrap_checked.forEach(function(element) {
var cate_no_dst = element.getAttribute('cate_no');
if (cate_no_org === cate_no_dst) {
element.querySelector('a').classList.add("clicked");
element.querySelector('a').textContent = `${cate_name} ⨉`;
return;
}
element.parentNode.parentNode.style.display = 'none';
});
} else {
newATag.classList.remove("clicked");
tag_wrap_checked.forEach(function(element) {
var cate_no_dst = element.getAttribute('cate_no');
if (cate_no_org === cate_no_dst) {
element.querySelector('a').classList.remove("clicked");
element.querySelector('a').textContent = cate_name;
return;
}
element.parentNode.parentNode.style.display = 'block';
});
}
});
tagContainer.insertBefore(newATag, tagContainer.firstChild);
}
break; // user_id 일치하는 첫 번째 요소만 처리하고 반복문 종료
}
}
});
if(isClicked){
aTags[0].click();
}
}
}).fail(function(jqXHR, textStatus, errorThrown) {
// 실패한 응답 로깅
console.log('JQuery AJAX Error:', textStatus, errorThrown);
});
};
}
}, intervalTime);
}
//=================================메인 페이지 함수 끝===================================//
//=================================플레이어 페이지 함수 ===================================//
function detectSmode() {
var target = document.querySelector('body');
var webplayerScroll1 = document.getElementById('webplayer_scroll');
var firstRun = 1;
var observer = new MutationObserver(function(mutations) {
var overlay = document.getElementById('overlay');
var sidebar = document.getElementById('sidebar');
var bodyClasses = target.classList;
if (bodyClasses.contains('smode')){
document.querySelector('#sidebar').style.display = 'none';
document.querySelector('.left_navbar').style.display = 'none';
webplayerScroll1.style.left = '0';
overlay.style.zIndex = '9999';
sidebar.style.top = '0px';
GM_setValue("playerSmode", 1);
} else {
document.querySelector('#sidebar').style.display = '';
document.querySelector('.left_navbar').style.display = '';
if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
webplayerScroll1.style.left = '0';
} else {
webplayerScroll1.style.left = `${document.getElementById('sidebar').offsetWidth}px`;
}
overlay.style.zIndex = '-1';
sidebar.style.top = '56px';
if(firstRun && smodeSidebar) autoScreenMode(preplayerSmode);
GM_setValue("playerSmode", 0);
firstRun = 0;
}
});
observer.observe(target, {
attributeFilter: ['class']
});
}
function detectFullscreenmode(){
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
document.addEventListener('MSFullscreenChange', handleFullscreenChange);
function handleFullscreenChange() {
var sidebar = document.getElementById('sidebar');
var webplayerTop = document.getElementById('webplayer_top');
var leftNavbar = document.querySelector('.left_navbar');
var webplayerScroll = document.getElementById('webplayer_scroll');
if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
// 전체화면 모드일 때
hideElement(sidebar);
hideElement(webplayerTop);
hideElement(leftNavbar);
webplayerScroll.style.left = '0px';
} else {
// 전체화면 모드가 아닐 때
showElement(sidebar);
showElement(webplayerTop);
showElement(leftNavbar);
webplayerScroll.style.left = `${document.getElementById('sidebar').offsetWidth}px`;
}
}
function hideElement(element) {
element.style.visibility = 'hidden';
}
function showElement(element) {
element.style.visibility = 'visible';
}
}
function appendPauseButton(){
try {
var button = document.querySelector("button#time_shift_play");
if (button) {
var displayStyle = window.getComputedStyle(button).getPropertyValue("display");
if (displayStyle === "none") {
var ctrlDiv = document.querySelector('div.ctrl');
var closeStreamButton = document.createElement("button");
closeStreamButton.setAttribute("type", "button");
closeStreamButton.setAttribute("id", "closeStream");
closeStreamButton.setAttribute("class", "pause on");
var tooltipDiv = document.createElement("div");
tooltipDiv.setAttribute("class", "tooltip");
var spanElement = document.createElement("span");
spanElement.textContent = "일시정지";
var emElement = document.createElement("em");
tooltipDiv.appendChild(spanElement);
tooltipDiv.appendChild(emElement);
closeStreamButton.appendChild(tooltipDiv);
ctrlDiv.insertBefore(closeStreamButton, ctrlDiv.firstChild);
closeStreamButton.addEventListener("click", function(e) {
e.preventDefault();
try {
if (closeStreamButton.classList.contains("on")) {
// livePlayer 변수가 정의되어 있어야 합니다.
livePlayer.closeStreamConnector();
closeStreamButton.classList.remove("on", "pause");
closeStreamButton.classList.add("off", "play");
spanElement.textContent = "재생";
} else {
// livePlayer 변수가 정의되어 있어야 합니다.
livePlayer._startBroad();
closeStreamButton.classList.remove("off", "play");
closeStreamButton.classList.add("on", "pause");
spanElement.textContent = "일시정지";
}
} catch (error) {
console.log(error);
}
});
} else {
console.log("button#time_shift_play의 style은 display: none;이 아닙니다.");
}
} else {
console.log("button#time_shift_play를 찾을 수 없습니다.");
}
} catch (error) {
console.error(error);
}
}
function showSidebarOnMouseOver(){
var sidebar = document.getElementById('sidebar');
var videoLayer = document.getElementById('videoLayer');
// div#videoLayer의 세로 크기 가져오기
var videoLayerHeight = videoLayer.clientHeight;
// Create overlay div
var overlay = document.createElement('div');
overlay.id = 'overlay';
// Set styles for overlay
overlay.style.position = 'fixed';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '52px';
overlay.style.height = (videoLayerHeight - 80) + 'px';
//overlay.style.backgroundColor = 'rgba(0, 0, 0, 0)';
overlay.style.zIndex = '-1';
// Append overlay to the body
document.body.appendChild(overlay);
// Add event listener to overlay and sidebar
overlay.addEventListener('mouseover', function() {
handleSidebarMouseOver();
});
sidebar.addEventListener('mouseover', function() {
handleSidebarMouseOver();
});
// Function to handle mouseover event for sidebar
function handleSidebarMouseOver() {
var body = document.body;
var sidebar = document.getElementById('sidebar');
var webplayerScroll = document.getElementById('webplayer_scroll');
if (body.classList.contains('smode') && sidebar.style.display === 'none') {
sidebar.style.display = '';
sidebar.style.top = '0px';
if (webplayerScroll.style.left === '0px') {
var sidebarWidth = document.getElementById('sidebar').offsetWidth;
//var sidebarHeight = document.getElementById('sidebar').offsetHeight;
webplayerScroll.style.left = sidebarWidth + 'px';
overlay.style.zIndex = '-1';
//overlay.style.width = sidebarWidth + 'px';
//overlay.style.height = sidebarHeight + 'px';
}
}
}
// Add event listener to overlay for mouseout
sidebar.addEventListener('mouseout', function() {
var body = document.body;
var sidebar = document.getElementById('sidebar');
var webplayerScroll = document.getElementById('webplayer_scroll');
// div#videoLayer 요소 가져오기
var videoLayer = document.getElementById('videoLayer');
// div#videoLayer의 세로 크기 가져오기
var videoLayerHeight = videoLayer.clientHeight;
// overlay의 높이 설정
if (body.classList.contains('smode')) {
if (sidebar.style.display !== 'none') {
sidebar.style.top = '56px';
sidebar.style.display = 'none';
webplayerScroll.style.left = '0px';
overlay.style.width = '52px';
overlay.style.height = (videoLayerHeight - 80) + 'px';
overlay.style.zIndex = '9999';
}
} else {
overlay.style.zIndex = '-1';
}
});
}
function autoScreenMode(playerSmode){
if(playerSmode){
console.log(playerSmode);
waitForElement('button.btn_smode', function (elementSelector, element) {
element.click();
console.log(element);
});
}
}
function toggleLowLatencyShortcut(){
document.querySelectorAll('input').forEach(input => {
input.addEventListener('focus', function() {
delayCheckEnabled = false; // 포커스를 받으면 delayCheckEnabled를 false로 설정하여 함수 실행을 막습니다.
});
input.addEventListener('blur', function() {
delayCheckEnabled = true; // 포커스를 잃으면 delayCheckEnabled를 true로 설정하여 함수 실행을 허용합니다.
});
});
const writeArea = document.getElementById('write_area');
writeArea.addEventListener('input', function() {
// write_area에 입력될 때마다 delayCheckEnabled를 false로 설정하여 함수 실행을 막습니다.
delayCheckEnabled = false;
});
document.addEventListener('keydown', function(event) {
const isDPressed = event.keyCode === 68;
// 모든 입력 상자와 write_area에 포커스가 없는 상태에서 D 키가 눌렸을 때만 toggleDelayCheck 함수 실행
if (isDPressed && document.activeElement.nodeName !== 'INPUT' && document.activeElement.id !== 'write_area') {
toggleDelayCheck();
}
});
function toggleDelayCheck() {
delayCheckEnabled = !delayCheckEnabled;
const delayCheckElement = document.getElementById('delay_check');
delayCheckElement.click();
showPlayerBar();
}
function showPlayerBar(){
const player = document.getElementById('afreecatv_player');
player.classList.remove('mouseover');
player.classList.add('mouseover');
const settingButton = document.querySelector('#afreecatv_player > div.player_ctrlBox > div.right_ctrl > div.setting_box > button.btn_setting');
const settingBoxOn = document.querySelector('.setting_box.on');
if (settingButton) {
if (!settingBoxOn) {
settingButton.click();
}
setTimeout(function(){
if (settingBoxOn) {
settingButton.click();
}
setTimeout(function(){
player.classList.remove('mouseover');
},250);
},750);
} else {
console.error('Setting button not found or not visible.');
}
}
const labelElement = document.querySelector('#afreecatv_player > div.player_ctrlBox > div.right_ctrl > div.setting_box > div > ul > li.checkbox_wrap > label');
if (labelElement) {
let labelText = labelElement.innerHTML;
labelText = labelText.replace('시차 단축', '시차 단축(d)');
labelElement.innerHTML = labelText;
} else {
console.error('Label element not found.');
}
}
function checkPlayerPageHeaderAd() {
waitForElement('#header_ad', function (elementSelector, element) {
element.remove();
})
}
//=================================플레이어 페이지 함수 끝 ===================================//
//============================ 메인 페이지 실행 ============================//
if (currentUrl.startsWith("https://www.afreecatv.com")) {
if(isDarkMode){
GM_addStyle(css_Darkmode);
} else {
GM_addStyle(css_Whitemode);
}
makeTopNavbarAndSidebar("main");
waitForElement('.left_nav_button', function (elementSelector, element) {
// Get the current page URL
const currentPage = window.location.href;
// Get all navigation links
const navLinks = document.querySelectorAll('.left_nav_button');
// Loop through each link and check if it matches the current page
navLinks.forEach(link => {
var parentLink = link.parentElement;
if (parentLink.href === currentPage) {
link.classList.add('active'); // Add the 'active' class if it matches
}
});
});
blockButtonOnMutation();
setCategoryOnAjaxResponse();
if (currentUrl === "https://www.afreecatv.com/?hash=bora" || currentUrl === "https://www.afreecatv.com/?hash=game" || currentUrl === "https://www.afreecatv.com/?hash=sports") {
waitForElement('button.refresh.loaded', function (elementSelector, element) {
setTimeout(function () {
var refreshButton = document.getElementById('btnRefresh');
refreshButton.click();
}, 1000);
});
}
}
//============================ 플레이어 페이지 실행 ============================//
if(playerSidebar){
if (currentUrl.includes("play.afreecatv.com")) {
// 함수 호출
detectSmode();
detectFullscreenmode();
appendPauseButton();
if(isDarkMode){
GM_addStyle(css_Darkmode_player);
} else {
GM_addStyle(css_Whitemode_player);
}
makeTopNavbarAndSidebar("player");
insertFoldButton();
toggleLowLatencyShortcut();
if(smodeSidebar) showSidebarOnMouseOver();
checkPlayerPageHeaderAd();
// #webplayer_top > h1 > a 요소 가져오기
var linkElement = document.querySelector("#webplayer_top > h1 > a");
// 만약 요소가 존재하고 target 속성이 있다면 제거
if (linkElement && linkElement.hasAttribute("target")) {
linkElement.removeAttribute("target");
}
}
}
//============================ 공용 실행 ============================//
// 메뉴를 통합한 동작 정의
GM_registerMenuCommand("❓ 1440P #웰컴 색 표시 " + (coloring_live ? "(ON → OFF)" : "(OFF → ON)"), function() {
// coloring_live 값 변경
coloring_live = coloring_live ? 0 : 1;
// 변경된 값 저장
GM_setValue("coloring_live", coloring_live);
alert("설정 값이 변경되었습니다. 새로고침 후 적용됩니다.");
});
GM_registerMenuCommand("❓ MY+/인기 우선순위 변경 " + (myplus_position ? "(MY+ → 인기)" : "(인기 → MY+)"), function() {
// coloring_live 값 변경
myplus_position = myplus_position ? 0 : 1;
// 변경된 값 저장
GM_setValue("myplus_position", myplus_position);
alert("설정 값이 변경되었습니다. 새로고침 후 적용됩니다.");
});
GM_registerMenuCommand("❓ MY+ 정렬 변경 " + (myplus_order ? "(추천순 → 시청자순)" : "(시청자순 → 추천순)"), function() {
// coloring_live 값 변경
myplus_order = myplus_order ? 0 : 1;
// 변경된 값 저장
GM_setValue("myplus_order", myplus_order);
alert("설정 값이 변경되었습니다. 새로고침 후 적용됩니다.");
});
GM_registerMenuCommand(`❓ 더 보기 1클릭당 추가될 목록의 수 (${clickDisplayCount})`, function() {
var clickDisplayCount = prompt('1 이상의 숫자를 입력', 10);
if (parseInt(clickDisplayCount) >= 1){
GM_setValue("clickDisplayCount", parseInt(clickDisplayCount));
alert("설정 값이 변경되었습니다. 새로고침 후 적용됩니다.");
} else {
alert("유효한 숫자를 입력해주세요");
}
});
GM_registerMenuCommand("❓ 방송목록 클릭 시 " + (open_newtab ? "(새 탭 → 현재 탭)" : "(현재 탭 → 새 탭)"), function() {
// coloring_live 값 변경
open_newtab = open_newtab ? 0 : 1;
// 변경된 값 저장
GM_setValue("open_newtab", open_newtab);
alert("설정 값이 변경되었습니다. 새로고침 후 적용됩니다.");
});
GM_registerMenuCommand("❓ 플레이어 페이지에서 사이드바 사용 " + (playerSidebar ? "(ON → OFF)" : "(OFF → ON)"), function() {
// coloring_live 값 변경
playerSidebar = playerSidebar ? 0 : 1;
// 변경된 값 저장
GM_setValue("playerSidebar", playerSidebar);
alert("설정 값이 변경되었습니다. 새로고침 후 적용됩니다.");
});
GM_registerMenuCommand("❓ 스크린모드에 좌측 마우스오버 사이드바 " + (smodeSidebar ? "(ON→OFF)" : "(OFF→ON)"), function() {
// coloring_live 값 변경
smodeSidebar = smodeSidebar ? 0 : 1;
// 변경된 값 저장
GM_setValue("smodeSidebar", smodeSidebar);
alert("설정 값이 변경되었습니다. 새로고침 후 적용됩니다.");
});
GM_registerMenuCommand(`❔ 즐겨찾기 표시 수 설정 (${display_follow})`, function() {
var num_follow = prompt('0 이상의 숫자를 입력', 6);
if (parseInt(num_follow) >= 0){
GM_setValue("display_follow", parseInt(num_follow));
alert("설정 값이 변경되었습니다. 새로고침 후 적용됩니다.");
} else {
alert("유효한 숫자를 입력해주세요");
}
});
GM_registerMenuCommand(`❔ MY+ 추천 표시 수 설정 (${display_myplus})`, function() {
var num_myplus = prompt('0 이상의 숫자를 입력', 6);
if (parseInt(num_myplus) >= 0){
GM_setValue("display_myplus", parseInt(num_myplus));
alert("설정 값이 변경되었습니다. 새로고침 후 적용됩니다.");
} else {
alert("유효한 숫자를 입력해주세요");
}
});
GM_registerMenuCommand(`❔ 인기 채널 표시 수 설정 (${display_top})`, function() {
var num_top = prompt('0 이상의 숫자를 입력', 6);
if (parseInt(num_top) >= 0){
GM_setValue("display_top", parseInt(num_top));
alert("설정 값이 변경되었습니다. 새로고침 후 적용됩니다.");
} else {
alert("유효한 숫자를 입력해주세요");
}
});
blockedUsers.forEach(function(user) {
registerUnblockMenu(user);
});
blockedCategories.forEach(function(category) {
registerCategoryUnblockMenu(category);
});
refreshPageOnDarkModeToggle();
removeStudioButton();
generateBroadcastElements(0);
setInterval(function() {
generateBroadcastElements(1);
}, 60*1000);
if(installMessage){
alert("\n\n✔설정 페이지는\n✔tampermonkey 확장 아이콘 클릭(브라우저 오른쪽 위)\n(이 메시지는 설치 후 한 번만 표시 됩니다)");
GM_setValue("installMessage", 0);
}
})();