Large number of keyboard navigation and other fixes.

frontend/src/components/BreadCrumb.vue

@@ -2,8 +2,8 @@
   <nav
     class="breadcrumb"
     aria-label="Breadcrumb"
-    @keyup.left.stop="move(-1)"
-    @keyup.right.stop="move(1)"
+    @keydown.left.stop="move(-1)"
+    @keydown.right.stop="move(1)"
     @keyup.enter="move(0)"
     @focus=focusCurrent
     tabindex=0

frontend/src/components/FileExplorer.vue

@@ -49,15 +49,9 @@
               <FileRenameInput :doc="doc" :rename="rename" :exit="() => {editing = null}" />
             </template>
             <template v-else>
-              <a
-                :href="doc.url"
-                tabindex="-1"
-                @contextmenu.prevent
-                @focus.stop="store.cursor = doc.key"
-                @keyup.left="router.back()"
-                @keyup.right.stop="ev => { if (doc.dir) (ev.target as HTMLElement).click() }"
-                >{{ doc.name }}</a
-              >
+              <a :href=doc.url tabindex=-1 @contextmenu.stop @focus.stop="store.cursor = doc.key">
+                {{ doc.name }}
+              </a>
               <button tabindex=-1 v-if="store.cursor == doc.key" class="rename-button" @click="() => (editing = doc)">🖊️</button>
             </template>
           </td>
@@ -151,9 +145,17 @@ defineExpose({
     } else {
       store.selected.add(key)
     }
-    this.cursorMove(1)
+    this.cursorMove(1, null)
   },
-  cursorMove(d: number, select = false) {
+  up(ev: KeyboardEvent) { this.cursorMove(-1, ev) },
+  down(ev: KeyboardEvent) { this.cursorMove(1, ev) },
+  left(ev: KeyboardEvent) { router.back() },
+  right(ev: KeyboardEvent) {
+    const a = document.querySelector(`#file-${store.cursor} a`) as HTMLAnchorElement | null
+    if (a) a.click()
+  },
+  cursorMove(d: number, ev: KeyboardEvent | null) {
+    const select = !!ev?.shiftKey
     // Move cursor up or down (keyboard navigation)
     const docs = props.documents
     if (docs.length === 0) {

frontend/src/components/Gallery.vue

@@ -1,15 +1,13 @@
 <template>
-  <div v-if="props.documents.length || editing" class="gallery">
-    <template v-for="(doc, index) in documents" :key="doc.key">
-      <GalleryFigure :doc="doc" :index="index">
-        <BreadCrumb :path="doc.loc ? doc.loc.split('/') : []" v-if="showFolderBreadcrumb(index)" class="folder-change"/>
-      </GalleryFigure>
-    </template>
+  <div v-if="props.documents.length || editing" class="gallery" ref="gallery">
+    <GalleryFigure v-for="(doc, index) in documents" :key="doc.key" :doc="doc" :index="index">
+      <BreadCrumb :path="doc.loc ? doc.loc.split('/') : []" v-if="showFolderBreadcrumb(index)" class="folder-change"/>
+    </GalleryFigure>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watchEffect, shallowRef, onMounted, onUnmounted } from 'vue'
+import { ref, computed, watchEffect, shallowRef, onMounted, onUnmounted, nextTick } from 'vue'
 import { useMainStore } from '@/stores/main'
 import { Doc } from '@/repositories/Document'
 import FileRenameInput from './FileRenameInput.vue'
@@ -51,6 +49,11 @@ const rename = (doc: Doc, newName: string) => {
   }
   doc.name = newName // We should get an update from watch but this is quicker
 }
+const gallery = ref<HTMLElement>()
+const columns = computed(() => {
+  if (!gallery.value) return 1
+  return getComputedStyle(gallery.value).gridTemplateColumns.split(' ').length
+})
 defineExpose({
   newFolder() {
     const now = Math.floor(Date.now() / 1000)
@@ -85,9 +88,14 @@ defineExpose({
     } else {
       store.selected.add(key)
     }
-    this.cursorMove(1)
+    this.cursorMove(1, null)
   },
-  cursorMove(d: number, select = false) {
+  up(ev: KeyboardEvent) { this.cursorMove(-columns.value, ev) },
+  down(ev: KeyboardEvent) { this.cursorMove(columns.value, ev) },
+  left(ev: KeyboardEvent) { this.cursorMove(-1, ev) },
+  right(ev: KeyboardEvent) { this.cursorMove(1, ev) },
+  cursorMove(d: number, ev: KeyboardEvent | null) {
+    const select = !!ev?.shiftKey
     // Move cursor up or down (keyboard navigation)
     const docs = props.documents
     if (docs.length === 0) {
@@ -98,8 +106,15 @@ defineExpose({
     const mod = (a: number, b: number) => ((a % b) + b) % b
     const increment = (i: number, d: number) => mod(i + d, N + 1)
     const index =
-      store.cursor ? docs.findIndex(doc => doc.key === store.cursor) : docs.length
-    const moveto = increment(index, d)
+      store.cursor ? docs.findIndex(doc => doc.key === store.cursor) : N
+    let moveto
+    if (index === N) moveto = d > 0 ? 0 : N - 1
+    else {
+      moveto = increment(index, d)
+      // Wrapping either end, just land outside the list
+      if (Math.abs(d) >= N || Math.sign(d) !== Math.sign(moveto - index)) moveto = N
+    }
+    console.log("Gallery cursorMove", d, index, moveto, moveto - index)
     store.cursor = docs[moveto]?.key ?? ''
     const tr = store.cursor ? document.getElementById(`file-${store.cursor}`) : ''
     if (select) {
@@ -134,10 +149,8 @@ watchEffect(() => {
   if (store.cursor && store.cursor !== editing.value?.key) editing.value = null
   if (editing.value) store.cursor = editing.value.key
   if (store.cursor) {
-    const a = document.querySelector(
-      `#file-${store.cursor} a`
-    ) as HTMLAnchorElement | null
-    if (a) a.focus()
+    const a = document.querySelector(`#file-${store.cursor}`) as HTMLAnchorElement | null
+    if (a) { a.focus(); a.scrollIntoView({ block: 'center', behavior: 'smooth' }) }
   }
 })
 watchEffect(() => {

frontend/src/components/GalleryFigure.vue

@@ -1,19 +1,17 @@
 <template>
-  <a
-    :id="`file-${doc.key}`"
-    :href="doc.url"
-    tabindex=0
+  <a :id="`file-${doc.key}`" :href=doc.url tabindex=-1
     :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc.key }"
-    @contextmenu.prevent
+    @contextmenu.stop
     @focus.stop="store.cursor = doc.key"
     @click="ev => {
-      store.cursor = store.cursor === doc.key ? '' : doc.key
-      if (media) { media.play(); ev.preventDefault() }
+      console.log('Gallery click', doc.key, store.cursor, !!media)
+      if (m!.play()) ev.preventDefault()
+      store.cursor = doc.key
     }"
   >
     <figure>
       <slot></slot>
-      <MediaPreview ref=media :doc="doc" />
+      <MediaPreview ref=m :doc="doc" :tabindex=-1 />
       <caption>
         <label>
           <SelectBox :doc=doc />
@@ -35,7 +33,7 @@ const props = defineProps<{
   doc: Doc
   index: number
 }>()
-const media = ref<typeof MediaPreview | null>(null)
+const m = ref<typeof MediaPreview | null>(null)
 </script>
 
 <style scoped>

frontend/src/components/MediaPreview.vue

@@ -1,19 +1,19 @@
 <template>
   <img v-if=doc.img :src=doc.url alt="">
   <span v-else-if=doc.dir class="folder icon"></span>
-  <video v-else-if=video() ref=media :src=doc.url controls preload=metadata @click.prevent>📄</video>
-  <audio v-else-if=audio() ref=media :src=doc.url controls preload=metadata @click.stop>📄</audio>
-  <embed v-else-if=embed() :src=doc.url type=text/plain @click.stop @scroll.prevent>
+  <video ref=vid v-else-if=video() :src=doc.url controls preload=none @click.prevent>📄</video>
+  <audio ref=aud v-else-if=audio() :src=doc.url controls preload=metadata @click.stop>📄</audio>
   <span v-else-if=archive() class="archive icon"></span>
   <span v-else class="file icon" :class="`ext-${doc.ext}`"></span>
 </template>
 
 <script setup lang=ts>
-import { ref } from 'vue'
+import { compile, computed, ref } from 'vue'
 import type { Doc } from '@/repositories/Document'
 
-const media = ref<HTMLAudioElement | HTMLVideoElement | null>(null)
-
+const aud = ref<HTMLAudioElement | null>(null)
+const vid = ref<HTMLVideoElement | null>(null)
+const media = computed(() => aud.value || vid.value)
 const props = defineProps<{
   doc: Doc
 }>()
@@ -21,9 +21,12 @@ const props = defineProps<{
 defineExpose({
   play() {
     if (media.value) {
-      media.value.play()
+      if (media.value.paused) media.value.play()
+      else media.value.pause()
+      return true
     }
-  }
+    return false
+  },
 })