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

121
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,12 +751,17 @@
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 () => {
const exifData = EXIF.getAllTags(img);
let dateStr = ''; let dateStr = '';
let geoLink = ''; let geoLink = '';
try {
// Check if EXIF library is available
if (typeof EXIF !== 'undefined') {
EXIF.getData(img, async () => {
try {
const exifData = EXIF.getAllTags(img);
// Try to get date from EXIF // Try to get date from EXIF
if (exifData.DateTimeOriginal) { if (exifData.DateTimeOriginal) {
dateStr = this.formatExifDate(exifData.DateTimeOriginal); dateStr = this.formatExifDate(exifData.DateTimeOriginal);
@ -693,7 +786,25 @@
// Show info overlay // Show info overlay
this.showInfoOverlay(dateStr, geoLink); 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 {
// EXIF library not available, use file date
console.warn('EXIF library not available, using file timestamp');
dateStr = this.formatFileDate(media.file.lastModified);
this.showInfoOverlay(dateStr, null);
}
} catch (error) {
console.error('Error accessing EXIF library:', error);
// Fallback to file date
dateStr = this.formatFileDate(media.file.lastModified);
this.showInfoOverlay(dateStr, null);
}
}; };
img.src = url; img.src = url;