2 files changed, 34 insertions, 10 deletions
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index cb31020d..e23fcb1b 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -3,6 +3,20 @@ import VideoAttachment from '../video_attachment/video_attachment.vue'
 import nsfwImage from '../../assets/nsfw.png'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { mapGetters } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faFile,
+  faMusic,
+  faImage,
+  faVideo
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faFile,
+  faMusic,
+  faImage,
+  faVideo
+)
 
 const Attachment = {
   props: [
@@ -39,10 +53,10 @@ const Attachment = {
       return this.attachment.description
     },
     placeholderIconClass () {
-      if (this.type === 'image') return 'icon-picture'
-      if (this.type === 'video') return 'icon-video'
-      if (this.type === 'audio') return 'icon-music'
-      return 'icon-doc'
+      if (this.type === 'image') return 'image'
+      if (this.type === 'video') return 'video'
+      if (this.type === 'audio') return 'music'
+      return 'file'
     },
     referrerpolicy () {
       return this.$store.state.instance.mediaProxyAvailable ? '' : 'no-referrer'
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 63e0ceba..f1fac2c8 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -12,7 +12,7 @@
       :alt="attachment.description"
       :title="attachment.description"
     >
-      <span :class="placeholderIconClass" />
+      <FAIcon :icon="placeholderIconClass" />
       <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }}
     </a>
   </div>
@@ -28,7 +28,7 @@
       :href="attachment.url"
       :alt="attachment.description"
       :title="attachment.description"
-      @click.prevent="toggleHidden"
+      @click.prevent.stop="toggleHidden"
     >
       <img
         :key="nsfwImage"
@@ -36,9 +36,10 @@
         :src="nsfwImage"
         :class="{'small': isSmall}"
       >
-      <i
+      <FAIcon
         v-if="type === 'video'"
-        class="play-icon icon-play-circled"
+        class="play-icon"
+        icon="play-circle"
       />
     </a>
     <div
@@ -80,10 +81,13 @@
         class="video"
         :attachment="attachment"
         :controls="allowPlay"
+        @play="$emit('play')"
+        @pause="$emit('pause')"
       />
-      <i
+      <FAIcon
         v-if="!allowPlay"
-        class="play-icon icon-play-circled"
+        class="play-icon"
+        icon="play-circle"
       />
     </a>
 
@@ -93,6 +97,8 @@
       :alt="attachment.description"
       :title="attachment.description"
       controls
+      @play="$emit('play')"
+      @pause="$emit('pause')"
     />
 
     <div
@@ -138,6 +144,10 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     max-width: 100%;
+
+    svg {
+      color: inherit;
+    }
   }
 
   .nsfw-placeholder {