Tweak nearby images range

This commit is contained in:
Pieter Vander Vennet 2022-05-13 01:19:53 +02:00
parent 389d88cab6
commit acd1cdb7c1
3 changed files with 32 additions and 12 deletions

View file

@ -2,7 +2,7 @@ import {Utils} from "../Utils";
export default class Constants {
public static vNumber = "0.19.0";
public static vNumber = "0.20.0";
public static ImgurApiKey = '7070e7167f0a25a'
public static readonly mapillary_client_token_v4 = "MLY|4441509239301885|b40ad2d3ea105435bd40c7e76993ae85"

View file

@ -11,6 +11,7 @@ import {InputElement} from "../Input/InputElement";
import {VariableUiElement} from "../Base/VariableUIElement";
import Translations from "../i18n/Translations";
import {Mapillary} from "../../Logic/ImageProviders/Mapillary";
import {SubtleButton} from "../Base/SubtleButton";
export interface P4CPicture {
pictureUrl: string,
@ -30,12 +31,14 @@ export interface P4CPicture {
}
interface NearbyImageOptions {
export interface NearbyImageOptions {
lon: number,
lat: number,
radius: number,
maxDaysOld?: 1095,
blacklist: UIEventSource<{url: string}[]>
maxDaysOld?: 1095 | number,
blacklist: UIEventSource<{url: string}[]>,
shownImagesCount?: UIEventSource<number>,
towardscenter?: boolean;
}
export default class NearbyImages extends VariableUiElement {
@ -44,10 +47,12 @@ export default class NearbyImages extends VariableUiElement {
const t = Translations.t.image.nearbyPictures
const P4C = require("../../vendor/P4C.min")
const picManager = new P4C.PicturesManager({});
const loadedPictures = UIEventSource.FromPromise<P4CPicture[]>(
const shownImages = options.shownImagesCount ?? new UIEventSource(25);
const loadedPictures =
UIEventSource.FromPromise<P4CPicture[]>(
picManager.startPicsRetrievalAround(new P4C.LatLng(options.lat, options.lon), options.radius, {
mindate: new Date().getTime() - (options.maxDaysOld ?? 1095) * 24 * 60 * 60 * 1000
mindate: new Date().getTime() - (options.maxDaysOld ?? (3*365)) * 24 * 60 * 60 * 1000,
towardscenter: options.towardscenter
})
).map(images => {
console.log("Images are" ,images, "blacklisted is", options.blacklist.data)
@ -57,6 +62,18 @@ export default class NearbyImages extends VariableUiElement {
&& i.details.isSpherical === false);
}, [options.blacklist])
const loadMoreButton = new Combine([new SubtleButton(Svg.add_svg(), t.loadMore).onClick(() => {
shownImages.setData(shownImages.data + 25)
})]).SetClass("flex flex-col justify-center")
const imageElements = loadedPictures.map(imgs => {
const elements = (imgs ?? []).slice(0, shownImages.data).map(i => this.prepareElement(i));
if(imgs !== undefined && elements.length < imgs.length){
// We effectively sliced some items, so we can increase the count
elements.push(loadMoreButton)
}
return elements;
},[shownImages]);
super(loadedPictures.map(images => {
if(images === undefined){
return new Loading(t.loading);
@ -64,7 +81,7 @@ export default class NearbyImages extends VariableUiElement {
if(images.length === 0){
return t.nothingFound.SetClass("alert block")
}
return new SlideShow(loadedPictures.map(imgs => (imgs ?? []).slice(0, 25).map(i => this.prepareElement(i))))
return new SlideShow(imageElements)
}));
}

View file

@ -48,7 +48,7 @@ import {TextField} from "./Input/TextField";
import Wikidata, {WikidataResponse} from "../Logic/Web/Wikidata";
import {Translation} from "./i18n/Translation";
import {AllTagsPanel} from "./AllTagsPanel";
import NearbyImages, {P4CPicture, SelectOneNearbyImage} from "./Popup/NearbyImages";
import NearbyImages, {NearbyImageOptions, P4CPicture, SelectOneNearbyImage} from "./Popup/NearbyImages";
import Lazy from "./Base/Lazy";
import ChangeTagAction from "../Logic/Osm/Actions/ChangeTagAction";
import {Tag} from "../Logic/Tags/Tag";
@ -176,10 +176,13 @@ class NearbyImageVis implements SpecialVisualization {
const nearby = new Lazy(() => {
const alreadyInTheImage = AllImageProviders.LoadImagesFor(tagSource)
const options = {
lon, lat, radius: 50,
const options : NearbyImageOptions & {value}= {
lon, lat, radius: 250,
value: selectedImage,
blacklist: alreadyInTheImage
blacklist: alreadyInTheImage,
towardscenter: false,
maxDaysOld: 365 * 5
};
const slideshow = canBeEdited ? new SelectOneNearbyImage(options) : new NearbyImages(options);
return new Combine([slideshow, new MapillaryLinkVis().constr(state, tagSource, [])])