To Disable YouTube Live Chat Container CSS
目前為
// ==UserScript==
// @name Disable YouTube Live Chat Container CSS
// @namespace UserScript
// @match https://www.youtube.com/live_chat*
// @grant none
// @version 0.0.9
// @license MIT
// @author CY Fung
// @description To Disable YouTube Live Chat Container CSS
// @run-at document-start
// ==/UserScript==
((__CONTEXT__) => {
/* bug: tabview - https://www.youtube.com/live_chat?continuation= ... */
const addCss = () => document.head.appendChild(document.createElement('style')).textContent = `
@supports (contain: layout paint style) {
/* optional */
#item-offset.style-scope.yt-live-chat-item-list-renderer {
height: auto !important;
min-height: unset !important;
}
#items.style-scope.yt-live-chat-item-list-renderer {
transform: translateY(0px) !important;
/*padding-bottom: 0 !important;
padding-top: 0 !important;*/
}
/* optional */
yt-icon[icon="down_arrow"] > *,
yt-icon-button#show-more > * {
pointer-events: none !important;
}
#item-list.style-scope.yt-live-chat-renderer[class],
#item-list.style-scope.yt-live-chat-renderer[class] *,
yt-live-chat-item-list-renderer.style-scope.yt-live-chat-renderer[class],
yt-live-chat-item-list-renderer.style-scope.yt-live-chat-renderer[class] *
#item-list.style-scope.yt-live-chat-renderer[class] [class],
yt-live-chat-item-list-renderer.style-scope.yt-live-chat-renderer[class] [class] {
will-change: unset !important;
}
[wSr93] {
content-visibility: visible;
}
[wSr93="hidden"]:nth-last-child(n+4) {
content-visibility: auto;
contain-intrinsic-size: auto var(--wsr94);
}
yt-img-shadow[height][width] {
content-visibility: visible !important;
}
#item-offset.style-scope.yt-live-chat-item-list-renderer > #items.style-scope.yt-live-chat-item-list-renderer {
position: static !important;
}
/*
yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip,
yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer,
yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer #image,
yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer #image img {
contain: layout style;
display: inline-flex;
vertical-align: middle;
}
*/
#items yt-live-chat-text-message-renderer {
contain: layout style;
}
yt-live-chat-item-list-renderer:not([allow-scroll]) #item-scroller.yt-live-chat-item-list-renderer {
overflow-y: scroll;
padding-right: 0;
}
body yt-live-chat-app {
contain: size layout paint style;
overflow: hidden;
}
#items.style-scope.yt-live-chat-item-list-renderer {
contain: layout paint style;
}
#item-offset.style-scope.yt-live-chat-item-list-renderer {
contain: style;
}
#item-scroller.style-scope.yt-live-chat-item-list-renderer {
contain: size style;
}
#contents.style-scope.yt-live-chat-item-list-renderer,
#chat.style-scope.yt-live-chat-renderer,
img.style-scope.yt-img-shadow[width][height] {
contain: size layout paint style;
}
.style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label],
.style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label] > #container {
contain: layout paint style;
}
yt-live-chat-text-message-renderer.style-scope.yt-live-chat-item-list-renderer,
yt-live-chat-membership-item-renderer.style-scope.yt-live-chat-item-list-renderer,
yt-live-chat-paid-message-renderer.style-scope.yt-live-chat-item-list-renderer,
yt-live-chat-banner-manager.style-scope.yt-live-chat-item-list-renderer {
contain: layout style;
}
tp-yt-paper-tooltip[style*="inset"][role="tooltip"] {
contain: layout paint style;
}
/*
#item-offset.style-scope.yt-live-chat-item-list-renderer {
position: relative !important;
height: auto !important;
}
*/
}
`;
const { Promise, requestAnimationFrame } = __CONTEXT__;
const fxOperator = (proto, propertyName) => {
let propertyDescriptorGetter = null;
try {
propertyDescriptorGetter = Object.getOwnPropertyDescriptor(proto, propertyName).get;
} catch (e) { }
return typeof propertyDescriptorGetter === 'function' ? (e) => propertyDescriptorGetter.call(e) : (e) => e[propertyName];
};
const nFirstElem = fxOperator(HTMLElement.prototype, 'firstElementChild');
const nPrevElem = fxOperator(HTMLElement.prototype, 'previousElementSibling');
const nNextElem = fxOperator(HTMLElement.prototype, 'nextElementSibling');
const nLastElem = fxOperator(HTMLElement.prototype, 'lastElementChild');
let done = 0;
let main = async () => {
if (done) return;
let m1, m2;
let maxN = 8;
while (!m1 || !m2) {
if (--maxN < 0) return;
m1 = document.querySelector('#item-offset.style-scope.yt-live-chat-item-list-renderer');
m2 = document.querySelector('#items.style-scope.yt-live-chat-item-list-renderer');
if (m1 && m2) break;
await new Promise(resolve => requestAnimationFrame(resolve));
}
done = 1;
addCss();
const sp7 = Symbol();
const dummy = {
transform: '',
height: '',
maxHeight: '',
paddingBottom: '',
paddingTop: ''
};
for(const k of ['toString', 'getPropertyPriority', 'getPropertyValue', 'item', 'removeProperty', 'setProperty']){
dummy[k]=((k)=>(function(){ const style = this[sp7]; return style[k](...arguments);}))(k)
}
const itemOffset = m1;
const items = m2;
const ph = {
get(target, prop) {
return (prop in dummy) ? dummy[prop] : prop === sp7 ? target: target[prop];
},
set(target, prop ,value){
if(!(prop in dummy)) {
target[prop] = value;
}
return true;
},
has(target,prop){
return (prop in target)
},
deleteProperty(target,prop){
return true;
},
ownKeys(target) {
return Object.keys(target);
},
defineProperty(target, key, descriptor) {
return Object.defineProperty(target, key, descriptor);
// return true;
},
getOwnPropertyDescriptor(target, key) {
return Object.getOwnPropertyDescriptor(target, key);
},
}
const d1= new Proxy(m1.style,ph);
const d2= new Proxy(m2.style,ph);
Object.defineProperty(m1, 'style', { get() { return d1 }, set() { }, });
Object.defineProperty(m2, 'style', { get() { return d2 }, set() { }, });
m1.removeAttribute("style");
m2.removeAttribute("style");
let p1 = 0;
document.addEventListener('click', (evt) => {
if (!evt.isTrusted) return;
const target = ((evt || 0).target || 0)
if (target.id === 'show-more') {
if (target.nodeName.toLowerCase() !== 'yt-icon-button') return;
if (Date.now() - p1 < 80) return;
requestAnimationFrame(() => {
p1 = Date.now();
target.click();
})
}
})
let btnShowMore = null;
requestAnimationFrame(()=>{
btnShowMore = document.querySelector('#show-more.yt-live-chat-item-list-renderer');
})
const visObserver = new IntersectionObserver((entries)=>{
for(const entry of entries){
const target = entry.target;
if(!target) continue;
if ( entry.isIntersecting === true ){
target.style.setProperty('--wsr94', entry.boundingClientRect.height+'px');
target.setAttribute('wSr93', 'visible');
if(nNextElem(target)===null) {
Promise.resolve().then(()=>{
if(btnShowMore && btnShowMore.isConnected){
btnShowMore.click();
}else{
btnShowMore = document.querySelector('#show-more.yt-live-chat-item-list-renderer');
}
if(btnShowMore) btnShowMore.click();
});
}
}
else if(target.getAttribute('wSr93')=== 'visible') {
target.style.setProperty('--wsr94', entry.boundingClientRect.height+'px');
target.setAttribute('wSr93', 'hidden');
}
}
}, {
/*
root: items,
rootMargin: "0px",
threshold: 1.0,
*/
});
const mutObserver = new MutationObserver((mutations)=>{
let node = nLastElem(items);
for(;node !== null; node = nPrevElem(node)){
if( node.hasAttribute('wSr93') )break;
node.setAttribute('wSr93','');
visObserver.observe(node);
}
});
mutObserver.observe(m2, {
childList: true,
subtree: false
});
};
main();
function onReady() {
main();
}
if (document.readyState != 'loading') {
onReady();
} else {
window.addEventListener("DOMContentLoaded", onReady, false);
}
})({ Promise, requestAnimationFrame });