0
0
Fork 0
mirror of https://github.com/VueTubeApp/VueTube synced 2024-11-25 20:55:17 +00:00

Merge branch 'main' of https://github.com/Frontesque/VueTube into working

This commit is contained in:
Alex 2022-04-20 12:55:17 +12:00
commit 92729a4d96
7 changed files with 275 additions and 178 deletions

View file

@ -3,6 +3,11 @@
v-model="tabSelection" v-model="tabSelection"
shift shift
class="bottomNav py-4 transparent" class="bottomNav py-4 transparent"
:style="
$vuetify.theme.dark
? 'border-top: 1px solid var(--v-background-lighten1) !important;'
: 'border-top: 1px solid var(--v-background-darken1) !important;'
"
> >
<v-btn <v-btn
v-for="(item, i) in tabs" v-for="(item, i) in tabs"

View file

@ -1,21 +1,46 @@
<template> <template>
<div> <div>
<video <video
ref="player"
controls controls
autoplay autoplay
:src="vidSrc" :src="vidSrc"
width="100%" width="100%"
style="max-height: 50vh; display: block"
@webkitfullscreenchange="handleFullscreenChange" @webkitfullscreenchange="handleFullscreenChange"
ref="player"
style="max-height: 50vh"
/> />
<v-progress-linear
active
background-color="primary"
background-opacity="0.5"
:buffer-value="buffered"
color="primary"
height="3"
query
:value="percentage"
/>
<!-- <v-slider v-model="value" step="0"></v-slider> -->
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: ["vidSrc"], props: ["vidSrc"],
data() {
return {
percentage: 0,
buffered: 0,
};
},
mounted() {
let vid = this.$refs.player;
vid.ontimeupdate = () => {
this.percentage = (vid.currentTime / vid.duration) * 100;
};
vid.addEventListener("progress", () => {
this.buffered = (vid.buffered.end(0) / vid.duration) * 100;
});
},
methods: { methods: {
handleFullscreenChange() { handleFullscreenChange() {
if (document.fullscreenElement === this.$refs.player) { if (document.fullscreenElement === this.$refs.player) {

View file

@ -193,14 +193,15 @@ export default {
} }
.scroll-y { .scroll-y {
overflow-y: scroll !important; /* has to be scroll, not auto */ overflow-y: scroll !important;
/* has to be scroll, not auto */
overflow-x: hidden !important; overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important; -webkit-overflow-scrolling: touch !important;
} }
html, html,
body { body {
background: var(--v-background-base); background: var(--v-background-base);
overflow: hidden; /* overflow-x: hidden; */
} }
p, p,

View file

@ -34,9 +34,9 @@ export default {
}, },
}, },
data: { data: () => ({
loading: false, loading: false,
}, }),
methods: { methods: {
paginate() { paginate() {

View file

@ -60,7 +60,7 @@ export default {
}; };
</script> </script>
<style scoped> <style>
.container { .container {
display: block; display: block;
position: absolute; position: absolute;
@ -104,4 +104,26 @@ export default {
animation: fadein 0.5s ease 1 forwards; animation: fadein 0.5s ease 1 forwards;
} }
} }
/* page transition */
.slide-up-enter-active,
.slide-up-leave-active,
.slide-down-enter-active,
.slide-down-leave-active {
transition-duration: 0.1s;
transition-property: opacity, transform;
/* overflow: hidden; */
}
.slide-up-enter,
.slide-down-leave-active {
opacity: 0;
transform: translateY(3rem);
}
.slide-up-leave-active,
.slide-down-enter {
opacity: 0;
transform: translateY(-1rem);
}
</style> </style>

View file

@ -2,11 +2,43 @@
<div class="d-flex flex-column justify-end" style="min-height: 100%"> <div class="d-flex flex-column justify-end" style="min-height: 100%">
<v-card <v-card
flat flat
class="px-6 ma-4 mt-2 background" class="mb-4 background"
style="
transition-duration: 0.3s;
transition-property: border-radius;
overflow: hidden;
"
:style="{
borderRadius: `${roundTweak / 2}rem`,
margin: $store.state.tweaks.roundTweak > 0 ? '0 1rem' : '0',
}"
>
<div
v-for="item in list"
:key="item"
@click="list.pop(item)"
class="pa-4 mb-1 background text-center rounded-sm"
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
>
{{ item }}
</div>
<v-card-title
v-ripple
class="pa-4 background primary--text text--lighten-2 rounded-sm"
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
@click="list.push('x')"
>
+++++++++++++++++++++++++++++
</v-card-title>
</v-card>
<v-card
flat
class="px-6 background"
style="transition-duration: 0.3s; transition-property: border-radius" style="transition-duration: 0.3s; transition-property: border-radius"
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'" :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
:style="{ :style="{
borderRadius: `${roundTweak / 2}rem`, borderRadius: `${roundTweak / 2}rem`,
margin: $store.state.tweaks.roundTweak > 0 ? '0 1rem' : '0',
}" }"
> >
<h3 class="mt-5">Rounded Corners</h3> <h3 class="mt-5">Rounded Corners</h3>
@ -42,6 +74,9 @@
<script> <script>
export default { export default {
data: () => ({
list: ["x", "x"],
}),
computed: { computed: {
roundTweak: { roundTweak: {
get() { get() {

View file

@ -1,16 +1,21 @@
<template> <template>
<div class="background" id="watch-body"> <div class="background" id="watch-body">
<div id="player-container"> <div id="player-container">
<!-- Stock Player --> <v-btn text style="position: fixed; z-index: 69420" to="home">
<videoPlayer <v-icon>mdi-chevron-down</v-icon>
:vid-src="vidSrc" </v-btn>
ref="player"
v-if="useBetaPlayer !== 'true'"
/>
<!-- VueTube Player V1 --> <!-- VueTube Player V1 -->
<vuetubePlayer :sources="sources" v-if="useBetaPlayer === 'true'" /> <vuetubePlayer :sources="sources" v-if="useBetaPlayer === 'true'" />
<!-- Stock Player -->
<videoPlayer
id="player"
ref="player"
v-touch="{ down: () => $router.push('/home') }"
class="background"
:vid-src="vidSrc"
/>
</div> </div>
<div <div
v-bind:class="{ v-bind:class="{
'overflow-y-auto': !showComments, 'overflow-y-auto': !showComments,
@ -18,40 +23,45 @@
}" }"
id="content-container" id="content-container"
> >
<v-card v-if="loaded" class="ml-2 mr-2 background" flat> <v-card v-if="loaded" class="ml-2 mr-2 background rounded-0" flat>
<div
v-ripple
class="d-flex justify-space-between align-start px-3 pt-3"
@click="showMore = !showMore"
>
<div class="d-flex flex-column">
<v-card-title <v-card-title
class="mt-2" class="pa-0"
style=" style="font-size: 0.95rem; line-height: 1.15rem"
padding-top: 0;
padding-bottom: 0;
font-size: 0.95rem;
line-height: 1rem;
"
v-text="video.title" v-text="video.title"
v-emoji v-emoji
/> />
<v-card-text> <v-card-text
style="font-size: 0.75rem"
class="background--text pa-0"
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
>
<div style="margin-bottom: 1rem"> <div style="margin-bottom: 1rem">
<template <template
v-for="text in video.metadata.contents.find( v-for="text in video.metadata.contents.find(
(content) => content.slimVideoInformationRenderer (content) => content.slimVideoInformationRenderer
).slimVideoInformationRenderer.collapsedSubtitle.runs" ).slimVideoInformationRenderer.collapsedSubtitle.runs"
>{{ text.text }}</template >{{ text.text }}
> </template>
</v-card-text>
</div> </div>
<v-icon class="ml-4" v-if="showMore">mdi-chevron-up</v-icon>
<!-- Scrolling Div For Interactions ---> <v-icon class="ml-4" v-else>mdi-chevron-down</v-icon>
<div style="display: flex; margin-bottom: 1em"> </div>
<v-list-item <div class="d-flex">
<v-btn
v-for="(item, index) in interactions" v-for="(item, index) in interactions"
:key="index" :key="index"
style="padding: 0; flex: 0 0 20%"
>
<v-btn
text text
class="vertical-button" fab
style="padding: 0; margin: 0" class="vertical-button ma-1"
elevation="0" elevation="0"
style="width: 4.2rem !important; height: 4.2rem !important"
:disabled="item.disabled" :disabled="item.disabled"
@click="callMethodByName(item.actionName)" @click="callMethodByName(item.actionName)"
> >
@ -62,17 +72,9 @@
v-text="item.value || item.name" v-text="item.value || item.name"
/> />
</v-btn> </v-btn>
</v-list-item>
<v-spacer />
<v-btn text @click="showMore = !showMore">
<v-icon v-if="showMore">mdi-chevron-up</v-icon>
<v-icon v-else>mdi-chevron-down</v-icon>
</v-btn>
</div>
<!-- End Scrolling Div For Interactions ---> <!-- End Scrolling Div For Interactions --->
<!-- <hr /> --> <!-- <hr /> -->
</v-card-text> </div>
<!-- <v-bottom-sheet <!-- <v-bottom-sheet
v-model="showMore" v-model="showMore"
color="background" color="background"
@ -89,6 +91,7 @@
/> />
</v-sheet> </v-sheet>
</v-bottom-sheet> --> </v-bottom-sheet> -->
<!-- <v-bottom-sheet v-model="share" color="background" style="z-index: 9999999"> <!-- <v-bottom-sheet v-model="share" color="background" style="z-index: 9999999">
<v-sheet style="padding: 1em"> <v-sheet style="padding: 1em">
<div class="scroll-y"> <div class="scroll-y">
@ -101,7 +104,10 @@
<!-- Channel Bar --> <!-- Channel Bar -->
<div class="channel-container" v-if="loaded"> <div class="channel-container" v-if="loaded">
<v-card class="channel-section background" :to="video.channelUrl"> <v-card
class="channel-section background px-3 rounded-0"
:to="video.channelUrl"
>
<div id="details"> <div id="details">
<div class="avatar-link mr-3"> <div class="avatar-link mr-3">
<v-img class="avatar-thumbnail" :src="video.channelImg" /> <v-img class="avatar-thumbnail" :src="video.channelImg" />
@ -128,7 +134,7 @@
</div> </div>
<!-- Description --> <!-- Description -->
<div class="description-container" v-if="showMore"> <div v-if="showMore">
<div class="scroll-y ma-4"> <div class="scroll-y ma-4">
<slim-video-description-renderer <slim-video-description-renderer
:render="video.renderedData.description" :render="video.renderedData.description"
@ -138,13 +144,11 @@
</div> </div>
<!-- Comments --> <!-- Comments -->
<div class="comment-container" v-if="loaded && video.commentData"> <div
<v-btn v-if="loaded && video.commentData"
class="background comment-renderer text-none"
@click="showComments = !showComments" @click="showComments = !showComments"
block
large
> >
<v-card flat class="background comment-renderer">
<v-text class="comment-count keep-spaces"> <v-text class="comment-count keep-spaces">
<template v-for="text in video.commentData.headerText.runs"> <template v-for="text in video.commentData.headerText.runs">
<template v-if="text.bold"> <template v-if="text.bold">
@ -153,8 +157,9 @@
<template v-else>{{ text.text }}</template> <template v-else>{{ text.text }}</template>
</template> </template>
</v-text> </v-text>
<v-icon>mdi-unfold-more-horizontal</v-icon> <v-icon v-if="showComments">mdi-unfold-less-horizontal</v-icon>
</v-btn> <v-icon v-else>mdi-unfold-more-horizontal</v-icon>
</v-card>
<v-divider /> <v-divider />
</div> </div>
@ -187,7 +192,6 @@
</div> </div>
<item-section-renderer v-else :render="recommends" /> <item-section-renderer v-else :render="recommends" />
</div> </div>
</div>
</template> </template>
<script> <script>
@ -211,7 +215,12 @@ export default {
SwipeableBottomSheet, SwipeableBottomSheet,
mainCommentRenderer, mainCommentRenderer,
}, },
layout: "empty",
// transition(to) { // TODO: fix layout switching
// return to.name == "watch"
// ? { name: "slide-up", mode: "" }
// : { name: "slide-down", mode: "" };
// },
data: function () { data: function () {
return this.initializeState(); return this.initializeState();
}, },
@ -329,7 +338,6 @@ export default {
fmt: 243, fmt: 243,
rtn: Math.floor(Date.now() / 1000) - this.startTime, rtn: Math.floor(Date.now() / 1000) - this.startTime,
rt: Math.floor(Date.now() / 1000) - this.startTime, rt: Math.floor(Date.now() / 1000) - this.startTime,
fmt: 243,
muted: 0, muted: 0,
}, },
this.playbackTracking.videostatsPlaybackUrl.baseUrl this.playbackTracking.videostatsPlaybackUrl.baseUrl
@ -393,6 +401,7 @@ export default {
<style> <style>
#watch-body { #watch-body {
height: 100%; height: 100%;
max-height: 100vh;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;