added copy image link on context menu with relative italian translation

README.md

@@ -4,33 +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 ⚒
+  - Second step: Implement routing for the whole app using Vue Router ⚒
-    - Copy and paste functions ✅
+  - Third step: Remove jQuery
-    - Copy Link where possible ✅
+- [ ] Implement custom contextmenu ⚒
-    - Copy Image URL where possible
+  - Copy and paste functions ✅
-      - Define cases
+  - Copy Link where possible ✅
-  - Third step: Implement routing for the whole app using Vue Router
+  - Download Quality ✅
-  - Fourth step: Remove jQuery
+  - Copy Image URL where possible ✅
-- Make i18n async (https://kazupon.github.io/vue-i18n/guide/lazy-loading.html)
+  - 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
-- 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
+- [ ] Better feedback for socket.io possible errors
-- Remove images size limit and add warning if > 1200
+- [ ] Remove images size limit and add warning if > 1200
 - ?
 
 # License

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"
@@ -23,7 +23,8 @@ export default {
 			xPos: 0,
 			yPos: 0,
 			deezerHref: '',
-			generalHref: ''
+			generalHref: '',
+			imgSrc: ''
 		}
 	},
 	computed: {
@@ -31,63 +32,85 @@ export default {
 			// 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 = {
-			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.copyDeezerLink'),
+					label: this.$t('globals.copyImageLink'),
 					show: false,
+					position: 4,
 					action: () => {
-						navigator.clipboard.writeText(this.deezerHref).catch(err => {
+						navigator.clipboard.writeText(this.imgSrc).catch(err => {
-							console.error('Download link copying failed', 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)
 						})
 					}
 				}
-			]
+			}
 
-			downloadQualities.forEach(quality => {
+			let nextValuePosition = Object.values(options).length + 1
-				options.push({
+
+			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
 		},
-		qualities() {
+		// This computed property is used for rendering the options in the wanted order
-			return downloadQualities
+		// while keeping the options computed property an Object to make the properties
+		// accessible via property name (es this.options.copy)
+		sortedOptions() {
+			return Object.values(this.options).sort((first, second) => {
+				return first.position < second.position ? -1 : 1
+			})
 		}
 	},
 	mounted() {
@@ -110,24 +133,30 @@ export default {
 			// Show 'Copy Link' option
 			if (elementClicked.matches('a')) {
 				this.generalHref = elementClicked.href
-				this.showCopyLinkOption()
+				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) {
+			if (deezerLink) {
-				this.deezerHref = link
+				this.deezerHref = deezerLink
-				this.showDeezerOptions(link)
+				this.showDeezerOptions()
 			}
 
 			this.menuOpen = true
@@ -136,30 +165,32 @@ export default {
 			if (!this.menuOpen) return
 
 			// Finish all operations before closing (may be not necessary)
-			this.$nextTick().then(() => {
+			this.$nextTick()
-				this.menuOpen = false
+				.then(() => {
+					this.menuOpen = false
 
-				this.options[2].show = false
+					this.options.copyLink.show = false
-				this.options[3].show = false
+					this.options.copyDeezerLink.show = false
+					this.options.copyImageLink.show = false
 
-				for (i = 5; i <= 10; i++) {
+					downloadQualities.forEach(quality => {
-					this.options[i].show = false
+						this.options[quality.objName].show = false
-				}
+					})
-			})
+				})
+				.catch(err => {
+					console.error(err)
+				})
 		},
 		positionMenu(newX, newY) {
 			this.xPos = `${newX}px`
 			this.yPos = `${newY}px`
 		},
-		showCopyLinkOption() {
-			this.options[2].show = true
-		},
 		showDeezerOptions() {
-			this.options[3].show = true
+			this.options.copyDeezerLink.show = true
 
-			for (i = 5; i <= 10; i++) {
+			downloadQualities.forEach(quality => {
-				this.options[i].show = true
+				this.options[quality.objName].show = true
-			}
+			})
 		},
 		tryToDownloadTrack(qualityValue) {
 			Downloads.sendAddToQueue(this.deezerHref, qualityValue)

src/js/qualities.js

@@ -1,25 +1,31 @@
 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/en.js

@@ -14,6 +14,7 @@ const en = {
 		cut: 'cut',
 		copy: 'copy',
 		copyLink: 'copy link',
+		copyImageLink: 'copy image link',
 		copyDeezerLink: 'copy deezer link',
 		paste: 'paste',
 		listTabs: {

src/lang/it.js

@@ -14,6 +14,7 @@ const it = {
 		cut: 'taglia',
 		copy: 'copia',
 		copyLink: 'copia link',
+		copyImageLink: 'copia link immagine',
 		copyDeezerLink: 'copia link deezer',
 		paste: 'incolla',
 		listTabs: {