Merge remote-tracking branch 'upstream/develop' into emoji-selector-update

* upstream/develop: (469 commits)
  Feature/add sticker picker
  guard more secure routes
  guard secure routes by redirecting to root
  closest can returns itself as well
  find inside status-content div only
  try to use the closest a tag as target
  Update es.json
  Also apply keyword filter to subjects
  Remove files I accidentally pushed in
  fix issues caused by merges in usersearch on @
  Add user search at
  fix eslint warnings
  remove vue-popperjs
  fix moderation menu partially hidden by usercard boundary
  migrate popper css
  rewrite ModerationTools using v-tooltip
  make popover position for status action dropdow relative to parent node
  rewrite ExtraButtons using v-tooltip
  install v-tooltip
  i18n/Update pedantic Japanese translation
  ...

1 files changed, 51 insertions, 0 deletions

diff --git a/src/components/timeago/timeago.vue b/src/components/timeago/timeago.vue
new file mode 100644
index 00000000..6df0524d
--- /dev/null
+++ b/src/components/timeago/timeago.vue
@@ -0,0 +1,51 @@
+<template>
+  <time
+    :datetime="time"
+    :title="localeDateString"
+  >
+    {{ $t(relativeTime.key, [relativeTime.num]) }}
+  </time>
+</template>
+
+<script>
+import * as DateUtils from 'src/services/date_utils/date_utils.js'
+
+export default {
+  name: 'Timeago',
+  props: ['time', 'autoUpdate', 'longFormat', 'nowThreshold'],
+  data () {
+    return {
+      relativeTime: { key: 'time.now', num: 0 },
+      interval: null
+    }
+  },
+  computed: {
+    localeDateString () {
+      return typeof this.time === 'string'
+        ? new Date(Date.parse(this.time)).toLocaleString()
+        : this.time.toLocaleString()
+    }
+  },
+  created () {
+    this.refreshRelativeTimeObject()
+  },
+  destroyed () {
+    clearTimeout(this.interval)
+  },
+  methods: {
+    refreshRelativeTimeObject () {
+      const nowThreshold = typeof this.nowThreshold === 'number' ? this.nowThreshold : 1
+      this.relativeTime = this.longFormat
+        ? DateUtils.relativeTime(this.time, nowThreshold)
+        : DateUtils.relativeTimeShort(this.time, nowThreshold)
+
+      if (this.autoUpdate) {
+        this.interval = setTimeout(
+          this.refreshRelativeTimeObject,
+          1000 * this.autoUpdate
+        )
+      }
+    }
+  }
+}
+</script>