Youtube Playlist Height Toggle

README.md

This adds an extra button to the Youtube playlist. Clicking it will remove the max-height limitation on the playlist. This allows easier browsing and dragging and dropping to reorder the videos in the playlist.

The arrow is the new button, which toggles the height from unlimited to 600px.

Use the inject.js in any JS injection tool for Youtube.com. I personally like "User JS and CSS Script and Style Manager Extension for chrome".

Enjoy!

inject.js

// Wait for #top-level-buttons-computed to exist with exponential backoff
(function waitForElement() {
	let delay = 10; // Start with 10ms
	const maxDelay = 10000; // Maximum delay of 10 seconds

	function apply_togglePlaylistHeight() {
		//const targetElement = document.querySelector('#top-level-buttons-computed');
		const targetElement = document.querySelector(
			'ytd-menu-renderer.ytd-playlist-panel-renderer'
		);
		if (!targetElement) {
			console.warn(
				'Target element ytd-menu-renderer.ytd-playlist-panel-renderer not found'
			);
			return;
		}

		// Check if button already exists to prevent duplicates
		if (targetElement.querySelector('.playlist-height-toggle')) {
			console.log('Toggle button already exists, removing existing button');
			targetElement.querySelector('.playlist-height-toggle').remove();
		}

		// Create the toggle button
		const toggleButton = document.createElement('button');
		toggleButton.className = 'playlist-height-toggle';
		toggleButton.textContent = '⮷'; // Initial state - down arrow

		// Set button styles
		toggleButton.style.cssText = `
        color: white;
        background: none;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        font-size: 28px;
        padding: 2px 8px 8px 8px;
        transition: background-color 0.2s ease;
        line-height: 40px;
        height: 40px;
        width: 40px;
    `;

		// Add hover effect
		toggleButton.addEventListener('mouseenter', () => {
			toggleButton.style.backgroundColor = 'rgb(255 255 255 / 0.25)';
		});

		toggleButton.addEventListener('mouseleave', () => {
			toggleButton.style.backgroundColor = 'transparent';
		});

		// Track current state (true = expanded/auto, false = collapsed/600px)
		let isExpanded = false;

		// Add click event listener
		toggleButton.addEventListener('click', () => {
			const watchFlexy = document.querySelector('ytd-watch-flexy');
			if (!watchFlexy) {
				console.warn('ytd-watch-flexy element not found');
				return;
			}

			if (isExpanded) {
				// Switch to collapsed state
				watchFlexy.style.setProperty(
					'--ytd-watch-flexy-panel-max-height',
					'600px'
				);
				toggleButton.textContent = '⮷'; // Down arrow
				isExpanded = false;
			} else {
				// Switch to expanded state
				watchFlexy.style.setProperty(
					'--ytd-watch-flexy-panel-max-height',
					'auto'
				);
				toggleButton.textContent = '⮴'; // Up arrow
				isExpanded = true;
			}
		});

		// Add button as last child
		targetElement.appendChild(toggleButton);
		console.log(targetElement);
	}

	function checkForElement() {
		const element = document.querySelector('#top-level-buttons-computed');
		if (element) {
			apply_togglePlaylistHeight();
			return;
		}

		// Element not found, schedule next check with increased delay
		setTimeout(checkForElement, delay);

		// Increase delay for next iteration (exponential backoff)
		delay = Math.min(delay * 1.5, maxDelay);
	}

	checkForElement();
})();