Raw Source Toggle Dropdown

• Minified Source

neemanjabuge / YouTube - Play Next

// ==UserScript==
// @name         YouTube - Play Next
// @namespace    http://your.homepage/
// @version      0.1
// @description  Added play next functionality
// @author       You
// @match        https://www.youtube.com/*
// @grant        none
// @require	   http://code.jquery.com/jquery-2.1.1.min.js
// ==/UserScript==

console.log('test');

$('video').on('ended', function () {
    console.log('ended play next now');
});

console.log($('.video-list-item'));

$('.video-list-item').on('mouseover mouseout', function (e) {
    console.log(e.type);
    var video = $(this);    
    if (e.type == 'mouseover') {
        showPlus(video);
    } else {
    }

});

function showPlus (video) {
    console.log('add button')
    if (video.find('.playnext').length) return;
    var plusButton = $('<div>+</div>')
    .addClass('playnext')
    .css({        
        'font-size': '30px',
        'text-align': 'center',
        background: 'yellow',
        position: 'absolute',
        top: 0,
        left: 0,
        width: '30px',
        height: '30px',
        cursor: 'pointer'
    })
    .on('click', function () {
        $(this).css('background', 'green');
        addToList(video);
    });
    
    video
    .find('.thumb-wrapper')
    .append(plusButton);   
}

function addToList (video) {
    var link = video.find('.thumb-link').attr('href'),
        thumb = video.find('.yt-uix-simple-thumb-related img').attr('src');
    console.log(video.find('.thumb-link').attr('href'))
    console.log(video.find('.yt-uix-simple-thumb-related img').attr('src'))
    
    cont.append($('<img/>', {
        src: thumb
    }));
}


//playlist
var cont = $('<div/>', {
    class: 'playnext'
})
.appendTo($('body'));

cont.css({
    position: 'fixed',
    bottom: 0,
    height: '150px',
    width: '100%',
    background: 'yellow',
    'z-index': 10
});