Fix: style issue, types

public/css/index-tailwind-output.css

@@ -695,14 +695,6 @@ video {
   left: 0px;
 }
 
-.right-4 {
-  right: 1rem;
-}
-
-.top-4 {
-  top: 1rem;
-}
-
 .right-1\/3 {
   right: 33.333333%;
 }
@@ -779,6 +771,10 @@ video {
   top: 0.75rem;
 }
 
+.top-4 {
+  top: 1rem;
+}
+
 .top-1 {
   top: 0.25rem;
 }
@@ -927,10 +923,6 @@ video {
   margin: 1.75rem;
 }
 
-.m-px {
-  margin: 1px;
-}
-
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -1001,10 +993,6 @@ video {
   margin-right: 4rem;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
 .mt-4 {
   margin-top: 1rem;
 }
@@ -1037,6 +1025,10 @@ video {
   margin-right: 0.25rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -1125,10 +1117,6 @@ video {
   margin-top: 0.375rem;
 }
 
-.mr-12 {
-  margin-right: 3rem;
-}
-
 .box-border {
   box-sizing: border-box;
 }
@@ -1538,6 +1526,10 @@ video {
   width: 2.75rem;
 }
 
+.w-5 {
+  width: 1.25rem;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -1551,10 +1543,6 @@ video {
   width: auto;
 }
 
-.w-5 {
-  width: 1.25rem;
-}
-
 .w-16 {
   width: 4rem;
 }
@@ -2031,8 +2019,8 @@ video {
   row-gap: 0.5rem;
 }
 
-.gap-x-4 {
+.gap-x-1 {
-  column-gap: 1rem;
+  column-gap: 0.25rem;
 }
 
 .gap-x-0\.5 {
@@ -2043,10 +2031,6 @@ video {
   column-gap: 0px;
 }
 
-.gap-x-1 {
-  column-gap: 0.25rem;
-}
-
 .gap-x-2 {
   column-gap: 0.5rem;
 }
@@ -2356,6 +2340,10 @@ video {
   border-radius: 0.5rem;
 }
 
+.rounded-none {
+  border-radius: 0px;
+}
+
 .\!rounded-md {
   border-radius: 0.375rem !important;
 }
@@ -2471,6 +2459,10 @@ video {
   border-width: 2px;
 }
 
+.border-0 {
+  border-width: 0px;
+}
+
 .\!border-0 {
   border-width: 0px !important;
 }
@@ -2491,10 +2483,6 @@ video {
   border-width: 10px;
 }
 
-.border-0 {
-  border-width: 0px;
-}
-
 .border-x {
   border-left-width: 1px;
   border-right-width: 1px;
@@ -2505,14 +2493,14 @@ video {
   border-bottom-width: 1px;
 }
 
-.border-b {
-  border-bottom-width: 1px;
-}
-
 .border-b-2 {
   border-bottom-width: 2px;
 }
 
+.border-b {
+  border-bottom-width: 1px;
+}
+
 .border-l-4 {
   border-left-width: 4px;
 }
@@ -3465,14 +3453,6 @@ video {
   padding-top: 0px;
 }
 
-.pl-5 {
-  padding-left: 1.25rem;
-}
-
-.pr-3 {
-  padding-right: 0.75rem;
-}
-
 .pl-4 {
   padding-left: 1rem;
 }
@@ -3481,6 +3461,14 @@ video {
   padding-right: 1rem;
 }
 
+.pl-5 {
+  padding-left: 1.25rem;
+}
+
+.pr-3 {
+  padding-right: 0.75rem;
+}
+
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -3551,16 +3539,16 @@ video {
   line-height: 1rem;
 }
 
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
 
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
@@ -3606,6 +3594,10 @@ video {
   line-height: 1;
 }
 
+.font-bold {
+  font-weight: 700;
+}
+
 .font-extrabold {
   font-weight: 800;
 }
@@ -3614,10 +3606,6 @@ video {
   font-weight: 600;
 }
 
-.font-bold {
-  font-weight: 700;
-}
-
 .font-normal {
   font-weight: 400;
 }
@@ -7255,10 +7243,6 @@ svg.apply-fill path {
     border-radius: 0.5rem;
   }
 
-  .sm\:border-4 {
-    border-width: 4px;
-  }
-
   .sm\:p-1 {
     padding: 0.25rem;
   }
@@ -7543,10 +7527,6 @@ svg.apply-fill path {
     padding: 1.5rem;
   }
 
-  .md\:p-3 {
-    padding: 0.75rem;
-  }
-
   .md\:p-5 {
     padding: 1.25rem;
   }

src/Logic/ImageProviders/ImageProvider.ts

@@ -68,7 +68,7 @@ export default abstract class ImageProvider {
 
     public abstract ExtractUrls(key: string, value: string): Promise<Promise<ProvidedImage>[]>
 
-    public abstract DownloadAttribution(providedImage: ProvidedImage): Promise<LicenseInfo>
+    public abstract DownloadAttribution(providedImage: {url: string, id: string}): Promise<LicenseInfo>
 
     public abstract apiUrls(): string[]
 }

src/Logic/ImageProviders/Imgur.ts

@@ -97,11 +97,11 @@ export class Imgur extends ImageProvider implements ImageUploader {
         const hash = url.substr("https://i.imgur.com/".length).split(/\.jpe?g/i)[0]
 
         const apiUrl = "https://api.imgur.com/3/image/" + hash
-        const response = await Utils.downloadJsonCached(apiUrl, 365 * 24 * 60 * 60, {
+        const response = await Utils.downloadJsonCached<{data: {description: string, datetime: string, views: number}}>(apiUrl, 365 * 24 * 60 * 60, {
             Authorization: "Client-ID " + Constants.ImgurApiKey,
         })
 
-        const descr: string = response.data.description ?? ""
+        const descr = response.data.description ?? ""
         const data: any = {}
         const imgurData = response.data
 

src/Logic/ImageProviders/Mapillary.ts

@@ -133,7 +133,7 @@ export class Mapillary extends ImageProvider {
         return [this.PrepareUrlAsync(key, value)]
     }
 
-    public async DownloadAttribution(providedImage: ProvidedImage): Promise<LicenseInfo> {
+    public async DownloadAttribution(providedImage: {id: string}): Promise<LicenseInfo> {
         const mapillaryId = providedImage.id
         const metadataUrl =
             "https://graph.mapillary.com/" +

src/Logic/ImageProviders/WikimediaImageProvider.ts

@@ -120,7 +120,7 @@ export class WikimediaImageProvider extends ImageProvider {
         return [Promise.resolve(this.UrlForImage("File:" + value))]
     }
 
-    public async DownloadAttribution(img: ProvidedImage): Promise<LicenseInfo> {
+    public async DownloadAttribution(img: {url: string}): Promise<LicenseInfo> {
         const filename = WikimediaImageProvider.ExtractFileName(img.url)
 
         if (filename === "") {

src/Logic/Web/NearbyImagesSearch.ts

@@ -215,6 +215,9 @@ class MapillaryFetcher implements ImageFetcher {
         for (const img of response.data) {
 
             const c = img.computed_geometry.coordinates
+            if(img.thumb_original_url === undefined){
+                continue
+            }
             pics.push({
                 pictureUrl: img.thumb_original_url,
                 provider: "Mapillary",
@@ -269,7 +272,20 @@ export class CombinedFetcher {
                     if (src.data === undefined) {
                         src.setData(pics)
                     } else {
-                        const newList = [...src.data, ...pics]
+                        const newList = []
+                        const seenIds = new Set<string>()
+                        for (const p4CPicture of [...src.data, ...pics]) {
+                            const id = p4CPicture.pictureUrl
+                            if(seenIds.has(id)){
+                                continue
+                            }
+                            newList.push(p4CPicture)
+                            seenIds.add(id)
+                            if(id === undefined){
+
+                            console.log("Img:", p4CPicture)
+                            }
+                        }
                         NearbyImageUtils.sortByDistance(newList, lon, lat)
                         src.setData(newList)
                     }

src/UI/Image/ImageAttribution.svelte

@@ -8,17 +8,19 @@
   /**
    * A small element showing the attribution of a single image
    */
-  export let image: ProvidedImage
+  export let image: Partial<ProvidedImage> & {id: string, url: string}
   let license: Store<LicenseInfo> = UIEventSource.FromPromise(
     image.provider?.DownloadAttribution(image)
   )
-  let icon = image.provider?.SourceIcon(image.id)?.SetClass("block h-8 w-8 pr-2")
+  let icon = image.provider?.SourceIcon(image.id)
 </script>
 
 {#if $license !== undefined}
-  <div class="no-images flex rounded-lg bg-black p-0.5 pl-5 pr-3 text-sm text-white">
+  <div class="no-images flex rounded-lg bg-black p-0.5 pl-3 pr-3 text-sm text-white items-center">
     {#if icon !== undefined}
-      <ToSvelte construct={icon} />
+      <div class="w-6 h-6 mr-2">
+        <ToSvelte construct={icon} />
+      </div>
     {/if}
 
     <div class="flex flex-col">