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 (19564B)

    

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