jean/airsonic-refix
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

player: show image and reduce size of sm version

Browse Source
This commit is contained in:
Thomas Amland 2020-09-26 18:16:48 +02:00
parent 418a449b73
commit 3ed73a2e16
1 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/player/Player.vue
View File

@ -1,26 +1,33 @@
<template> <template>
<div :class="{'visible': visible}" class="player elevated d-flex"> <div :class="{'visible': visible}" class="player elevated d-flex">
<div v-if="track" class="d-none d-sm-block">
<router-link :to="track.albumId ? {name: 'album', params: {id: track.albumId}} : ''">
<img v-if="track.image" width="80px" height="80px" :src="track.image">
<img v-else width="80px" height="80px" src="@/shared/assets/fallback.svg">
</router-link>
</div>
<div class="flex-fill"> <div class="flex-fill">
<!-- Progress ---> <!-- Progress --->
<div class="progress2" @click="seek"> <div class="progress2" @click="seek">
<b-progress :value="progress" :max="100" height="4px" /> <b-progress :value="progress" :max="100" height="4px" />
</div> </div>
<div class="row align-items-center m-0" style="height: 100%"> <div class="row align-items-center m-0">
<!-- Track info ---> <!-- Track info --->
<div class="col p-0 pl-3" style="min-width: 0; width: 0;"> <div class="col p-0 d-flex flex-nowrap align-items-center justify-content-start" style="width: 0; min-width: 0">
<template v-if="track"> <template v-if="track">
<router-link :to="track.albumId ? {name: 'album', params: {id: track.albumId}} : ''">
<template v-if="track.image">
<img class="d-sm-none" width="64px" height="64px" :src="track.image">
<img class="d-none d-sm-inline-block" width="74px" height="74px" :src="track.image">
</template>
<template v-else>
<img class="d-sm-none" width="64px" height="64px" src="@/shared/assets/fallback.svg">
<img class="d-none d-sm-inline-block" width="74px" height="74px" src="@/shared/assets/fallback.svg">
</template>
</router-link>
<div class="pl-3" style="min-width: 0">
<div class="text-truncate"> <div class="text-truncate">
{{ track.title }} {{ track.title }}
</div> </div>
<div class="text-truncate"> <div class="text-truncate text-muted">
{{ track.artist }} {{ track.artist }}
</div> </div>
</div>
</template> </template>
</div> </div>
@ -60,7 +67,7 @@
transition: 0.5s transition: 0.5s
} }
.visible { .visible {
height: 80px; height: auto;
} }
</style> </style>
<script lang="ts"> <script lang="ts">