Skip to content

Commit 39c6199

Browse files
terrillterrill
committed
Improve transcript scrollTo efficiency & eliminate flicker
1 parent 750cd0d commit 39c6199

9 files changed

Lines changed: 50 additions & 26 deletions

‎build/ableplayer.dist.js‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8352,7 +8352,11 @@ if (thisObj.useTtml && (trackSrc.endsWith('.xml') || trackText.startsWith('<?xml
83528352
// Set a flag to ignore the coming scroll event.
83538353
// there's no other way I know of to differentiate programmatic and user-initiated scroll events.
83548354
this.scrollingTranscript = true;
8355-
$('.able-transcript').scrollTop(newTop);
8355+
// only scroll once after moving a highlight
8356+
if (this.movingHighlight) {
8357+
$('.able-transcript').scrollTop(newTop);
8358+
this.movingHighlight = false;
8359+
}
83568360
}
83578361
}
83588362
}
@@ -10628,10 +10632,15 @@ if (thisObj.useTtml && (trackSrc.endsWith('.xml') || trackText.startsWith('<?xml
1062810632
}
1062910633

1063010634
if (currentTime >= start && currentTime <= end && !isChapterHeading) {
10631-
// move all previous highlights before adding one to current span
10632-
thisObj.$transcriptArea.find('.able-highlight').removeClass('able-highlight');
10633-
$(this).addClass('able-highlight');
10634-
return false;
10635+
10636+
// If this item isn't already highlighted, it should be
10637+
if (!($(this).hasClass('able-highlight'))) {
10638+
// remove all previous highlights before adding one to current span
10639+
thisObj.$transcriptArea.find('.able-highlight').removeClass('able-highlight');
10640+
$(this).addClass('able-highlight');
10641+
thisObj.movingHighlight = true;
10642+
}
10643+
return false;
1063510644
}
1063610645
});
1063710646
thisObj.currentHighlight = $('.able-highlight');

‎build/ableplayer.js‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8352,7 +8352,11 @@ if (thisObj.useTtml && (trackSrc.endsWith('.xml') || trackText.startsWith('<?xml
83528352
// Set a flag to ignore the coming scroll event.
83538353
// there's no other way I know of to differentiate programmatic and user-initiated scroll events.
83548354
this.scrollingTranscript = true;
8355-
$('.able-transcript').scrollTop(newTop);
8355+
// only scroll once after moving a highlight
8356+
if (this.movingHighlight) {
8357+
$('.able-transcript').scrollTop(newTop);
8358+
this.movingHighlight = false;
8359+
}
83568360
}
83578361
}
83588362
}
@@ -10628,10 +10632,15 @@ if (thisObj.useTtml && (trackSrc.endsWith('.xml') || trackText.startsWith('<?xml
1062810632
}
1062910633

1063010634
if (currentTime >= start && currentTime <= end && !isChapterHeading) {
10631-
// move all previous highlights before adding one to current span
10632-
thisObj.$transcriptArea.find('.able-highlight').removeClass('able-highlight');
10633-
$(this).addClass('able-highlight');
10634-
return false;
10635+
10636+
// If this item isn't already highlighted, it should be
10637+
if (!($(this).hasClass('able-highlight'))) {
10638+
// remove all previous highlights before adding one to current span
10639+
thisObj.$transcriptArea.find('.able-highlight').removeClass('able-highlight');
10640+
$(this).addClass('able-highlight');
10641+
thisObj.movingHighlight = true;
10642+
}
10643+
return false;
1063510644
}
1063610645
});
1063710646
thisObj.currentHighlight = $('.able-highlight');

‎build/ableplayer.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎media/deadline_captions_en.vtt‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,9 @@ WEBVTT
1818
00:00:29.190 --> 00:00:31.421
1919
<v Boy> Oh yeah! Now's the time!
2020

21-
00:00:33.340 --> 00:00:34.570
21+
00:00:35.930 --> 00:00:36.832
2222
<v Project> Oh!
2323

24-
00:00:35.931 --> 00:00:36.832
25-
Ah!
26-
2724
00:00:36.872 --> 00:00:37.671
2825
Oh!
2926

‎media/deadline_descriptions_en.vtt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ with a sign: "Deadline"
2121
00:00:31.422 --> 00:00:33.000
2222
The boat shoots into the air.
2323

24-
00:00:33.000 --> 00:00:35.930
24+
00:00:33.000 --> 00:00:35.920
2525
As it falls, the boy attaches body, arms, and legs.
2626

2727
00:00:35.932 --> 00:00:36.871

‎media/wwa_description_en.vtt‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
WEBVTT
22
3-
00:00:00.005 --> 00:00:06.000
3+
00:00:00.005 --> 00:00:04.000
44
A blue circle has pairs of arching curves inside.
55
Underneath, DO-IT.
66

7-
00:00:06.000 --> 00:00:12.000
7+
00:00:06.000 --> 00:00:10.000
88
Words appear in a white box:
99
World Wide Access.
1010

11-
00:00:37.100 --> 00:00:47.000
11+
00:00:37.100 --> 00:00:39.000
1212
Terrill Thompson,
1313
Technology Accessibility Specialist

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ableplayer",
3-
"version": "4.0.17",
3+
"version": "4.0.18",
44
"description": "fully accessible HTML5 media player",
55
"homepage": "http://ableplayer.github.io/ableplayer",
66
"bugs": "https://github.com/ableplayer/ableplayer/issues",

‎scripts/control.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -743,7 +743,11 @@
743743
// Set a flag to ignore the coming scroll event.
744744
// there's no other way I know of to differentiate programmatic and user-initiated scroll events.
745745
this.scrollingTranscript = true;
746-
$('.able-transcript').scrollTop(newTop);
746+
// only scroll once after moving a highlight
747+
if (this.movingHighlight) {
748+
$('.able-transcript').scrollTop(newTop);
749+
this.movingHighlight = false;
750+
}
747751
}
748752
}
749753
}

‎scripts/transcript.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -311,10 +311,15 @@
311311
}
312312

313313
if (currentTime >= start && currentTime <= end && !isChapterHeading) {
314-
// move all previous highlights before adding one to current span
315-
thisObj.$transcriptArea.find('.able-highlight').removeClass('able-highlight');
316-
$(this).addClass('able-highlight');
317-
return false;
314+
315+
// If this item isn't already highlighted, it should be
316+
if (!($(this).hasClass('able-highlight'))) {
317+
// remove all previous highlights before adding one to current span
318+
thisObj.$transcriptArea.find('.able-highlight').removeClass('able-highlight');
319+
$(this).addClass('able-highlight');
320+
thisObj.movingHighlight = true;
321+
}
322+
return false;
318323
}
319324
});
320325
thisObj.currentHighlight = $('.able-highlight');

0 commit comments

Comments
 (0)