mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-08-14 23:57:27 +00:00
Improve Margins and add Theater Mode
This commit is contained in:
Malte Jürgens
parent
998b9f2174
commit
45c5632d81
7 changed files with 66 additions and 10 deletions
20
src/App.vue
20
src/App.vue
|
|
@ -63,6 +63,21 @@ export default {
|
|||
}
|
||||
})();
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler(to) {
|
||||
console.log(to.name);
|
||||
// Pages that should be displayed without margin at the sides
|
||||
if (
|
||||
["Trending", "SearchResults", "Playlist", "Channel", "Feed", "Watch History", "Playlists"].includes(
|
||||
to.name,
|
||||
)
|
||||
)
|
||||
document.body.classList.add("wide");
|
||||
else document.body.classList.remove("wide");
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -207,4 +222,9 @@ h2 {
|
|||
.auto .link-secondary {
|
||||
@apply dark:(text-gray-300 hover:(text-gray-400 underline underline-gray-400));
|
||||
}
|
||||
|
||||
body:not(.wide) {
|
||||
max-width: 1250px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div class="comment flex mt-1.5">
|
||||
<div class="comment flex mb-5">
|
||||
<img
|
||||
:src="comment.thumbnail"
|
||||
class="comment-avatar rounded-full w-12 h-12"
|
||||
class="comment-avatar rounded-full w-12 h-12 mr-1 lg:mr-3"
|
||||
height="48"
|
||||
width="48"
|
||||
loading="lazy"
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<template v-if="showingReplies">
|
||||
<div @click="hideReplies" class="cursor-pointer">
|
||||
<div @click="hideReplies" class="cursor-pointer mb-3">
|
||||
<a v-t="'actions.hide_replies'" />
|
||||
<font-awesome-icon class="ml-1.5" icon="level-up-alt" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -124,6 +124,16 @@
|
|||
@change="onChange($event)"
|
||||
/>
|
||||
<br />
|
||||
<label for="chkDefaultTheaterMode"><strong v-t="'actions.default_theater_mode'" /></label>
|
||||
<br />
|
||||
<input
|
||||
id="chkDefaultTheaterMode"
|
||||
v-model="defaultTheaterMode"
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
@change="onChange($event)"
|
||||
/>
|
||||
<br />
|
||||
<label for="chkStoreWatchHistory"><strong v-t="'actions.store_watch_history'" /></label>
|
||||
<br />
|
||||
<input
|
||||
|
|
@ -227,6 +237,7 @@ export default {
|
|||
defaultHomepage: "trending",
|
||||
showComments: true,
|
||||
minimizeDescription: false,
|
||||
defaultTheaterMode: false,
|
||||
watchHistory: false,
|
||||
selectedLanguage: "en",
|
||||
languages: [
|
||||
|
|
@ -356,6 +367,7 @@ export default {
|
|||
this.defaultHomepage = this.getPreferenceString("homepage", "trending");
|
||||
this.showComments = this.getPreferenceBoolean("comments", true);
|
||||
this.minimizeDescription = this.getPreferenceBoolean("minimizeDescription", false);
|
||||
this.defaultTheaterMode = this.getPreferenceBoolean("defaultTheaterMode", false);
|
||||
this.watchHistory = this.getPreferenceBoolean("watchHistory", false);
|
||||
this.selectedLanguage = this.getPreferenceString("hl", this.defaultLangage);
|
||||
this.enabledCodecs = this.getPreferenceString("enabledCodecs", "vp9,avc").split(",");
|
||||
|
|
@ -410,6 +422,7 @@ export default {
|
|||
localStorage.setItem("homepage", this.defaultHomepage);
|
||||
localStorage.setItem("comments", this.showComments);
|
||||
localStorage.setItem("minimizeDescription", this.minimizeDescription);
|
||||
localStorage.setItem("defaultTheaterMode", this.defaultTheaterMode);
|
||||
localStorage.setItem("watchHistory", this.watchHistory);
|
||||
localStorage.setItem("hl", this.selectedLanguage);
|
||||
localStorage.setItem("enabledCodecs", this.enabledCodecs.join(","));
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="mb-6">
|
||||
<router-link
|
||||
:to="{
|
||||
path: '/watch',
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
<div>
|
||||
<p
|
||||
style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
|
||||
class="my-2 overflow-hidden flex link"
|
||||
class="my-1 overflow-hidden flex link"
|
||||
:title="video.title"
|
||||
v-text="video.title"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -63,6 +63,15 @@
|
|||
>
|
||||
<font-awesome-icon :icon="isListening ? 'tv' : 'headphones'" />
|
||||
</router-link>
|
||||
<button
|
||||
class="btn"
|
||||
:title="
|
||||
theaterMode ? this.$t('actions.exit_theater_mode') : this.$t('actions.enter_theater_mode')
|
||||
"
|
||||
v-on:click="theaterMode = !theaterMode"
|
||||
>
|
||||
<font-awesome-icon icon="panorama" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -117,14 +126,14 @@
|
|||
|
||||
<hr />
|
||||
|
||||
<div class="grid xl:grid-cols-5 sm:grid-cols-4 grid-cols-1">
|
||||
<div v-if="!comments" class="xl:col-span-4 sm:col-span-3">
|
||||
<div class="grid sm:grid-cols-4 grid-cols-1 gap-6">
|
||||
<div v-if="!comments" class="col-span-3">
|
||||
<p class="text-center mt-8">Comments are loading...</p>
|
||||
</div>
|
||||
<div v-else-if="comments.disabled" class="xl:col-span-4 sm:col-span-3">
|
||||
<div v-else-if="comments.disabled" class="col-span-3">
|
||||
<p class="text-center mt-8">Comments are turned off.</p>
|
||||
</div>
|
||||
<div v-else ref="comments" class="xl:col-span-4 sm:col-span-3">
|
||||
<div v-else ref="comments" class="col-span-3">
|
||||
<CommentItem
|
||||
v-for="comment in comments.comments"
|
||||
:key="comment.commentId"
|
||||
|
|
@ -203,6 +212,7 @@ export default {
|
|||
smallViewQuery: smallViewQuery,
|
||||
smallView: smallViewQuery.matches,
|
||||
showModal: false,
|
||||
theaterMode: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -268,6 +278,7 @@ export default {
|
|||
this.active = true;
|
||||
this.selectedAutoPlay = this.getPreferenceBoolean("autoplay", false);
|
||||
this.showDesc = !this.getPreferenceBoolean("minimizeDescription", false);
|
||||
this.theaterMode = this.getPreferenceBoolean("defaultTheaterMode", false);
|
||||
if (this.video.duration) {
|
||||
document.title = this.video.title + " - Piped";
|
||||
this.$refs.videoPlayer.loadVideo();
|
||||
|
|
@ -276,6 +287,7 @@ export default {
|
|||
},
|
||||
deactivated() {
|
||||
this.active = false;
|
||||
document.body.classList.remove("theater-mode");
|
||||
window.removeEventListener("scroll", this.handleScroll);
|
||||
},
|
||||
unmounted() {
|
||||
|
|
@ -415,5 +427,11 @@ export default {
|
|||
this.$refs.videoPlayer.seek(time);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
theaterMode() {
|
||||
if (this.theaterMode) document.body.classList.add("wide");
|
||||
else document.body.classList.remove("wide");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -80,7 +80,10 @@
|
|||
"delete_playlist": "Delete Playlist",
|
||||
"select_playlist": "Select a Playlist",
|
||||
"delete_playlist_confirm": "Are you sure you want to delete this playlist?",
|
||||
"please_select_playlist": "Please select a playlist"
|
||||
"please_select_playlist": "Please select a playlist",
|
||||
"enter_theater_mode": "Enter Theater Mode",
|
||||
"exit_theater_mode": "Exit Theater Mode",
|
||||
"default_theater_mode": "Use the Theater Mode by default"
|
||||
},
|
||||
"comment": {
|
||||
"pinned_by": "Pinned by"
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import {
|
|||
faCirclePlus,
|
||||
faCircleMinus,
|
||||
faXmark,
|
||||
faPanorama,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
|
|
@ -40,6 +41,7 @@ library.add(
|
|||
faCirclePlus,
|
||||
faCircleMinus,
|
||||
faXmark,
|
||||
faPanorama,
|
||||
);
|
||||
|
||||
import router from "@/router/router.js";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue