Added stuff for a future feature

src/components/TheDownloadTab.vue

@@ -40,6 +40,7 @@ export default {
 	}),
 	mounted() {
 		socket.on('startDownload', this.startDownload)
+		socket.on('startConversion', this.startConversion)
 		socket.on('init_downloadQueue', this.initQueue)
 		socket.on('addedToQueue', this.addToQueue)
 		socket.on('updateQueue', this.updateQueue)
@@ -192,7 +193,7 @@ export default {
 		},
 		updateQueue(update) {
 			// downloaded and failed default to false?
-			const { uuid, downloaded, failed, progress, error, data, errid } = update
+			const { uuid, downloaded, failed, progress, conversion, error, data, errid } = update
 
 			if (uuid && this.queue.indexOf(uuid) > -1) {
 				if (downloaded) {
@@ -222,6 +223,11 @@ export default {
 					this.queueList[uuid].progress = progress
 					$('#bar_' + uuid).css('width', progress + '%')
 				}
+
+				if (conversion) {
+					console.log(100-conversion)
+					$('#bar_' + uuid).css('width', (100-conversion) + '%')
+				}
 			}
 		},
 		removeFromQueue(uuid) {
@@ -337,6 +343,13 @@ export default {
 		},
 		startDownload(uuid) {
 			$('#bar_' + uuid)
+				.removeClass('converting')
+				.removeClass('indeterminate')
+				.addClass('determinate')
+		},
+		startConversion(uuid) {
+			$('#bar_' + uuid)
+				.addClass('converting')
 				.removeClass('indeterminate')
 				.addClass('determinate')
 		},

src/styles/scss/_progressbar.scss

@@ -14,8 +14,12 @@
 		left: 0;
 		bottom: 0;
 		background-color: var(--accent-color);
-		-webkit-transition: width 0.3s linear;
-		transition: width 0.3s linear;
+		-webkit-transition: width 0.1s linear;
+		transition: width 0.1s linear;
+	}
+
+	.converting {
+		background-color: var(--secondary-color)
 	}
 
 	.indeterminate {

src/styles/scss/base/_base.scss

@@ -15,13 +15,14 @@ html[data-theme='light'] {
 	--foreground: hsl(0, 0%, 20%);
 	--foreground-inverted: hsl(0, 0%, 93%);
 	--accent-color: hsl(210, 100%, 52%);
+	--secondary-color: hsl(46, 100%, 57%);
 	--panels-background: hsl(210, 3%, 14%);
 	--panels-text: hsl(0, 0%, 100%);
 	--accent-text: hsl(0, 0%, 0%);
 
 	--sidebar-link-bg: hsl(0, 0%, 24%);
 	--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
-	
+
 	--icon-hover: var(--accent-color);
 
 	--table-bg: hsl(0, 0%, 100%);
@@ -35,6 +36,7 @@ html[data-theme='dark'] {
 	--foreground: hsl(0, 0%, 93%);
 	--foreground-inverted: hsl(0, 0%, 20%);
 	--accent-color: hsl(210, 100%, 52%);
+	--secondary-color: hsl(46, 100%, 57%);
 	--panels-background: hsl(0, 0%, 10%);
 	--panels-text: hsl(0, 0%, 100%);
 	--accent-text: hsl(0, 0%, 87%);
@@ -55,6 +57,7 @@ html[data-theme='purple'] {
 	--foreground: hsl(0, 0%, 93%);
 	--foreground-inverted: hsl(258, 62%, 8%);
 	--accent-color: hsl(261, 85%, 37%);
+	--secondary-color: hsl(46, 100%, 57%);
 	--panels-background: hsl(257, 70%, 9%);
 	--panels-text: hsl(0, 0%, 100%);
 	--accent-text: hsl(0, 0%, 87%);