feat(files): encrypted bucket for personal files

components/views/files/file/File.html

@@ -21,20 +21,11 @@
       @mouseleave="heartHover=false"
     />
   </div>
-  <!-- todo- only showing images under a certain size because large images slow it down a LOT. maybe add thumbnail to index  -->
-  <img
-    v-if="isImage && item.size < $Config.uploadByteLimit"
-    class="image-preview"
-    :src="path"
-  />
+  <img v-if="item.thumbnail" class="image-preview" :src="item.thumbnail" />
   <div v-else class="icon-container">
     <folder-icon v-if="item.content" size="4x" class="file-type-icon" />
     <briefcase-icon v-else-if="isArchive" size="4x" class="file-type-icon" />
-    <image-icon
-      v-else-if="isImage && item.size > $Config.uploadByteLimit"
-      size="4x"
-      class="file-type-icon"
-    />
+    <image-icon v-else-if="isImage" size="4x" class="file-type-icon" />
     <file-icon v-else size="4x" class="file-type-icon" />
   </div>
   <div class="text-container">

components/views/files/file/File.less

@@ -25,8 +25,6 @@
   }
 
   &.disabled {
-    cursor: not-allowed;
-
     .quick-actions {
       display: none;
     }

components/views/files/file/File.vue

@@ -18,15 +18,11 @@ import { Fil } from '~/libraries/Files/Fil'
 
 declare module 'vue/types/vue' {
   interface Vue {
-    linkHover: boolean
-    heartHover: boolean
-    path: string
-    load: boolean
-    handle: () => void
     like: () => void
     share: () => void
     rename: () => void
     delete: () => void
+    $filesize: (item: number) => string
   }
 }
 
@@ -67,26 +63,24 @@ export default Vue.extend({
   computed: {
     ...mapState(['ui']),
     /**
-     * @returns if directory, child count. if file, size
+     * @returns {string} if directory, child count. if file, size
      */
     getSubtext(): string {
       return this.item instanceof Directory
         ? this.item.content.length + ' items'
         : this.$filesize((this.item as Fil).size)
     },
+    /**
+     * @returns {boolean} if item has discrete MIME type of image
+     */
     isImage(): boolean {
-      return Boolean(this.item.name.match(this.$Config.regex.image))
-    },
-    isArchive(): boolean {
-      return Boolean(this.item.name.match(this.$Config.regex.archive))
+      return this.item.type.includes('image')
     },
     /**
-     * @returns path inside textile bucket
+     * @returns {boolean} if item is archive file type
      */
-    path(): string {
-      return this.item instanceof Fil
-        ? this.$Config.textile.browser + this.item.hash
-        : ''
+    isArchive(): boolean {
+      return Boolean(this.item.name.match(this.$Config.regex.archive))
     },
   },
   methods: {
@@ -124,20 +118,21 @@ export default Vue.extend({
      * @description copy link to clipboard
      */
     async share() {
-      if (this.item instanceof Directory) {
-        this.$toast.show(this.$t('todo - share folders') as string)
-        return
-      }
-      if (!this.item.shared) {
-        this.$store.commit('ui/setIsLoadingFileIndex', true)
-        this.item.shareItem()
-        await this.$TextileManager.bucket?.updateIndex(this.$FileSystem.export)
-        this.$store.commit('ui/setIsLoadingFileIndex', false)
-      }
-      navigator.clipboard.writeText(this.path).then(() => {
-        this.$toast.show(this.$t('pages.files.link_copied') as string)
-      })
-      this.$emit('forceRender')
+      this.$toast.show(this.$t('todo - share') as string)
+      // if (this.item instanceof Directory) {
+      //   this.$toast.show(this.$t('todo - share folders') as string)
+      //   return
+      // }
+      // if (!this.item.shared) {
+      //   this.$store.commit('ui/setIsLoadingFileIndex', true)
+      //   this.item.shareItem()
+      //   await this.$TextileManager.bucket?.updateIndex(this.$FileSystem.export)
+      //   this.$store.commit('ui/setIsLoadingFileIndex', false)
+      //   this.$emit('forceRender')
+      // }
+      // navigator.clipboard.writeText(this.path).then(() => {
+      //   this.$toast.show(this.$t('pages.files.link_copied') as string)
+      // })
     },
     /**
      * @method rename

components/views/files/filepath/Filepath.html

@@ -1,14 +1,18 @@
 <nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
   <ul>
     <li>
-      <a @click="goBackToDirectory('root')" style="display: flex">
+      <a
+        @click="!ui.isLoadingFileIndex && goBackToDirectory('root')"
+        :class="{'disabled' : ui.isLoadingFileIndex }"
+        style="display: flex"
+      >
         <home-icon size="1.5x" />
       </a>
     </li>
     <li
       v-for="name,i in path"
-      @click="goBackToDirectory(name)"
-      :class="{'is-active' : i === path.length - 1 }"
+      @click="!ui.isLoadingFileIndex && goBackToDirectory(name)"
+      :class="{'is-active' : i === path.length - 1, 'disabled' : ui.isLoadingFileIndex}"
     >
       <a> {{ name }} </a>
     </li>

components/views/files/filepath/Filepath.less

@@ -13,16 +13,20 @@
       &:extend(.font-accent);
     }
   }
+  li {
+    font-family: @primary-font;
+    font-size: @text-size;
 
-  li + li::before {
-    &:extend(.font-primary);
-  }
-
-  li.is-active a {
-    &:extend(.font-muted);
+    + li::before {
+      &:extend(.font-primary);
+    }
+    &.is-active a {
+      &:extend(.font-muted);
+    }
+    &.disabled a {
+      cursor: not-allowed;
+    }
   }
-  font-family: @primary-font;
-  font-size: @text-size;
 }
 
 @media only screen and (max-width: @mobile-breakpoint) {

components/views/files/filepath/Filepath.vue

@@ -1,13 +1,15 @@
 <template src="./Filepath.html"></template>
 <script lang="ts">
 import Vue from 'vue'
+import { mapState } from 'vuex'
 import { HomeIcon } from 'satellite-lucide-icons'
 
 export default Vue.extend({
   components: {
     HomeIcon,
   },
   computed: {
+    ...mapState(['ui']),
     /**
      * @returns string array of file paths to current directory (not including root)
      */

components/views/files/view/View.html

@@ -13,10 +13,12 @@
       >
         <archive-icon size="1x" />
       </div>
+      <UiLoadersSpinner v-if="load" class="control disabled" spinning />
       <a
+        v-else
         :data-tooltip="$t('controls.download')"
         class="has-tooltip has-tooltip-primary has-tooltip-bottom control"
-        :href="path"
+        :href="file.url"
         target="_blank"
         :download="file.name"
       >
@@ -39,16 +41,15 @@
       </div>
     </div>
   </div>
-  <img
-    v-if="isImage && file.size < $Config.uploadByteLimit"
-    class="file-image"
-    :src="path"
-  />
+  <img v-if="file.thumbnail" class="file-image" :src="file.thumbnail" />
   <div v-else class="no-preview">
+    <UiLoadersSpinner v-if="load" class="file-icon" spinning />
     <a
+      v-else
       :data-tooltip="$t('controls.download')"
       class="has-tooltip has-tooltip-primary has-tooltip-top"
-      :href="path"
+      :class="{'disabled' : load}"
+      :href="file.url"
       target="_blank"
       :download="file.name"
     >

components/views/files/view/View.vue

@@ -27,31 +27,45 @@ export default Vue.extend({
       required: true,
     },
   },
+  data() {
+    return {
+      load: false as boolean,
+    }
+  },
   computed: {
     ...mapState(['ui']),
-    path(): string {
-      return this.$Config.textile.browser + this.file.hash
-    },
-    isImage(): boolean {
-      return Boolean(this.file.name.match(this.$Config.regex.image))
-    },
+  },
+  /**
+   * if no file data available, pull encrypted file from textile bucket and save as blob
+   */
+  async mounted() {
+    if (!this.file.file) {
+      this.load = true
+      const fsFile: Fil = this.$FileSystem.getChild(this.file.name) as Fil
+      fsFile.file = await this.$TextileManager.bucket?.pullFile(
+        this.file.name,
+        this.file.type,
+      )
+      this.load = false
+    }
   },
   methods: {
     /**
      * @method share
      * @description copy link to clipboard and toggle shared status
      */
     async share() {
-      if (!this.file.shared) {
-        this.$store.commit('ui/setIsLoadingFileIndex', true)
-        this.file.shareItem()
-        await this.$TextileManager.bucket?.updateIndex(this.$FileSystem.export)
-        this.$store.commit('ui/setIsLoadingFileIndex', false)
-      }
-      navigator.clipboard.writeText(this.path).then(() => {
-        this.$toast.show(this.$t('pages.files.link_copied') as string)
-      })
-      this.$emit('forceRender')
+      this.$toast.show(this.$t('todo - share') as string)
+      // if (!this.file.shared) {
+      //   this.$store.commit('ui/setIsLoadingFileIndex', true)
+      //   this.file.shareItem()
+      //   await this.$TextileManager.bucket?.updateIndex(this.$FileSystem.export)
+      //   this.$store.commit('ui/setIsLoadingFileIndex', false)
+      // }
+      // navigator.clipboard.writeText(this.path).then(() => {
+      //   this.$toast.show(this.$t('pages.files.link_copied') as string)
+      // })
+      // this.$emit('forceRender')
     },
   },
 })

config.ts

@@ -105,7 +105,7 @@ export const Config = {
   uploadByteLimit: 1000000 * 8, // 8MB - the current limit for an nsfw scan. Should be fixed in AP-807
   personalFilesLimit: 1000000000 * 4, // 4GB - free tier limit
   regex: {
-    // Regex to identify if a filetype is an image we support
+    // identify if a file type is embeddable image
     image: '^.*.(apng|avif|gif|jpg|jpeg|jfif|pjpeg|pjp|png|svg|webp)$',
     // determine if filetype is archive
     archive: '^.*.(zip|vnd.rar|x-7z-compressed)$',

jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   preset: 'ts-jest',
-  setupFiles: ['jest-canvas-mock', 'dotenv/config'],
+  setupFiles: ['jest-canvas-mock', 'dotenv/config', './jest-setup.js'],
   collectCoverageFrom: [
     '**/*.{js,jsx,ts,tsx}',
     '!**/*.d.ts',
@@ -39,5 +39,4 @@ module.exports = {
     'node_modules/(?!@mylibrary/)',
     '^.+\\.module\\.(css|sass|scss)$',
   ],
-  setupFilesAfterEnv: ['./jest-setup.js'],
 }