mixit/compiler/src/mastodon/status.vue

<template lang="pug">
.status
  account(v-if="withAccount" :account="status.account" :showMedia="showMedia")

  span.text-icon.letter(v-if="status.reblog") ⟳

  a.date(target="_blank" :href="status.uri")
    from-now(:date="status.created_at" :now="now")

  .content(:class="{ avatared: showMedia }")
    template(v-if="!status.reblog")
      .spoiler(v-if="status.spoiler_text" @click.stop.prevent="status.sensitive = !status.sensitive").
        {{ status.spoiler_text || 'Spoiler' }} {{ status.sensitive ? '&rarr;' : '&darr;' }}
      div(v-if="!status.spoiler_text || !status.sensitive")
        .text(v-html="parseEmojis(status.content, status.emojis)")
        a.media(v-for="media in status.media_attachments" :href="media.url" target="_blank")
          template(v-if="showMedia")
            img(v-if="media.type == 'image' || media.type == 'gifv'" :src="media.preview_url" :alt="media.description" :title="media.description")
            .gif(v-if="media.type == 'gifv'") GIF
          template(v-else) Hidden media
    status.reblog(v-else :status="status.reblog" :now="now" :showMedia="showMedia")

  .meta(v-if="!status.reblog")
    a.replies(@click.stop.prevent="makeReply(status)")
      span.text-icon ✉
      | {{ status.replies_count }}
    a.reblogs(:class="{ colored: status.reblogged }" @click.stop.prevent="makeReblog(status)")
      span.text-icon ⟳
      | {{ status.reblogs_count }}
    a.favourites(:class="{ colored: status.favourited }" @click.stop.prevent="makeFav(status)")
      span.text-icon ⚝
      | {{ status.favourites_count }}
    a.fil(v-if="status.in_reply_to_id" @click.stop.prevent="showReply(status.in_reply_to_id)")
      | Voir le fil
</template>

<script>
import fromNowVue, { timedMixin } from '../core/fromNow.vue'
import { parseEmojisMixin } from './tools'
import accountVue from './account.vue'

export default {
  name: 'Status',
  components: {
    account: accountVue,
    fromNow: fromNowVue
  },
  mixins: [ timedMixin, parseEmojisMixin ],
  props: {
    status: {
      type: Object,
      default: undefined
    },
    withAccount: {
      type: Boolean,
      default: true
    },
    showMedia: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    showReply(statusId) {
      console.error(statusId) //TODO:
    },
    makeReply(status) {
      console.error(status.id) //TODO:
    },
    emitMark(status, action, callback, undo = false) {
      this.$emit('mark', {
        id: status.id,
        type: (undo ? 'un' : '') + action,
        callback: callback
      })
    },
    makeReblog(status) {
      this.emitMark(status, 'reblog', () => {
        status.reblogs_count += (status.reblogged ? -1 : 1)
        status.reblogged = !status.reblogged
      }, status.reblogged)
    },
    makeFav(status) {
      this.emitMark(status, 'favourite', () => {
        status.favourites_count += (status.favourited ? -1 : 1)
        status.favourited = !status.favourited
      }, status.favourited)
    }
  }
}
</script>