mirror of
https://github.com/VueTubeApp/VueTube
synced 2024-11-25 12:45:17 +00:00
more granular rounding controls, cuter comment spacing
This commit is contained in:
Nikita Krupin
parent
df1de94147
commit
b59ae96b1b
10 changed files with 194 additions and 103 deletions
|
|
@ -11,7 +11,7 @@
|
|||
commentRenderer.authorEndpoint
|
||||
)
|
||||
"
|
||||
class="avatar-link"
|
||||
class="avatar-link pr-2"
|
||||
>
|
||||
<v-img
|
||||
class="avatar-thumbnail"
|
||||
|
|
@ -23,50 +23,42 @@
|
|||
/>
|
||||
</a>
|
||||
<div class="comment-content">
|
||||
<div class="comment-content--header subtitle-2">
|
||||
<div class="comment-content--header subtitle-2 mb-2">
|
||||
<div
|
||||
class="author-badge-name mr-1"
|
||||
:class="
|
||||
commentRenderer.authorIsChannelOwner
|
||||
? $vuetify.theme.dark
|
||||
? 'owner background lighten-2'
|
||||
: 'owner primary lighten-3'
|
||||
: 'owner background darken-2'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<div class="author-name--wrapper">
|
||||
<span class="font-weight-bold author-name" v-emoji>
|
||||
<span class="font-weight-bold author-name mr-1" v-emoji>
|
||||
{{ commentRenderer.authorText.simpleText }}
|
||||
</span>
|
||||
</div>
|
||||
<template
|
||||
v-for="(badge, index) in commentRenderer.authorCommentBadge"
|
||||
>
|
||||
<author-comment-badge-renderer
|
||||
:metadata="badge"
|
||||
:key="index"
|
||||
class="ml-1"
|
||||
/>
|
||||
<author-comment-badge-renderer :metadata="badge" :key="index" />
|
||||
</template>
|
||||
<template
|
||||
v-for="(badge, index) in commentRenderer.sponsorCommentBadge"
|
||||
>
|
||||
<sponsor-comment-badge-renderer
|
||||
:metadata="badge"
|
||||
:key="index"
|
||||
class="ml-1"
|
||||
/>
|
||||
<sponsor-comment-badge-renderer :metadata="badge" :key="index" />
|
||||
</template>
|
||||
</div>
|
||||
<span
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
class="background--text comment-timestamp"
|
||||
class="background--text comment-timestamp ml-2"
|
||||
>
|
||||
{{ commentRenderer.publishedTimeText.runs[0].text }}
|
||||
</span>
|
||||
</div>
|
||||
<collapsable-text
|
||||
:lines="4"
|
||||
:lines="3"
|
||||
:expandText="
|
||||
commentRenderer.expandButton.buttonRenderer.text.runs[0].text
|
||||
"
|
||||
|
|
@ -77,33 +69,23 @@
|
|||
<yt-text-formatter :textRuns="commentRenderer.contentText.runs">
|
||||
</yt-text-formatter>
|
||||
</collapsable-text>
|
||||
<div class="toolbar">
|
||||
<div class="toolbar mt-2">
|
||||
<v-btn-toggle v-model="voteStatus" group>
|
||||
<div class="toolbar--item mr-1">
|
||||
<v-btn class="toolbar--button like" disabled icon x-small plain>
|
||||
<v-icon small>mdi-thumb-up</v-icon>
|
||||
</v-btn>
|
||||
<v-icon small>mdi-thumb-up-outline</v-icon>
|
||||
<span
|
||||
v-if="commentRenderer.voteCount"
|
||||
v-text="commentRenderer.voteCount.simpleText"
|
||||
class="like-count subtitle-2"
|
||||
class="like-count caption"
|
||||
></span>
|
||||
</div>
|
||||
<div class="toolbar--item">
|
||||
<v-btn class="toolbar--button dislike" disabled icon x-small plain>
|
||||
<v-icon small>mdi-thumb-down</v-icon>
|
||||
</v-btn>
|
||||
<v-icon class="ml-2" small>mdi-thumb-down-outline</v-icon>
|
||||
</div>
|
||||
</v-btn-toggle>
|
||||
<div class="toolbar--item">
|
||||
<v-btn class="toolbar--button reply ml-2" disabled icon x-small plain>
|
||||
<v-icon small>mdi-comment</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
<div class="toolbar--item" v-if="commentRenderer.replyCount">
|
||||
<div class="toolbar--item ml-2" v-if="commentRenderer.replyCount">
|
||||
<v-icon small>mdi-comment-outline</v-icon>
|
||||
<span
|
||||
v-text="commentRenderer.replyCount"
|
||||
class="like-count mr-1 subtitle-2"
|
||||
class="like-count caption"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -168,13 +150,8 @@
|
|||
}
|
||||
|
||||
.owner {
|
||||
color: var(--v-primary-base);
|
||||
border-radius: 1em;
|
||||
padding: 0 0.3em 0 0.6em;
|
||||
|
||||
&::v-deep .author-badge {
|
||||
color: var(--v-primary-base);
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar--button::v-deep.v-btn--active .v-btn__content {
|
||||
|
|
|
|||
|
|
@ -59,4 +59,3 @@ export default {
|
|||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@
|
|||
:key="index"
|
||||
class="commentElement"
|
||||
>
|
||||
<v-divider v-if="getComponents()[Object.keys(comment)[0]]"></v-divider>
|
||||
<v-list-item class="px-0">
|
||||
<component
|
||||
:is="Object.keys(comment)[0]"
|
||||
|
|
@ -30,6 +29,7 @@
|
|||
@showReplies="openReply"
|
||||
></component>
|
||||
</v-list-item>
|
||||
<v-divider v-if="getComponents()[Object.keys(comment)[0]]"></v-divider>
|
||||
</div>
|
||||
|
||||
<div class="loading" v-if="loading">
|
||||
|
|
|
|||
|
|
@ -3,18 +3,16 @@
|
|||
class="entry videoRenderer background"
|
||||
:to="`/watch?v=${vidId}`"
|
||||
:class="
|
||||
$store.state.tweaks.roundTweak > 0
|
||||
roundThumb && roundTweak > 0
|
||||
? $vuetify.theme.dark
|
||||
? 'lighten-1'
|
||||
: 'darken-1'
|
||||
: ''
|
||||
"
|
||||
:style="{
|
||||
borderRadius: `${roundTweak / 2}rem`,
|
||||
borderRadius: roundThumb ? `${roundTweak / 2}rem` : '0',
|
||||
margin:
|
||||
$store.state.tweaks.roundTweak > 0
|
||||
? '0 1rem 1rem 1rem'
|
||||
: '0 0 0.25rem 0',
|
||||
roundThumb && roundTweak > 0 ? '0 1rem 1rem 1rem' : '0 0 0.25rem 0',
|
||||
}"
|
||||
flat
|
||||
>
|
||||
|
|
@ -23,7 +21,7 @@
|
|||
:aspect-ratio="16 / 9"
|
||||
:src="$youtube.getThumbnail(vidId, 'max', thumbnails)"
|
||||
:style="{
|
||||
borderRadius: `${roundTweak / 4}rem`,
|
||||
borderRadius: roundThumb ? `${roundTweak / 4}rem` : '0',
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
|
|
@ -58,6 +56,52 @@
|
|||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
vidId: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
thumbnails: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
channelUrl: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
channelIcon: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
titles: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
bottomText: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
thumbnailOverlayText: {
|
||||
type: String,
|
||||
},
|
||||
thumbnailOverlayStyle: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
roundTweak() {
|
||||
return this.$store.state.tweaks.roundTweak;
|
||||
},
|
||||
roundThumb() {
|
||||
return this.$store.state.tweaks.roundThumb;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.entry {
|
||||
width: 100%; /* Prevent Loading Weirdness */
|
||||
|
|
@ -126,46 +170,3 @@
|
|||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
roundTweak() {
|
||||
return this.$store.state.tweaks.roundTweak;
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
vidId: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
thumbnails: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
channelUrl: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
channelIcon: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
titles: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
bottomText: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
thumbnailOverlayText: {
|
||||
type: String,
|
||||
},
|
||||
thumbnailOverlayStyle: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="bottomNav background">
|
||||
<v-divider v-if="$store.state.tweaks.roundTweak < 1" />
|
||||
<v-divider v-if="!$store.state.tweaks.roundTweak" />
|
||||
<v-bottom-navigation
|
||||
v-model="tabSelection"
|
||||
style="padding: 0 !important; box-shadow: none !important"
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
<template>
|
||||
<v-card class="dialog-base">
|
||||
<div class="toolbar-container">
|
||||
<v-card flat class="dialog-base background">
|
||||
<div
|
||||
class="toolbar-container d-flex flex-column background"
|
||||
style="flex-direction: column !important"
|
||||
>
|
||||
<v-toolbar color="background" flat>
|
||||
<slot name="header"></slot>
|
||||
</v-toolbar>
|
||||
<!-- <v-divider></v-divider> -->
|
||||
<v-divider></v-divider>
|
||||
</div>
|
||||
<div class="dialog-body background">
|
||||
<slot></slot>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
<v-icon>mdi-refresh</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-if="$route.name !== 'settings'"
|
||||
v-if="$route.name !== 'settings' && !$route.path.includes('/mods')"
|
||||
icon
|
||||
tile
|
||||
class="ml-3 my-auto fill-height"
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@
|
|||
/>
|
||||
</v-dialog>
|
||||
<!-- ----Mode Switch---- -->
|
||||
<v-divider v-if="$store.state.tweaks.roundTweak < 1" />
|
||||
<v-divider v-if="!$store.state.tweaks.roundTweak" />
|
||||
<v-card
|
||||
flat
|
||||
class="d-flex flex-row justify-between mx-8 mb-8 px-4 background"
|
||||
|
|
@ -139,8 +139,8 @@
|
|||
"
|
||||
:style="{
|
||||
borderRadius: `${$store.state.tweaks.roundTweak / 2}rem`,
|
||||
padding: $store.state.tweaks.roundTweak < 1 ? '2rem !important' : '',
|
||||
margin: $store.state.tweaks.roundTweak < 1 ? '0 !important' : '',
|
||||
padding: !$store.state.tweaks.roundTweak ? '2rem !important' : '',
|
||||
margin: !$store.state.tweaks.roundTweak ? '0 !important' : '',
|
||||
}"
|
||||
@click="
|
||||
($vuetify.theme.dark = !$vuetify.theme.dark),
|
||||
|
|
|
|||
|
|
@ -2,16 +2,17 @@
|
|||
<!-- !IMPORTANT: don't let autoformatter format this style to multiline or else it breaks ¯\_(ツ)_/¯ -->
|
||||
<div
|
||||
class="d-flex flex-column justify-end"
|
||||
style="min-height: calc(100vh - 8rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important"
|
||||
style="
|
||||
min-height: calc(100vh - 8rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
|
||||
"
|
||||
>
|
||||
<!-- TODO: outer radius -->
|
||||
<!-- TODO: Dense Navbar -->
|
||||
<!-- TODO: Disable Top Bar -->
|
||||
<!-- TODO: Top and Bottom bar color selection -->
|
||||
<v-divider v-if="roundTweak < 1" />
|
||||
<v-card
|
||||
flat
|
||||
class="ma-4 px-6 background"
|
||||
class="mx-4 my-2 px-4 d-flex flex-row justify-between background"
|
||||
style="transition-duration: 0.3s; transition-property: border-radius"
|
||||
:class="
|
||||
roundTweak > 0 ? ($vuetify.theme.dark ? 'lighten-1' : 'darken-1') : ''
|
||||
|
|
@ -20,12 +21,94 @@
|
|||
borderRadius: `${roundTweak / 2}rem`,
|
||||
}"
|
||||
>
|
||||
<h3 class="mt-5">Rounded Corners</h3>
|
||||
<h3
|
||||
class="ml-2 my-auto background--text"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-3' : 'text--darken-3'"
|
||||
>
|
||||
Fullscreen (Soon™)
|
||||
</h3>
|
||||
<v-spacer />
|
||||
<v-switch disabled style="pointer-events: none" persistent-hint inset />
|
||||
</v-card>
|
||||
|
||||
<v-divider v-if="!roundTweak" />
|
||||
|
||||
<v-card
|
||||
flat
|
||||
class="mx-4 my-2 px-4 d-flex flex-row justify-between background"
|
||||
style="transition-duration: 0.3s; transition-property: border-radius"
|
||||
:class="
|
||||
roundTweak > 0 ? ($vuetify.theme.dark ? 'lighten-1' : 'darken-1') : ''
|
||||
"
|
||||
:style="{
|
||||
borderRadius: `${roundTweak / 2}rem`,
|
||||
}"
|
||||
>
|
||||
<h3
|
||||
class="ml-2 my-auto background--text"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-3' : 'text--darken-3'"
|
||||
>
|
||||
Navbar Blur (Soon™)
|
||||
</h3>
|
||||
<v-spacer />
|
||||
<v-switch disabled style="pointer-events: none" persistent-hint inset />
|
||||
</v-card>
|
||||
|
||||
<v-divider v-if="!roundTweak" />
|
||||
|
||||
<v-card
|
||||
flat
|
||||
class="mx-4 my-2 background"
|
||||
style="transition-duration: 0.3s; transition-property: border-radius"
|
||||
:class="
|
||||
roundTweak > 0 ? ($vuetify.theme.dark ? 'lighten-1' : 'darken-1') : ''
|
||||
"
|
||||
:style="{
|
||||
borderRadius: `${roundTweak / 2}rem`,
|
||||
}"
|
||||
>
|
||||
<h3 class="my-5 mx-6">Rounded Corners</h3>
|
||||
<v-card
|
||||
flat
|
||||
class="px-4 d-flex flex-row justify-between transparent background--text"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
@click="
|
||||
(roundThumb = !roundThumb), $vuetube.haptics.hapticsImpactLight(1)
|
||||
"
|
||||
>
|
||||
<div class="ml-2">Round Thumbnails</div>
|
||||
<v-spacer />
|
||||
<v-switch
|
||||
v-model="roundThumb"
|
||||
style="pointer-events: none"
|
||||
persistent-hint
|
||||
class="ma-0"
|
||||
inset
|
||||
/>
|
||||
</v-card>
|
||||
<v-card
|
||||
flat
|
||||
class="px-4 d-flex flex-row justify-between transparent background--text"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
@click="
|
||||
(roundWatch = !roundWatch), $vuetube.haptics.hapticsImpactLight(1)
|
||||
"
|
||||
>
|
||||
<div class="ml-2">Round Watch Page Components</div>
|
||||
<v-spacer />
|
||||
<v-switch
|
||||
v-model="roundWatch"
|
||||
style="pointer-events: none"
|
||||
persistent-hint
|
||||
class="ma-0"
|
||||
inset
|
||||
/>
|
||||
</v-card>
|
||||
<v-slider
|
||||
v-model="roundTweak"
|
||||
class="mr-2 mt-5"
|
||||
class="mr-8 ml-6"
|
||||
:max="4"
|
||||
step="1"
|
||||
step=".25"
|
||||
thumb-size="64"
|
||||
@input="$vuetube.haptics.hapticsImpactLight(0)"
|
||||
>
|
||||
|
|
@ -51,6 +134,22 @@ export default {
|
|||
this.$store.commit("tweaks/setRoundTweak", value);
|
||||
},
|
||||
},
|
||||
roundThumb: {
|
||||
get() {
|
||||
return this.$store.state.tweaks.roundThumb;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("tweaks/setRoundThumb", value);
|
||||
},
|
||||
},
|
||||
roundWatch: {
|
||||
get() {
|
||||
return this.$store.state.tweaks.roundWatch;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("tweaks/setRoundWatch", value);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
export const state = () => ({
|
||||
roundTweak: 0,
|
||||
roundThumb: true,
|
||||
roundWatch: true,
|
||||
});
|
||||
export const mutations = {
|
||||
initTweaks(state) {
|
||||
|
|
@ -7,6 +9,8 @@ export const mutations = {
|
|||
// currently called beforeCreate() in pages/default.vue
|
||||
if (process.client) {
|
||||
state.roundTweak = localStorage.getItem("roundTweak") || 0;
|
||||
state.roundThumb = localStorage.getItem("roundThumb") || true;
|
||||
state.roundWatch = localStorage.getItem("roundWatch") || true;
|
||||
}
|
||||
},
|
||||
setRoundTweak(state, payload) {
|
||||
|
|
@ -15,4 +19,12 @@ export const mutations = {
|
|||
localStorage.setItem("roundTweak", payload);
|
||||
}
|
||||
},
|
||||
setRoundThumb(state, payload) {
|
||||
state.roundThumb = payload;
|
||||
localStorage.setItem("roundThumb", payload);
|
||||
},
|
||||
setRoundWatch(state, payload) {
|
||||
state.roundWatch = payload;
|
||||
localStorage.setItem("roundWatch", payload);
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue