mirror of
https://github.com/VueTubeApp/VueTube
synced 2024-11-25 20:55:17 +00:00
feat: basic custom bottom sheet
This commit is contained in:
Alex
parent
ae6895a8fd
commit
bbef87b5ee
7 changed files with 127 additions and 59 deletions
|
|
@ -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>
|
||||
<div class="background" id="watch-body">
|
||||
<div class="player-container">
|
||||
<div id="player-container">
|
||||
<!-- Stock Player -->
|
||||
<videoPlayer
|
||||
:vid-src="vidSrc"
|
||||
|
|
@ -11,7 +11,13 @@
|
|||
<!-- VueTube Player V1 -->
|
||||
<vuetubePlayer :sources="sources" v-if="useBetaPlayer === 'true'" />
|
||||
</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-title
|
||||
class="mt-2"
|
||||
|
|
@ -152,27 +158,47 @@
|
|||
<v-divider />
|
||||
</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
|
||||
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"
|
||||
style="z-index: 9999999"
|
||||
></swipeable-bottom-sheet>
|
||||
></swipeable-bottom-sheet> -->
|
||||
|
||||
<!-- Related Videos -->
|
||||
<div class="loaders" v-if="!loaded">
|
||||
|
|
@ -194,7 +220,7 @@ import SlimVideoDescriptionRenderer from "~/components/UtilRenderers/slimVideoDe
|
|||
import ItemSectionRenderer from "~/components/SectionRenderers/itemSectionRenderer.vue";
|
||||
import vuetubePlayer from "~/components/Player/index.vue";
|
||||
import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
|
||||
import SwipeableBottomSheet from "../components/CustomComponents/swipeableBottomSheet.vue";
|
||||
import SwipeableBottomSheet from "~/components/ExtendedComponents/swipeableBottomSheet";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -390,8 +416,9 @@ export default {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
#content-container {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vertical-button span.v-btn__content {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const ytApiVal = {
|
|||
const filesystem = {
|
||||
plugins: "vuetube/plugins",
|
||||
temp: "vuetube/temp",
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
URLS: url,
|
||||
|
|
|
|||
Loading…
Reference in a new issue