improve playlist page when not logged in

This commit is contained in:
Bnyro 2022-11-10 18:59:02 +01:00
parent ee03ac2c34
commit a630d04c2c
2 changed files with 47 additions and 18 deletions

View file

@ -3,6 +3,7 @@
<hr />
<div v-if="authenticated">
<button v-t="'actions.create_playlist'" class="btn" @click="createPlaylist" />
<div class="video-grid">
@ -17,25 +18,52 @@
/>
</router-link>
<div class="pp-video-card-buttons flex gap-15rem children:m-0" style="flex-wrap: wrap">
<button class="thumbnail-overlay thumbnail-right" v-text="`${playlist.videos} ${$t('video.videos')}`" />
<button class="pp-color h-auto" @click="renamePlaylist(playlist.id)" v-t="'actions.rename_playlist'" />
<button class="pp-color h-auto" @click="deletePlaylist(playlist.id)" v-t="'actions.delete_playlist'" />
<button
class="thumbnail-overlay thumbnail-right"
v-text="`${playlist.videos} ${$t('video.videos')}`"
/>
<button
class="pp-color h-auto"
@click="renamePlaylist(playlist.id)"
v-t="'actions.rename_playlist'"
/>
<button
class="pp-color h-auto"
@click="deletePlaylist(playlist.id)"
v-t="'actions.delete_playlist'"
/>
</div>
</div>
</div>
</div>
<div v-else class="text-center h-[65vh] flex flex-col justify-center items-center">
<h1 v-t="'actions.not_logged_in'"></h1>
<div class="flex mt-100 items-center children:(mx-30)">
<button @click="showLoginModal = true" v-t="'titles.account'"></button>
<a class="btn h-min!" href="/" v-t="'actions.back_to_home'"></a>
</div>
</div>
<br />
<LoginModal v-if="showLoginModal" @close="showLoginModal = !showLoginModal" />
</template>
<script>
import LoginModal from "./LoginModal.vue";
export default {
components: {
LoginModal,
},
data() {
return {
playlists: [],
showLoginModal: false,
};
},
mounted() {
if (this.authenticated) this.fetchPlaylists();
else this.$router.push("/login");
else this.showLoginModal = true;
},
activated() {
document.title = this.$t("titles.playlists") + " - Piped";

View file

@ -116,7 +116,8 @@
"status_page": "Status",
"source_code": "Source code",
"instance_donations": "Instance donations",
"reply_count": "{count} replies"
"reply_count": "{count} replies",
"not_logged_in": "Not logged in yet."
},
"comment": {
"pinned_by": "Pinned by {author}",