self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-23 02:06:15 +02:00
Code Issues Releases Activity

Minor improvements to the detail-panel component (#205)

Browse Source 
* Fix roudning behavior in details panel

* Add lat,lon-popup to map in details

* Refactor map code in detail-panel to avoid duplicate code
This commit is contained in:
Matthias Rupp 2022-06-06 23:40:12 +02:00 committed by GitHub
parent b359dc3cb6
commit 68ff5377b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
web/src/lib/components/asset-viewer/detail-panel.svelte
View File

@ -15,33 +15,43 @@
let marker: any; let marker: any;
export let asset: ImmichAsset; export let asset: ImmichAsset;
$: { $: if (asset.exifInfo) {
// Redraw map drawMap(asset.exifInfo.latitude, asset.exifInfo.longitude);
if (map && leaflet) {
map.removeLayer(marker);
map.setView([asset.exifInfo?.latitude || 0, asset.exifInfo?.longitude || 0], 17);
marker = leaflet.marker([asset.exifInfo?.latitude || 0, asset.exifInfo?.longitude || 0]);
map.addLayer(marker);
}
} }
onMount(async () => { onMount(async () => {
if (browser) { if (browser) {
if (asset.exifInfo) {
await drawMap(asset.exifInfo.latitude, asset.exifInfo.longitude);
}
}
});
async function drawMap(lat: number, lon: number) {
if (!leaflet) {
// @ts-ignore // @ts-ignore
leaflet = await import('leaflet'); leaflet = await import('leaflet');
map = leaflet.map('map').setView([asset.exifInfo?.latitude || 0, asset.exifInfo?.longitude || 0], 17); }
if (!map) {
map = leaflet.map('map');
leaflet leaflet
.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { .tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>', attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}) })
.addTo(map); .addTo(map);
}
marker = leaflet.marker([asset.exifInfo?.latitude || 0, asset.exifInfo?.longitude || 0]); if (marker) {
map.removeLayer(marker);
}
map.setView([lat || 0, lon || 0], 17);
marker = leaflet.marker([lat || 0, lon || 0]);
marker.bindPopup(`${(lat || 0).toFixed(7)},${(lon || 0).toFixed(7)}`);
map.addLayer(marker); map.addLayer(marker);
} }
});
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const getHumanReadableString = (sizeInByte: number) => { const getHumanReadableString = (sizeInByte: number) => {
@ -131,7 +141,7 @@
<p>{asset.exifInfo.make || ''} {asset.exifInfo.model || ''}</p> <p>{asset.exifInfo.make || ''} {asset.exifInfo.model || ''}</p>
<div class="flex text-sm gap-2"> <div class="flex text-sm gap-2">
<p>{`f/${asset.exifInfo.fNumber}` || ''}</p> <p>{`f/${asset.exifInfo.fNumber}` || ''}</p>
<p>{`1/${1 / asset.exifInfo.exposureTime}` || ''}</p> <p>{`1/${Math.floor(1 / asset.exifInfo.exposureTime)}` || ''}</p>
<p>{`${asset.exifInfo.focalLength}mm` || ''}</p> <p>{`${asset.exifInfo.focalLength}mm` || ''}</p>
<p>{`ISO${asset.exifInfo.iso}` || ''}</p> <p>{`ISO${asset.exifInfo.iso}` || ''}</p>
</div> </div>