feat(files): blur nsfw image thumbnails based on settings

assets/styles/framework/blurs.less

@@ -11,3 +11,7 @@
 .blur-more {
   backdrop-filter: @heavy-blur;
 }
+
+.blur-image {
+  filter: @blur;
+}

components/views/files/controls/Controls.vue

@@ -113,7 +113,7 @@ export default Vue.extend({
       const sameNameResults: File[] = emptyFileResults.filter((file) => {
         return !this.$FileSystem.currentDirectory.hasChild(file.name)
       })
-      const nsfwResults: Promise<{ file: File; nsfw: boolean }>[] =
+      const files: Promise<{ file: File; nsfw: boolean }>[] =
         sameNameResults.map(async (file: File) => {
           // convert heic to jpg for scan. return original heic if sfw
           if (await isHeic(file)) {
@@ -140,20 +140,17 @@ export default Vue.extend({
           return { file, nsfw }
         })
 
-      const files: File[] = []
-
-      for await (const el of nsfwResults) {
-        if (!el.nsfw) {
-          files.push(el.file)
-        }
-      }
-      for (const file of files) {
+      for await (const file of files) {
         try {
           this.$store.commit(
             'ui/setFilesUploadStatus',
-            this.$t('pages.files.controls.upload', [file.name]),
+            this.$t('pages.files.controls.upload', [file.file.name]),
+          )
+          await this.$FileSystem.uploadFile(
+            file.file,
+            file.nsfw,
+            this.setProgress,
           )
-          await this.$FileSystem.uploadFile(file, this.setProgress)
         } catch (e: any) {
           this.errors.push(e?.message ?? '')
         }
@@ -183,9 +180,6 @@ export default Vue.extend({
       if (emptyFileResults.length !== sameNameResults.length) {
         this.errors.push(this.$t('pages.files.errors.duplicate_name'))
       }
-      if (nsfwResults.length !== files.length) {
-        this.errors.push(this.$t('errors.chat.contains_nsfw'))
-      }
     },
     /**
      * @method setProgress

components/views/files/file/File.html

@@ -21,7 +21,14 @@
       @mouseleave="heartHover=false"
     />
   </div>
-  <img v-if="item.thumbnail" class="image-preview" :src="item.thumbnail" />
+  <!-- add container so blur effect doesn't go outside the dimensions of the image -->
+  <div v-if="item.thumbnail" class="image-container">
+    <img
+      class="image-preview"
+      :class="{'blur-image' : item.nsfw && settings.blockNsfw}"
+      :src="item.thumbnail"
+    />
+  </div>
   <div v-else class="icon-container">
     <folder-icon v-if="item.content" size="4x" class="file-type-icon" />
     <archive-icon v-else-if="isArchive" size="4x" class="file-type-icon" />

components/views/files/file/File.less

@@ -38,10 +38,15 @@
     }
   }
 
-  .image-preview {
+  .image-container {
+    overflow: hidden;
     height: 162px;
-    object-fit: cover;
     filter: brightness(0.75);
+    .image-preview {
+      height: 162px;
+      width: @full;
+      object-fit: cover;
+    }
   }
 
   .text-container {

components/views/files/file/File.vue

@@ -47,7 +47,7 @@ export default Vue.extend({
     }
   },
   computed: {
-    ...mapState(['ui']),
+    ...mapState(['ui', 'settings']),
     /**
      * @returns {string} if directory, child count. if file, size
      */

libraries/Files/Fil.ts

@@ -8,6 +8,7 @@ export class Fil extends Item {
   private _size: number = 0
   private _file: File | undefined
   private _thumbnail: string
+  private _nsfw: boolean
 
   /**
    * @constructor
@@ -25,6 +26,7 @@ export class Fil extends Item {
     description,
     type,
     thumbnail,
+    nsfw,
   }: {
     id?: string
     name: string
@@ -36,6 +38,7 @@ export class Fil extends Item {
     description?: string
     type?: FILE_TYPE
     thumbnail?: string
+    nsfw: boolean
   }) {
     if (!size) {
       throw new Error(FileSystemErrors.FILE_SIZE)
@@ -45,6 +48,7 @@ export class Fil extends Item {
     this._description = description || ''
     this._size = size
     this._thumbnail = thumbnail || ''
+    this._nsfw = nsfw
   }
 
   /**
@@ -70,6 +74,7 @@ export class Fil extends Item {
       description: this.description,
       type: this.type as FILE_TYPE,
       thumbnail: this.thumbnail,
+      nsfw: this._nsfw,
     })
   }
 
@@ -121,6 +126,14 @@ export class Fil extends Item {
     return this._thumbnail
   }
 
+  /**
+   * @getter nsfw
+   * @returns nsfw status of file
+   */
+  get nsfw(): boolean {
+    return this._nsfw
+  }
+
   /**
    * @setter file description text
    * @param {string} content the content to set the file description to

libraries/Files/FilSystem.ts

@@ -157,6 +157,7 @@ export class FilSystem {
         description,
         modified,
         thumbnail,
+        nsfw,
       } = item
       return {
         id,
@@ -168,6 +169,7 @@ export class FilSystem {
         description,
         modified,
         thumbnail,
+        nsfw,
       }
     }
     const { id, name, liked, shared, type, modified } = item
@@ -213,6 +215,7 @@ export class FilSystem {
         description,
         modified,
         thumbnail,
+        nsfw,
       } = item as ExportFile
       const type = item.type as FILE_TYPE
       this.createFile({
@@ -225,6 +228,7 @@ export class FilSystem {
         type,
         modified,
         thumbnail,
+        nsfw,
       })
     }
     if ((Object.values(DIRECTORY_TYPE) as string[]).includes(item.type)) {
@@ -256,6 +260,7 @@ export class FilSystem {
     type,
     modified,
     thumbnail,
+    nsfw,
   }: {
     id?: string
     name: string
@@ -267,6 +272,7 @@ export class FilSystem {
     type?: FILE_TYPE
     modified?: number
     thumbnail?: string
+    nsfw: boolean
   }): Fil | null {
     const newFile = new Fil({
       id,
@@ -279,6 +285,7 @@ export class FilSystem {
       type,
       modified,
       thumbnail,
+      nsfw,
     })
     const inserted = this.addChild(newFile)
     return inserted ? newFile : null

libraries/Files/TextileFileSystem.ts

@@ -26,7 +26,7 @@ export class TextileFileSystem extends FilSystem {
    * @param {File} file file to be uploaded
    * @param {Function} progressCallback used to show progress meter in componment that calls this method
    */
-  async uploadFile(file: File, progressCallback: Function) {
+  async uploadFile(file: File, nsfw: boolean, progressCallback: Function) {
     const id = uuidv4()
     await this.bucket.pushFile(file, id, progressCallback)
     // read magic byte type, use metadata as backup
@@ -40,6 +40,7 @@ export class TextileFileSystem extends FilSystem {
       size: file.size,
       type: Object.values(FILE_TYPE).includes(type) ? type : FILE_TYPE.GENERIC,
       thumbnail: await this._createThumbnail(file, byteType),
+      nsfw,
     })
   }