☰

YouTube Music Smooth (Lazy Loader)

Lazy loader for Youtube Music, making it work smoothly. No lag :D

// ==UserScript==
// @name         YouTube Music Smooth (Lazy Loader)
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Lazy loader for Youtube Music, making it work smoothly. No lag :D
// @author       Emree.el on Instagram :)
// @match        https://music.youtube.com/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Function to create YouTube Music item
    function createMusicItem(videoId) {
        return `<div class="placeholder" data-video-id="${videoId}"></div>`;
    }

    // Function to load YouTube Music items
    function loadMusicItems() {
        // Simulated list of YouTube video IDs
        const videoIds = [
            'VIDEO_ID_1',
            'VIDEO_ID_2',
            'VIDEO_ID_3',
            // Add more video IDs as needed
        ];

        // Create and append placeholder elements
        videoIds.forEach(videoId => {
            const item = createMusicItem(videoId);
            document.getElementById('contents').innerHTML += item;
        });

        // Create an intersection observer
        const observer = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    // Load YouTube video when the placeholder is in view
                    const videoId = entry.target.getAttribute('data-video-id');
                    const iframe = document.createElement('iframe');
                    iframe.src = `https://www.youtube.com/embed/${videoId}`;
                    iframe.width = '560'; // Set iframe width
                    iframe.height = '315'; // Set iframe height
                    iframe.allowFullscreen = true; // Enable fullscreen
                    entry.target.appendChild(iframe);
                    // Stop observing once loaded
                    observer.unobserve(entry.target);
                }
            });
        });

        // Observe each placeholder element
        const placeholders = document.querySelectorAll('.placeholder');
        placeholders.forEach(placeholder => {
            observer.observe(placeholder);
        });
    }

    // Call the function to initially load music items
    loadMusicItems();
})();