From b62f7da629b719b1e7539ce1a72bbe1e910e5586 Mon Sep 17 00:00:00 2001
From: ztimson <zaktimson@gmail.com>
Date: Sat, 4 Jul 2026 22:40:43 -0400
Subject: [PATCH] Updated image handling for adsb/ais

---
 client/src/components/Aircraft.vue | 29 +++--------------------------
 client/src/components/Ship.vue     | 13 +++----------
 2 files changed, 6 insertions(+), 36 deletions(-)

diff --git a/client/src/components/Aircraft.vue b/client/src/components/Aircraft.vue
index de9a1fa..212f9b8 100644
--- a/client/src/components/Aircraft.vue
+++ b/client/src/components/Aircraft.vue
@@ -16,6 +16,7 @@ const BASE_VERTICAL_UNITS = {
 	fps: { label: 'FT/S', convert: (v: number) => v },
 }
 
+const photoError = ref(false);
 const UNIT_KEY = 'at_units'
 function loadUnits() {
 	const s = localStorage.getItem(UNIT_KEY)
@@ -49,30 +50,6 @@ const climbVal    = computed(() => { const v = vertical.value.convert(props.plan
 const description = computed(() => props.plane.desc || [props.plane.manufacturer, props.plane.model].filter(Boolean).join(' ') || '')
 const operator    = computed(() => props.plane.operator || props.plane.owner || '')
 
-// ── Aircraft photo ────────────────────────────────────────────────────────────
-const photoUrl = ref<string | null>(null)
-const isSil    = ref(false)
-const photoLoading = ref(false)
-
-async function fetchPhoto(icao: string, type: string) {
-	photoUrl.value = null
-	isSil.value    = false
-	if (!icao) return
-	photoLoading.value = true
-	const res  = await fetch(`https://api.planespotters.net/pub/photos/hex/${icao.toLowerCase()}`)
-	const data = await res.json()
-	const photo = data?.photos?.[0]
-	if (photo) {
-		photoUrl.value = photo.thumbnail_large?.src ?? photo.thumbnail?.src ?? null
-	} else {
-		photoUrl.value = `https://globe.adsbexchange.com/aircraft_sil/${type}.png`
-		isSil.value    = true
-	}
-	photoLoading.value = false
-}
-
-watch(() => props.plane, (plane) => fetchPhoto(plane.icao || plane.hex, plane.aircraft), { immediate: true })
-
 // ── Drag ──────────────────────────────────────────────────────────────────────
 const pos            = ref({ ...props.position })
 const isDragging     = ref(false)
@@ -241,8 +218,8 @@ const navball = computed(() => {
 		</div>
 
 		<!-- Photo -->
-		<div v-if="photoUrl" class="ap-photo-wrap">
-			<img class="ap-photo" :class="{ 'ap-photo--sil': isSil }" :src="BASE + '/api/adsb-image/' + plane.icao" :alt="callsign" />
+		<div v-if="!photoError" class="ap-photo-wrap">
+			<img class="ap-photo" :src="BASE + '/api/adsb-image/' + plane.icao" :alt="callsign" @error="photoError = true" />
 		</div>
 
 		<!-- Body -->
diff --git a/client/src/components/Ship.vue b/client/src/components/Ship.vue
index ab83599..a3cf54b 100644
--- a/client/src/components/Ship.vue
+++ b/client/src/components/Ship.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import {BASE} from '@/services/api.ts';
 import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
 
 const props = defineProps<{ boat: any; position: { x: number; y: number } }>()
@@ -27,16 +28,8 @@ const speed = computed(() => SPEED_UNITS[prefs.value.speed as keyof typeof SPEED
 const name     = computed(() => props.boat.name?.trim() || props.boat.callsign?.trim() || '-')
 const heading  = computed(() => props.boat.heading ?? props.boat.course ?? 0)
 const speedVal = computed(() => speed.value.convert(props.boat.speed ?? 0))
-
-// ── Aircraft photo ────────────────────────────────────────────────────────────
-const photoUrl   = ref<string | null>(null)
 const photoError = ref(false)
 
-watch(() => props.boat.mmsi, (mmsi) => {
-	photoError.value = false
-	photoUrl.value = mmsi ? `https://www.marinetraffic.com/getAssetDefaultPhoto/?photo_size=800&asset_id=${mmsi}&asset_type_id=0` : null
-}, { immediate: true })
-
 // ── Drag ──────────────────────────────────────────────────────────────────────
 const pos            = ref({ ...props.position })
 const isDragging     = ref(false)
@@ -218,8 +211,8 @@ const compass = computed(() => {
 		</div>
 
 		<!-- Photo -->
-		<div v-if="photoUrl && !photoError" class="sp-photo-wrap">
-			<img class="sp-photo" :src="photoUrl" :alt="name" @error="photoError = true" />
+		<div v-if="!photoError" class="sp-photo-wrap">
+			<img class="sp-photo" :src="BASE + '/api/ais-iamge/' + boat.mmsi" :alt="name" @error="photoError = true" />
 		</div>
 
 		<div class="sp-body">