-
-
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+ import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel';
import { reactive, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { storeToRefs } from 'pinia';
@@ -219,11 +223,20 @@
});
const screenshotMetadataSearchInputs = ref(0);
- const screenshotMetadataCarouselRef = ref(null);
+ const screenshotMetadataCarouselApi = ref(null);
+ const ignoreCarouselSelect = ref(false);
const handleComponentKeyup = (event) => {
const carouselNavigation = { ArrowLeft: 0, ArrowRight: 2 }[event.key];
if (typeof carouselNavigation !== 'undefined' && props.isScreenshotMetadataDialogVisible) {
+ if (screenshotMetadataCarouselApi.value) {
+ if (event.key === 'ArrowLeft') {
+ screenshotMetadataCarouselApi.value.scrollPrev();
+ } else {
+ screenshotMetadataCarouselApi.value.scrollNext();
+ }
+ return;
+ }
screenshotMetadataCarouselChange(carouselNavigation);
}
};
@@ -407,9 +420,7 @@
getAndDisplayScreenshot(D.metadata.filePath);
}
}
- if (typeof screenshotMetadataCarouselRef.value !== 'undefined') {
- screenshotMetadataCarouselRef.value.setActiveItem(1);
- }
+ resetCarouselIndex();
if (fullscreenImageDialog.value.visible) {
// TODO
@@ -451,13 +462,38 @@
}
}
- if (typeof screenshotMetadataCarouselRef.value !== 'undefined') {
- screenshotMetadataCarouselRef.value.setActiveItem(1);
- }
+ resetCarouselIndex();
D.searchIndex = searchIndex;
}
+ function handleScreenshotMetadataCarouselInit(api) {
+ screenshotMetadataCarouselApi.value = api;
+ api.on('select', handleCarouselSelect);
+ api.on('reInit', handleCarouselSelect);
+ resetCarouselIndex();
+ }
+
+ function handleCarouselSelect() {
+ if (ignoreCarouselSelect.value || !screenshotMetadataCarouselApi.value) {
+ return;
+ }
+ const index = screenshotMetadataCarouselApi.value.selectedScrollSnap();
+ screenshotMetadataCarouselChange(index);
+ }
+
+ function resetCarouselIndex() {
+ const api = screenshotMetadataCarouselApi.value;
+ if (!api) {
+ return;
+ }
+ ignoreCarouselSelect.value = true;
+ api.scrollTo(1, true);
+ setTimeout(() => {
+ ignoreCarouselSelect.value = false;
+ }, 0);
+ }
+
async function getAndDisplayScreenshot(path, needsCarouselFiles = true) {
const metadata = await AppApi.GetScreenshotMetadata(path);
displayScreenshotMetadata(metadata, needsCarouselFiles);