rv-intsersection-observer-api.js

// things to go over
 // 1 - IntersectionObserver why it is being loaded (rendering 20 players at a time vs. lazy loading)
 // 2 - lazy loading using `lazy` classname

async componentDidMount() {
    this.handleScroll();
}

handleScroll = () => {
    const lazys = document.querySelectorAll('.lazy');

    const config = {
        threshold: 0.5
      };

    let observer = new IntersectionObserver(function(entries) {

        entries.forEach(entry => {

            if(entry.isIntersecting) {
                lazyLoading(entry);
            }
        })
    }, config)

    lazys.forEach(lazy => {
        observer.observe(lazy);
    })

    function lazyLoading(entry) {

        const { songs } = this.props;
        const player = entry.target
        const id = parseInt(entry.target.id);
        const url = songs.tracks[id].uri;

        if(player.classList[0] === 'lazy') {
            player.src = `https://open.spotify.com/embed?uri=${url}`;
            player.classList.remove('lazy');
            observer.unobserve(player);
        }
    }
}