mirror of
https://github.com/TeamPiped/Piped.git
synced 2025-10-14 11:28:22 +00:00
Merge branch 'master' of github.com:Bnyro/Piped
This commit is contained in:
Bnyro
@@ -9,11 +9,7 @@
|
||||
v-for="(chapter, index) in chapters"
|
||||
@click="$emit('seek', chapter.start)"
|
||||
class="chapter-vertical"
|
||||
:class="
|
||||
playerPosition >= chapter.start && playerPosition < chapters[index + 1].start
|
||||
? 'chapter-vertical bg-red-500/50'
|
||||
: 'chapter-vertical'
|
||||
"
|
||||
:class="{ 'bg-red-500/50': isCurrentChapter(index) }"
|
||||
>
|
||||
<div class="flex">
|
||||
<span class="mt-5 mr-2 text-current" v-text="index + 1" />
|
||||
@@ -31,11 +27,8 @@
|
||||
:key="chapter.start"
|
||||
v-for="(chapter, index) in chapters"
|
||||
@click="$emit('seek', chapter.start)"
|
||||
:class="
|
||||
playerPosition >= chapter.start && playerPosition < chapters[index + 1].start
|
||||
? 'chapter bg-red-500/50'
|
||||
: 'chapter'
|
||||
"
|
||||
class="chapter"
|
||||
:class="{ 'bg-red-500/50': isCurrentChapter(index) }"
|
||||
>
|
||||
<img :src="chapter.image" :alt="chapter.title" />
|
||||
<div class="m-1 flex">
|
||||
@@ -73,7 +66,7 @@
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from "vue";
|
||||
|
||||
defineProps({
|
||||
const props = defineProps({
|
||||
chapters: Object,
|
||||
mobileLayout: {
|
||||
type: Boolean,
|
||||
@@ -85,5 +78,12 @@ defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const isCurrentChapter = index => {
|
||||
return (
|
||||
props.playerPosition >= props.chapters[index].start &&
|
||||
props.playerPosition < (props.chapters[index + 1]?.start ?? Infinity)
|
||||
);
|
||||
};
|
||||
|
||||
defineEmits(["seek"]);
|
||||
</script>
|
||||
|
||||
@@ -26,33 +26,67 @@
|
||||
@blur="onInputBlur"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1 flex justify-end">
|
||||
<ul class="flex text-1xl children:pl-3">
|
||||
<li v-if="shouldShowTrending">
|
||||
<router-link v-t="'titles.trending'" to="/trending" />
|
||||
</li>
|
||||
<li>
|
||||
<router-link v-t="'titles.preferences'" to="/preferences" />
|
||||
</li>
|
||||
<li v-if="shouldShowLogin">
|
||||
<router-link v-t="'titles.login'" to="/login" />
|
||||
</li>
|
||||
<li v-if="shouldShowLogin">
|
||||
<router-link v-t="'titles.register'" to="/register" />
|
||||
</li>
|
||||
<li v-if="shouldShowHistory">
|
||||
<router-link v-t="'titles.history'" to="/history" />
|
||||
</li>
|
||||
<li v-if="authenticated">
|
||||
<router-link v-t="'titles.playlists'" to="/playlists" />
|
||||
</li>
|
||||
<li v-if="authenticated">
|
||||
<router-link v-t="'titles.feed'" to="/feed" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- three vertical lines for toggling the hamburger menu on mobile -->
|
||||
<button class="md:hidden flex flex-col justify-end mr-3" @click="showTopNav = !showTopNav">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
</button>
|
||||
<!-- navigation bar for large screen devices -->
|
||||
<ul class="hidden md:(flex-1 flex justify-end flex text-1xl children:pl-3)">
|
||||
<li v-if="shouldShowTrending">
|
||||
<router-link v-t="'titles.trending'" to="/trending" />
|
||||
</li>
|
||||
<li>
|
||||
<router-link v-t="'titles.preferences'" to="/preferences" />
|
||||
</li>
|
||||
<li v-if="shouldShowLogin">
|
||||
<router-link v-t="'titles.login'" to="/login" />
|
||||
</li>
|
||||
<li v-if="shouldShowLogin">
|
||||
<router-link v-t="'titles.register'" to="/register" />
|
||||
</li>
|
||||
<li v-if="shouldShowHistory">
|
||||
<router-link v-t="'titles.history'" to="/history" />
|
||||
</li>
|
||||
<li v-if="authenticated">
|
||||
<router-link v-t="'titles.playlists'" to="/playlists" />
|
||||
</li>
|
||||
<li v-if="authenticated && !shouldShowTrending">
|
||||
<router-link v-t="'titles.feed'" to="/feed" />
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="w-full md:hidden">
|
||||
<!-- navigation bar for mobile devices -->
|
||||
<ul
|
||||
v-if="showTopNav"
|
||||
class="flex flex-col justify-center items-end mb-4 children:(my-0.5 mr-5)"
|
||||
@click="showTopNav = false"
|
||||
>
|
||||
<li v-if="shouldShowTrending">
|
||||
<router-link v-t="'titles.trending'" to="/trending" />
|
||||
</li>
|
||||
<li>
|
||||
<router-link v-t="'titles.preferences'" to="/preferences" />
|
||||
</li>
|
||||
<li v-if="shouldShowLogin">
|
||||
<router-link v-t="'titles.login'" to="/login" />
|
||||
</li>
|
||||
<li v-if="shouldShowLogin">
|
||||
<router-link v-t="'titles.register'" to="/register" />
|
||||
</li>
|
||||
<li v-if="shouldShowHistory">
|
||||
<router-link v-t="'titles.history'" to="/history" />
|
||||
</li>
|
||||
<li v-if="authenticated">
|
||||
<router-link v-t="'titles.playlists'" to="/playlists" />
|
||||
</li>
|
||||
<li v-if="authenticated && !shouldShowTrending">
|
||||
<router-link v-t="'titles.feed'" to="/feed" />
|
||||
</li>
|
||||
</ul>
|
||||
<!-- search suggestions for mobile devices -->
|
||||
<div class="w-{full - 4} md:hidden mx-2">
|
||||
<input
|
||||
v-model="searchText"
|
||||
class="input !h-10 !w-full"
|
||||
@@ -85,6 +119,7 @@ export default {
|
||||
return {
|
||||
searchText: "",
|
||||
suggestionsVisible: false,
|
||||
showTopNav: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
@@ -652,4 +652,19 @@ export default {
|
||||
.shaka-video-container:-webkit-full-screen {
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
/* captions style */
|
||||
.shaka-text-wrapper * {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.shaka-text-wrapper > span > span {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* apply to all spans that don't include multiple other spans to avoid the style being applied to the text container too when the subtitles are two lines */
|
||||
.shaka-text-wrapper > span > span *:first-child:last-child {
|
||||
background-color: rgba(0, 0, 0, 0.6) !important;
|
||||
padding: 0.09em 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
<!-- Verified Badge -->
|
||||
<font-awesome-icon class="ml-1" v-if="video.uploaderVerified" icon="check" />
|
||||
</div>
|
||||
<div class="relative ml-auto children:mx-2">
|
||||
<div class="flex relative ml-auto children:mx-1">
|
||||
<button class="btn" v-if="authenticated" @click="showModal = !showModal">
|
||||
{{ $t("actions.add_to_playlist") }}<font-awesome-icon class="ml-1" icon="circle-plus" />
|
||||
</button>
|
||||
@@ -89,8 +89,8 @@
|
||||
/>
|
||||
</div>
|
||||
<PlaylistAddModal v-if="showModal" :video-id="getVideoId()" @close="showModal = !showModal" />
|
||||
<div class="flex <lg:basis-7/12">
|
||||
<div class="self-center children:mr-1">
|
||||
<div class="flex">
|
||||
<div class="self-center children:mr-1 my-1">
|
||||
<!-- RSS Feed button -->
|
||||
<a
|
||||
aria-label="RSS feed"
|
||||
@@ -112,7 +112,7 @@
|
||||
</i18n-t>
|
||||
</a>
|
||||
<!-- only visible on small screens -->
|
||||
<a :href="`https://youtu.be/${getVideoId()}`" class="btn sm:hidden">
|
||||
<a :href="`https://youtu.be/${getVideoId()}`" class="btn lg:hidden">
|
||||
<font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
|
||||
</a>
|
||||
<!-- LBRY -->
|
||||
|
||||
Reference in New Issue
Block a user