☰

Youtube Video Numeration

Нумерование роликов

// ==UserScript==
// @name           Youtube Video Numeration
// @version        2025.07.06
// @description    Нумерование роликов
// @match          https://www.youtube.com/*
// @author         Rainbow-Spike
// @namespace      https://greasyfork.org/users/7568
// @homepage       https://greasyfork.org/ru/users/7568-rainbow-spike
// @icon           https://www.google.com/s2/favicons?domain=youtube.com
// @grant          none
// ==/UserScript==

function h ( tag, props = { }, children = [ ] ) {
	const element = Object . assign ( document . createElement ( tag ), props );
	element . append ( ...children );
	return element;
}

function Action ( ) {
	const allVideos = document . querySelectorAll ( 'ytd-rich-item-renderer' );
	const countVideos = allVideos . length;
	const countLength = countVideos . toString ( ) . length;

	allVideos . forEach ( ( e, i ) => {
		const videoCounter = ( countVideos - i ) . toString ( ) . padStart ( countLength, '0' );
		e . querySelector ( '#video-title' ) . innerHTML = videoCounter + " = " + e . querySelector ( '#video-title' ) . innerHTML;
	} )
}

function InsertButton ( ) {
	document . body . appendChild (
		h ( 'div', { id: 'yvn' }, [
			h ( 'style', {
				innerHTML:	'#yvn { background-color: white; border: 3px solid #1ad4df; border-radius: 13px; bottom: 5px; opacity: 0.6; padding: 5px; position: fixed; right: 25px } ' +
							'#yvn input { font-size: 18px; margin: 2px } ' +
							'#yvn input:hover { border-color: #eaf1f1 } '
			} ),
			h ( 'input', { type: 'button', value: 'Numerate', title: "В редактор", onclick: ( event ) => Action ( ) } )
		] )
	)
}

InsertButton ( )