etc
/
VueTube
mirror of https://github.com/VueTubeApp/VueTube
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

more granular rounding controls, cuter comment spacing

This commit is contained in:
Nikita Krupin 2022-05-13 18:25:47 -04:00
parent df1de94147
commit b59ae96b1b
10 changed files with 194 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
NUXT/components/Comments/commentThreadRenderer.vue
View File

@ -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 {

1
NUXT/components/Comments/commentsHeaderRenderer.vue
View File

@ -59,4 +59,3 @@ export default {
width: 100%;
}
</style>

2
NUXT/components/Comments/mainCommentRenderer.vue
View File

@ -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">

99
NUXT/components/UtilRenderers/baseVideoRenderer.vue
View File

@ -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>

2
NUXT/components/bottomNavigation.vue
View File

@ -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"

9
NUXT/components/dialogBase.vue
View File

@ -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>

2
NUXT/components/topNavigation.vue
View File

@ -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"

6
NUXT/pages/mods/theme.vue
View File

@ -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),

111
NUXT/pages/mods/tweaks.vue
View File

@ -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>

12
NUXT/store/tweaks/index.js
View File

@ -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);
},
};