mirror of https://github.com/VueTubeApp/VueTube
feat: membership and verified comment badges
This commit is contained in:
parent
2ad58fbed4
commit
886b5f893d
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<div
|
||||
class="author-comment-badge-renderer"
|
||||
v-if="metadata && iconTypeMap.hasOwnProperty(metadata.icon.iconType)"
|
||||
>
|
||||
<v-tooltip top>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-icon v-bind="attrs" v-on="on" small>{{
|
||||
iconTypeMap[metadata.icon.iconType]
|
||||
}}</v-icon>
|
||||
</template>
|
||||
<span>{{ metadata.iconTooltip }}</span>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
metadata: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
iconTypeMap: {
|
||||
CHECK: "mdi-check-circle",
|
||||
OFFICIAL_ARTIST_BADGE: "mdi-music-note",
|
||||
},
|
||||
}),
|
||||
};
|
||||
</script>
|
|
@ -18,15 +18,35 @@
|
|||
/>
|
||||
</a>
|
||||
<div class="comment-content">
|
||||
<div class="comment-content--header">
|
||||
<h3 class="author-name--wrapper">
|
||||
<span class="font-weight-bold subtitle-2 pr-1 author-name" emoji>
|
||||
{{ commentRenderer.authorText.simpleText }}
|
||||
</span>
|
||||
</h3>
|
||||
<div class="comment-content--header subtitle-2">
|
||||
<div class="author-badge-name pr-1">
|
||||
<div class="author-name--wrapper">
|
||||
<span class="font-weight-bold author-name" 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"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
v-for="(badge, index) in commentRenderer.sponsorCommentBadge"
|
||||
>
|
||||
<sponsor-comment-badge-renderer
|
||||
:metadata="badge"
|
||||
:key="index"
|
||||
class="ml-1"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<span
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
class="background--text subtitle-2 comment-timestamp"
|
||||
class="background--text comment-timestamp"
|
||||
>
|
||||
{{ commentRenderer.publishedTimeText.runs[0].text }}
|
||||
</span>
|
||||
|
@ -70,27 +90,39 @@
|
|||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.author-name--wrapper {
|
||||
min-width: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.comment-timestamp {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.author-badge-name {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.author-name--wrapper {
|
||||
min-width: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import collapsableText from "~/components/UtilRenderers/collapsableText.vue";
|
||||
import YtTextFormatter from "~/components/UtilRenderers/YtTextFormatter.vue";
|
||||
import AuthorCommentBadgeRenderer from "~/components/Comments/authorCommentBadgeRenderer.vue";
|
||||
import SponsorCommentBadgeRenderer from "~/components/Comments/sponsorCommentBadgeRenderer.vue";
|
||||
|
||||
export default {
|
||||
components: { collapsableText, YtTextFormatter },
|
||||
components: {
|
||||
collapsableText,
|
||||
YtTextFormatter,
|
||||
AuthorCommentBadgeRenderer,
|
||||
SponsorCommentBadgeRenderer,
|
||||
},
|
||||
props: ["comment"],
|
||||
|
||||
data() {
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
</template>
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon dark @click="$emit('changeState', false)">
|
||||
<v-btn icon @click="$emit('changeState', false)">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<div
|
||||
class="author-comment-badge-renderer"
|
||||
v-if="metadata && metadata.customBadge"
|
||||
>
|
||||
<v-tooltip top>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<img
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
class="badge"
|
||||
:src="metadata.customBadge.thumbnails[0].url"
|
||||
:alt="metadata.tooltip"
|
||||
/>
|
||||
</template>
|
||||
<span>{{ metadata.tooltip }}</span>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
metadata: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.author-comment-badge-renderer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.badge {
|
||||
display: inline-block;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
vertical-align: -0.1em;
|
||||
}
|
||||
</style>
|
|
@ -19,7 +19,7 @@
|
|||
>{{ text.text }}</a
|
||||
>
|
||||
</template>
|
||||
<template v-else-if="text.emoji">
|
||||
<template v-else-if="text.emoji && text.emoji.isCustomEmoji">
|
||||
<img
|
||||
:src="
|
||||
text.emoji.image.thumbnails[text.emoji.image.thumbnails.length - 1]
|
||||
|
|
Loading…
Reference in New Issue