after nine years of development, hopefully, it has been worth the weight

src/components/notifications/notifications.js

@@ -1,4 +1,5 @@
 import Status from '../status/status.vue'
+import StillImage from '../still-image/still-image.vue'
 
 import { sortBy, take, filter } from 'lodash'
 
@@ -31,7 +32,7 @@ const Notifications = {
     }
   },
   components: {
-    Status
+    Status, StillImage
   },
   watch: {
     unseenCount (count) {

src/components/notifications/notifications.scss

@@ -88,10 +88,26 @@
     }
 
     .avatar {
-      padding-top: 0.3em;
+      margin-top: 0.3em;
       width: 32px;
       height: 32px;
       border-radius: 50%;
+      overflow: hidden;
+      line-height: 0;
+
+      &.animated::before {
+        display: none;
+      }
+
+    }
+
+    &:hover .animated.avatar {
+      canvas {
+        display: none;
+      }
+      img {
+        visibility: visible;
+      }
     }
 
     &:last-child {

src/components/notifications/notifications.vue

@@ -10,7 +10,7 @@
         <div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>
           <div>
             <a :href="notification.action.user.statusnet_profile_url" target="_blank">
-              <img class='avatar' :src="notification.action.user.profile_image_url_original">
+              <StillImage class='avatar' :src="notification.action.user.profile_image_url_original"/>
             </a>
           </div>
           <div class='text' style="width: 100%;">

src/components/settings/settings.js

@@ -10,7 +10,8 @@ const settings = {
       muteWordsString: this.$store.state.config.muteWords.join('\n'),
       autoLoadLocal: this.$store.state.config.autoLoad,
       streamingLocal: this.$store.state.config.streaming,
-      hoverPreviewLocal: this.$store.state.config.hoverPreview
+      hoverPreviewLocal: this.$store.state.config.hoverPreview,
+      stopGifs: this.$store.state.config.stopGifs
     }
   },
   components: {
@@ -43,6 +44,9 @@ const settings = {
     muteWordsString (value) {
       value = filter(value.split('\n'), (word) => trim(word).length > 0)
       this.$store.dispatch('setOption', { name: 'muteWords', value })
+    },
+    stopGifs (value) {
+      this.$store.dispatch('setOption', { name: 'stopGifs', value })
     }
   }
 }

src/components/settings/settings.vue

@@ -29,8 +29,8 @@
                 <label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
             </li>
             <li>
-                <input type="checkbox" id="autoLoad" v-model="autoLoadLocal">
+                <input type="checkbox" id="autoload" v-model="autoloadlocal">
-                <label for="autoLoad">{{$t('settings.autoload')}}</label>
+                <label for="autoload">{{$t('settings.autoload')}}</label>
             </li>
             <li>
                 <input type="checkbox" id="streaming" v-model="streamingLocal">
@@ -40,6 +40,10 @@
                 <input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
                 <label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
             </li>
+            <li>
+                <input type="checkbox" id="stopGifs" v-model="stopGifs">
+                <label for="stopGifs">{{$t('settings.stop_gifs')}}</label>
+            </li>
         </ul>
       </div>
     </div>

src/components/status/status.vue

@@ -35,7 +35,7 @@
         <div class="media-left">
           <a :href="status.user.statusnet_profile_url">
             <StillImage @click.native.prevent="toggleUserExpanded" :class="{retweeted: retweet}" class='avatar' :src="status.user.profile_image_url_original"/>
-            <img v-if="retweet" class='avatar-retweeter' :src="statusoid.user.profile_image_url_original"></img>
+            <StillImage v-if="retweet" class='avatar avatar-retweeter' :src="statusoid.user.profile_image_url_original"/>
           </a>
         </div>
         <div class="media-body">
@@ -265,7 +265,7 @@
 
      .media-left {
         margin: 0.2em 0.3em 0 0;
-        img {
+        .avatar {
           float: right;
         }
      }
@@ -359,7 +359,7 @@
      }
  }
 
- .status img.avatar-retweeter {
+ .status .avatar-retweeter {
    width: 24px;
    height: 24px;
    position: absolute;
@@ -433,7 +433,7 @@
      }
    }
 
-   .status img.avatar-retweeter {
+   .status .avatar-retweeter {
      width: 22px;
      height: 22px;
      position: absolute;

src/components/still-image/still-image.js

@@ -4,9 +4,14 @@ const StillImage = {
     'referrerpolicy',
     'mimetype'
   ],
+  data () {
+    return {
+      stopGifs: this.$store.state.config.stopGifs
+    }
+  },
   computed: {
     animated () {
-      return this.mimetype === 'image/gif' || this.src.endsWith('.gif')
+      return this.stopGifs && (this.mimetype === 'image/gif' || this.src.endsWith('.gif'))
     }
   },
   methods: {

src/components/still-image/still-image.vue

@@ -12,15 +12,21 @@
 .still-image {
     position: relative;
     line-height: 0;
+    overflow: hidden;
 
     &:hover canvas {
         display: none;
     }
 
+    img {
+        width: 100%;
+        height: 100%
+    }
+
     &.animated {
         &:hover::before,
         img {
-            visibility: hidden
+            visibility: hidden;
         }
 
         &:hover img {

src/components/user_card_content/user_card_content.js

@@ -1,3 +1,4 @@
+import StillImage from '../still-image/still-image.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
 
 export default {
@@ -35,6 +36,9 @@ export default {
       return Math.round(this.user.statuses_count / days)
     }
   },
+  components: {
+    StillImage
+  },
   methods: {
     followUser () {
       const store = this.$store

src/components/user_card_content/user_card_content.vue

@@ -7,7 +7,7 @@
         </router-link>
         <div class='container'>
           <router-link :to="{ name: 'user-profile', params: { id: user.id } }">
-            <img :src="user.profile_image_url_original">
+            <StillImage class="avatar" :src="user.profile_image_url_original"/>
           </router-link>
           <span class="glyphicon glyphicon-user"></span>
           <div class="name-and-screen-name">
@@ -135,13 +135,26 @@
     overflow: hidden;
   }
 
-  img {
+  .avatar {
     border-radius: 5px;
     flex: 1 0 100%;
     width: 56px;
     height: 56px;
     box-shadow: 0px 1px 8px rgba(0,0,0,0.75);
     object-fit: cover;
+
+    &.animated::before {
+      display: none;
+    }
+  }
+
+  &:hover .animated.avatar {
+    canvas {
+      display: none;
+    }
+    img {
+      visibility: visible;
+    }
   }
 
 	text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0);

src/i18n/messages.js

@@ -245,6 +245,7 @@ const en = {
     hide_attachments_in_tl: 'Hide attachments in timeline',
     hide_attachments_in_convo: 'Hide attachments in conversations',
     nsfw_clickthrough: 'Enable clickthrough NSFW attachment hiding',
+    stop_gifs: 'Play-on-hover GIFs',
     autoload: 'Enable automatic loading when scrolled to the bottom',
     streaming: 'Enable automatic streaming of new posts when scrolled to the top',
     reply_link_preview: 'Enable reply-link preview on mouse hover',
@@ -1096,6 +1097,7 @@ const ru = {
     attachments: 'Вложения',
     hide_attachments_in_tl: 'Прятать вложения в ленте',
     hide_attachments_in_convo: 'Прятать вложения в разговорах',
+    stop_gifs: 'Проигрывать GIF анимации только при наведении',
     nsfw_clickthrough: 'Включить скрытие NSFW вложений',
     autoload: 'Включить автоматическую загрузку при прокрутке вниз',
     streaming: 'Включить автоматическую загрузку новых сообщений при прокрутке вверх',