Squashed merge from refactor/code-cleanup to main

.eslintrc.yml

@@ -14,3 +14,4 @@ rules:
   no-unused-vars: off
   no-console: off
   camelcase: off
+  vue/no-v-html: off

.prettierrc

@@ -1,12 +0,0 @@
-{
-	"useTabs": true,
-	"tabWidth": 2,
-	"semi": false,
-	"singleQuote": true,
-	"bracketSpacing": true,
-	"trailingComma": "none",
-	"printWidth": 120,
-	"arrowParens": "avoid",
-	"vueIndentScriptAndStyle": false,
-	"endOfLine": "lf"
-}

.prettierrc.yml

@@ -0,0 +1,10 @@
+---
+useTabs: true
+tabWidth: 2
+semi: false
+singleQuote: true
+bracketSpacing: true
+trailingComma: none
+printWidth: 120
+arrowParens: avoid
+vueIndentScriptAndStyle: false

package.json

@@ -4,13 +4,11 @@
 	"scripts": {
 		"clean": "rimraf public/js/bundle.js public/js/bundle.temp.js public/js/bundle.js.map",
 		"clean-temp": "rimraf public/js/bundle.temp.js",
-		"serve": "python ../server.py",
+		"serve": "yarn --cwd ../server start",
-		"serve:gui": "python ../deemix-pyweb.py --dev",
 		"build:js": "rollup -c",
 		"watch:js": "rollup -c -w",
 		"minify": "esbuild public/js/bundle.temp.js --outfile=public/js/bundle.js --minify",
-		"dev": "npm-run-all --parallel serve watch:js",
+		"dev": "npm-run-all --parallel watch:js",
-		"dev:gui": "npm-run-all --parallel serve:gui watch:js",
 		"build": "npm-run-all --sequential clean build:js minify clean-temp",
 		"lint": "eslint src/**/*.{js,vue} --fix",
 		"lint-tests": "eslint src/**/*.js --fix",

src/App.vue

@@ -26,18 +26,6 @@
 	</div>
 </template>
 
-<style>
-.app-container {
-	display: flex;
-}
-
-.content-container {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-}
-</style>
-
 <script>
 import { socket } from '@/utils/socket'
 
@@ -78,3 +66,15 @@ export default {
 	}
 }
 </script>
+
+<style>
+.app-container {
+	display: flex;
+}
+
+.content-container {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+</style>

src/assets/ar.svg

@@ -1,13 +1,12 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
+	xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
+	xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+	xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
+	xmlns="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
+	id="flag-icon-css-ar"
-   id="flag-icon-css-ar"
+	viewBox="0 0 640 480"
-   viewBox="0 0 640 480"
+	version="1.1">
-   version="1.1">
   <metadata
      id="metadata1678">
     <rdf:RDF>

src/assets/deemix-icon.svg

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg8" version="1.1" viewBox="0 0 26.458333 26.458334" height="100" width="100">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg8" version="1.1"
+		 viewBox="0 0 26.458333 26.458334" height="100" width="100">
   <defs id="defs2">
     <linearGradient id="linearGradient3062">
       <stop id="stop3058" offset="0" style="stop-color:#007aff;stop-opacity:1"/>
@@ -208,7 +209,7 @@
     </filter>
   </defs>
   <metadata id="metadata5">
-    
+
   </metadata>
   <g style="display:inline" id="layer2">
     <circle r="10.583333" cy="13.229166" cx="13.229166" id="path2775" style="opacity:1;fill:#000000;fill-opacity:1;stroke-width:0.881856;stroke-linecap:round;stroke-linejoin:round"/>

src/assets/paypal.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
-	 viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
+		 viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
 <path style="fill:#03A9F4;" d="M425.457,117.739c-3.121-1.838-6.961-1.966-10.197-0.341c-3.231,1.629-5.416,4.786-5.803,8.384
 	c-0.384,3.499-0.981,6.997-1.728,10.667c-20.885,94.784-62.827,140.885-128.256,140.885h-96c-5.062,0.009-9.42,3.574-10.432,8.533
 	l-32,149.995l-5.717,38.187c-3.287,17.365,8.125,34.107,25.489,37.394c1.915,0.362,3.858,0.549,5.807,0.558h64.213

src/components/TheContent.vue

@@ -27,6 +27,41 @@
 	</main>
 </template>
 
+<script>
+import { debounce } from '@/utils/utils'
+import BackButton from '@components/globals/BackButton.vue'
+
+export default {
+	components: {
+		BackButton
+	},
+	data: () => ({
+		performScrolledSearch: false
+	}),
+	computed: {
+		showBackButton() {
+			return ['Tracklist', 'Artist', 'Album', 'Playlist', 'Spotify Playlist'].includes(this.$route.name)
+		}
+	},
+	mounted() {
+		this.$router.beforeEach((_, __, next) => {
+			this.$refs.content.scrollTo(0, 0)
+			next()
+		})
+	},
+	methods: {
+		handleContentScroll: debounce(async function () {
+			if (this.$refs.content.scrollTop + this.$refs.content.clientHeight < this.$refs.content.scrollHeight) return
+			this.performScrolledSearch = true
+
+			await this.$nextTick()
+
+			this.performScrolledSearch = false
+		}, 100)
+	}
+}
+</script>
+
 <style lang="scss">
 #container {
 	--container-width: 95%;
@@ -69,38 +104,3 @@ main::-webkit-scrollbar-thumb {
 	padding: 0px 2px;
 }
 </style>
-
-<script>
-import { debounce } from '@/utils/utils'
-import BackButton from '@components/globals/BackButton.vue'
-
-export default {
-	components: {
-		BackButton
-	},
-	data: () => ({
-		performScrolledSearch: false
-	}),
-	computed: {
-		showBackButton() {
-			return ['Tracklist', 'Artist', 'Album', 'Playlist', 'Spotify Playlist'].includes(this.$route.name)
-		}
-	},
-	mounted() {
-		this.$router.beforeEach((to, from, next) => {
-			this.$refs.content.scrollTo(0, 0)
-			next()
-		})
-	},
-	methods: {
-		handleContentScroll: debounce(async function () {
-			if (this.$refs.content.scrollTop + this.$refs.content.clientHeight < this.$refs.content.scrollHeight) return
-			this.performScrolledSearch = true
-
-			await this.$nextTick()
-
-			this.performScrolledSearch = false
-		}, 100)
-	}
-}
-</script>

src/components/TheSearchBar.vue

@@ -21,87 +21,10 @@
 	</header>
 </template>
 
-<style lang="scss">
-$icon-dimension: 2rem;
-$searchbar-height: 45px;
-
-input[type='search']::-webkit-search-cancel-button {
-	-webkit-appearance: none;
-	width: 28px;
-	height: 28px;
-	background-color: var(--foreground);
-	-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
-	mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
-}
-
-#search {
-	background-color: var(--secondary-background);
-	padding: 0 1em;
-	display: flex;
-	align-items: center;
-	border: 1px solid transparent;
-	transition: border 200ms ease-in-out;
-	border-radius: 15px;
-	margin: 10px 10px 20px 10px;
-
-	.search__icon {
-		width: $icon-dimension;
-		height: $icon-dimension;
-
-		i {
-			font-size: $icon-dimension;
-			color: var(--foreground);
-
-			&::selection {
-				background: none;
-			}
-		}
-	}
-
-	#searchbar {
-		height: $searchbar-height;
-		padding-left: 0.5em;
-		border: 0px;
-		border-radius: 0px;
-		background-color: var(--secondary-background);
-		color: var(--foreground);
-		font-size: 1.2rem;
-		font-family: 'Open Sans';
-		font-weight: 300;
-		margin-bottom: 0;
-
-		&:focus {
-			outline: none;
-		}
-
-		&::-webkit-search-cancel-button {
-			appearance: none;
-			width: 28px;
-			height: 28px;
-			background-color: var(--foreground);
-			mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
-		}
-
-		// Removing Chrome autofill color
-		&:-webkit-autofill,
-		&:-webkit-autofill:hover,
-		&:-webkit-autofill:focus,
-		&:-webkit-autofill:active {
-			box-shadow: 0 0 0 $searchbar-height var(--secondary-background) inset !important;
-		}
-	}
-
-	&:focus-within {
-		border: 1px solid var(--foreground);
-	}
-}
-</style>
-
 <script>
 import { defineComponent, ref } from '@vue/composition-api'
 import { isValidURL } from '@/utils/utils'
 import { sendAddToQueue } from '@/utils/downloads'
-import { socket } from '@/utils/socket'
 import { fetchData } from '@/utils/api'
 import EventBus from '@/utils/EventBus'
 
@@ -120,7 +43,7 @@ export default defineComponent({
 		}
 
 		const deleteSearchBarContent = keyEvent => {
-			if (!(keyEvent.key == 'Backspace' && keyEvent.ctrlKey && keyEvent.shiftKey)) return
+			if (!(keyEvent.key === 'Backspace' && keyEvent.ctrlKey && keyEvent.shiftKey)) return
 
 			this.$refs.searchbar.value = ''
 			this.$refs.searchbar.focus()
@@ -207,3 +130,79 @@ export default defineComponent({
 	}
 })
 </script>
+
+<style lang="scss">
+$icon-dimension: 2rem;
+$searchbar-height: 45px;
+
+input[type='search']::-webkit-search-cancel-button {
+	-webkit-appearance: none;
+	width: 28px;
+	height: 28px;
+	background-color: var(--foreground);
+	-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
+	mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
+}
+
+#search {
+	background-color: var(--secondary-background);
+	padding: 0 1em;
+	display: flex;
+	align-items: center;
+	border: 1px solid transparent;
+	transition: border 200ms ease-in-out;
+	border-radius: 15px;
+	margin: 10px 10px 20px 10px;
+
+	.search__icon {
+		width: $icon-dimension;
+		height: $icon-dimension;
+
+		i {
+			font-size: $icon-dimension;
+			color: var(--foreground);
+
+			&::selection {
+				background: none;
+			}
+		}
+	}
+
+	#searchbar {
+		height: $searchbar-height;
+		padding-left: 0.5em;
+		border: 0px;
+		border-radius: 0px;
+		background-color: var(--secondary-background);
+		color: var(--foreground);
+		font-size: 1.2rem;
+		font-family: 'Open Sans';
+		font-weight: 300;
+		margin-bottom: 0;
+
+		&:focus {
+			outline: none;
+		}
+
+		&::-webkit-search-cancel-button {
+			appearance: none;
+			width: 28px;
+			height: 28px;
+			background-color: var(--foreground);
+			mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
+		}
+
+		// Removing Chrome autofill color
+		&:-webkit-autofill,
+		&:-webkit-autofill:hover,
+		&:-webkit-autofill:focus,
+		&:-webkit-autofill:active {
+			box-shadow: 0 0 0 $searchbar-height var(--secondary-background) inset !important;
+		}
+	}
+
+	&:focus-within {
+		border: 1px solid var(--foreground);
+	}
+}
+</style>

src/components/TheSidebar.vue

@@ -65,6 +65,45 @@
 	</aside>
 </template>
 
+<script>
+import { computed, defineComponent, reactive, toRefs } from '@vue/composition-api'
+
+import { links } from '@/data/sidebar'
+import { useTheme } from '@/use/theme'
+
+import deemixIcon from '@/assets/deemix-icon.svg'
+
+export default defineComponent({
+	setup(_, ctx) {
+		const state = reactive({
+			activeTablink: 'home',
+			links
+		})
+		const { THEMES, currentTheme } = useTheme()
+
+		/* === Add update notification near info === */
+		const updateAvailable = computed(() => ctx.root.$store.state.appInfo.updateAvailable)
+
+		ctx.root.$router.afterEach(to => {
+			const linkInSidebar = state.links.find(link => link.routerName === to.name)
+
+			if (!linkInSidebar) return
+
+			state.activeTablink = linkInSidebar.name
+		})
+
+		return {
+			...toRefs(state),
+			updateAvailable,
+			THEMES,
+			currentTheme,
+			isSlim: computed(() => ctx.root.$store.getters.getSlimSidebar),
+			deemixIcon
+		}
+	}
+})
+</script>
+
 <style lang="scss" scoped>
 .deemix-icon-container {
 	display: grid;
@@ -108,42 +147,3 @@
 	}
 }
 </style>
-
-<script>
-import { computed, defineComponent, reactive, toRefs } from '@vue/composition-api'
-
-import { links } from '@/data/sidebar'
-import { useTheme } from '@/use/theme'
-
-import deemixIcon from '@/assets/deemix-icon.svg'
-
-export default defineComponent({
-	setup(props, ctx) {
-		const state = reactive({
-			activeTablink: 'home',
-			links
-		})
-		const { THEMES, currentTheme } = useTheme()
-
-		/* === Add update notification near info === */
-		const updateAvailable = computed(() => ctx.root.$store.state.appInfo.updateAvailable)
-
-		ctx.root.$router.afterEach((to, from) => {
-			const linkInSidebar = state.links.find(link => link.routerName === to.name)
-
-			if (!linkInSidebar) return
-
-			state.activeTablink = linkInSidebar.name
-		})
-
-		return {
-			...toRefs(state),
-			updateAvailable,
-			THEMES,
-			currentTheme,
-			isSlim: computed(() => ctx.root.$store.getters.getSlimSidebar),
-			deemixIcon
-		}
-	}
-})
-</script>

src/components/downloads/QueueItem.vue

@@ -41,184 +41,15 @@
 	</div>
 </template>
 
-<style lang="scss">
-.download-object {
-	padding-bottom: 8px;
-
-	.download-info {
-		display: flex;
-		align-items: center;
-
-		img {
-			height: 75px;
-			flex-shrink: 0;
-			flex: 0 0 75px;
-		}
-
-		.download-line {
-			display: block;
-		}
-
-		.download-slim-separator {
-			display: none;
-		}
-	}
-
-	.download-info-data {
-		flex: 1 50%;
-		margin-left: 8px;
-		overflow: hidden;
-	}
-
-	.download-info-status {
-		flex: 1 15%;
-		margin-left: 8px;
-		width: 80px;
-	}
-
-	> .download-bar {
-		display: flex;
-		align-items: center;
-		height: 24px;
-
-		> .queue_icon {
-			cursor: default;
-			margin-left: 8px;
-		}
-
-		> .progress {
-			margin: 0px;
-		}
-	}
-}
-
-#download_list:not(.slim) .download-line {
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-#download_list.slim {
-	> .download-object {
-		.download-info {
-			display: block;
-
-			img {
-				display: none;
-			}
-
-			.download-line {
-				display: inline-block;
-			}
-
-			.download-slim-separator {
-				display: inline-block;
-			}
-		}
-
-		.download-info-data {
-			width: calc(80% - 16px);
-			display: inline-block;
-			padding-left: 0px;
-		}
-
-		.download-info-status {
-			width: 20%;
-			display: inline-block; // ignored due to float
-			float: right;
-		}
-	}
-}
-
-.progress {
-	position: relative;
-	height: 4px;
-	display: block;
-	width: 100%;
-	background-color: var(--secondary-background);
-	border-radius: 2px;
-	margin: 0.5rem 0 1rem 0;
-	overflow: hidden;
-
-	.determinate {
-		position: absolute;
-		top: 0;
-		left: 0;
-		bottom: 0;
-		background-color: var(--primary-color);
-		transition: width 0.3s linear;
-	}
-
-	.converting {
-		background-color: var(--secondary-color);
-		transition: none !important;
-	}
-
-	.indeterminate {
-		background-color: var(--primary-color);
-
-		&::before {
-			content: '';
-			position: absolute;
-			background-color: inherit;
-			top: 0;
-			left: 0;
-			bottom: 0;
-			will-change: left, right;
-			animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-		}
-
-		&::after {
-			content: '';
-			position: absolute;
-			background-color: inherit;
-			top: 0;
-			left: 0;
-			bottom: 0;
-			will-change: left, right;
-			animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-			animation-delay: 1.15s;
-		}
-	}
-}
-
-@keyframes indeterminate {
-	0% {
-		left: -35%;
-		right: 100%;
-	}
-	60% {
-		left: 100%;
-		right: -90%;
-	}
-	100% {
-		left: 100%;
-		right: -90%;
-	}
-}
-
-@keyframes indeterminate-short {
-	0% {
-		left: -200%;
-		right: 100%;
-	}
-	60% {
-		left: 107%;
-		right: -8%;
-	}
-	100% {
-		left: 107%;
-		right: -8%;
-	}
-}
-</style>
-
 <script>
 const possibleStates = ['converting', 'downloading', 'download finished', 'completed']
 
 export default {
 	props: {
-		queueItem: Object
+		queueItem: {
+			type: Object,
+			default: () => ({})
+		}
 	},
 	data() {
 		return {
@@ -321,3 +152,174 @@ export default {
 	}
 }
 </script>
+
+<style lang="scss">
+.download-object {
+	padding-bottom: 8px;
+
+	.download-info {
+		display: flex;
+		align-items: center;
+
+		img {
+			height: 75px;
+			flex: 0 0 75px;
+		}
+
+		.download-line {
+			display: block;
+		}
+
+		.download-slim-separator {
+			display: none;
+		}
+	}
+
+	.download-info-data {
+		flex: 1 50%;
+		margin-left: 8px;
+		overflow: hidden;
+	}
+
+	.download-info-status {
+		flex: 1 15%;
+		margin-left: 8px;
+		width: 80px;
+	}
+
+	> .download-bar {
+		display: flex;
+		align-items: center;
+		height: 24px;
+
+		> .queue_icon {
+			cursor: default;
+			margin-left: 8px;
+		}
+
+		> .progress {
+			margin: 0;
+		}
+	}
+}
+
+#download_list:not(.slim) .download-line {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+#download_list.slim {
+	> .download-object {
+		.download-info {
+			display: block;
+
+			img {
+				display: none;
+			}
+
+			.download-line {
+				display: inline-block;
+			}
+
+			.download-slim-separator {
+				display: inline-block;
+			}
+		}
+
+		.download-info-data {
+			width: calc(80% - 16px);
+			display: inline-block;
+			padding-left: 0;
+		}
+
+		.download-info-status {
+			width: 20%;
+			display: inline-block; // ignored due to float
+			float: right;
+		}
+	}
+}
+
+.progress {
+	position: relative;
+	height: 4px;
+	display: block;
+	width: 100%;
+	background-color: var(--secondary-background);
+	border-radius: 2px;
+	margin: 0.5rem 0 1rem 0;
+	overflow: hidden;
+
+	.determinate {
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		background-color: var(--primary-color);
+		transition: width 0.3s linear;
+	}
+
+	.converting {
+		background-color: var(--secondary-color);
+		transition: none !important;
+	}
+
+	.indeterminate {
+		background-color: var(--primary-color);
+
+		&::before {
+			content: '';
+			position: absolute;
+			background-color: inherit;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			will-change: left, right;
+			animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+		}
+
+		&::after {
+			content: '';
+			position: absolute;
+			background-color: inherit;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			will-change: left, right;
+			animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+			animation-delay: 1.15s;
+		}
+	}
+}
+
+@keyframes indeterminate {
+	0% {
+		left: -35%;
+		right: 100%;
+	}
+	60% {
+		left: 100%;
+		right: -90%;
+	}
+	100% {
+		left: 100%;
+		right: -90%;
+	}
+}
+
+@keyframes indeterminate-short {
+	0% {
+		left: -200%;
+		right: 100%;
+	}
+	60% {
+		left: 107%;
+		right: -8%;
+	}
+	100% {
+		left: 107%;
+		right: -8%;
+	}
+}
+</style>

src/components/downloads/TheDownloadBar.vue

@@ -63,58 +63,6 @@
 	</section>
 </template>
 
-<style lang="scss" scoped>
-#toggle_download_tab {
-	width: 25px;
-	height: 25px;
-
-	&::before {
-		font-family: 'Material Icons';
-		font-style: normal;
-		font-weight: 400;
-		content: 'chevron_right';
-	}
-}
-
-#download_tab_container.tab-hidden {
-	#toggle_download_tab {
-		&::before {
-			content: 'chevron_left';
-		}
-	}
-
-	&::after {
-		content: attr(data-label);
-		display: flex;
-		align-items: center;
-		text-transform: capitalize;
-		writing-mode: vertical-rl;
-		line-height: 2rem;
-	}
-}
-
-#download_list {
-	height: calc(100% - 32px);
-	padding-left: 28px;
-	overflow-y: scroll;
-
-	&::-webkit-scrollbar {
-		width: 10px;
-	}
-
-	&::-webkit-scrollbar-track {
-		background: var(--panels-background);
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--panels-scroll);
-		border-radius: 4px;
-		width: 6px;
-		padding: 0px 2px;
-	}
-}
-</style>
-
 <script>
 import { mapActions, mapGetters } from 'vuex'
 import QueueItem from '@components/downloads/QueueItem.vue'
@@ -250,7 +198,7 @@ export default {
 		addToQueue(queueItem, current = false) {
 			if (Array.isArray(queueItem)) {
 				if (queueItem.length > 1) {
-					queueItem.forEach((item, i) => {
+					queueItem.forEach(item => {
 						item.silent = true
 						this.addToQueue(item)
 					})
@@ -435,3 +383,55 @@ export default {
 	}
 }
 </script>
+
+<style lang="scss" scoped>
+#toggle_download_tab {
+	width: 25px;
+	height: 25px;
+
+	&::before {
+		font-family: 'Material Icons';
+		font-style: normal;
+		font-weight: 400;
+		content: 'chevron_right';
+	}
+}
+
+#download_tab_container.tab-hidden {
+	#toggle_download_tab {
+		&::before {
+			content: 'chevron_left';
+		}
+	}
+
+	&::after {
+		content: attr(data-label);
+		display: flex;
+		align-items: center;
+		text-transform: capitalize;
+		writing-mode: vertical-rl;
+		line-height: 2rem;
+	}
+}
+
+#download_list {
+	height: calc(100% - 32px);
+	padding-left: 28px;
+	overflow-y: scroll;
+
+	&::-webkit-scrollbar {
+		width: 10px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: var(--panels-background);
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--panels-scroll);
+		border-radius: 4px;
+		width: 6px;
+		padding: 0px 2px;
+	}
+}
+</style>

src/components/globals/BaseAccordion.vue

@@ -10,17 +10,6 @@
 	</details>
 </template>
 
-<style>
-details > summary::marker {
-	display: none;
-}
-
-details.with-arrow > summary::marker {
-	display: initial;
-	vertical-align: var(--arrow-v-align, super);
-}
-</style>
-
 <script>
 export default {
 	props: {
@@ -31,3 +20,14 @@ export default {
 	}
 }
 </script>
+
+<style>
+details > summary::marker {
+	display: none;
+}
+
+details.with-arrow > summary::marker {
+	display: initial;
+	vertical-align: var(--arrow-v-align, super);
+}
+</style>

src/components/globals/BaseTabs.js

@@ -1,3 +1,4 @@
+/* eslint-disable vue/one-component-per-file */
 import { defineComponent } from '@vue/composition-api'
 
 // https://vuejs.org/v2/guide/render-function.html

src/components/globals/ConfirmModal.vue

@@ -13,6 +13,22 @@
 	</div>
 </template>
 
+<script>
+export default {
+	data() {
+		return {
+			titleText: 'Are you sure you want to reset settings to default?'
+		}
+	},
+	mounted() {
+		setTimeout(() => {
+			// this.$refs.wrapper.classList.add('bounceIn')
+			// this.$refs.body.classList.add('bounceIn')
+		}, 2000)
+	}
+}
+</script>
+
 <style lang="scss" scoped>
 $body-padding: 2rem;
 $body-radius: 15px;
@@ -68,19 +84,3 @@ $body-radius: 15px;
 	z-index: 1;
 }
 </style>
-
-<script>
-export default {
-	data() {
-		return {
-			titleText: 'Are you sure you want to reset settings to default?'
-		}
-	},
-	mounted() {
-		setTimeout(() => {
-			// this.$refs.wrapper.classList.add('bounceIn')
-			// this.$refs.body.classList.add('bounceIn')
-		}, 2000)
-	}
-}
-</script>

src/components/globals/CoverContainer.vue

@@ -20,6 +20,30 @@
 	</div>
 </template>
 
+<script>
+export default {
+	inheritAttrs: false,
+	props: {
+		cover: {
+			type: String,
+			required: true
+		},
+		isRounded: {
+			type: Boolean,
+			required: false
+		},
+		isCircle: {
+			type: Boolean,
+			required: false
+		},
+		link: {
+			type: String,
+			required: true
+		}
+	}
+}
+</script>
+
 <style lang="scss" scoped>
 .cover-container {
 	width: 156px;
@@ -58,32 +82,8 @@
 
 		.download_overlay {
 			opacity: 1;
-			border: 0px;
+			border: 0;
 		}
 	}
 }
 </style>
-
-<script>
-export default {
-	inheritAttrs: false,
-	props: {
-		cover: {
-			type: String,
-			reqired: true
-		},
-		isRounded: {
-			type: Boolean,
-			required: false
-		},
-		isCircle: {
-			type: Boolean,
-			required: false
-		},
-		link: {
-			type: String,
-			reqired: true
-		}
-	}
-}
-</script>

src/components/globals/DeezerWarning.vue

@@ -1,23 +1,23 @@
 <template>
-  <div id="deezer_not_available" class="hide">
+	<div id="deezer_not_available" class="hide">
-    <i class="material-icons">warning</i> {{ $t('toasts.deezerNotAvailable') }}
+		<i class="material-icons">warning</i> {{ $t('toasts.deezerNotAvailable') }}
-  </div>
+	</div>
 </template>
 
 <style>
-  #deezer_not_available {
+#deezer_not_available {
-    background-color: hsl(53, 98%, 47%);
+	background-color: hsl(53, 98%, 47%);
-    color: rgba(0,0,0, .75);
+	color: rgba(0, 0, 0, 0.75);
-    padding: 8px 12px;
+	padding: 8px 12px;
-    margin: -10px 10px 0px;
+	margin: -10px 10px 0px;
-    display: flex;
+	display: flex;
-    border-radius: 8px;
+	border-radius: 8px;
-    align-items: center;
+	align-items: center;
-  }
+}
-  #deezer_not_available i {
+#deezer_not_available i {
-    margin-right: 8px;
+	margin-right: 8px;
-  }
+}
-  #deezer_not_available.hide {
+#deezer_not_available.hide {
-    display: none !important;
+	display: none !important;
-  }
+}
 </style>

src/components/globals/TheContextMenu.vue

@@ -80,7 +80,7 @@ export default {
 					position: 6,
 					action: () => {
 						// Paste does not always work
-						if (clipboard in navigator) {
+						if ('clipboard' in navigator) {
 							navigator.clipboard.readText().then(text => {
 								document.execCommand('insertText', undefined, text)
 							})

src/components/globals/TheQualityModal.vue

@@ -22,43 +22,7 @@
 		</div>
 	</div>
 </template>
-<style lang="scss">
-.smallmodal {
-	position: fixed;
-	z-index: 1250;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
-	overflow: auto;
-	background-color: hsla(0, 0%, 0%, 0.4);
-	animation-duration: 0.3s;
-}
 
-.smallmodal-content {
-	--modal-content-width: 95%;
-
-	background-color: transparent;
-	margin: auto;
-	width: var(--modal-content-width);
-	position: relative;
-	top: 50%;
-	transform: translateY(-50%);
-
-	@media only screen and (min-width: 601px) {
-		--modal-content-width: 85%;
-	}
-
-	@media only screen and (min-width: 993px) {
-		--modal-content-width: 70%;
-	}
-}
-
-.smallmodal-content button {
-	width: 100%;
-	margin-bottom: 8px;
-}
-</style>
 <script>
 import { sendAddToQueue } from '@/utils/downloads'
 
@@ -99,3 +63,41 @@ export default {
 	}
 }
 </script>
+
+<style lang="scss">
+.smallmodal {
+	position: fixed;
+	z-index: 1250;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+	background-color: hsla(0, 0%, 0%, 0.4);
+	animation-duration: 0.3s;
+}
+
+.smallmodal-content {
+	--modal-content-width: 95%;
+
+	background-color: transparent;
+	margin: auto;
+	width: var(--modal-content-width);
+	position: relative;
+	top: 50%;
+	transform: translateY(-50%);
+
+	@media only screen and (min-width: 601px) {
+		--modal-content-width: 85%;
+	}
+
+	@media only screen and (min-width: 993px) {
+		--modal-content-width: 70%;
+	}
+}
+
+.smallmodal-content button {
+	width: 100%;
+	margin-bottom: 8px;
+}
+</style>

src/components/globals/TheTrackPreview.vue

@@ -34,7 +34,7 @@ export default {
 	mounted() {
 		this.$refs.preview.volume = 1
 
-		this.$router.beforeEach((to, from, next) => {
+		this.$router.beforeEach((_, __, next) => {
 			this.stopStackedTabsPreview()
 			next()
 		})
@@ -86,7 +86,7 @@ export default {
 
 			const { currentTarget: obj } = e
 
-			const icon = obj.tagName == 'I' ? obj : obj.querySelector('i')
+			const icon = obj.tagName === 'I' ? obj : obj.querySelector('i')
 
 			if (obj.hasAttribute('playing')) {
 				if (this.$refs.preview.paused) {

src/components/pages/About.vue

@@ -144,6 +144,49 @@
 	</div>
 </template>
 
+<script>
+import { computed, defineComponent, onMounted, reactive, toRefs } from '@vue/composition-api'
+
+import { useOnline } from '@/use/online'
+
+import paypal from '@/assets/paypal.svg'
+import ethereum from '@/assets/ethereum.svg'
+
+export default defineComponent({
+	setup(_, ctx) {
+		const state = reactive({
+			current: null,
+			latest: null,
+			updateAvailable: false,
+			deemixVersion: null
+		})
+		const { isOnline } = useOnline()
+
+		function initUpdate(appInfo) {
+			const { currentCommit, latestCommit, updateAvailable, deemixVersion } = appInfo
+
+			state.current = currentCommit
+			state.latest = latestCommit
+			state.updateAvailable = updateAvailable
+			state.deemixVersion = deemixVersion
+		}
+
+		const getAppInfo = computed(() => ctx.root.$store.getters.getAppInfo)
+
+		onMounted(() => {
+			initUpdate(getAppInfo.value)
+		})
+
+		return {
+			...toRefs(state),
+			paypal,
+			ethereum,
+			isOnline
+		}
+	}
+})
+</script>
+
 <style lang="scss" scoped>
 li,
 p,
@@ -233,46 +276,3 @@ ul {
 	}
 }
 </style>
-
-<script>
-import { computed, defineComponent, onMounted, reactive, toRefs } from '@vue/composition-api'
-
-import { useOnline } from '@/use/online'
-
-import paypal from '@/assets/paypal.svg'
-import ethereum from '@/assets/ethereum.svg'
-
-export default defineComponent({
-	setup(props, ctx) {
-		const state = reactive({
-			current: null,
-			latest: null,
-			updateAvailable: false,
-			deemixVersion: null
-		})
-		const { isOnline } = useOnline()
-
-		function initUpdate(appInfo) {
-			const { currentCommit, latestCommit, updateAvailable, deemixVersion } = appInfo
-
-			state.current = currentCommit
-			state.latest = latestCommit
-			state.updateAvailable = updateAvailable
-			state.deemixVersion = deemixVersion
-		}
-
-		const getAppInfo = computed(() => ctx.root.$store.getters.getAppInfo)
-
-		onMounted(() => {
-			initUpdate(getAppInfo.value)
-		})
-
-		return {
-			...toRefs(state),
-			paypal,
-			ethereum,
-			isOnline
-		}
-	}
-})
-</script>

src/components/pages/Artist.vue

@@ -87,7 +87,7 @@
 </template>
 
 <script>
-import { defineComponent, ref, unref, reactive, computed, onMounted, toRefs, watch } from '@vue/composition-api'
+import { defineComponent, ref, unref, reactive, computed, toRefs } from '@vue/composition-api'
 import { orderBy } from 'lodash-es'
 
 import { BaseTabs, BaseTab } from '@components/globals/BaseTabs'
@@ -102,7 +102,7 @@ export default defineComponent({
 		BaseTabs,
 		BaseTab
 	},
-	setup(props, ctx) {
+	setup(_, ctx) {
 		const state = reactive({
 			currentTab: '',
 			sortKey: 'releaseDate',
@@ -145,7 +145,7 @@ export default defineComponent({
 			let sortKey = state.sortKey
 
 			if (sortKey === 'releaseTracksNumber') {
-				sortKey = o => new Number(o.releaseTracksNumber)
+				sortKey = o => Number(o.releaseTracksNumber)
 			}
 
 			return orderBy(state.currentRelease, sortKey, state.sortOrder)

src/components/pages/Charts.vue

@@ -26,7 +26,7 @@
 			</button>
 			<table class="table table--charts">
 				<tbody>
-					<tr v-for="(track, pos) in chart" class="track_row">
+					<tr v-for="(track, pos) in chart" :key="pos" class="track_row">
 						<td :class="{ first: pos === 0 }" class="p-3 text-center cursor-default">
 							{{ pos + 1 }}
 						</td>
@@ -91,7 +91,6 @@ import { getChartsData, getChartTracks } from '@/data/charts'
 
 import PreviewControls from '@components/globals/PreviewControls.vue'
 import { playPausePreview } from '@components/globals/TheTrackPreview.vue'
-import { fetchData } from '@/utils/api'
 
 export default {
 	components: {
@@ -178,7 +177,7 @@ export default {
 
 			let i = 0
 			for (; i < this.countries.length; i++) {
-				if (this.countries[i].title == this.country) break
+				if (this.countries[i].title === this.country) break
 			}
 
 			if (i !== this.countries.length) {

src/components/pages/Favorites.vue

@@ -24,7 +24,7 @@
 		</button>
 
 		<div v-show="activeTab === 'playlist'">
-			<div v-if="playlists.length == 0">
+			<div v-if="playlists.length === 0">
 				<h1>{{ $t('favorites.noPlaylists') }}</h1>
 			</div>
 			<div v-if="playlists.length > 0 || spotifyPlaylists.length > 0" class="release-grid">

src/components/pages/Home.vue

@@ -75,14 +75,14 @@ export default {
 			albums: []
 		}
 	},
+	computed: {
+		...mapGetters(['isLoggedIn'])
+	},
 	async created() {
 		const homeData = await getHomeData()
 
 		this.initHome(homeData)
 	},
-	computed: {
-		...mapGetters(['isLoggedIn'])
-	},
 	methods: {
 		addToQueue(e) {
 			sendAddToQueue(e.currentTarget.dataset.link)

src/components/pages/LinkAnalyzer.vue

@@ -120,14 +120,14 @@
 				</tr>
 			</table>
 
-			<div v-if="type == 'album'">
+			<div v-if="type === 'album'">
 				<router-link tag="button" class="btn btn-primary" name="button" :to="{ name: 'Album', params: { id } }">
 					{{ $t('linkAnalyzer.table.tracklist') }}
 				</router-link>
 			</div>
 
 			<div v-if="countries.length">
-				<p v-for="country in countries">{{ country[0] }} - {{ country[1] }}</p>
+				<p v-for="(country, i) in countries" :key="i">{{ country[0] }} - {{ country[1] }}</p>
 			</div>
 		</div>
 	</div>

src/components/pages/Search.vue

@@ -43,8 +43,6 @@ import ResultsArtists from '@components/search/ResultsArtists.vue'
 import ResultsPlaylists from '@components/search/ResultsPlaylists.vue'
 import ResultsTracks from '@components/search/ResultsTracks.vue'
 import { BaseTabs, BaseTab } from '@components/globals/BaseTabs'
-
-import { socket } from '@/utils/socket'
 import { sendAddToQueue } from '@/utils/downloads'
 import { numberWithDots, convertDuration } from '@/utils/utils'
 
@@ -52,7 +50,6 @@ import { formatSingleTrack, formatAlbums, formatArtist, formatPlaylist } from '@
 import { standardizeData } from '@/data/standardize'
 import { useMainSearch } from '@/use/main-search'
 import { useSearch } from '@/use/search'
-import { useLogs } from '@/use/logs'
 
 const resetObj = { data: [], next: 0, total: 0, hasLoaded: false }
 
@@ -70,7 +67,7 @@ export default defineComponent({
 			required: false
 		}
 	},
-	setup(props, ctx) {
+	setup(_, ctx) {
 		const state = reactive({
 			currentTab: {
 				name: '',
@@ -249,7 +246,7 @@ export default defineComponent({
 
 			this.scrolledSearch(needToSearch)
 		},
-		currentTab(newTab, old) {
+		currentTab(newTab) {
 			if (this.isTabLoaded(newTab)) return
 
 			this.performSearch({

src/components/pages/Settings.vue

@@ -718,101 +718,6 @@
 	</div>
 </template>
 
-<style lang="scss" scoped>
-#logged_in_info {
-	display: flex;
-	align-items: center;
-	flex-direction: column;
-	justify-content: space-evenly;
-	height: 250px;
-}
-
-.locale-flag {
-	justify-content: center;
-	cursor: pointer;
-	width: 60px;
-
-	&:not(:last-child) {
-		margin-right: 10px;
-	}
-
-	&.locale-flag--current {
-		::v-deep svg {
-			filter: brightness(1) !important;
-		}
-	}
-
-	&::v-deep svg {
-		width: 40px !important;
-		height: 40px !important;
-		filter: brightness(0.5);
-	}
-}
-
-.settings-group {
-	border-top-width: 1px;
-	border-color: hsl(0, 0%, 50%);
-}
-
-.settings-group__header {
-	display: inline-flex;
-	align-items: center;
-	padding-top: 2rem;
-	padding-bottom: 2rem;
-	font-size: 1.5rem;
-
-	i.material-icons {
-		margin-right: 1rem;
-	}
-}
-
-.settings-container {
-	display: flex;
-
-	&__half {
-		width: 50%;
-	}
-
-	&__third {
-		width: 33%;
-
-		&--only-checkbox {
-			display: flex;
-			align-items: start;
-			flex-direction: column;
-			justify-content: center;
-		}
-	}
-
-	&__half > *,
-	&__third > * {
-		margin-bottom: 1rem;
-	}
-}
-
-.with-checkbox {
-	display: flex;
-	align-items: center;
-
-	[type='checkbox'] {
-		cursor: pointer;
-	}
-
-	.checkbox-text {
-		margin-left: 10px;
-		cursor: pointer;
-		user-select: none;
-	}
-}
-
-/* Input group */
-.input-group {
-	.input-group-text {
-		margin-bottom: 0.5rem;
-	}
-}
-</style>
-
 <script>
 import { mapActions, mapGetters } from 'vuex'
 import { debounce } from 'lodash-es'
@@ -1013,7 +918,7 @@ export default {
 			this.lastCredentials = JSON.parse(JSON.stringify(credentials))
 			this.spotifyFeatures = JSON.parse(JSON.stringify(credentials))
 		},
-		async loggedInViaDeezer(arl) {
+		loggedInViaDeezer(arl) {
 			this.dispatchARL({ arl })
 			// this.login()
 			// const res = await fetchData('login', { arl, force: true, child: this.accountNum })
@@ -1043,7 +948,7 @@ export default {
 					toast(this.$t('toasts.deezerNotAvailable'), 'close', true, 'login-toast')
 			}
 		},
-		async loginButton() {
+		loginButton() {
 			const newArl = this.$refs.loginInput.value.trim()
 
 			if (newArl && newArl !== this.arl) {
@@ -1117,3 +1022,98 @@ export default {
 	}
 }
 </script>
+
+<style lang="scss" scoped>
+#logged_in_info {
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	justify-content: space-evenly;
+	height: 250px;
+}
+
+.locale-flag {
+	justify-content: center;
+	cursor: pointer;
+	width: 60px;
+
+	&:not(:last-child) {
+		margin-right: 10px;
+	}
+
+	&.locale-flag--current {
+		::v-deep svg {
+			filter: brightness(1) !important;
+		}
+	}
+
+	&::v-deep svg {
+		width: 40px !important;
+		height: 40px !important;
+		filter: brightness(0.5);
+	}
+}
+
+.settings-group {
+	border-top-width: 1px;
+	border-color: hsl(0, 0%, 50%);
+}
+
+.settings-group__header {
+	display: inline-flex;
+	align-items: center;
+	padding-top: 2rem;
+	padding-bottom: 2rem;
+	font-size: 1.5rem;
+
+	i.material-icons {
+		margin-right: 1rem;
+	}
+}
+
+.settings-container {
+	display: flex;
+
+	&__half {
+		width: 50%;
+	}
+
+	&__third {
+		width: 33%;
+
+		&--only-checkbox {
+			display: flex;
+			align-items: start;
+			flex-direction: column;
+			justify-content: center;
+		}
+	}
+
+	&__half > *,
+	&__third > * {
+		margin-bottom: 1rem;
+	}
+}
+
+.with-checkbox {
+	display: flex;
+	align-items: center;
+
+	[type='checkbox'] {
+		cursor: pointer;
+	}
+
+	.checkbox-text {
+		margin-left: 10px;
+		cursor: pointer;
+		user-select: none;
+	}
+}
+
+/* Input group */
+.input-group {
+	.input-group-text {
+		margin-bottom: 0.5rem;
+	}
+}
+</style>

src/components/pages/Tracklist.vue

@@ -37,7 +37,7 @@
 			<tbody>
 				<template v-if="type !== 'spotifyPlaylist'">
 					<template v-for="(track, index) in body">
-						<tr v-if="track.type == 'track'" @click="selectRow(index, track)">
+						<tr v-if="track.type === 'track'" @click="selectRow(index, track)">
 							<td class="table__cell--x-small table__cell--center">
 								<div class="table__cell-content table__cell-content--vertical-center">
 									<i
@@ -152,7 +152,6 @@
 
 <script>
 import { isEmpty } from 'lodash-es'
-import { socket } from '@/utils/socket'
 import { sendAddToQueue } from '@/utils/downloads'
 import Utils from '@/utils/utils'
 import { playPausePreview } from '@components/globals/TheTrackPreview.vue'
@@ -300,7 +299,7 @@ export default {
 				this.body = playlistTracks
 			}
 		},
-		selectRow(index, track) {
+		selectRow(_, track) {
 			track.selected = !track.selected
 		}
 	}

src/components/search/ResultsAlbums.vue

@@ -63,7 +63,7 @@ export default {
 		},
 		itemsToShow: {
 			type: Number,
-			required: false
+			default: 6
 		},
 		wantHeaders: {
 			type: Boolean,

src/components/search/ResultsAll.vue

@@ -32,28 +32,24 @@
 					<ResultsTracks
 						v-else-if="section === 'TRACK'"
 						:view-info="standardizeData(viewInfo.TRACK, formatSingleTrack)"
-						:items-to-show="6"
 						@add-to-queue="$emit('add-to-queue', $event)"
 					/>
 
 					<ResultsAlbums
-						v-else-if="section == 'ALBUM'"
+						v-else-if="section === 'ALBUM'"
 						:view-info="standardizeData(viewInfo.ALBUM, formatAlbums)"
-						:items-to-show="6"
 						@add-to-queue="$emit('add-to-queue', $event)"
 					/>
 
 					<ResultsPlaylists
-						v-else-if="section == 'PLAYLIST'"
+						v-else-if="section === 'PLAYLIST'"
 						:view-info="standardizeData(viewInfo.PLAYLIST, formatPlaylist)"
-						:items-to-show="6"
 						@add-to-queue="$emit('add-to-queue', $event)"
 					/>
 
 					<ResultsArtists
 						v-else-if="section === 'ARTIST'"
 						:view-info="standardizeData(viewInfo.ARTIST, formatArtist)"
-						:items-to-show="6"
 						@add-to-queue="$emit('add-to-queue', $event)"
 					/>
 				</template>
@@ -85,7 +81,7 @@ export default {
 	props: {
 		viewInfo: {
 			type: Object,
-			required: false
+			required: true
 		}
 	},
 	computed: {

src/components/search/ResultsArtists.vue

@@ -51,7 +51,7 @@ export default {
 		},
 		itemsToShow: {
 			type: Number,
-			required: false
+			default: 6
 		},
 		wantHeaders: {
 			type: Boolean,

src/components/search/ResultsPlaylists.vue

@@ -56,7 +56,7 @@ export default {
 		},
 		itemsToShow: {
 			type: Number,
-			required: false
+			default: 6
 		},
 		wantHeaders: {
 			type: Boolean,

src/components/search/ResultsTracks.vue

@@ -111,7 +111,7 @@ export default {
 		},
 		itemsToShow: {
 			type: Number,
-			required: false
+			default: 6
 		},
 		wantHeaders: {
 			type: Boolean,

src/components/search/TopResult.vue

@@ -46,7 +46,7 @@ export default {
 				number = this.$n(this.$attrs.info.nb_fan, { locale: 'en' })
 			}
 
-			return this.$attrs.info.type == 'artist'
+			return this.$attrs.info.type === 'artist'
 				? this.$t('search.fans', { n: number })
 				: this.$t('globals.by', { artist: this.$attrs.info.artist }) +
 						' - ' +

src/components/settings/TemplateVariablesList.vue

@@ -6,7 +6,8 @@
 
 		<div class="flex flex-wrap p-4 space-x-2 rounded-2xl bg-background-secondary">
 			<span
-				v-for="templateVariable in templateVariables"
+				v-for="(templateVariable, i) in templateVariables"
+				:key="i"
 				class="inline-block p-2 mt-2 tracking-wider rounded cursor-pointer bg-panels-bg first:ml-2 hover:shadow-outline"
 				@click="$emit('variable-click', templateVariable)"
 			>

src/data/settings.js

@@ -4,17 +4,13 @@ let settingsData = {}
 let defaultSettingsData = {}
 let spotifyCredentials = {}
 
-const cached = false
-
 export async function getSettingsData() {
-	if (!cached) {
+	const data = await fetchData('getSettings')
-		const data = await fetchData('getSettings')
+	const { settings, defaultSettings, spotifySettings } = data
-		const { settings, defaultSettings, spotifySettings } = data
+	settingsData = settings
-		// cached = true
+	defaultSettingsData = defaultSettings
-		settingsData = settings
+	spotifyCredentials = spotifySettings || {}
-		defaultSettingsData = defaultSettings
+
-		spotifyCredentials = spotifySettings || {}
-	}
 	return { settingsData, defaultSettingsData, spotifyCredentials }
 }
 

src/lang/fr.js

@@ -406,7 +406,7 @@ const fr = {
 			ARLcopied: 'ARL copié dans le presse-papier'
 		},
 		logs: {
-			title: "Journaux (Logs)",
+			title: 'Journaux (Logs)',
 			areLogsActive: 'Actifs'
 		}
 	},
@@ -417,7 +417,7 @@ const fr = {
 		favorites: 'favoris',
 		linkAnalyzer: 'analyseur de lien',
 		settings: 'paramètres',
-		logs: "journaux (logs)",
+		logs: 'journaux (logs)',
 		about: 'à propos'
 	},
 	tracklist: {

src/plugins/i18n.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 
-import { locales } from '@/lang/index'
+import { locales } from '@/lang'
 
 Vue.use(VueI18n)
 
@@ -20,7 +20,7 @@ const i18n = new VueI18n({
 		 * @param {number}	choicesLength		An overall amount of available choices
 		 * @returns 				A final choice index to select plural word by
 		 */
-		ru(choice, choicesLength) {
+		ru(choice /*, choicesLength */) {
 			const n = Math.abs(choice) % 100
 			const n1 = n % 10
 

src/router.js

@@ -127,12 +127,12 @@ const routes = [
 const router = new VueRouter({
 	mode: 'history',
 	routes,
-	scrollBehavior(to, from, savedPosition) {
+	scrollBehavior() {
 		return { x: 0, y: 0 }
 	}
 })
 
-router.beforeEach((to, from, next) => {
+router.beforeEach((to, _, next) => {
 	switch (to.name) {
 		case 'Tracklist': {
 			// const getTracklistParams = {

src/store/modules/errors.js

@@ -28,10 +28,9 @@ const mutations = {
 	SET_ERRORS(state, payload) {
 		// The payload has useless data for the GUI, so only the needed data is saved in the store
 		for (const errorName in state) {
+			// eslint-disable-next-line no-prototype-builtins
 			if (state.hasOwnProperty(errorName)) {
-				const error = payload[errorName]
+				state[errorName] = payload[errorName]
-
-				state[errorName] = error
 			}
 		}
 	}

src/store/modules/login.js

@@ -34,7 +34,8 @@ const actions = {
 		commit('RESET_LOGIN')
 	},
 	setARL({ commit }, payload) {
-		let { arl, saveOnLocalStorage } = payload
+		let { saveOnLocalStorage } = payload
+		const { arl } = payload
 
 		saveOnLocalStorage = typeof saveOnLocalStorage === 'undefined' ? true : saveOnLocalStorage
 
@@ -45,7 +46,8 @@ const actions = {
 		}
 	},
 	setAccessToken({ commit }, payload) {
-		let { accessToken, saveOnLocalStorage } = payload
+		let { saveOnLocalStorage } = payload
+		const { accessToken } = payload
 
 		saveOnLocalStorage = typeof saveOnLocalStorage === 'undefined' ? true : saveOnLocalStorage
 

src/use/logs.js

@@ -1,4 +1,4 @@
-import { ref, watch } from '@vue/composition-api'
+import { ref } from '@vue/composition-api'
 import { socket } from '@/utils/socket'
 
 const messages = ref([])

src/utils/adjust-volume.js

@@ -1,5 +1,5 @@
 // https://stackoverflow.com/questions/7451508/html5-audio-playback-with-fade-in-and-fade-out#answer-13149848
-export async function adjustVolume(element, newVolume, { duration = 1000, easing = swing, interval = 13 } = {}) {
+export function adjustVolume(element, newVolume, { duration = 1000, easing = swing, interval = 13 } = {}) {
 	const originalVolume = element.volume
 	const delta = newVolume - originalVolume
 

src/utils/toasts.js

@@ -31,7 +31,7 @@ export const toast = function (msg, icon = null, dismiss = true, id = null) {
 			const iconNode = document.createElement('span')
 			iconNode.classList.add('toast-icon')
 
-			if (icon == 'loading') {
+			if (icon === 'loading') {
 				const loader = document.createElement('div')
 				loader.classList.add('circle-loader')
 				iconNode.appendChild(loader)
@@ -66,7 +66,7 @@ export const toast = function (msg, icon = null, dismiss = true, id = null) {
 		iconNode.classList.add('toast-icon')
 		if (icon == null) {
 			iconNode.appendChild(document.createTextNode(''))
-		} else if (icon == 'loading') {
+		} else if (icon === 'loading') {
 			const loader = document.createElement('div')
 			loader.classList.add('circle-loader')
 			iconNode.appendChild(loader)

src/utils/utils.js

@@ -47,14 +47,15 @@ export function isValidURL(text) {
  * @since		0.0.0
  */
 export function convertDuration(duration) {
+	const mm = Math.floor(duration / 60)
+
 	// Convert from seconds only to mm:ss format
-	let mm, ss
+	let ss = duration - mm * 60 // Add leading zero if ss < 0
-	mm = Math.floor(duration / 60)
+
-	ss = duration - mm * 60
-	// Add leading zero if ss < 0
 	if (ss < 10) {
 		ss = '0' + ss
 	}
+
 	return mm + ':' + ss
 }
 
@@ -64,11 +65,13 @@ export function convertDuration(duration) {
  * @since	0.0.0
  */
 export function convertDurationSeparated(duration) {
-	let hh, mm, ss
+	let mm = Math.floor(duration / 60)
-	mm = Math.floor(duration / 60)
+
-	hh = Math.floor(mm / 60)
+	const hh = Math.floor(mm / 60)
-	ss = duration - mm * 60
+	const ss = duration - mm * 60
+
 	mm -= hh * 60
+
 	return [hh, mm, ss]
 }
 

yarn.lock

@@ -21,7 +21,7 @@
   resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.14.0.tgz"
   integrity sha512-vu9V3uMM/1o5Hl5OekMUowo3FqXLJSw+s+66nt0fSWVWTtmosdzn45JHOB3cPtZoe6CTBDzvSw0RdOY85Q37+Q==
 
-"@babel/core@7.14.3":
+"@babel/core@7.14.3", "@babel/core@^7.1.0", "@babel/core@^7.12.16", "@babel/core@^7.7.5":
   version "7.14.3"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.14.3.tgz#5395e30405f0776067fbd9cf0884f15bfb770a38"
   integrity sha512-jB5AmTKOCSJIZ72sd78ECEhuPiDMKlQdDI/4QRI6lzYATx5SSogS1oQA2AoPecRCknm30gHi2l+QVvNUu3wZAg==
@@ -42,27 +42,6 @@
     semver "^6.3.0"
     source-map "^0.5.0"
 
-"@babel/core@^7.1.0", "@babel/core@^7.12.16", "@babel/core@^7.7.5":
-  version "7.14.3"
-  resolved "https://registry.npmjs.org/@babel/core/-/core-7.14.3.tgz"
-  integrity sha512-jB5AmTKOCSJIZ72sd78ECEhuPiDMKlQdDI/4QRI6lzYATx5SSogS1oQA2AoPecRCknm30gHi2l+QVvNUu3wZAg==
-  dependencies:
-    "@babel/code-frame" "^7.12.13"
-    "@babel/generator" "^7.14.3"
-    "@babel/helper-compilation-targets" "^7.13.16"
-    "@babel/helper-module-transforms" "^7.14.2"
-    "@babel/helpers" "^7.14.0"
-    "@babel/parser" "^7.14.3"
-    "@babel/template" "^7.12.13"
-    "@babel/traverse" "^7.14.2"
-    "@babel/types" "^7.14.2"
-    convert-source-map "^1.7.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.2"
-    json5 "^2.1.2"
-    semver "^6.3.0"
-    source-map "^0.5.0"
-
 "@babel/eslint-parser@^7.12.16":
   version "7.14.3"
   resolved "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.14.3.tgz"