\n const nonEmptyElements = new Set(visualLineElements)\n // Difference\n for (let elem of emptyElements) {\n nonEmptyElements.delete(elem)\n }\n\n // All elements that we are recognizing\n const allElements = new Set([\n ...nonEmptyElements.values(),\n ...emptyElements.values()\n ])\n\n let buffer = [] // Current output buffer\n const level = [] // How deep we are in tags and which tags were there\n let textBuffer = '' // Current line content\n let tagBuffer = null // Current tag buffer, if null = we are not currently reading a tag\n\n const flush = () => { // Processes current line buffer, adds it to output buffer and clears line buffer\n if (textBuffer.trim().length > 0) {\n buffer.push({ level: [...level], text: textBuffer })\n } else {\n buffer.push(textBuffer)\n }\n textBuffer = ''\n }\n\n const handleBr = (tag) => { // handles single newlines/linebreaks/selfclosing\n flush()\n buffer.push(tag)\n }\n\n const handleOpen = (tag) => { // handles opening tags\n flush()\n buffer.push(tag)\n level.unshift(getTagName(tag))\n }\n\n const handleClose = (tag) => { // handles closing tags\n if (level[0] === getTagName(tag)) {\n flush()\n buffer.push(tag)\n level.shift()\n } else { // Broken case\n textBuffer += tag\n }\n }\n\n for (let i = 0; i < html.length; i++) {\n const char = html[i]\n if (char === '<' && tagBuffer === null) {\n tagBuffer = char\n } else if (char !== '>' && tagBuffer !== null) {\n tagBuffer += char\n } else if (char === '>' && tagBuffer !== null) {\n tagBuffer += char\n const tagFull = tagBuffer\n tagBuffer = null\n const tagName = getTagName(tagFull)\n if (allElements.has(tagName)) {\n if (linebreakElements.has(tagName)) {\n handleBr(tagFull)\n } else if (nonEmptyElements.has(tagName)) {\n if (tagFull[1] === '/') {\n handleClose(tagFull)\n } else if (tagFull[tagFull.length - 2] === '/') {\n // self-closing\n handleBr(tagFull)\n } else {\n handleOpen(tagFull)\n }\n } else {\n textBuffer += tagFull\n }\n } else {\n textBuffer += tagFull\n }\n } else if (char === '\\n') {\n handleBr(char)\n } else {\n textBuffer += char\n }\n }\n if (tagBuffer) {\n textBuffer += tagBuffer\n }\n\n flush()\n\n return buffer\n}\n","\n
\n \n 0\"\n class=\"action-counter\"\n >\n {{ status.replies_count }}\n \n
\n\n\n\n\n\n","import { library } from '@fortawesome/fontawesome-svg-core'\nimport { faReply } from '@fortawesome/free-solid-svg-icons'\n\nlibrary.add(faReply)\n\nconst ReplyButton = {\n name: 'ReplyButton',\n props: ['status', 'replying'],\n computed: {\n loggedIn () {\n return !!this.$store.state.users.currentUser\n }\n }\n}\n\nexport default ReplyButton\n","import { render } from \"./reply_button.vue?vue&type=template&id=56f413c0\"\nimport script from \"./reply_button.js?vue&type=script&lang=js\"\nexport * from \"./reply_button.js?vue&type=script&lang=js\"\n\nimport \"./reply_button.vue?vue&type=style&index=0&id=56f413c0&lang=scss\"\n\nimport exportComponent from \"/home/hannah/personal/pleroma-fe/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__","\n \n \n 0\"\n class=\"action-counter\"\n >\n {{ status.fave_num }}\n \n
\n\n\n\n\n\n","import { mapGetters } from 'vuex'\nimport { library } from '@fortawesome/fontawesome-svg-core'\nimport { faStar } from '@fortawesome/free-solid-svg-icons'\nimport {\n faStar as faStarRegular\n} from '@fortawesome/free-regular-svg-icons'\n\nlibrary.add(\n faStar,\n faStarRegular\n)\n\nconst FavoriteButton = {\n props: ['status', 'loggedIn'],\n data () {\n return {\n animated: false\n }\n },\n methods: {\n favorite () {\n if (!this.status.favorited) {\n this.$store.dispatch('favorite', { id: this.status.id })\n } else {\n this.$store.dispatch('unfavorite', { id: this.status.id })\n }\n this.animated = true\n setTimeout(() => {\n this.animated = false\n }, 500)\n }\n },\n computed: {\n ...mapGetters(['mergedConfig'])\n }\n}\n\nexport default FavoriteButton\n","import { render } from \"./favorite_button.vue?vue&type=template&id=21f861d8\"\nimport script from \"./favorite_button.js?vue&type=script&lang=js\"\nexport * from \"./favorite_button.js?vue&type=script&lang=js\"\n\nimport \"./favorite_button.vue?vue&type=style&index=0&id=21f861d8&lang=scss\"\n\nimport exportComponent from \"/home/hannah/personal/pleroma-fe/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__","\n \n \n
\n \n \n {{ emoji.replacement }}\n \n \n \n \n \n {{ emoji.replacement }}\n \n \n \n
\n \n \n \n \n 0\"\n class=\"no-event\"\n >\n {{ status.repeat_num }}\n \n
\n\n\n\n\n\n","import { library } from '@fortawesome/fontawesome-svg-core'\nimport { faRetweet } from '@fortawesome/free-solid-svg-icons'\n\nlibrary.add(faRetweet)\n\nconst RetweetButton = {\n props: ['status', 'loggedIn', 'visibility'],\n data () {\n return {\n animated: false\n }\n },\n methods: {\n retweet () {\n if (!this.status.repeated) {\n this.$store.dispatch('retweet', { id: this.status.id })\n } else {\n this.$store.dispatch('unretweet', { id: this.status.id })\n }\n this.animated = true\n setTimeout(() => {\n this.animated = false\n }, 500)\n }\n },\n computed: {\n mergedConfig () {\n return this.$store.getters.mergedConfig\n }\n }\n}\n\nexport default RetweetButton\n","import { render } from \"./retweet_button.vue?vue&type=template&id=46fe49c4\"\nimport script from \"./retweet_button.js?vue&type=script&lang=js\"\nexport * from \"./retweet_button.js?vue&type=script&lang=js\"\n\nimport \"./retweet_button.vue?vue&type=style&index=0&id=46fe49c4&lang=scss\"\n\nimport exportComponent from \"/home/hannah/personal/pleroma-fe/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__","\n \n \n \n
\n \n \n \n \n
\n \n \n \n \n \n {{ reaction.count }}\n \n \n \n {{ reaction.name }}\n \n {{ reaction.count }}\n \n \n \n \n {{ showAll ? $t('general.show_less') : showMoreString }}\n \n
\n\n\n\n\n","import UserAvatar from '../user_avatar/user_avatar.vue'\nimport UserListPopover from '../user_list_popover/user_list_popover.vue'\n\nconst EMOJI_REACTION_COUNT_CUTOFF = 12\n\nconst EmojiReactions = {\n name: 'EmojiReactions',\n components: {\n UserAvatar,\n UserListPopover\n },\n props: ['status'],\n data: () => ({\n showAll: false\n }),\n computed: {\n tooManyReactions () {\n return this.status.emoji_reactions.length > EMOJI_REACTION_COUNT_CUTOFF\n },\n emojiReactions () {\n return this.showAll\n ? this.status.emoji_reactions\n : this.status.emoji_reactions.slice(0, EMOJI_REACTION_COUNT_CUTOFF)\n },\n showMoreString () {\n return `+${this.status.emoji_reactions.length - EMOJI_REACTION_COUNT_CUTOFF}`\n },\n accountsForEmoji () {\n return this.status.emoji_reactions.reduce((acc, reaction) => {\n acc[reaction.name] = reaction.accounts || []\n return acc\n }, {})\n },\n loggedIn () {\n return !!this.$store.state.users.currentUser\n }\n },\n methods: {\n toggleShowAll () {\n this.showAll = !this.showAll\n },\n reactedWith (emoji) {\n return this.status.emoji_reactions.find(r => r.name === emoji).me\n },\n fetchEmojiReactionsByIfMissing () {\n const hasNoAccounts = this.status.emoji_reactions.find(r => !r.accounts)\n if (hasNoAccounts) {\n this.$store.dispatch('fetchEmojiReactionsBy', this.status.id)\n }\n },\n reactWith (emoji) {\n this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })\n },\n unreact (emoji) {\n this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })\n },\n emojiOnClick (emoji, event) {\n if (!this.loggedIn) return\n\n if (this.reactedWith(emoji)) {\n this.unreact(emoji)\n } else {\n this.reactWith(emoji)\n }\n }\n }\n}\n\nexport default EmojiReactions\n","import { render } from \"./emoji_reactions.vue?vue&type=template&id=1bf35779\"\nimport script from \"./emoji_reactions.js?vue&type=script&lang=js\"\nexport * from \"./emoji_reactions.js?vue&type=script&lang=js\"\n\nimport \"./emoji_reactions.vue?vue&type=style&index=0&id=1bf35779&lang=scss\"\n\nimport exportComponent from \"/home/hannah/personal/pleroma-fe/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__","import ReplyButton from '../reply_button/reply_button.vue'\nimport FavoriteButton from '../favorite_button/favorite_button.vue'\nimport ReactButton from '../react_button/react_button.vue'\nimport RetweetButton from '../retweet_button/retweet_button.vue'\nimport ExtraButtons from '../extra_buttons/extra_buttons.vue'\nimport PostStatusForm from '../post_status_form/post_status_form.vue'\nimport UserCard from '../user_card/user_card.vue'\nimport UserAvatar from '../user_avatar/user_avatar.vue'\nimport AvatarList from '../avatar_list/avatar_list.vue'\nimport Timeago from '../timeago/timeago.vue'\nimport StatusContent from '../status_content/status_content.vue'\nimport RichContent from 'src/components/rich_content/rich_content.jsx'\nimport StatusPopover from '../status_popover/status_popover.vue'\nimport UserListPopover from '../user_list_popover/user_list_popover.vue'\nimport EmojiReactions from '../emoji_reactions/emoji_reactions.vue'\nimport MentionsLine from 'src/components/mentions_line/mentions_line.vue'\nimport MentionLink from 'src/components/mention_link/mention_link.vue'\nimport generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'\nimport { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'\nimport { muteWordHits } from '../../services/status_parser/status_parser.js'\nimport { unescape, uniqBy } from 'lodash'\n\nimport { library } from '@fortawesome/fontawesome-svg-core'\nimport {\n faEnvelope,\n faLock,\n faLockOpen,\n faGlobe,\n faTimes,\n faRetweet,\n faReply,\n faPlusSquare,\n faSmileBeam,\n faEllipsisH,\n faStar,\n faEyeSlash,\n faEye,\n faThumbtack,\n faChevronUp,\n faChevronDown,\n faAngleDoubleRight\n} from '@fortawesome/free-solid-svg-icons'\n\nlibrary.add(\n faEnvelope,\n faGlobe,\n faLock,\n faLockOpen,\n faTimes,\n faRetweet,\n faReply,\n faPlusSquare,\n faStar,\n faSmileBeam,\n faEllipsisH,\n faEyeSlash,\n faEye,\n faThumbtack,\n faChevronUp,\n faChevronDown,\n faAngleDoubleRight\n)\n\nconst camelCase = name => name.charAt(0).toUpperCase() + name.slice(1)\n\nconst controlledOrUncontrolledGetters = list => list.reduce((res, name) => {\n const camelized = camelCase(name)\n const toggle = `controlledToggle${camelized}`\n const controlledName = `controlled${camelized}`\n const uncontrolledName = `uncontrolled${camelized}`\n res[name] = function () {\n return ((this.$data[toggle] !== undefined || this.$props[toggle] !== undefined) && this[toggle]) ? this[controlledName] : this[uncontrolledName]\n }\n return res\n}, {})\n\nconst controlledOrUncontrolledToggle = (obj, name) => {\n const camelized = camelCase(name)\n const toggle = `controlledToggle${camelized}`\n const uncontrolledName = `uncontrolled${camelized}`\n if (obj[toggle]) {\n obj[toggle]()\n } else {\n obj[uncontrolledName] = !obj[uncontrolledName]\n }\n}\n\nconst controlledOrUncontrolledSet = (obj, name, val) => {\n const camelized = camelCase(name)\n const set = `controlledSet${camelized}`\n const uncontrolledName = `uncontrolled${camelized}`\n if (obj[set]) {\n obj[set](val)\n } else {\n obj[uncontrolledName] = val\n }\n}\n\nconst Status = {\n name: 'Status',\n components: {\n ReplyButton,\n FavoriteButton,\n ReactButton,\n RetweetButton,\n ExtraButtons,\n PostStatusForm,\n UserCard,\n UserAvatar,\n AvatarList,\n Timeago,\n StatusPopover,\n UserListPopover,\n EmojiReactions,\n StatusContent,\n RichContent,\n MentionLink,\n MentionsLine\n },\n props: [\n 'statusoid',\n 'expandable',\n 'inConversation',\n 'focused',\n 'highlight',\n 'compact',\n 'replies',\n 'isPreview',\n 'noHeading',\n 'inlineExpanded',\n 'showPinned',\n 'inProfile',\n 'profileUserId',\n\n 'simpleTree',\n 'controlledThreadDisplayStatus',\n 'controlledToggleThreadDisplay',\n 'showOtherRepliesAsButton',\n\n 'controlledShowingTall',\n 'controlledToggleShowingTall',\n 'controlledExpandingSubject',\n 'controlledToggleExpandingSubject',\n 'controlledShowingLongSubject',\n 'controlledToggleShowingLongSubject',\n 'controlledReplying',\n 'controlledToggleReplying',\n 'controlledMediaPlaying',\n 'controlledSetMediaPlaying',\n 'dive'\n ],\n data () {\n return {\n uncontrolledReplying: false,\n unmuted: false,\n userExpanded: false,\n uncontrolledMediaPlaying: [],\n suspendable: true,\n error: null,\n headTailLinks: null\n }\n },\n computed: {\n ...controlledOrUncontrolledGetters(['replying', 'mediaPlaying']),\n muteWords () {\n return this.mergedConfig.muteWords\n },\n showReasonMutedThread () {\n return (\n this.status.thread_muted ||\n (this.status.reblog && this.status.reblog.thread_muted)\n ) && !this.inConversation\n },\n repeaterClass () {\n const user = this.statusoid.user\n return highlightClass(user)\n },\n userClass () {\n const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user\n return highlightClass(user)\n },\n deleted () {\n return this.statusoid.deleted\n },\n repeaterStyle () {\n const user = this.statusoid.user\n const highlight = this.mergedConfig.highlight\n return highlightStyle(highlight[user.screen_name])\n },\n userStyle () {\n if (this.noHeading) return\n const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user\n const highlight = this.mergedConfig.highlight\n return highlightStyle(highlight[user.screen_name])\n },\n userProfileLink () {\n return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)\n },\n replyProfileLink () {\n if (this.isReply) {\n const user = this.$store.getters.findUser(this.status.in_reply_to_user_id)\n // FIXME Why user not found sometimes???\n return user ? user.statusnet_profile_url : 'NOT_FOUND'\n }\n },\n retweet () { return !!this.statusoid.retweeted_status },\n retweeterUser () { return this.statusoid.user },\n retweeter () { return this.statusoid.user.name || this.statusoid.user.screen_name_ui },\n retweeterHtml () { return this.statusoid.user.name },\n retweeterProfileLink () { return this.generateUserProfileLink(this.statusoid.user.id, this.statusoid.user.screen_name) },\n status () {\n if (this.retweet) {\n return this.statusoid.retweeted_status\n } else {\n return this.statusoid\n }\n },\n statusFromGlobalRepository () {\n // NOTE: Consider to replace status with statusFromGlobalRepository\n return this.$store.state.statuses.allStatusesObject[this.status.id]\n },\n loggedIn () {\n return !!this.currentUser\n },\n muteWordHits () {\n return muteWordHits(this.status, this.muteWords)\n },\n rtBotStatus () {\n return this.statusoid.user.bot\n },\n botStatus () {\n return this.status.user.bot\n },\n botIndicator () {\n return this.botStatus && !this.hideBotIndication\n },\n rtBotIndicator () {\n return this.rtBotStatus && !this.hideBotIndication\n },\n mentionsLine () {\n if (!this.headTailLinks) return []\n const writtenSet = new Set(this.headTailLinks.writtenMentions.map(_ => _.url))\n return this.status.attentions.filter(attn => {\n // no reply user\n return attn.id !== this.status.in_reply_to_user_id &&\n // no self-replies\n attn.statusnet_profile_url !== this.status.user.statusnet_profile_url &&\n // don't include if mentions is written\n !writtenSet.has(attn.statusnet_profile_url)\n }).map(attn => ({\n url: attn.statusnet_profile_url,\n content: attn.screen_name,\n userId: attn.id\n }))\n },\n hasMentionsLine () {\n return this.mentionsLine.length > 0\n },\n muted () {\n if (this.statusoid.user.id === this.currentUser.id) return false\n const reasonsToMute = this.userIsMuted ||\n // Thread is muted\n status.thread_muted ||\n // Wordfiltered\n this.muteWordHits.length > 0 ||\n // bot status\n (this.muteBotStatuses && this.botStatus && !this.compact)\n return !this.unmuted && !this.shouldNotMute && reasonsToMute\n },\n userIsMuted () {\n if (this.statusoid.user.id === this.currentUser.id) return false\n const { status } = this\n const { reblog } = status\n const relationship = this.$store.getters.relationship(status.user.id)\n const relationshipReblog = reblog && this.$store.getters.relationship(reblog.user.id)\n return status.muted ||\n // Reprööt of a muted post according to BE\n (reblog && reblog.muted) ||\n // Muted user\n relationship.muting ||\n // Muted user of a reprööt\n (relationshipReblog && relationshipReblog.muting)\n },\n shouldNotMute () {\n const { status } = this\n const { reblog } = status\n return (\n (\n this.inProfile && (\n // Don't mute user's posts on user timeline (except reblogs)\n (!reblog && status.user.id === this.profileUserId) ||\n // Same as above but also allow self-reblogs\n (reblog && reblog.user.id === this.profileUserId)\n )\n ) ||\n // Don't mute statuses in muted conversation when said conversation is opened\n (this.inConversation && status.thread_muted)\n // No excuses if post has muted words\n ) && !this.muteWordHits.length > 0\n },\n hideMutedUsers () {\n return this.mergedConfig.hideMutedPosts\n },\n hideMutedThreads () {\n return this.mergedConfig.hideMutedThreads\n },\n hideFilteredStatuses () {\n return this.mergedConfig.hideFilteredStatuses\n },\n hideWordFilteredPosts () {\n return this.mergedConfig.hideWordFilteredPosts\n },\n hideStatus () {\n return (!this.shouldNotMute) && (\n (this.muted && this.hideFilteredStatuses) ||\n (this.userIsMuted && this.hideMutedUsers) ||\n (this.status.thread_muted && this.hideMutedThreads) ||\n (this.muteWordHits.length > 0 && this.hideWordFilteredPosts)\n )\n },\n isFocused () {\n // retweet or root of an expanded conversation\n if (this.focused) {\n return true\n } else if (!this.inConversation) {\n return false\n }\n // use conversation highlight only when in conversation\n return this.status.id === this.highlight\n },\n isReply () {\n return !!(this.status.in_reply_to_status_id && this.status.in_reply_to_user_id)\n },\n replyToName () {\n if (this.status.in_reply_to_screen_name) {\n return this.status.in_reply_to_screen_name\n } else {\n const user = this.$store.getters.findUser(this.status.in_reply_to_user_id)\n return user && user.screen_name_ui\n }\n },\n replySubject () {\n if (!this.status.summary) return ''\n const decodedSummary = unescape(this.status.summary)\n const behavior = this.mergedConfig.subjectLineBehavior\n const startsWithRe = decodedSummary.match(/^re[: ]/i)\n if ((behavior !== 'noop' && startsWithRe) || behavior === 'masto') {\n return decodedSummary\n } else if (behavior === 'email') {\n return 're: '.concat(decodedSummary)\n } else if (behavior === 'noop') {\n return ''\n }\n },\n combinedFavsAndRepeatsUsers () {\n // Use the status from the global status repository since favs and repeats are saved in it\n const combinedUsers = [].concat(\n this.statusFromGlobalRepository.favoritedBy,\n this.statusFromGlobalRepository.rebloggedBy\n )\n return uniqBy(combinedUsers, 'id')\n },\n tags () {\n return this.status.tags.filter(tagObj => tagObj.hasOwnProperty('name')).map(tagObj => tagObj.name).join(' ')\n },\n hidePostStats () {\n return this.mergedConfig.hidePostStats\n },\n muteBotStatuses () {\n return this.mergedConfig.muteBotStatuses\n },\n hideBotIndication () {\n return this.mergedConfig.hideBotIndication\n },\n currentUser () {\n return this.$store.state.users.currentUser\n },\n betterShadow () {\n return this.$store.state.interface.browserSupport.cssFilter\n },\n mergedConfig () {\n return this.$store.getters.mergedConfig\n },\n isSuspendable () {\n return !this.replying && this.mediaPlaying.length === 0\n },\n inThreadForest () {\n return !!this.controlledThreadDisplayStatus\n },\n threadShowing () {\n return this.controlledThreadDisplayStatus === 'showing'\n },\n visibilityLocalized () {\n return this.$i18n.t('general.scope_in_timeline.' + this.status.visibility)\n }\n },\n methods: {\n visibilityIcon (visibility) {\n switch (visibility) {\n case 'private':\n return 'lock'\n case 'unlisted':\n return 'lock-open'\n case 'direct':\n return 'envelope'\n case 'local':\n return 'users'\n default:\n return 'globe'\n }\n },\n showError (error) {\n this.error = error\n },\n clearError () {\n this.error = undefined\n },\n toggleReplying () {\n controlledOrUncontrolledToggle(this, 'replying')\n },\n gotoOriginal (id) {\n if (this.inConversation) {\n this.$emit('goto', id)\n }\n },\n toggleExpanded () {\n this.$emit('toggleExpanded')\n },\n toggleMute () {\n this.unmuted = !this.unmuted\n },\n toggleUserExpanded () {\n this.userExpanded = !this.userExpanded\n },\n generateUserProfileLink (id, name) {\n return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)\n },\n addMediaPlaying (id) {\n controlledOrUncontrolledSet(this, 'mediaPlaying', this.mediaPlaying.concat(id))\n },\n removeMediaPlaying (id) {\n controlledOrUncontrolledSet(this, 'mediaPlaying', this.mediaPlaying.filter(mediaId => mediaId !== id))\n },\n setHeadTailLinks (headTailLinks) {\n this.headTailLinks = headTailLinks\n },\n toggleThreadDisplay () {\n this.controlledToggleThreadDisplay()\n },\n scrollIfHighlighted (highlightId) {\n const id = highlightId\n if (this.status.id === id) {\n let rect = this.$el.getBoundingClientRect()\n if (rect.top < 100) {\n // Post is above screen, match its top to screen top\n window.scrollBy(0, rect.top - 100)\n } else if (rect.height >= (window.innerHeight - 50)) {\n // Post we want to see is taller than screen so match its top to screen top\n window.scrollBy(0, rect.top - 100)\n } else if (rect.bottom > window.innerHeight - 50) {\n // Post is below screen, match its bottom to screen bottom\n window.scrollBy(0, rect.bottom - window.innerHeight + 50)\n }\n }\n }\n },\n watch: {\n 'highlight': function (id) {\n this.scrollIfHighlighted(id)\n },\n 'status.repeat_num': function (num) {\n // refetch repeats when repeat_num is changed in any way\n if (this.isFocused && this.statusFromGlobalRepository.rebloggedBy && this.statusFromGlobalRepository.rebloggedBy.length !== num) {\n this.$store.dispatch('fetchRepeats', this.status.id)\n }\n },\n 'status.fave_num': function (num) {\n // refetch favs when fave_num is changed in any way\n if (this.isFocused && this.statusFromGlobalRepository.favoritedBy && this.statusFromGlobalRepository.favoritedBy.length !== num) {\n this.$store.dispatch('fetchFavs', this.status.id)\n }\n },\n 'isSuspendable': function (val) {\n this.suspendable = val\n }\n }\n}\n\nexport default Status\n","import { render } from \"./status.vue?vue&type=template&id=7387c01f\"\nimport script from \"./status.js?vue&type=script&lang=js\"\nexport * from \"./status.js?vue&type=script&lang=js\"\n\nimport \"./status.scss?vue&type=style&index=0&lang=scss\"\n\nimport exportComponent from \"/home/hannah/personal/pleroma-fe/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__","\n \n \n
\n \n \n \n \n \n \n \n
\n \n \n {{ $t('user_card.muted') }}\n \n \n {{ $t('user_card.mute') }}\n \n
\n \n \n {{ $t('user_card.domain_muted') }}\n \n \n {{ $t('user_card.mute_domain') }}\n \n
\n \n \n {{ $t('user_card.mention') }}\n \n
\n {{ $t('user_card.statuses') }}
\n {{ user.statuses_count }}\n \n
{{ $t('user_card.followees') }}
\n {{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}\n \n{{ $t('user_card.followers') }}
\n {{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}\n \n \n\n \n \n \n \n \n \n {{ $t('user_card.admin_menu.moderation') }}\n \n \n \n \n \n {{ $t('user_card.admin_menu.delete_user') }}\n \n \n {{ $t('general.cancel') }}\n \n \n {{ $t('user_card.admin_menu.delete_user') }}\n \n \n \n \n
\n\n\n\n\n\n","\n {{ $t('user_card.admin_menu.delete_user_confirmation') }}
\n \n\n
\n \n \n \n \n\n
\n \n \n \n \n \n \n \n \n \n
\n\n\n\n\n\n","import { mapState } from 'vuex'\nimport ProgressButton from '../progress_button/progress_button.vue'\nimport Popover from '../popover/popover.vue'\nimport { library } from '@fortawesome/fontawesome-svg-core'\nimport {\n faEllipsisV\n} from '@fortawesome/free-solid-svg-icons'\n\nlibrary.add(\n faEllipsisV\n)\n\nconst AccountActions = {\n props: [\n 'user', 'relationship'\n ],\n data () {\n return { }\n },\n components: {\n ProgressButton,\n Popover\n },\n methods: {\n showRepeats () {\n this.$store.dispatch('showReblogs', this.user.id)\n },\n hideRepeats () {\n this.$store.dispatch('hideReblogs', this.user.id)\n },\n blockUser () {\n this.$store.dispatch('blockUser', this.user.id)\n },\n unblockUser () {\n this.$store.dispatch('unblockUser', this.user.id)\n },\n reportUser () {\n this.$store.dispatch('openUserReportingModal', { userId: this.user.id })\n },\n openChat () {\n this.$router.push({\n name: 'chat',\n params: { username: this.$store.state.users.currentUser.screen_name, recipient_id: this.user.id }\n })\n }\n },\n computed: {\n ...mapState({\n pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable\n })\n }\n}\n\nexport default AccountActions\n","import { render } from \"./account_actions.vue?vue&type=template&id=cbff36f6\"\nimport script from \"./account_actions.js?vue&type=script&lang=js\"\nexport * from \"./account_actions.js?vue&type=script&lang=js\"\n\nimport \"./account_actions.vue?vue&type=style&index=0&id=cbff36f6&lang=scss\"\n\nimport exportComponent from \"/home/hannah/personal/pleroma-fe/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__","import UserAvatar from '../user_avatar/user_avatar.vue'\nimport RemoteFollow from '../remote_follow/remote_follow.vue'\nimport ProgressButton from '../progress_button/progress_button.vue'\nimport FollowButton from '../follow_button/follow_button.vue'\nimport ModerationTools from '../moderation_tools/moderation_tools.vue'\nimport AccountActions from '../account_actions/account_actions.vue'\nimport Select from '../select/select.vue'\nimport RichContent from 'src/components/rich_content/rich_content.jsx'\nimport generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'\nimport { mapGetters } from 'vuex'\nimport { library } from '@fortawesome/fontawesome-svg-core'\nimport {\n faBell,\n faRss,\n faSearchPlus,\n faExternalLinkAlt,\n faEdit\n} from '@fortawesome/free-solid-svg-icons'\n\nlibrary.add(\n faRss,\n faBell,\n faSearchPlus,\n faExternalLinkAlt,\n faEdit\n)\n\nexport default {\n props: [\n 'userId', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered', 'allowZoomingAvatar'\n ],\n data () {\n return {\n followRequestInProgress: false,\n betterShadow: this.$store.state.interface.browserSupport.cssFilter\n }\n },\n created () {\n this.$store.dispatch('fetchUserRelationship', this.user.id)\n },\n computed: {\n user () {\n return this.$store.getters.findUser(this.userId)\n },\n relationship () {\n return this.$store.getters.relationship(this.userId)\n },\n classes () {\n return [{\n 'user-card-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius\n 'user-card-rounded': this.rounded === true, // set border-radius for all sides\n 'user-card-bordered': this.bordered === true // set border for all sides\n }]\n },\n style () {\n return {\n backgroundImage: [\n `linear-gradient(to bottom, var(--profileTint), var(--profileTint))`,\n `url(${this.user.cover_photo})`\n ].join(', ')\n }\n },\n isOtherUser () {\n return this.user.id !== this.$store.state.users.currentUser.id\n },\n subscribeUrl () {\n // eslint-disable-next-line no-undef\n const serverUrl = new URL(this.user.statusnet_profile_url)\n return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`\n },\n loggedIn () {\n return this.$store.state.users.currentUser\n },\n dailyAvg () {\n const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))\n return Math.round(this.user.statuses_count / days)\n },\n userHighlightType: {\n get () {\n const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]\n return (data && data.type) || 'disabled'\n },\n set (type) {\n const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]\n if (type !== 'disabled') {\n this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: (data && data.color) || '#FFFFFF', type })\n } else {\n this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })\n }\n },\n ...mapGetters(['mergedConfig'])\n },\n userHighlightColor: {\n get () {\n const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]\n return data && data.color\n },\n set (color) {\n this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })\n }\n },\n visibleRole () {\n const rights = this.user.rights\n if (!rights) { return }\n const validRole = rights.admin || rights.moderator\n const roleTitle = rights.admin ? 'admin' : 'moderator'\n return validRole && roleTitle\n },\n hideFollowsCount () {\n return this.isOtherUser && this.user.hide_follows_count\n },\n hideFollowersCount () {\n return this.isOtherUser && this.user.hide_followers_count\n },\n ...mapGetters(['mergedConfig'])\n },\n components: {\n UserAvatar,\n RemoteFollow,\n ModerationTools,\n AccountActions,\n ProgressButton,\n FollowButton,\n Select,\n RichContent\n },\n methods: {\n refetchRelationship () {\n return this.$store.dispatch('fetchUserRelationship', this.user.id)\n },\n muteUser () {\n this.$store.dispatch('muteUser', this.user.id)\n },\n unmuteUser () {\n this.$store.dispatch('unmuteUser', this.user.id)\n },\n muteDomain () {\n this.$store.dispatch('muteDomain', this.user.screen_name.split('@')[1])\n .then(() => this.refetchRelationship())\n },\n unmuteDomain () {\n this.$store.dispatch('unmuteDomain', this.user.screen_name.split('@')[1])\n .then(() => this.refetchRelationship())\n },\n subscribeUser () {\n return this.$store.dispatch('subscribeUser', this.user.id)\n },\n unsubscribeUser () {\n return this.$store.dispatch('unsubscribeUser', this.user.id)\n },\n setProfileView (v) {\n if (this.switcher) {\n const store = this.$store\n store.commit('setProfileView', { v })\n }\n },\n linkClicked ({ target }) {\n if (target.tagName === 'SPAN') {\n target = target.parentNode\n }\n if (target.tagName === 'A') {\n window.open(target.href, '_blank')\n }\n },\n userProfileLink (user) {\n return generateProfileLink(\n user.id, user.screen_name,\n this.$store.state.instance.restrictedNicknames\n )\n },\n openProfileTab () {\n this.$store.dispatch('openSettingsModalTab', 'profile')\n },\n zoomAvatar () {\n const attachment = {\n url: this.user.profile_image_url_original,\n mimetype: 'image'\n }\n this.$store.dispatch('setMedia', [attachment])\n this.$store.dispatch('setCurrentMedia', attachment)\n },\n mentionUser () {\n this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })\n }\n }\n}\n","import { render } from \"./user_card.vue?vue&type=template&id=3cf2819d\"\nimport script from \"./user_card.js?vue&type=script&lang=js\"\nexport * from \"./user_card.js?vue&type=script&lang=js\"\n\nimport \"./user_card.scss?vue&type=style&index=0&lang=scss\"\n\nimport exportComponent from \"/home/hannah/personal/pleroma-fe/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__","import { invertLightness, brightness } from 'chromatism'\nimport { alphaBlend, mixrgb } from '../color_convert/color_convert.js'\n/* This is a definition of all layer combinations\n * each key is a topmost layer, each value represents layer underneath\n * this is essentially a simplified tree\n */\nexport const LAYERS = {\n undelay: null, // root\n topBar: null, // no transparency support\n badge: null, // no transparency support\n profileTint: null, // doesn't matter\n fg: null,\n bg: 'underlay',\n highlight: 'bg',\n panel: 'bg',\n popover: 'bg',\n selectedMenu: 'popover',\n btn: 'bg',\n btnPanel: 'panel',\n btnTopBar: 'topBar',\n input: 'bg',\n inputPanel: 'panel',\n inputTopBar: 'topBar',\n alert: 'bg',\n alertPanel: 'panel',\n poll: 'bg',\n chatBg: 'underlay',\n chatMessage: 'chatBg'\n}\n\n/* By default opacity slots have 1 as default opacity\n * this allows redefining it to something else\n */\nexport const DEFAULT_OPACITY = {\n profileTint: 0.5,\n alert: 0.5,\n input: 0.5,\n faint: 0.5,\n underlay: 0.15,\n alertPopup: 0.95\n}\n\n/** SUBJECT TO CHANGE IN THE FUTURE, this is all beta\n * Color and opacity slots definitions. Each key represents a slot.\n *\n * Short-hands:\n * String beginning with `--` - value after dashes treated as sole\n * dependency - i.e. `--value` equivalent to { depends: ['value']}\n * String beginning with `#` - value would be treated as solid color\n * defined in hexadecimal representation (i.e. #FFFFFF) and will be\n * used as default. `#FFFFFF` is equivalent to { default: '#FFFFFF'}\n *\n * Full definition:\n * @property {String[]} depends - color slot names this color depends ones.\n * cyclic dependencies are supported to some extent but not recommended.\n * @property {String} [opacity] - opacity slot used by this color slot.\n * opacity is inherited from parents. To break inheritance graph use null\n * @property {Number} [priority] - EXPERIMENTAL. used to pre-sort slots so\n * that slots with higher priority come earlier\n * @property {Function(mod, ...colors)} [color] - function that will be\n * used to determine the color. By default it just copies first color in\n * dependency list.\n * @argument {Number} mod - `1` (light-on-dark) or `-1` (dark-on-light)\n * depending on background color (for textColor)/given color.\n * @argument {...Object} deps - each argument after mod represents each\n * color from `depends` array. All colors take user customizations into\n * account and represented by { r, g, b } objects.\n * @returns {Object} resulting color, should be in { r, g, b } form\n *\n * @property {Boolean|String} [textColor] - true to mark color slot as text\n * color. This enables automatic text color generation for the slot. Use\n * 'preserve' string if you don't want text color to fall back to\n * black/white. Use 'bw' to only ever use black or white. This also makes\n * following properties required:\n * @property {String} [layer] - which layer the text sit on top on - used\n * to account for transparency in text color calculation\n * layer is inherited from parents. To break inheritance graph use null\n * @property {String} [variant] - which color slot is background (same as\n * above, used to account for transparency)\n */\nexport const SLOT_INHERITANCE = {\n bg: {\n depends: [],\n opacity: 'bg',\n priority: 1\n },\n wallpaper: {\n depends: ['bg'],\n color: (mod, bg) => brightness(-2 * mod, bg).rgb\n },\n fg: {\n depends: [],\n priority: 1\n },\n text: {\n depends: [],\n layer: 'bg',\n opacity: null,\n priority: 1\n },\n underlay: {\n default: '#000000',\n opacity: 'underlay'\n },\n link: {\n depends: ['accent'],\n priority: 1\n },\n accent: {\n depends: ['link'],\n priority: 1\n },\n faint: {\n depends: ['text'],\n opacity: 'faint'\n },\n faintLink: {\n depends: ['link'],\n opacity: 'faint'\n },\n postFaintLink: {\n depends: ['postLink'],\n opacity: 'faint'\n },\n\n cBlue: '#0000ff',\n cRed: '#FF0000',\n cGreen: '#00FF00',\n cOrange: '#E3FF00',\n\n profileBg: {\n depends: ['bg'],\n color: (mod, bg) => ({\n r: Math.floor(bg.r * 0.53),\n g: Math.floor(bg.g * 0.56),\n b: Math.floor(bg.b * 0.59)\n })\n },\n profileTint: {\n depends: ['bg'],\n layer: 'profileTint',\n opacity: 'profileTint'\n },\n\n highlight: {\n depends: ['bg'],\n color: (mod, bg) => brightness(5 * mod, bg).rgb\n },\n highlightLightText: {\n depends: ['lightText'],\n layer: 'highlight',\n textColor: true\n },\n highlightPostLink: {\n depends: ['postLink'],\n layer: 'highlight',\n textColor: 'preserve'\n },\n highlightFaintText: {\n depends: ['faint'],\n layer: 'highlight',\n textColor: true\n },\n highlightFaintLink: {\n depends: ['faintLink'],\n layer: 'highlight',\n textColor: 'preserve'\n },\n highlightPostFaintLink: {\n depends: ['postFaintLink'],\n layer: 'highlight',\n textColor: 'preserve'\n },\n highlightText: {\n depends: ['text'],\n layer: 'highlight',\n textColor: true\n },\n highlightLink: {\n depends: ['link'],\n layer: 'highlight',\n textColor: 'preserve'\n },\n highlightIcon: {\n depends: ['highlight', 'highlightText'],\n color: (mod, bg, text) => mixrgb(bg, text)\n },\n\n popover: {\n depends: ['bg'],\n opacity: 'popover'\n },\n popoverLightText: {\n depends: ['lightText'],\n layer: 'popover',\n textColor: true\n },\n popoverPostLink: {\n depends: ['postLink'],\n layer: 'popover',\n textColor: 'preserve'\n },\n popoverFaintText: {\n depends: ['faint'],\n layer: 'popover',\n textColor: true\n },\n popoverFaintLink: {\n depends: ['faintLink'],\n layer: 'popover',\n textColor: 'preserve'\n },\n popoverPostFaintLink: {\n depends: ['postFaintLink'],\n layer: 'popover',\n textColor: 'preserve'\n },\n popoverText: {\n depends: ['text'],\n layer: 'popover',\n textColor: true\n },\n popoverLink: {\n depends: ['link'],\n layer: 'popover',\n textColor: 'preserve'\n },\n popoverIcon: {\n depends: ['popover', 'popoverText'],\n color: (mod, bg, text) => mixrgb(bg, text)\n },\n\n selectedPost: '--highlight',\n selectedPostFaintText: {\n depends: ['highlightFaintText'],\n layer: 'highlight',\n variant: 'selectedPost',\n textColor: true\n },\n selectedPostLightText: {\n depends: ['highlightLightText'],\n layer: 'highlight',\n variant: 'selectedPost',\n textColor: true\n },\n selectedPostPostLink: {\n depends: ['highlightPostLink'],\n layer: 'highlight',\n variant: 'selectedPost',\n textColor: 'preserve'\n },\n selectedPostFaintLink: {\n depends: ['highlightFaintLink'],\n layer: 'highlight',\n variant: 'selectedPost',\n textColor: 'preserve'\n },\n selectedPostText: {\n depends: ['highlightText'],\n layer: 'highlight',\n variant: 'selectedPost',\n textColor: true\n },\n selectedPostLink: {\n depends: ['highlightLink'],\n layer: 'highlight',\n variant: 'selectedPost',\n textColor: 'preserve'\n },\n selectedPostIcon: {\n depends: ['selectedPost', 'selectedPostText'],\n color: (mod, bg, text) => mixrgb(bg, text)\n },\n\n selectedMenu: {\n depends: ['bg'],\n color: (mod, bg) => brightness(5 * mod, bg).rgb\n },\n selectedMenuLightText: {\n depends: ['highlightLightText'],\n layer: 'selectedMenu',\n variant: 'selectedMenu',\n textColor: true\n },\n selectedMenuFaintText: {\n depends: ['highlightFaintText'],\n layer: 'selectedMenu',\n variant: 'selectedMenu',\n textColor: true\n },\n selectedMenuFaintLink: {\n depends: ['highlightFaintLink'],\n layer: 'selectedMenu',\n variant: 'selectedMenu',\n textColor: 'preserve'\n },\n selectedMenuText: {\n depends: ['highlightText'],\n layer: 'selectedMenu',\n variant: 'selectedMenu',\n textColor: true\n },\n selectedMenuLink: {\n depends: ['highlightLink'],\n layer: 'selectedMenu',\n variant: 'selectedMenu',\n textColor: 'preserve'\n },\n selectedMenuIcon: {\n depends: ['selectedMenu', 'selectedMenuText'],\n color: (mod, bg, text) => mixrgb(bg, text)\n },\n\n selectedMenuPopover: {\n depends: ['popover'],\n color: (mod, bg) => brightness(5 * mod, bg).rgb\n },\n selectedMenuPopoverLightText: {\n depends: ['selectedMenuLightText'],\n layer: 'selectedMenuPopover',\n variant: 'selectedMenuPopover',\n textColor: true\n },\n selectedMenuPopoverFaintText: {\n depends: ['selectedMenuFaintText'],\n layer: 'selectedMenuPopover',\n variant: 'selectedMenuPopover',\n textColor: true\n },\n selectedMenuPopoverFaintLink: {\n depends: ['selectedMenuFaintLink'],\n layer: 'selectedMenuPopover',\n variant: 'selectedMenuPopover',\n textColor: 'preserve'\n },\n selectedMenuPopoverText: {\n depends: ['selectedMenuText'],\n layer: 'selectedMenuPopover',\n variant: 'selectedMenuPopover',\n textColor: true\n },\n selectedMenuPopoverLink: {\n depends: ['selectedMenuLink'],\n layer: 'selectedMenuPopover',\n variant: 'selectedMenuPopover',\n textColor: 'preserve'\n },\n selectedMenuPopoverIcon: {\n depends: ['selectedMenuPopover', 'selectedMenuText'],\n color: (mod, bg, text) => mixrgb(bg, text)\n },\n\n lightText: {\n depends: ['text'],\n layer: 'bg',\n textColor: 'preserve',\n color: (mod, text) => brightness(20 * mod, text).rgb\n },\n\n postLink: {\n depends: ['link'],\n layer: 'bg',\n textColor: 'preserve'\n },\n\n postGreentext: {\n depends: ['cGreen'],\n layer: 'bg',\n textColor: 'preserve'\n },\n\n postCyantext: {\n depends: ['cBlue'],\n layer: 'bg',\n textColor: 'preserve'\n },\n\n border: {\n depends: ['fg'],\n opacity: 'border',\n color: (mod, fg) => brightness(2 * mod, fg).rgb\n },\n\n poll: {\n depends: ['accent', 'bg'],\n copacity: 'poll',\n color: (mod, accent, bg) => alphaBlend(accent, 0.4, bg)\n },\n pollText: {\n depends: ['text'],\n layer: 'poll',\n textColor: true\n },\n\n icon: {\n depends: ['bg', 'text'],\n inheritsOpacity: false,\n color: (mod, bg, text) => mixrgb(bg, text)\n },\n\n // Foreground\n fgText: {\n depends: ['text'],\n layer: 'fg',\n textColor: true\n },\n fgLink: {\n depends: ['link'],\n layer: 'fg',\n textColor: 'preserve'\n },\n\n // Panel header\n panel: {\n depends: ['fg'],\n opacity: 'panel'\n },\n panelText: {\n depends: ['text'],\n layer: 'panel',\n textColor: true\n },\n panelFaint: {\n depends: ['fgText'],\n layer: 'panel',\n opacity: 'faint',\n textColor: true\n },\n panelLink: {\n depends: ['fgLink'],\n layer: 'panel',\n textColor: 'preserve'\n },\n\n // Top bar\n topBar: '--fg',\n topBarText: {\n depends: ['fgText'],\n layer: 'topBar',\n textColor: true\n },\n topBarLink: {\n depends: ['fgLink'],\n layer: 'topBar',\n textColor: 'preserve'\n },\n\n // Tabs\n tab: {\n depends: ['btn']\n },\n tabText: {\n depends: ['btnText'],\n layer: 'btn',\n textColor: true\n },\n tabActiveText: {\n depends: ['text'],\n layer: 'bg',\n textColor: true\n },\n\n // Buttons\n btn: {\n depends: ['fg'],\n variant: 'btn',\n opacity: 'btn'\n },\n btnText: {\n depends: ['fgText'],\n layer: 'btn',\n textColor: true\n },\n btnPanelText: {\n depends: ['btnText'],\n layer: 'btnPanel',\n variant: 'btn',\n textColor: true\n },\n btnTopBarText: {\n depends: ['btnText'],\n layer: 'btnTopBar',\n variant: 'btn',\n textColor: true\n },\n\n // Buttons: pressed\n btnPressed: {\n depends: ['btn'],\n layer: 'btn'\n },\n btnPressedText: {\n depends: ['btnText'],\n layer: 'btn',\n variant: 'btnPressed',\n textColor: true\n },\n btnPressedPanel: {\n depends: ['btnPressed'],\n layer: 'btn'\n },\n btnPressedPanelText: {\n depends: ['btnPanelText'],\n layer: 'btnPanel',\n variant: 'btnPressed',\n textColor: true\n },\n btnPressedTopBar: {\n depends: ['btnPressed'],\n layer: 'btn'\n },\n btnPressedTopBarText: {\n depends: ['btnTopBarText'],\n layer: 'btnTopBar',\n variant: 'btnPressed',\n textColor: true\n },\n\n // Buttons: toggled\n btnToggled: {\n depends: ['btn'],\n layer: 'btn',\n color: (mod, btn) => brightness(mod * 20, btn).rgb\n },\n btnToggledText: {\n depends: ['btnText'],\n layer: 'btn',\n variant: 'btnToggled',\n textColor: true\n },\n btnToggledPanelText: {\n depends: ['btnPanelText'],\n layer: 'btnPanel',\n variant: 'btnToggled',\n textColor: true\n },\n btnToggledTopBarText: {\n depends: ['btnTopBarText'],\n layer: 'btnTopBar',\n variant: 'btnToggled',\n textColor: true\n },\n\n // Buttons: disabled\n btnDisabled: {\n depends: ['btn', 'bg'],\n color: (mod, btn, bg) => alphaBlend(btn, 0.25, bg)\n },\n btnDisabledText: {\n depends: ['btnText', 'btnDisabled'],\n layer: 'btn',\n variant: 'btnDisabled',\n color: (mod, text, btn) => alphaBlend(text, 0.25, btn)\n },\n btnDisabledPanelText: {\n depends: ['btnPanelText', 'btnDisabled'],\n layer: 'btnPanel',\n variant: 'btnDisabled',\n color: (mod, text, btn) => alphaBlend(text, 0.25, btn)\n },\n btnDisabledTopBarText: {\n depends: ['btnTopBarText', 'btnDisabled'],\n layer: 'btnTopBar',\n variant: 'btnDisabled',\n color: (mod, text, btn) => alphaBlend(text, 0.25, btn)\n },\n\n // Input fields\n input: {\n depends: ['fg'],\n opacity: 'input'\n },\n inputText: {\n depends: ['text'],\n layer: 'input',\n textColor: true\n },\n inputPanelText: {\n depends: ['panelText'],\n layer: 'inputPanel',\n variant: 'input',\n textColor: true\n },\n inputTopbarText: {\n depends: ['topBarText'],\n layer: 'inputTopBar',\n variant: 'input',\n textColor: true\n },\n\n alertError: {\n depends: ['cRed'],\n opacity: 'alert'\n },\n alertErrorText: {\n depends: ['text'],\n layer: 'alert',\n variant: 'alertError',\n textColor: true\n },\n alertErrorPanelText: {\n depends: ['panelText'],\n layer: 'alertPanel',\n variant: 'alertError',\n textColor: true\n },\n\n alertWarning: {\n depends: ['cOrange'],\n opacity: 'alert'\n },\n alertWarningText: {\n depends: ['text'],\n layer: 'alert',\n variant: 'alertWarning',\n textColor: true\n },\n alertWarningPanelText: {\n depends: ['panelText'],\n layer: 'alertPanel',\n variant: 'alertWarning',\n textColor: true\n },\n\n alertSuccess: {\n depends: ['cGreen'],\n opacity: 'alert'\n },\n alertSuccessText: {\n depends: ['text'],\n layer: 'alert',\n variant: 'alertSuccess',\n textColor: true\n },\n alertSuccessPanelText: {\n depends: ['panelText'],\n layer: 'alertPanel',\n variant: 'alertSuccess',\n textColor: true\n },\n\n alertNeutral: {\n depends: ['text'],\n opacity: 'alert'\n },\n alertNeutralText: {\n depends: ['text'],\n layer: 'alert',\n variant: 'alertNeutral',\n color: (mod, text) => invertLightness(text).rgb,\n textColor: true\n },\n alertNeutralPanelText: {\n depends: ['panelText'],\n layer: 'alertPanel',\n variant: 'alertNeutral',\n textColor: true\n },\n\n alertPopupError: {\n depends: ['alertError'],\n opacity: 'alertPopup'\n },\n alertPopupErrorText: {\n depends: ['alertErrorText'],\n layer: 'popover',\n variant: 'alertPopupError',\n textColor: true\n },\n\n alertPopupWarning: {\n depends: ['alertWarning'],\n opacity: 'alertPopup'\n },\n alertPopupWarningText: {\n depends: ['alertWarningText'],\n layer: 'popover',\n variant: 'alertPopupWarning',\n textColor: true\n },\n\n alertPopupSuccess: {\n depends: ['alertSuccess'],\n opacity: 'alertPopup'\n },\n alertPopupSuccessText: {\n depends: ['alertSuccessText'],\n layer: 'popover',\n variant: 'alertPopupSuccess',\n textColor: true\n },\n\n alertPopupNeutral: {\n depends: ['alertNeutral'],\n opacity: 'alertPopup'\n },\n alertPopupNeutralText: {\n depends: ['alertNeutralText'],\n layer: 'popover',\n variant: 'alertPopupNeutral',\n textColor: true\n },\n\n badgeNotification: '--cRed',\n badgeNotificationText: {\n depends: ['text', 'badgeNotification'],\n layer: 'badge',\n variant: 'badgeNotification',\n textColor: 'bw'\n },\n\n chatBg: {\n depends: ['bg']\n },\n\n chatMessageIncomingBg: {\n depends: ['chatBg']\n },\n\n chatMessageIncomingText: {\n depends: ['text'],\n layer: 'chatMessage',\n variant: 'chatMessageIncomingBg',\n textColor: true\n },\n\n chatMessageIncomingLink: {\n depends: ['link'],\n layer: 'chatMessage',\n variant: 'chatMessageIncomingBg',\n textColor: 'preserve'\n },\n\n chatMessageIncomingBorder: {\n depends: ['border'],\n opacity: 'border',\n color: (mod, border) => brightness(2 * mod, border).rgb\n },\n\n chatMessageOutgoingBg: {\n depends: ['chatMessageIncomingBg'],\n color: (mod, chatMessage) => brightness(5 * mod, chatMessage).rgb\n },\n\n chatMessageOutgoingText: {\n depends: ['text'],\n layer: 'chatMessage',\n variant: 'chatMessageOutgoingBg',\n textColor: true\n },\n\n chatMessageOutgoingLink: {\n depends: ['link'],\n layer: 'chatMessage',\n variant: 'chatMessageOutgoingBg',\n textColor: 'preserve'\n },\n\n chatMessageOutgoingBorder: {\n depends: ['chatMessageOutgoingBg'],\n opacity: 'border',\n color: (mod, border) => brightness(2 * mod, border).rgb\n }\n}\n","import languagesObject from '../../i18n/messages'\nimport ISO6391 from 'iso-639-1'\nimport _ from 'lodash'\n\nconst specialLanguageCodes = {\n 'ja_easy': 'ja',\n 'zh_Hant': 'zh-HANT',\n 'zh': 'zh-Hans'\n}\n\nconst internalToBrowserLocale = code => specialLanguageCodes[code] || code\n\nconst internalToBackendLocale = code => internalToBrowserLocale(code).replace('_', '-')\n\nconst getLanguageName = (code) => {\n const specialLanguageNames = {\n 'ja_easy': 'やさしいにほんご',\n 'zh': '简体中文',\n 'zh_Hant': '繁體中文'\n }\n const languageName = specialLanguageNames[code] || ISO6391.getNativeName(code)\n const browserLocale = internalToBrowserLocale(code)\n return languageName.charAt(0).toLocaleUpperCase(browserLocale) + languageName.slice(1)\n}\n\nconst languages = _.map(languagesObject.languages, (code) => ({ code: code, name: getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))\n\nconst localeService = {\n internalToBrowserLocale,\n internalToBackendLocale,\n languages,\n getLanguageName\n}\n\nexport default localeService\n","import { hex2rgb } from '../color_convert/color_convert.js'\nconst highlightStyle = (prefs) => {\n if (prefs === undefined) return\n const { color, type } = prefs\n if (typeof color !== 'string') return\n const rgb = hex2rgb(color)\n if (rgb == null) return\n const solidColor = `rgb(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)})`\n const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .1)`\n const tintColor2 = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .2)`\n const customProps = {\n '--____highlight-solidColor': solidColor,\n '--____highlight-tintColor': tintColor,\n '--____highlight-tintColor2': tintColor2\n }\n if (type === 'striped') {\n return {\n backgroundImage: [\n 'repeating-linear-gradient(135deg,',\n `${tintColor} ,`,\n `${tintColor} 20px,`,\n `${tintColor2} 20px,`,\n `${tintColor2} 40px`\n ].join(' '),\n backgroundPosition: '0 0',\n ...customProps\n }\n } else if (type === 'solid') {\n return {\n backgroundColor: tintColor2,\n ...customProps\n }\n } else if (type === 'side') {\n return {\n backgroundImage: [\n 'linear-gradient(to right,',\n `${solidColor} ,`,\n `${solidColor} 2px,`,\n `transparent 6px`\n ].join(' '),\n backgroundPosition: '0 0',\n ...customProps\n }\n }\n}\n\nconst highlightClass = (user) => {\n return 'USER____' + user.screen_name\n .replace(/\\./g, '_')\n .replace(/@/g, '_AT_')\n}\n\nexport {\n highlightClass,\n highlightStyle\n}\n","import { convert } from 'chromatism'\nimport { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js'\nimport { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/theme_data.service.js'\n\nexport const applyTheme = (input) => {\n const { rules } = generatePreset(input)\n const head = document.head\n const body = document.body\n body.classList.add('hidden')\n\n const styleEl = document.createElement('style')\n head.appendChild(styleEl)\n const styleSheet = styleEl.sheet\n\n styleSheet.toString()\n styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')\n styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')\n styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')\n styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')\n body.classList.remove('hidden')\n}\n\nexport const getCssShadow = (input, usesDropShadow) => {\n if (input.length === 0) {\n return 'none'\n }\n\n return input\n .filter(_ => usesDropShadow ? _.inset : _)\n .map((shad) => [\n shad.x,\n shad.y,\n shad.blur,\n shad.spread\n ].map(_ => _ + 'px').concat([\n getCssColor(shad.color, shad.alpha),\n shad.inset ? 'inset' : ''\n ]).join(' ')).join(', ')\n}\n\nconst getCssShadowFilter = (input) => {\n if (input.length === 0) {\n return 'none'\n }\n\n return input\n // drop-shadow doesn't support inset or spread\n .filter((shad) => !shad.inset && Number(shad.spread) === 0)\n .map((shad) => [\n shad.x,\n shad.y,\n // drop-shadow's blur is twice as strong compared to box-shadow\n shad.blur / 2\n ].map(_ => _ + 'px').concat([\n getCssColor(shad.color, shad.alpha)\n ]).join(' '))\n .map(_ => `drop-shadow(${_})`)\n .join(' ')\n}\n\nexport const generateColors = (themeData) => {\n const sourceColors = !themeData.themeEngineVersion\n ? colors2to3(themeData.colors || themeData)\n : themeData.colors || themeData\n\n const { colors, opacity } = getColors(sourceColors, themeData.opacity || {})\n\n const htmlColors = Object.entries(colors)\n .reduce((acc, [k, v]) => {\n if (!v) return acc\n acc.solid[k] = rgb2hex(v)\n acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgba2css(v)\n return acc\n }, { complete: {}, solid: {} })\n return {\n rules: {\n colors: Object.entries(htmlColors.complete)\n .filter(([k, v]) => v)\n .map(([k, v]) => `--${k}: ${v}`)\n .join(';')\n },\n theme: {\n colors: htmlColors.solid,\n opacity\n }\n }\n}\n\nexport const generateRadii = (input) => {\n let inputRadii = input.radii || {}\n // v1 -> v2\n if (typeof input.btnRadius !== 'undefined') {\n inputRadii = Object\n .entries(input)\n .filter(([k, v]) => k.endsWith('Radius'))\n .reduce((acc, e) => { acc[e[0].split('Radius')[0]] = e[1]; return acc }, {})\n }\n const radii = Object.entries(inputRadii).filter(([k, v]) => v).reduce((acc, [k, v]) => {\n acc[k] = v\n return acc\n }, {\n btn: 4,\n input: 4,\n checkbox: 2,\n panel: 10,\n avatar: 5,\n avatarAlt: 50,\n tooltip: 2,\n attachment: 5,\n chatMessage: inputRadii.panel\n })\n\n return {\n rules: {\n radii: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}Radius: ${v}px`).join(';')\n },\n theme: {\n radii\n }\n }\n}\n\nexport const generateFonts = (input) => {\n const fonts = Object.entries(input.fonts || {}).filter(([k, v]) => v).reduce((acc, [k, v]) => {\n acc[k] = Object.entries(v).filter(([k, v]) => v).reduce((acc, [k, v]) => {\n acc[k] = v\n return acc\n }, acc[k])\n return acc\n }, {\n interface: {\n family: 'sans-serif'\n },\n input: {\n family: 'inherit'\n },\n post: {\n family: 'inherit'\n },\n postCode: {\n family: 'monospace'\n }\n })\n\n return {\n rules: {\n fonts: Object\n .entries(fonts)\n .filter(([k, v]) => v)\n .map(([k, v]) => `--${k}Font: ${v.family}`).join(';')\n },\n theme: {\n fonts\n }\n }\n}\n\nconst border = (top, shadow) => ({\n x: 0,\n y: top ? 1 : -1,\n blur: 0,\n spread: 0,\n color: shadow ? '#000000' : '#FFFFFF',\n alpha: 0.2,\n inset: true\n})\nconst buttonInsetFakeBorders = [border(true, false), border(false, true)]\nconst inputInsetFakeBorders = [border(true, true), border(false, false)]\nconst hoverGlow = {\n x: 0,\n y: 0,\n blur: 4,\n spread: 0,\n color: '--faint',\n alpha: 1\n}\n\nexport const DEFAULT_SHADOWS = {\n panel: [{\n x: 1,\n y: 1,\n blur: 4,\n spread: 0,\n color: '#000000',\n alpha: 0.6\n }],\n topBar: [{\n x: 0,\n y: 0,\n blur: 4,\n spread: 0,\n color: '#000000',\n alpha: 0.6\n }],\n popup: [{\n x: 2,\n y: 2,\n blur: 3,\n spread: 0,\n color: '#000000',\n alpha: 0.5\n }],\n avatar: [{\n x: 0,\n y: 1,\n blur: 8,\n spread: 0,\n color: '#000000',\n alpha: 0.7\n }],\n avatarStatus: [],\n panelHeader: [],\n button: [{\n x: 0,\n y: 0,\n blur: 2,\n spread: 0,\n color: '#000000',\n alpha: 1\n }, ...buttonInsetFakeBorders],\n buttonHover: [hoverGlow, ...buttonInsetFakeBorders],\n buttonPressed: [hoverGlow, ...inputInsetFakeBorders],\n input: [...inputInsetFakeBorders, {\n x: 0,\n y: 0,\n blur: 2,\n inset: true,\n spread: 0,\n color: '#000000',\n alpha: 1\n }]\n}\nexport const generateShadows = (input, colors) => {\n // TODO this is a small hack for `mod` to work with shadows\n // this is used to get the \"context\" of shadow, i.e. for `mod` properly depend on background color of element\n const hackContextDict = {\n button: 'btn',\n panel: 'bg',\n top: 'topBar',\n popup: 'popover',\n avatar: 'bg',\n panelHeader: 'panel',\n input: 'input'\n }\n\n const cleanInputShadows = Object.fromEntries(\n Object.entries(input.shadows || {})\n .map(([name, shadowSlot]) => [\n name,\n // defaulting color to black to avoid potential problems\n shadowSlot.map(shadowDef => ({ color: '#000000', ...shadowDef }))\n ])\n )\n const inputShadows = cleanInputShadows && !input.themeEngineVersion\n ? shadows2to3(cleanInputShadows, input.opacity)\n : cleanInputShadows || {}\n const shadows = Object.entries({\n ...DEFAULT_SHADOWS,\n ...inputShadows\n }).reduce((shadowsAcc, [slotName, shadowDefs]) => {\n const slotFirstWord = slotName.replace(/[A-Z].*$/, '')\n const colorSlotName = hackContextDict[slotFirstWord]\n const isLightOnDark = relativeLuminance(convert(colors[colorSlotName]).rgb) < 0.5\n const mod = isLightOnDark ? 1 : -1\n const newShadow = shadowDefs.reduce((shadowAcc, def) => [\n ...shadowAcc,\n {\n ...def,\n color: rgb2hex(computeDynamicColor(\n def.color,\n (variableSlot) => convert(colors[variableSlot]).rgb,\n mod\n ))\n }\n ], [])\n return { ...shadowsAcc, [slotName]: newShadow }\n }, {})\n\n return {\n rules: {\n shadows: Object\n .entries(shadows)\n // TODO for v2.2: if shadow doesn't have non-inset shadows with spread > 0 - optionally\n // convert all non-inset shadows into filter: drop-shadow() to boost performance\n .map(([k, v]) => [\n `--${k}Shadow: ${getCssShadow(v)}`,\n `--${k}ShadowFilter: ${getCssShadowFilter(v)}`,\n `--${k}ShadowInset: ${getCssShadow(v, true)}`\n ].join(';'))\n .join(';')\n },\n theme: {\n shadows\n }\n }\n}\n\nexport const composePreset = (colors, radii, shadows, fonts) => {\n return {\n rules: {\n ...shadows.rules,\n ...colors.rules,\n ...radii.rules,\n ...fonts.rules\n },\n theme: {\n ...shadows.theme,\n ...colors.theme,\n ...radii.theme,\n ...fonts.theme\n }\n }\n}\n\nexport const generatePreset = (input) => {\n const colors = generateColors(input)\n return composePreset(\n colors,\n generateRadii(input),\n generateShadows(input, colors.theme.colors, colors.mod),\n generateFonts(input)\n )\n}\n\nexport const getThemes = () => {\n const cache = 'no-store'\n\n return window.fetch('/static/styles.json', { cache })\n .then((data) => data.json())\n .then((themes) => {\n return Object.entries(themes).map(([k, v]) => {\n let promise = null\n if (typeof v === 'object') {\n promise = Promise.resolve(v)\n } else if (typeof v === 'string') {\n promise = window.fetch(v, { cache })\n .then((data) => data.json())\n .catch((e) => {\n console.error(e)\n return null\n })\n }\n return [k, promise]\n })\n })\n .then((promises) => {\n return promises\n .reduce((acc, [k, v]) => {\n acc[k] = v\n return acc\n }, {})\n })\n}\nexport const colors2to3 = (colors) => {\n return Object.entries(colors).reduce((acc, [slotName, color]) => {\n const btnPositions = ['', 'Panel', 'TopBar']\n switch (slotName) {\n case 'lightBg':\n return { ...acc, highlight: color }\n case 'btnText':\n return {\n ...acc,\n ...btnPositions\n .reduce(\n (statePositionAcc, position) =>\n ({ ...statePositionAcc, ['btn' + position + 'Text']: color })\n , {}\n )\n }\n default:\n return { ...acc, [slotName]: color }\n }\n }, {})\n}\n\n/**\n * This handles compatibility issues when importing v2 theme's shadows to current format\n *\n * Back in v2 shadows allowed you to use dynamic colors however those used pure CSS3 variables\n */\nexport const shadows2to3 = (shadows, opacity) => {\n return Object.entries(shadows).reduce((shadowsAcc, [slotName, shadowDefs]) => {\n const isDynamic = ({ color = '#000000' }) => color.startsWith('--')\n const getOpacity = ({ color }) => opacity[getOpacitySlot(color.substring(2).split(',')[0])]\n const newShadow = shadowDefs.reduce((shadowAcc, def) => [\n ...shadowAcc,\n {\n ...def,\n alpha: isDynamic(def) ? getOpacity(def) || 1 : def.alpha\n }\n ], [])\n return { ...shadowsAcc, [slotName]: newShadow }\n }, {})\n}\n\nexport const getPreset = (val) => {\n return getThemes()\n .then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])\n .then((theme) => {\n const isV1 = Array.isArray(theme)\n const data = isV1 ? {} : theme.theme\n\n if (isV1) {\n const bg = hex2rgb(theme[1])\n const fg = hex2rgb(theme[2])\n const text = hex2rgb(theme[3])\n const link = hex2rgb(theme[4])\n\n const cRed = hex2rgb(theme[5] || '#FF0000')\n const cGreen = hex2rgb(theme[6] || '#00FF00')\n const cBlue = hex2rgb(theme[7] || '#0000FF')\n const cOrange = hex2rgb(theme[8] || '#E3FF00')\n\n data.colors = { bg, fg, text, link, cRed, cBlue, cGreen, cOrange }\n }\n\n return { theme: data, source: theme.source }\n })\n}\n\nexport const setPreset = (val) => getPreset(val).then(data => applyTheme(data.theme))\n","\n// promiseInterval - replacement for setInterval for promises, starts counting\n// the interval only after a promise is done instead of immediately.\n// - promiseCall is a function that returns a promise, it's called the first\n// time after the first interval.\n// - interval is the interval delay in ms.\n\nexport const promiseInterval = (promiseCall, interval) => {\n let stopped = false\n let timeout = null\n\n const func = () => {\n const promise = promiseCall()\n // something unexpected happened and promiseCall did not\n // return a promise, abort the loop.\n if (!(promise && promise.finally)) {\n console.warn('promiseInterval: promise call did not return a promise, stopping interval.')\n return\n }\n promise.finally(() => {\n if (stopped) return\n timeout = window.setTimeout(func, interval)\n })\n }\n\n const stopFetcher = () => {\n stopped = true\n window.clearTimeout(timeout)\n }\n\n timeout = window.setTimeout(func, interval)\n\n return { stop: stopFetcher }\n}\n","\n \n
\n\n \n
\n\n \n \n {{ percentageForOption(option.votes_count) }}%\n \n
\n \n \n \n {{ $t(\"status.hide_full_subject\") }}\n \n \n {{ $t(\"status.show_full_subject\") }}\n \n
\n for paragraphs, GS uses
between them)\n // as well as approximate line count by counting characters and approximating ~80\n // per line.\n //\n // Using max-height + overflow: auto for status components resulted in false positives\n // very often with japanese characters, and it was very annoying.\n tallStatus () {\n if (this.singleLine || this.compact) return false\n const lengthScore = this.status.raw_html.split(/\n \n \n \n \n \n \n
\n \n \n
\n \n \n
\n \n \n \n \n \n \n
\n \n {{ localDescription }}\n
\n \n \n\n {{ localDescription }}\n
\n \n\n\n \n
\n \n\n {{ attachment.oembed.title }}
\n \n \n\n {{ localDescription }}\n
\n \n \n\n\n\n\n\n","import StillImage from '../still-image/still-image.vue'\nimport Flash from '../flash/flash.vue'\nimport VideoAttachment from '../video_attachment/video_attachment.vue'\nimport nsfwImage from '../../assets/nsfw.png'\nimport fileTypeService from '../../services/file_type/file_type.service.js'\nimport { mapGetters } from 'vuex'\nimport { library } from '@fortawesome/fontawesome-svg-core'\nimport {\n faFile,\n faMusic,\n faImage,\n faVideo,\n faPlayCircle,\n faTimes,\n faStop,\n faSearchPlus,\n faTrashAlt,\n faPencilAlt,\n faAlignRight\n} from '@fortawesome/free-solid-svg-icons'\n\nlibrary.add(\n faFile,\n faMusic,\n faImage,\n faVideo,\n faPlayCircle,\n faTimes,\n faStop,\n faSearchPlus,\n faTrashAlt,\n faPencilAlt,\n faAlignRight\n)\n\nconst Attachment = {\n props: [\n 'attachment',\n 'description',\n 'hideDescription',\n 'nsfw',\n 'size',\n 'setMedia',\n 'remove',\n 'shiftUp',\n 'shiftDn',\n 'edit'\n ],\n data () {\n return {\n localDescription: this.description || this.attachment.description,\n nsfwImage: this.$store.state.instance.nsfwCensorImage || nsfwImage,\n hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw,\n preloadImage: this.$store.getters.mergedConfig.preloadImage,\n loading: false,\n img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),\n modalOpen: false,\n showHidden: false,\n flashLoaded: false,\n showDescription: false\n }\n },\n components: {\n Flash,\n StillImage,\n VideoAttachment\n },\n computed: {\n classNames () {\n return [\n {\n '-loading': this.loading,\n '-nsfw-placeholder': this.hidden,\n '-editable': this.edit !== undefined\n },\n '-type-' + this.type,\n this.size && '-size-' + this.size,\n `-${this.useContainFit ? 'contain' : 'cover'}-fit`\n ]\n },\n usePlaceholder () {\n return this.size === 'hide'\n },\n useContainFit () {\n return this.$store.getters.mergedConfig.useContainFit\n },\n placeholderName () {\n if (this.attachment.description === '' || !this.attachment.description) {\n return this.type.toUpperCase()\n }\n return this.attachment.description\n },\n placeholderIconClass () {\n if (this.type === 'image') return 'image'\n if (this.type === 'video') return 'video'\n if (this.type === 'audio') return 'music'\n return 'file'\n },\n referrerpolicy () {\n return this.$store.state.instance.mediaProxyAvailable ? '' : 'no-referrer'\n },\n type () {\n return fileTypeService.fileType(this.attachment.mimetype)\n },\n hidden () {\n return this.nsfw && this.hideNsfwLocal && !this.showHidden\n },\n isEmpty () {\n return (this.type === 'html' && !this.attachment.oembed)\n },\n useModal () {\n let modalTypes = []\n switch (this.size) {\n case 'hide':\n case 'small':\n modalTypes = ['image', 'video', 'audio', 'flash']\n break\n default:\n modalTypes = this.mergedConfig.playVideosInModal\n ? ['image', 'video', 'flash']\n : ['image']\n break\n }\n return modalTypes.includes(this.type)\n },\n videoTag () {\n return this.useModal ? 'button' : 'span'\n },\n ...mapGetters(['mergedConfig'])\n },\n watch: {\n localDescription (newVal) {\n this.onEdit(newVal)\n }\n },\n methods: {\n linkClicked ({ target }) {\n if (target.tagName === 'A') {\n window.open(target.href, '_blank')\n }\n },\n openModal (event) {\n if (this.useModal) {\n this.$emit('setMedia')\n this.$store.dispatch('setCurrentMedia', this.attachment)\n } else if (this.type === 'unknown') {\n window.open(this.attachment.url)\n }\n },\n openModalForce (event) {\n this.$emit('setMedia')\n this.$store.dispatch('setCurrentMedia', this.attachment)\n },\n onEdit (event) {\n this.edit && this.edit(this.attachment, event)\n },\n onRemove () {\n this.remove && this.remove(this.attachment)\n },\n onShiftUp () {\n this.shiftUp && this.shiftUp(this.attachment)\n },\n onShiftDn () {\n this.shiftDn && this.shiftDn(this.attachment)\n },\n stopFlash () {\n this.$refs.flash.closePlayer()\n },\n setFlashLoaded (event) {\n this.flashLoaded = event\n },\n toggleDescription () {\n this.showDescription = !this.showDescription\n },\n toggleHidden (event) {\n if (\n (this.mergedConfig.useOneClickNsfw && !this.showHidden) &&\n (this.type !== 'video' || this.mergedConfig.playVideosInModal)\n ) {\n this.openModal(event)\n return\n }\n if (this.img && !this.preloadImage) {\n if (this.img.onload) {\n this.img.onload()\n } else {\n this.loading = true\n this.img.src = this.attachment.url\n this.img.onload = () => {\n this.loading = false\n this.showHidden = !this.showHidden\n }\n }\n } else {\n this.showHidden = !this.showHidden\n }\n },\n onImageLoad (image) {\n const width = image.naturalWidth\n const height = image.naturalHeight\n this.$emit('naturalSizeLoad', { id: this.attachment.id, width, height })\n }\n }\n}\n\nexport default Attachment\n","import { render } from \"./attachment.vue?vue&type=template&id=1177e21f\"\nimport script from \"./attachment.js?vue&type=script&lang=js\"\nexport * from \"./attachment.js?vue&type=script&lang=js\"\n\nimport \"./attachment.scss?vue&type=style&index=0&lang=scss\"\n\nimport exportComponent from \"/home/hannah/personal/pleroma-fe/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__","\n\n \n
\n \n \n 
\n {props.label ? '' : props.label}\n \n
\n )\n }\n return (\n \n \n {!props.icon ? '' : ()}\n \n {props.label}\n \n \n
\n )\n })\n\n const contents = this.slots().map((slot, index) => {\n const props = slot.props\n if (!props) return\n const active = this.activeIndex === index\n const classes = [ active ? 'active' : 'hidden' ]\n if (props.fullHeight) {\n classes.push('full-height')\n }\n const renderSlot = (!this.renderOnlyFocused || active)\n ? slot\n : ''\n\n return (\n \n {\n this.sideTabBar\n ?
\n )\n })\n\n return (\n {props.label}
\n : ''\n }\n {renderSlot}\n\n \n {contents}\n
\n \n )\n }\n}\n","import { map } from 'lodash'\nimport apiService from '../api/api.service.js'\n\nconst postStatus = ({\n store,\n status,\n spoilerText,\n visibility,\n sensitive,\n poll,\n media = [],\n inReplyToStatusId = undefined,\n contentType = 'text/plain',\n preview = false,\n idempotencyKey = ''\n}) => {\n const mediaIds = map(media, 'id')\n\n return apiService.postStatus({\n credentials: store.state.users.currentUser.credentials,\n status,\n spoilerText,\n visibility,\n sensitive,\n mediaIds,\n inReplyToStatusId,\n contentType,\n poll,\n preview,\n idempotencyKey\n })\n .then((data) => {\n if (!data.error && !preview) {\n store.dispatch('addNewStatuses', {\n statuses: [data],\n timeline: 'friends',\n showImmediately: true,\n noIdUpdate: true // To prevent missing notices on next pull.\n })\n }\n return data\n })\n .catch((err) => {\n return {\n error: err.message\n }\n })\n}\n\nconst uploadMedia = ({ store, formData }) => {\n const credentials = store.state.users.currentUser.credentials\n return apiService.uploadMedia({ credentials, formData })\n}\n\nconst setMediaDescription = ({ store, id, description }) => {\n const credentials = store.state.users.currentUser.credentials\n return apiService.setMediaDescription({ credentials, id, description })\n}\n\nconst statusPosterService = {\n postStatus,\n uploadMedia,\n setMediaDescription\n}\n\nexport default statusPosterService\n","\n \n {tabs}\n
\n \n \n \n {{ $t('notifications.read') }}\n \n
\n \n {{ $t('notifications.notifications') }}\n {{ unseenCount }}\n
\n \n \n \n
\n \n \n \n {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}\n
\n \n \n \n \n \n {{ notification.from_profile.screen_name_ui }}\n \n \n \n
\n \n \n \n
\n \n \n \n \n {{ notification.from_profile.name }}\n \n {{ ' ' }}\n \n \n \n \n {{ notification.emoji }}\n \n \n \n \n \n
\n \n \n \n
\n \n \n \n \n \n {{ $t('general.loading') }}\n \n \n {{ $t('general.flash_fail') }}\n \n \n
\n\n\n\n\n\n","const createRuffleService = () => {\n let ruffleInstance = null\n\n const getRuffle = () => new Promise((resolve, reject) => {\n if (ruffleInstance) {\n resolve(ruffleInstance)\n return\n }\n // Ruffle needs these to be set before it's loaded\n // https://github.com/ruffle-rs/ruffle/issues/3952\n window.RufflePlayer = {}\n window.RufflePlayer.config = {\n polyfills: false,\n publicPath: '/static/ruffle'\n }\n\n // Currently it's seems like a better way of loading ruffle\n // because it needs the wasm publically accessible, but it needs path to it\n // and filename of wasm seems to be pseudo-randomly generated (is it a hash?)\n const script = document.createElement('script')\n // see webpack config, using CopyPlugin to copy it from node_modules\n // provided via ruffle-mirror\n script.src = '/static/ruffle/ruffle.js'\n script.type = 'text/javascript'\n script.onerror = (e) => { reject(e) }\n script.onabort = (e) => { reject(e) }\n script.oncancel = (e) => { reject(e) }\n script.onload = () => {\n ruffleInstance = window.RufflePlayer\n resolve(ruffleInstance)\n }\n document.body.appendChild(script)\n })\n\n return { getRuffle }\n}\n\nconst RuffleService = createRuffleService()\n\nexport default RuffleService\n","import RuffleService from '../../services/ruffle_service/ruffle_service.js'\nimport { library } from '@fortawesome/fontawesome-svg-core'\nimport {\n faStop,\n faExclamationTriangle\n} from '@fortawesome/free-solid-svg-icons'\n\nlibrary.add(\n faStop,\n faExclamationTriangle\n)\n\nconst Flash = {\n props: [ 'src' ],\n data () {\n return {\n player: false, // can be true, \"hidden\", false. hidden = element exists\n loaded: false,\n ruffleInstance: null\n }\n },\n methods: {\n openPlayer () {\n if (this.player) return // prevent double-loading, or re-loading on failure\n this.player = 'hidden'\n RuffleService.getRuffle().then((ruffle) => {\n const player = ruffle.newest().createPlayer()\n player.config = {\n letterbox: 'on'\n }\n const container = this.$refs.container\n container.appendChild(player)\n player.style.width = '100%'\n player.style.height = '100%'\n player.load(this.src).then(() => {\n this.player = true\n }).catch((e) => {\n console.error('Error loading ruffle', e)\n this.player = 'error'\n })\n this.ruffleInstance = player\n this.$emit('playerOpened')\n })\n },\n closePlayer () {\n this.ruffleInstance && this.ruffleInstance.remove()\n this.player = false\n this.$emit('playerClosed')\n }\n }\n}\n\nexport default Flash\n","import { render } from \"./flash.vue?vue&type=template&id=0dec384a\"\nimport script from \"./flash.js?vue&type=script&lang=js\"\nexport * from \"./flash.js?vue&type=script&lang=js\"\n\nimport \"./flash.vue?vue&type=style&index=0&id=0dec384a&lang=scss\"\n\nimport exportComponent from \"/home/hannah/personal/pleroma-fe/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__","const fetchRelationship = (attempt, userId, store) => new Promise((resolve, reject) => {\n setTimeout(() => {\n store.state.api.backendInteractor.fetchUserRelationship({ id: userId })\n .then((relationship) => {\n store.commit('updateUserRelationship', [relationship])\n return relationship\n })\n .then((relationship) => resolve([relationship.following, relationship.requested, relationship.locked, attempt]))\n .catch((e) => reject(e))\n }, 500)\n}).then(([following, sent, locked, attempt]) => {\n if (!following && !(locked && sent) && attempt <= 3) {\n // If we BE reports that we still not following that user - retry,\n // increment attempts by one\n fetchRelationship(++attempt, userId, store)\n }\n})\n\nexport const requestFollow = (userId, store) => new Promise((resolve, reject) => {\n store.state.api.backendInteractor.followUser({ id: userId })\n .then((updated) => {\n store.commit('updateUserRelationship', [updated])\n\n if (updated.following || (updated.locked && updated.requested)) {\n // If we get result immediately or the account is locked, just stop.\n resolve()\n return\n }\n\n // But usually we don't get result immediately, so we ask server\n // for updated user profile to confirm if we are following them\n // Sometimes it takes several tries. Sometimes we end up not following\n // user anyway, probably because they locked themselves and we\n // don't know that yet.\n // Recursive Promise, it will call itself up to 3 times.\n\n return fetchRelationship(1, updated, store)\n .then(() => {\n resolve()\n })\n })\n})\n\nexport const requestUnfollow = (userId, store) => new Promise((resolve, reject) => {\n store.state.api.backendInteractor.unfollowUser({ id: userId })\n .then((updated) => {\n store.commit('updateUserRelationship', [updated])\n resolve({\n updated\n })\n })\n})\n","import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'\nexport default {\n props: ['relationship', 'user', 'labelFollowing', 'buttonClass'],\n data () {\n return {\n inProgress: false\n }\n },\n computed: {\n isPressed () {\n return this.inProgress || this.relationship.following\n },\n title () {\n if (this.inProgress || this.relationship.following) {\n return this.$t('user_card.follow_unfollow')\n } else if (this.relationship.requested) {\n return this.$t('user_card.follow_cancel')\n } else {\n return this.$t('user_card.follow')\n }\n },\n label () {\n if (this.inProgress) {\n return this.$t('user_card.follow_progress')\n } else if (this.relationship.following) {\n return this.labelFollowing || this.$t('user_card.following')\n } else if (this.relationship.requested) {\n return this.$t('user_card.follow_sent')\n } else {\n return this.$t('user_card.follow')\n }\n },\n disabled () {\n return this.inProgress || this.user.deactivated\n }\n },\n methods: {\n onClick () {\n this.relationship.following || this.relationship.requested ? this.unfollow() : this.follow()\n },\n follow () {\n this.inProgress = true\n requestFollow(this.relationship.id, this.$store).then(() => {\n this.inProgress = false\n })\n },\n unfollow () {\n const store = this.$store\n this.inProgress = true\n requestUnfollow(this.relationship.id, store).then(() => {\n this.inProgress = false\n store.commit('removeStatus', { timeline: 'friends', userId: this.relationship.id })\n })\n }\n }\n}\n","import { render } from \"./follow_button.vue?vue&type=template&id=2c877477\"\nimport script from \"./follow_button.js?vue&type=script&lang=js\"\nexport * from \"./follow_button.js?vue&type=script&lang=js\"\n\nimport exportComponent from \"/home/hannah/personal/pleroma-fe/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__","\n \n {{ $t('general.flash_content') }}\n
\n\n
\n \n \n \n \n {{ $t('user_card.remote_follow') }}\n \n \n
\n\n\n\n\n\n","export default {\n props: [ 'user' ],\n computed: {\n subscribeUrl () {\n // eslint-disable-next-line no-undef\n const serverUrl = new URL(this.user.statusnet_profile_url)\n return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`\n }\n }\n}\n","import { render } from \"./remote_follow.vue?vue&type=template&id=2aed8421\"\nimport script from \"./remote_follow.js?vue&type=script&lang=js\"\nexport * from \"./remote_follow.js?vue&type=script&lang=js\"\n\nimport \"./remote_follow.vue?vue&type=style&index=0&id=2aed8421&lang=scss\"\n\nimport exportComponent from \"/home/hannah/personal/pleroma-fe/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__","\n \n \n
\n\n\n\n\n\n","import UserAvatar from '../user_avatar/user_avatar.vue'\nimport generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'\n\nconst AvatarList = {\n props: ['users'],\n computed: {\n slicedUsers () {\n return this.users ? this.users.slice(0, 15) : []\n }\n },\n components: {\n UserAvatar\n },\n methods: {\n userProfileLink (user) {\n return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)\n }\n }\n}\n\nexport default AvatarList\n","import { render } from \"./avatar_list.vue?vue&type=template&id=4cea5bcf\"\nimport script from \"./avatar_list.js?vue&type=script&lang=js\"\nexport * from \"./avatar_list.js?vue&type=script&lang=js\"\n\nimport \"./avatar_list.vue?vue&type=style&index=0&id=4cea5bcf&lang=scss\"\n\nimport exportComponent from \"/home/hannah/personal/pleroma-fe/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__","/**\n * suggest - generates a suggestor function to be used by emoji-input\n * data: object providing source information for specific types of suggestions:\n * data.emoji - optional, an array of all emoji available i.e.\n * (state.instance.emoji + state.instance.customEmoji)\n * data.users - optional, an array of all known users\n * updateUsersList - optional, a function to search and append to users\n *\n * Depending on data present one or both (or none) can be present, so if field\n * doesn't support user linking you can just provide only emoji.\n */\n\nexport default data => {\n const emojiCurry = suggestEmoji(data.emoji)\n const usersCurry = data.store && suggestUsers(data.store)\n return input => {\n const firstChar = input[0]\n if (firstChar === ':' && data.emoji) {\n return emojiCurry(input)\n }\n if (firstChar === '@' && usersCurry) {\n return usersCurry(input)\n }\n return []\n }\n}\n\nexport const suggestEmoji = emojis => input => {\n const noPrefix = input.toLowerCase().substr(1)\n return emojis\n .filter(({ displayText }) => displayText.toLowerCase().match(noPrefix))\n .sort((a, b) => {\n let aScore = 0\n let bScore = 0\n\n // An exact match always wins\n aScore += a.displayText.toLowerCase() === noPrefix ? 200 : 0\n bScore += b.displayText.toLowerCase() === noPrefix ? 200 : 0\n\n // Prioritize custom emoji a lot\n aScore += a.imageUrl ? 100 : 0\n bScore += b.imageUrl ? 100 : 0\n\n // Prioritize prefix matches somewhat\n aScore += a.displayText.toLowerCase().startsWith(noPrefix) ? 10 : 0\n bScore += b.displayText.toLowerCase().startsWith(noPrefix) ? 10 : 0\n\n // Sort by length\n aScore -= a.displayText.length\n bScore -= b.displayText.length\n\n // Break ties alphabetically\n const alphabetically = a.displayText > b.displayText ? 0.5 : -0.5\n\n return bScore - aScore + alphabetically\n })\n}\n\nexport const suggestUsers = ({ dispatch, state }) => {\n // Keep some persistent values in closure, most importantly for the\n // custom debounce to work. Lodash debounce does not return a promise.\n let suggestions = []\n let previousQuery = ''\n let timeout = null\n let cancelUserSearch = null\n\n const userSearch = (query) => dispatch('searchUsers', { query })\n const debounceUserSearch = (query) => {\n cancelUserSearch && cancelUserSearch()\n return new Promise((resolve, reject) => {\n timeout = setTimeout(() => {\n userSearch(query).then(resolve).catch(reject)\n }, 300)\n cancelUserSearch = () => {\n clearTimeout(timeout)\n resolve([])\n }\n })\n }\n\n return async input => {\n const noPrefix = input.toLowerCase().substr(1)\n if (previousQuery === noPrefix) return suggestions\n\n suggestions = []\n previousQuery = noPrefix\n // Fetch more and wait, don't fetch if there's the 2nd @ because\n // the backend user search can't deal with it.\n // Reference semantics make it so that we get the updated data after\n // the await.\n if (!noPrefix.includes('@')) {\n await debounceUserSearch(noPrefix)\n }\n\n const newSuggestions = state.users.users.filter(\n user =>\n user.screen_name.toLowerCase().startsWith(noPrefix) ||\n user.name.toLowerCase().startsWith(noPrefix)\n ).slice(0, 20).sort((a, b) => {\n let aScore = 0\n let bScore = 0\n\n // Matches on screen name (i.e. user@instance) makes a priority\n aScore += a.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0\n bScore += b.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0\n\n // Matches on name takes second priority\n aScore += a.name.toLowerCase().startsWith(noPrefix) ? 1 : 0\n bScore += b.name.toLowerCase().startsWith(noPrefix) ? 1 : 0\n\n const diff = (bScore - aScore) * 10\n\n // Then sort alphabetically\n const nameAlphabetically = a.name > b.name ? 1 : -1\n const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1\n\n return diff + nameAlphabetically + screenNameAlphabetically\n /* eslint-disable camelcase */\n }).map(({ screen_name, screen_name_ui, name, profile_image_url_original }) => ({\n displayText: screen_name_ui,\n detailText: name,\n imageUrl: profile_image_url_original,\n replacement: '@' + screen_name + ' '\n }))\n /* eslint-enable camelcase */\n\n suggestions = newSuggestions || []\n return suggestions\n }\n}\n","\n \n \n {{ ' ' }}\n \n \n {{ lang.name }}\n \n \n
\n\n\n\n","import { render } from \"./interface_language_switcher.vue?vue&type=template&id=25be3710\"\nimport script from \"./interface_language_switcher.vue?vue&type=script&lang=js\"\nexport * from \"./interface_language_switcher.vue?vue&type=script&lang=js\"\n\nimport exportComponent from \"/home/hannah/personal/pleroma-fe/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__","\n \n {{ suggestion.displayText }}\n {{ suggestion.detailText }}\n
\n \n \n \n \n\n
\n \n \n \n \n \n \n \n
\n \n \n \n \n \n {{ group.text }}\n \n \n {{ emoji.replacement }}\n \n \n \n
\n \n \n
\n \n \n {{ $t('emoji.keep_open') }}\n \n
\n \n