From 8e9f5d7580d5a248e280b110218aa23052827789 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 7 Jun 2021 19:50:26 +0300 Subject: renamed StatusText to StatusBody for clarity, fixed chats --- src/components/status_body/status_body.js | 147 ++++++++++++++++++++++++++++ src/components/status_body/status_body.scss | 112 +++++++++++++++++++++ src/components/status_body/status_body.vue | 95 ++++++++++++++++++ 3 files changed, 354 insertions(+) create mode 100644 src/components/status_body/status_body.js create mode 100644 src/components/status_body/status_body.scss create mode 100644 src/components/status_body/status_body.vue (limited to 'src/components/status_body') diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js new file mode 100644 index 00000000..232afccb --- /dev/null +++ b/src/components/status_body/status_body.js @@ -0,0 +1,147 @@ +import fileType from 'src/services/file_type/file_type.service' +import RichContent from 'src/components/rich_content/rich_content.jsx' +import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js' +import { extractTagFromUrl } from 'src/services/matcher/matcher.service.js' +import { mapGetters } from 'vuex' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faFile, + faMusic, + faImage, + faLink, + faPollH +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faFile, + faMusic, + faImage, + faLink, + faPollH +) + +const StatusContent = { + name: 'StatusContent', + props: [ + 'status', + 'focused', + 'noHeading', + 'fullContent', + 'singleLine' + ], + data () { + return { + showingTall: this.fullContent || (this.inConversation && this.focused), + showingLongSubject: false, + // not as computed because it sets the initial state which will be changed later + expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject + } + }, + computed: { + localCollapseSubjectDefault () { + return this.mergedConfig.collapseMessageWithSubject + }, + // This is a bit hacky, but we want to approximate post height before rendering + // so we count newlines (masto uses

for paragraphs, GS uses
between them) + // as well as approximate line count by counting characters and approximating ~80 + // per line. + // + // Using max-height + overflow: auto for status components resulted in false positives + // very often with japanese characters, and it was very annoying. + tallStatus () { + const lengthScore = this.status.statusnet_html.split(/ 20 + }, + longSubject () { + return this.status.summary.length > 240 + }, + // When a status has a subject and is also tall, we should only have one show more/less button. If the default is to collapse statuses with subjects, we just treat it like a status with a subject; otherwise, we just treat it like a tall status. + mightHideBecauseSubject () { + return !!this.status.summary && this.localCollapseSubjectDefault + }, + mightHideBecauseTall () { + return this.tallStatus && !(this.status.summary && this.localCollapseSubjectDefault) + }, + hideSubjectStatus () { + return this.mightHideBecauseSubject && !this.expandingSubject + }, + hideTallStatus () { + return this.mightHideBecauseTall && !this.showingTall + }, + showingMore () { + return (this.mightHideBecauseTall && this.showingTall) || (this.mightHideBecauseSubject && this.expandingSubject) + }, + postBodyHtml () { + const html = this.status.raw_html + + if (this.mergedConfig.greentext) { + try { + if (html.includes('>')) { + // This checks if post has '>' at the beginning, excluding mentions so that @mention >impying works + return processHtml(html, (string) => { + if (string.includes('>') && + string + .replace(/<[^>]+?>/gi, '') // remove all tags + .replace(/@\w+/gi, '') // remove mentions (even failed ones) + .trim() + .startsWith('>')) { + return `${string}` + } else { + return string + } + }) + } else { + return html + } + } catch (e) { + console.error('Failed to process status html', e) + return html + } + } else { + return html + } + }, + attachmentTypes () { + return this.status.attachments.map(file => fileType.fileType(file.mimetype)) + }, + ...mapGetters(['mergedConfig']) + }, + components: { + RichContent + }, + mounted () { + this.status.attentions && this.status.attentions.forEach(attn => { + const { id } = attn + this.$store.dispatch('fetchUserIfMissing', id) + }) + }, + methods: { + linkClicked (event) { + const target = event.target.closest('.status-content a') + if (target) { + if (target.rel.match(/(?:^|\s)tag(?:$|\s)/) || target.className.match(/hashtag/)) { + // Extract tag name from dataset or link url + const tag = target.dataset.tag || extractTagFromUrl(target.href) + if (tag) { + const link = this.generateTagLink(tag) + this.$router.push(link) + return + } + } + window.open(target.href, '_blank') + } + }, + toggleShowMore () { + if (this.mightHideBecauseTall) { + this.showingTall = !this.showingTall + } else if (this.mightHideBecauseSubject) { + this.expandingSubject = !this.expandingSubject + } + }, + generateTagLink (tag) { + return `/tag/${tag}` + } + } +} + +export default StatusContent diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss new file mode 100644 index 00000000..6282919c --- /dev/null +++ b/src/components/status_body/status_body.scss @@ -0,0 +1,112 @@ +@import '../../_variables.scss'; + +.StatusBody { + .emoji { + --_still_image-label-scale: 0.5; + } + + .summary { + display: block; + font-style: italic; + padding-bottom: 0.5em; + } + + .text { + &.-single-line { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + height: 1.4em; + } + } + + .summary-wrapper { + margin-bottom: 0.5em; + border-style: solid; + border-width: 0 0 1px 0; + border-color: var(--border, $fallback--border); + flex-grow: 0; + + &.-tall { + position: relative; + + .summary { + max-height: 2em; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + } + + .text-wrapper { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + + &.-tall-status { + position: relative; + height: 220px; + overflow-x: hidden; + overflow-y: hidden; + z-index: 1; + + .text { + min-height: 0; + mask: + linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat, + linear-gradient(to top, white, white); + + /* Autoprefixed seem to ignore this one, and also syntax is different */ + -webkit-mask-composite: xor; + mask-composite: exclude; + } + } + } + + & .tall-status-hider, + & .tall-subject-hider, + & .status-unhider, + & .cw-status-hider { + display: inline-block; + word-break: break-all; + width: 100%; + text-align: center; + } + + .tall-status-hider { + position: absolute; + height: 70px; + margin-top: 150px; + line-height: 110px; + z-index: 2; + } + + .tall-subject-hider { + // position: absolute; + padding-bottom: 0.5em; + } + + & .status-unhider, + & .cw-status-hider { + word-break: break-all; + + svg { + color: inherit; + } + } + + .greentext { + color: $fallback--cGreen; + color: var(--postGreentext, $fallback--cGreen); + } + + /* Not sure if this is necessary */ + video { + max-width: 100%; + max-height: 400px; + vertical-align: middle; + object-fit: contain; + } + +} diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue new file mode 100644 index 00000000..6f982f2e --- /dev/null +++ b/src/components/status_body/status_body.vue @@ -0,0 +1,95 @@ + + + -- cgit v1.2.3-70-g09d2 From c21b1cf89840297a781e6adc66cc195b8741cac6 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 14 Jun 2021 10:30:08 +0300 Subject: do the impossible, fix the unfixable --- src/components/rich_content/rich_content.jsx | 16 +++- src/components/status_body/status_body.js | 12 +-- src/components/status_body/status_body.scss | 2 +- src/components/status_body/status_body.vue | 31 +++----- src/components/status_content/status_content.js | 3 - src/components/status_content/status_content.vue | 2 +- test/unit/specs/components/rich_content.spec.js | 91 +++++++++++++++++++++- .../html_converter/html_line_converter.spec.js | 2 +- 8 files changed, 118 insertions(+), 41 deletions(-) (limited to 'src/components/status_body') diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx index ffb36f50..4144d895 100644 --- a/src/components/rich_content/rich_content.jsx +++ b/src/components/rich_content/rich_content.jsx @@ -5,6 +5,7 @@ import { convertHtmlToTree } from 'src/services/html_converter/html_tree_convert import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js' import StillImage from 'src/components/still-image/still-image.vue' import MentionLink from 'src/components/mention_link/mention_link.vue' +import MentionsLine from 'src/components/mentions_line/mentions_line.vue' import './rich_content.scss' @@ -51,6 +52,11 @@ export default Vue.component('RichContent', { required: false, type: Boolean, default: false + }, + hideMentions: { + required: false, + type: Boolean, + default: false } }, // NEVER EVER TOUCH DATA INSIDE RENDER @@ -64,6 +70,7 @@ export default Vue.component('RichContent', { // unique index for vue "tag" property let mentionIndex = 0 let tagsIndex = 0 + let firstMentionReplaced = false const renderImage = (tag) => { return + } else { + return '' + } } else { return 1 && lastMentions.length > 1) { break } else { - return '' + return !this.hideMentions ? : '' } } else { break diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js index 26491e1b..9ee7a109 100644 --- a/src/components/status_body/status_body.js +++ b/src/components/status_body/status_body.js @@ -1,6 +1,5 @@ import fileType from 'src/services/file_type/file_type.service' import RichContent from 'src/components/rich_content/rich_content.jsx' -import MentionsLine from 'src/components/mentions_line/mentions_line.vue' import { mapGetters } from 'vuex' import { library } from '@fortawesome/fontawesome-svg-core' import { set } from 'vue' @@ -36,9 +35,6 @@ const StatusContent = { showingLongSubject: false, // not as computed because it sets the initial state which will be changed later expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject, - headTailLinks: null, - firstMentions: [], - lastMentions: [] } }, computed: { @@ -81,8 +77,7 @@ const StatusContent = { ...mapGetters(['mergedConfig']) }, components: { - RichContent, - MentionsLine + RichContent }, mounted () { this.status.attentions && this.status.attentions.forEach(attn => { @@ -98,11 +93,6 @@ const StatusContent = { this.expandingSubject = !this.expandingSubject } }, - setHeadTailLinks (headTailLinks) { - set(this, 'headTailLinks', headTailLinks) - set(this, 'firstMentions', headTailLinks.firstMentions) - set(this, 'lastMentions', headTailLinks.lastMentions) - }, generateTagLink (tag) { return `/tag/${tag}` } diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index 81a687f1..c7732bfe 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -62,7 +62,7 @@ overflow-y: hidden; z-index: 1; - .rich-content-wrapper { + .media-body { min-height: 0; mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat, diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue index 3dc4916c..2be46303 100644 --- a/src/components/status_body/status_body.vue +++ b/src/components/status_body/status_body.vue @@ -38,28 +38,17 @@ > {{ $t("general.show_more") }} - - - - - + :class="{ '-single-line': singleLine }" + class="text media-body" + :html="status.raw_html" + :emoji="status.emojis" + :handle-links="true" + :hide-mentions="hideMentions" + :greentext="mergedConfig.greentext" + @parseReady="$emit('parseReady', $event)" + />