[web] Rebuild web interface

This reverts commit 6a93172cb9.

.github/workflows/macos.yml

@@ -55,6 +55,19 @@ jobs:
         sudo make install
         cd ..
 
+    - name: Install sqlite
+      # When GH actions has 3.43.0_1+, which has unlock-notify, then this can be
+      # removed and we can just install brew's sqlite
+      run: |
+        wget https://www.sqlite.org/2020/sqlite-autoconf-3310100.tar.gz
+        tar xzf sqlite-autoconf-3310100.tar.gz
+        cd sqlite-autoconf-3310100
+        export CFLAGS='-DSQLITE_ENABLE_UNLOCK_NOTIFY=1'
+        ./configure
+        make
+        sudo make install
+        cd ..
+
     - name: Install ffmpeg
       # The libbluray ffmpeg dependency fails without the chown (source: stackoverflow)
       run: |
@@ -63,7 +76,7 @@ jobs:
 
     - name: Install other dependencies
       run: |
-        brew install sqlite libunistring confuse libplist libwebsockets libevent libgcrypt json-c protobuf-c libsodium gnutls pulseaudio openssl
+        brew install libunistring confuse libplist libwebsockets libevent libgcrypt json-c protobuf-c libsodium gnutls pulseaudio openssl
 
     - name: Configure
       # We configure a non-privileged setup, since how to add a "owntone" system

web-src/src/components/ListDirectories.vue

@@ -1,14 +1,18 @@
 <template>
-  <div
-    v-if="$route.query.directory"
-    class="media is-align-items-center"
-    @click="open_parent()"
-  >
-    <figure class="media-left is-clickable">
-      <mdicon class="icon" name="subdirectory-arrow-left" size="16" />
+  <div v-if="$route.query.directory" class="media is-align-items-center">
+    <figure class="media-left is-clickable" @click="open_parent">
+      <mdicon class="icon" name="chevron-left" size="16" />
     </figure>
-    <div class="media-content is-clickable is-clipped">
-      <h1 class="title is-6">..</h1>
+    <div class="media-content is-clipped">
+      <nav class="breadcrumb">
+        <ul>
+          <li v-for="directory in directories" :key="directory.index">
+            <a @click="open(directory)">
+              <span v-text="directory.name" />
+            </a>
+          </li>
+        </ul>
+      </nav>
     </div>
     <div class="media-right">
       <slot name="actions" />
@@ -20,11 +24,7 @@
         <mdicon class="icon" name="folder" size="16" />
       </figure>
       <div class="media-content is-clickable is-clipped">
-        <h1
-          class="title is-6"
-          v-text="item.path.substring(item.path.lastIndexOf('/') + 1)"
-        />
-        <h2 class="subtitle is-7 has-text-grey" v-text="item.path" />
+        <h1 class="title is-6" v-text="item.name" />
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(item)">
@@ -58,37 +58,34 @@ export default {
   },
 
   computed: {
-    current() {
-      return this.$route.query?.directory || '/'
+    directories() {
+      const directories = []
+      let path = ''
+      this.$route.query?.directory
+        .split('/')
+        .slice(1, -1)
+        .forEach((name, index) => {
+          path = `${path}/${name}`
+          directories.push({ index, name, path })
+        })
+      return directories
     }
   },
 
   methods: {
     open(item) {
-      this.$router.push({
-        name: 'files',
-        query: { directory: item.path }
-      })
+      const route = { name: 'files' }
+      if (item.index !== 0) {
+        route.query = { directory: item.path }
+      }
+      this.$router.push(route)
     },
     open_dialog(item) {
       this.selected_item = item.path
       this.show_details_modal = true
     },
     open_parent() {
-      const parent = this.current.slice(0, this.current.lastIndexOf('/'))
-      if (
-        parent === '' ||
-        this.$store.state.config.directories.includes(this.current)
-      ) {
-        this.$router.push({ name: 'files' })
-      } else {
-        this.$router.push({
-          name: 'files',
-          query: {
-            directory: this.current.slice(0, this.current.lastIndexOf('/'))
-          }
-        })
-      }
+      this.open(this.directories.slice(-1).pop())
     }
   }
 }

web-src/src/icons.js

@@ -12,6 +12,7 @@ import {
   mdiCellphone,
   mdiCheck,
   mdiChevronDown,
+  mdiChevronLeft,
   mdiChevronUp,
   mdiContentSave,
   mdiDelete,
@@ -57,7 +58,6 @@ import {
   mdiSpeaker,
   mdiSpotify,
   mdiStop,
-  mdiSubdirectoryArrowLeft,
   mdiVolumeHigh,
   mdiVolumeOff,
   mdiWeb
@@ -77,6 +77,7 @@ export const icons = {
   mdiCellphone,
   mdiCheck,
   mdiChevronDown,
+  mdiChevronLeft,
   mdiChevronUp,
   mdiContentSave,
   mdiDelete,
@@ -122,7 +123,6 @@ export const icons = {
   mdiSpeaker,
   mdiSpotify,
   mdiStop,
-  mdiSubdirectoryArrowLeft,
   mdiVolumeHigh,
   mdiVolumeOff,
   mdiWeb

web-src/src/mystyles.scss

@@ -19,6 +19,7 @@
     border-bottom-color: $grey-lighter;
     color: $grey-lighter !important;
   }
+  a:hover,
   a.has-text-dark:hover,
   a.has-text-dark:focus {
     color: $grey-lighter !important;

web-src/src/pages/PageFiles.vue

@@ -2,8 +2,7 @@
   <div>
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.files.title')" />
-        <p class="title is-7 has-text-grey" v-text="current_directory" />
+        <p class="title is-4" v-text="name" />
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -20,7 +19,7 @@
         </div>
       </template>
       <template #content>
-        <list-directories :items="dirs" />
+        <list-directories :items="directories" />
         <list-playlists :items="playlists" />
         <list-tracks
           :expression="play_expression"
@@ -28,7 +27,7 @@
           :show_icon="true"
         />
         <modal-dialog-directory
-          :item="current_directory"
+          :item="current"
           :show="show_details_modal"
           @close="show_details_modal = false"
         />
@@ -53,25 +52,24 @@ const dataObject = {
     }
     return Promise.resolve()
   },
-
   set(vm, response) {
     if (response) {
-      vm.dirs = response.data.directories
-      vm.playlists = new GroupedList(response.data.playlists)
-      vm.tracks = new GroupedList(response.data.tracks)
+      vm.directories = response.data.directories.map((directory) =>
+        vm.transform(directory.path)
+      )
+    } else if (vm.$store.state.config.directories) {
+      vm.directories = vm.$store.state.config.directories.map((path) =>
+        vm.transform(path)
+      )
     } else {
-      if (vm.$store.state.config.directories) {
-        vm.dirs = vm.$store.state.config.directories.map((dir) => ({
-          path: dir
-        }))
-      } else {
-        webapi.config().then((config) => {
-          vm.dirs = config.data.directories.map((dir) => ({ path: dir }))
-        })
-      }
-      vm.playlists = new GroupedList()
-      vm.tracks = new GroupedList()
+      webapi.config().then((config) => {
+        vm.directories = config.data.directories.map((path) =>
+          vm.transform(path)
+        )
+      })
     }
+    vm.playlists = new GroupedList(response?.data.playlists)
+    vm.tracks = new GroupedList(response?.data.tracks)
   }
 }
 
@@ -100,7 +98,7 @@ export default {
 
   data() {
     return {
-      dirs: [],
+      directories: [],
       playlists: new GroupedList(),
       show_details_modal: false,
       tracks: new GroupedList()
@@ -108,20 +106,26 @@ export default {
   },
 
   computed: {
-    current_directory() {
-      if (this.$route.query && this.$route.query.directory) {
-        return this.$route.query.directory
+    current() {
+      return this.$route.query?.directory || '/'
+    },
+    name() {
+      if (this.current !== '/') {
+        return this.current?.slice(this.current.lastIndexOf('/') + 1)
       }
-      return '/'
+      return this.$t('page.files.title')
     },
     play_expression() {
-      return `path starts with "${this.current_directory}" order by path asc`
+      return `path starts with "${this.current}" order by path asc`
     }
   },
 
   methods: {
     play() {
       webapi.player_play_expression(this.play_expression, false)
+    },
+    transform(path) {
+      return { path, name: path.slice(path.lastIndexOf('/') + 1) }
     }
   }
 }