Added a tab to list download errors

Click on the error/warning sign to open it

public/index.html

@@ -1190,6 +1190,21 @@ <h1>About</h1>
 									target="_blank">news channel</a> on Telegram.
 							</p>
 							<br />
+							<h1>Bug Reports</h1>
+							<p>
+								If you have questions or problems with the app, search for a solution in the
+								<a href="https://www.reddit.com/r/deemix" target="_blank">subreddit</a> first and then, if you don't find anything
+								you can make a post with your issue on the subreddit.
+							</p>
+							<p>
+								Before reporting a bug make sure you're running the latest version of the app and that the thing you want
+								to report is acatually a bug and not something that's wrong only on your end.<br />
+								Make sure the bug is reproducible on another machines and also <b>DO NOT</b> report a bug if it's been already reported.
+							</p>
+							<p>
+								<b>DO NOT</b> open issues for asking questions, there is a subreddit for that.
+							</p>
+							<br />
 							<h2>Donations</h2>
 							<h3>You want to contribute to this project? You can do that <b>in different ways!</b></h3>
 							<p>
@@ -1400,6 +1415,24 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
 							</footer>
 						</div>
 
+						<div id="errors_tab" class="main_tabcontent">
+							<h1>Errors for {{ title }}</h1>
+							<table>
+								<tr>
+									<th>ID</th>
+									<th>Artist</th>
+									<th>Title</th>
+									<th>Error</th>
+								</tr>
+								<tr v-for="error in errors">
+									<td>{{ error.data.id }}</td>
+									<td>{{ error.data.artist }}</td>
+									<td>{{ error.data.title }}</td>
+									<td>{{ error.message }}</td>
+								</tr>
+							</table>
+						</div>
+
 					</div>
 				</section>
 			</div>

src/js/modules/components/errors-tab.js

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+
+const ErrorsTab = new Vue({
+	data: () => ({
+		title: '',
+		errors: []
+	}),
+	methods: {
+		reset(){
+			this.title = ''
+			this.errors = []
+		},
+		showErrors(data){
+			this.title = data.artist+" - "+data.title
+			this.errors = data.errors
+		}
+	}
+}).$mount('#errors_tab')
+
+export default ErrorsTab

src/js/modules/downloads.js

@@ -1,6 +1,7 @@
 import $ from 'jquery'
 import { socket } from './socket.js'
 import { toast } from './toasts.js'
+import { showErrors } from './tabs.js'
 
 /* ===== Locals ===== */
 const tabMinWidth = 250
@@ -145,17 +146,24 @@ function addToQueue(queueItem, current = false) {
 	$('#bar_' + queueItem.uuid).css('width', queueItem.progress + '%')
 	if (queueItem.failed >= 1 && $('#download_' + queueItem.uuid + ' .queue_failed').length == 0) {
 		$('#download_' + queueItem.uuid + ' .download_info_status').append(
-			`<span class="secondary-text inline-flex"><span class="download_slim_separator">(</span><span class="queue_failed">${queueItem.failed}</span><i class="material-icons">error_outline</i><span class="download_slim_separator">)</span></span>`
+			`<span class="secondary-text inline-flex"><span class="download_slim_separator">(</span><span class="queue_failed_button inline-flex"><span class="queue_failed">${queueItem.failed}</span><i class="material-icons">error_outline</i></span><span class="download_slim_separator">)</span></span>`
 		)
 	}
 	if (queueItem.downloaded + queueItem.failed == queueItem.size) {
 		let result_icon = $('#download_' + queueItem.uuid).find('.queue_icon')
 		if (queueItem.failed == 0) {
 			result_icon.text('done')
-		} else if (queueItem.failed == queueItem.size) {
-			result_icon.text('error')
 		} else {
-			result_icon.text('warning')
+			let failed_button = $('#download_' + queueItem.uuid).find('.queue_failed_button')
+			result_icon.addClass('clickable')
+			failed_button.addClass('clickable')
+			result_icon.bind('click', {item:queueItem}, showErrors)
+			failed_button.bind('click', {item:queueItem}, showErrors)
+			if (queueItem.failed >= queueItem.size) {
+				result_icon.text('error')
+			} else {
+				result_icon.text('warning')
+			}
 		}
 	}
 	if (!queueItem.init) toast(`${queueItem.title} added to queue`, 'playlist_add_check')
@@ -247,11 +255,19 @@ function finishDownload(uuid) {
 		let result_icon = $('#download_' + uuid).find('.queue_icon')
 		if (queueList[uuid].failed == 0) {
 			result_icon.text('done')
-		} else if (queueList[uuid].failed >= queueList[uuid].size) {
-			result_icon.text('error')
 		} else {
-			result_icon.text('warning')
+			let failed_button = $('#download_' + uuid).find('.queue_failed_button')
+			result_icon.addClass('clickable')
+			failed_button.addClass('clickable')
+			result_icon.bind('click', {item:queueList[uuid]}, showErrors)
+			failed_button.bind('click', {item:queueList[uuid]}, showErrors)
+			if (queueList[uuid].failed >= queueList[uuid].size) {
+				result_icon.text('error')
+			} else {
+				result_icon.text('warning')
+			}
 		}
+
 		let index = queue.indexOf(uuid)
 		if (index > -1) {
 			queue.splice(index, 1)
@@ -307,11 +323,12 @@ function updateQueue(update) {
 			$('#download_' + uuid + ' .queue_downloaded').text(queueList[uuid].downloaded + queueList[uuid].failed)
 			if (queueList[uuid].failed == 1 && $('#download_' + uuid + ' .queue_failed').length == 0) {
 				$('#download_' + uuid + ' .download_info_status').append(
-					`<span class="secondary-text inline-flex"><span class="download_slim_separator">(</span><span class="queue_failed">1</span> <i class="material-icons">error_outline</i><span class="download_slim_separator">)</span></span>`
+					`<span class="secondary-text inline-flex"><span class="download_slim_separator">(</span><span class="queue_failed_button inline-flex"><span class="queue_failed">1</span> <i class="material-icons">error_outline</i></span><span class="download_slim_separator">)</span></span>`
 				)
 			} else {
 				$('#download_' + uuid + ' .queue_failed').text(queueList[uuid].failed)
 			}
+			queueList[uuid].errors.push({message: update.error, data: update.data})
 		}
 		if (progress) {
 			queueList[uuid].progress = progress

src/js/modules/tabs.js

@@ -4,6 +4,7 @@ import LinkAnalyzerTab from './components/link-analyzer-tab.js'
 import HomeTab from './components/home-tab.js'
 import ChartsTab from './components/charts-tab.js'
 import FavoritesTab from './components/favorites-tab.js'
+import ErrorsTab from './components/errors-tab.js'
 import { socket } from './socket.js'
 import SettingsTab from './components/settings-tab.js'
 import MainSearch from './components/main-search.js'
@@ -45,6 +46,11 @@ export function showView(viewType, event) {
 	showTab(viewType, id)
 }
 
+export function showErrors(event){
+	ErrorsTab.showErrors(event.data.item)
+	changeTab(event.target, 'main', 'errors_tab')
+}
+
 function analyzeLink(link) {
 	LinkAnalyzerTab.reset()
 	socket.emit('analyzeLink', link)
@@ -286,5 +292,6 @@ export default {
 	init,
 	changeTab,
 	showView,
-	analyzeLink
+	analyzeLink,
+	showErrors
 }

src/styles/scss/globals/_globals.scss

@@ -192,7 +192,7 @@ a:visited {
 }
 
 .clickable {
-	cursor: pointer;
+	cursor: pointer !important;
 }
 
 .toastify {