commit: 04fa1f0b2d1a92b1c653cd55f51ee7e1434b2bd7
parent aec05686d0fa300b8b8348d8d1ba2724d1dd0014
Author: Henry Jameson <me@hjkos.com>
Date: Mon, 7 Jun 2021 18:39:51 +0300
some docs, added richcontent to usernames in status, updated stillImage
to allow scale of "gif" label
Diffstat:
7 files changed, 44 insertions(+), 24 deletions(-)
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
@@ -9,25 +9,41 @@ import './rich_content.scss'
export default Vue.component('RichContent', {
name: 'RichContent',
props: {
+ // Original html content
html: {
required: true,
type: String
},
+ // Emoji object, as in status.emojis, note the "s" at the end...
emoji: {
required: true,
type: Array
+ },
+ // Whether to handle links or not (posts: yes, everything else: no)
+ handleLinks: {
+ required: false,
+ type: Boolean,
+ default: false
}
},
render (h) {
const renderImage = (tag) => {
- const attrs = getAttrs(tag)
- return <StillImage {...{ attrs }} class="img"/>
+ return <StillImage
+ {...{ attrs: getAttrs(tag) }}
+ class="img"
+ />
}
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) => {
+ // Handle text noes - just add emoji
if (typeof item === 'string') {
if (item.includes(':')) {
return processTextForEmoji(
@@ -46,18 +62,21 @@ export default Vue.component('RichContent', {
return unescape(item)
}
}
+ // Handle tag nodes
if (Array.isArray(item)) {
const [opener, children] = item
const Tag = getTagName(opener)
switch (Tag) {
- case 'img':
+ case 'img': // replace images with StillImage
return renderImage(opener)
- case 'a':
+ case 'a': // replace mentions with MentionLink
+ if (!this.handleLinks) break
const attrs = getAttrs(opener)
if (attrs['class'] && attrs['class'].includes('mention')) {
return renderMention(attrs, children)
}
}
+ // Render tag as is
if (children !== undefined) {
return <Tag {...{ attrs: getAttrs(opener) }}>
{ children.map(processItem) }
@@ -68,7 +87,7 @@ export default Vue.component('RichContent', {
}
}
return <span class="RichContent">
- { structure.map(processItem) }
+ { convertHtml(this.html).map(processItem) }
</span>
}
})
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
@@ -56,8 +56,8 @@
}
.emoji {
- width: 32px;
- height: 32px;
+ width: var(--emoji-size, 32px);
+ height: var(--emoji-size, 32px);
}
.img,
diff --git a/src/components/status/status.js b/src/components/status/status.js
@@ -9,6 +9,7 @@ import UserAvatar from '../user_avatar/user_avatar.vue'
import AvatarList from '../avatar_list/avatar_list.vue'
import Timeago from '../timeago/timeago.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 UserListPopover from '../user_list_popover/user_list_popover.vue'
import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
@@ -68,7 +69,8 @@ const Status = {
StatusPopover,
UserListPopover,
EmojiReactions,
- StatusContent
+ StatusContent,
+ RichContent
},
props: [
'statusoid',
@@ -136,8 +138,9 @@ const Status = {
}
},
retweet () { return !!this.statusoid.retweeted_status },
+ retweeterUser () { return this.statusoid.user },
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) },
status () {
if (this.retweet) {
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
@@ -93,12 +93,8 @@ $status-margin: 0.75em;
margin-right: 0.4em;
text-overflow: ellipsis;
- .emoji {
- width: 14px;
- height: 14px;
- vertical-align: middle;
- object-fit: contain;
- }
+ --_still_image-label-scale: 0.25;
+ --emoji-size: 14px;
}
.status-favicon {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
@@ -1,5 +1,4 @@
<template>
- <!-- eslint-disable vue/no-v-html -->
<div
v-if="!hideStatus"
class="Status"
@@ -89,8 +88,9 @@
<router-link
v-if="retweeterHtml"
:to="retweeterProfileLink"
- v-html="retweeterHtml"
- />
+ >
+ <RichContent :html="retweeterHtml" :emoji="retweeterUser.emoji"/>
+ </router-link>
<router-link
v-else
:to="retweeterProfileLink"
@@ -145,8 +145,9 @@
v-if="status.user.name_html"
class="status-username"
:title="status.user.name"
- v-html="status.user.name_html"
- />
+ >
+ <RichContent :html="status.user.name" :emoji="status.user.emoji" />
+ </h4>
<h4
v-else
class="status-username"
@@ -402,7 +403,6 @@
</div>
</template>
</div>
-<!-- eslint-enable vue/no-v-html -->
</template>
<script src="./status.js" ></script>
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
@@ -30,7 +30,7 @@
position: relative;
line-height: 0;
overflow: hidden;
- display: flex;
+ display: inline-flex;
align-items: center;
canvas {
@@ -53,6 +53,7 @@
&.animated {
&::before {
+ zoom: var(--_still_image-label-scale, 1);
content: 'gif';
position: absolute;
line-height: 10px;
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -54,6 +54,7 @@ export const parseUser = (data) => {
return output
}
+ output.emoji = data.emojis
output.name = data.display_name
output.name_html = addEmojis(escape(data.display_name), data.emojis)
