Quickly create playlists from your Youtube subscription feed
目前為
// ==UserScript==
// @name Youtube Subscription List Quick Playlist
// @namespace https://greasyfork.org/en/users/13981-chk1
// @description Quickly create playlists from your Youtube subscription feed
// @include https://www.youtube.com/feed/subscriptions/activity
// @version 1.0.2
// @grant GM_addStyle
// @run-at document-end
// ==/UserScript==
GM_addStyle("#subs2playlistContainer { position:fixed; bottom: 10px; right: 10px; } ");
GM_addStyle("#subs2playlistLink { display: block; clear: both; } ");
GM_addStyle("#subs2playlistClear { float: right; font-size: smaller; padding-top: 5px; padding-bottom: 5px; display: block; color: #760000; }");
GM_addStyle("#subs2playlistCopy { float: left; font-size: smaller; padding-top: 5px; padding-bottom: 5px; display: block; color: #767676; }");
GM_addStyle("#subs2playlistCopyTemp { width:1px;height:1px;position:fixed; }");
GM_addStyle("#subs2playlistContainer input { font-size:smaller; display:block; color: #767676 }");
GM_addStyle(".subs2playlist.subs2playlist-add span::after { content: 'Add to playlist' }");
GM_addStyle(".subs2playlist.subs2playlist-remove span::after { content: 'Remove from playlist' }");
var videoIds = [];
var playlistElements;
function createPlaylistLink() {
var playlistLinkContainer = document.createElement('div');
playlistLinkContainer.className = "yt-card yt-card-has-padding";
playlistLinkContainer.id = "subs2playlistContainer";
var playlistLinkH3 = document.createElement('h3');
playlistLinkH3.className = "yt-lockup-title";
var playlistLink = document.createElement('a');
playlistLink.href = "https://www.youtube.com/watch_videos?video_ids=";
playlistLink.id = "subs2playlistLink";
var playlistLinkText = document.createTextNode('Your playlist link');
var clearLink = document.createElement('a');
clearLink.id = "subs2playlistClear";
clearLink.onclick = function() { clearPlaylist() };
var clearText = document.createTextNode('Clear');
var copyLink = document.createElement('a');
copyLink.id = "subs2playlistCopy";
var copyText = document.createTextNode('Copy IDs');
var copyLinkInput = document.createElement('input');
copyLinkInput.type = "text";
copyLinkInput.className = "yt-uix-form-input-bidi";
copyLink.onclick = function() {
html5Copy(copyLinkInput);
};
copyLink.appendChild(copyText);
clearLink.appendChild(clearText);
playlistLink.appendChild(playlistLinkText);
playlistLinkH3.appendChild(playlistLink);
playlistLinkContainer.appendChild(playlistLinkH3);
playlistLinkContainer.appendChild(clearLink);
playlistLinkContainer.appendChild(copyLink);
playlistLinkContainer.appendChild(copyLinkInput);
return {
'container': playlistLinkContainer,
'link': playlistLink,
'text': playlistLinkText,
'plain': copyLinkInput
};
}
function html5Copy(inputnode){
var node = document.createElement('pre');
node.className = 'subs2playlistCopyTemp';
node.textContent = inputnode.value;
document.body.appendChild(node);
var selection = getSelection();
selection.removeAllRanges()
var range = document.createRange();
range.selectNodeContents(node);
console.log(range);
selection.addRange(range);
document.execCommand('copy');
document.body.removeChild(node);
}
function updatePlaylistLink() {
if(videoIds.length > 20) {
playlistElements.text.textContent = "Too many videos, more than 20 will not appear in playlist";
} else if(playlistElements.text.textContent.length > 2048){
playlistElements.text.textContent = "Too many videos, URL too long :(";
} else {
playlistElements.link.href="https://www.youtube.com/watch_videos?video_ids="+videoIds.join(',');
playlistElements.plain.value=videoIds.join(',');
playlistElements.text.textContent = "Your playlist link ("+videoIds.length+" videos)";
}
}
function clearPlaylist() {
videoIds = [];
var buttons = document.querySelectorAll('#browse-items-primary > .section-list .subs2playlist');
for (var i = 0; i < buttons.length; ++i) {
buttons[i].classList.remove("subs2playlist-remove");
//buttons[i].classList.remove("yt-uix-button-subscribed-branded");
buttons[i].classList.remove("c4-module-editor-delete");
buttons[i].classList.add("subs2playlist-add");
buttons[i].classList.add("c4-editor-plus");
}
updatePlaylistLink();
}
function toggleVideoId(videoId){
var alreadyIn = videoIds.indexOf(videoId);
if(alreadyIn === -1){
videoIds.push(videoId);
return true;
} else {
videoIds.splice(alreadyIn, 1);
return false;
}
}
function createPlusButton(videoId){
var container = document.createElement('button');
container.setAttribute('onclick', 'toggleVideoId(\''+videoId+'\');');
container.className = "subs2playlist subs2playlist-add yt-uix-button yt-uix-button-size-default yt-uix-button-default yt-uix-button-has-icon no-icon-markup yt-uix-inlineedit-edit c4-editor-plus";
container.onclick = function(){
toggleVideoId(videoId);
container.classList.toggle("c4-module-editor-delete");
container.classList.toggle("c4-editor-plus");
container.classList.toggle("subs2playlist-remove");
container.classList.toggle("subs2playlist-add");
updatePlaylistLink();
};
container.innerHTML = "<span class=\"yt-uix-button-content\"></span>";
return container;
}
function appendAllTheThings(node) {
var videoId = node.getAttribute("data-context-item-id");
var plusButtonNode = createPlusButton(videoId);
node.appendChild(plusButtonNode);
}
var observerConfig = {
childList: true,
attributes: true,
subtree: false,
attributeOldValue: false
};
var listObserver = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if(mutation.type == "childList" && mutation.addedNodes.length >= 1) {
console.log(mutation);
for (var i = 0; i < mutation.addedNodes.length; ++i) {
var node = mutation.addedNodes[i];
if(node.nodeType === 1){
var videoLinkContainer = node.querySelector('.yt-lockup');
appendAllTheThings(videoLinkContainer);
}
}
}
});
});
var subListContainer = document.querySelector('#browse-items-primary > .section-list');
listObserver.observe(subListContainer, observerConfig);
function firstRun(){
var videoLinkNodes = document.querySelectorAll('div.yt-lockup');
for (var i = 0; i < videoLinkNodes.length; ++i) {
var node = videoLinkNodes[i];
appendAllTheThings(node);
}
playlistElements = createPlaylistLink();
document.body.appendChild(playlistElements.container);
}
firstRun();