WebPlay/client
1
1
Fork 0
Code Issues 10 Pull Requests Packages Projects Releases Wiki Activity

fancy-banner #25

Merged
artem merged 4 commits from fancy-banner into main 2023-09-27 22:14:40 +02:00
Conversation 0 Commits 4 Files Changed 5 +52 -80
1 changed files with 52 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 02e13cb642 - Show all commits

116
src/views/Home.vue
View File

@ -2,6 +2,19 @@
<div id="welcome" ref="welcome" @scroll="loadNextPage">
<div id="welcomeLeft" class="flex-column grow">
<div id="banner" class="center flex-column shadow">
<div id="collage">
<svg width="100%" height="100%" viewBox="20 20 700 100">
<g>
<animateTransform id="animY1" attributeName="transform" type="translate" begin="0s; animY2.end" from="-40 -20" to="0 0" dur="30s" />
<animateTransform id="animY2" attributeName="transform" type="translate" begin="animY1.end" from="0 0" to="-40 -20" dur="30s" />
<image :xlink:href="item.covers.cover128" :x="i * 64" y="0" width="64" height="64" v-for="(item, i) in albums" :key="item" />
<image :xlink:href="item.covers.cover256" :x="i * 128" y="64" width="128" v-for="(item, i) in artists" :key="item" />
<image :xlink:href="item.covers.cover128 || item.covers.cover256" :x="i * 64" y="128" v-for="(item, i) in history" :key="item" />
</g>
</svg>
</div>
<div class="flex-column" style="z-index: 1;">
<h1>WebPlay</h1>
<p>
<b>{{ serverInfo.stats.tracks.toLocaleString("de-DE") }}</b> Tracks
@ -11,21 +24,9 @@
<b>{{ serverInfo.stats.users }}</b>
</p>
</div>
<MessageScreen
title="First Run?"
subtitle="You still don't have any Music or Video content on your instance"
icon="sync"
:commands="messageCommands"
@commandClicked="messageCommand"
:showCommands="$store.getters['user/isAdministrator']"
v-if="serverInfo.stats.tracks == 0 && serverInfo.stats.videos == 0"
/>
<MessageScreen
v-else-if="mostListened.length == 0 && mostViewed.length == 0"
title="Still no history or trends"
subtitle="Still no history or trends on this instance"
icon="info"
/>
</div>
<MessageScreen title="First Run?" subtitle="You still don't have any Music or Video content on your instance" icon="sync" :commands="messageCommands" @commandClicked="messageCommand" :showCommands="$store.getters['user/isAdministrator']" v-if="serverInfo.stats.tracks == 0 && serverInfo.stats.videos == 0" />
<MessageScreen v-else-if="mostListened.length == 0 && mostViewed.length == 0" title="Still no history or trends" subtitle="Still no history or trends on this instance" icon="info" />
<template v-else>
<h2 class="ma-left ma-top pa-top ma4-bottom" v-if="history.length > 0">
Last played
@ -33,90 +34,43 @@
<template v-if="history.length > 0">
<div id="history" :class="{ more: historyAll == true }">
<template v-for="item in history">
<AlbumItem
class="ma8"
v-if="item.type == 'album'"
:item="item"
:key="item._id"
/>
<ArtistItem
class="ma8"
v-if="item.type == 'artist'"
:item="item"
:key="item._id"
/>
<BoxItem
class="ma8"
v-if="item.type == 'box'"
:item="item"
:key="item._id"
/>
<RadioItem
class="ma8"
v-if="item.type == 'radio'"
:item="item"
:key="item._id"
/>
<AlbumItem class="ma8" v-if="item.type == 'album'" :item="item" :key="item._id" />
<ArtistItem class="ma8" v-if="item.type == 'artist'" :item="item" :key="item._id" />
<BoxItem class="ma8" v-if="item.type == 'box'" :item="item" :key="item._id" />
<RadioItem class="ma8" v-if="item.type == 'radio'" :item="item" :key="item._id" />
</template>
</div>
<span class="pa-top pa-right right" @click="toggleHistory">
<awesome-icon
:icon="historyAll ? 'arrow-up' : 'arrow-down'"
class="pa8-right"
/>{{ historyToggleText }}</span
>
<awesome-icon :icon="historyAll ? 'arrow-up' : 'arrow-down'" class="pa8-right" />{{ historyToggleText }}</span>
</template>
<div id="mostUsed" class="flex-row ma">
<div id="mostListened" class="grow" v-if="mostListened.length > 0">
<h2 class="ma-top pa-top ma4-bottom">Most listened</h2>
<div class="flex-column">
<TrackItem
v-for="(item, i) in mostListened"
:track="item"
:key="i"
/>
<TrackItem v-for="(item, i) in mostListened" :track="item" :key="i" />
</div>
</div>
<div id="mostViewed" class="grow" v-if="mostViewed.length > 0">
<h2 class="ma-top pa-top ma4-bottom">Most viewed</h2>
<div id="mostViewedVideos" class="flex-row">
<VideoItem
v-for="(item, i) in mostViewed"
:video="item"
:key="i"
/>
<VideoItem v-for="(item, i) in mostViewed" :video="item" :key="i" />
</div>
</div>
</div>
</template>
</div>
<div
v-if="newestAlbums.length > 0 || newestBoxes.length > 0"
id="newest"
class="pa-left pa-right"
>
<div v-if="newestAlbums.length > 0 || newestBoxes.length > 0" id="newest" class="pa-left pa-right">
<template v-if="newestAlbums.length > 0">
<h3>Newest Music</h3>
<div id="newestMusic" class="flex-column pa-bottom">
<AlbumItem
class="ma8"
v-for="item in newestAlbums"
type="line"
:item="item"
:key="item._id"
/>
<AlbumItem class="ma8" v-for="item in newestAlbums" type="line" :item="item" :key="item._id" />
</div>
</template>
<template v-if="newestBoxes.length > 0">
<h3>Newest Videos</h3>
<div id="newestVideos" class="flex-row">
<BoxItem
class="ma8 small"
v-for="item in newestBoxes"
:item="item"
:key="item._id"
/>
<BoxItem class="ma8 small" v-for="item in newestBoxes" :item="item" :key="item._id" />
</div>
</template>
</div>
@ -160,6 +114,9 @@ export default {
this.$store.dispatch("boxes/loadNewest");
this.$store.dispatch("tracks/loadMostListened");
this.$store.dispatch("videos/loadMostViewed");
this.$store.dispatch("albums/loadAlbums", true);
this.$store.dispatch("artists/loadArtists", true);
},
loadNextPage() {
this.scrollPosition = this.$refs.welcome.scrollTop;
@ -194,6 +151,8 @@ export default {
serverInfo: "serverInfo",
mostListened: "tracks/mostListened",
mostViewed: "videos/mostViewed",
albums: ["albums/collection"],
artists: ["artists/collection"],
}),
historyToggleText() {
return this.historyAll ? "less..." : "more...";
@ -221,4 +180,17 @@ export default {
#history.more {
max-height: initial;
}
#banner {
position: relative;
}
#collage {
bottom: 0;
top: 0;
left: 0;
right: 0;
opacity: 0.25;
position: absolute;
}
</style>