Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Comments: Sidebar update #1697

Merged
merged 9 commits into from
Jul 4, 2023
Merged

Comments: Sidebar update #1697

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ca2e738
Sidebar update
D-Rekk Jun 5, 2023
d1230e3
Updated Sidebar
D-Rekk Jun 7, 2023
b0c8312
Updated selectors
D-Rekk Jun 9, 2023
db43ad4
Created function to style scrollbars
D-Rekk Jun 9, 2023
2616276
Updated styles
D-Rekk Jun 10, 2023
5306412
Style + Script cleanup
D-Rekk Jun 12, 2023
e2faa9c
Update styles
D-Rekk Jun 14, 2023
7a6117a
Merge branch 'feature-scrollbar'
D-Rekk Jun 14, 2023
d770f8e
typo + closing 'feature-scrollbar' branch
D-Rekk Jun 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 119 additions & 10 deletions js&css/extension/www.youtube.com/appearance/comments/comments.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,127 @@
# Hide avatars
--------------------------------------------------------------*/

@media screen and (min-width: 1599px) {
html[data-page-type=video][it-comments-sidebar='true'] #player { margin-left: -20px !important;}
html[data-page-type=video][it-comments-sidebar='true'] #columns { display:flex !important; max-width:100% !important;}
html[data-page-type=video][it-comments-sidebar='true'] #comments { max-width: min(850px, 19vw) !important; margin-left:-12px; }
html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] #comments { max-right: -25px !important; }
html[data-page-type=video][it-comments-sidebar='true'] #related { margin-right: -22px !important; max-width: max(360px, 18vw) !important; }
html[data-page-type=video][it-comments-sidebar='true'] #secondary { margin-right: -22px !important; max-width: max(360px, 18vw) !important; }

html[data-page-type=video][it-comments-sidebar='true']:not([it-player-size='1080p']):not([it-player-size='1440p']):not([it-player-size='2160p']):not([it-player-size='custom']):not([it-player-size='max_width']) ytd-watch-flexy:not([fullscreen]) #primary {
min-width: min(calc(100vw - 1000px), 1260px) !important; max-width: 1260px !important; }
/* 2 COLS FEATURE */
@media screen and (min-width: 1952px) {
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #related { flex-shrink: 4; min-width: 300px;}
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #related { width: auto !important;}
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #columns { max-width: 100%;}
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary {min-width: 300px !important; max-width: 420px;}
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary {
flex: 0 0 auto;
max-width: 1280px !important;
}
html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary {flex-shrink: 2;}


/*--------------------------------------------------------------
#TODO: there should be 2 new option in settings:
1 - [it-comments-sidebar-left] so we can shift comments-sidebar to the left (should appear only when 'Comments:Sidebar' is activated).
2 - [swap-sidebars] so we exchange the sidebars order (that would only apply to 1952px+ wide-screens, because player resize
is messy AT THE MOMENT. Once resize works properly we can re-arrange this entire media-screen in its own setting option too).
Might also think on the edge-cases were both options are active
--------------------------------------------------------------*/
html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #secondary {order: 6;} /*TO DELETE once top is implemented*/


/* PADDINGS */
html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #primary {padding: 0 14px 0 24px;}
html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #secondary {padding-right: 0;}
html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #secondary-inner {padding-left: 14px; padding-right: 14px;}
html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #primary {padding: 0 14px}
html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #secondary-inner {padding-right: 24px; padding-left: 14px}
html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #related,
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #related{ height: inherit; overflow-y: scroll}
html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #secondary{border-right: 1px solid var(--yt-spec-10-percent-layer)}
html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #secondary{border-left: 1px solid var(--yt-spec-10-percent-layer)}
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #related > :first-child {padding-top: 24px;}

html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #related{ padding: 0 14px 0 24px; border-right: 1px solid var(--yt-spec-10-percent-layer) }
html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #related{ padding: 0 24px 0 14px; border-left: 1px solid var(--yt-spec-10-percent-layer)}
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[theater] #columns,
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[fullscreen] #columns {height: auto}
html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #secondary{border-left: 1px solid var(--yt-spec-10-percent-layer)}
}


@media screen and (min-width: 1000px) and (max-width: 1951px) {
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary {max-width: calc((100% - 420px) - 48px) !important;} /*UP TO (-658px)*/
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary { width: unset !important; max-width: 420px !important;} /*UP TO 658px*/
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #columns {max-width: 100%; min-width: unset !important;}
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary { margin-right: 0; padding-right: 0 !important; min-width: 300px !important;}
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary-inner {padding-left: 24px; padding-right: 24px;}

html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[theater] #primary,
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[fullscreen] #primary{
margin: 0;
padding: 24px 24px 0 24px;
}

html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #primary-content {overflow: hidden;}
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns {justify-content: flex-start !important; overflow-x: scroll;}

}
@media screen and (min-width: 1000px){
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary,
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary{margin-top: 0 !important; padding-top: 0 !important; padding-right: 0;}
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary::before { content: ""; height: 24px; display: block;}
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary {flex: 1 0 auto;padding: 0 24px; margin: 0;}
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary-inner {padding-top: 24px;}
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #player {margin: 0 auto;}

/* BORDERS */
html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #secondary{border-right: 1px solid var(--yt-spec-10-percent-layer)}
html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #secondary{border-left: 1px solid var(--yt-spec-10-percent-layer)}


/* DIFFERENT HEADERS HEIGHT */
html[data-page-type=video][it-comments-sidebar='true'][it-header-position=normal] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns, /* BUG: if header has never been changed back and forth to normal, [it-header-position=normal] selector isn't applied */
html[data-page-type=video][it-comments-sidebar='true']:not([it-header-position^=h]) ytd-watch-flexy:not([theater]):not([fullscreen]) #columns, /* temporary fix */
html[data-page-type=video][it-comments-sidebar='true'][it-header-position=static] #columns{
height: calc(100vh - 56px);
}
html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hover] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns,
html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hover_on_video_page] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns{
height: calc(100vh - 14px);
}
html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hidden] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns,
html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hidden_on_video_page] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns{
height: calc(100vh);
}

html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #primary,
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary{
height: inherit; overflow-y: scroll; overflow-x: hidden !important;
}
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns {overflow: hidden;}
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[theater] #columns
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[fullscreen] #columns{
height: auto;
}
}


html[data-page-type=video][it-comments-sidebar='true'] #contentContainer::after {pointer-events: none !important;} /*DISABLES the swap-from-left channels sidebar*/
html[data-page-type=video][it-comments-sidebar='true'] ytd-reel-shelf-renderer {width: 100%; padding: 0 16px; box-sizing: border-box;}
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #playlist,
html[data-page-type=video][it-comments-sidebar='true'] ytd-live-chat-frame#chat,
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #donation-shelf{
width: 100% !important; min-width: unset !important;
}

/* GRID RELATED */
html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-secondary-results-renderer ytd-compact-video-renderer,
html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-secondary-results-renderer ytd-compact-radio-renderer,
html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-secondary-results-renderer ytd-compact-playlist-renderer,
html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-secondary-results-renderer ytd-continuation-item-renderer {
min-width: 300px; max-width: 420px !important; flex-grow: 1; flex-basis: 0 !important; flex-direction: row; margin-right: 8px;
}

/* CUSTOM ENHANCEMENTS */
html[data-page-type=video] #playlist #items { max-height: calc(70px * 4 + 4px) ; padding-bottom: 0;} /* MIGHT FIX #1693, currently shows up to 4 videos */
html[data-page-type=video] ytd-watch-flexy #chat > tp-yt-paper-button#label { width:calc(100% - 40px); }
html[data-page-type=video] ytd-watch-flexy #right-arrow-container.ytd-merch-shelf-renderer { right: 44px !important; }

/*--------------------------------------------------------------
# COLLAPSED
--------------------------------------------------------------*/
Expand Down
130 changes: 121 additions & 9 deletions js&css/web-accessible/www.youtube.com/appearance.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,15 +138,127 @@ ImprovedTube.playerRemainingDuration = function () {
/*------------------------------------------------------------------------------
Comments Sidebar
------------------------------------------------------------------------------*/
ImprovedTube.commentsSidebar = function() { if(ImprovedTube.storage.comments_sidebar === true){
if(window.matchMedia("(min-width: 1599px)").matches) {
document.querySelector("#primary").insertAdjacentElement('afterend', document.querySelector("#comments"));}
if(window.matchMedia("(max-width: 1598px)").matches) {
document.querySelector("#related").insertAdjacentElement('beforebegin', document.querySelector("#comments"));
setTimeout(function () {
document.querySelector("#primary-inner").appendChild(document.querySelector("#related"));}
);}
}
ImprovedTube.commentsSidebar = function() {
const video = document.querySelector("#player .ytp-chrome-bottom") || document.querySelector("#container .ytp-chrome-bottom");
let hasApplied = 0;
if(ImprovedTube.storage.comments_sidebar === true){
sidebar();
styleScrollbars();
setGrid();
applyObserver();
window.addEventListener("resize", sidebar)
}
function sidebar(){
resizePlayer();
if(window.matchMedia("(min-width: 1952px)").matches) {

if (!hasApplied) {
initialSetup()
setTimeout(() => {document.getElementById("columns").appendChild(document.getElementById("related"))})
}
else if (hasApplied == 2){ //from medium to big size
setTimeout(() => {document.getElementById("columns").appendChild(document.getElementById("related"))})
}
hasApplied = 1
}
else if(window.matchMedia("(min-width: 1000px)").matches) {
if (!hasApplied) {
initialSetup();
}
else if (hasApplied == 1){ //from big to medium
document.getElementById("primary-inner").appendChild(document.getElementById("related"));
}
hasApplied = 2
}
else { /// <1000
if(hasApplied == 1){
document.getElementById("primary-inner").appendChild(document.getElementById("related"));
let comments = document.querySelector("#comments");
let below = document.getElementById("below");
below.appendChild(comments);
}
else if (hasApplied == 2){
let comments = document.querySelector("#comments");
let below = document.getElementById("below");
below.appendChild(comments);
}
hasApplied = 0;
}
}
function setGrid(){
let checkParentInterval = setInterval(() => {
container = document.querySelector("#related ytd-compact-video-renderer.style-scope")?.parentElement;
if (container) {
clearInterval(checkParentInterval);
container.style.display = "flex";
container.style.flexWrap = "wrap";
}
}, 250);
}
function initialSetup() {
let secondaryInner = document.getElementById("secondary-inner");
let primaryInner = document.getElementById("primary-inner");
let comments = document.querySelector("#comments");
setTimeout(() => {
primaryInner.appendChild(document.getElementById("panels"));
primaryInner.appendChild(document.getElementById("related"))
secondaryInner.appendChild(document.getElementById("chat-template"));
secondaryInner.appendChild(comments);
})
}
function resizePlayer() {
const width = video.offsetWidth + 24;
const player = document.querySelector("#player.style-scope.ytd-watch-flexy");
document.getElementById("primary").style.width = `${width}px`;
player.style.width = `${width}px`;
}
function styleScrollbars(){
if (!navigator.userAgent.toLowerCase().includes("mac")){
let color, colorHover
const isDarkMode = getComputedStyle(document.querySelector('ytd-app')).getPropertyValue('--yt-spec-base-background') == "#0f0f0f";
if(isDarkMode) [color,colorHover] = ["#616161", "#909090"];
else [color,colorHover] = ["#aaaaaa", "#717171"];
const style = document.createElement("style");
const cssRule = `
#primary, #secondary {
overflow: overlay !important;
}

::-webkit-scrollbar
{
width: 16px;
height: 7px;
}

::-webkit-scrollbar-thumb{
background-color: ${color};
border-radius: 10px;
border: 4px solid transparent;
background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover{
background-color: ${colorHover};
}`;
style.appendChild(document.createTextNode(cssRule));
document.head.appendChild(style);
}
}
function applyObserver(){
const debouncedResizePlayer = debounce(resizePlayer, 200);
const resizeObserver = new ResizeObserver(debouncedResizePlayer);
resizeObserver.observe(video);
}
function debounce(callback, delay) {
let timerId;
return function (...args) {
clearTimeout(timerId);
timerId = setTimeout(() => {
callback.apply(this, args);
}, delay);
};
}

}
/*------------------------------------------------------------------------------
SIDEBAR
Expand Down