revil-O/platypush
1
0
Fork 0
forked from platypush/platypush
Code Pull requests Activity

[media UI] Fixed player selector style after Dropdown component changes.

Browse source
This commit is contained in:
Fabio Manganiello 2023-11-12 15:55:28 +01:00
parent ca72e22820
commit 50922cf149
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
1 changed files with 44 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
platypush/backend/http/webapp/src/components/panels/Media/Players.vue
View file

@ -1,36 +1,38 @@
<template> <template>
<div class="plugins"> <div class="media-players">
<Chromecast :player="selectedPlayer?.pluginName === 'media.chromecast' ? selectedPlayer : null" <div class="plugins">
ref="chromecastPlugin" @status="$emit('status', $event)" /> <Chromecast :player="selectedPlayer?.pluginName === 'media.chromecast' ? selectedPlayer : null"
<Kodi :player="selectedPlayer?.pluginName === 'media.kodi' ? selectedPlayer : null" ref="kodiPlugin" ref="chromecastPlugin" @status="$emit('status', $event)" />
<Kodi :player="selectedPlayer?.pluginName === 'media.kodi' ? selectedPlayer : null" ref="kodiPlugin"
@status="$emit('status', $event)" />
<Mplayer :player="selectedPlayer?.pluginName === 'media.mplayer' ? selectedPlayer : null" ref="mplayerPlugin"
@status="$emit('status', $event)" />
<Mpv :player="selectedPlayer?.pluginName === 'media.mpv' ? selectedPlayer : null" ref="mpvPlugin"
@status="$emit('status', $event)" /> @status="$emit('status', $event)" />
<Mplayer :player="selectedPlayer?.pluginName === 'media.mplayer' ? selectedPlayer : null" ref="mplayerPlugin" <Omxplayer :player="selectedPlayer?.pluginName === 'media.omxplayer' ? selectedPlayer : null" ref="omxplayerPlugin"
@status="$emit('status', $event)" /> @status="$emit('status', $event)" />
<Mpv :player="selectedPlayer?.pluginName === 'media.mpv' ? selectedPlayer : null" ref="mpvPlugin" <Vlc :player="selectedPlayer?.pluginName === 'media.vlc' ? selectedPlayer : null" ref="vlcPlugin"
@status="$emit('status', $event)" /> @status="$emit('status', $event)" />
<Omxplayer :player="selectedPlayer?.pluginName === 'media.omxplayer' ? selectedPlayer : null" ref="omxplayerPlugin" </div>
@status="$emit('status', $event)" />
<Vlc :player="selectedPlayer?.pluginName === 'media.vlc' ? selectedPlayer : null" ref="vlcPlugin"
@status="$emit('status', $event)" />
</div>
<div class="players"> <div class="players">
<Dropdown :title="selectedPlayer?.name || 'Players'" <Dropdown :title="selectedPlayer?.name || 'Players'"
:icon-class="selectedPlayer ? selectedPlayer.iconClass : 'fab fa-chromecast'"> :icon-class="selectedPlayer ? selectedPlayer.iconClass : 'fab fa-chromecast'">
<Loading v-if="loading" /> <Loading v-if="loading" />
<div class="refresh"> <div class="refresh">
<DropdownItem text="Refresh" icon-class="fa fa-sync-alt" @click="refresh" /> <DropdownItem text="Refresh" icon-class="fa fa-sync-alt" @click="refresh" />
</div> </div>
<div class="no-results" v-if="!players?.length">No players found</div> <div class="no-results" v-if="!players?.length">No players found</div>
<div class="player" v-for="(player, i) in players" :key="i" <div class="player" v-for="(player, i) in players" :key="i"
:class="{selected: selectedPlayer != null && selectedPlayer.pluginName === player.pluginName :class="{selected: selectedPlayer != null && selectedPlayer.pluginName === player.pluginName
&& selectedPlayer.name === player.name}"> && selectedPlayer.name === player.name}">
<DropdownItem :text="player.name" :icon-class="player.iconClass" @click="select(player)" /> <DropdownItem :text="player.name" :icon-class="player.iconClass" @click="select(player)" />
</div> </div>
</Dropdown> </Dropdown>
</div>
</div> </div>
</template> </template>
@ -108,35 +110,28 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss">
.plugins { .media-players {
display: none; .plugins {
} display: none;
.no-results {
padding: 1em;
}
.players {
:deep(.dropdown) {
direction: ltr;
.item {
padding: .5em;
}
.icon {
margin-right: 1em !important;
}
} }
:deep(.refresh) { .no-results {
padding: 1em;
}
}
.dropdown-container {
.refresh {
font-weight: bold; font-weight: bold;
font-size: .8em; font-size: .8em;
opacity: .7; opacity: .7;
} }
:deep(.player.selected) { .player.selected {
color: $selected-fg; .item {
color: $selected-fg;
}
} }
} }
</style> </style>