youtube-sticky-show-less.user.js

/* 
	Youtube sticky Show Less button: Makes SHOW LESS button to be "sticky" 
	to the video description section, so you can easily fold a long description 
	without scrolling it all the way to its bottom.
	Copyright (C) 2025  T1mL3arn

	This program is free software: you can redistribute it and/or modify
	it under the terms of the GNU General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

	This program is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU General Public License for more details.
	You should have received a copy of the GNU General Public License
	along with this program. If not, see <https://www.gnu.org/licenses/>.
*/

// ==UserScript==
// @name        Youtube sticky Show Less button
// @description Makes SHOW LESS button to be "sticky" to the video description section, so you can easily fold a long description without scrolling it all the way to its bottom.
// @description:RU Делает кнопку СВЕРНУТЬ в описании видео "липкой". Чтобы свернуть длинное описание теперь не нужно прокручивать это описание в самый низ.
// @namespace   https://github.com/t1ml3arn-userscript-js
// @version     2.0.0
// @match				https://www.youtube.com/*
// @match       https://youtube.com/*
// @noframes
// @grant       none
// @author      T1mL3arn
// @homepageURL	https://github.com/t1ml3arn-userscript-js/Youtube-sticky-SHOW-LESS-button
// @supportURL	https://github.com/t1ml3arn-userscript-js/Youtube-sticky-SHOW-LESS-button/issues
// @license			GPL-3.0-only
// ==/UserScript==


const SHOWLESS_BTN_WRAP_CLS = 'sticky-show-less-btn-wrap';
const STICKY_STYLE_ELT_ID = 'sticky-states-css'

const STICKY_STYLESHEET_CONTENT = `

.${SHOWLESS_BTN_WRAP_CLS} {
	text-align: right;
	position: fixed;
  top: 50%;
	pointer-events: none;
	z-index: 999;
}

tp-yt-paper-button#collapse {
	pointer-events: initial;
	padding: 6px 16px;
	background: darkseagreen;
	color: white;
	margin-top: 0 !important;
}
`;

let SETTINGS = {
	videoDescriptionSelector: 'ytd-video-secondary-info-renderer',
	videoTitleSelector: 'div#info.ytd-watch-flexy',
	showLessBtnSelector: 'ytd-expander.ytd-video-secondary-info-renderer tp-yt-paper-button#less.ytd-expander',
}

function addCss(css, id) {
	const style = document.head.appendChild(document.createElement('style'))
	style.textContent = css;
	style.id = id;
}

function getVisibleElt(selector) {
	return Array.from(document.querySelectorAll(selector)).find(e => e.offsetParent != null)
}

function fixScroll() {
	
	if (areCommentsVisible())
		preserveCommentsOnScreen()
	else if (isDescriptionTopEdgeOutView())
		scrollDescriptionIntoView();
	else {
		// console.debug('do nothing with scroll')
	}
}

function areCommentsVisible() {
	const vpHeight = window.visualViewport.height
	const commentsTop = getVisibleElt('ytd-comments').getBoundingClientRect().top

	return commentsTop < vpHeight;
}

function preserveCommentsOnScreen() {
	const descriptionElt = document.querySelector(SETTINGS.videoDescriptionSelector)
	// scrollOffset must not be negative!
	const scrollOffset = Math.abs(descriptionElt.getBoundingClientRect().height - descriptionHeight)
	let { scrollX, scrollY } = window;
	
	// console.debug('preserve comments:', scrollY, scrollOffset, scrollY - scrollOffset)

	scrollY = scrollY - scrollOffset;
	window.scrollTo(scrollX, scrollY)
}

function isDescriptionTopEdgeOutView() {
	const descriptionElt = document.querySelector(SETTINGS.videoTitleSelector);

	return descriptionElt.getBoundingClientRect().top < 0
}

function scrollDescriptionIntoView() {
	// console.debug('scroll description into view')
	document.querySelector(SETTINGS.videoTitleSelector).scrollIntoView({ behavior: 'smooth' })
}

let descriptionHeight;

function saveDescriptionHeight() {
	// saving initial description elt height (it is needed to fix scroll position)
	const descriptionElt = document.querySelector(SETTINGS.videoDescriptionSelector)
	descriptionHeight = descriptionElt.getBoundingClientRect().height;

	// at saveDescriptionHeight() call height might be not actual,
	// and delaying the reading helps
	setTimeout(() => {
		const h = document.querySelector(SETTINGS.videoDescriptionSelector).getBoundingClientRect().height
		// console.log(`description HEIGHT is (${h})`)
		descriptionHeight = h
	}, 0);
}

function enchance2025() {
  // The main idea:
  // query parents til #description
  // move the button into it
  // emulate sticky behavior with 'position: fixed' and js

  // TODO query only visible elements ?
	let expanders = document.querySelectorAll(SETTINGS.showLessBtnSelector)
	// console.log('EXPANDERS COUNT:', expanders.length)

	for (const showLessBtn of expanders ) {

		// console.log('original button', showLessBtn)

		const descriptionElt = showLessBtn.parentElement.parentElement
		// console.log('description', descriptionElt)

		// don't touch the wrong button
		// (mb the wrong button will be used later in different way)
		if (!descriptionElt.matches('#description-inner'))
			continue
		
		const btnWrap = document.createElement('div')
		btnWrap.appendChild(showLessBtn)
		// I use wrap to intercept clicks in CAPTURE phase
		// to calcalute scroll offset BEFORE youtube hides the description
		btnWrap.addEventListener('click', fixScroll, true)
		
		const stickyWrap = document.createElement('div');
		stickyWrap.classList.add(SHOWLESS_BTN_WRAP_CLS)
		stickyWrap.appendChild(btnWrap);
		
		// add sticky wrapper (with showless button) to video description element
		descriptionElt.appendChild(stickyWrap)
		
		emulateSticky(stickyWrap, descriptionElt)

    descriptionElt.parentElement.addEventListener('click', () => {
			// console.log('click correctioon');
			correctPlacement(stickyWrap, descriptionElt)
		})
	}
}

/**
 * Didn't figure it out how to make elt sticky on a new youtube design.
 * ~Fuck this stupid css.~
 * Let's emulate it with JS
 */
function emulateSticky(sticky, container) {
  const crect = container.getBoundingClientRect()
	sticky.style.left = `${crect.right}px`
  sticky.style.transform = `translate(-100%, 0px)`
	correctPlacement(sticky, container)

	window.addEventListener('scroll', e => {
		correctPlacement(sticky, container)
	}, { passive: true })

	window.addEventListener('scrollend', e => {
		correctPlacement(sticky, container)
    // console.log('scrollend');
	}, { passive: true })

  window.addEventListener('resize', e => {
    
    requestAnimationFrame(() => {
      sticky.style.left = `${container.getBoundingClientRect().right}px`
      correctPlacement(sticky, container)
      // console.log('resize');
    })
  })
}

function correctPlacement(sticky, container) {

	const centerY = window.visualViewport.height*0.5
	const offsetBottom = 60

	let crect = container.getBoundingClientRect()

	if (crect.top > centerY) {
    sticky.style.top = `${crect.top}px`
    requestAnimationFrame(() => {
      // container's top value is the actual limit,
      // (sticky must be BELOW that line)
      // so just query the actual top value
      // inside requestAnimationFrame(),
      // that way I finally donot see layout tearing
      let crect = container.getBoundingClientRect()
      sticky.style.top = `${crect.top}px`
      // console.log(crect.top, crect.bottom, centerY, crect.top > centerY, crect.bottom-offsetBottom < centerY)
      // console.log('correct top')
    })
		// console.log('top overscroll', dy);
	} else if ((crect.bottom - offsetBottom) < centerY) {
    sticky.style.top = `${crect.bottom - offsetBottom}px`
    requestAnimationFrame(() => {
      // container's bottom(- offset) value is the actual limit,
      // (sticky must be ABOVE that line)
      // so just query the actual top value
      // inside requestAnimationFrame(),
      // that way I finally donot see layout tearing
      let crect = container.getBoundingClientRect()
      let newTop = `${crect.bottom - offsetBottom}px`
      sticky.style.top = newTop
      // console.log(crect.top, crect.bottom, centerY, crect.top > centerY, crect.bottom-offsetBottom < centerY)
      // console.log('correct bottom')
    })
		// console.log('bottom overscroll', dy);
	} else {
    // removing inline style activates 50% for top from CSS rule
    sticky.style.top = ''
    // console.log('clear top')
    // requestAnimationFrame(() => sticky.style.top = '')
  }
}

/** For debug purpose */
function drawVerticalCenterLine() {
  let a = document.createElement('div')
  a.style.boxSizing = 'border-box'
  a.style.width = '100%'
  a.style.height = '3px'
  a.style.background = 'red'
  a.style.position = 'fixed'
  a.style.top = '50%'
  a.style.left = 0
  a.id = 'sticky-grid'
  document.body.appendChild(a)
}

function init() {

	// Looks like 'yt-page-data-updated' is the event I need to listen
	// to know exactly when youtube markup is ready to be queried.
	document.addEventListener('yt-page-data-updated', _ => {
		// console.log('YT EVENT yt-page-data-updated');
		
		// Script should work only for pages with a video,
		// such pages have url like https://www.youtube.com/watch?v=25YbRHAc_h4
		if (window.location.search.includes('v=')) {

			// settings for the actual design
			SETTINGS = {
				videoDescriptionSelector: '#above-the-fold.ytd-watch-metadata',
				videoTitleSelector: '#above-the-fold.ytd-watch-metadata',
				showLessBtnSelector: '#collapse.button.ytd-text-inline-expander',
				css: STICKY_STYLESHEET_CONTENT,
			}

			addCss(SETTINGS.css, STICKY_STYLE_ELT_ID)

			// Wait a little to get ALL the buttons initialized
			// (better use MutationObserver ?)
			setTimeout(() => {
				try {
					saveDescriptionHeight();
					enchance2025()
				} catch(e) { 
					console.log('Something went wrong, probably page layot has changed')
					console.error(e)
				}

        // drawVerticalCenterLine()
      }, 125);
		}
	})
}

init()