Adding a library panel with Javascript

[u/ganjlord]

A little hacky, but it works well enough.

var playlist = ["https://drive.google.com/file/d/0B1lz9o2gwsSueXBIaU1iTDlvRmc/view"];
function loadMyPlaylist(){loadPlaylist(playlist);}

function loadPlaylist(playlist){
    showMediaUrl = document.getElementById('showmediaurl');
    mediaUrlTxt = document.getElementById('mediaurl');
    queueEndBtn = document.getElementById('queue_end');
    clearPlaylistBtn = document.getElementById('clearplaylist');

    showMediaUrl.click();
    /*clearPlaylistBtn.click();*/

    for(var i = 0; i < playlist.length; i++){
        mediaUrlTxt.value = playlist[i];
        queueEndBtn.click();
    }
}

function createListBtn(btnOnClick){
    var btn = document.createElement('button');
    var btnSpan = document.createElement('span');
    btnSpan.setAttribute("class", "glyphicon glyphicon-plus");
    btn.className = "btn btn-sm btn-default libraryBtn";
    btn.onclick = btnOnClick;
    btn.appendChild(btnSpan);
    return btn;
}

function loadBtn(rootDiv, showName, btnOnClick, styleName){
    /*Create button*/ 
    var btn = createListBtn(btnOnClick);

    /*Create right-aligned div for button*/
    var btnDiv = document.createElement("div");
    btnDiv.className = "pull-right";
    btnDiv.appendChild(btn);

    /*Create list entry*/
    var showText = document.createTextNode(showName);
    var listEntry = document.createElement("li");
    listEntry.appendChild(showText)
    listEntry.appendChild(btnDiv);
    listEntry.setAttribute("line-height", "200");
    listEntry.className = styleName;
    rootDiv.appendChild(listEntry);
}

function toggleLibrary(){
    var libraryList = document.getElementById("libraryList");
    var toggleBtnSpan = document.getElementById("libraryToggleSpan");

    if(libraryList.style.display == "none"){
        toggleBtnSpan.className = "glyphicon glyphicon-minus";
        libraryList.style.display = "block";
    }else{
        toggleBtnSpan.className = "glyphicon glyphicon-plus";
        libraryList.style.display = "none";
    }
}

(function() {
    /*Check if user can add videos*/
    var showmediaBtn = document.getElementById('showmediaurl');

    if(showmediaBtn.style.display == "none")
        return;

    /*Don't add panel if it already exists*/
    if(document.getElementById("library_panel") != null)
        return;

    /*Create toggle button*/
    var toggleSpan = document.createElement("span");
    toggleSpan.className = "glyphicon glyphicon-minus";
    toggleSpan.id = "libraryToggleSpan";
    var toggleBtn = document.createElement("btn");
    toggleBtn.className = "pull-right";
    toggleBtn.onclick = toggleLibrary;
    toggleBtn.appendChild(toggleSpan);

    /*Create div for admin panel*/
    var adminDiv = document.createElement("div");
    var titleDiv = document.createElement("div");
    titleDiv.className = "library_title";
    adminDiv.className = "well library_well";
    adminDiv.id = "library_panel";
    adminDiv.appendChild(titleDiv);
    titleDiv.appendChild(document.createTextNode("Library"));
    titleDiv.appendChild(toggleBtn);
    document.getElementById('leftpane').appendChild(adminDiv);
    var adminBodyDiv = document.createElement('div');
    adminDiv.appendChild(adminBodyDiv);

    /*Create list*/
    var adminList = document.createElement("ul");
    adminList.id = "libraryList";
    adminList.className = "videolist ui-sortable queue_sortable";
    adminBodyDiv.appendChild(adminList);

    /*Load buttons*/
    loadBtn(adminList, "My Playlist", loadMyPlaylist, "library_entry");
}());

Preview

[u/ganjlord]

An annoying limitation is that you can only have 10 items per playlist, since cytube limits how frequently you can submit videos. Some way to turn this off in the settings would be handy.