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 />
<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 v-for="playlist in playlists" :key="playlist.id" class="efy_trans_filter">
<router-link :to="`/playlist?list=${playlist.id}`">
<img class="w-full" :src="playlist.thumbnail" alt="thumbnail" />
<p
style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
class="flex link"
:title="playlist.name"
v-text="playlist.name"
/>
</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'" />
<div class="video-grid">
<div v-for="playlist in playlists" :key="playlist.id" class="efy_trans_filter">
<router-link :to="`/playlist?list=${playlist.id}`">
<img class="w-full" :src="playlist.thumbnail" alt="thumbnail" />
<p
style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
class="flex link"
:title="playlist.name"
v-text="playlist.name"
/>
</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'"
/>
</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";

3
src/locales/en.json
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}",