mirror of https://github.com/VueTubeApp/VueTube
commit
4d905436da
|
@ -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"
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -34,9 +34,9 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
data: {
|
data: () => ({
|
||||||
loading: false,
|
loading: false,
|
||||||
},
|
}),
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
paginate() {
|
paginate() {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -1,51 +1,59 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="background" id="watch-body">
|
<div class="background">
|
||||||
<div class="player-container">
|
<v-btn text style="position: fixed; z-index: 69420" to="home">
|
||||||
<!-- Stock Player -->
|
<v-icon>mdi-chevron-down</v-icon>
|
||||||
<videoPlayer
|
</v-btn>
|
||||||
:vid-src="vidSrc"
|
|
||||||
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'" />
|
||||||
</div>
|
<!-- Stock Player -->
|
||||||
<div class="content-container overflow-y-auto">
|
<videoPlayer
|
||||||
<v-card v-if="loaded" class="ml-2 mr-2 background" flat>
|
id="player"
|
||||||
|
ref="player"
|
||||||
|
v-touch="{ down: () => $router.push('/home') }"
|
||||||
|
style="position: sticky; top: 0; z-index: 42069"
|
||||||
|
class="background"
|
||||||
|
:vid-src="vidSrc"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!---->
|
||||||
|
<v-card v-if="loaded" class="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
|
||||||
<div style="margin-bottom: 1rem">
|
style="font-size: 0.75rem"
|
||||||
|
class="background--text pa-0"
|
||||||
|
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||||
|
>
|
||||||
<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)"
|
||||||
>
|
>
|
||||||
|
@ -56,17 +64,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"
|
||||||
|
@ -83,6 +83,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">
|
||||||
|
@ -95,7 +96,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" />
|
||||||
|
@ -122,7 +126,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"
|
||||||
|
@ -133,7 +137,6 @@
|
||||||
|
|
||||||
<!-- Comments -->
|
<!-- Comments -->
|
||||||
<div
|
<div
|
||||||
class="comment-container"
|
|
||||||
v-if="loaded && video.commentData"
|
v-if="loaded && video.commentData"
|
||||||
@click="showComments = !showComments"
|
@click="showComments = !showComments"
|
||||||
>
|
>
|
||||||
|
@ -146,27 +149,15 @@
|
||||||
<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-icon v-else>mdi-unfold-more-horizontal</v-icon>
|
||||||
</v-card>
|
</v-card>
|
||||||
<v-divider />
|
<v-divider />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<v-dialog
|
<v-card v-if="showComments">
|
||||||
v-model="showComments"
|
|
||||||
fullscreen
|
|
||||||
hide-overlay
|
|
||||||
transition="dialog-bottom-transition"
|
|
||||||
>
|
|
||||||
<v-card>
|
|
||||||
<v-toolbar dark color="background">
|
|
||||||
<v-btn icon dark @click="showComments = false">
|
|
||||||
<v-icon>mdi-close</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
<v-toolbar-title class="font-weight-bold">Comments</v-toolbar-title>
|
|
||||||
</v-toolbar>
|
|
||||||
<v-subheader>Hello World</v-subheader>
|
<v-subheader>Hello World</v-subheader>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-dialog>
|
|
||||||
|
|
||||||
<!-- Related Videos -->
|
<!-- Related Videos -->
|
||||||
<div class="loaders" v-if="!loaded">
|
<div class="loaders" v-if="!loaded">
|
||||||
|
@ -177,7 +168,6 @@
|
||||||
</div>
|
</div>
|
||||||
<item-section-renderer v-else :render="recommends" />
|
<item-section-renderer v-else :render="recommends" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -197,7 +187,12 @@ export default {
|
||||||
vuetubePlayer,
|
vuetubePlayer,
|
||||||
ItemSectionRenderer,
|
ItemSectionRenderer,
|
||||||
},
|
},
|
||||||
|
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();
|
||||||
},
|
},
|
||||||
|
@ -313,7 +308,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
|
||||||
|
@ -375,17 +369,6 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#watch-body {
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-container {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertical-button span.v-btn__content {
|
.vertical-button span.v-btn__content {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
|
Loading…
Reference in New Issue