logo

pleroma-fe

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

status.vue (19414B)

    

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