logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://anongit.hacktivis.me/git/pleroma-fe.git/

status.vue (20080B)

    

  1. <template>
  2.   <div
  3.     v-if="!hideStatus"
  4.     ref="root"
  5.     class="Status"
  6.     :class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]"
  7.   >
  8.     <div
  9.       v-if="error"
  10.       class="alert error"
  11.     >
  12.       {{ error }}
  13.       <span
  14.         class="fa-scale-110 fa-old-padding"
  15.         @click="clearError"
  16.       >
  17.         <FAIcon icon="times" />
  18.       </span>
  19.     </div>
  20.     <template v-if="muted && !isPreview">
  21.       <div class="status-container muted">
  22.         <small class="status-username">
  23.           <FAIcon
  24.             v-if="muted && retweet"
  25.             class="fa-scale-110 fa-old-padding repeat-icon"
  26.             icon="retweet"
  27.           />
  28.           <user-link
  29.             :user="status.user"
  30.             :at="false"
  31.           />
  32.         </small>
  33.         <small
  34.           v-if="muteSensitiveStatuses && status.nsfw"
  35.           class="mute-thread"
  36.         >
  37.           {{ $t('status.sensitive_muted') }}
  38.         </small>
  39.         <small
  40.           v-if="showReasonMutedThread"
  41.           class="mute-thread"
  42.         >
  43.           {{ $t('status.thread_muted') }}
  44.         </small>
  45.         <small
  46.           v-if="showReasonMutedThread && muteWordHits.length > 0"
  47.           class="mute-thread"
  48.         >
  49.           {{ $t('status.thread_muted_and_words') }}
  50.         </small>
  51.         <small
  52.           class="mute-words"
  53.           :title="muteWordHits.join(', ')"
  54.         >
  55.           {{ muteWordHits.join(', ') }}
  56.         </small>
  57.         <button
  58.           class="unmute button-unstyled"
  59.           @click.prevent="toggleMute"
  60.         >
  61.           <FAIcon
  62.             icon="eye-slash"
  63.             class="fa-scale-110 fa-old-padding"
  64.           />
  65.         </button>
  66.       </div>
  67.     </template>
  68.     <template v-else>
  69.       <div
  70.         v-if="showPinned"
  71.         class="pin"
  72.       >
  73.         <FAIcon
  74.           icon="thumbtack"
  75.           class="faint"
  76.         />
  77.         <span class="faint">{{ $t('status.pinned') }}</span>
  78.       </div>
  79.       <div
  80.         v-if="retweet && !noHeading && !inConversation"
  81.         :class="[repeaterClass, { highlighted: repeaterStyle }]"
  82.         :style="[repeaterStyle]"
  83.         class="status-container repeat-info"
  84.       >
  85.         <UserAvatar
  86.           v-if="retweet"
  87.           class="left-side repeater-avatar"
  88.           :show-actor-type-indicator="showActorTypeIndicator"
  89.           :better-shadow="betterShadow"
  90.           :user="statusoid.user"
  91.         />
  92.         <div class="right-side faint">
  93.           <bdi
  94.             class="status-username repeater-name"
  95.             :title="retweeter"
  96.           >
  97.             <router-link
  98.               v-if="retweeterHtml"
  99.               :to="retweeterProfileLink"
  100.             >
  101.               <RichContent
  102.                 :html="retweeterHtml"
  103.                 :emoji="retweeterUser.emoji"
  104.               />
  105.             </router-link>
  106.             <router-link
  107.               v-else
  108.               :to="retweeterProfileLink"
  109.             >{{ retweeter }}</router-link>
  110.           </bdi>
  111.           {{ ' ' }}
  112.           <FAIcon
  113.             icon="retweet"
  114.             class="repeat-icon"
  115.             :title="$t('tool_tip.repeat')"
  116.           />
  117.           {{ $t('timeline.repeated') }}
  118.         </div>
  119.       </div>
  121.       <div
  122.         v-if="!deleted"
  123.         :class="[userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]"
  124.         :style="[ userStyle ]"
  125.         class="status-container"
  126.         :data-tags="tags"
  127.       >
  128.         <div
  129.           v-if="!noHeading"
  130.           class="left-side"
  131.         >
  132.           <a
  133.             :href="$router.resolve(userProfileLink).href"
  134.             @click.prevent
  135.           >
  136.             <UserPopover
  137.               :user-id="status.user.id"
  138.               :overlay-centers="true"
  139.             >
  140.               <UserAvatar
  141.                 class="post-avatar"
  142.                 :show-actor-type-indicator="showActorTypeIndicator"
  143.                 :compact="compact"
  144.                 :better-shadow="betterShadow"
  145.                 :user="status.user"
  146.               />
  147.             </UserPopover>
  148.           </a>
  149.         </div>
  150.         <div class="right-side">
  151.           <div
  152.             v-if="!noHeading"
  153.             class="status-heading"
  154.           >
  155.             <div class="heading-name-row">
  156.               <div class="heading-left">
  157.                 <h4
  158.                   v-if="status.user.name_html"
  159.                   class="status-username"
  160.                   :title="status.user.name"
  161.                 >
  162.                   <RichContent
  163.                     :html="status.user.name"
  164.                     :emoji="status.user.emoji"
  165.                   />
  166.                 </h4>
  167.                 <h4
  168.                   v-else
  169.                   class="status-username"
  170.                   :title="status.user.name"
  171.                 >
  172.                   {{ status.user.name }}
  173.                 </h4>
  174.                 <user-link
  175.                   class="account-name"
  176.                   :title="status.user.screen_name_ui"
  177.                   :user="status.user"
  178.                   :at="false"
  179.                 />
  180.                 <img
  181.                   v-if="!!(status.user && status.user.favicon)"
  182.                   class="status-favicon"
  183.                   :src="status.user.favicon"
  184.                 >
  185.               </div>
  187.               <span class="heading-right">
  188.                 <router-link
  189.                   class="timeago faint"
  190.                   :to="{ name: 'conversation', params: { id: status.id } }"
  191.                 >
  192.                   <Timeago
  193.                     :time="status.created_at"
  194.                     :auto-update="60"
  195.                   />
  196.                 </router-link>
  197.                 <span
  198.                   v-if="status.visibility"
  199.                   class="visibility-icon"
  200.                   :title="visibilityLocalized"
  201.                 >
  202.                   <FAIcon
  203.                     fixed-width
  204.                     class="fa-scale-110"
  205.                     :icon="visibilityIcon(status.visibility)"
  206.                   />
  207.                 </span>
  208.                 <button
  209.                   v-if="expandable && !isPreview"
  210.                   class="button-unstyled"
  211.                   :title="$t('status.expand')"
  212.                   @click.prevent="toggleExpanded"
  213.                 >
  214.                   <FAIcon
  215.                     fixed-width
  216.                     class="fa-scale-110"
  217.                     icon="plus-square"
  218.                   />
  219.                 </button>
  220.                 <button
  221.                   v-if="unmuted"
  222.                   class="button-unstyled"
  223.                   @click.prevent="toggleMute"
  224.                 >
  225.                   <FAIcon
  226.                     fixed-width
  227.                     icon="eye-slash"
  228.                     class="fa-scale-110"
  229.                   />
  230.                 </button>
  231.                 <button
  232.                   v-if="inThreadForest && replies && replies.length && !simpleTree"
  233.                   class="button-unstyled"
  234.                   :title="threadShowing ? $t('status.thread_hide') : $t('status.thread_show')"
  235.                   :aria-expanded="threadShowing ? 'true' : 'false'"
  236.                   @click.prevent="toggleThreadDisplay"
  237.                 >
  238.                   <FAIcon
  239.                     fixed-width
  240.                     class="fa-scale-110"
  241.                     :icon="threadShowing ? 'chevron-up' : 'chevron-down'"
  242.                   />
  243.                 </button>
  244.                 <button
  245.                   v-if="dive && !simpleTree"
  246.                   class="button-unstyled"
  247.                   :title="$t('status.show_only_conversation_under_this')"
  248.                   @click.prevent="dive"
  249.                 >
  250.                   <FAIcon
  251.                     fixed-width
  252.                     class="fa-scale-110"
  253.                     :icon="'angle-double-right'"
  254.                   />
  255.                 </button>
  256.               </span>
  257.             </div>
  258.             <div
  259.               v-if="scrobblePresent"
  260.               class="status-rich-presence"
  261.             >
  262.               <a
  263.                 v-if="scrobble.externalLink"
  264.                 :href="scrobble.externalLink"
  265.                 target="_blank"
  266.               >
  267.                 {{ scrobble.artist }} — {{ scrobble.title }}
  268.                 <FAIcon
  269.                   class="fa-scale-110 fa-old-padding"
  270.                   icon="play"
  271.                 />
  272.                 <span class="status-rich-presence-time">
  273.                   <Timeago
  274.                     template-key="time.in_past"
  275.                     :time="scrobble.created_at"
  276.                     :auto-update="60"
  277.                   />
  278.                 </span>
  279.               </a>
  280.               <span v-if="!scrobble.externalLink">
  281.                 <FAIcon
  282.                   class="fa-scale-110 fa-old-padding"
  283.                   icon="music"
  284.                 />
  285.                 {{ scrobble.artist }} — {{ scrobble.title }}
  286.                 <FAIcon
  287.                   class="fa-scale-110 fa-old-padding"
  288.                   icon="play"
  289.                 />
  290.                 <span class="status-rich-presence-time">
  291.                   <Timeago
  292.                     template-key="time.in_past"
  293.                     :time="scrobble.created_at"
  294.                     :auto-update="60"
  295.                   />
  296.                 </span>
  297.               </span>
  298.             </div>
  299.             <div
  300.               v-if="isReply || hasMentionsLine"
  301.               class="heading-reply-row"
  302.             >
  303.               <span
  304.                 v-if="isReply"
  305.                 class="glued-label reply-glued-label"
  306.               >
  307.                 <StatusPopover
  308.                   v-if="!isPreview"
  309.                   :status-id="status.parent_visible && status.in_reply_to_status_id"
  310.                   class="reply-to-popover"
  311.                   style="min-width: 0;"
  312.                   :class="{ '-strikethrough': !status.parent_visible }"
  313.                 >
  314.                   <button
  315.                     class="button-unstyled reply-to"
  316.                     :aria-label="$t('tool_tip.reply')"
  317.                     @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
  318.                   >
  319.                     <FAIcon
  320.                       class="fa-scale-110 fa-old-padding"
  321.                       icon="reply"
  322.                       flip="horizontal"
  323.                     />
  324.                     {{ ' ' }}
  325.                     <span
  326.                       class="reply-to-text"
  327.                     >
  328.                       {{ $t('status.reply_to') }}
  329.                     </span>
  330.                   </button>
  331.                 </StatusPopover>
  333.                 <span
  334.                   v-else
  335.                   class="reply-to-no-popover"
  336.                 >
  337.                   <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
  338.                 </span>
  339.                 <MentionLink
  340.                   :content="replyToName"
  341.                   :url="replyProfileLink"
  342.                   :user-id="status.in_reply_to_user_id"
  343.                   :user-screen-name="status.in_reply_to_screen_name"
  344.                 />
  345.               </span>
  347.               <!-- This little wrapper is made for sole purpose of "gluing" -->
  348.               <!-- "Mentions" label to the first mention -->
  349.               <span
  350.                 v-if="hasMentionsLine"
  351.                 class="glued-label"
  352.               >
  353.                 <span
  354.                   class="mentions"
  355.                   :aria-label="$t('tool_tip.mentions')"
  356.                   @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
  357.                 >
  358.                   <span
  359.                     class="mentions-text"
  360.                   >
  361.                     {{ $t('status.mentions') }}
  362.                   </span>
  363.                 </span>
  364.                 <MentionsLine
  365.                   v-if="hasMentionsLine"
  366.                   :mentions="mentionsLine.slice(0, 1)"
  367.                   class="mentions-line-first"
  368.                 />
  369.               </span>
  370.               {{ ' ' }}
  371.               <MentionsLine
  372.                 v-if="hasMentionsLine"
  373.                 :mentions="mentionsLine.slice(1)"
  374.                 class="mentions-line"
  375.               />
  376.             </div>
  377.             <div
  378.               v-if="isEdited && editingAvailable && !isPreview"
  379.               class="heading-edited-row"
  380.             >
  381.               <i18n-t
  382.                 keypath="status.edited_at"
  383.                 tag="span"
  384.               >
  385.                 <template #time>
  386.                   <Timeago
  387.                     template-key="time.in_past"
  388.                     :time="status.edited_at"
  389.                     :auto-update="60"
  390.                     :long-format="true"
  391.                   />
  392.                 </template>
  393.               </i18n-t>
  394.             </div>
  395.           </div>
  397.           <StatusContent
  398.             ref="content"
  399.             :status="status"
  400.             :no-heading="noHeading"
  401.             :highlight="highlight"
  402.             :focused="isFocused"
  403.             :controlled-showing-tall="controlledShowingTall"
  404.             :controlled-expanding-subject="controlledExpandingSubject"
  405.             :controlled-showing-long-subject="controlledShowingLongSubject"
  406.             :controlled-toggle-showing-tall="controlledToggleShowingTall"
  407.             :controlled-toggle-expanding-subject="controlledToggleExpandingSubject"
  408.             :controlled-toggle-showing-long-subject="controlledToggleShowingLongSubject"
  409.             @mediaplay="addMediaPlaying($event)"
  410.             @mediapause="removeMediaPlaying($event)"
  411.             @parseReady="setHeadTailLinks"
  412.           />
  414.           <article
  415.             v-if="hasVisibleQuote"
  416.             class="quoted-status"
  417.           >
  418.             <button
  419.               class="button-unstyled -link display-quoted-status-button"
  420.               :aria-expanded="shouldDisplayQuote"
  421.               @click="toggleDisplayQuote"
  422.             >
  423.               {{ shouldDisplayQuote ? $t('status.hide_quote') : $t('status.display_quote') }}
  424.               <FAIcon
  425.                 class="display-quoted-status-button-icon"
  426.                 :icon="shouldDisplayQuote ? 'chevron-up' : 'chevron-down'"
  427.               />
  428.             </button>
  429.             <Status
  430.               v-if="shouldDisplayQuote"
  431.               :statusoid="quotedStatus"
  432.               :in-quote="true"
  433.             />
  434.           </article>
  435.           <p
  436.             v-else-if="hasInvisibleQuote"
  437.             class="quoted-status -unavailable-prompt"
  438.           >
  439.             <i18n-t keypath="status.invisible_quote">
  440.               <template #link>
  441.                 <bdi>
  442.                   <a
  443.                     :href="status.quote_url"
  444.                     target="_blank"
  445.                   >
  446.                     {{ status.quote_url }}
  447.                   </a>
  448.                 </bdi>
  449.               </template>
  450.             </i18n-t>
  451.           </p>
  453.           <div
  454.             v-if="inConversation && !isPreview && replies && replies.length"
  455.             class="replies"
  456.           >
  457.             <button
  458.               v-if="showOtherRepliesAsButton && replies.length > 1"
  459.               class="button-unstyled -link"
  460.               :title="$tc('status.ancestor_follow', replies.length - 1, { numReplies: replies.length - 1 })"
  461.               @click.prevent="dive"
  462.             >
  463.               {{ $tc('status.replies_list_with_others', replies.length - 1, { numReplies: replies.length - 1 }) }}
  464.             </button>
  465.             <span
  466.               v-else
  467.               class="faint"
  468.             >
  469.               {{ $t('status.replies_list') }}
  470.             </span>
  471.             <StatusPopover
  472.               v-for="reply in replies"
  473.               :key="reply.id"
  474.               :status-id="reply.id"
  475.             >
  476.               <button
  477.                 class="button-unstyled -link reply-link"
  478.                 @click.prevent="gotoOriginal(reply.id)"
  479.               >
  480.                 {{ reply.name }}
  481.               </button>
  482.             </StatusPopover>
  483.           </div>
  485.           <transition name="fade">
  486.             <div
  487.               v-if="shouldDisplayFavsAndRepeats"
  488.               class="favs-repeated-users"
  489.             >
  490.               <div class="stats">
  491.                 <UserListPopover
  492.                   v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0"
  493.                   :users="statusFromGlobalRepository.rebloggedBy"
  494.                 >
  495.                   <div class="stat-count">
  496.                     <a class="stat-title">{{ $t('status.repeats') }}</a>
  497.                     <div class="stat-number">
  498.                       {{ statusFromGlobalRepository.rebloggedBy.length }}
  499.                     </div>
  500.                   </div>
  501.                 </UserListPopover>
  502.                 <UserListPopover
  503.                   v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0"
  504.                   :users="statusFromGlobalRepository.favoritedBy"
  505.                 >
  506.                   <div
  507.                     class="stat-count"
  508.                   >
  509.                     <a class="stat-title">{{ $t('status.favorites') }}</a>
  510.                     <div class="stat-number">
  511.                       {{ statusFromGlobalRepository.favoritedBy.length }}
  512.                     </div>
  513.                   </div>
  514.                 </UserListPopover>
  515.                 <router-link
  516.                   v-if="statusFromGlobalRepository.quotes_count > 0"
  517.                   :to="{ name: 'quotes', params: { id: status.id } }"
  518.                 >
  519.                   <div
  520.                     class="stat-count"
  521.                   >
  522.                     <a class="stat-title">{{ $t('status.quotes') }}</a>
  523.                     <div class="stat-number">
  524.                       {{ statusFromGlobalRepository.quotes_count }}
  525.                     </div>
  526.                   </div>
  527.                 </router-link>
  528.                 <div class="avatar-row">
  529.                   <AvatarList :users="combinedFavsAndRepeatsUsers" />
  530.                 </div>
  531.               </div>
  532.             </div>
  533.           </transition>
  535.           <EmojiReactions
  536.             v-if="(mergedConfig.emojiReactionsOnTimeline || isFocused) && (!noHeading && !isPreview)"
  537.             :status="status"
  538.           />
  540.           <div
  541.             v-if="!noHeading && !isPreview"
  542.             class="status-actions"
  543.           >
  544.             <reply-button
  545.               :replying="replying"
  546.               :status="status"
  547.               @toggle="toggleReplying"
  548.             />
  549.             <retweet-button
  550.               :visibility="status.visibility"
  551.               :logged-in="loggedIn"
  552.               :status="status"
  553.               @click="$emit('interacted')"
  554.             />
  555.             <favorite-button
  556.               :logged-in="loggedIn"
  557.               :status="status"
  558.               @click="$emit('interacted')"
  559.             />
  560.             <ReactButton
  561.               v-if="loggedIn"
  562.               :status="status"
  563.               @click="$emit('interacted')"
  564.             />
  565.             <extra-buttons
  566.               :status="status"
  567.               @onError="showError"
  568.               @onSuccess="clearError"
  569.             />
  570.           </div>
  571.         </div>
  572.       </div>
  573.       <div
  574.         v-else
  575.         class="gravestone"
  576.       >
  577.         <div class="left-side">
  578.           <UserAvatar
  579.             class="post-avatar"
  580.             :compact="compact"
  581.             :show-actor-type-indicator="showActorTypeIndicator"
  582.           />
  583.         </div>
  584.         <div class="right-side">
  585.           <div class="deleted-text">
  586.             {{ $t('status.status_deleted') }}
  587.           </div>
  588.           <reply-button
  589.             v-if="replying"
  590.             :replying="replying"
  591.             :status="status"
  592.             @toggle="toggleReplying"
  593.           />
  594.         </div>
  595.       </div>
  596.       <div
  597.         v-if="replying"
  598.         class="status-container reply-form"
  599.       >
  600.         <PostStatusForm
  601.           class="reply-body"
  602.           :reply-to="status.id"
  603.           :attentions="status.attentions"
  604.           :replied-user="status.user"
  605.           :copy-message-scope="status.visibility"
  606.           :subject="replySubject"
  607.           @posted="toggleReplying"
  608.         />
  609.       </div>
  610.     </template>
  611.   </div>
  612. </template>
  614. <script src="./status.js"></script>
  616. <style src="./status.scss" lang="scss"></style>