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 +63 -80
5 changed files with 63 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/store/modules/albums/actions.js
View File

@ -176,5 +176,10 @@ export default {
resolve();
});
});
},
loadRandomCovers(context, count) {
axios.get(context.rootGetters.server + "/api/albums/random/" + count, context.rootGetters.headers).then((res) => {
context.commit("setRandomCovers", res.data);
});
}
}

3
src/store/modules/albums/getters.js
View File

@ -32,5 +32,8 @@ export default {
},
newest(state) {
return state.newest;
},
randomCovers(state) {
return state.randomCovers;
}
}

3
src/store/modules/albums/mutations.js
View File

@ -76,5 +76,8 @@ export default {
}
});
state.newest = albums;
},
setRandomCovers(state, covers) {
state.randomCovers = covers;
}
}

1
src/store/modules/albums/state.js
View File

@ -2,6 +2,7 @@ export default {
collection: [],
newest: [],
selectedAlbum: { tracks: [], covers: {}, share: {} },
randomCovers: [],
page: 1,
loading: false,
eos: false

115
src/views/Home.vue
View File

@ -2,6 +2,17 @@
<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 -60" to="-10 -20" dur="30s" />
<animateTransform id="animY2" attributeName="transform" type="translate" begin="animY1.end" from="-10 -20" to="-40 -60" dur="30s" />
<image :xlink:href="item.covers.cover64" :x="Math.floor(i / 4) * 64" :y="i % 4 * 64" width="64" height="64" v-for="(item, i) in randomCovers" :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 +22,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 +32,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 +112,11 @@ export default {
this.$store.dispatch("boxes/loadNewest");
this.$store.dispatch("tracks/loadMostListened");
this.$store.dispatch("videos/loadMostViewed");
if (this.randomCovers.length == 0) {
this.$store.dispatch("albums/loadRandomCovers", 48);
this.$store.dispatch("albums/loadAlbums", true);
this.$store.dispatch("artists/loadArtists", true);
}
},
loadNextPage() {
this.scrollPosition = this.$refs.welcome.scrollTop;
@ -194,6 +151,7 @@ export default {
serverInfo: "serverInfo",
mostListened: "tracks/mostListened",
mostViewed: "videos/mostViewed",
randomCovers: ["albums/randomCovers"],
}),
historyToggleText() {
return this.historyAll ? "less..." : "more...";
@ -221,4 +179,17 @@ export default {
#history.more {
max-height: initial;
}
#banner {
position: relative;
}
#collage {
bottom: 0;
top: 0;
left: 0;
right: 0;
opacity: 0.2;
position: absolute;
}
</style>