From 61dcdbf99293de8c8b813ccec2833b190d3f97b2 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 7 Apr 2021 22:42:34 +0300 Subject: migrate to v-slot --- src/components/chat_message/chat_message.vue | 32 +++++++++++++++------------- 1 file changed, 17 insertions(+), 15 deletions(-) (limited to 'src/components/chat_message') diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue index 0777f880..0f3fc97d 100644 --- a/src/components/chat_message/chat_message.vue +++ b/src/components/chat_message/chat_message.vue @@ -50,7 +50,7 @@ @show="menuOpened = true" @close="menuOpened = false" > -
+ +
- - {{ createdAt }} - + -- cgit v1.2.3-70-g09d2 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/chat_list_item/chat_list_item.js | 9 +- src/components/chat_list_item/chat_list_item.scss | 9 +- src/components/chat_list_item/chat_list_item.vue | 3 +- src/components/chat_message/chat_message.js | 2 + src/components/chat_message/chat_message.scss | 6 +- src/components/chat_message/chat_message.vue | 1 + .../settings_modal/tabs/theme_tab/theme_tab.js | 2 +- src/components/status/status.vue | 10 +- src/components/status_body/status_body.js | 147 +++++++++++++++++++++ src/components/status_body/status_body.scss | 112 ++++++++++++++++ src/components/status_body/status_body.vue | 95 +++++++++++++ src/components/status_content/status_content.js | 4 +- src/components/status_content/status_content.vue | 102 +------------- src/components/status_text/status_text.js | 147 --------------------- src/components/status_text/status_text.vue | 95 ------------- .../entity_normalizer/entity_normalizer.service.js | 2 + .../mini_html_converter.service.js | 2 +- yarn.lock | 81 ++++++++++-- 18 files changed, 460 insertions(+), 369 deletions(-) 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 delete mode 100644 src/components/status_text/status_text.js delete mode 100644 src/components/status_text/status_text.vue (limited to 'src/components/chat_message') diff --git a/src/components/chat_list_item/chat_list_item.js b/src/components/chat_list_item/chat_list_item.js index bee1ad53..e01b9bd4 100644 --- a/src/components/chat_list_item/chat_list_item.js +++ b/src/components/chat_list_item/chat_list_item.js @@ -1,5 +1,5 @@ import { mapState } from 'vuex' -import StatusContent from '../status_content/status_content.vue' +import StatusBody from '../status_content/status_content.vue' import fileType from 'src/services/file_type/file_type.service' import UserAvatar from '../user_avatar/user_avatar.vue' import AvatarList from '../avatar_list/avatar_list.vue' @@ -16,7 +16,7 @@ const ChatListItem = { AvatarList, Timeago, ChatTitle, - StatusContent + StatusBody }, computed: { ...mapState({ @@ -38,12 +38,15 @@ const ChatListItem = { }, messageForStatusContent () { const message = this.chat.lastMessage + const messageEmojis = message ? message.emojis : [] const isYou = message && message.account_id === this.currentUser.id - const content = message ? (this.attachmentInfo || message.content) : '' + const content = message ? (this.attachmentInfo || message.content_raw) : '' const messagePreview = isYou ? `${this.$t('chats.you')} ${content}` : content return { summary: '', + emojis: messageEmojis, statusnet_html: messagePreview, + raw_html: messagePreview, text: messagePreview, attachments: [] } diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss index 9e97b28e..57332bed 100644 --- a/src/components/chat_list_item/chat_list_item.scss +++ b/src/components/chat_list_item/chat_list_item.scss @@ -77,18 +77,15 @@ border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); } - .StatusContent { - img.emoji { - width: 1.4em; - height: 1.4em; - } + .chat-preview-body { + --emoji-size: 1.4em; } .time-wrapper { line-height: 1.4em; } - .single-line { + .chat-preview-body { padding-right: 1em; } } diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue index cd3f436e..c7c0e878 100644 --- a/src/components/chat_list_item/chat_list_item.vue +++ b/src/components/chat_list_item/chat_list_item.vue @@ -29,7 +29,8 @@
- diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js index bb380f87..d126d453 100644 --- a/src/components/chat_message/chat_message.js +++ b/src/components/chat_message/chat_message.js @@ -57,6 +57,8 @@ const ChatMessage = { messageForStatusContent () { return { summary: '', + emojis: this.message.emojis, + raw_html: this.message.content_raw, statusnet_html: this.message.content, text: this.message.content, attachments: this.message.attachments diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss index e4351d3b..220355ea 100644 --- a/src/components/chat_message/chat_message.scss +++ b/src/components/chat_message/chat_message.scss @@ -89,8 +89,9 @@ } .without-attachment { - .status-content { - &::after { + .message-content { + // TODO figure out how to do it properly + .text::after { margin-right: 5.4em; content: " "; display: inline-block; @@ -162,6 +163,7 @@ .visible { opacity: 1; } + } .chat-message-date-separator { diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue index 0f3fc97d..d62b831d 100644 --- a/src/components/chat_message/chat_message.vue +++ b/src/components/chat_message/chat_message.vue @@ -71,6 +71,7 @@
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js index 1388f74b..63416e93 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js @@ -474,7 +474,7 @@ export default { this.loadThemeFromLocalStorage(false, true) break case 'file': - console.err('Forcing snapshout from file is not supported yet') + console.error('Forcing snapshout from file is not supported yet') break } this.dismissWarning() diff --git a/src/components/status/status.vue b/src/components/status/status.vue index cc5fb79f..a4247cd4 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -89,7 +89,10 @@ v-if="retweeterHtml" :to="retweeterProfileLink" > - + - +

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 @@ + + + diff --git a/src/components/status_text/status_text.js b/src/components/status_text/status_text.js deleted file mode 100644 index e0b11edc..00000000 --- a/src/components/status_text/status_text.js +++ /dev/null @@ -1,147 +0,0 @@ -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.err('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.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_text/status_text.vue b/src/components/status_text/status_text.vue deleted file mode 100644 index bf723e15..00000000 --- a/src/components/status_text/status_text.vue +++ /dev/null @@ -1,95 +0,0 @@ - - diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js index 8dc22823..13162dcf 100644 --- a/src/services/entity_normalizer/entity_normalizer.service.js +++ b/src/services/entity_normalizer/entity_normalizer.service.js @@ -448,6 +448,8 @@ export const parseChatMessage = (message) => { output.id = message.id output.created_at = new Date(message.created_at) output.chat_id = message.chat_id + output.emojis = message.emojis + output.content_raw = message.content if (message.content) { output.content = addEmojis(message.content, message.emojis) } else { diff --git a/src/services/mini_html_converter/mini_html_converter.service.js b/src/services/mini_html_converter/mini_html_converter.service.js index 01f8adf8..900752cd 100644 --- a/src/services/mini_html_converter/mini_html_converter.service.js +++ b/src/services/mini_html_converter/mini_html_converter.service.js @@ -1,6 +1,6 @@ /** * This is a not-so-tiny purpose-built HTML parser/processor. It was made for use - * with StatusText component for purpose of replacing tags with vue components + * with StatusBody component for purpose of replacing tags with vue components * * known issue: doesn't handle CDATA so nested CDATA might not work well * diff --git a/yarn.lock b/yarn.lock index 23cc895b..9329cc3a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1011,23 +1011,86 @@ resolved "https://registry.yarnpkg.com/@ungap/event-target/-/event-target-0.1.0.tgz#88d527d40de86c4b0c99a060ca241d755999915b" integrity sha512-W2oyj0Fe1w/XhPZjkI3oUcDUAmu5P4qsdT2/2S8aMhtAWM/CE/jYWtji0pKNPDfxLI75fa5gWSEmnynKMNP/oA== -"@vue/babel-helper-vue-jsx-merge-props@^1.0.0": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.0.0.tgz#048fe579958da408fb7a8b2a3ec050b50a661040" - integrity sha512-6tyf5Cqm4m6v7buITuwS+jHzPlIPxbFzEhXR5JGZpbrvOcp1hiQKckd305/3C7C36wFekNTQSxAtgeM0j0yoUw== +"@vue/babel-helper-vue-jsx-merge-props@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz#31624a7a505fb14da1d58023725a4c5f270e6a81" + integrity sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA== -"@vue/babel-plugin-transform-vue-jsx@^1.1.2": - version "1.1.2" - resolved "https://registry.yarnpkg.com/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.1.2.tgz#c0a3e6efc022e75e4247b448a8fc6b86f03e91c0" - integrity sha512-YfdaoSMvD1nj7+DsrwfTvTnhDXI7bsuh+Y5qWwvQXlD24uLgnsoww3qbiZvWf/EoviZMrvqkqN4CBw0W3BWUTQ== +"@vue/babel-plugin-transform-vue-jsx@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.2.1.tgz#646046c652c2f0242727f34519d917b064041ed7" + integrity sha512-HJuqwACYehQwh1fNT8f4kyzqlNMpBuUK4rSiSES5D4QsYncv5fxFsLyrxFPG2ksO7t5WP+Vgix6tt6yKClwPzA== dependencies: "@babel/helper-module-imports" "^7.0.0" "@babel/plugin-syntax-jsx" "^7.2.0" - "@vue/babel-helper-vue-jsx-merge-props" "^1.0.0" + "@vue/babel-helper-vue-jsx-merge-props" "^1.2.1" html-tags "^2.0.0" lodash.kebabcase "^4.1.1" svg-tags "^1.0.0" +"@vue/babel-preset-jsx@^1.2.4": + version "1.2.4" + resolved "https://registry.yarnpkg.com/@vue/babel-preset-jsx/-/babel-preset-jsx-1.2.4.tgz#92fea79db6f13b01e80d3a0099e2924bdcbe4e87" + integrity sha512-oRVnmN2a77bYDJzeGSt92AuHXbkIxbf/XXSE3klINnh9AXBmVS1DGa1f0d+dDYpLfsAKElMnqKTQfKn7obcL4w== + dependencies: + "@vue/babel-helper-vue-jsx-merge-props" "^1.2.1" + "@vue/babel-plugin-transform-vue-jsx" "^1.2.1" + "@vue/babel-sugar-composition-api-inject-h" "^1.2.1" + "@vue/babel-sugar-composition-api-render-instance" "^1.2.4" + "@vue/babel-sugar-functional-vue" "^1.2.2" + "@vue/babel-sugar-inject-h" "^1.2.2" + "@vue/babel-sugar-v-model" "^1.2.3" + "@vue/babel-sugar-v-on" "^1.2.3" + +"@vue/babel-sugar-composition-api-inject-h@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@vue/babel-sugar-composition-api-inject-h/-/babel-sugar-composition-api-inject-h-1.2.1.tgz#05d6e0c432710e37582b2be9a6049b689b6f03eb" + integrity sha512-4B3L5Z2G+7s+9Bwbf+zPIifkFNcKth7fQwekVbnOA3cr3Pq71q71goWr97sk4/yyzH8phfe5ODVzEjX7HU7ItQ== + dependencies: + "@babel/plugin-syntax-jsx" "^7.2.0" + +"@vue/babel-sugar-composition-api-render-instance@^1.2.4": + version "1.2.4" + resolved "https://registry.yarnpkg.com/@vue/babel-sugar-composition-api-render-instance/-/babel-sugar-composition-api-render-instance-1.2.4.tgz#e4cbc6997c344fac271785ad7a29325c51d68d19" + integrity sha512-joha4PZznQMsxQYXtR3MnTgCASC9u3zt9KfBxIeuI5g2gscpTsSKRDzWQt4aqNIpx6cv8On7/m6zmmovlNsG7Q== + dependencies: + "@babel/plugin-syntax-jsx" "^7.2.0" + +"@vue/babel-sugar-functional-vue@^1.2.2": + version "1.2.2" + resolved "https://registry.yarnpkg.com/@vue/babel-sugar-functional-vue/-/babel-sugar-functional-vue-1.2.2.tgz#267a9ac8d787c96edbf03ce3f392c49da9bd2658" + integrity sha512-JvbgGn1bjCLByIAU1VOoepHQ1vFsroSA/QkzdiSs657V79q6OwEWLCQtQnEXD/rLTA8rRit4rMOhFpbjRFm82w== + dependencies: + "@babel/plugin-syntax-jsx" "^7.2.0" + +"@vue/babel-sugar-inject-h@^1.2.2": + version "1.2.2" + resolved "https://registry.yarnpkg.com/@vue/babel-sugar-inject-h/-/babel-sugar-inject-h-1.2.2.tgz#d738d3c893367ec8491dcbb669b000919293e3aa" + integrity sha512-y8vTo00oRkzQTgufeotjCLPAvlhnpSkcHFEp60+LJUwygGcd5Chrpn5480AQp/thrxVm8m2ifAk0LyFel9oCnw== + dependencies: + "@babel/plugin-syntax-jsx" "^7.2.0" + +"@vue/babel-sugar-v-model@^1.2.3": + version "1.2.3" + resolved "https://registry.yarnpkg.com/@vue/babel-sugar-v-model/-/babel-sugar-v-model-1.2.3.tgz#fa1f29ba51ebf0aa1a6c35fa66d539bc459a18f2" + integrity sha512-A2jxx87mySr/ulAsSSyYE8un6SIH0NWHiLaCWpodPCVOlQVODCaSpiR4+IMsmBr73haG+oeCuSvMOM+ttWUqRQ== + dependencies: + "@babel/plugin-syntax-jsx" "^7.2.0" + "@vue/babel-helper-vue-jsx-merge-props" "^1.2.1" + "@vue/babel-plugin-transform-vue-jsx" "^1.2.1" + camelcase "^5.0.0" + html-tags "^2.0.0" + svg-tags "^1.0.0" + +"@vue/babel-sugar-v-on@^1.2.3": + version "1.2.3" + resolved "https://registry.yarnpkg.com/@vue/babel-sugar-v-on/-/babel-sugar-v-on-1.2.3.tgz#342367178586a69f392f04bfba32021d02913ada" + integrity sha512-kt12VJdz/37D3N3eglBywV8GStKNUhNrsxChXIV+o0MwVXORYuhDTHJRKPgLJRb/EY3vM2aRFQdxJBp9CLikjw== + dependencies: + "@babel/plugin-syntax-jsx" "^7.2.0" + "@vue/babel-plugin-transform-vue-jsx" "^1.2.1" + camelcase "^5.0.0" + "@vue/test-utils@^1.0.0-beta.26": version "1.0.0-beta.28" resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.0.0-beta.28.tgz#767c43413df8cde86128735e58923803e444b9a5" -- cgit v1.2.3-70-g09d2 From 90a188f2c3c16b926c75bf4aa749633e6967e5a0 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sat, 12 Jun 2021 19:54:03 +0300 Subject: cleanup --- src/components/chat_list_item/chat_list_item.js | 3 +-- src/components/chat_message/chat_message.js | 3 +-- src/components/status_body/status_body.js | 2 +- src/services/entity_normalizer/entity_normalizer.service.js | 5 ++--- .../specs/services/entity_normalizer/entity_normalizer.spec.js | 9 --------- 5 files changed, 5 insertions(+), 17 deletions(-) (limited to 'src/components/chat_message') diff --git a/src/components/chat_list_item/chat_list_item.js b/src/components/chat_list_item/chat_list_item.js index e01b9bd4..e5032176 100644 --- a/src/components/chat_list_item/chat_list_item.js +++ b/src/components/chat_list_item/chat_list_item.js @@ -40,12 +40,11 @@ const ChatListItem = { const message = this.chat.lastMessage const messageEmojis = message ? message.emojis : [] const isYou = message && message.account_id === this.currentUser.id - const content = message ? (this.attachmentInfo || message.content_raw) : '' + const content = message ? (this.attachmentInfo || message.content) : '' const messagePreview = isYou ? `${this.$t('chats.you')} ${content}` : content return { summary: '', emojis: messageEmojis, - statusnet_html: messagePreview, raw_html: messagePreview, text: messagePreview, attachments: [] diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js index d126d453..9a2d1e7d 100644 --- a/src/components/chat_message/chat_message.js +++ b/src/components/chat_message/chat_message.js @@ -58,8 +58,7 @@ const ChatMessage = { return { summary: '', emojis: this.message.emojis, - raw_html: this.message.content_raw, - statusnet_html: this.message.content, + raw_html: this.message.content, text: this.message.content, attachments: this.message.attachments } diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js index 14558aca..26491e1b 100644 --- a/src/components/status_body/status_body.js +++ b/src/components/status_body/status_body.js @@ -53,7 +53,7 @@ const StatusContent = { // 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 () { diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js index 13162dcf..613ed566 100644 --- a/src/services/entity_normalizer/entity_normalizer.service.js +++ b/src/services/entity_normalizer/entity_normalizer.service.js @@ -267,7 +267,6 @@ export const parseStatus = (data) => { output.type = data.reblog ? 'retweet' : 'status' output.nsfw = data.sensitive - output.statusnet_html = addEmojis(data.content, data.emojis) output.raw_html = data.content output.emojis = data.emojis @@ -329,7 +328,7 @@ export const parseStatus = (data) => { output.nsfw = data.nsfw } - output.statusnet_html = data.statusnet_html + output.raw_html = data.statusnet_html output.text = data.text output.in_reply_to_status_id = data.in_reply_to_status_id @@ -449,7 +448,7 @@ export const parseChatMessage = (message) => { output.created_at = new Date(message.created_at) output.chat_id = message.chat_id output.emojis = message.emojis - output.content_raw = message.content + output.content = message.content if (message.content) { output.content = addEmojis(message.content, message.emojis) } else { diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js index 759539e0..c8965785 100644 --- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js +++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js @@ -23,7 +23,6 @@ const makeMockStatusQvitter = (overrides = {}) => { repeat_num: 0, repeated: false, statusnet_conversation_id: '16300488', - statusnet_html: '

haha benis

', summary: null, tags: [], text: 'haha benis', @@ -233,14 +232,6 @@ describe('API Entities normalizer', () => { expect(parsedRepeat).to.have.deep.property('retweeted_status.id', 'deadbeef') }) - it('adds emojis to post content', () => { - const post = makeMockStatusMasto({ emojis: makeMockEmojiMasto(), content: 'Makes you think :thinking:' }) - - const parsedPost = parseStatus(post) - - expect(parsedPost).to.have.property('statusnet_html').that.contains(' { const post = makeMockStatusMasto({ emojis: makeMockEmojiMasto(), spoiler_text: 'CW: 300 IQ :thinking:' }) -- cgit v1.2.3-70-g09d2 From 609dc5da0c0c4cb64da68af8c9ec999be6dd0a83 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 13 Jun 2021 21:42:25 +0300 Subject: fix chats messages --- src/components/chat_message/chat_message.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/components/chat_message') diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js index 9a2d1e7d..eb195bc1 100644 --- a/src/components/chat_message/chat_message.js +++ b/src/components/chat_message/chat_message.js @@ -58,8 +58,8 @@ const ChatMessage = { return { summary: '', emojis: this.message.emojis, - raw_html: this.message.content, - text: this.message.content, + raw_html: this.message.content || '', + text: this.message.content || '', attachments: this.message.attachments } }, -- cgit v1.2.3-70-g09d2 From 1fdfc42159ed91090c5a7ab36c7e61f3d9527941 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 13 Jun 2021 21:43:45 +0300 Subject: fix mentions in chats --- src/components/chat_message/chat_message.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/chat_message') diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss index 220355ea..de6990b6 100644 --- a/src/components/chat_message/chat_message.scss +++ b/src/components/chat_message/chat_message.scss @@ -91,7 +91,7 @@ .without-attachment { .message-content { // TODO figure out how to do it properly - .text::after { + .rich-content-wrapper::after { margin-right: 5.4em; content: " "; display: inline-block; -- cgit v1.2.3-70-g09d2 From 1717a3aaf2fb104797669ecddbd4418dca10c0cd Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 16 Jun 2021 12:44:04 +0300 Subject: fix chats again --- src/components/chat_message/chat_message.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/chat_message') diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss index de6990b6..fcfa7c8a 100644 --- a/src/components/chat_message/chat_message.scss +++ b/src/components/chat_message/chat_message.scss @@ -91,7 +91,7 @@ .without-attachment { .message-content { // TODO figure out how to do it properly - .rich-content-wrapper::after { + .RichContent::after { margin-right: 5.4em; content: " "; display: inline-block; -- cgit v1.2.3-70-g09d2 From e654fead23ebb457f81e8642c65e1f3e98ee0027 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 17 Jun 2021 16:29:46 +0300 Subject: refactored attachments and gallery. All attachments now are in gallery. --- src/components/attachment/attachment.js | 41 ++- src/components/attachment/attachment.vue | 307 ++++++----------------- src/components/chat_message/chat_message.scss | 4 - src/components/flash/flash.js | 5 +- src/components/flash/flash.vue | 7 - src/components/gallery/gallery.js | 65 +++-- src/components/gallery/gallery.vue | 175 +++++++++---- src/components/status_content/status_content.js | 20 +- src/components/status_content/status_content.vue | 31 +-- src/i18n/en.json | 6 +- 10 files changed, 296 insertions(+), 365 deletions(-) (limited to 'src/components/chat_message') diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index 8849f501..06928ca6 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -11,7 +11,9 @@ import { faImage, faVideo, faPlayCircle, - faTimes + faTimes, + faStop, + faSearchPlus } from '@fortawesome/free-solid-svg-icons' library.add( @@ -20,7 +22,9 @@ library.add( faImage, faVideo, faPlayCircle, - faTimes + faTimes, + faStop, + faSearchPlus ) const Attachment = { @@ -28,7 +32,6 @@ const Attachment = { 'attachment', 'nsfw', 'size', - 'allowPlay', 'setMedia', 'naturalSizeLoad' ], @@ -40,7 +43,8 @@ const Attachment = { loading: false, img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'), modalOpen: false, - showHidden: false + showHidden: false, + flashLoaded: false } }, components: { @@ -49,9 +53,22 @@ const Attachment = { VideoAttachment }, computed: { + classNames () { + return [ + { + '-loading': this.loading, + '-nsfw-placeholder': this.hidden + }, + '-' + this.type, + `-${this.useContainFit ? 'contain' : 'cover'}-fit` + ] + }, usePlaceholder () { return this.size === 'hide' || this.type === 'unknown' }, + useContainFit () { + return this.$store.getters.mergedConfig.useContainFit + }, placeholderName () { if (this.attachment.description === '' || !this.attachment.description) { return this.type.toUpperCase() @@ -79,10 +96,6 @@ const Attachment = { isSmall () { return this.size === 'small' }, - fullwidth () { - if (this.size === 'hide') return false - return this.type === 'html' || this.type === 'audio' || this.type === 'unknown' - }, useModal () { const modalTypes = this.size === 'hide' ? ['image', 'video', 'audio'] : this.mergedConfig.playVideosInModal @@ -100,12 +113,20 @@ const Attachment = { }, openModal (event) { if (this.useModal) { - event.stopPropagation() - event.preventDefault() this.setMedia() this.$store.dispatch('setCurrent', this.attachment) } }, + openModalForce (event) { + this.setMedia() + this.$store.dispatch('setCurrent', this.attachment) + }, + stopFlash () { + this.$refs.flash.closePlayer() + }, + setFlashLoaded (event) { + this.flashLoaded = event + }, toggleHidden (event) { if ( (this.mergedConfig.useOneClickNsfw && !this.showHidden) && diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index f80badfd..fe9e9398 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -1,7 +1,8 @@ - + diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss index fcfa7c8a..1dbe1cad 100644 --- a/src/components/chat_message/chat_message.scss +++ b/src/components/chat_message/chat_message.scss @@ -62,10 +62,6 @@ &.with-media { width: 100%; - .gallery-row { - overflow: hidden; - } - .status { width: 100%; } diff --git a/src/components/flash/flash.js b/src/components/flash/flash.js index d03384c7..87f940a7 100644 --- a/src/components/flash/flash.js +++ b/src/components/flash/flash.js @@ -39,12 +39,13 @@ const Flash = { this.player = 'error' }) this.ruffleInstance = player + this.$emit('playerOpened') }) }, closePlayer () { - console.log(this.ruffleInstance) - this.ruffleInstance.remove() + this.ruffleInstance && this.ruffleInstance.remove() this.player = false + this.$emit('playerClosed') } } } diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue index d20d037b..5a77d235 100644 --- a/src/components/flash/flash.vue +++ b/src/components/flash/flash.vue @@ -36,13 +36,6 @@

- diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js index f856fd0a..134ea77e 100644 --- a/src/components/gallery/gallery.js +++ b/src/components/gallery/gallery.js @@ -1,15 +1,17 @@ import Attachment from '../attachment/attachment.vue' -import { chunk, last, dropRight, sumBy } from 'lodash' +import { sumBy } from 'lodash' const Gallery = { props: [ 'attachments', 'nsfw', - 'setMedia' + 'setMedia', + 'size' ], data () { return { - sizes: {} + sizes: {}, + hidingLong: true } }, components: { Attachment }, @@ -18,26 +20,54 @@ const Gallery = { if (!this.attachments) { return [] } - const rows = chunk(this.attachments, 3) - if (last(rows).length === 1 && rows.length > 1) { - // if 1 attachment on last row -> add it to the previous row instead - const lastAttachment = last(rows)[0] - const allButLastRow = dropRight(rows) - last(allButLastRow).push(lastAttachment) - return allButLastRow + console.log(this.size) + if (this.size === 'hide') { + return this.attachments.map(item => ({ minimal: true, items: [item] })) } + const rows = this.attachments.reduce((acc, attachment, i) => { + if (attachment.mimetype.includes('audio')) { + return [...acc, { audio: true, items: [attachment] }, { items: [] }] + } + const maxPerRow = 3 + const attachmentsRemaining = this.attachments.length - i - 1 + const currentRow = acc[acc.length - 1].items + if ( + currentRow.length <= maxPerRow || + attachmentsRemaining === 1 + ) { + currentRow.push(attachment) + } + if (currentRow.length === maxPerRow && attachmentsRemaining > 1) { + return [...acc, { items: [] }] + } else { + return acc + } + }, [{ items: [] }]).filter(_ => _.items.length > 0) return rows }, - useContainFit () { - return this.$store.getters.mergedConfig.useContainFit + attachmentsDimensionalScore () { + return this.rows.reduce((acc, row) => { + return acc + (row.audio ? 0.25 : (1 / (row.items.length + 0.6))) + }, 0) + }, + tooManyAttachments () { + if (this.size === 'hide') { + return this.attachments.length > 8 + } else { + return this.attachmentsDimensionalScore > 1 + } } }, methods: { onNaturalSizeLoad (id, size) { this.$set(this.sizes, id, size) }, - rowStyle (itemsPerRow) { - return { 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` } + rowStyle (row) { + if (row.audio) { + return { 'padding-bottom': '25%' } // fixed reduced height for audio + } else if (!row.minimal) { + return { 'padding-bottom': `${(100 / (row.items.length + 0.6))}%` } + } }, itemStyle (id, row) { const total = sumBy(row, item => this.getAspectRatio(item.id)) @@ -46,6 +76,13 @@ const Gallery = { getAspectRatio (id) { const size = this.sizes[id] return size ? size.width / size.height : 1 + }, + toggleHidingLong (event) { + this.hidingLong = event + }, + openGallery () { + this.setMedia() + this.$store.dispatch('setCurrent', this.attachments[0]) } } } diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue index ca91c9c1..8e08e514 100644 --- a/src/components/gallery/gallery.vue +++ b/src/components/gallery/gallery.vue @@ -1,26 +1,74 @@