diff --git a/Models/Constants.ts b/Models/Constants.ts index 68308a7b75..92f3fc8fdf 100644 --- a/Models/Constants.ts +++ b/Models/Constants.ts @@ -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" diff --git a/UI/Popup/NearbyImages.ts b/UI/Popup/NearbyImages.ts index a05fec2e30..1143df5e85 100644 --- a/UI/Popup/NearbyImages.ts +++ b/UI/Popup/NearbyImages.ts @@ -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, + 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( + const shownImages = options.shownImagesCount ?? new UIEventSource(25); + const loadedPictures = + UIEventSource.FromPromise( 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) })); } diff --git a/UI/SpecialVisualizations.ts b/UI/SpecialVisualizations.ts index 2227934d3b..378477ccbc 100644 --- a/UI/SpecialVisualizations.ts +++ b/UI/SpecialVisualizations.ts @@ -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, [])])