Merge branch 'dev_vald_fe/nsfw_preload' into 'develop'

preload nsfw image

Closes #193

See merge request pleroma/pleroma-fe!411

src/components/attachment/attachment.js

@@ -13,6 +13,7 @@ const Attachment = {
     return {
       nsfwImage,
       hideNsfwLocal: this.$store.state.config.hideNsfw,
+      preloadImage: this.$store.state.config.preloadImage,
       loopVideo: this.$store.state.config.loopVideo,
       showHidden: false,
       loading: false,
@@ -46,7 +47,7 @@ const Attachment = {
       }
     },
     toggleHidden () {
-      if (this.img) {
+      if (this.img && !this.preloadImage) {
         if (this.img.onload) {
           this.img.onload()
         } else {

src/components/attachment/attachment.vue

@@ -9,8 +9,7 @@
     <div class="hider" v-if="nsfw && hideNsfwLocal && !hidden">
       <a href="#" @click.prevent="toggleHidden()">Hide</a>
     </div>
-
+    <a v-if="type === 'image' && (!hidden || preloadImage)" class="image-attachment" :class="{'hidden': hidden && preloadImage}" :href="attachment.url" target="_blank" :title="attachment.description">
-    <a v-if="type === 'image' && !hidden" class="image-attachment" :href="attachment.url" target="_blank" :title="attachment.description">
       <StillImage :class="{'small': isSmall}" referrerpolicy="no-referrer" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
     </a>
 
@@ -161,6 +160,10 @@
     display: flex;
     flex: 1;
 
+    &.hidden {
+      display: none;
+    }
+
     .still-image {
       width: 100%;
       height: 100%;

src/components/settings/settings.js

@@ -14,6 +14,7 @@ const settings = {
       hideAttachmentsInConvLocal: user.hideAttachmentsInConv,
       hideNsfwLocal: user.hideNsfw,
       hideISPLocal: user.hideISP,
+      preloadImage: user.preloadImage,
       hidePostStatsLocal: typeof user.hidePostStats === 'undefined'
         ? instance.hidePostStats
         : user.hidePostStats,
@@ -84,6 +85,9 @@ const settings = {
     hideNsfwLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideNsfw', value })
     },
+    preloadImage (value) {
+      this.$store.dispatch('setOption', { name: 'preloadImage', value })
+    },
     hideISPLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideISP', value })
     },

src/components/settings/settings.vue

@@ -118,6 +118,12 @@
               <input type="checkbox" id="hideNsfw" v-model="hideNsfwLocal">
               <label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
             </li>
+            <ul class="setting-list suboptions" >
+              <li>
+                <input :disabled="!hideAttachmentsInConvLocal" type="checkbox" id="preloadImage" v-model="preloadImage">
+                <label for="preloadImage">{{$t('settings.preload_images')}}</label>
+              </li>
+            </ul>
             <li>
               <input type="checkbox" id="stopGifs" v-model="stopGifs">
               <label for="stopGifs">{{$t('settings.stop_gifs')}}</label>

src/i18n/en.json

@@ -125,6 +125,7 @@
     "hide_attachments_in_convo": "Hide attachments in conversations",
     "hide_attachments_in_tl": "Hide attachments in timeline",
     "hide_isp": "Hide instance-specific panel",
+    "preload_images": "Preload images",
     "hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
     "hide_user_stats": "Hide user statistics (e.g. the number of followers)",
     "import_followers_from_a_csv_file": "Import follows from a csv file",

src/modules/config.js

@@ -9,6 +9,7 @@ const defaultState = {
   hideAttachments: false,
   hideAttachmentsInConv: false,
   hideNsfw: true,
+  preloadImage: true,
   loopVideo: true,
   loopVideoSilentOnly: true,
   autoLoad: true,