Queue add buttons for moving video

Author: cpiber

src/scripts/content/queue/listener.ts

@@ -12,10 +12,15 @@ export function clickElements(this: Queue, e: MouseEvent) {
   if (i === -1)
     return;
   const r = (e.target as HTMLElement).closest('.r');
-  if (r === null)
-    this.goto(i);
-  else
-    this.remove(i);
+  if (r !== null)
+    return this.remove(i);
+  const u = (e.target as HTMLElement).closest('.up');
+  if (u !== null)
+    return this.move(i, i - 1);
+  const d = (e.target as HTMLElement).closest('.down');
+  if (d !== null)
+    return this.move(i, i + 1);
+  this.goto(i);
 }
 
 export function clickTop(this: Queue, e: MouseEvent) {

src/scripts/content/queue/transform.ts

@@ -14,6 +14,7 @@ export function toggle(this: Queue) {
 }
 
 export function move(this: Queue, orig: number, index: number) {
+  if (index < 0 || index >= this.queue.length) return;
   const [ name, elem ] = this.queue.splice2(orig, 1);
   if (this.queuepos >= 0) {
     // adjust index based on new and old positions, difference always 1 (except when moving current)

src/scripts/helpers/VideoQueue.ts

@@ -1,4 +1,5 @@
 import iconDelete from '../../icons/delete.svg';
+import iconNext from '../../icons/next.svg';
 import iconPlay from '../../icons/play.svg';
 import { callback as ArrayCallback, DOMArray } from './DOMArray';
 
@@ -24,7 +25,7 @@ export class VideoArray extends DOMArray<string> {
     const n = document.createElement('div');
     n.className = 'element';
     n.innerHTML = `
-      <div class="drag">&#x2630;</div>
+      <div class="drag"><span class="up clickable">${iconNext}</span><span class="handle">&#x2630;</span><span class="down clickable">${iconNext}</span></div>
       <div class="thumb">
         <img src="${this.store[name].thumbnail}" draggable="false" />
         <div class="play">${iconPlay}</div>

src/styles/queue/queue.scss

@@ -1,6 +1,8 @@
 @import '../helpers/mixins';
 @import '../helpers/variables';
 
+$disabled_alpha: 0.55;
+
 %hidden {
   display: none;
 }
@@ -61,6 +63,7 @@
 
   .clickable {
     cursor: pointer;
+    opacity: 1;
   }
 
   .top::after, .element::before {
@@ -120,7 +123,7 @@
     }
 
     .prev, .next {
-      opacity: 0.55;
+      opacity: $disabled_alpha;
 
       &.clickable {
         opacity: 1;
@@ -150,7 +153,25 @@
         text-align: center;
         width: 22px;
         flex-shrink: 0;
-        cursor: move;
+
+        .handle {
+          cursor: move;
+        }
+      }
+
+      $nextscale: 0.6;
+
+      .up svg {
+        transform: scale($nextscale) rotate(-90deg);
+      }
+  
+      .down svg {
+        transform: scale($nextscale) rotate(90deg);
+      }
+
+      &:first-child .up, &:last-child .down {
+        opacity: $disabled_alpha;
+        cursor: initial;
       }
 
       img {