Skip to content

Commit 98e4f44

Browse files
hoangsonwwhoangsonww
committed
Improve carousel progress slider accuracy and initialization across spotlight sections
1 parent e10dd3f commit 98e4f44

10 files changed

Lines changed: 340 additions & 95 deletions

File tree

‎MovieVerse-Frontend/js/favorites.js‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1296,6 +1296,11 @@ function ensureScrollProgress(mainElement) {
12961296
progress.innerHTML =
12971297
'<input class="scroll-progress-slider" type="range" min="0" max="100" step="0.1" value="0" aria-label="Carousel position" />';
12981298
mainElement.appendChild(progress);
1299+
const slider = progress.querySelector('.scroll-progress-slider');
1300+
if (slider) {
1301+
slider.value = '0';
1302+
slider.style.setProperty('--progress', '0%');
1303+
}
12991304
}
13001305
return progress;
13011306
}
@@ -1315,7 +1320,27 @@ function updateScrollProgress(mainElement) {
13151320
}
13161321

13171322
progress.style.display = 'block';
1318-
const percent = Math.min(100, Math.max(0, (track.scrollLeft / maxScroll) * 100));
1323+
1324+
// Map percent against actual first/last card snap positions so the thumb
1325+
// reads 0% when the first card is active and 100% when the last is active,
1326+
// regardless of scroll-snap padding or sub-pixel rounding.
1327+
let rangeStart = 0;
1328+
let rangeEnd = maxScroll;
1329+
const cards = getSpotlightCards(mainElement);
1330+
if (cards.length >= 2) {
1331+
const layout = getSpotlightLayout(track, cards);
1332+
if (layout !== 'left') {
1333+
const first = cards[0];
1334+
const last = cards[cards.length - 1];
1335+
const firstSnap = first.offsetLeft - (track.clientWidth - first.clientWidth) / 2;
1336+
const lastSnap = last.offsetLeft - (track.clientWidth - last.clientWidth) / 2;
1337+
rangeStart = Math.max(0, Math.min(maxScroll, firstSnap));
1338+
rangeEnd = Math.max(0, Math.min(maxScroll, lastSnap));
1339+
}
1340+
}
1341+
1342+
const range = rangeEnd - rangeStart;
1343+
const percent = range > 0 ? Math.min(100, Math.max(0, ((track.scrollLeft - rangeStart) / range) * 100)) : 0;
13191344
slider.value = `${percent}`;
13201345
slider.style.setProperty('--progress', `${percent}%`);
13211346
}

‎MovieVerse-Frontend/js/movie-timeline.js‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -531,6 +531,11 @@ function ensureScrollProgress(mainElement) {
531531
progress.innerHTML =
532532
'<input class="scroll-progress-slider" type="range" min="0" max="100" step="0.1" value="0" aria-label="Carousel position" />';
533533
mainElement.appendChild(progress);
534+
const slider = progress.querySelector('.scroll-progress-slider');
535+
if (slider) {
536+
slider.value = '0';
537+
slider.style.setProperty('--progress', '0%');
538+
}
534539
}
535540
return progress;
536541
}
@@ -550,7 +555,27 @@ function updateScrollProgress(mainElement) {
550555
}
551556

552557
progress.style.display = 'block';
553-
const percent = Math.min(100, Math.max(0, (track.scrollLeft / maxScroll) * 100));
558+
559+
// Map percent against actual first/last card snap positions so the thumb
560+
// reads 0% when the first card is active and 100% when the last is active,
561+
// regardless of scroll-snap padding or sub-pixel rounding.
562+
let rangeStart = 0;
563+
let rangeEnd = maxScroll;
564+
const cards = getSpotlightCards(mainElement);
565+
if (cards.length >= 2) {
566+
const layout = getSpotlightLayout(track, cards);
567+
if (layout !== 'left') {
568+
const first = cards[0];
569+
const last = cards[cards.length - 1];
570+
const firstSnap = first.offsetLeft - (track.clientWidth - first.clientWidth) / 2;
571+
const lastSnap = last.offsetLeft - (track.clientWidth - last.clientWidth) / 2;
572+
rangeStart = Math.max(0, Math.min(maxScroll, firstSnap));
573+
rangeEnd = Math.max(0, Math.min(maxScroll, lastSnap));
574+
}
575+
}
576+
577+
const range = rangeEnd - rangeStart;
578+
const percent = range > 0 ? Math.min(100, Math.max(0, ((track.scrollLeft - rangeStart) / range) * 100)) : 0;
554579
slider.value = `${percent}`;
555580
slider.style.setProperty('--progress', `${percent}%`);
556581
}

‎MovieVerse-Frontend/js/search.js‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -832,6 +832,11 @@ function ensureScrollProgress(mainElement) {
832832
progress.innerHTML =
833833
'<input class="scroll-progress-slider" type="range" min="0" max="100" step="0.1" value="0" aria-label="Carousel position" />';
834834
mainElement.appendChild(progress);
835+
const slider = progress.querySelector('.scroll-progress-slider');
836+
if (slider) {
837+
slider.value = '0';
838+
slider.style.setProperty('--progress', '0%');
839+
}
835840
}
836841
return progress;
837842
}
@@ -851,7 +856,27 @@ function updateScrollProgress(mainElement) {
851856
}
852857

853858
progress.style.display = 'block';
854-
const percent = Math.min(100, Math.max(0, (track.scrollLeft / maxScroll) * 100));
859+
860+
// Map percent against actual first/last card snap positions so the thumb
861+
// reads 0% when the first card is active and 100% when the last is active,
862+
// regardless of scroll-snap padding or sub-pixel rounding.
863+
let rangeStart = 0;
864+
let rangeEnd = maxScroll;
865+
const cards = getSpotlightCards(mainElement);
866+
if (cards.length >= 2) {
867+
const layout = getSpotlightLayout(track, cards);
868+
if (layout !== 'left') {
869+
const first = cards[0];
870+
const last = cards[cards.length - 1];
871+
const firstSnap = first.offsetLeft - (track.clientWidth - first.clientWidth) / 2;
872+
const lastSnap = last.offsetLeft - (track.clientWidth - last.clientWidth) / 2;
873+
rangeStart = Math.max(0, Math.min(maxScroll, firstSnap));
874+
rangeEnd = Math.max(0, Math.min(maxScroll, lastSnap));
875+
}
876+
}
877+
878+
const range = rangeEnd - rangeStart;
879+
const percent = range > 0 ? Math.min(100, Math.max(0, ((track.scrollLeft - rangeStart) / range) * 100)) : 0;
855880
slider.value = `${percent}`;
856881
slider.style.setProperty('--progress', `${percent}%`);
857882
}

‎MovieVerse-Frontend/react/js/search.js‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -823,6 +823,11 @@ function ensureScrollProgress(mainElement) {
823823
progress.innerHTML =
824824
'<input class="scroll-progress-slider" type="range" min="0" max="100" step="0.1" value="0" aria-label="Carousel position" />';
825825
mainElement.appendChild(progress);
826+
const slider = progress.querySelector('.scroll-progress-slider');
827+
if (slider) {
828+
slider.value = '0';
829+
slider.style.setProperty('--progress', '0%');
830+
}
826831
}
827832
return progress;
828833
}
@@ -842,7 +847,27 @@ function updateScrollProgress(mainElement) {
842847
}
843848

844849
progress.style.display = 'block';
845-
const percent = Math.min(100, Math.max(0, (track.scrollLeft / maxScroll) * 100));
850+
851+
// Map percent against actual first/last card snap positions so the thumb
852+
// reads 0% when the first card is active and 100% when the last is active,
853+
// regardless of scroll-snap padding or sub-pixel rounding.
854+
let rangeStart = 0;
855+
let rangeEnd = maxScroll;
856+
const cards = getSpotlightCards(mainElement);
857+
if (cards.length >= 2) {
858+
const layout = getSpotlightLayout(track, cards);
859+
if (layout !== 'left') {
860+
const first = cards[0];
861+
const last = cards[cards.length - 1];
862+
const firstSnap = first.offsetLeft - (track.clientWidth - first.clientWidth) / 2;
863+
const lastSnap = last.offsetLeft - (track.clientWidth - last.clientWidth) / 2;
864+
rangeStart = Math.max(0, Math.min(maxScroll, firstSnap));
865+
rangeEnd = Math.max(0, Math.min(maxScroll, lastSnap));
866+
}
867+
}
868+
869+
const range = rangeEnd - rangeStart;
870+
const percent = range > 0 ? Math.min(100, Math.max(0, ((track.scrollLeft - rangeStart) / range) * 100)) : 0;
846871
slider.value = `${percent}`;
847872
slider.style.setProperty('--progress', `${percent}%`);
848873
}

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2838,7 +2838,7 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
28382838
color: #ff8623 !important;
28392839
transition: 0.1s ease-in;
28402840
}
2841-
[id^="ad-container"] {
2841+
[id^='ad-container'] {
28422842
display: block;
28432843
}
28442844
</style>

0 commit comments

Comments
 (0)