implemented clipboard API polyfill for non chromium engines

README.md

@@ -14,6 +14,7 @@ This is just the WebUI for deemix, it should be used with deemix-pyweb or someth
   - Download Quality ✅
   - Copy Image URL where possible ✅
   - Resolve problem when positioning out of window (e.g. clicking on the bottom of the window)
+  - Resolve problem when right clicking on element and then right clicking in another side (menu does not update)
 - [ ] Make i18n async (https://kazupon.github.io/vue-i18n/guide/lazy-loading.html)
   - Use ES2020 async imports, if possible
 - [ ] Make the UI look coherent

package-lock.json

@@ -447,6 +447,11 @@
 				"source-map": "~0.6.0"
 			}
 		},
+		"clipboard-polyfill": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/clipboard-polyfill/-/clipboard-polyfill-3.0.1.tgz",
+			"integrity": "sha512-R/uxBa8apxLJArzpFpuTLqavUcnEX8bezZKSuqkwz7Kny2BmxyKDslYGdrKiasKuD+mU1noF7Lkt/p5pyDqFoQ=="
+		},
 		"cliui": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",

package.json

@@ -17,6 +17,7 @@
 		"build": "npm-run-all --sequential clean build:js build:styles"
 	},
 	"dependencies": {
+		"clipboard-polyfill": "^3.0.1",
 		"jquery": "^3.5.1",
 		"lodash-es": "^4.17.15",
 		"svg-country-flags": "^1.2.7",

src/components/TheContextMenu.vue

@@ -15,7 +15,9 @@
 <script>
 import Downloads from '@/utils/downloads'
 import downloadQualities from '@js/qualities'
-import { generatePath } from '@/utils/utils'
+import { generatePath, isChromium } from '@/utils/utils'
+
+import * as clipboard from 'clipboard-polyfill/text'
 
 export default {
 	data() {
@@ -55,9 +57,15 @@ export default {
 					show: false,
 					position: 3,
 					action: () => {
+						if (isChromium) {
 							navigator.clipboard.writeText(this.generalHref).catch(err => {
 								console.error('Link copying failed', err)
 							})
+						} else {
+							clipboard.writeText(this.generalHref).catch(err => {
+								console.error('Link copying failed', err)
+							})
+						}
 					}
 				},
 				copyImageLink: {
@@ -65,9 +73,15 @@ export default {
 					show: false,
 					position: 4,
 					action: () => {
+						if (isChromium) {
 							navigator.clipboard.writeText(this.imgSrc).catch(err => {
 								console.error('Image copying failed', err)
 							})
+						} else {
+							clipboard.writeText(this.imgSrc).catch(err => {
+								console.error('Image copying failed', err)
+							})
+						}
 					}
 				},
 				copyDeezerLink: {
@@ -75,9 +89,15 @@ export default {
 					show: false,
 					position: 5,
 					action: () => {
+						if (isChromium) {
 							navigator.clipboard.writeText(this.generalHref).catch(err => {
 								console.error('Deezer link copying failed', err)
 							})
+						} else {
+							clipboard.writeText(this.generalHref).catch(err => {
+								console.error('Deezer link copying failed', err)
+							})
+						}
 					}
 				},
 				paste: {
@@ -85,9 +105,15 @@ export default {
 					show: true,
 					position: 6,
 					action: () => {
+						if (isChromium) {
 							navigator.clipboard.readText().then(text => {
 								document.execCommand('insertText', undefined, text)
 							})
+						} else {
+							clipboard.readText().then(text => {
+								document.execCommand('insertText', undefined, text)
+							})
+						}
 					}
 				}
 			}
@@ -123,7 +149,6 @@ export default {
 			contextMenuEvent.preventDefault()
 
 			const { pageX, pageY, target: elementClicked } = contextMenuEvent
-
 			const path = generatePath(elementClicked)
 
 			this.positionMenu(pageX, pageY)

src/utils/utils.js

@@ -17,6 +17,8 @@ export function generatePath(el) {
 	return path
 }
 
+export const isChromium = !!window.chrome
+
 export function isValidURL(text) {
 	let lowerCaseText = text.toLowerCase()