add files folder to FTS

src/utils/paths.ts

@@ -1,9 +1,42 @@
+import { remote, FileFilter } from 'electron'
 import { path as ffmpegPath } from 'ffmpeg-static'
 import { path as ffprobePath } from 'ffprobe-static'
 import { join } from 'path'
+import { isNil } from '@/utils/index'
 
 const isDevelopment = process.env.NODE_ENV === 'development'
 
+export const getFilePath = ({
+  title,
+  filters = [],
+}: {
+  title: string
+  filters?: FileFilter[]
+}) => {
+  const paths = remote.dialog.showOpenDialog({
+    title,
+    buttonLabel: 'Select file',
+    properties: ['openFile'],
+    filters,
+  })
+
+  if (isNil(paths)) return null
+
+  return paths[0] || null
+}
+
+export const getFolderPath = ({ title }: { title: string }) => {
+  const paths = remote.dialog.showOpenDialog({
+    title,
+    buttonLabel: 'Select',
+    properties: ['openDirectory'],
+  })
+
+  if (isNil(paths)) return null
+
+  return paths[0] || null
+}
+
 const getDevPath = (name: string, path: string) =>
   join(
     process.env.DEV_BASE_PATH!,

src/views/first-time-setup/components/local-files-setup.vue

@@ -2,43 +2,85 @@
   <div class="step local-files-setup" @keydown.enter="login">
     <h2>Local Files</h2>
 
-    <div class="external-players">
+    <section class="folder">
+      <div>Anime Folder</div>
+
+      <c-button
+        :icon="folderSvg"
+        :content="localFilesFolder == null ? 'Select folder' : 'Change folder'"
+        v-tooltip="localFilesFolder"
+        :click="setTemporaryLocalFilesFolder"
+      />
+    </section>
+
+    <section class="external-players">
       <div>External Players</div>
       <div class="small">Click a player to manually set the path to them</div>
 
       <div class="container">
-        <div class="vlc" v-tooltip="vlcPath">
-          <icon :icon="vlcSvg" :class="{ exists: vlcPath != null }" />
+        <div class="vlc">
+          <icon
+            :icon="vlcSvg"
+            :class="{ exists: vlcPath != null }"
+            v-tooltip="vlcPath"
+            @click="setTemporaryVLCPath"
+          />
           <div v-if="vlcPath != null">Found!</div>
         </div>
       </div>
-    </div>
+    </section>
 
     <c-button content="Continue" :click="finishStep" />
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
-import { mdiVlc } from '@mdi/js'
+import { mdiFolderSearch, mdiVlc } from '@mdi/js'
 
 import CButton from '@/common/components/button.vue'
 import Icon from '@/common/components/icon.vue'
 import Checkbox from '@/common/components/form/checkbox.vue'
 
 import { VLC } from '@/lib/players/vlc'
-import { getSettings, setVLCPath } from '@/state/settings'
+import { getSettings, setLocalFilesFolder, setVLCPath } from '@/state/settings'
+import { isNil } from '@/utils'
+import { getFilePath, getFolderPath } from '@/utils/paths'
 
 @Component({ components: { Icon, CButton, Checkbox } })
 export default class Discord extends Vue {
   @Prop() public goToNextStep!: () => any
 
   public vlcSvg = mdiVlc
+  public folderSvg = mdiFolderSearch
 
+  public localFilesFolder = getSettings(this.$store).localFilesFolder
   public vlcPath =
     getSettings(this.$store).externalPlayers.vlc || VLC.getVLCPath()
 
+  public setTemporaryLocalFilesFolder() {
+    const path = getFolderPath({
+      title: 'Set directory for Local Files',
+    })
+
+    if (isNil(path)) return
+
+    this.localFilesFolder = path
+  }
+
+  public setTemporaryVLCPath() {
+    const path = getFilePath({
+      title: 'Set directory for Local Files',
+      filters: [{ name: 'vlc', extensions: ['exe'] }],
+    })
+
+    if (isNil(path)) return
+
+    this.vlcPath = path
+  }
+
   public finishStep() {
+    setLocalFilesFolder(this.$store, this.localFilesFolder)
     setVLCPath(this.$store, this.vlcPath)
 
     this.goToNextStep()
@@ -53,30 +95,39 @@ export default class Discord extends Vue {
   display: flex;
   flex-direction: column;
   align-items: center;
+  user-select: none;
+
+  & > section {
+    margin: 5px 0 10px;
 
-  .external-players {
     & > .small {
       font-size: 0.9em;
       color: $gray;
     }
+  }
+
+  & > .folder {
+    & > .button {
+      margin-top: 10px;
+    }
+  }
 
-    & > .container {
-      & > .vlc {
-        margin: 15px;
-        color: $success;
-        font-weight: 600;
-
-        & > .icon {
-          height: 75px;
-          width: 75px;
-          fill: dimgray;
-          opacity: 0.75;
-          cursor: pointer;
-          transition: fill 1s;
-
-          &.exists {
-            fill: $vlc;
-          }
+  & > .external-players > .container {
+    & > .vlc {
+      margin-top: 10px;
+      color: $success;
+      font-weight: 600;
+
+      & > .icon {
+        height: 75px;
+        width: 75px;
+        fill: dimgray;
+        opacity: 0.75;
+        cursor: pointer;
+        transition: fill 1s;
+
+        &.exists {
+          fill: $vlc;
         }
       }
     }

src/views/settings/settings.vue

@@ -277,7 +277,7 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import { ipcRenderer, remote, shell } from 'electron'
+import { ipcRenderer, shell } from 'electron'
 import { Key } from 'ts-key-enum'
 import {
   mdiDelete,
@@ -317,6 +317,7 @@ import {
 } from '@/state/settings'
 import { DOWNLOAD_UPDATE, OPEN_DEVTOOLS } from '@/messages'
 import { isNil } from '@/utils'
+import { getFilePath, getFolderPath } from '@/utils/paths'
 
 enum Window {
   Crunchyroll = 'Crunchyroll',
@@ -443,32 +444,28 @@ export default class Settings extends Vue {
   }
 
   public setLocalFilesFolder() {
-    const path = remote.dialog.showOpenDialog({
+    const path = getFolderPath({
       title: 'Set directory for Local Files',
-      buttonLabel: 'Select',
-      properties: ['openDirectory'],
     })
 
     if (isNil(path)) return
 
-    setLocalFilesFolder(this.$store, path[0])
+    setLocalFilesFolder(this.$store, path)
   }
 
   public clearLocalFilesFolder() {
     setLocalFilesFolder(this.$store, null)
   }
 
   public setVLCPath() {
-    const path = remote.dialog.showOpenDialog({
+    const path = getFilePath({
       title: 'Set directory for Local Files',
-      buttonLabel: 'Select file',
-      properties: ['openFile'],
       filters: [{ name: 'vlc', extensions: ['exe'] }],
     })
 
     if (isNil(path)) return
 
-    setVLCPath(this.$store, path[0])
+    setVLCPath(this.$store, path)
   }
 
   public pathClick() {