sidebar: fix copy link to clipboard

This commit is contained in:
Jonas Heinrich 2020-11-19 10:16:00 +01:00
parent c7d21c74d8
commit 00253d43ce
5 changed files with 66 additions and 4 deletions

41
package-lock.json generated
View File

@ -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",

View File

@ -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"
},

View File

@ -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,

View File

@ -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>

View File

@ -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({