TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

improve playlist page when not logged in

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/components/PlaylistsPage.vue
View file

@ -3,39 +3,67 @@
<hr /> <hr />
<button v-t="'actions.create_playlist'" class="btn" @click="createPlaylist" /> <div v-if="authenticated">
<button v-t="'actions.create_playlist'" class="btn" @click="createPlaylist" />
<div class="video-grid"> <div class="video-grid">
<div v-for="playlist in playlists" :key="playlist.id" class="efy_trans_filter"> <div v-for="playlist in playlists" :key="playlist.id" class="efy_trans_filter">
<router-link :to="`/playlist?list=${playlist.id}`"> <router-link :to="`/playlist?list=${playlist.id}`">
<img class="w-full" :src="playlist.thumbnail" alt="thumbnail" /> <img class="w-full" :src="playlist.thumbnail" alt="thumbnail" />
<p <p
style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
class="flex link" class="flex link"
:title="playlist.name" :title="playlist.name"
v-text="playlist.name" v-text="playlist.name"
/> />
</router-link> </router-link>
<div class="pp-video-card-buttons flex gap-15rem children:m-0" style="flex-wrap: wrap"> <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
<button class="pp-color h-auto" @click="renamePlaylist(playlist.id)" v-t="'actions.rename_playlist'" /> class="thumbnail-overlay thumbnail-right"
<button class="pp-color h-auto" @click="deletePlaylist(playlist.id)" v-t="'actions.delete_playlist'" /> 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>
</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 /> <br />
<LoginModal v-if="showLoginModal" @close="showLoginModal = !showLoginModal" />
</template> </template>
<script> <script>
import LoginModal from "./LoginModal.vue";
export default { export default {
components: {
LoginModal,
},
data() { data() {
return { return {
playlists: [], playlists: [],
showLoginModal: false,
}; };
}, },
mounted() { mounted() {
if (this.authenticated) this.fetchPlaylists(); if (this.authenticated) this.fetchPlaylists();
else this.$router.push("/login"); else this.showLoginModal = true;
}, },
activated() { activated() {
document.title = this.$t("titles.playlists") + " - Piped"; document.title = this.$t("titles.playlists") + " - Piped";

3
src/locales/en.json
View file

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