@cloudron/pankow 3.1.8

package/utils.js

@@ -0,0 +1,383 @@
+
+import { filesize } from 'filesize';
+import { customRef } from 'vue';
+import moment from 'moment';
+
+// https://vuejs.org/api/reactivity-advanced.html#customref
+function useDebouncedRef(value, delay = 300) {
+  let timeout
+  return customRef((track, trigger) => {
+    return {
+      get() {
+        track()
+        return value
+      },
+      set(newValue) {
+        clearTimeout(timeout)
+        timeout = setTimeout(() => {
+          value = newValue
+          trigger()
+        }, delay)
+      }
+    }
+  })
+}
+
+function getFileTypeGroup(item) {
+    if (typeof item.mimeType !== 'string') throw 'item must have mimeType string property';
+    return item.mimeType.split('/')[0];
+}
+
+function isValidDomainOrURL(domain) {
+    try {
+        domain = new URL(input).hostname;
+    } catch (e) {}
+
+    return isValidDomain(domain);
+}
+
+function isValidDomain(domain) {
+    const domainRegex = /^([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/;
+    return domainRegex.test(domain);
+}
+
+// this currently does not match: "john.doe"@example.com, user@[192.168.1.1], john.doe(comment)@example.com or 用户@例子.世界
+function isValidEmail(email) {
+    if (!email || typeof email !== 'string') return false;
+
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+}
+
+
+// https://en.wikipedia.org/wiki/Binary_prefix
+// binary units (IEC) 1024 based
+function prettyBinarySize(size, fallback) {
+    if (!size) return fallback || 0;
+    if (size === -1) return 'Unlimited';
+
+    // we can also use KB here (JEDEC)
+    var i = Math.floor(Math.log(size) / Math.log(1024));
+    return (size / Math.pow(1024, i)).toFixed(3) * 1 + ' ' + ['B', 'KiB', 'MiB', 'GiB', 'TiB'][i];
+}
+
+// decimal units (SI) 1000 based
+function prettyDecimalSize(size, fallback) {
+    if (!size) return fallback || 0;
+
+    var i = Math.floor(Math.log(size) / Math.log(1000));
+    return (size / Math.pow(1000, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
+}
+
+// this will print a human friendly datetime offset from now
+function prettyDate(value) {
+    if (!value) return 'never';
+    return moment(value).fromNow();
+}
+
+function prettyLongDate(value) {
+    if (!value) return 'unknown';
+
+    const date = new Date(value);
+    return date.toLocaleString();
+}
+
+function prettyFileSize(value) {
+    if (typeof value !== 'number') return 'unknown';
+
+    return filesize(value);
+}
+
+function prettyEmailAddresses(addresses) {
+    if (!addresses) return '';
+    if (addresses === '<>') return '<>';
+    if (Array.isArray(addresses)) return addresses.map(function (a) { return a.slice(1, -1); }).join(', ');
+    return addresses.slice(1, -1);
+}
+
+function sanitize(path) {
+    path = '/' + path;
+    return path.replace(/\/+/g, '/');
+}
+
+function pathJoin() {
+    return sanitize(Array.from(arguments).join('/'));
+}
+
+function download(entries, name) {
+    if (!entries.length) return;
+
+    if (entries.length === 1) {
+        if (entries[0].share) window.location.href = '/api/v1/shares/' + entries[0].share.id + '?type=download&path=' + encodeURIComponent(entries[0].filePath);
+        else window.location.href = '/api/v1/files?type=download&path=' + encodeURIComponent(entries[0].filePath);
+
+        return;
+    }
+
+    const params = new URLSearchParams();
+
+    // be a bit smart about the archive name and folder tree
+    const folderPath = entries[0].filePath.slice(0, -entries[0].fileName.length);
+    const archiveName = name || folderPath.slice(folderPath.slice(0, -1).lastIndexOf('/')+1).slice(0, -1);
+    params.append('name', archiveName);
+    params.append('skipPath', folderPath);
+
+    params.append('entries', JSON.stringify(entries.map(function (entry) {
+        return {
+            filePath: entry.filePath,
+            shareId: entry.share ? entry.share.id : undefined
+        };
+    })));
+
+    window.location.href = '/api/v1/download?' + params.toString();
+}
+
+// simple extension detection, does not work with double extension like .tar.gz
+function getExtension(entry) {
+    if (entry.isFile) return entry.fileName.slice(entry.fileName.lastIndexOf('.') + 1);
+    return '';
+}
+
+function copyToClipboard(value) {
+    var elem = document.createElement('input');
+    elem.value = value;
+    document.body.append(elem);
+    elem.select();
+    document.execCommand('copy');
+    elem.remove();
+}
+
+function urlSearchQuery() {
+    return decodeURIComponent(window.location.search).slice(1).split('&').map(function (item) { return item.split('='); }).reduce(function (o, k) { o[k[0]] = k[1]; return o; }, {});
+}
+
+// those paths contain the internal type and path reference eg. shares/:shareId/folder/filename or files/folder/filename
+function parseResourcePath(resourcePath) {
+    var result = {
+        type: '',
+        path: '',
+        shareId: '',
+        apiPath: '',
+        resourcePath: ''
+    };
+
+    if (resourcePath.indexOf('files/') === 0) {
+        result.type = 'files';
+        result.path = resourcePath.slice('files'.length) || '/';
+        result.apiPath = '/api/v1/files';
+        result.resourcePath = result.type + result.path;
+    } else if (resourcePath.indexOf('shares/') === 0) {
+        result.type = 'shares';
+        result.shareId = resourcePath.split('/')[1];
+        result.path = resourcePath.slice((result.type + '/' + result.shareId).length) || '/';
+        result.apiPath = '/api/v1/shares/' + result.shareId;
+        // without shareId we show the root (share listing)
+        result.resourcePath = result.type + '/' + (result.shareId ? (result.shareId + result.path) : '');
+    } else {
+        console.error('Unknown resource path', resourcePath);
+    }
+
+    return result;
+}
+
+function getEntryIdentifier(entry) {
+    return (entry.share ? (entry.share.id + '/') : '') + entry.filePath;
+}
+
+function entryListSort(list, prop, desc) {
+    var tmp = list.sort(function (a, b) {
+        var av = a[prop];
+        var bv = b[prop];
+
+        if (typeof av === 'string') return (av.toUpperCase() < bv.toUpperCase()) ? -1 : 1;
+        else return (av < bv) ? -1 : 1;
+    });
+
+    if (desc) return tmp;
+    return tmp.reverse();
+}
+
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+// this is from the Cloudron dashboard translation project en.json
+const fallbackTranslations = {
+    "main": {
+        "dialog": {
+            "close": "Close"
+        }
+    },
+    "filemanager": {
+        "title": "File Manager",
+        "removeDialog": {
+            "reallyDelete": "Really delete the following?"
+        },
+        "newDirectoryDialog": {
+            "title": "New Folder",
+            "create": "Create"
+        },
+        "newFileDialog": {
+            "title": "New File",
+            "create": "Create"
+        },
+        "renameDialog": {
+            "title": "Rename {{ fileName }}",
+            "newName": "New Name",
+            "rename": "Rename"
+        },
+        "chownDialog": {
+            "title": "Change ownership",
+            "newOwner": "New Owner",
+            "change": "Change Owner",
+            "recursiveCheckbox": "Change ownership recursively"
+        },
+        "uploadingDialog": {
+            "title": "Uploading files ({{ countDone }}/{{ count }})",
+            "errorAlreadyExists": "One or more files already exist.",
+            "errorFailed": "Failed to upload one or more files. Please try again.",
+            "closeWarning": "Do not refresh the page until upload has finished.",
+            "retry": "Retry",
+            "overwrite": "Overwrite"
+        },
+        "extractDialog": {
+            "title": "Extracting {{ fileName }}",
+            "closeWarning": "Do not refresh the page until extract has finished."
+        },
+        "textEditorCloseDialog": {
+            "title": "File has unsaved changes",
+            "details": "Your changes will be lost if you don't save them",
+            "dontSave": "Don't Save"
+        },
+        "notFound": "Not found",
+        "toolbar": {
+            "new": "New",
+            "upload": "Upload",
+            "newFile": "New File",
+            "newFolder": "New Folder",
+            "uploadFolder": "Upload Folder",
+            "uploadFile": "Upload File",
+            "restartApp": "Restart App",
+            "openTerminal": "Open Terminal",
+            "openLogs": "Open Logs"
+        },
+        "list": {
+            "name": "Name",
+            "size": "Size",
+            "owner": "Owner",
+            "empty": "No files",
+            "symlink": "symlink to {{ target }}",
+            "menu": {
+                "rename": "Rename",
+                "chown": "Change Ownership",
+                "extract": "Extract Here",
+                "download": "Download",
+                "delete": "Delete",
+                "edit": "Edit",
+                "cut": "Cut",
+                "copy": "Copy",
+                "paste": "Paste",
+                "selectAll": "Select All",
+                "share": "Share",
+                "open": "Open"
+            },
+            "mtime": "Modified"
+        },
+        "extract": {
+            "error": "Failed to extract: {{ message }}"
+        },
+        "newDirectory": {
+            "errorAlreadyExists": "Already exists"
+        },
+        "newFile": {
+            "errorAlreadyExists": "Already exists"
+        },
+        "status": {
+            "restartingApp": "restarting app"
+        },
+        "uploader": {
+            "uploading": "Uploading",
+            "exitWarning": "Upload still in progress. Really close this page?"
+        },
+        "textEditor": {
+            "undo": "Undo",
+            "redo": "Redo",
+            "save": "Save"
+        },
+        "extractionInProgress": "Extraction in progress",
+        "pasteInProgress": "Pasting in progress",
+        "deleteInProgress": "Deletion in progress"
+    }
+};
+
+function translation(id) {
+    let value;
+    try {
+        value = id.split('.').reduce((a, b) => a[b], fallbackTranslations);
+    } catch (e) {
+        console.warn(`Translation ${id} does not exist`);
+        value = id;
+    }
+
+    return value;
+}
+
+function uuidv4() {
+  return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, c =>
+    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+  );
+}
+
+// named exports
+export {
+    getFileTypeGroup,
+    translation,
+    useDebouncedRef,
+    isValidDomain,
+    isValidDomainOrURL,
+    isValidEmail,
+    prettyBinarySize,
+    prettyDecimalSize,
+    prettyDate,
+    prettyLongDate,
+    prettyFileSize,
+    prettyEmailAddresses,
+    sanitize,
+    pathJoin,
+    download,
+    getExtension,
+    copyToClipboard,
+    urlSearchQuery,
+    parseResourcePath,
+    getEntryIdentifier,
+    entryListSort,
+    sleep,
+    uuidv4
+};
+
+// default export
+export default {
+    getFileTypeGroup,
+    translation,
+    useDebouncedRef,
+    isValidDomain,
+    isValidDomainOrURL,
+    isValidEmail,
+    prettyBinarySize,
+    prettyDecimalSize,
+    prettyDate,
+    prettyLongDate,
+    prettyFileSize,
+    prettyEmailAddresses,
+    sanitize,
+    pathJoin,
+    download,
+    getExtension,
+    copyToClipboard,
+    urlSearchQuery,
+    parseResourcePath,
+    getEntryIdentifier,
+    entryListSort,
+    sleep,
+    uuidv4
+};

package/viewers/GenericViewer.vue

@@ -0,0 +1,84 @@
+<template>
+  <MainLayout :gap="false">
+    <template #header>
+      <TopBar class="navbar" :gap="false">
+        <template #left>
+          <div>{{ entry.fileName }}</div>
+        </template>
+        <template #right>
+          <Button icon="fa-solid fa-xmark" @click="onClose">{{ tr('main.dialog.close') }}</Button>
+        </template>
+      </TopBar>
+    </template>
+    <template #body>
+      <div class="content">
+        <div>
+          <img class="preview-icon" :src="entry.previewUrl" />
+          <h1>{{ entry.fileName }}</h1>
+          <Button icon="fa-solid fa-download" :href="entry.downloadFileUrl">Download</Button>
+        </div>
+      </div>
+    </template>
+  </MainLayout>
+</template>
+
+<script>
+
+import Button from '../components/Button.vue';
+import MainLayout from '../components/MainLayout.vue';
+import TopBar from '../components/TopBar.vue';
+import utils from '../utils.js';
+
+export default {
+    name: 'GenericViewer',
+    components: {
+      Button,
+      TopBar,
+      MainLayout
+    },
+    props: {
+      tr: {
+        type: Function,
+        default(id) { console.warn('Missing tr for GenericViewer'); return utils.translation(id); }
+      }
+    },
+    emits: [ 'close' ],
+    data() {
+      return {
+        entry: {}
+      };
+    },
+    methods: {
+      async open(entry) {
+        if (!entry) return;
+
+        this.entry = entry;
+      },
+      onClose() {
+        this.$emit('close');
+      }
+    },
+    mounted() {
+    }
+};
+
+</script>
+
+<style scoped>
+
+.preview-icon {
+  width: 128px;
+  height: 128px;
+}
+
+.content {
+  text-align: center;
+  background-color: var(--pankow-color-background);
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+</style>

package/viewers/ImageViewer.vue

@@ -0,0 +1,239 @@
+
+<template>
+  <div @mousemove="onMouseMove" class="full-page" @keyup.esc.stop="onClose" @keyup.left.stop="onPrev" @keyup.right.stop="onNext" tabindex="1" :style="{ opacity: dismissDistance ? (200 - dismissDistance)/100 : 1 }">
+    <div class="image-layer" ref="imageContainer" @scroll="onScroll($event)">
+      <div class="image" v-for="(entry, index) in entries" :key="entry.id" v-bind:id="`image${index}`" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" :style="{ marginTop: dismissDistance ? (dismissDistance + 'px') : 0 }">
+        <img :src="entry.fullFileUrl" v-if="getFileTypeGroup(entry) === 'image'" draggable="false"/>
+        <video v-if="getFileTypeGroup(entry) !== 'image'" ref="videoElements" controls>
+          <source :src="entry.fullFileUrl" />
+        </video>
+      </div>
+    </div>
+    <Button icon="fa-solid fa-download" v-show="showOverlay && hasDownloadHandler" secondary large plain tool @click="onDownload" class="download-button"/>
+    <Button icon="fa-solid fa-xmark" v-show="showOverlay" secondary large plain tool @click="onClose" class="close-button"/>
+    <Button icon="fa-solid fa-chevron-left" secondary large plain tool @click="onPrev" v-show="showOverlay && curIndex > 0" class="prev-button"/>
+    <Button icon="fa-solid fa-chevron-right" secondary large plain tool @click="onNext" v-show="showOverlay && curIndex < (entries.length-1)" class="next-button"/>
+    <video style="display: none" ref="typeTestVideo"></video>
+  </div>
+</template>
+
+<script>
+
+import { getFileTypeGroup } from '../utils.js';
+import Button from '../components/Button.vue';
+
+function defaultDownloadHandler() {
+  console.warn('Missing downloadHandler for ImageViewer');
+}
+
+let touchDist = 0;
+let startY = 0;
+const dismissDistanceThreshold = 150;
+const dismissTriggerThreshold = 50;
+
+export default {
+    name: 'ImageViewer',
+    emits: [ 'close', 'saved' ],
+    props: {
+      downloadHandler: {
+        type: Function,
+        default: defaultDownloadHandler
+      },
+      navigationHandler: {
+        type: Function,
+        default: (toEntry) => {
+          this.$router.replace(toEntry.resourcePath);
+        }
+      }
+    },
+    components: {
+      Button
+    },
+    data() {
+      return {
+        showOverlay: false,
+        showOverlayTimer: null,
+        lockScroll: false,
+        curIndex: -1,
+        lastMousePosition: {},
+        entry: {},
+        entries: [],
+        dismissDistance: 0
+      };
+    },
+    computed: {
+      hasDownloadHandler() { return this.downloadHandler !== defaultDownloadHandler }
+    },
+    methods: {
+      getFileTypeGroup,
+      keepOverlayAlive() {
+        this.showOverlay = true;
+        clearTimeout(this.showOverlayTimer);
+        this.showOverlayTimer = setTimeout(() => {
+          // avoid hiding if cursor is above a button
+          // this crashes sometimes, not yet sure how to better prevent for now "Document.elementFromPoint: Argument 1 is not a finite floating-point value."
+          try {
+            if (document.elementFromPoint(this.lastMousePosition.x || 0, this.lastMousePosition.y || 0) !== this.$refs.imageContainer) return;
+          } catch (e) {
+            console.error('ImageViewer crash. lastMousePosition', this.lastMousePosition, e);
+          }
+
+          this.showOverlay = false;
+        }, 2000);
+      },
+      onMouseMove() {
+        this.lastMousePosition = { x: event.pageX, y: event.pageY };
+        this.keepOverlayAlive();
+      },
+      canHandle(entry) {
+        return (getFileTypeGroup(entry) === 'image' || this.$refs.typeTestVideo.canPlayType(entry.mimeType))
+          && !(entry.mimeType === 'image/heif') // supported on apple it seems
+          && !(entry.mimeType === 'image/vnd.adobe.photoshop');
+      },
+      onScroll() {
+        if (this.lockScroll) return;
+
+        for (let i = 1; i < this.entries.length; i++) {
+          const elem = document.getElementById('image'+i);
+          const rect = elem.getBoundingClientRect();
+          const midX = (rect.x+(rect.width/2));
+          if (midX >= (rect.width/4) && midX <= 3*(rect.width/4)) {
+            this.entry = this.entries[i];
+
+            if (this.curIndex !== i) {
+              this.curIndex = i;
+              this.navigationHandler(this.entry);
+            }
+
+            break;
+          }
+        }
+      },
+      onTouchStart(event) {
+        this.dismissDistance = 0;
+        touchDist = 0;
+        startY = event.changedTouches[0].pageY;
+      },
+      onTouchMove(event) {
+        touchDist = event.changedTouches[0].pageY - startY // get total dist traveled by finger while in contact with surface
+        if (touchDist > dismissTriggerThreshold) this.dismissDistance = touchDist - dismissTriggerThreshold;
+      },
+      onTouchEnd() {
+        if (touchDist > dismissDistanceThreshold) this.onClose();
+        touchDist = 0;
+        this.dismissDistance = 0;
+      },
+      open(entry, entries, instant = true) {
+        if (!entry || entry.isDirectory || !this.canHandle(entry)) return;
+
+        this.lockScroll = true;
+        this.keepOverlayAlive();
+        this.entry = entry;
+        this.entries = entries;
+        this.curIndex = entries.findIndex((item) => item.fileName === entry.fileName);
+
+        setTimeout(() => {
+          document.getElementById(`image${this.curIndex}`).scrollIntoView({ behavior: instant ? 'instant' : 'smooth' });
+          this.$el.focus();
+        }, 0);
+
+        setTimeout(() => {
+          this.lockScroll = false;
+        }, 500);
+      },
+      onDownload() {
+        if (!this.hasDownloadHandler) return;
+        this.downloadHandler(this.entry);
+      },
+      onClose() {
+        this.$emit('close');
+
+        // pause/stop video and audio playback on close
+        if (this.$refs.videoElements && this.$refs.videoElements.length) this.$refs.videoElements.forEach(e => e.pause());
+
+        // given some time for closing to keep DOM elements alive
+        setTimeout(() => {
+          this.entry = {};
+        }, 500);
+      },
+      onPrev() {
+        if (this.curIndex < 1) return;
+        this.navigationHandler(this.entries[this.curIndex-1]);
+        this.open(this.entries[this.curIndex-1], this.entries, false);
+      },
+      onNext() {
+        if (this.curIndex >= this.entries.length) return;
+        this.navigationHandler(this.entries[this.curIndex+1]);
+        this.open(this.entries[this.curIndex+1], this.entries, false);
+      }
+    },
+    mounted() {}
+};
+
+</script>
+
+<style scoped>
+
+.full-page {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  display: flex;
+  flex-direction: column;
+}
+
+.download-button {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+}
+
+.close-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+.prev-button {
+  position: absolute;
+  top: 50%;
+  left: 10px;
+}
+
+.next-button {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+}
+
+.image-layer {
+  display: flex;
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  overflow-y: hidden;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+}
+
+.image {
+  flex: 0 0 auto;
+  width: 100%;
+  height: 100%;
+  scroll-snap-align: center;
+  scroll-snap-stop: always;
+  display: inline-block;
+  user-select: none;
+}
+
+img, video {
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+}
+
+</style>