mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-08-14 23:57:27 +00:00
improve playlist page when not logged in
This commit is contained in:
parent
ee03ac2c34
commit
a630d04c2c
2 changed files with 47 additions and 18 deletions
|
@ -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";
|
||||
|
|
|
@ -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}",
|
||||
|
|
Loading…
Reference in a new issue