ytcd/docs/assets/index-BpVNZrte.js

(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const o of document.querySelectorAll('link[rel="modulepreload"]'))r(o);new MutationObserver(o=>{for(const i of o)if(i.type==="childList")for(const s of i.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&r(s)}).observe(document,{childList:!0,subtree:!0});function t(o){const i={};return o.integrity&&(i.integrity=o.integrity),o.referrerPolicy&&(i.referrerPolicy=o.referrerPolicy),o.crossOrigin==="use-credentials"?i.credentials="include":o.crossOrigin==="anonymous"?i.credentials="omit":i.credentials="same-origin",i}function r(o){if(o.ep)return;o.ep=!0;const i=t(o);fetch(o.href,i)}})();class nt{parent;__hidden=!1;domEvents={};on(t,r,o){this.domEvents[t]||(this.domEvents[t]=new Map);const i=s=>r(s,this);return this.domEvents[t].set(r,i),this.dom.addEventListener(t,i,o),this}off(t,r,o){const i=this.domEvents[t]?.get(r);return i&&this.dom.removeEventListener(t,i,o),this}once(t,r,o){const i=s=>{this.dom.removeEventListener(t,i,o),r(s,this)};return this.dom.addEventListener(t,i,o),this}hide(t){return $.fluent(this,arguments,()=>this.__hidden,()=>{if(t!==void 0)return t instanceof ut?(this.__hidden=t.value,t.use(this,"hide")):this.__hidden=t,this.parent?.children.render(),this})}remove(){return this.parent?.children.remove(this).render(),this}replace(t){return this.parent?.children.replace(this,t).render(),this}contains(t){return t?t instanceof nt?this.dom.contains(t.dom):t instanceof EventTarget?this.dom.contains($(t).dom):this.dom.contains(t):!1}self(t){return t(this),this}inDOM(){return document.contains(this.dom)}isElement(){if(this instanceof ot)return this}static from(t){if(t.$)return t.$;if(t instanceof HTMLElement){const r=$(t.tagName);return r.dom=t,t.parentElement&&(r.parent=$(t.parentElement)),r}else if(t instanceof Text){const r=new vt(t.textContent??"");return r.dom=t,t.parentElement&&(r.parent=$(t.parentElement)),r}throw"$NODE.FROM: NOT SUPPORT TARGET ELEMENT TYPE"}}class ot extends nt{dom;static_classes=new Set;constructor(t,r){super(),this.dom=document.createElement(t),this.dom.$=this,this.setOptions(r)}setOptions(t){return this.id(t?.id),t&&t.class&&this.class(...t.class),this}id(t){return $.fluent(this,arguments,()=>this.dom.id,()=>$.set(this.dom,"id",t))}class(...t){return $.fluent(this,arguments,()=>this.dom.classList,()=>{this.dom.classList.forEach(r=>this.static_classes.has(r)??this.dom.classList.remove(r)),this.dom.classList.add(...t.detype())})}addClass(...t){return $.fluent(this,arguments,()=>this,()=>{this.dom.classList.add(...t.detype())})}removeClass(...t){return $.fluent(this,arguments,()=>this,()=>{this.dom.classList.remove(...t.detype())})}staticClass(...t){return $.fluent(this,arguments,()=>this.static_classes,()=>{this.removeClass(...this.static_classes),this.static_classes.clear(),this.addStaticClass(...t)})}addStaticClass(...t){return $.fluent(this,arguments,()=>this,()=>{t.detype().forEach(r=>this.static_classes.add(r)),this.addClass(...t)})}removeStaticClass(...t){return $.fluent(this,arguments,()=>this,()=>{t.detype().forEach(r=>this.static_classes.delete(r)),this.removeClass(...t)})}css(t){return $.fluent(this,arguments,()=>this.dom.style,()=>{Object.assign(this.dom.style,t)})}attribute(t,r){return arguments.length?arguments.length===1?t===void 0?null:this.dom.getAttribute(t):arguments.length===2?(t&&r&&this.dom.setAttribute(t,`${r}`),this):this:null}autocapitalize(t){return $.fluent(this,arguments,()=>this.dom.autocapitalize,()=>$.set(this.dom,"autocapitalize",t))}dir(t){return $.fluent(this,arguments,()=>this.dom.dir,()=>$.set(this.dom,"dir",t))}innerText(t){return $.fluent(this,arguments,()=>this.dom.innerText,()=>$.set(this.dom,"innerText",t))}title(t){return $.fluent(this,arguments,()=>this.dom.title,()=>$.set(this.dom,"title",t))}translate(t){return $.fluent(this,arguments,()=>this.dom.translate,()=>$.set(this.dom,"translate",t))}popover(t){return $.fluent(this,arguments,()=>this.dom.popover,()=>$.set(this.dom,"popover",t))}spellcheck(t){return $.fluent(this,argument
yt-live-chat-renderer yt-live-chat-ticker-renderer,
yt-live-chat-renderer yt-live-chat-message-input-renderer,
yt-live-chat-renderer #reaction-control-panel-overlay,
yt-live-chat-renderer #action-panel,
yt-live-chat-renderer #inline-toast-container,
yt-live-chat-renderer #panel-pages,
yt-live-chat-renderer #promo,
yt-live-chat-viewer-engagement-message-renderer,
yt-live-chat-banner-manager,
yt-live-chat-docked-message,
yt-live-chat-paid-message-renderer {
  display: none !important;
}
#item-scroller {
  overflow: hidden !important;
}
html, body, yt-live-chat-app, yt-live-chat-renderer {
  background: #00000000 !important;
}
yt-live-chat-text-message-renderer #message, yt-live-chat-text-message-renderer #author-name {
  word-wrap: break-word;
}
yt-live-chat-text-message-renderer {
  position: relative;
  overflow: hidden;
}
yt-live-chat-text-message-renderer #author-photo {
  overflow: hidden;
  flex-shrink: 0;
}
yt-live-chat-text-message-renderer #author-photo img {
  height: 100%;
  width: 100%;
}
yt-live-chat-text-message-renderer #content {
  width: 100%;
}
yt-live-chat-text-message-renderer #menu {
  display: none;
}
yt-live-chat-text-message-renderer #chat-badges {
  display: flex !important;
  align-items: center !important;
  gap: 0.2rem !important;
}
yt-live-chat-text-message-renderer yt-live-chat-author-chip {
  align-items: unset !important;
}
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {
  display: block;
  height: 16px;
  width: 16px;
  fill: #5e84f1;
}

`,Mt={version:"v1.0.7",github_homepage:"https://github.com/defaultkavy/youtube-chat-designer",author_link:"https://x.com/defaultkavy"},Z=new Map,Ut=["Normal","Member","Moderator","Owner"],zt=["Message","Name","Avatar","Time","Author Area","Content Area","Outer Area"],hr=["Message","Name","Time"],ur=["Badge","Avatar"],re=new Map,rt=f("view"),K=new dr().css({backgroundColor:"#131313"}).send({name:"ひとり",message:"Hover mouse on the message will show the author role info.",role:"Normal"}).send({name:"郁代",message:"Shift + Left Click on Role list to select multiple role, edit selected role settings in once.",role:"Member"}).send({name:"リョウ",message:"If you want to save your settings, using Copy JSON and save it, you can paste the JSON to recovery your settings.",role:"Moderator"}).send({name:"虹夏",message:"Try to send message for test your design.",role:"Owner"});be();const qt=f("app").content([f("h1").content(["YouTube Chat Designer",f("span").content(Mt.version),f("a").content("GitHub").href(Mt.github_homepage).target("_blank"),f("a").content("@defaultkavy").href(Mt.author_link).target("_blank")]),f("div").class("content").content([f("div").class("console").content([f("div").class("menu").content([f("div").class("action-row").content([f("div").class("role-list").content([f("button").content("ROLE").on("click",()=>{const e=f("::.role-checkbox"),t=!e.find(r=>r.checked()===!1);e.slice(t?1:0).forEach(r=>r.checked(!t)),ae()}),f("div").content([Ut.map(e=>[f("div").class("role").content(t=>[f("input").class("role-checkbox").type("checkbox").value(e).id(e.toLowerCase()).on("input",ae),f("label").content(e).for(e.toLowerCase()).on("click",r=>{const o=f("::.role-checkbox"),i=t.$(`input#${e.toLowerCase()}`),s=o.filter(n=>n.checked()).length>1;if(r.shiftKey)return s?void 0:i.checked()?r.preventDefault():void 0;if(i.checked()&&!s)return r.preventDefault();i.checked()&&s&&r.preventDefault(),o.forEach(n=>{n.id()!==e.toLowerCase()&&n.checked(!1)})})])])])]),f("div").class("button-list").content([f("div").class("button-group").content([f("span").content("JSON"),f("button").content("Paste").self(e=>{let t;e.on("click",async r=>{const o=await navigator.clipboard.readText();try{const i=JSON.parse(o);be(i)}catch{e.content("Error!").class("error").removeClass("done"),t&&clearTimeout(t),t=setTimeout(()=>{e.removeClass("error").content("Paste"),t=void 0},3e3);return}xe(),e.content("Pasted!").class("done").removeClass("error"),t&&clearTimeout(t),t=setTimeout(()=>{e.removeClass("done").content("Paste"),t=void 0},3e3)})}),f("button").content("Copy").self(e=>{let t;e.on("click",r=>{navigator.clipboard.writeText(JSON.stringify(pr())),e.content("Copied!").class("done"),t&&clearTimeout(t),t=setTimeout(()=>{e.removeClass("done").content("Copy"),t=void 0},3e3)})})]),f("div").class("button-group").content([f("span").content("CSS"),f("button").content("Copy").self(e=>{let t;e.on("click",r=>{navigator.clipboard.writeText(cr()),e.content("Copied!").class("done"),t&&clearTimeout(t),t=setTimeout(()=>{e.removeClass("done").content("Copy"),t=void 0},3e3)})})])])]),f("div").class("element-list").content(e=>[zt.map(t=>f("button").staticClass("element-button").content(t).on("click",(r,o)=>rt.switchView(t)).self(r=>{rt.event.on("switch",o=>{o!==t?r.removeClass("active"):r.addClass("active")})}).on("mouseenter",r=>{K.showHint(t)}))]).on("mouseleave",e=>{K.hideHint()})]),rt]),f("div").class("preview").content([f("header").content([f("h2").content("YouTube Chat Preview"),new Ct("ytchat-background-color").label("Background Color").value("#131313").on("input",(e,t)=>{K.css({backgroundColor:t.$color.value()})})]),K,f("div").class("input-panel").content([f("div").content([f("select").id("role-select").add([Ut.map(e=>f("option").content(e).value(e))]),f("input").id("username").placeholder("User Name")]),f("div").content([f("textarea").id("message-input").attribute("placeholder","Type here...").on("keydown",e=>{e.key==="Enter"&&(e.preventDefault(),de())}),f("button").content("Send").on("click",e=>{de()})])])])])]);f(document.body).content(qt);xe();window.addE
`;e+=`${n} {
${a}
}

`}return e;function t(r){return r.replaceAll(/[A-Z]/g,o=>`-${o.toLowerCase()}`)}}function pr(){const e={};for(const[t,r]of Z.entries()){const o={};for(const[i,s]of r.entries())o[i]=s.data;e[t]=o}return e}function mr(){innerWidth<700?f(document.body).content(f("div").content([`Please use a screen with a width greeter than 700px. Current width: ${innerWidth}px`])):qt.inDOM()||f(document.body).content(qt)}function gr(e){switch(void 0){case e.gap:e.gap="0px";case e.float:e.float="none"}return e}