localhorst/media-slideshow
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix error if EXIF lib is not loaded

Browse Source
This commit is contained in:
Hendrik Schutter
2025-12-22 19:21:38 +01:00
parent 0a9e63443d
commit c662d3ce2d
1 changed files with 140 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
index.html
View File

@ -47,7 +47,11 @@
} }
#media-container img.zoomed { #media-container img.zoomed {
cursor: zoom-out; cursor: grab;
}
#media-container img.zoomed:active {
cursor: grabbing;
} }
#media-container video { #media-container video {
@ -571,18 +575,102 @@
} }
}); });
// Mouse/Touch panning for zoomed images
this.container.addEventListener('mousedown', (e) => {
const currentMedia = this.mediaFiles[this.currentIndex];
if (currentMedia && currentMedia.type === 'image' && this.zoom > 1) {
const img = this.container.querySelector('img');
if (img && e.target === img) {
e.preventDefault();
this.isPanning = true;
this.panStart = { x: e.clientX - this.panOffset.x, y: e.clientY - this.panOffset.y };
img.style.cursor = 'grabbing';
}
}
});
this.container.addEventListener('mousemove', (e) => {
if (this.isPanning) {
e.preventDefault();
const img = this.container.querySelector('img');
if (img) {
this.panOffset = {
x: e.clientX - this.panStart.x,
y: e.clientY - this.panStart.y
};
img.style.transform = `scale(${this.zoom}) translate(${this.panOffset.x}px, ${this.panOffset.y}px)`;
}
}
});
this.container.addEventListener('mouseup', () => {
if (this.isPanning) {
this.isPanning = false;
const img = this.container.querySelector('img');
if (img && this.zoom > 1) {
img.style.cursor = 'grab';
}
}
});
this.container.addEventListener('mouseleave', () => {
if (this.isPanning) {
this.isPanning = false;
const img = this.container.querySelector('img');
if (img && this.zoom > 1) {
img.style.cursor = 'grab';
}
}
});
// Touch support for mobile devices
this.container.addEventListener('touchstart', (e) => {
const currentMedia = this.mediaFiles[this.currentIndex];
if (currentMedia && currentMedia.type === 'image' && this.zoom > 1) {
const img = this.container.querySelector('img');
if (img && e.target === img && e.touches.length === 1) {
e.preventDefault();
this.isPanning = true;
this.panStart = {
x: e.touches[0].clientX - this.panOffset.x,
y: e.touches[0].clientY - this.panOffset.y
};
}
}
});
this.container.addEventListener('touchmove', (e) => {
if (this.isPanning && e.touches.length === 1) {
e.preventDefault();
const img = this.container.querySelector('img');
if (img) {
this.panOffset = {
x: e.touches[0].clientX - this.panStart.x,
y: e.touches[0].clientY - this.panStart.y
};
img.style.transform = `scale(${this.zoom}) translate(${this.panOffset.x}px, ${this.panOffset.y}px)`;
}
}
});
this.container.addEventListener('touchend', () => {
this.isPanning = false;
});
// Click to zoom toggle // Click to zoom toggle
this.container.addEventListener('click', (e) => { this.container.addEventListener('click', (e) => {
if (e.target.tagName === 'IMG' && !e.target.closest('#virtual-screen')) { if (e.target.tagName === 'IMG' && !e.target.closest('#virtual-screen') && !this.isPanning) {
if (this.zoom > 1) { if (this.zoom > 1) {
this.zoom = 1; this.zoom = 1;
this.panOffset = { x: 0, y: 0 }; this.panOffset = { x: 0, y: 0 };
e.target.classList.remove('zoomed'); e.target.classList.remove('zoomed');
e.target.style.transform = 'scale(1) translate(0, 0)'; e.target.style.transform = 'scale(1) translate(0, 0)';
e.target.style.cursor = 'zoom-in';
} else { } else {
this.zoom = 2; this.zoom = 2;
e.target.classList.add('zoomed'); e.target.classList.add('zoomed');
e.target.style.transform = `scale(${this.zoom})`; e.target.style.transform = `scale(${this.zoom})`;
e.target.style.cursor = 'grab';
} }
} }
}); });
@ -663,37 +751,60 @@
const url = URL.createObjectURL(media.file); const url = URL.createObjectURL(media.file);
img.onload = async () => { img.onload = async () => {
// Extract EXIF data // Try to extract EXIF data
EXIF.getData(img, async () => { let dateStr = '';
const exifData = EXIF.getAllTags(img); let geoLink = '';
let dateStr = '';
let geoLink = '';
// Try to get date from EXIF try {
if (exifData.DateTimeOriginal) { // Check if EXIF library is available
dateStr = this.formatExifDate(exifData.DateTimeOriginal); if (typeof EXIF !== 'undefined') {
} else if (exifData.DateTime) { EXIF.getData(img, async () => {
dateStr = this.formatExifDate(exifData.DateTime); try {
const exifData = EXIF.getAllTags(img);
// Try to get date from EXIF
if (exifData.DateTimeOriginal) {
dateStr = this.formatExifDate(exifData.DateTimeOriginal);
} else if (exifData.DateTime) {
dateStr = this.formatExifDate(exifData.DateTime);
} else {
// Use file modification date
dateStr = this.formatFileDate(media.file.lastModified);
}
// Check for GPS data
const lat = exifData.GPSLatitude;
const lon = exifData.GPSLongitude;
const latRef = exifData.GPSLatitudeRef;
const lonRef = exifData.GPSLongitudeRef;
if (lat && lon) {
const latDecimal = this.convertDMSToDD(lat, latRef);
const lonDecimal = this.convertDMSToDD(lon, lonRef);
geoLink = `https://www.google.com/maps/place/${latDecimal},${lonDecimal}/@${latDecimal},${lonDecimal},15z/data=!3m1!1e3`;
}
// Show info overlay
this.showInfoOverlay(dateStr, geoLink);
} catch (error) {
console.warn('Error reading EXIF data:', error);
// Fallback to file date
dateStr = this.formatFileDate(media.file.lastModified);
this.showInfoOverlay(dateStr, null);
}
});
} else { } else {
// Use file modification date // EXIF library not available, use file date
console.warn('EXIF library not available, using file timestamp');
dateStr = this.formatFileDate(media.file.lastModified); dateStr = this.formatFileDate(media.file.lastModified);
this.showInfoOverlay(dateStr, null);
} }
} catch (error) {
// Check for GPS data console.error('Error accessing EXIF library:', error);
const lat = exifData.GPSLatitude; // Fallback to file date
const lon = exifData.GPSLongitude; dateStr = this.formatFileDate(media.file.lastModified);
const latRef = exifData.GPSLatitudeRef; this.showInfoOverlay(dateStr, null);
const lonRef = exifData.GPSLongitudeRef; }
if (lat && lon) {
const latDecimal = this.convertDMSToDD(lat, latRef);
const lonDecimal = this.convertDMSToDD(lon, lonRef);
geoLink = `https://www.google.com/maps/place/${latDecimal},${lonDecimal}/@${latDecimal},${lonDecimal},15z/data=!3m1!1e3`;
}
// Show info overlay
this.showInfoOverlay(dateStr, geoLink);
});
}; };
img.src = url; img.src = url;