92 lines
3.5 KiB
Vue
92 lines
3.5 KiB
Vue
<template>
|
|
<section class="card" role="region" id="profile-backend">
|
|
<div class="card-header bg-primary-dark">
|
|
<h3 class="card-title">
|
|
<translate key="lang_profile_backend_title">AutoDJ Service</translate>
|
|
|
|
<running-badge :running="np.services.backend_running"></running-badge>
|
|
<br>
|
|
<small>{{ backendName }}</small>
|
|
</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-text">
|
|
{{ langTotalTracks }}
|
|
</p>
|
|
|
|
<div class="buttons" v-if="userCanManageMedia">
|
|
<a class="btn btn-primary" :href="manageMediaUri" key="lang_profile_manage_media">Music Files</a>
|
|
<a class="btn btn-primary" :href="managePlaylistsUri" key="lang_profile_manage_playlists" v-translate>Playlists</a>
|
|
</div>
|
|
</div>
|
|
<div class="card-actions" v-if="userCanManageBroadcasting && hasStarted">
|
|
<a class="api-call no-reload btn btn-outline-secondary" :href="backendRestartUri">
|
|
<icon icon="update"></icon>
|
|
<translate key="lang_profile_backend_restart">Restart</translate>
|
|
</a>
|
|
<a class="api-call no-reload btn btn-outline-success" v-show="!np.services.backend_running"
|
|
:href="backendStartUri">
|
|
<icon icon="play_arrow"></icon>
|
|
<translate key="lang_profile_backend_start">Start</translate>
|
|
</a>
|
|
<a class="api-call no-reload btn btn-outline-danger" v-show="np.services.backend_running"
|
|
:href="backendStopUri">
|
|
<icon icon="stop"></icon>
|
|
<translate key="lang_profile_backend_stop">Stop</translate>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import {BACKEND_LIQUIDSOAP} from '~/components/Entity/RadioAdapters.js';
|
|
import Icon from '~/components/Common/Icon';
|
|
import RunningBadge from "./Common/RunningBadge.vue";
|
|
|
|
export const profileBackendProps = {
|
|
props: {
|
|
numSongs: Number,
|
|
numPlaylists: Number,
|
|
backendType: String,
|
|
hasStarted: Boolean,
|
|
userCanManageBroadcasting: Boolean,
|
|
userCanManageMedia: Boolean,
|
|
manageMediaUri: String,
|
|
managePlaylistsUri: String,
|
|
backendRestartUri: String,
|
|
backendStartUri: String,
|
|
backendStopUri: String
|
|
}
|
|
};
|
|
|
|
export default {
|
|
inheritAttrs: false,
|
|
components: {RunningBadge, Icon},
|
|
mixins: [profileBackendProps],
|
|
props: {
|
|
np: Object
|
|
},
|
|
computed: {
|
|
langTotalTracks() {
|
|
let numSongsRaw = this.$ngettext('%{numSongs} uploaded song', '%{numSongs} uploaded songs', this.numSongs);
|
|
let numSongs = this.$gettextInterpolate(numSongsRaw, {numSongs: this.numSongs});
|
|
|
|
let numPlaylistsRaw = this.$ngettext('%{numPlaylists} playlist', '%{numPlaylists} playlists', this.numPlaylists);
|
|
let numPlaylists = this.$gettextInterpolate(numPlaylistsRaw, { numPlaylists: this.numPlaylists });
|
|
|
|
let translated = this.$gettext('LiquidSoap is currently shuffling from %{songs} and %{playlists}.');
|
|
return this.$gettextInterpolate(translated, {
|
|
songs: numSongs,
|
|
playlists: numPlaylists
|
|
});
|
|
},
|
|
backendName () {
|
|
if (this.backendType === BACKEND_LIQUIDSOAP) {
|
|
return 'Liquidsoap';
|
|
}
|
|
return '';
|
|
}
|
|
}
|
|
};
|
|
</script>
|