- remove entries from queue

- play one immediately

Video Queue/css/default.css

@@ -71,10 +71,21 @@
     text-decoration: none;
 }
 
-.overlay {
+#play-area div {
+    position: relative;
+}
+
+#play-area div.overlay {
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    position:absolute;
-}
+    position: absolute;
+    background-color: rgba(32,32,32,0.6);
\ No newline at end of file
+}
+
+.playthis, .removethis {
+    font-size: 10em;
+    padding: 0.5em;
+}
+

Video Queue/js/video-search.js

@@ -2,6 +2,7 @@ var autoplay = true;
 
 function playlistAppend() {
     var playlist = $('#play-area');
+    var next_box = document.createElement('div');
     var next_frame = document.createElement('iframe');
     next_frame.id = this.id + ' iframe';
     next_frame.width = Math.floor(playlist.width() * 0.9);
@@ -13,35 +14,66 @@ function playlistAppend() {
 
     if (autoplay) {
         url += '&autoplay=1';
+    } else {
+        var overlay = document.createElement('div');
+        var play = document.createElement('span');
+        var remove = document.createElement('span');
+        play.className = 'playthis';
+        play.innerHTML = '►'
+        play.onclick = playNow;
+        remove.innerText = '-';
+        remove.className = 'removethis';
+        remove.onclick = removeEntry;
+
+        overlay.appendChild(play);
+        overlay.appendChild(remove);
+
+        overlay.className = 'overlay';
+        next_box.appendChild(overlay);
     }
-
     next_frame.src = url;
-    playlist.append(next_frame);
+    next_box.appendChild(next_frame);
+    playlist.append(next_box);
     if (autoplay) {
         console.log(time);
-        window.setTimeout(playNext, time);
+        currentTimeout = window.setTimeout(playNext, time);
         autoplay = false;
     }
 }
 
 function playNext () {
-    $('#play-area iframe:first').remove();
-    next_frame = $('#play-area iframe:first');
-    if (next_frame.length == 0) {
+    $('#play-area div:first').remove();
+    next_box = $('#play-area div:first');
+    if (next_box.length == 0) {
         autoplay = true;
         return false;
     }
+    next_box.children('div').remove();
+    next_frame = next_box.children('iframe');
     src = next_frame.prop('src');
     time = parseInt(next_frame.prop('id').split(' ')[1]) + 2000;
     next_frame.prop('src', src + '&autoplay=1');
     console.log('next', time);
-    window.setTimeout(playNext, time);
+    currentTimeout = window.setTimeout(playNext, time);
+}
+
+function removeEntry() {
+    this.parentNode.parentNode.remove();
+}
+
+function playNow() {
+    var next_div = this.parentNode.parentNode;
+    var play_area = document.getElementById('play-area');
+    play_area.insertBefore(next_div, play_area.children[1]);
+    play_area.scrollTop = 0;
+    window.clearTimeout(currentTimeout);
+    playNext();
 }
 
 function parseResults(data) {
     var resultsArea = $('#results');
     resultsArea.empty();
-
+    resultsArea.scrollTop(0);
     for (result of data.d.results) {
         url = result.MediaUrl;