Merge branch 'main' into dev
This commit is contained in:
commit
4dd3f939b8
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div id="player" class="flex-column" v-show="selectedTrack._id || selectedRadio._id">
|
||||
<input type="range" id="slider" min="0" max="100" step="0.1" v-model="selectedTrack.percent" @change="slideChanged" />
|
||||
<input type="range" id="slider" min="0" max="100" step="0.1" v-model="selectedTrack.percent" @change="slideChanged"/>
|
||||
<div id="playerBar" class="flex-row">
|
||||
<div class="flex-row grow">
|
||||
<img class="cover pointer" :src="cover" :title="selectedTrack.parent.title" @click="gotoContainer" />
|
||||
@ -9,6 +9,9 @@
|
||||
from
|
||||
<b>{{ selectedTrack.parent.title }}</b>
|
||||
</div>
|
||||
<div v-if="selectedRadio._id" class="flex-column">
|
||||
<b>{{ selectedRadio.name }}</b>
|
||||
</div>
|
||||
</div>
|
||||
<div id="playerControls" class="flex-row center">
|
||||
<button @click="switchShuffle" title="Shuffle mode" v-if="selectedTrack._id">
|
||||
@ -31,8 +34,8 @@
|
||||
<img src="static/icons/media-no-repeat-dark.svg" class="small" v-show="$store.getters['player/repeatType'] == 'none'" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-row ma-right hideOnMobilePortrait grow right" v-show="selectedTrack.title">
|
||||
{{ formatedP }} | {{ formatedD }}
|
||||
<div class="flex-row ma-right hideOnMobilePortrait grow right">
|
||||
<span v-show="selectedTrack.title">{{ formatedP }} | {{ formatedD }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<audio preload="auto" ref="audioControl" type="audio/mpeg" @ended="nextTrack" @canplay="play" @playing="playing" @durationchange="durationChanged" @timeupdate="timeUpdate" src></audio>
|
||||
@ -143,8 +146,6 @@ export default {
|
||||
this.audio.pause();
|
||||
this.audio.src = url;
|
||||
|
||||
this.pushHistoryItem();
|
||||
|
||||
if (this.currentTrackParent.progress) {
|
||||
if (this.currentTrackParent.progress.id == this.selectedTrack._id) {
|
||||
this.skipToSecond(this.currentTrackParent.progress.progress);
|
||||
@ -294,6 +295,7 @@ export default {
|
||||
track: this.selectedTrack,
|
||||
rate: this.audioBpm,
|
||||
});
|
||||
this.pushHistoryItem();
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -32,5 +32,8 @@ export default {
|
||||
},
|
||||
newest(state) {
|
||||
return state.newest;
|
||||
},
|
||||
randomCovers(state) {
|
||||
return state.randomCovers;
|
||||
}
|
||||
}
|
||||
@ -76,5 +76,8 @@ export default {
|
||||
}
|
||||
});
|
||||
state.newest = albums;
|
||||
},
|
||||
setRandomCovers(state, covers) {
|
||||
state.randomCovers = covers;
|
||||
}
|
||||
}
|
||||
@ -2,6 +2,7 @@ export default {
|
||||
collection: [],
|
||||
newest: [],
|
||||
selectedAlbum: { tracks: [], covers: {}, share: {} },
|
||||
randomCovers: [],
|
||||
page: 1,
|
||||
loading: false,
|
||||
eos: false
|
||||
|
||||
@ -2,30 +2,29 @@
|
||||
<div id="welcome" ref="welcome" @scroll="loadNextPage">
|
||||
<div id="welcomeLeft" class="flex-column grow">
|
||||
<div id="banner" class="center flex-column shadow">
|
||||
<h1>WebPlay</h1>
|
||||
<p>
|
||||
<b>{{ serverInfo.stats.tracks.toLocaleString("de-DE") }}</b> Tracks
|
||||
and
|
||||
<b>{{ serverInfo.stats.videos.toLocaleString("de-DE") }}</b> Videos |
|
||||
Users:
|
||||
<b>{{ serverInfo.stats.users }}</b>
|
||||
</p>
|
||||
<div id="collage">
|
||||
<svg width="100%" height="100%" viewBox="20 40 600 100">
|
||||
<g>
|
||||
<animateTransform id="animY1" attributeName="transform" type="translate" begin="0s; animY2.end" from="0 -140" to="-20 -60" dur="30s" />
|
||||
<animateTransform id="animY2" attributeName="transform" type="translate" begin="animY1.end" from="-20 -60" to="0 -140" dur="30s" />
|
||||
|
||||
<image :xlink:href="item.covers.cover64" :x="Math.floor(i / 6) * 64" :y="i % 6 * 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
|
||||
and
|
||||
<b>{{ serverInfo.stats.videos.toLocaleString("de-DE") }}</b> Videos |
|
||||
Users:
|
||||
<b>{{ serverInfo.stats.users }}</b>
|
||||
</p>
|
||||
</div>
|
||||
</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"
|
||||
/>
|
||||
<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", 60);
|
||||
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>
|
||||
Loading…
Reference in New Issue
Block a user