some docs, added richcontent to usernames in status, updated stillImage

to allow scale of "gif" label
This commit is contained in:
Henry Jameson 2021-06-07 18:39:51 +03:00
parent aec05686d0
commit 04fa1f0b2d
7 changed files with 44 additions and 24 deletions

View file

@ -9,25 +9,41 @@ import './rich_content.scss'
export default Vue.component('RichContent', { export default Vue.component('RichContent', {
name: 'RichContent', name: 'RichContent',
props: { props: {
// Original html content
html: { html: {
required: true, required: true,
type: String type: String
}, },
// Emoji object, as in status.emojis, note the "s" at the end...
emoji: { emoji: {
required: true, required: true,
type: Array type: Array
},
// Whether to handle links or not (posts: yes, everything else: no)
handleLinks: {
required: false,
type: Boolean,
default: false
} }
}, },
render (h) { render (h) {
const renderImage = (tag) => { const renderImage = (tag) => {
const attrs = getAttrs(tag) return <StillImage
return <StillImage {...{ attrs }} class="img"/> {...{ attrs: getAttrs(tag) }}
class="img"
/>
} }
const renderMention = (attrs, children) => { const renderMention = (attrs, children) => {
return <MentionLink url={attrs.href} content={flattenDeep(children).join('')} origattrs={attrs}/> return <MentionLink
url={attrs.href}
content={flattenDeep(children).join('')}
origattrs={attrs}
/>
} }
const structure = convertHtml(this.html)
// Processor to use with mini_html_converter
const processItem = (item) => { const processItem = (item) => {
// Handle text noes - just add emoji
if (typeof item === 'string') { if (typeof item === 'string') {
if (item.includes(':')) { if (item.includes(':')) {
return processTextForEmoji( return processTextForEmoji(
@ -46,18 +62,21 @@ export default Vue.component('RichContent', {
return unescape(item) return unescape(item)
} }
} }
// Handle tag nodes
if (Array.isArray(item)) { if (Array.isArray(item)) {
const [opener, children] = item const [opener, children] = item
const Tag = getTagName(opener) const Tag = getTagName(opener)
switch (Tag) { switch (Tag) {
case 'img': case 'img': // replace images with StillImage
return renderImage(opener) return renderImage(opener)
case 'a': case 'a': // replace mentions with MentionLink
if (!this.handleLinks) break
const attrs = getAttrs(opener) const attrs = getAttrs(opener)
if (attrs['class'] && attrs['class'].includes('mention')) { if (attrs['class'] && attrs['class'].includes('mention')) {
return renderMention(attrs, children) return renderMention(attrs, children)
} }
} }
// Render tag as is
if (children !== undefined) { if (children !== undefined) {
return <Tag {...{ attrs: getAttrs(opener) }}> return <Tag {...{ attrs: getAttrs(opener) }}>
{ children.map(processItem) } { children.map(processItem) }
@ -68,7 +87,7 @@ export default Vue.component('RichContent', {
} }
} }
return <span class="RichContent"> return <span class="RichContent">
{ structure.map(processItem) } { convertHtml(this.html).map(processItem) }
</span> </span>
} }
}) })

View file

@ -56,8 +56,8 @@
} }
.emoji { .emoji {
width: 32px; width: var(--emoji-size, 32px);
height: 32px; height: var(--emoji-size, 32px);
} }
.img, .img,

View file

@ -9,6 +9,7 @@ import UserAvatar from '../user_avatar/user_avatar.vue'
import AvatarList from '../avatar_list/avatar_list.vue' import AvatarList from '../avatar_list/avatar_list.vue'
import Timeago from '../timeago/timeago.vue' import Timeago from '../timeago/timeago.vue'
import StatusContent from '../status_content/status_content.vue' import StatusContent from '../status_content/status_content.vue'
import RichContent from 'src/components/rich_content/rich_content.jsx'
import StatusPopover from '../status_popover/status_popover.vue' import StatusPopover from '../status_popover/status_popover.vue'
import UserListPopover from '../user_list_popover/user_list_popover.vue' import UserListPopover from '../user_list_popover/user_list_popover.vue'
import EmojiReactions from '../emoji_reactions/emoji_reactions.vue' import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
@ -68,7 +69,8 @@ const Status = {
StatusPopover, StatusPopover,
UserListPopover, UserListPopover,
EmojiReactions, EmojiReactions,
StatusContent StatusContent,
RichContent
}, },
props: [ props: [
'statusoid', 'statusoid',
@ -136,8 +138,9 @@ const Status = {
} }
}, },
retweet () { return !!this.statusoid.retweeted_status }, retweet () { return !!this.statusoid.retweeted_status },
retweeterUser () { return this.statusoid.user },
retweeter () { return this.statusoid.user.name || this.statusoid.user.screen_name_ui }, retweeter () { return this.statusoid.user.name || this.statusoid.user.screen_name_ui },
retweeterHtml () { return this.statusoid.user.name_html }, retweeterHtml () { return this.statusoid.user.name },
retweeterProfileLink () { return this.generateUserProfileLink(this.statusoid.user.id, this.statusoid.user.screen_name) }, retweeterProfileLink () { return this.generateUserProfileLink(this.statusoid.user.id, this.statusoid.user.screen_name) },
status () { status () {
if (this.retweet) { if (this.retweet) {

View file

@ -93,12 +93,8 @@ $status-margin: 0.75em;
margin-right: 0.4em; margin-right: 0.4em;
text-overflow: ellipsis; text-overflow: ellipsis;
.emoji { --_still_image-label-scale: 0.25;
width: 14px; --emoji-size: 14px;
height: 14px;
vertical-align: middle;
object-fit: contain;
}
} }
.status-favicon { .status-favicon {

View file

@ -1,5 +1,4 @@
<template> <template>
<!-- eslint-disable vue/no-v-html -->
<div <div
v-if="!hideStatus" v-if="!hideStatus"
class="Status" class="Status"
@ -89,8 +88,9 @@
<router-link <router-link
v-if="retweeterHtml" v-if="retweeterHtml"
:to="retweeterProfileLink" :to="retweeterProfileLink"
v-html="retweeterHtml" >
/> <RichContent :html="retweeterHtml" :emoji="retweeterUser.emoji"/>
</router-link>
<router-link <router-link
v-else v-else
:to="retweeterProfileLink" :to="retweeterProfileLink"
@ -145,8 +145,9 @@
v-if="status.user.name_html" v-if="status.user.name_html"
class="status-username" class="status-username"
:title="status.user.name" :title="status.user.name"
v-html="status.user.name_html" >
/> <RichContent :html="status.user.name" :emoji="status.user.emoji" />
</h4>
<h4 <h4
v-else v-else
class="status-username" class="status-username"
@ -402,7 +403,6 @@
</div> </div>
</template> </template>
</div> </div>
<!-- eslint-enable vue/no-v-html -->
</template> </template>
<script src="./status.js" ></script> <script src="./status.js" ></script>

View file

@ -30,7 +30,7 @@
position: relative; position: relative;
line-height: 0; line-height: 0;
overflow: hidden; overflow: hidden;
display: flex; display: inline-flex;
align-items: center; align-items: center;
canvas { canvas {
@ -53,6 +53,7 @@
&.animated { &.animated {
&::before { &::before {
zoom: var(--_still_image-label-scale, 1);
content: 'gif'; content: 'gif';
position: absolute; position: absolute;
line-height: 10px; line-height: 10px;

View file

@ -54,6 +54,7 @@ export const parseUser = (data) => {
return output return output
} }
output.emoji = data.emojis
output.name = data.display_name output.name = data.display_name
output.name_html = addEmojis(escape(data.display_name), data.emojis) output.name_html = addEmojis(escape(data.display_name), data.emojis)