Implemented Gallery view for media files.

frontend/src/App.vue

@@ -133,4 +133,3 @@ onUnmounted(() => {
 })
 export type { Path }
 </script>
-@/stores/main

frontend/src/assets/main.css

@@ -14,7 +14,7 @@
   /* The following are overridden by responsive layouts */
   --root-font-size: 1rem;
   --header-font-size: 1rem;
-  --header-height: calc(6.5 * var(--header-font-size));
+  --header-height: 4rem;
 }
 @media (prefers-color-scheme: dark) {
   :root {
@@ -48,6 +48,7 @@
   :root {
     --header-font-size: calc(10px + 10 * 100vh / 600);  /* 20px at 600px height */
     --root-font-size: 0.8rem;
+    --header-height: 2rem;
   }
   header .breadcrumb > * {
     padding-top: calc(8 + 8 * 100vh / 600) !important;

frontend/src/components/FileExplorer.vue

@@ -28,11 +28,11 @@
 
         <tr
           :id="`file-${doc.key}`"
-          :class="{ file: !doc.dir, folder: doc.dir, cursor: cursor === doc }"
+          :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc }"
-          @click="cursor = cursor === doc ? null : doc"
+          @click="store.cursor = store.cursor === doc ? null : doc"
           @contextmenu.prevent="contextMenu($event, doc)"
         >
-          <td class="selection" @click.up.stop="cursor = cursor === doc ? doc : null">
+          <td class="selection" @click.up.stop="store.cursor = store.cursor === doc ? doc : null">
             <input
               type="checkbox"
               tabindex="-1"
@@ -53,7 +53,7 @@
                 :href="doc.url"
                 tabindex="-1"
                 @contextmenu.prevent
-                @focus.stop="cursor = doc"
+                @focus.stop="store.cursor = doc"
                 @keyup.left="router.back()"
                 @keyup.right.stop="ev => { if (doc.dir) (ev.target as HTMLElement).click() }"
                 >{{ doc.name }}</a
@@ -75,7 +75,6 @@
       </tr>
     </tbody>
   </table>
-  <div v-else class="empty-container">Nothing to see here</div>
 </template>
 
 <script setup lang="ts">
@@ -88,6 +87,7 @@ import { formatSize } from '@/utils'
 import { useRouter } from 'vue-router'
 import ContextMenu from '@imengyu/vue3-context-menu'
 import type { SortOrder } from '@/utils/docsort'
+import type SvgButtonVue from './SvgButton.vue'
 
 const props = defineProps<{
   path: Array<string>
@@ -95,7 +95,6 @@ const props = defineProps<{
 }>()
 const store = useMainStore()
 const router = useRouter()
-const cursor = shallowRef<Doc | null>(null)
 // File rename
 const editing = shallowRef<Doc | null>(null)
 const rename = (doc: Doc, newName: string) => {
@@ -143,13 +142,13 @@ defineExpose({
     if (order) store.toggleSort(order as SortOrder)
   },
   isCursor() {
-    return cursor.value !== null && editing.value === null
+    return store.cursor !== null && editing.value === null
   },
   cursorRename() {
-    editing.value = cursor.value
+    editing.value = store.cursor
   },
   cursorSelect() {
-    const doc = cursor.value
+    const doc = store.cursor
     if (!doc) return
     if (store.selected.has(doc.key)) {
       store.selected.delete(doc.key)
@@ -162,17 +161,17 @@ defineExpose({
     // Move cursor up or down (keyboard navigation)
     const docs = props.documents
     if (docs.length === 0) {
-      cursor.value = null
+      store.cursor = null
       return
     }
     const N = docs.length
     const mod = (a: number, b: number) => ((a % b) + b) % b
     const increment = (i: number, d: number) => mod(i + d, N + 1)
     const index =
-      cursor.value !== null ? docs.indexOf(cursor.value) : docs.length
+      store.cursor !== null ? docs.indexOf(store.cursor) : docs.length
     const moveto = increment(index, d)
-    cursor.value = docs[moveto] ?? null
+    store.cursor = docs[moveto] ?? null
-    const tr = cursor.value ? document.getElementById(`file-${cursor.value.key}`) : null
+    const tr = store.cursor ? document.getElementById(`file-${store.cursor.key}`) : null
     if (select) {
       // Go forwards, possibly wrapping over the end; the last entry is not toggled
       let [begin, end] = d > 0 ? [index, moveto] : [moveto, index]
@@ -202,18 +201,18 @@ const focusBreadcrumb = () => {
 let scrolltimer: any = null
 let scrolltr: any = null
 watchEffect(() => {
-  if (cursor.value && cursor.value !== editing.value) editing.value = null
+  if (store.cursor && store.cursor !== editing.value) editing.value = null
-  if (editing.value) cursor.value = editing.value
+  if (editing.value) store.cursor = editing.value
-  if (cursor.value) {
+  if (store.cursor) {
     const a = document.querySelector(
-      `#file-${cursor.value.key} .name a`
+      `#file-${store.cursor.key} .name a`
     ) as HTMLAnchorElement | null
     if (a) a.focus()
   }
 })
 watchEffect(() => {
-  if (!props.documents.length && cursor.value) {
+  if (!props.documents.length && store.cursor) {
-    cursor.value = null
+    store.cursor = null
     focusBreadcrumb()
   }
 })
@@ -287,7 +286,7 @@ const allSelected = computed({
 const loc = computed(() => props.path.join('/'))
 
 const contextMenu = (ev: MouseEvent, doc: Doc) => {
-  cursor.value = doc
+  store.cursor = doc
   ContextMenu.showContextMenu({
     x: ev.x, y: ev.y, items: [
       { label: 'Rename', onClick: () => { editing.value = doc } },

frontend/src/components/Gallery.vue

@@ -0,0 +1,243 @@
+<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>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watchEffect, shallowRef, onMounted, onUnmounted } from 'vue'
+import { useMainStore } from '@/stores/main'
+import { Doc } from '@/repositories/Document'
+import FileRenameInput from './FileRenameInput.vue'
+import { connect, controlUrl } from '@/repositories/WS'
+import { formatSize } from '@/utils'
+import { useRouter } from 'vue-router'
+import ContextMenu from '@imengyu/vue3-context-menu'
+import type { SortOrder } from '@/utils/docsort'
+
+const props = defineProps<{
+  path: Array<string>
+  documents: Doc[]
+}>()
+const store = useMainStore()
+const router = useRouter()
+// File rename
+const editing = shallowRef<Doc | null>(null)
+const rename = (doc: Doc, newName: string) => {
+  const oldName = doc.name
+  const control = connect(controlUrl, {
+    message(ev: MessageEvent) {
+      const msg = JSON.parse(ev.data)
+      if ('error' in msg) {
+        console.error('Rename failed', msg.error.message, msg.error)
+        doc.name = oldName
+      } else {
+        console.log('Rename succeeded', msg)
+      }
+    }
+  })
+  control.onopen = () => {
+    control.send(
+      JSON.stringify({
+        op: 'rename',
+        path: `${doc.loc}/${oldName}`,
+        to: newName
+      })
+    )
+  }
+  doc.name = newName // We should get an update from watch but this is quicker
+}
+const cursorMove = (d: number, select = false) => {
+  // Move cursor up or down (keyboard navigation)
+  const docs = props.documents
+  if (docs.length === 0) {
+    store.cursor = null
+    return
+  }
+  const N = docs.length
+  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 !== null ? docs.indexOf(store.cursor) : docs.length
+  const moveto = increment(index, d)
+  store.cursor = docs[moveto] ?? null
+  const tr = store.cursor ? document.getElementById(`file-${store.cursor.key}`) : null
+  if (select) {
+    // Go forwards, possibly wrapping over the end; the last entry is not toggled
+    let [begin, end] = d > 0 ? [index, moveto] : [moveto, index]
+    for (let p = begin; p !== end; p = increment(p, 1)) {
+      if (p === N) continue
+      const key = docs[p].key
+      if (store.selected.has(key)) store.selected.delete(key)
+      else store.selected.add(key)
+    }
+  }
+  // @ts-ignore
+  scrolltr = tr
+  if (!scrolltimer) {
+    scrolltimer = setTimeout(() => {
+      if (scrolltr)
+        scrolltr.scrollIntoView({ block: 'center', behavior: 'smooth' })
+      scrolltimer = null
+    }, 300)
+  }
+  if (moveto === N) focusBreadcrumb()
+}
+
+defineExpose({
+  newFolder() {
+    const now = Math.floor(Date.now() / 1000)
+    editing.value = new Doc({
+      loc: loc.value,
+      key: 'new',
+      name: 'New Folder',
+      dir: true,
+      mtime: now,
+      size: 0,
+    })
+  },
+  toggleSelectAll() {
+    console.log('Select')
+    allSelected.value = !allSelected.value
+  },
+  toggleSortColumn(column: number) {
+    const order = ['', 'name', 'modified', 'size', ''][column]
+    if (order) store.toggleSort(order as SortOrder)
+  },
+  isCursor() {
+    return store.cursor !== null && editing.value === null
+  },
+  cursorRename() {
+    editing.value = store.cursor
+  },
+  cursorSelect() {
+    const doc = store.cursor
+    if (!doc) return
+    if (store.selected.has(doc.key)) {
+      store.selected.delete(doc.key)
+    } else {
+      store.selected.add(doc.key)
+    }
+    this.cursorMove(1)
+  },
+  cursorMove,
+})
+const focusBreadcrumb = () => {
+  const el = document.querySelector('.breadcrumb') as HTMLElement | null
+  if (el) el.focus()
+}
+let scrolltimer: any = null
+let scrolltr: any = null
+watchEffect(() => {
+  if (store.cursor && store.cursor !== editing.value) editing.value = null
+  if (editing.value) store.cursor = editing.value
+  if (store.cursor) {
+    const a = document.querySelector(
+      `#file-${store.cursor.key} .name a`
+    ) as HTMLAnchorElement | null
+    if (a) a.focus()
+  }
+})
+watchEffect(() => {
+  if (!props.documents.length && store.cursor) {
+    store.cursor = null
+    focusBreadcrumb()
+  }
+})
+let nowkey = ref(0)
+let modifiedTimer: any = null
+const updateModified = () => {
+  nowkey.value = Math.floor(Date.now() / 1000)
+}
+onMounted(() => { updateModified(); modifiedTimer = setInterval(updateModified, 1000) })
+onUnmounted(() => { clearInterval(modifiedTimer) })
+const mkdir = (doc: Doc, name: string) => {
+  const control = connect(controlUrl, {
+    open() {
+      control.send(
+        JSON.stringify({
+          op: 'mkdir',
+          path: `${doc.loc}/${name}`
+        })
+      )
+    },
+    message(ev: MessageEvent) {
+      const msg = JSON.parse(ev.data)
+      if ('error' in msg) {
+        console.error('Mkdir failed', msg.error.message, msg.error)
+        editing.value = null
+      } else {
+        console.log('mkdir', msg)
+        router.push(doc.urlrouter)
+      }
+    }
+  })
+  // We should get an update from watch but this is quicker
+  doc.name = name
+  doc.key = crypto.randomUUID()
+}
+const showFolderBreadcrumb = (i: number) => {
+  const docs = props.documents
+  const docloc = docs[i].loc
+  return i === 0 ? docloc !== loc.value : docloc !== docs[i - 1].loc
+}
+const selectionIndeterminate = computed({
+  get: () => {
+    return (
+      props.documents.length > 0 &&
+      props.documents.some((doc: Doc) => store.selected.has(doc.key)) &&
+      !allSelected.value
+    )
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  set: (value: boolean) => {}
+})
+const allSelected = computed({
+  get: () => {
+    return (
+      props.documents.length > 0 &&
+      props.documents.every((doc: Doc) => store.selected.has(doc.key))
+    )
+  },
+  set: (value: boolean) => {
+    console.log('Setting allSelected', value)
+    for (const doc of props.documents) {
+      if (value) {
+        store.selected.add(doc.key)
+      } else {
+        store.selected.delete(doc.key)
+      }
+    }
+  }
+})
+
+const loc = computed(() => props.path.join('/'))
+
+const contextMenu = (ev: MouseEvent, doc: Doc) => {
+  store.cursor = doc
+  ContextMenu.showContextMenu({
+    x: ev.x, y: ev.y, items: [
+      { label: 'Rename', onClick: () => { editing.value = doc } },
+    ],
+  })
+}
+</script>
+
+<style scoped>
+.gallery {
+  padding: 1rem;
+  width: 100%;
+  display: grid;
+  gap: .5rem;
+  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+  grid-auto-rows: 15rem;
+}
+.breadcrumb {
+  position: absolute;
+  z-index: 1;
+}
+</style>

frontend/src/components/GalleryFigure.vue

@@ -0,0 +1,99 @@
+<template>
+  <a
+    :href="doc.url"
+    tabindex=0
+    @contextmenu.prevent
+    @focus.stop="store.cursor = doc"
+    @click="ev => {
+      if (media) { media.play(); ev.preventDefault() }
+    }"
+  >
+    <figure
+      :id="`file-${doc.key}`"
+      :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc }"
+      @click="store.cursor = store.cursor === doc ? null : doc"
+      @click.up.stop="store.cursor = store.cursor === doc ? doc : null"
+    >
+      <slot></slot>
+      <MediaPreview ref=media :doc="doc" />
+      <caption>
+        <label>
+          <SelectBox :doc=doc />
+          <span :title="doc.name + '\n' + doc.modified + '\n' + doc.sizedisp">{{ doc.name }}</span>
+        </label>
+      </caption>
+    </figure>
+  </a>
+</template>
+
+<script setup lang=ts>
+import { defineProps, ref } from 'vue'
+import { useMainStore } from '@/stores/main'
+import { Doc } from '@/repositories/Document'
+import MediaPreview from '@/components/MediaPreview.vue'
+
+const store = useMainStore()
+const props = defineProps<{
+  doc: Doc
+  index: number
+}>()
+const media = ref<typeof MediaPreview | null>(null)
+</script>
+
+<style scoped>
+.gallery figure {
+  height: 15rem;
+  position: relative;
+  border-radius: .5rem;
+  overflow: hidden;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  overflow: hidden;
+}
+figure caption {
+  font-weight: 600;
+  color: var(--text-color);
+  text-shadow: 0 0 .2rem #000, 0 0 1rem #000;
+}
+figure.cursor caption {
+  background: var(--accent-color);
+}
+caption {
+  position: absolute;
+  overflow: hidden;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+caption label {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+label span {
+  flex: 1 1;
+  margin-right: 2rem;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+label input[type='checkbox'] {
+  width: 2rem;
+  height: 2rem;
+  opacity: 0;
+  flex-shrink: 0;
+}
+label input[type='checkbox']:checked {
+  opacity: 1;
+}
+a {
+  text-decoration: none;
+}
+
+</style>

frontend/src/components/HeaderMain.vue

@@ -72,6 +72,7 @@ watchEffect(() => {
 const settingsMenu = (e: Event) => {
   // show the context menu
   const items = []
+  items.push({ label: 'Gallery', onClick: () => store.gallery = !store.gallery })
   if (store.user.isLoggedIn) {
     items.push({ label: `Logout ${store.user.username ?? ''}`, onClick: () => store.logout() })
   } else {

frontend/src/components/MediaPreview.vue

@@ -0,0 +1,94 @@
+<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>
+  <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 { defineProps, ref } from 'vue'
+import type { Doc } from '@/repositories/Document'
+
+const media = ref<HTMLAudioElement | HTMLVideoElement | null>(null)
+
+const props = defineProps<{
+  doc: Doc
+}>()
+
+defineExpose({
+  play() {
+    if (media.value) {
+      media.value.play()
+    }
+  }
+})
+
+
+const video = () => ['mkv', 'mp4', 'webm', 'mov', 'avi'].includes(props.doc.ext)
+const audio = () => ['mp3', 'flac', 'ogg', 'aac'].includes(props.doc.ext)
+const embed = () => ['txt', 'py', 'html', 'css', 'js', 'json', 'xml', 'csv', 'tsv'].includes(props.doc.ext)
+const archive = () => ['zip', 'tar', 'gz', 'bz2', 'xz', '7z', 'rar'].includes(props.doc.ext)
+</script>
+
+<style scoped>
+img, embed, .icon {
+  font-size: 10em;
+  border-radius: .5rem;
+  overflow: hidden;
+  text-align: center;
+  object-fit: cover;
+  object-position: center;
+  min-width: 50%;
+  height: 100%;
+}
+audio, video {
+  height: 100%;
+  min-width: 50%;
+  max-width: 100%;
+  padding-bottom: 2rem;
+  margin: auto;
+}
+.folder::before {
+  content: '📁';
+}
+.folder:hover::before, .cursor .folder::before {
+  content: '📂';
+}
+.archive::before {
+  content: '📦';
+}
+.file::before {
+  content: '📄';
+}
+.ext-img::before {
+  content: '💿';
+}
+.ext-exe::before, .ext-msi::before, .ext-dmg::before, .ext-pkg::before {
+  content: '⚙️';
+}
+.ext-torrent::before {
+  content: '🏴‍☠️';
+}
+.icon {
+  filter: brightness(0.9);
+}
+figure.cursor .icon {
+  filter: brightness(1);
+}
+img::before, video::before {
+  /* broken image */
+  background: #888;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  text-align: center;
+  text-shadow: 0 0 .5rem #000;
+  filter: grayscale(1);
+  content: '❌';
+}
+</style>

frontend/src/components/SelectBox.vue

@@ -0,0 +1,23 @@
+<template>
+  <input type=checkbox tabindex=-1 :checked="store.selected.has(doc.key)"
+    @change="ev => {
+      if ((ev.target as HTMLInputElement).checked) {
+        store.selected.add(doc.key)
+      } else {
+        store.selected.delete(doc.key)
+      }
+    }"
+  >
+</template>
+
+<script setup lang=ts>
+import { defineProps } from 'vue'
+import { useMainStore } from '@/stores/main'
+import type { Doc } from '@/repositories/Document'
+
+const props = defineProps<{
+  doc: Doc
+}>()
+const store = useMainStore()
+
+</script>

frontend/src/repositories/Document.ts

@@ -36,6 +36,14 @@ export class Doc {
   get urlrouter(): string {
     return this.url.replace(/^\/#/, '')
   }
+  get img(): boolean {
+    const ext = this.name.split('.').pop()?.toLowerCase()
+    return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif', 'svg'].includes(ext || '')
+  }
+  get ext(): string {
+    const ext = this.name.split('.').pop()
+    return ext ? ext.toLowerCase() : ''
+  }
 }
 export type errorEvent = {
   error: {

frontend/src/stores/main.ts

@@ -23,6 +23,8 @@ export const useMainStore = defineStore({
     fileExplorer: null as any,
     error: '' as string,
     connected: false,
+    gallery: false,
+    cursor: shallowRef<Doc | null>(null),
     server: {} as Record<string, any>,
     prefs: {
       sortListing: '' as SortOrder,

frontend/src/views/ExplorerView.vue

@@ -1,19 +1,40 @@
 <template>
-  <FileExplorer
+  <div v-if="!props.path || documents.length === 0" class="empty-container">
+    <component :is="cog" class="cog"/>
+    <p v-if="!store.connected">No Connection</p>
+    <p v-else-if="store.document.length === 0">Waiting for Files</p>
+    <p v-else-if="store.query">No matches!</p>
+    <p v-else-if="!store.document.find(doc => doc.loc.length + 1 === props.path.length && [...doc.loc, doc.name].join('/') === props.path.join('/'))">Folder not found.</p>
+    <p v-else>Empty folder</p>
+  </div>
+  <Gallery
+    v-else-if="store.gallery"
     ref="fileExplorer"
-    :key="Router.currentRoute.value.path"
+    :key="`gallery-${Router.currentRoute.value.path}`"
     :path="props.path"
     :documents="documents"
-    v-if="props.path"
   />
+  <FileExplorer
+    v-else
+    ref="fileExplorer"
+    :key="`explorer-${Router.currentRoute.value.path}`"
+    :path="props.path"
+    :documents="documents"
+  />
+  <div v-if="!store.gallery && documents.some(doc => doc.img)" class="suggest-gallery">
+    <p>Media files found. Would you like a gallery view?</p>
+    <SvgButton name="eye" taborder=0 @click="() => { store.gallery = true }">Gallery</SvgButton>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { watchEffect, ref, computed } from 'vue'
 import { useMainStore } from '@/stores/main'
 import Router from '@/router/index'
-import { needleFormat, localeIncludes, collator } from '@/utils';
+import { needleFormat, localeIncludes, collator } from '@/utils'
-import { sorted } from '@/utils/docsort';
+import { sorted } from '@/utils/docsort'
+import FileExplorer from '@/components/FileExplorer.vue'
+import cog from '@/assets/svg/cog.svg'
 
 const store = useMainStore()
 const fileExplorer = ref()
@@ -64,3 +85,39 @@ watchEffect(() => {
   store.query = props.query
 })
 </script>
+
+<style scoped>
+.empty-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 2rem;
+  text-shadow: 0 0 1rem #000, 0 0 2rem #000;
+  color: var(--accent-color);
+}
+@keyframes rotate {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(359deg); }
+}
+.suggest-gallery p {
+  font-size: 2rem;
+  color: var(--accent-color);
+}
+.suggest-gallery {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+svg.cog {
+  width: 10rem;
+  height: 10rem;
+  margin: 0 auto;
+  animation: rotate 10s linear infinite;
+  filter: drop-shadow(0 0 1rem black);
+  fill: var(--primary-color);
+}
+</style>