Skip to content

Instantly share code, notes, and snippets.

@sunnywiz sunnywiz/sortWL.js
Created Oct 10, 2019

Embed
What would you like to do?
SortYoutubeWatchLaterList
// This worked on 2019-10-09 under Chrome in full screen mode.
// Did not work under mobile, they changed ... things?
// You put this in Chrome's Snippets (copy/paste) and then run it from there when you are at the watch later list
// (https://www.youtube.com/playlist?list=WL)
// It will move one video per invocation. I tried to make it do all of them but $$ disappeared.
// Heavily borrowed from many places
// function for triggering mouse events
var fireMouseEvent = function (type, elem, centerX, centerY) {
var evt = document.createEvent('MouseEvents');
evt.initMouseEvent(type, true, true, window, 1, 1, 1, centerX, centerY, false, false, false, false, 0, elem);
elem.dispatchEvent(evt);
};
function simulateDrag(elemDrag, elemDrop) {
// https://ghostinspector.com/blog/simulate-drag-and-drop-javascript-casperjs/
// calculate positions
var pos = elemDrag.getBoundingClientRect();
var center1X = Math.floor((pos.left + pos.right) / 2);
var center1Y = Math.floor((pos.top + pos.bottom) / 2);
pos = elemDrop.getBoundingClientRect();
var center2X = Math.floor((pos.left + pos.right) / 2);
var center2Y = Math.floor((pos.top + pos.bottom) / 2);
// mouse over dragged element and mousedown
fireMouseEvent('mousemove', elemDrag, center1X, center1Y);
fireMouseEvent('mouseenter', elemDrag, center1X, center1Y);
fireMouseEvent('mouseover', elemDrag, center1X, center1Y);
fireMouseEvent('mousedown', elemDrag, center1X, center1Y);
// start dragging process over to drop target
fireMouseEvent('dragstart', elemDrag, center1X, center1Y);
fireMouseEvent('drag', elemDrag, center1X, center1Y);
fireMouseEvent('mousemove', elemDrag, center1X, center1Y);
fireMouseEvent('drag', elemDrag, center2X, center2Y);
fireMouseEvent('mousemove', elemDrop, center2X, center2Y);
// trigger dragging process on top of drop target
fireMouseEvent('mouseenter', elemDrop, center2X, center2Y);
fireMouseEvent('dragenter', elemDrop, center2X, center2Y);
fireMouseEvent('mouseover', elemDrop, center2X, center2Y);
fireMouseEvent('dragover', elemDrop, center2X, center2Y);
// release dragged element on top of drop target
fireMouseEvent('drop', elemDrop, center2X, center2Y);
fireMouseEvent('dragend', elemDrag, center2X, center2Y);
fireMouseEvent('mouseup', elemDrag, center2X, center2Y);
}
{
videos = [];
let allAnchors = $$("a#thumbnail.inline-block.ytd-thumbnail");
for (let i=0; i<allAnchors.length; i++) {
let thumb=allAnchors[i];
let href = thumb.href;
if (href && href.includes("&list=WL&")) {
// console.log(href);
// would grab other things about the video here
let timeSpan = thumb.querySelector('.ytd-thumbnail-overlay-time-status-renderer');
let timeDigits = timeSpan.innerText.trim().split(':').reverse();
var time = parseInt(timeDigits[0]);
if (timeDigits[1]) time += (parseInt(timeDigits[1])*60);
if (timeDigits[2]) time += (parseInt(timeDigits[2])*3600);
videos.push({anchor: thumb, time: time, originalIndex: i});
}
}
if (videos.length > 1) {
for (var i=0; i<videos.length-1; i++) {
var smallestLength = 86400;
var smallestIndex = -1;
for (var j=i+1; j<videos.length; j++) {
if (videos[j].time < videos[i].time
&& videos[j].time < smallestLength) {
smallestLength = videos[j].time;
smallestIndex = j;
}
}
if (smallestIndex > -1) {
console.log("drag "+smallestIndex+" to "+i);
var elemDrag = videos[smallestIndex].anchor;
var elemDrop = videos[i].anchor;
simulateDrag(elemDrag, elemDrop);
break;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.