tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-07-28 21:51:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

animate album image and title in album page

Browse Source
This commit is contained in:
geoffrey45 2022-05-25 16:25:17 +03:00
parent 2eabed3f3f
commit 99533b2baa
1 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/AlbumView/Header.vue
View File

@ -3,17 +3,19 @@
<div class="a-header rounded"> <div class="a-header rounded">
<div class="art"> <div class="art">
<div <div
class="image shadow-lg" class="image shadow-lg rounded"
:style="{ :style="{
backgroundImage: `url(&quot;${imguri + props.album.image}&quot;)`, backgroundImage: `url(&quot;${imguri + props.album.image}&quot;)`,
}" }"
v-motion-slide-from-left
></div> ></div>
</div> </div>
<div class="info"> <div class="info">
<div class="top"> <div class="top" v-motion-slide-from-top>
<div <div
class="h" class="h"
v-if="props.album.artist.toLowerCase() == 'various artists'" v-if="props.album.artist.toLowerCase() == 'various artists'"
> >
Compilation Compilation
</div> </div>
@ -23,7 +25,8 @@
<div class="bottom"> <div class="bottom">
<div class="stats"> <div class="stats">
{{ props.album.count }} Tracks • {{ props.album.count }} Tracks •
{{ formatSeconds(props.album.duration) }} • {{ props.album.date }} • {{ formatSeconds(props.album.duration, true) }} •
{{ props.album.date }} •
{{ props.album.artist }} {{ props.album.artist }}
</div> </div>
<PlayBtnRect :source="playSources.album" /> <PlayBtnRect :source="playSources.album" />
@ -34,11 +37,11 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { playSources } from "../../composables/enums";
import { formatSeconds } from "../../composables/perks"; import { formatSeconds } from "../../composables/perks";
import { paths } from "../../config";
import { AlbumInfo } from "../../interfaces"; import { AlbumInfo } from "../../interfaces";
import PlayBtnRect from "../shared/PlayBtnRect.vue"; import PlayBtnRect from "../shared/PlayBtnRect.vue";
import { playSources } from "../../composables/enums";
import { paths } from "../../config";
const imguri = paths.images.thumb; const imguri = paths.images.thumb;
const props = defineProps<{ const props = defineProps<{
@ -89,7 +92,7 @@ extrackColors();
.title { .title {
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 1000; font-weight: 600;
color: white; color: white;
text-transform: capitalize; text-transform: capitalize;
} }