tilderadio
/
AzuraCast
mirror of https://github.com/AzuraCast/AzuraCast.git
4
0
Fork 0
Code Issues Releases Wiki Activity

Use vue-use clipboard component.

This commit is contained in:
Buster Neece 2022-12-13 17:48:33 -06:00
parent e6d20ba400
commit 405a831220
No known key found for this signature in database
GPG Key ID: F1D2E64A0005E80E
8 changed files with 73 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
frontend/npm-shrinkwrap.json generated
View File

@ -27,7 +27,6 @@
"chart.js": "^3.5.1",
"chartjs-adapter-luxon": "^1.1.0",
"chartjs-plugin-zoom": "^1.1.1",
"clipboard": "^2.0.8",
"codemirror": "^5.62.3",
"css-loader": "^6.5.0",
"del": "^7",
@ -66,7 +65,6 @@
"vue-axios": "^3.5",
"vue-loader": "^17",
"vue-style-loader": "^4.1.3",
"vue3-clipboard": "^1.0.0",
"vue3-daterange-picker": "^1",
"vue3-gettext": "^2.3.4",
"vuedraggable": "^2.24.1",
@ -3549,16 +3547,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/clipboard": {
"version": "2.0.11",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
"integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
"dependencies": {
"good-listener": "^1.2.2",
"select": "^1.1.2",
"tiny-emitter": "^2.0.0"
}
},
"node_modules/cliui": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
@ -4132,11 +4120,6 @@
"node": ">=0.4.0"
}
},
"node_modules/delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
},
"node_modules/detect-file": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
@ -5247,14 +5230,6 @@
"node": ">= 0.10"
}
},
"node_modules/good-listener": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
"dependencies": {
"delegate": "^3.1.2"
}
},
"node_modules/graceful-fs": {
"version": "4.2.10",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@ -8737,11 +8712,6 @@
"url": "https://opencollective.com/webpack"
}
},
"node_modules/select": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
"integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
},
"node_modules/semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@ -9436,11 +9406,6 @@
"next-tick": "1"
}
},
"node_modules/tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
},
"node_modules/to-absolute-glob": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz",
@ -10159,17 +10124,6 @@
"node": ">=4.0.0"
}
},
"node_modules/vue3-clipboard": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/vue3-clipboard/-/vue3-clipboard-1.0.0.tgz",
"integrity": "sha512-GUqKh1oO79xDpq0z+cCv/NDVTpcJGNDzeNgT3PmTdTp/WJh3gcTrDqIYKycKhzMFOtIFJ7hO/+usgyWtT+fNhA==",
"dependencies": {
"clipboard": "^2.0.6"
},
"peerDependencies": {
"vue": "^3.0.0"
}
},
"node_modules/vue3-daterange-picker": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/vue3-daterange-picker/-/vue3-daterange-picker-1.0.1.tgz",
@ -13233,16 +13187,6 @@
}
}
},
"clipboard": {
"version": "2.0.11",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
"integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
"requires": {
"good-listener": "^1.2.2",
"select": "^1.1.2",
"tiny-emitter": "^2.0.0"
}
},
"cliui": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
@ -13691,11 +13635,6 @@
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
},
"delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
},
"detect-file": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
@ -14557,14 +14496,6 @@
"sparkles": "^1.0.0"
}
},
"good-listener": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
"requires": {
"delegate": "^3.1.2"
}
},
"graceful-fs": {
"version": "4.2.10",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@ -17158,11 +17089,6 @@
"ajv-keywords": "^3.5.2"
}
},
"select": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
"integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
},
"semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@ -17699,11 +17625,6 @@
"next-tick": "1"
}
},
"tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
},
"to-absolute-glob": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz",
@ -18249,14 +18170,6 @@
}
}
},
"vue3-clipboard": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/vue3-clipboard/-/vue3-clipboard-1.0.0.tgz",
"integrity": "sha512-GUqKh1oO79xDpq0z+cCv/NDVTpcJGNDzeNgT3PmTdTp/WJh3gcTrDqIYKycKhzMFOtIFJ7hO/+usgyWtT+fNhA==",
"requires": {
"clipboard": "^2.0.6"
}
},
"vue3-daterange-picker": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/vue3-daterange-picker/-/vue3-daterange-picker-1.0.1.tgz",

2
frontend/package.json
View File

@ -28,7 +28,6 @@
"chart.js": "^3.5.1",
"chartjs-adapter-luxon": "^1.1.0",
"chartjs-plugin-zoom": "^1.1.1",
"clipboard": "^2.0.8",
"codemirror": "^5.62.3",
"css-loader": "^6.5.0",
"del": "^7",
@ -67,7 +66,6 @@
"vue-axios": "^3.5",
"vue-loader": "^17",
"vue-style-loader": "^4.1.3",
"vue3-clipboard": "^1.0.0",
"vue3-daterange-picker": "^1",
"vue3-gettext": "^2.3.4",
"vuedraggable": "^2.24.1",

8
frontend/scss/azuracast/overrides/_buttons.scss
View File

@ -10,6 +10,14 @@
margin-right: calc($btn-padding-x-sm / 2);
}
.btn,
.btn-lg,
.btn-sm {
.material-icons:only-child {
margin-right: 0;
}
}
.buttons {
& > * {
margin-right: .5rem;

4
frontend/vue/base.js
View File

@ -5,7 +5,6 @@ import gettext from './vendor/gettext';
import {createApp} from "vue";
import useBootstrapVue from "./vendor/bootstrapVue";
import useSweetAlert from "./vendor/sweetalert";
import useVueClipboard from "~/vendor/clipboard";
export default function (component, options) {
return function (el, props) {
@ -81,9 +80,6 @@ export default function (component, options) {
/* SweetAlert */
useSweetAlert(vueApp);
/* Clipboard */
useVueClipboard(vueApp);
vueApp.mount(el);
};
}

11
frontend/vue/components/Common/CopyToClipboardButton.vue
View File

@ -1,13 +1,14 @@
<template>
<button ref="btn" class="btn btn-copy btn-link btn-xs" @click.prevent="doCopy">
<button ref="btn" class="btn btn-copy btn-link btn-xs" @click.prevent="doCopy"
:aria-label="$gettext('Copy to Clipboard')">
<icon class="sm" icon="file_copy"></icon>
<span :class="{ 'sr-only': hideText }" key="lang_copy_to_clipboard" v-translate>Copy to Clipboard</span>
<span v-if="!hideText">{{ $gettext('Copy to Clipboard') }}</span>
</button>
</template>
<script setup>
import Icon from "~/components/Common/Icon.vue";
import {copyToClipboard} from "~/vendor/clipboard";
import {useClipboard} from "@vueuse/core";
const props = defineProps({
text: {
@ -20,7 +21,9 @@ const props = defineProps({
}
});
const clipboard = useClipboard({legacy: true});
const doCopy = () => {
copyToClipboard(props.text);
clipboard.copy(props.text);
};
</script>

63
frontend/vue/components/Common/StreamingLogModal.vue
View File

@ -1,5 +1,6 @@
<template>
<b-modal id="logs_modal" size="lg" ref="modal" :title="langLogView" @hidden="clearContents" no-enforce-focus>
<b-modal id="logs_modal" size="lg" ref="modal" @hidden="clearContents"
:title="$gettext('Log Viewer')" no-enforce-focus>
<streaming-log-view ref="logView" :log-url="logUrl"></streaming-log-view>
<template #modal-footer>
@ -13,39 +14,35 @@
</b-modal>
</template>
<script>
import '~/vendor/clipboard.js';
<script setup>
import StreamingLogView from "~/components/Common/StreamingLogView";
import {copyToClipboard} from "~/vendor/clipboard";
import {ref} from "vue";
import {get, set, templateRef, useClipboard} from "@vueuse/core";
export default {
name: 'StreamingLogModal',
components: {StreamingLogView},
data() {
return {
logUrl: null
};
},
computed: {
langLogView() {
return this.$gettext('Log Viewer');
}
},
methods: {
show(logUrl) {
this.logUrl = logUrl;
this.$refs.modal.show();
},
doCopy() {
copyToClipboard(this.$refs.logView.getContents());
},
close() {
this.$refs.modal.hide();
},
clearContents() {
this.logUrl = null;
this.log = null;
}
}
const logUrl = ref('');
const $modal = templateRef('modal');
const $logView = templateRef('logView');
const show = (newLogUrl) => {
set(logUrl, newLogUrl);
get($modal).show();
};
const clipboard = useClipboard();
const doCopy = () => {
clipboard.copy(get($logView).getContents());
};
const close = () => {
get($modal).hide();
}
const clearContents = () => {
set(logUrl, '');
}
defineExpose({
show
})
</script>

60
frontend/vue/components/Stations/Queue/LogsModal.vue
View File

@ -1,5 +1,5 @@
<template>
<b-modal id="logs_modal" ref="modal" :title="langLogView">
<b-modal id="logs_modal" ref="modal" :title="$gettext('Log Viewer')">
<textarea class="form-control log-viewer" spellcheck="false" readonly>{{ logs }}</textarea>
<template #modal-footer>
@ -13,38 +13,34 @@
</b-modal>
</template>
<script>
import '~/vendor/clipboard.js';
import {copyToClipboard} from "~/vendor/clipboard";
<script setup>
import {ref} from "vue";
import {get, set, templateRef, useClipboard} from "@vueuse/core";
export default {
name: 'QueueLogsModal',
data () {
return {
logs: 'Loading...',
};
},
computed: {
langLogView () {
return this.$gettext('Log Viewer');
}
},
methods: {
show(logs) {
let logDisplay = [];
logs.forEach(function (log) {
logDisplay.push(log.formatted);
});
const logs = ref('Loading...');
const $modal = templateRef('modal');
this.logs = logDisplay.join('');
this.$refs.modal.show();
},
doCopy() {
copyToClipboard(this.logs);
},
close() {
this.$refs.modal.hide();
}
}
const show = (newLogs) => {
let logDisplay = [];
newLogs.forEach((log) => {
logDisplay.push(log.formatted);
});
set(logs, logDisplay.join(''));
get($modal).show();
};
const clipboard = useClipboard();
const doCopy = () => {
clipboard.copy(get(logs));
};
const close = () => {
get($modal).hide();
}
defineExpose({
show
});
</script>

23
frontend/vue/vendor/clipboard.js vendored
View File

@ -1,23 +0,0 @@
import VueClipboard, {copyText} from 'vue3-clipboard';
export function copyToClipboard(text) {
copyText(
text,
undefined,
(error) => {
if (error) {
console.error(error)
}
}
);
}
export default function useVueClipboard(vueApp) {
vueApp.use(
VueClipboard,
{
autoSetContainer: true,
appendToBody: true,
}
);
};