added quality selection in context menu and removed the quality modal, except for one case; translated cut, copy, ecc in italian

README.md

@@ -7,8 +7,10 @@ This is just the WebUI for deemix, it should be used with deemix-pyweb or someth
 - Use Vue as much as possible
   - First step: rewrite the app in Single File Components way ✅
   - Second step: Implement custom contextmenu ⚒
-    - Implemented a first version
+    - Copy and paste functions ✅
-		- Need heavy testing and more features
+    - Copy Link where possible ✅
+    - Copy Image URL where possible
+      - Define cases
   - 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)
@@ -25,11 +27,6 @@ This is just the WebUI for deemix, it should be used with deemix-pyweb or someth
 	- 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)
   - There's a SASS mixin for this. Need to use it in the proper classes
 - Better feedback for socket.io possible errors

src/components/ArtistTab.vue

@@ -8,14 +8,7 @@
 			}"
 		>
 			<h1>{{ title }}</h1>
-			<div
+			<div role="button" aria-label="download" @click.stop="addToQueue" :data-link="link" class="fab right">
-				role="button"
-				aria-label="download"
-				@contextmenu.prevent="openQualityModal"
-				@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
+					<td @click.stop="addToQueue" :data-link="release.link" class="clickable">
-						@click.stop="addToQueue"
-						@contextmenu.prevent="openQualityModal"
-						: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'
@@ -184,11 +169,15 @@ export default {
 		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)
+					return orderBy(
-				else
+						this.body[this.currentTab],
-					return orderBy(this.body[this.currentTab], this.sortKey, this.sortOrder)
+						function (o) {
-			}
+							return new Number(o.nb_song)
-			else return []
+						},
+						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
+			<button @click.stop="addToQueue" :data-link="'https://www.deezer.com/playlist/' + id">
-				@contextmenu.prevent="openQualityModal"
-				@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.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '')
-										? ' ' + 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

@@ -13,41 +13,60 @@
 </template>
 
 <script>
+import Downloads from '@/utils/downloads'
+import downloadQualities from '@js/qualities'
+
 export default {
-	data: () => ({
+	data() {
+		return {
 			menuOpen: false,
 			xPos: 0,
 			yPos: 0,
-		currentHref: '',
+			deezerHref: '',
-		options: [
+			generalHref: ''
-			{
+		}
-				label: 'Cut',
+	},
-				show: true,
+	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 = [
+				{
+					label: this.$t('globals.cut'),
+					show: true,
 					action: () => {
 						document.execCommand('Cut')
 					}
 				},
 				{
-				label: 'Copy',
+					label: this.$t('globals.copy'),
 					show: true,
 					action: () => {
 						document.execCommand('Copy')
 					}
 				},
 				{
-				label: 'Copy Link',
+					label: this.$t('globals.copyLink'),
 					show: false,
-				action: null
+					action: () => {
+						navigator.clipboard.writeText(this.generalHref).catch(err => {
+							console.error('Link copying failed', err)
+						})
+					}
 				},
 				{
-				label: 'Copy Deezer Link',
+					label: this.$t('globals.copyDeezerLink'),
 					show: false,
-				action: null
+					action: () => {
+						navigator.clipboard.writeText(this.deezerHref).catch(err => {
+							console.error('Download link copying failed', err)
+						})
+					}
 				},
 				{
-				label: 'Paste',
+					label: this.$t('globals.paste'),
 					show: true,
 					action: () => {
 						navigator.clipboard.readText().then(text => {
@@ -56,19 +75,24 @@ export default {
 					}
 				}
 			]
-	}),
+
+			downloadQualities.forEach(quality => {
+				options.push({
+					label: `${this.$t('globals.download', [quality.label])}`,
+					show: false,
+					action: this.tryToDownloadTrack.bind(null, quality.value)
+				})
+			})
+
+			return options
+		},
+		qualities() {
+			return downloadQualities
+		}
+	},
 	mounted() {
 		document.body.addEventListener('contextmenu', this.showMenu)
-
+		document.body.addEventListener('click', this.hideMenu)
-		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
-			})
-		})
 	},
 	methods: {
 		showMenu(contextMenuEvent) {
@@ -85,7 +109,8 @@ export default {
 
 			// Show 'Copy Link' option
 			if (elementClicked.matches('a')) {
-				this.showCopyLink(elementClicked.href)
+				this.generalHref = elementClicked.href
+				this.showCopyLinkOption()
 			}
 
 			let link = null
@@ -101,30 +126,43 @@ export default {
 
 			// Show 'Copy Deezer Link' option
 			if (link) {
-				this.showCopyDeezerLink(link)
+				this.deezerHref = link
+				this.showDeezerOptions(link)
 			}
 
 			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[2].show = false
+				this.options[3].show = false
+
+				for (i = 5; i <= 10; i++) {
+					this.options[i].show = false
+				}
+			})
+		},
 		positionMenu(newX, newY) {
 			this.xPos = `${newX}px`
 			this.yPos = `${newY}px`
 		},
-		showCopyLink(href) {
+		showCopyLinkOption() {
 			this.options[2].show = true
-			this.options[2].action = () => {
+		},
-				navigator.clipboard.writeText(href).catch(err => {
+		showDeezerOptions() {
-					console.error('Link copying failed', err)
+			this.options[3].show = true
-				})
+
+			for (i = 5; i <= 10; i++) {
+				this.options[i].show = true
 			}
 		},
-		showCopyDeezerLink(link) {
+		tryToDownloadTrack(qualityValue) {
-			this.options[3].show = true
+			Downloads.sendAddToQueue(this.deezerHref, qualityValue)
-			this.options[3].action = () => {
-				navigator.clipboard.writeText(link).catch(err => {
-					console.error('Download link copying failed', err)
-				})
-			}
 		}
 	}
 }
@@ -164,6 +202,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"
@@ -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_artist_tab">
-				<li class="section-tabs__tab search_tablinks" id="search_playlist_tab">{{ $tc('globals.listTabs.playlist', 2) }}</li>
+					{{ $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 ### -->
@@ -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"
@@ -65,9 +68,7 @@
 												  $tc('globals.listTabs.trackN', results.allTab.TOP_RESULT[0].nb_song)
 										}}
 									</p>
-									<span class="tag">{{
+									<span class="tag">{{ $tc(`globals.listTabs.${results.allTab.TOP_RESULT[0].type}`, 1) }}</span>
-										$tc(`globals.listTabs.${results.allTab.TOP_RESULT[0].type}`, 1)
-									}}</span>
 								</div>
 							</div>
 							<div v-else-if="section == 'TRACK'">
@@ -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"
@@ -147,7 +147,6 @@
 										<div
 											role="button"
 											aria-label="download"
-											@contextmenu.prevent="openQualityModal"
 											@click.stop="addToQueue"
 											:data-link="'https://deezer.com/artist/' + release.ART_ID"
 											class="download_overlay"
@@ -179,7 +178,6 @@
 										<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">
@@ -220,7 +220,6 @@
 										<div
 											role="button"
 											aria-label="download"
-											@contextmenu.prevent="openQualityModal"
 											@click.stop="addToQueue"
 											:data-link="'https://deezer.com/playlist/' + release.PLAYLIST_ID"
 											class="download_overlay"
@@ -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/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
+			<button class="with_icon" @click.stop="addToQueue" :data-link="selectedLinks()">
-				class="with_icon"
-				@contextmenu.prevent="openQualityModal"
-				@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,26 @@
+export default [
+	{
+		label: 'FLAC',
+		value: 9
+	},
+	{
+		label: 'MP3 320kbps',
+		value: 3
+	},
+	{
+		label: 'MP3 128kbps',
+		value: 1
+	},
+	{
+		label: '360 Reality Audio [HQ]',
+		value: 15
+	},
+	{
+		label: '360 Reality Audio [MQ]',
+		value: 14
+	},
+	{
+		label: '360 Reality Audio [LQ]',
+		value: 13
+	}
+]

src/lang/en.js

@@ -11,6 +11,11 @@ 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',
+		copyDeezerLink: 'copy deezer link',
+		paste: 'paste',
 		listTabs: {
 			empty: '',
 			all: 'all',

src/lang/it.js

@@ -11,6 +11,11 @@ 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',
+		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 != '') {
+	if (!url) return
-		socket.emit('addToQueue', { url: url, bitrate: bitrate }, () => {})
+
-	}
+	socket.emit('addToQueue', { url, bitrate }, () => {})
 }
 
 export default {