sidebar: fix copy link to clipboard

package-lock.json

@@ -4183,6 +4183,16 @@
 			"integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
 			"dev": true
 		},
+		"clipboard": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
+			"integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
+			"requires": {
+				"good-listener": "^1.2.2",
+				"select": "^1.1.2",
+				"tiny-emitter": "^2.0.0"
+			}
+		},
 		"cliui": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
@@ -4787,6 +4797,11 @@
 			"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
 			"dev": true
 		},
+		"delegate": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+			"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+		},
 		"delegates": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -6509,6 +6524,14 @@
 				"minimist": "^1.2.5"
 			}
 		},
+		"good-listener": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+			"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+			"requires": {
+				"delegate": "^3.1.2"
+			}
+		},
 		"graceful-fs": {
 			"version": "4.2.3",
 			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
@@ -9531,6 +9554,11 @@
 				}
 			}
 		},
+		"select": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+			"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+		},
 		"semver": {
 			"version": "5.7.1",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -10812,6 +10840,11 @@
 				"setimmediate": "^1.0.4"
 			}
 		},
+		"tiny-emitter": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+			"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+		},
 		"tinycolor2": {
 			"version": "1.4.2",
 			"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
@@ -11328,6 +11361,14 @@
 			"resolved": "https://registry.npmjs.org/vue-blurhash/-/vue-blurhash-0.1.2.tgz",
 			"integrity": "sha512-VfIiQW2+F1HsJktumGsEwCsp0CYLdnmTcCA3nMvZ8Bze8bkpp9tonIygzBnjUKN0WZyOxb22i9QQ+lqgngjedA=="
 		},
+		"vue-clipboard2": {
+			"version": "0.3.1",
+			"resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz",
+			"integrity": "sha512-H5S/agEDj0kXjUb5GP2c0hCzIXWRBygaWLN3NEFsaI9I3uWin778SFEMt8QRXiPG+7anyjqWiw2lqcxWUSfkYg==",
+			"requires": {
+				"clipboard": "^2.0.0"
+			}
+		},
 		"vue-color": {
 			"version": "2.7.1",
 			"resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.7.1.tgz",

package.json

@@ -41,6 +41,7 @@
 		"music-metadata": "^7.4.1",
 		"vue": "^2.6.12",
 		"vue-blurhash": "^0.1.2",
+		"vue-clipboard2": "^0.3.1",
 		"vue-router": "^3.4.7",
 		"vuex": "^3.5.1"
 	},

src/components/Dashboard.vue

@@ -41,7 +41,7 @@ export default {
 	data() {
 		return {
 			notifications: [],
-			showMoreUrl: generateUrl('/apps/radio/api/favorites'),
+			showMoreUrl: generateUrl('/apps/radio/#/favorites'),
 			state: 'loading',
 			darkThemeColor: OCA.Accessibility.theme === 'dark' ? 'ffffff' : '000000',
 		}
@@ -52,7 +52,7 @@ export default {
 			return this.notifications.map((n) => {
 				return {
 					id: n.id,
-					targetUrl: generateUrl('/apps/radio/api/favorites'),
+					targetUrl: generateUrl('/apps/radio/#/favorites'),
 					avatarUrl: n.favicon,
 					mainText: n.name,
 					subText: n.tags,

src/components/Sidebar.vue

@@ -12,9 +12,9 @@
 				Stream URL
 			</span>
 			<div class="content">
-				<input type="text" :value="sidebarStation.url_resolved" disabled="disabled">
+				<input type="text" :value="urlResolved" disabled="disabled">
 				<Actions>
-					<ActionButton icon="icon-clippy" @click="copyLink( { url: shareUrl(share) })">
+					<ActionButton icon="icon-clippy" @click="copyLink">
 						{{ t('radio', 'Copy link to clipboard') }}
 					</ActionButton>
 				</Actions>
@@ -64,6 +64,7 @@
 import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar'
 import Actions from '@nextcloud/vue/dist/Components/Actions'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import { showError, showSuccess } from '@nextcloud/dialogs'
 
 export default {
 	name: 'Sidebar',
@@ -83,6 +84,13 @@ export default {
 		},
 	},
 	computed: {
+		urlResolved() {
+			if (this.sidebarStation.url_resolved) {
+				return this.sidebarStation.url_resolved
+			} else {
+				return this.sidebarStation.urlresolved
+			}
+		},
 		stationTags() {
 			if (this.sidebarStation.tags) {
 				return this.sidebarStation.tags.replaceAll(',', ', ')
@@ -94,6 +102,16 @@ export default {
 		toggleSidebar(station) {
 			this.$emit('toggleSidebar')
 		},
+		copyLink() {
+			this.$copyText(this.urlResolved).then(
+				function() {
+					showSuccess(t('radio', 'Link copied to clipboard'))
+				},
+				function() {
+					showError(t('radio', 'Error while copying link to clipboard'))
+				}
+			)
+		},
 	},
 }
 </script>

src/main.js

@@ -28,6 +28,7 @@ import { translate, translatePlural } from '@nextcloud/l10n'
 import App from './App'
 
 import VueBlurHash from 'vue-blurhash'
+import VueClipboard from 'vue-clipboard2'
 
 import 'vue-blurhash/dist/vue-blurhash.css'
 
@@ -37,6 +38,7 @@ Vue.prototype.OC = window.OC
 Vue.prototype.OCA = window.OCA
 Vue.prototype.$apiUrl = 'https://de1.api.radio-browser.info'
 
+Vue.use(VueClipboard)
 Vue.use(VueBlurHash)
 
 export default new Vue({