perf(reader): virtual rendering avec IntersectionObserver en mode scroll
Remplace le rendu de tous les composants ReaderPage par un système de virtual rendering : seules les pages dans la zone ±1000px du viewport sont montées, les autres sont remplacées par un placeholder dimensionné. - InfiniteReader : ajout visibilityObserver + mountedPageIndices (Set réactif), helper getPlaceholderHeight(), suppression de 5 console.log - ReaderPage : prop windowWidth injectable depuis le parent, listener resize conditionnel, suppression de 3 console.log de debug
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
parent
be8a3c6de8
commit
4da9742f7f
@@ -1,10 +1,26 @@
|
||||
<template>
|
||||
<div class="infinite-reader" ref="containerRef">
|
||||
<div v-for="(page, index) in pages" :key="index" class="page-wrapper">
|
||||
<div v-for="(page, index) in pages" :key="index"
|
||||
class="page-wrapper" :data-page-index="index">
|
||||
|
||||
<!-- Pas d'URL : spinner de chargement -->
|
||||
<div v-if="!page?.url" class="loading">
|
||||
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
||||
</div>
|
||||
<ReaderPage v-else :page-data="page" :page-number="index + 1" :zoom="zoom" :double-page-mode="doublePageMode" loading="lazy" />
|
||||
|
||||
<!-- Hors de la zone de rendu : placeholder dimensionné -->
|
||||
<div v-else-if="!mountedPageIndices.has(index)"
|
||||
class="page-placeholder"
|
||||
:style="{ height: getPlaceholderHeight(page) + 'px' }" />
|
||||
|
||||
<!-- Dans la zone : composant complet -->
|
||||
<ReaderPage v-else
|
||||
:page-data="page"
|
||||
:page-number="index + 1"
|
||||
:zoom="zoom"
|
||||
:double-page-mode="doublePageMode"
|
||||
:window-width="windowWidth"
|
||||
loading="lazy" />
|
||||
</div>
|
||||
|
||||
<!-- Bouton flottant pour revenir en haut -->
|
||||
@@ -33,7 +49,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import { nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
|
||||
import { useHeaderStore } from '../../../../shared/stores/headerStore';
|
||||
import ReaderPage from './ReaderPage.vue';
|
||||
|
||||
@@ -57,6 +73,8 @@ import ReaderPage from './ReaderPage.vue';
|
||||
const headerStore = useHeaderStore();
|
||||
const containerRef = ref(null);
|
||||
const observer = ref(null);
|
||||
const visibilityObserver = ref(null);
|
||||
const mountedPageIndices = reactive(new Set());
|
||||
const windowWidth = ref(window.innerWidth);
|
||||
|
||||
// État unique pour tous les boutons flottants avec timer de 3 secondes
|
||||
@@ -76,25 +94,47 @@ import ReaderPage from './ReaderPage.vue';
|
||||
});
|
||||
};
|
||||
|
||||
const setupIntersectionObserver = () => {
|
||||
if (observer.value) {
|
||||
observer.value.disconnect();
|
||||
}
|
||||
// Calcul de la hauteur du placeholder — miroir exact du maxWidth de ReaderPage
|
||||
const getPlaceholderHeight = (page) => {
|
||||
const dims = page?.dimensions;
|
||||
if (!dims?.width || !dims?.height) return 800;
|
||||
const displayWidth = windowWidth.value < 1200
|
||||
? Math.min(dims.width, windowWidth.value * 0.95)
|
||||
: Math.min(dims.width, 1200);
|
||||
return Math.round((dims.height / dims.width) * displayWidth);
|
||||
};
|
||||
|
||||
const setupObservers = () => {
|
||||
observer.value?.disconnect();
|
||||
visibilityObserver.value?.disconnect();
|
||||
|
||||
observer.value = new IntersectionObserver(observeIntersection, {
|
||||
root: null,
|
||||
threshold: 0.5
|
||||
});
|
||||
|
||||
nextTick(() => {
|
||||
const pageElements = containerRef.value?.querySelectorAll('.page-wrapper');
|
||||
if (pageElements) {
|
||||
pageElements.forEach((element, index) => {
|
||||
element.setAttribute('data-page-index', index);
|
||||
observer.value.observe(element);
|
||||
});
|
||||
visibilityObserver.value = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach(entry => {
|
||||
const idx = parseInt(entry.target.getAttribute('data-page-index'));
|
||||
if (entry.isIntersecting) {
|
||||
mountedPageIndices.add(idx);
|
||||
} else {
|
||||
mountedPageIndices.delete(idx);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ root: null, rootMargin: '1000px 0px', threshold: 0 }
|
||||
);
|
||||
|
||||
nextTick(() => {
|
||||
const els = containerRef.value?.querySelectorAll('.page-wrapper');
|
||||
els?.forEach((el, i) => {
|
||||
el.setAttribute('data-page-index', i);
|
||||
observer.value.observe(el);
|
||||
visibilityObserver.value.observe(el);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// Fonction unique pour gérer la visibilité de tous les boutons flottants
|
||||
@@ -177,21 +217,16 @@ import ReaderPage from './ReaderPage.vue';
|
||||
|
||||
// Fonction pour revenir en haut de la page
|
||||
const scrollToTop = () => {
|
||||
console.log('scrollToTop appelée'); // Debug
|
||||
|
||||
// Réinitialiser le timer lors du clic
|
||||
resetButtonsTimer();
|
||||
|
||||
// Stratégie 1: Scroll sur le conteneur direct
|
||||
if (containerRef.value) {
|
||||
console.log('containerRef trouvé, scrollTop actuel:', containerRef.value.scrollTop); // Debug
|
||||
|
||||
if (containerRef.value.scrollTop > 0) {
|
||||
containerRef.value.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
console.log('Scroll sur containerRef effectué'); // Debug
|
||||
return;
|
||||
}
|
||||
}
|
||||
@@ -201,7 +236,6 @@ import ReaderPage from './ReaderPage.vue';
|
||||
while (currentElement) {
|
||||
const styles = window.getComputedStyle(currentElement);
|
||||
if (styles.overflowY === 'auto' || styles.overflowY === 'scroll' || currentElement.scrollTop > 0) {
|
||||
console.log('Conteneur avec scroll trouvé:', currentElement.className, 'scrollTop:', currentElement.scrollTop); // Debug
|
||||
currentElement.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
@@ -212,7 +246,6 @@ import ReaderPage from './ReaderPage.vue';
|
||||
}
|
||||
|
||||
// Stratégie 3: Scroll sur la fenêtre entière
|
||||
console.log('Scroll sur window, scrollY actuel:', window.scrollY); // Debug
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
@@ -228,7 +261,8 @@ import ReaderPage from './ReaderPage.vue';
|
||||
watch(
|
||||
() => props.pages,
|
||||
() => {
|
||||
setupIntersectionObserver();
|
||||
mountedPageIndices.clear();
|
||||
setupObservers();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
@@ -247,7 +281,7 @@ import ReaderPage from './ReaderPage.vue';
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
setupIntersectionObserver();
|
||||
setupObservers();
|
||||
|
||||
// Activer l'auto-hide du header si la largeur < 1200px
|
||||
if (windowWidth.value < 1200) {
|
||||
@@ -267,9 +301,8 @@ import ReaderPage from './ReaderPage.vue';
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (observer.value) {
|
||||
observer.value.disconnect();
|
||||
}
|
||||
observer.value?.disconnect();
|
||||
visibilityObserver.value?.disconnect();
|
||||
|
||||
// Désactiver l'auto-hide du header en quittant
|
||||
headerStore.disableAutoHide();
|
||||
@@ -303,6 +336,12 @@ import ReaderPage from './ReaderPage.vue';
|
||||
@apply mb-2 sm:mb-4 px-1 sm:px-4;
|
||||
}
|
||||
|
||||
.page-placeholder {
|
||||
@apply w-full;
|
||||
max-width: 1200px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.loading,
|
||||
.error {
|
||||
@apply flex items-center justify-center min-h-[400px];
|
||||
|
||||
@@ -78,6 +78,10 @@ import { useReaderStore } from '../../application/store/readerStore';
|
||||
type: String,
|
||||
default: 'rotate', // 'rotate', 'scroll', 'normal'
|
||||
validator: (value) => ['rotate', 'scroll', 'normal'].includes(value)
|
||||
},
|
||||
windowWidth: {
|
||||
type: Number,
|
||||
default: null
|
||||
}
|
||||
});
|
||||
|
||||
@@ -96,8 +100,11 @@ import { useReaderStore } from '../../application/store/readerStore';
|
||||
const scrollContainerRef = ref(null);
|
||||
const naturalWidth = ref(0);
|
||||
const naturalHeight = ref(0);
|
||||
const windowWidth = ref(window.innerWidth);
|
||||
const isMobile = computed(() => windowWidth.value < 768);
|
||||
const localWindowWidth = ref(window.innerWidth);
|
||||
const effectiveWindowWidth = computed(() =>
|
||||
props.windowWidth !== null ? props.windowWidth : localWindowWidth.value
|
||||
);
|
||||
const isMobile = computed(() => effectiveWindowWidth.value < 768);
|
||||
const imageLoaded = ref(false);
|
||||
|
||||
const imageSource = computed(() => {
|
||||
@@ -116,17 +123,13 @@ import { useReaderStore } from '../../application/store/readerStore';
|
||||
// Utiliser d'abord les dimensions de l'API si disponibles
|
||||
if (props.pageData?.dimensions?.width && props.pageData?.dimensions?.height) {
|
||||
const ratio = props.pageData.dimensions.width / props.pageData.dimensions.height;
|
||||
const isDouble = ratio > threshold;
|
||||
console.log(`API Dimensions - Page ${props.pageNumber}: ${props.pageData.dimensions.width}x${props.pageData.dimensions.height}, ratio: ${ratio.toFixed(2)}, isDouble: ${isDouble}`);
|
||||
return isDouble;
|
||||
return ratio > threshold;
|
||||
}
|
||||
|
||||
// Fallback sur les dimensions naturelles de l'image (seulement si l'image est chargée)
|
||||
if (imageLoaded.value && naturalWidth.value && naturalHeight.value) {
|
||||
const ratio = naturalWidth.value / naturalHeight.value;
|
||||
const isDouble = ratio > threshold;
|
||||
console.log(`Natural Dimensions - Page ${props.pageNumber}: ${naturalWidth.value}x${naturalHeight.value}, ratio: ${ratio.toFixed(2)}, isDouble: ${isDouble}`);
|
||||
return isDouble;
|
||||
return ratio > threshold;
|
||||
}
|
||||
|
||||
return false;
|
||||
@@ -137,7 +140,6 @@ import { useReaderStore } from '../../application/store/readerStore';
|
||||
naturalWidth.value = imageRef.value.naturalWidth;
|
||||
naturalHeight.value = imageRef.value.naturalHeight;
|
||||
imageLoaded.value = true;
|
||||
console.log(`Image loaded - Page ${props.pageNumber}: ${naturalWidth.value}x${naturalHeight.value}`);
|
||||
|
||||
// Positionner le scroll à droite si c'est le mode scroll
|
||||
if (props.doublePageMode === 'scroll' && scrollContainerRef.value) {
|
||||
@@ -188,7 +190,7 @@ import { useReaderStore } from '../../application/store/readerStore';
|
||||
|
||||
if (!width || !height) return null;
|
||||
|
||||
const availableWidth = windowWidth.value;
|
||||
const availableWidth = effectiveWindowWidth.value;
|
||||
|
||||
// Si la largeur disponible est < 1200px : utiliser 95% de la largeur
|
||||
if (availableWidth < 1200) {
|
||||
@@ -237,7 +239,7 @@ import { useReaderStore } from '../../application/store/readerStore';
|
||||
if (!width || !height) return {};
|
||||
|
||||
// En mode rotation : maximiser l'utilisation de l'espace
|
||||
const availableWidth = windowWidth.value;
|
||||
const availableWidth = effectiveWindowWidth.value;
|
||||
const availableHeight = window.innerHeight - 100; // Laisser un peu d'espace pour les contrôles
|
||||
|
||||
// Après rotation, la largeur originale devient la hauteur affichée
|
||||
@@ -287,20 +289,18 @@ import { useReaderStore } from '../../application/store/readerStore';
|
||||
};
|
||||
});
|
||||
|
||||
// Gestion du redimensionnement de la fenêtre
|
||||
const handleResize = () => {
|
||||
windowWidth.value = window.innerWidth;
|
||||
};
|
||||
let ownResizeHandler = null;
|
||||
|
||||
onMounted(() => {
|
||||
if (imageRef.value && imageRef.value.complete) {
|
||||
handleImageLoad();
|
||||
if (props.windowWidth === null) {
|
||||
ownResizeHandler = () => { localWindowWidth.value = window.innerWidth; };
|
||||
window.addEventListener('resize', ownResizeHandler, { passive: true });
|
||||
}
|
||||
window.addEventListener('resize', handleResize);
|
||||
if (imageRef.value?.complete) handleImageLoad();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (ownResizeHandler) window.removeEventListener('resize', ownResizeHandler);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user