mirror of https://github.com/VueTubeApp/VueTube
feat: basic custom bottom sheet
This commit is contained in:
parent
ae6895a8fd
commit
bbef87b5ee
|
@ -1,36 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="swipeableBottomSheet">
|
|
||||||
<v-bottom-sheet v-model="sheetMode">
|
|
||||||
<v-sheet class="text-center" height="200px">
|
|
||||||
<v-btn class="mt-6" text color="red" @click="sheetMode = !sheetMode">
|
|
||||||
close
|
|
||||||
</v-btn>
|
|
||||||
<div class="py-3">
|
|
||||||
This is a bottom sheet using the controlled by v-model instead of
|
|
||||||
activator
|
|
||||||
</div>
|
|
||||||
</v-sheet>
|
|
||||||
</v-bottom-sheet>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: ["enableBottomSheet"],
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
sheetMode: {
|
|
||||||
get() {
|
|
||||||
return this.enableBottomSheet;
|
|
||||||
},
|
|
||||||
set(val) {
|
|
||||||
this.$emit("input", val);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
|
@ -0,0 +1,2 @@
|
||||||
|
@import "~vuetify/src/styles/settings/_variables";
|
||||||
|
$bottom-sheet-inset-width: 70% !default;
|
|
@ -0,0 +1,4 @@
|
||||||
|
import swipeableBottomSheet from "./swipeableBottomSheet";
|
||||||
|
|
||||||
|
export { swipeableBottomSheet };
|
||||||
|
export default swipeableBottomSheet;
|
|
@ -0,0 +1,33 @@
|
||||||
|
import "./swipeableBottomSheet.sass";
|
||||||
|
|
||||||
|
// Extensions
|
||||||
|
import { VDialog } from "vuetify/lib";
|
||||||
|
|
||||||
|
/* @vue/component */
|
||||||
|
export default VDialog.extend({
|
||||||
|
name: "swipeable-bottom-sheet",
|
||||||
|
|
||||||
|
props: {
|
||||||
|
inset: Boolean,
|
||||||
|
maxWidth: [String, Number],
|
||||||
|
transition: {
|
||||||
|
type: String,
|
||||||
|
default: "bottom-sheet-transition",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
classes() {
|
||||||
|
return {
|
||||||
|
...VDialog.options.computed.classes.call(this),
|
||||||
|
"swipeable-bottom-sheet": true,
|
||||||
|
"swipeable-bottom-sheet--inset": this.inset,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
contentClasses() {
|
||||||
|
return {
|
||||||
|
"swipeable-bottom-sheet__content": true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
|
@ -0,0 +1,38 @@
|
||||||
|
@import './_variables.scss'
|
||||||
|
|
||||||
|
// Transition
|
||||||
|
.bottom-sheet-transition
|
||||||
|
&-enter
|
||||||
|
transform: translateY(100%)
|
||||||
|
|
||||||
|
&-leave-to
|
||||||
|
transform: translateY(100%)
|
||||||
|
|
||||||
|
// Block
|
||||||
|
|
||||||
|
.swipeable-bottom-sheet
|
||||||
|
|
||||||
|
&.v-dialog
|
||||||
|
align-self: flex-end
|
||||||
|
border-radius: 0
|
||||||
|
flex: 0 1 auto
|
||||||
|
margin: 0
|
||||||
|
overflow: visible
|
||||||
|
|
||||||
|
&.swipeable-bottom-sheet--inset
|
||||||
|
max-width: $bottom-sheet-inset-width
|
||||||
|
|
||||||
|
@media #{map-get($display-breakpoints, 'xs-only')}
|
||||||
|
max-width: none
|
||||||
|
|
||||||
|
&.v-dialog:not(.v-dialog--fullscreen)
|
||||||
|
max-height: 100%
|
||||||
|
|
||||||
|
.swipeable-bottom-sheet__content
|
||||||
|
position: sticky !important
|
||||||
|
bottom: 0
|
||||||
|
top: unset
|
||||||
|
overflow-y: auto
|
||||||
|
height: 100%
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="background" id="watch-body">
|
<div class="background" id="watch-body">
|
||||||
<div class="player-container">
|
<div id="player-container">
|
||||||
<!-- Stock Player -->
|
<!-- Stock Player -->
|
||||||
<videoPlayer
|
<videoPlayer
|
||||||
:vid-src="vidSrc"
|
:vid-src="vidSrc"
|
||||||
|
@ -11,7 +11,13 @@
|
||||||
<!-- VueTube Player V1 -->
|
<!-- VueTube Player V1 -->
|
||||||
<vuetubePlayer :sources="sources" v-if="useBetaPlayer === 'true'" />
|
<vuetubePlayer :sources="sources" v-if="useBetaPlayer === 'true'" />
|
||||||
</div>
|
</div>
|
||||||
<div class="content-container overflow-y-auto">
|
<div
|
||||||
|
v-bind:class="{
|
||||||
|
'overflow-y-auto': !showComments,
|
||||||
|
'overflow-y-hidden': showComments,
|
||||||
|
}"
|
||||||
|
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" flat>
|
||||||
<v-card-title
|
<v-card-title
|
||||||
class="mt-2"
|
class="mt-2"
|
||||||
|
@ -152,27 +158,47 @@
|
||||||
<v-divider />
|
<v-divider />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <v-dialog
|
|
||||||
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-card>
|
|
||||||
</v-dialog> -->
|
|
||||||
|
|
||||||
<swipeable-bottom-sheet
|
<swipeable-bottom-sheet
|
||||||
|
v-model="showComments"
|
||||||
|
hide-overlay
|
||||||
|
persistent
|
||||||
|
no-click-animation
|
||||||
|
attach="#content-container"
|
||||||
|
v-if="loaded && video.commentData"
|
||||||
|
>
|
||||||
|
<v-card height="100%">
|
||||||
|
<div
|
||||||
|
class="toolbar-container"
|
||||||
|
style="position: sticky; inset: -1px; z-index: 2"
|
||||||
|
>
|
||||||
|
<v-toolbar color="background" flat>
|
||||||
|
<v-toolbar-title>
|
||||||
|
<template v-for="text in video.commentData.headerText.runs">
|
||||||
|
<template v-if="text.bold">
|
||||||
|
<strong :key="text.text">{{ text.text }}</strong>
|
||||||
|
</template>
|
||||||
|
<template v-else>{{ text.text }}</template>
|
||||||
|
</template>
|
||||||
|
</v-toolbar-title>
|
||||||
|
<v-spacer></v-spacer>
|
||||||
|
<v-btn icon dark @click="showComments = !showComments">
|
||||||
|
<v-icon>mdi-close</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</v-toolbar>
|
||||||
|
<v-divider></v-divider>
|
||||||
|
</div>
|
||||||
|
<div scrollable>
|
||||||
|
<v-sheet color="background" v-for="i in 10" :key="i">
|
||||||
|
<v-skeleton-loader type="list-item-avatar-three-line, actions" />
|
||||||
|
</v-sheet>
|
||||||
|
</div>
|
||||||
|
</v-card>
|
||||||
|
</swipeable-bottom-sheet>
|
||||||
|
|
||||||
|
<!-- <swipeable-bottom-sheet
|
||||||
:v-model="showComments"
|
:v-model="showComments"
|
||||||
style="z-index: 9999999"
|
style="z-index: 9999999"
|
||||||
></swipeable-bottom-sheet>
|
></swipeable-bottom-sheet> -->
|
||||||
|
|
||||||
<!-- Related Videos -->
|
<!-- Related Videos -->
|
||||||
<div class="loaders" v-if="!loaded">
|
<div class="loaders" v-if="!loaded">
|
||||||
|
@ -194,7 +220,7 @@ import SlimVideoDescriptionRenderer from "~/components/UtilRenderers/slimVideoDe
|
||||||
import ItemSectionRenderer from "~/components/SectionRenderers/itemSectionRenderer.vue";
|
import ItemSectionRenderer from "~/components/SectionRenderers/itemSectionRenderer.vue";
|
||||||
import vuetubePlayer from "~/components/Player/index.vue";
|
import vuetubePlayer from "~/components/Player/index.vue";
|
||||||
import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
|
import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
|
||||||
import SwipeableBottomSheet from "../components/CustomComponents/swipeableBottomSheet.vue";
|
import SwipeableBottomSheet from "~/components/ExtendedComponents/swipeableBottomSheet";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
@ -390,8 +416,9 @@ export default {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-container {
|
#content-container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vertical-button span.v-btn__content {
|
.vertical-button span.v-btn__content {
|
||||||
|
|
|
@ -19,7 +19,7 @@ const ytApiVal = {
|
||||||
const filesystem = {
|
const filesystem = {
|
||||||
plugins: "vuetube/plugins",
|
plugins: "vuetube/plugins",
|
||||||
temp: "vuetube/temp",
|
temp: "vuetube/temp",
|
||||||
}
|
};
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
URLS: url,
|
URLS: url,
|
||||||
|
|
Loading…
Reference in New Issue