Merge pull request 'main' (#5) from RemixDev/deemix-webui:main into main

Reviewed-on: https://codeberg.org/m3troux/deemix-webui/pulls/5

README.md

@@ -4,36 +4,34 @@ This is just the WebUI for deemix, it should be used with deemix-pyweb or someth
 
 ## What's left to do?
 
-- Use Vue as much as possible
+- [ ] Use Vue app-wide
   - First step: rewrite the app in Single File Components way ✅
-  - Second step: Implement custom contextmenu ⚒
-    - Implemented a first version
-		- Need heavy testing and more features
-  - Third step: Implement routing for the whole app using Vue Router
-  - Fourth step: Remove jQuery
-- Make i18n async (https://kazupon.github.io/vue-i18n/guide/lazy-loading.html)
+  - Second step: Implement routing for the whole app using Vue Router ⚒
+  - Third step: Remove jQuery
+- [ ] Implement custom contextmenu ⚒
+  - Copy and paste functions ✅
+  - Copy Link where possible ✅
+  - Download Quality ✅
+  - Copy Image URL where possible ✅
+  - Resolve problem when positioning out of window (e.g. clicking on the bottom of the window)
+- [ ] Make i18n async (https://kazupon.github.io/vue-i18n/guide/lazy-loading.html)
   - Use ES2020 async imports, if possible
-- Make the UI look coherent
+- [ ] Make the UI look coherent
   - Style buttons
   - Style text inputs
   - Style checkboxes
-- Search tab
+- [ ] Search tab
 	- Better placeholer before search
-- Link Analyzer
+- [ ] Link Analyzer
 	- Better placeholer before analyzing and error feedback
-- Settings tab
+- [ ] Settings tab
 	- Maybe tabbing the section for easy navigation
 	- Could use a carousel, but it's not worth adding a new dep
   - Variable selector near template inputs
-- Add Custom Context menu to objects
-  - Copy Link where possible
-  - Copy Image URL where possible
-  - Context menu for pywebview (Context menu is blocked in pywebview)
-    - Copy and paste functions
-- Block selection where it's not needed (keep only titles artists albums labels and useful data)
+- [ ] Block selection where it's not needed (keep only titles artists albums labels and useful data)
   - There's a SASS mixin for this. Need to use it in the proper classes
-- Better feedback for socket.io possible errors
-- Remove images size limit and add warning if > 1200
+- [ ] Better feedback for socket.io possible errors
+- [ ] Remove images size limit and add warning if > 1200
 - ?
 
 # License

src/app.js

@@ -33,6 +33,7 @@ function initClient() {
 	window.clientMode = true
 	document.querySelector(`#open_downloads_folder`).classList.remove('hide')
 	document.querySelector(`#select_downloads_folder`).classList.remove('hide')
+	document.querySelector(`#settings_btn_applogin`).classList.remove('hide')
 }
 
 document.addEventListener('DOMContentLoaded', startApp)

src/components/ArtistTab.vue

@@ -8,14 +8,7 @@
 			}"
 		>
 			<h1>{{ title }}</h1>
-			<div
-				role="button"
-				aria-label="download"
-				@contextmenu.prevent="openQualityModal"
-				@click.stop="addToQueue"
-				:data-link="link"
-				class="fab right"
-			>
+			<div role="button" aria-label="download" @click.stop="addToQueue" :data-link="link" class="fab right">
 				<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
 			</div>
 		</header>
@@ -64,18 +57,13 @@
 							explicit
 						</i>
 						{{ release.title }}
-						<i v-if="checkNewRelease(release.release_date)" class="material-icons" style="color:#FF7300;">
+						<i v-if="checkNewRelease(release.release_date)" class="material-icons" style="color: #ff7300;">
 							fiber_new
 						</i>
 					</td>
 					<td>{{ release.release_date }}</td>
 					<td>{{ release.nb_song }}</td>
-					<td
-						@click.stop="addToQueue"
-						@contextmenu.prevent="openQualityModal"
-						:data-link="release.link"
-						class="clickable"
-					>
+					<td @click.stop="addToQueue" :data-link="release.link" class="clickable">
 						<i class="material-icons" :title="$t('globals.download_hint')">
 							file_download
 						</i>
@@ -129,9 +117,6 @@ export default {
 			e.stopPropagation()
 			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
-		openQualityModal(e) {
-			this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
-		},
 		sortBy(key) {
 			if (key == this.sortKey) {
 				this.sortOrder = this.sortOrder == 'asc' ? 'desc' : 'asc'
@@ -168,7 +153,7 @@ export default {
 			this.sortKey = 'release_date'
 			this.sortOrder = 'desc'
 			this.head = [
-				{ title: this.$tc('globals.listTabs.title',1), sortKey: 'title' },
+				{ title: this.$tc('globals.listTabs.title', 1), sortKey: 'title' },
 				{ title: this.$t('globals.listTabs.releaseDate'), sortKey: 'release_date' },
 				{ title: this.$tc('globals.listTabs.track', 2), sortKey: 'nb_song' },
 				{ title: '', width: '32px' }
@@ -182,13 +167,17 @@ export default {
 	},
 	computed: {
 		showTable() {
-			if (this.body){
-				if (this.sortKey=='nb_song')
-					return orderBy(this.body[this.currentTab], function (o) { return new Number(o.nb_song); }, this.sortOrder)
-				else
-					return orderBy(this.body[this.currentTab], this.sortKey, this.sortOrder)
-			}
-			else return []
+			if (this.body) {
+				if (this.sortKey == 'nb_song')
+					return orderBy(
+						this.body[this.currentTab],
+						function (o) {
+							return new Number(o.nb_song)
+						},
+						this.sortOrder
+					)
+				else return orderBy(this.body[this.currentTab], this.sortKey, this.sortOrder)
+			} else return []
 		}
 	},
 	mounted() {

src/components/TheChartsTab.vue

@@ -36,11 +36,7 @@
 		</div>
 		<div v-else id="charts_table">
 			<button @click="changeCountry">{{ $t('charts.changeCountry') }}</button>
-			<button
-				@contextmenu.prevent="openQualityModal"
-				@click.stop="addToQueue"
-				:data-link="'https://www.deezer.com/playlist/' + id"
-			>
+			<button @click.stop="addToQueue" :data-link="'https://www.deezer.com/playlist/' + id">
 				{{ $t('charts.download') }}
 			</button>
 			<table class="table table--charts">
@@ -72,9 +68,7 @@
 						<td class="table__cell--large breakline">
 							{{
 								track.title +
-									(track.title_version && track.title.indexOf(track.title_version) == -1
-										? ' ' + track.title_version
-										: '')
+								(track.title_version && track.title.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '')
 							}}
 						</td>
 						<td
@@ -96,7 +90,6 @@
 						</td>
 						<td
 							class="table__cell--download"
-							@contextmenu.prevent="openQualityModal"
 							@click.stop="addToQueue"
 							:data-link="track.link"
 							role="button"
@@ -146,9 +139,6 @@ export default {
 			e.stopPropagation()
 			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
-		openQualityModal(e) {
-			this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
-		},
 		getTrackList(event) {
 			document.getElementById('content').scrollTo(0, 0)
 

src/components/TheContextMenu.vue

@@ -2,7 +2,7 @@
 	<div class="context-menu" v-show="menuOpen" ref="contextMenu" :style="{ top: yPos, left: xPos }">
 		<button
 			class="menu-option"
-			v-for="option of options"
+			v-for="option of sortedOptions"
 			:key="option.label"
 			v-show="option.show"
 			@click.prevent="option.action"
@@ -13,118 +13,185 @@
 </template>
 
 <script>
+import Downloads from '@/utils/downloads'
+import downloadQualities from '@js/qualities'
+import { generatePath } from '@/utils/utils'
+
 export default {
-	data: () => ({
-		menuOpen: false,
-		xPos: 0,
-		yPos: 0,
-		currentHref: '',
-		options: [
-			{
-				label: 'Cut',
-				show: true,
-				// Use arrow functions to keep the Vue instance in 'this'
-				// Use normal functions to keep the object instance in 'this'
-				action: () => {
-					document.execCommand('Cut')
-				}
-			},
-			{
-				label: 'Copy',
-				show: true,
-				action: () => {
-					document.execCommand('Copy')
-				}
-			},
-			{
-				label: 'Copy Link',
-				show: false,
-				action: null
-			},
-			{
-				label: 'Copy Deezer Link',
-				show: false,
-				action: null
-			},
-			{
-				label: 'Paste',
-				show: true,
-				action: () => {
-					navigator.clipboard.readText().then(text => {
-						document.execCommand('insertText', undefined, text)
-					})
+	data() {
+		return {
+			menuOpen: false,
+			xPos: 0,
+			yPos: 0,
+			deezerHref: '',
+			generalHref: '',
+			imgSrc: ''
+		}
+	},
+	computed: {
+		options() {
+			// In the action property:
+			// Use arrow functions to keep the Vue instance in 'this'
+			// Use normal functions to keep the object instance in 'this'
+			const options = {
+				cut: {
+					label: this.$t('globals.cut'),
+					show: true,
+					position: 1,
+					action: () => {
+						document.execCommand('Cut')
+					}
+				},
+				copy: {
+					label: this.$t('globals.copy'),
+					show: true,
+					position: 2,
+					action: () => {
+						document.execCommand('Copy')
+					}
+				},
+				copyLink: {
+					label: this.$t('globals.copyLink'),
+					show: false,
+					position: 3,
+					action: () => {
+						navigator.clipboard.writeText(this.generalHref).catch(err => {
+							console.error('Link copying failed', err)
+						})
+					}
+				},
+				copyImageLink: {
+					label: this.$t('globals.copyImageLink'),
+					show: false,
+					position: 4,
+					action: () => {
+						navigator.clipboard.writeText(this.imgSrc).catch(err => {
+							console.error('Image copying failed', err)
+						})
+					}
+				},
+				copyDeezerLink: {
+					label: this.$t('globals.copyDeezerLink'),
+					show: false,
+					position: 5,
+					action: () => {
+						navigator.clipboard.writeText(this.generalHref).catch(err => {
+							console.error('Deezer link copying failed', err)
+						})
+					}
+				},
+				paste: {
+					label: this.$t('globals.paste'),
+					show: true,
+					position: 6,
+					action: () => {
+						navigator.clipboard.readText().then(text => {
+							document.execCommand('insertText', undefined, text)
+						})
+					}
 				}
 			}
-		]
-	}),
+
+			let nextValuePosition = Object.values(options).length + 1
+
+			downloadQualities.forEach((quality, index) => {
+				options[quality.objName] = {
+					label: `${this.$t('globals.download', [quality.label])}`,
+					show: false,
+					position: nextValuePosition + index,
+					action: this.tryToDownloadTrack.bind(null, quality.value)
+				}
+			})
+
+			return options
+		},
+		// This computed property is used for rendering the options in the wanted order
+		// while keeping the options computed property an Object to make the properties
+		// accessible via property name (es this.options.copyLink)
+		sortedOptions() {
+			return Object.values(this.options).sort((first, second) => {
+				return first.position < second.position ? -1 : 1
+			})
+		}
+	},
 	mounted() {
 		document.body.addEventListener('contextmenu', this.showMenu)
-
-		document.body.addEventListener('click', () => {
-			// Finish all operations before closing (may be not necessary)
-			this.$nextTick().then(() => {
-				this.menuOpen = false
-
-				this.options[2].show = false
-				this.options[3].show = false
-			})
-		})
+		document.body.addEventListener('click', this.hideMenu)
 	},
 	methods: {
 		showMenu(contextMenuEvent) {
 			contextMenuEvent.preventDefault()
 
-			const {
-				pageX,
-				pageY,
-				path,
-				path: [elementClicked]
-			} = contextMenuEvent
+			const { pageX, pageY, target: elementClicked } = contextMenuEvent
+
+			const path = generatePath(elementClicked)
 
 			this.positionMenu(pageX, pageY)
 
 			// Show 'Copy Link' option
 			if (elementClicked.matches('a')) {
-				this.showCopyLink(elementClicked.href)
+				this.generalHref = elementClicked.href
+				this.options.copyLink.show = true
 			}
 
-			let link = null
+			// Show 'Copy Image Link' option
+			if (elementClicked.matches('img')) {
+				this.imgSrc = elementClicked.src
+				this.options.copyImageLink.show = true
+			}
+
+			let deezerLink = null
 
 			for (let i = 0; i < path.length; i++) {
 				if (path[i] == document) break
 
 				if (path[i].matches('[data-link]')) {
-					link = path[i].dataset.link
+					deezerLink = path[i].dataset.link
 					break
 				}
 			}
 
 			// Show 'Copy Deezer Link' option
-			if (link) {
-				this.showCopyDeezerLink(link)
+			if (deezerLink) {
+				this.deezerHref = deezerLink
+				this.showDeezerOptions()
 			}
 
 			this.menuOpen = true
 		},
+		hideMenu() {
+			if (!this.menuOpen) return
+
+			// Finish all operations before closing (may be not necessary)
+			this.$nextTick()
+				.then(() => {
+					this.menuOpen = false
+
+					this.options.copyLink.show = false
+					this.options.copyDeezerLink.show = false
+					this.options.copyImageLink.show = false
+
+					downloadQualities.forEach(quality => {
+						this.options[quality.objName].show = false
+					})
+				})
+				.catch(err => {
+					console.error(err)
+				})
+		},
 		positionMenu(newX, newY) {
 			this.xPos = `${newX}px`
 			this.yPos = `${newY}px`
 		},
-		showCopyLink(href) {
-			this.options[2].show = true
-			this.options[2].action = () => {
-				navigator.clipboard.writeText(href).catch(err => {
-					console.error('Link copying failed', err)
-				})
-			}
+		showDeezerOptions() {
+			this.options.copyDeezerLink.show = true
+
+			downloadQualities.forEach(quality => {
+				this.options[quality.objName].show = true
+			})
 		},
-		showCopyDeezerLink(link) {
-			this.options[3].show = true
-			this.options[3].action = () => {
-				navigator.clipboard.writeText(link).catch(err => {
-					console.error('Download link copying failed', err)
-				})
-			}
+		tryToDownloadTrack(qualityValue) {
+			Downloads.sendAddToQueue(this.deezerHref, qualityValue)
 		}
 	}
 }
@@ -164,6 +231,10 @@ export default {
 		background: var(--table-highlight);
 		filter: brightness(150%);
 	}
+
+	&__text {
+		text-transform: capitalize;
+	}
 }
 
 // Resetting buttons only for this component (because the style is scoped)

src/components/TheFavoritesTab.vue

@@ -38,7 +38,6 @@
 						<div
 							role="button"
 							aria-label="download"
-							@contextmenu.prevent="openQualityModal"
 							@click.stop="addToQueue"
 							:data-link="release.link"
 							class="download_overlay"
@@ -48,9 +47,7 @@
 					</div>
 					<p class="primary-text">{{ release.title }}</p>
 					<p class="secondary-text">
-						{{
-							`${$t('globals.by', [release.creator.name])} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}`
-						}}
+						{{ `${$t('globals.by', [release.creator.name])} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}` }}
 					</p>
 				</div>
 				<div
@@ -64,7 +61,6 @@
 						<div
 							role="button"
 							aria-label="download"
-							@contextmenu.prevent="openQualityModal"
 							@click.stop="addToQueue"
 							:data-link="release.link"
 							class="download_overlay"
@@ -74,12 +70,7 @@
 					</div>
 					<p class="primary-text">{{ release.title }}</p>
 					<p class="secondary-text">
-						{{
-							`${$t('globals.by', [release.creator.name])} - ${$tc(
-								'globals.listTabs.trackN',
-								release.nb_tracks
-							)}`
-						}}
+						{{ `${$t('globals.by', [release.creator.name])} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}` }}
 					</p>
 				</div>
 			</div>
@@ -95,7 +86,6 @@
 						<div
 							role="button"
 							aria-label="download"
-							@contextmenu.prevent="openQualityModal"
 							@click.stop="addToQueue"
 							:data-link="release.link"
 							class="download_overlay"
@@ -119,7 +109,6 @@
 						<div
 							role="button"
 							aria-label="download"
-							@contextmenu.prevent="openQualityModal"
 							@click.stop="addToQueue"
 							:data-link="release.link"
 							class="download_overlay"
@@ -163,7 +152,7 @@
 					<td class="table__cell--large breakline">
 						{{
 							track.title +
-								(track.title_version && track.title.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '')
+							(track.title_version && track.title.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '')
 						}}
 					</td>
 					<td
@@ -185,7 +174,6 @@
 					</td>
 					<td
 						class="table__cell--download clickable"
-						@contextmenu.prevent="openQualityModal"
 						@click.stop="addToQueue"
 						:data-link="track.link"
 						role="button"
@@ -267,9 +255,6 @@ export default {
 			e.stopPropagation()
 			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
-		openQualityModal(e) {
-			this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
-		},
 		updated_userSpotifyPlaylists(data) {
 			this.spotifyPlaylists = data
 		},

src/components/TheHomeTab.vue

@@ -20,7 +20,6 @@
 						<div
 							role="button"
 							aria-label="download"
-							@contextmenu.prevent="openQualityModal"
 							@click.stop="addToQueue"
 							:data-link="release.link"
 							class="download_overlay"
@@ -50,7 +49,6 @@
 						<div
 							role="button"
 							aria-label="download"
-							@contextmenu.prevent="openQualityModal"
 							@click.stop="addToQueue"
 							:data-link="release.link"
 							class="download_overlay"
@@ -89,9 +87,6 @@ export default {
 		addToQueue(e) {
 			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
-		openQualityModal(e) {
-			this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
-		},
 		initHome(data) {
 			const {
 				playlists: { data: playlistData },

src/components/TheMainSearch.vue

@@ -9,8 +9,12 @@
 				<li class="section-tabs__tab search_tablinks" id="search_all_tab">{{ $t('globals.listTabs.all') }}</li>
 				<li class="section-tabs__tab search_tablinks" id="search_track_tab">{{ $tc('globals.listTabs.track', 2) }}</li>
 				<li class="section-tabs__tab search_tablinks" id="search_album_tab">{{ $tc('globals.listTabs.album', 2) }}</li>
-				<li class="section-tabs__tab search_tablinks" id="search_artist_tab">{{ $tc('globals.listTabs.artist', 2) }}</li>
-				<li class="section-tabs__tab search_tablinks" id="search_playlist_tab">{{ $tc('globals.listTabs.playlist', 2) }}</li>
+				<li class="section-tabs__tab search_tablinks" id="search_artist_tab">
+					{{ $tc('globals.listTabs.artist', 2) }}
+				</li>
+				<li class="section-tabs__tab search_tablinks" id="search_playlist_tab">
+					{{ $tc('globals.listTabs.playlist', 2) }}
+				</li>
 			</ul>
 			<div id="search_tab_content">
 				<!-- ### Main Search Tab ### -->
@@ -19,7 +23,7 @@
 						<section
 							v-if="
 								(section != 'TOP_RESULT' && results.allTab[section].data.length > 0) ||
-									results.allTab[section].length > 0
+								results.allTab[section].length > 0
 							"
 							class="search_section"
 						>
@@ -46,7 +50,6 @@
 									<div
 										role="button"
 										aria-label="download"
-										@contextmenu.prevent="openQualityModal"
 										@click.stop="addToQueue"
 										:data-link="results.allTab.TOP_RESULT[0].link"
 										class="download_overlay"
@@ -61,13 +64,11 @@
 											results.allTab.TOP_RESULT[0].type == 'artist'
 												? $t('search.fans', [$n(results.allTab.TOP_RESULT[0].nb_fan)])
 												: $t('globals.by', [results.allTab.TOP_RESULT[0].artist]) +
-													' - ' +
-													$tc('globals.listTabs.trackN', results.allTab.TOP_RESULT[0].nb_song)
+												  ' - ' +
+												  $tc('globals.listTabs.trackN', results.allTab.TOP_RESULT[0].nb_song)
 										}}
 									</p>
-									<span class="tag">{{
-										$tc(`globals.listTabs.${results.allTab.TOP_RESULT[0].type}`, 1)
-									}}</span>
+									<span class="tag">{{ $tc(`globals.listTabs.${results.allTab.TOP_RESULT[0].type}`, 1) }}</span>
 								</div>
 							</div>
 							<div v-else-if="section == 'TRACK'">
@@ -79,8 +80,8 @@
 													class="rounded coverart"
 													:src="
 														'https://e-cdns-images.dzcdn.net/images/cover/' +
-															track.ALB_PICTURE +
-															'/32x32-000000-80-0-0.jpg'
+														track.ALB_PICTURE +
+														'/32x32-000000-80-0-0.jpg'
 													"
 												/>
 											</td>
@@ -113,7 +114,6 @@
 											</td>
 											<td
 												class="table__cell--download table__cell--center clickable"
-												@contextmenu.prevent="openQualityModal"
 												@click.stop="addToQueue"
 												:data-link="'https://www.deezer.com/track/' + track.SNG_ID"
 												role="button"
@@ -140,14 +140,13 @@
 											class="circle coverart"
 											:src="
 												'https://e-cdns-images.dzcdn.net/images/artist/' +
-													release.ART_PICTURE +
-													'/156x156-000000-80-0-0.jpg'
+												release.ART_PICTURE +
+												'/156x156-000000-80-0-0.jpg'
 											"
 										/>
 										<div
 											role="button"
 											aria-label="download"
-											@contextmenu.prevent="openQualityModal"
 											@click.stop="addToQueue"
 											:data-link="'https://deezer.com/artist/' + release.ART_ID"
 											class="download_overlay"
@@ -172,14 +171,13 @@
 											class="rounded coverart"
 											:src="
 												'https://e-cdns-images.dzcdn.net/images/cover/' +
-													release.ALB_PICTURE +
-													'/156x156-000000-80-0-0.jpg'
+												release.ALB_PICTURE +
+												'/156x156-000000-80-0-0.jpg'
 											"
 										/>
 										<div
 											role="button"
 											aria-label="download"
-											@contextmenu.prevent="openQualityModal"
 											@click.stop="addToQueue"
 											:data-link="'https://deezer.com/album/' + release.ALB_ID"
 											class="download_overlay"
@@ -195,7 +193,9 @@
 										>
 										{{ release.ALB_TITLE }}
 									</p>
-									<p class="secondary-text">{{ release.ART_NAME + ' - ' + $tc('globals.listTabs.trackN', release.NUMBER_TRACK) }}</p>
+									<p class="secondary-text">
+										{{ release.ART_NAME + ' - ' + $tc('globals.listTabs.trackN', release.NUMBER_TRACK) }}
+									</p>
 								</div>
 							</div>
 							<div v-else-if="section == 'PLAYLIST'" class="release_grid firstrow_only">
@@ -211,16 +211,15 @@
 											class="rounded coverart"
 											:src="
 												'https://e-cdns-images.dzcdn.net/images/' +
-													release.PICTURE_TYPE +
-													'/' +
-													release.PLAYLIST_PICTURE +
-													'/156x156-000000-80-0-0.jpg'
+												release.PICTURE_TYPE +
+												'/' +
+												release.PLAYLIST_PICTURE +
+												'/156x156-000000-80-0-0.jpg'
 											"
 										/>
 										<div
 											role="button"
 											aria-label="download"
-											@contextmenu.prevent="openQualityModal"
 											@click.stop="addToQueue"
 											:data-link="'https://deezer.com/playlist/' + release.PLAYLIST_ID"
 											class="download_overlay"
@@ -292,9 +291,9 @@
 										</i>
 										{{
 											track.title +
-												(track.title_version && track.title.indexOf(track.title_version) == -1
-													? ' ' + track.title_version
-													: '')
+											(track.title_version && track.title.indexOf(track.title_version) == -1
+												? ' ' + track.title_version
+												: '')
 										}}
 									</div>
 								</td>
@@ -317,7 +316,6 @@
 								</td>
 								<td
 									class="table__cell--download table__cell--center clickable"
-									@contextmenu.prevent="openQualityModal"
 									@click.stop="addToQueue"
 									:data-link="track.link"
 									role="button"
@@ -349,7 +347,6 @@
 								<div
 									role="button"
 									aria-label="download"
-									@contextmenu.prevent="openQualityModal"
 									@click.stop="addToQueue"
 									:data-link="release.link"
 									class="download_overlay"
@@ -361,7 +358,11 @@
 								<i v-if="release.explicit_lyrics" class="material-icons explicit_icon">explicit</i>
 								{{ release.title }}
 							</p>
-							<p class="secondary-text">{{ $t('globals.by', [release.artist.name]) + ' - ' + $tc('globals.listTabs.trackN', release.nb_tracks) }}</p>
+							<p class="secondary-text">
+								{{
+									$t('globals.by', [release.artist.name]) + ' - ' + $tc('globals.listTabs.trackN', release.nb_tracks)
+								}}
+							</p>
 						</div>
 					</div>
 				</div>
@@ -383,7 +384,6 @@
 								<div
 									role="button"
 									aria-label="download"
-									@contextmenu.prevent="openQualityModal"
 									@click.stop="addToQueue"
 									:data-link="release.link"
 									class="download_overlay"
@@ -414,7 +414,6 @@
 								<div
 									role="button"
 									aria-label="download"
-									@contextmenu.prevent="openQualityModal"
 									@click.stop="addToQueue"
 									:data-link="release.link"
 									class="download_overlay"
@@ -424,9 +423,7 @@
 							</div>
 							<p class="primary-text">{{ release.title }}</p>
 							<p class="secondary-text">
-								{{
-									`${$t('globals.by', [release.user.name])} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}`
-								}}
+								{{ `${$t('globals.by', [release.user.name])} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}` }}
 							</p>
 						</div>
 					</div>
@@ -613,9 +610,6 @@ export default {
 		addToQueue(e) {
 			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
-		openQualityModal(e) {
-			this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
-		},
 		numberWithDots: Utils.numberWithDots,
 		convertDuration: Utils.convertDuration,
 		search(type) {

src/components/TheQualityModal.vue

@@ -53,7 +53,6 @@ export default {
 	}),
 	mounted() {
 		this.$root.$on('QualityModal:open', this.openModal)
-
 		this.$refs.modal.addEventListener('webkitAnimationEnd', this.handleAnimationEnd)
 	},
 	methods: {

src/components/TheSettingsTab.vue

@@ -26,6 +26,9 @@
 			<a href="https://codeberg.org/RemixDev/deemix/wiki/Getting-your-own-ARL" target="_blank">
 				{{ $t('settings.login.arl.question') }}
 			</a>
+			<a id="settings_btn_applogin" class="hide" href="#" @click="applogin">
+				Automated login
+			</a>
 			<button id="settings_btn_updateArl" @click="login" style="width: 100%;">
 				{{ $t('settings.login.arl.update') }}
 			</button>
@@ -678,6 +681,7 @@ export default {
 		socket.on('accountChanged', this.accountChanged)
 		socket.on('familyAccounts', this.initAccounts)
 		socket.on('downloadFolderSelected', this.downloadFolderSelected)
+		socket.on('applogin_arl', this.setArl)
 	},
 	methods: {
 		revertSettings() {
@@ -742,6 +746,14 @@ export default {
 				socket.emit('login', arl, true, this.accountNum)
 			}
 		},
+		applogin(e) {
+			e.preventDefault()
+			if (window.clientMode) socket.emit('applogin')
+		},
+		setArl(arl) {
+			this.$refs.loginInput.value = arl
+			this.login()
+		},
 		changeAccount() {
 			socket.emit('changeAccount', this.accountNum)
 		},

src/components/TracklistTab.vue

@@ -133,15 +133,10 @@
 		</table>
 		<span v-if="label" style="opacity: 0.4; margin-top: 8px; display: inline-block; font-size: 13px;">{{ label }}</span>
 		<footer>
-			<button @contextmenu.prevent="openQualityModal" @click.stop="addToQueue" :data-link="link">
+			<button @click.stop="addToQueue" :data-link="link">
 				{{ `${$t('globals.download', [$tc(`globals.listTabs.${type}`, 1)])}` }}
 			</button>
-			<button
-				class="with_icon"
-				@contextmenu.prevent="openQualityModal"
-				@click.stop="addToQueue"
-				:data-link="selectedLinks()"
-			>
+			<button class="with_icon" @click.stop="addToQueue" :data-link="selectedLinks()">
 				{{ $t('tracklist.downloadSelection') }}<i class="material-icons">file_download</i>
 			</button>
 			<button class="back-button">{{ $t('globals.back') }}</button>
@@ -189,9 +184,6 @@ export default {
 		addToQueue(e) {
 			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
-		openQualityModal(e) {
-			this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
-		},
 		toggleAll(e) {
 			this.body.forEach(item => {
 				if (item.type == 'track') {

src/js/qualities.js

@@ -0,0 +1,32 @@
+export default [
+	{
+		objName: 'flac',
+		label: 'FLAC',
+		value: 9
+	},
+	{
+		objName: '320kbps',
+		label: 'MP3 320kbps',
+		value: 3
+	},
+	{
+		objName: '128kbps',
+		label: 'MP3 128kbps',
+		value: 1
+	},
+	{
+		objName: 'realityAudioHQ',
+		label: '360 Reality Audio [HQ]',
+		value: 15
+	},
+	{
+		objName: 'realityAudioMQ',
+		label: '360 Reality Audio [MQ]',
+		value: 14
+	},
+	{
+		objName: 'realityAudioLQ',
+		label: '360 Reality Audio [LQ]',
+		value: 13
+	}
+]

src/lang/de.js

@@ -211,7 +211,9 @@ const de = {
 				title: 'Soll ich die Dateien überchreiben?',
 				y: 'Ja überschreibe die Dateien',
 				n: 'Nein überschreibe die Dateien nicht',
-				t: 'Überschreibe nur die Tags'
+				t: 'Überschreibe nur die Tags',
+				b: 'Nein, behalte beide Dateien und füge der Kopie eine Nummer hinzu'
+
 			},
 			fallbackBitrate: 'Falls gewünschte Bitrate nicht verfügbar, auf niedrigere Bitrate zurückgreifen',
 			fallbackSearch: 'Zur Suche zurückkehren, wenn der Song nicht verfügbar ist',

src/lang/en.js

@@ -11,6 +11,12 @@ const en = {
 		toggle_download_tab_hint: 'Expand/Collapse',
 		clean_queue_hint: 'Clear Finished',
 		cancel_queue_hint: 'Cancel All',
+		cut: 'cut',
+		copy: 'copy',
+		copyLink: 'copy link',
+		copyImageLink: 'copy image link',
+		copyDeezerLink: 'copy deezer link',
+		paste: 'paste',
 		listTabs: {
 			empty: '',
 			all: 'all',

src/lang/it.js

@@ -11,6 +11,12 @@ const it = {
 		toggle_download_tab_hint: 'Espandi/Riduci',
 		clean_queue_hint: 'Pulisci Lista',
 		cancel_queue_hint: 'Cancella tutti i download',
+		cut: 'taglia',
+		copy: 'copia',
+		copyLink: 'copia link',
+		copyImageLink: 'copia link immagine',
+		copyDeezerLink: 'copia link deezer',
+		paste: 'incolla',
 		listTabs: {
 			all: 'tutto',
 			top_result: 'miglior risultato',

src/utils/downloads.js

@@ -1,9 +1,9 @@
 import { socket } from '@/utils/socket'
 
 function sendAddToQueue(url, bitrate = null) {
-	if (url != '') {
-		socket.emit('addToQueue', { url: url, bitrate: bitrate }, () => {})
-	}
+	if (!url) return
+
+	socket.emit('addToQueue', { url, bitrate }, () => {})
 }
 
 export default {

src/utils/utils.js

@@ -1,3 +1,22 @@
+/**
+ * Climbs the DOM until the root is reached, storing every node passed.
+ * @param 	{HTMLElement} el
+ * @return	{Array}				Contains all the nodes between el and the root
+ */
+export function generatePath(el) {
+	if (!el) {
+		throw new Error('No element passed to the generatePath function!')
+	}
+
+	let path = [el]
+
+	while ((el = el.parentNode) && el !== document) {
+		path.push(el)
+	}
+
+	return path
+}
+
 export function isValidURL(text) {
 	let lowerCaseText = text.toLowerCase()