UX: Dynamic infinite-scroll-distance based on window height #1438

In addition, you can now change the batch size in settings.yml.
This commit is contained in:
Michael Mayer 2022-03-31 10:22:01 +02:00
parent 9eda12ac20
commit ab5f1629eb
21 changed files with 152 additions and 94 deletions

View file

@ -3201,9 +3201,9 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001322",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001322.tgz",
"integrity": "sha512-neRmrmIrCGuMnxGSoh+x7zYtQFFgnSY2jaomjU56sCkTA6JINqQrxutF459JpWcWRajvoyn95sOXq4Pqrnyjew==",
"version": "1.0.30001323",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001323.tgz",
"integrity": "sha512-e4BF2RlCVELKx8+RmklSEIVub1TWrmdhvA5kEUueummz1XyySW0DVk+3x9HyhU9MuWTa2BhqLgEuEmUwASAdCA==",
"funding": [
{
"type": "opencollective",
@ -4321,9 +4321,9 @@
}
},
"node_modules/electron-to-chromium": {
"version": "1.4.100",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.100.tgz",
"integrity": "sha512-pNrSE2naf8fizl6/Uxq8UbKb8hU9EiYW4OzCYswosXoLV5NTMOUVKECNzDaHiUubsPq/kAckOzZd7zd8S8CHVw=="
"version": "1.4.103",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.103.tgz",
"integrity": "sha512-c/uKWR1Z/W30Wy/sx3dkZoj4BijbXX85QKWu9jJfjho3LBAXNEGAEW3oWiGb+dotA6C6BzCTxL2/aLes7jlUeg=="
},
"node_modules/emoji-regex": {
"version": "8.0.0",
@ -9696,9 +9696,9 @@
}
},
"node_modules/postcss-selector-parser": {
"version": "6.0.9",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz",
"integrity": "sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==",
"version": "6.0.10",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
"dependencies": {
"cssesc": "^3.0.0",
"util-deprecate": "^1.0.2"
@ -10386,9 +10386,9 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
},
"node_modules/sass": {
"version": "1.49.9",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.49.9.tgz",
"integrity": "sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==",
"version": "1.49.10",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.49.10.tgz",
"integrity": "sha512-w37zfWJwKu4I78U4z63u1mmgoncq+v3iOB4yzQMPyAPVHHawaQSnu9C9ysGQnZEhW609jkcLioJcMCqm75JMdg==",
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
@ -14921,9 +14921,9 @@
}
},
"caniuse-lite": {
"version": "1.0.30001322",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001322.tgz",
"integrity": "sha512-neRmrmIrCGuMnxGSoh+x7zYtQFFgnSY2jaomjU56sCkTA6JINqQrxutF459JpWcWRajvoyn95sOXq4Pqrnyjew=="
"version": "1.0.30001323",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001323.tgz",
"integrity": "sha512-e4BF2RlCVELKx8+RmklSEIVub1TWrmdhvA5kEUueummz1XyySW0DVk+3x9HyhU9MuWTa2BhqLgEuEmUwASAdCA=="
},
"chai": {
"version": "4.3.6",
@ -15730,9 +15730,9 @@
}
},
"electron-to-chromium": {
"version": "1.4.100",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.100.tgz",
"integrity": "sha512-pNrSE2naf8fizl6/Uxq8UbKb8hU9EiYW4OzCYswosXoLV5NTMOUVKECNzDaHiUubsPq/kAckOzZd7zd8S8CHVw=="
"version": "1.4.103",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.103.tgz",
"integrity": "sha512-c/uKWR1Z/W30Wy/sx3dkZoj4BijbXX85QKWu9jJfjho3LBAXNEGAEW3oWiGb+dotA6C6BzCTxL2/aLes7jlUeg=="
},
"emoji-regex": {
"version": "8.0.0",
@ -19491,9 +19491,9 @@
}
},
"postcss-selector-parser": {
"version": "6.0.9",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz",
"integrity": "sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==",
"version": "6.0.10",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
"requires": {
"cssesc": "^3.0.0",
"util-deprecate": "^1.0.2"
@ -20031,9 +20031,9 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
},
"sass": {
"version": "1.49.9",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.49.9.tgz",
"integrity": "sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==",
"version": "1.49.10",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.49.10.tgz",
"integrity": "sha512-w37zfWJwKu4I78U4z63u1mmgoncq+v3iOB4yzQMPyAPVHHawaQSnu9C9ysGQnZEhW609jkcLioJcMCqm75JMdg==",
"requires": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",

View file

@ -23,11 +23,12 @@ Additional information can be found in our Developer Guide:
*/
import Api from "api.js";
import Event from "pubsub-js";
import themes from "options/themes.json";
import translations from "locales/translations.json";
import Api from "api.js";
import { Languages } from "options/options";
import { Photo } from "model/photo";
export default class Config {
/**
@ -140,12 +141,23 @@ export default class Config {
}
if (values.settings) {
this.setBatchSize(values.settings);
this.setTheme(values.settings.ui.theme);
}
return this;
}
setBatchSize(settings) {
if (!settings || !settings.search) {
return;
}
if (settings.search.batchSize) {
Photo.setBatchSize(settings.search.batchSize);
}
}
onPeople(ev, data) {
const type = ev.split(".")[1];
@ -357,14 +369,6 @@ export default class Config {
return this.values.settings;
}
searchBatchSize() {
if (!this.values || !this.values.settings || !this.values.settings.search.batchSize) {
return 80;
}
return this.values.settings.search.batchSize;
}
rtl() {
if (!this.values || !this.values.settings || !this.values.settings.ui.language) {
return false;

View file

@ -32,12 +32,12 @@ msgstr ""
msgid "%{n} people found"
msgstr ""
#: src/pages/album/photos.vue:226
#: src/pages/album/photos.vue:338
#: src/pages/photos.vue:266
#: src/pages/photos.vue:378
#: src/share/photos.vue:241
#: src/share/photos.vue:353
#: src/pages/album/photos.vue:232
#: src/pages/album/photos.vue:341
#: src/pages/photos.vue:278
#: src/pages/photos.vue:387
#: src/share/photos.vue:247
#: src/share/photos.vue:356
msgid "%{n} pictures found"
msgstr ""
@ -162,7 +162,7 @@ msgstr ""
msgid "After two weeks"
msgstr ""
#: src/model/album.js:220
#: src/model/album.js:227
msgid "Album"
msgstr ""
@ -410,9 +410,9 @@ msgstr ""
msgid "Camera Serial"
msgstr ""
#: src/pages/album/photos.vue:232
#: src/pages/photos.vue:272
#: src/share/photos.vue:247
#: src/pages/album/photos.vue:238
#: src/pages/photos.vue:284
#: src/share/photos.vue:253
msgid "Can't load more, limit reached"
msgstr ""
@ -792,7 +792,7 @@ msgstr ""
#: src/share/photo/cards.vue:63
#: src/share/photo/clipboard.vue:45
#: src/share/photo/list.vue:62
#: src/share/photos.vue:486
#: src/share/photos.vue:487
msgid "Downloading…"
msgstr ""
@ -907,7 +907,7 @@ msgstr ""
msgid "F Number"
msgstr ""
#: src/model/face.js:154
#: src/model/face.js:161
msgid "Face"
msgstr ""
@ -1211,7 +1211,7 @@ msgid "Keywords"
msgstr ""
#: src/dialog/photo/labels.vue:20
#: src/model/label.js:115
#: src/model/label.js:122
msgid "Label"
msgstr ""
@ -1374,7 +1374,7 @@ msgstr ""
msgid "Manual Upload"
msgstr ""
#: src/model/marker.js:137
#: src/model/marker.js:144
msgid "Marker"
msgstr ""
@ -1420,9 +1420,9 @@ msgstr ""
msgid "Moonlight"
msgstr ""
#: src/pages/album/photos.vue:341
#: src/pages/photos.vue:381
#: src/share/photos.vue:356
#: src/pages/album/photos.vue:344
#: src/pages/photos.vue:390
#: src/share/photos.vue:359
msgid "More than %{n} pictures found"
msgstr ""
@ -1545,15 +1545,18 @@ msgstr ""
#: src/component/photo/cards.vue:7
#: src/component/photo/list.vue:8
#: src/component/photo/mosaic.vue:7
#: src/pages/album/photos.vue:334
#: src/pages/album/photos.vue:186
#: src/pages/album/photos.vue:337
#: src/pages/library/files.vue:34
#: src/pages/photos.vue:374
#: src/pages/photos.vue:236
#: src/pages/photos.vue:383
#: src/pages/places.vue:199
#: src/pages/places.vue:242
#: src/share/photo/cards.vue:7
#: src/share/photo/list.vue:8
#: src/share/photo/mosaic.vue:7
#: src/share/photos.vue:349
#: src/share/photos.vue:201
#: src/share/photos.vue:352
msgid "No pictures found"
msgstr ""
@ -1672,9 +1675,9 @@ msgstr ""
msgid "One person found"
msgstr ""
#: src/pages/album/photos.vue:336
#: src/pages/photos.vue:376
#: src/share/photos.vue:351
#: src/pages/album/photos.vue:339
#: src/pages/photos.vue:385
#: src/share/photos.vue:354
msgid "One picture found"
msgstr ""
@ -1771,7 +1774,7 @@ msgstr ""
msgid "Permanently remove files to free up storage."
msgstr ""
#: src/model/photo.js:899
#: src/model/photo.js:906
msgid "Photo"
msgstr ""
@ -2292,7 +2295,7 @@ msgid "Style"
msgstr ""
#: src/dialog/photo/details.vue:473
#: src/model/subject.js:149
#: src/model/subject.js:156
msgid "Subject"
msgstr ""
@ -2443,13 +2446,13 @@ msgstr ""
#: src/dialog/photo/details.vue:16
#: src/dialog/photo/info.vue:24
#: src/model/album.js:177
#: src/model/photo.js:566
#: src/model/photo.js:583
#: src/model/photo.js:606
#: src/model/photo.js:620
#: src/model/photo.js:705
#: src/model/photo.js:718
#: src/model/album.js:179
#: src/model/photo.js:568
#: src/model/photo.js:585
#: src/model/photo.js:608
#: src/model/photo.js:622
#: src/model/photo.js:707
#: src/model/photo.js:720
#: src/options/options.js:20
#: src/options/options.js:34
#: src/options/options.js:51
@ -2575,8 +2578,8 @@ msgstr ""
#: src/component/photo/list.vue:196
#: src/component/photo/mosaic.vue:200
#: src/model/file.js:180
#: src/model/photo.js:657
#: src/model/photo.js:671
#: src/model/photo.js:659
#: src/model/photo.js:673
#: src/options/options.js:318
#: src/share/photo/cards.vue:38
#: src/share/photo/cards.vue:198

View file

@ -30,6 +30,8 @@ import { DateTime } from "luxon";
import { config } from "app/session";
import { $gettext } from "common/vm";
export let BatchSize = 24;
export class Album extends RestModel {
getDefaults() {
return {
@ -209,7 +211,14 @@ export class Album extends RestModel {
}
static batchSize() {
return 24;
return BatchSize;
}
static setBatchSize(count) {
const s = parseInt(count);
if (!isNaN(s) && s > 1) {
BatchSize = s;
}
}
static getCollectionResource() {

View file

@ -31,6 +31,8 @@ import { $gettext } from "common/vm";
import * as src from "common/src";
import Api from "common/api";
export let BatchSize = 24;
export class Face extends RestModel {
constructor(values) {
super(values);
@ -143,7 +145,14 @@ export class Face extends RestModel {
}
static batchSize() {
return 24;
return BatchSize;
}
static setBatchSize(count) {
const s = parseInt(count);
if (!isNaN(s) && s >= 24) {
BatchSize = s;
}
}
static getCollectionResource() {

View file

@ -29,6 +29,8 @@ import { DateTime } from "luxon";
import { config } from "app/session";
import { $gettext } from "common/vm";
export let BatchSize = 24;
export class Label extends RestModel {
getDefaults() {
return {
@ -104,7 +106,14 @@ export class Label extends RestModel {
}
static batchSize() {
return 24;
return BatchSize;
}
static setBatchSize(count) {
const s = parseInt(count);
if (!isNaN(s) && s >= 24) {
BatchSize = s;
}
}
static getCollectionResource() {

View file

@ -30,6 +30,8 @@ import { config } from "app/session";
import { $gettext } from "common/vm";
import * as src from "common/src";
export let BatchSize = 48;
export class Marker extends RestModel {
getDefaults() {
return {
@ -126,7 +128,14 @@ export class Marker extends RestModel {
}
static batchSize() {
return 48;
return BatchSize;
}
static setBatchSize(count) {
const s = parseInt(count);
if (!isNaN(s) && s >= 24) {
BatchSize = s;
}
}
static getCollectionResource() {

View file

@ -72,6 +72,8 @@ export const DATE_FULL_TZ = {
timeZoneName: short,
};
export let BatchSize = 60;
export class Photo extends RestModel {
constructor(values) {
super(values);
@ -888,7 +890,14 @@ export class Photo extends RestModel {
}
static batchSize() {
return config.searchBatchSize();
return BatchSize;
}
static setBatchSize(count) {
const s = parseInt(count);
if (!isNaN(s) && s >= 24) {
BatchSize = s;
}
}
static getCollectionResource() {

View file

@ -31,6 +31,8 @@ import { $gettext } from "common/vm";
const SubjPerson = "person";
export let BatchSize = 60;
export class Subject extends RestModel {
getDefaults() {
return {
@ -138,7 +140,14 @@ export class Subject extends RestModel {
}
static batchSize() {
return config.searchBatchSize();
return BatchSize;
}
static setBatchSize(count) {
const s = parseInt(count);
if (!isNaN(s) && s >= 24) {
BatchSize = s;
}
}
static getCollectionResource() {

View file

@ -1,6 +1,6 @@
<template>
<div v-infinite-scroll="loadMore" class="p-page p-page-album-photos" :infinite-scroll-disabled="scrollDisabled"
:infinite-scroll-distance="1600" :infinite-scroll-listen-for-event="'scrollRefresh'">
:infinite-scroll-distance="scrollDistance" :infinite-scroll-listen-for-event="'scrollRefresh'">
<p-album-toolbar :album="model" :settings="settings" :filter="filter" :filter-change="updateQuery"
:refresh="refresh"></p-album-toolbar>
@ -79,6 +79,7 @@ export default {
uid: uid,
results: [],
scrollDisabled: true,
scrollDistance: window.innerHeight*2,
batchSize: batchSize,
offset: 0,
page: 0,

View file

@ -1,6 +1,6 @@
<template>
<div v-infinite-scroll="loadMore" class="p-page p-page-albums" style="user-select: none"
:infinite-scroll-disabled="scrollDisabled" :infinite-scroll-distance="1600"
:infinite-scroll-disabled="scrollDisabled" :infinite-scroll-distance="scrollDistance"
:infinite-scroll-listen-for-event="'scrollRefresh'">
<v-form ref="form" class="p-albums-search" lazy-validation dense @submit.prevent="updateQuery">
@ -247,6 +247,7 @@ export default {
results: [],
loading: true,
scrollDisabled: true,
scrollDistance: window.innerHeight*2,
batchSize: Album.batchSize(),
offset: 0,
page: 0,

View file

@ -1,6 +1,6 @@
<template>
<div v-infinite-scroll="loadMore" class="p-page p-page-labels" style="user-select: none"
:infinite-scroll-disabled="scrollDisabled" :infinite-scroll-distance="1600"
:infinite-scroll-disabled="scrollDisabled" :infinite-scroll-distance="scrollDistance"
:infinite-scroll-listen-for-event="'scrollRefresh'">
<v-form ref="form" class="p-labels-search" lazy-validation dense @submit.stop.prevent>
@ -178,6 +178,7 @@ export default {
dirty: false,
results: [],
scrollDisabled: true,
scrollDistance: window.innerHeight*2,
loading: true,
batchSize: Label.batchSize(),
offset: 0,

View file

@ -1,6 +1,6 @@
<template>
<div v-infinite-scroll="loadMore" class="p-page p-page-errors" :infinite-scroll-disabled="scrollDisabled"
:infinite-scroll-distance="1600" :infinite-scroll-listen-for-event="'scrollRefresh'">
:infinite-scroll-distance="scrollDistance" :infinite-scroll-listen-for-event="'scrollRefresh'">
<v-toolbar flat :dense="$vuetify.breakpoint.smAndDown" class="page-toolbar" color="secondary">
<v-text-field :value="filter.q"
solo hide-details clearable overflow single-line validate-on-blur

View file

@ -158,6 +158,7 @@ export default {
dirty: false,
results: [],
scrollDisabled: true,
scrollDistance: window.innerHeight*2,
loading: true,
busy: false,
batchSize: 999,

View file

@ -1,6 +1,6 @@
<template>
<div v-infinite-scroll="loadMore" class="p-page p-page-subjects" style="user-select: none"
:infinite-scroll-disabled="scrollDisabled" :infinite-scroll-distance="1600"
:infinite-scroll-disabled="scrollDisabled" :infinite-scroll-distance="scrollDistance"
:infinite-scroll-listen-for-event="'scrollRefresh'">
<v-form ref="form" class="p-people-search" lazy-validation dense @submit.prevent="updateQuery">
@ -204,6 +204,7 @@ export default {
dirty: false,
results: [],
scrollDisabled: true,
scrollDistance: window.innerHeight*2,
loading: true,
batchSize: Subject.batchSize(),
offset: 0,

View file

@ -1,6 +1,6 @@
<template>
<div v-infinite-scroll="loadMore" class="p-page p-page-photos" style="user-select: none"
:infinite-scroll-disabled="scrollDisabled" :infinite-scroll-distance="settings.prefetchDist"
:infinite-scroll-disabled="scrollDisabled" :infinite-scroll-distance="scrollDistance"
:infinite-scroll-listen-for-event="'scrollRefresh'">
<p-photo-toolbar :settings="settings" :filter="filter" :filter-change="updateQuery" :dirty="dirty"
@ -79,8 +79,6 @@ export default {
const settings = this.$config.settings();
let prefetchDist = 1600;
if (settings) {
if (settings.features.private) {
filter.public = "true";
@ -89,10 +87,6 @@ export default {
if (settings.features.review && (!this.staticFilter || !("quality" in this.staticFilter))) {
filter.quality = "3";
}
if (settings.search.prefetchDist > 0) {
prefetchDist = settings.search.prefetchDist;
}
}
const batchSize = Photo.batchSize();
@ -104,13 +98,13 @@ export default {
complete: false,
results: [],
scrollDisabled: true,
scrollDistance: window.innerHeight*2,
batchSize: batchSize,
offset: 0,
page: 0,
selection: this.$clipboard.selection,
settings: {
view,
prefetchDist
},
filter: filter,
lastFilter: {},

View file

@ -1,6 +1,6 @@
<template>
<div v-infinite-scroll="loadMore" class="p-page p-page-albums" style="user-select: none"
:infinite-scroll-disabled="scrollDisabled" :infinite-scroll-distance="1600"
:infinite-scroll-disabled="scrollDisabled" :infinite-scroll-distance="scrollDistance"
:infinite-scroll-listen-for-event="'scrollRefresh'">
<v-toolbar flat color="secondary" :dense="$vuetify.breakpoint.smAndDown">
<v-toolbar-title>
@ -149,6 +149,7 @@ export default {
results: [],
loading: true,
scrollDisabled: true,
scrollDistance: window.innerHeight*2,
batchSize: Album.batchSize(),
offset: 0,
page: 0,

View file

@ -1,6 +1,6 @@
<template>
<div v-infinite-scroll="loadMore" class="p-page p-page-album-photos" style="user-select: none"
:infinite-scroll-disabled="scrollDisabled" :infinite-scroll-distance="1600"
:infinite-scroll-disabled="scrollDisabled" :infinite-scroll-distance="scrollDistance"
:infinite-scroll-listen-for-event="'scrollRefresh'">
<v-form ref="form" lazy-validation
@ -122,6 +122,7 @@ export default {
uid: uid,
results: [],
scrollDisabled: true,
scrollDistance: window.innerHeight*2,
batchSize: batchSize,
offset: 0,
page: 0,

View file

@ -295,7 +295,6 @@ const clientConfig = {
},
search: {
batchSize: 60,
prefetchDist: 999,
},
maps: {
animate: 0,

View file

@ -22,8 +22,7 @@ type UISettings struct {
// SearchSettings represents search UI preferences.
type SearchSettings struct {
BatchSize int `json:"batchSize" yaml:"BatchSize"`
PrefetchDist int `json:"prefetchDist" yaml:"PrefetchDist"`
BatchSize int `json:"batchSize" yaml:"BatchSize"`
}
// TemplateSettings represents template settings for the UI and messaging.
@ -115,8 +114,7 @@ func NewSettings(c *Config) *Settings {
Language: c.DefaultLocale(),
},
Search: SearchSettings{
BatchSize: 0,
PrefetchDist: 0,
BatchSize: 0,
},
Maps: MapsSettings{
Animate: 0,

View file

@ -5,7 +5,6 @@ UI:
Language: de
Search:
BatchSize: 0
PrefetchDist: 0
Maps:
Animate: 0
Style: streets