add delete video to frontend

tubearchivist/home/templates/home/video.html

@@ -45,6 +45,10 @@
                 <p>Youtube: Deactivated</p>
             {% endif %}
             <p>Video ID: {{ video.youtube_id }}</p>
+            <button onclick="deleteConfirm()" id="delete-item">Delete Video</button>
+            <div class="delete-confirm" id="delete-button">
+                <span>Are you sure? </span><button class="danger-button" onclick="deleteItem(this)" data-id="{{ video.youtube_id }}" data-redirect = "{{ video.channel.channel_id }}">Delete</button> <button onclick="cancelDelete()">Cancel</button>
+            </div>
         </div>
     </div>
     <div class="info-box-item">

tubearchivist/static/css/dark.css

@@ -2,6 +2,7 @@
     --main-bg: #00202f;
     --highlight-bg: #00293b;
     --highlight-error: #990202;
+    --highlight-error-light: #c44343;
     --highlight-bg-transparent: #00293baf;
     --main-font: #eeeeee;
     --accent-font-dark: #259485;

tubearchivist/static/css/light.css

@@ -1,11 +1,12 @@
 :root {
     --main-bg: #eeeeee;
     --highlight-bg: #d9e0d9;
-    --highlight-error: #f79c9c;
+    --highlight-error: #990202;
+    --highlight-error-light: #c44343;
     --highlight-bg-transparent: #00293baf;
     --main-font: #00202f;
     --accent-font-dark: #259485;
     --accent-font-light: #35b399;
     --img-filter: invert(50%) sepia(9%) saturate(2940%) hue-rotate(122deg) brightness(94%) contrast(90%);
-    --img-filter-error: invert(83%) sepia(35%) saturate(1238%) hue-rotate(297deg) brightness(103%) contrast(97%);
+    --img-filter-error: invert(16%) sepia(60%) saturate(3717%) hue-rotate(349deg) brightness(86%) contrast(120%);
 }

tubearchivist/static/css/style.css

@@ -205,6 +205,19 @@ button:hover {
     color: var(--main-font);
 }
 
+/* delete button */
+.delete-confirm {
+    display: none;
+}
+
+.danger-button {
+    background-color: var(--highlight-error);
+}
+
+.danger-button:hover {
+    background-color: var(--highlight-error-light);
+}
+
 /* navigation */
 .top-nav {
     display: block;
@@ -658,6 +671,10 @@ button:hover {
     background-color: var(--highlight-error);
 }
 
+.download-progress.error h3 {
+    color: #fff;
+}
+
 /* settings */
 .settings-group {
     background-color: var(--highlight-bg);
@@ -675,6 +692,7 @@ button:hover {
 
 .danger-zone {
     background-color: var(--highlight-error);
+    color: #fff;
     padding: 3px;
 }
 

tubearchivist/static/script.js

@@ -176,6 +176,34 @@ function fsRescan() {
     toReplace.appendChild(message);
 }
 
+// delete from file system
+function deleteConfirm() {
+    console.log("confirm delete");
+    to_show = document.getElementById("delete-button");
+    document.getElementById("delete-item").style.display = 'none';
+    to_show.style.display = "block";
+}
+
+function deleteItem(button) {
+    var to_delete = button.getAttribute("data-id");
+    var to_redirect = button.getAttribute("data-redirect");
+    var payload = JSON.stringify({"delete-video": to_delete});
+    console.log(payload);
+    console.log(to_redirect);
+    sendPost(payload);
+    setTimeout(function(){
+        var redirect = "/channel/" + to_redirect;
+        window.location.replace(redirect);
+        return false;
+    }, 1000);
+}
+
+function cancelDelete() {
+    console.log("cancel delete");
+    document.getElementById("delete-button").style.display = 'none';
+    document.getElementById("delete-item").style.display = 'block';
+}
+
 // player
 function createPlayer(button) {
     var mediaUrl = button.getAttribute('data-src');