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

Add album art to dashboard.

This commit is contained in:
Buster "Silver Eagle" Neece 2021-11-05 21:05:40 -05:00
parent 57d3f4c04e
commit cbe106d9ef
No known key found for this signature in database
GPG Key ID: 6D9E12FF03411F4E
3 changed files with 57 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/vue/components/Dashboard.vue
View File

@ -2,14 +2,14 @@
<div id="dashboard">
<section class="card mb-4" role="region">
<div class="card-header bg-primary-dark d-flex flex-wrap align-items-center">
<avatar class="flex-shrink-0 mr-3" :url="userAvatar" :service="avatarServiceName"
:service-url="avatarServiceUrl"></avatar>
<avatar class="flex-shrink-0 mr-3" v-if="user.avatar.url" :url="user.avatar.url"
:service="user.avatar.service" :service-url="user.avatar.serviceUrl"></avatar>
<div class="flex-fill">
<h2 class="card-title mt-0">{{ userName }}</h2>
<h3 class="card-subtitle">{{ userEmail }}</h3>
<h2 class="card-title mt-0">{{ user.name }}</h2>
<h3 class="card-subtitle">{{ user.email }}</h3>
</div>
<div class="flex-md-shrink-0 mt-3 mt-md-0">
<a class="btn btn-bg" role="button" :href="profileUrl">
<icon icon="account_circle"></icon>
@ -133,12 +133,21 @@
<span class="nowplaying-listeners">{{ item.listeners.total }}</span>
</td>
<td>
<div v-if="item.now_playing.song.title !== ''">
<strong><span class="nowplaying-title">{{ item.now_playing.song.title }}</span></strong><br>
<span class="nowplaying-artist">{{ item.now_playing.song.artist }}</span>
</div>
<div v-else>
<strong><span class="nowplaying-title">{{ item.now_playing.song.text }}</span></strong>
<div class="d-flex align-items-center">
<album-art v-if="showAlbumArt" :src="item.now_playing.song.art"
class="flex-shrink-0 pr-3"></album-art>
<div v-if="item.now_playing.song.title !== ''" class="flex-fill">
<strong><span class="nowplaying-title">
{{ item.now_playing.song.title }}
</span></strong><br>
<span class="nowplaying-artist">{{ item.now_playing.song.artist }}</span>
</div>
<div v-else class="flex-fill">
<strong><span class="nowplaying-title">
{{ item.now_playing.song.text }}
</span></strong>
</div>
</div>
</td>
<td class="text-right">
@ -161,15 +170,12 @@ import store from 'store';
import Icon from '~/components/Common/Icon';
import Avatar from '~/components/Common/Avatar';
import PlayButton from "~/components/Common/PlayButton";
import AlbumArt from "~/components/Common/AlbumArt";
export default {
components: {PlayButton, Avatar, Icon, DataTable, TimeSeriesChart},
components: {PlayButton, Avatar, Icon, DataTable, TimeSeriesChart, AlbumArt},
props: {
userName: String,
userEmail: String,
userAvatar: String,
avatarServiceName: String,
avatarServiceUrl: String,
userUrl: String,
profileUrl: String,
adminUrl: String,
showAdmin: Boolean,
@ -177,10 +183,21 @@ export default {
showCharts: Boolean,
chartsUrl: String,
manageStationsUrl: String,
stationsUrl: String
stationsUrl: String,
showAlbumArt: Boolean
},
data () {
return {
userLoading: true,
user: {
name: this.$gettext('AzuraCast User'),
email: null,
avatar: {
url: null,
service: null,
serviceUrl: null
},
},
chartsLoading: true,
chartsVisible: null,
chartsData: {
@ -220,6 +237,19 @@ export default {
this.chartsVisible = true;
}
this.axios.get(this.userUrl).then((resp) => {
this.user = {
name: resp.data.name,
email: resp.data.email,
avatar: {
url: resp.data.avatar.url_64,
service: resp.data.avatar.service_name,
serviceUrl: resp.data.avatar.service_url
}
};
this.userLoading = false;
});
if (this.showCharts) {
this.axios.get(this.chartsUrl).then((response) => {
this.chartsData = response.data;

8
frontend/vue/pages/Dashboard.js
View File

@ -1,11 +1,11 @@
import initBase
from '~/base.js';
import initBase from '~/base.js';
import '~/vendor/bootstrapVue.js';
import '~/vendor/fancybox.js';
import '~/vendor/chartjs.js';
import '~/pages/InlinePlayer.js';
import Dashboard
from '~/components/Dashboard';
import Dashboard from '~/components/Dashboard';
export default initBase(Dashboard);

15
src/Controller/Frontend/DashboardAction.php
View File

@ -22,14 +22,12 @@ class DashboardAction
Entity\ApiGenerator\NowPlayingApiGenerator $npApiGenerator,
Entity\Repository\SettingsRepository $settingsRepo
): ResponseInterface {
$settings = $settingsRepo->readSettings();
// Detect current analytics level.
$analyticsLevel = $settingsRepo->readSettings()->getAnalytics();
$analyticsLevel = $settings->getAnalytics();
$showCharts = $analyticsLevel !== Entity\Analytics::LEVEL_NONE;
// Avatars
$avatarService = $avatar->getAvatarService();
$user = $request->getUser();
$router = $request->getRouter();
$acl = $request->getAcl();
@ -39,11 +37,7 @@ class DashboardAction
id: 'dashboard',
title: __('Dashboard'),
props: [
'avatarServiceName' => $avatarService->getServiceName(),
'avatarServiceUrl' => $avatarService->getServiceUrl(),
'userAvatar' => $avatar->getAvatar($request->getUser()->getEmail(), 64),
'userName' => $user->getName() ?? __('AzuraCast User'),
'userEmail' => $user->getEmail(),
'userUrl' => (string)$router->named('api:frontend:account:me'),
'profileUrl' => (string)$router->named('profile:index'),
'adminUrl' => (string)$router->named('admin:index:index'),
'showAdmin' => $acl->isAllowed(Acl::GLOBAL_VIEW),
@ -52,6 +46,7 @@ class DashboardAction
'chartsUrl' => (string)$router->named('api:frontend:dashboard:charts'),
'manageStationsUrl' => (string)$router->named('admin:stations:index'),
'stationsUrl' => (string)$router->named('api:frontend:dashboard:stations'),
'showAlbumArt' => !$settings->getHideAlbumArt(),
]
);
}