Skip to content

Commit fc6e664

Browse files
terrillterrill
committed
Improve tracking of current chapter in external chapters container
1 parent 385ead4 commit fc6e664

17 files changed

Lines changed: 286 additions & 121 deletions

‎Gruntfile.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ module.exports = function(grunt) {
3131
'scripts/browser.js',
3232
'scripts/control.js',
3333
'scripts/caption.js',
34+
'scripts/chapters.js',
3435
'scripts/metadata.js',
3536
'scripts/transcript.js',
3637
'scripts/search.js',

‎build/ableplayer.dist.js‎

Lines changed: 92 additions & 37 deletions
Large diffs are not rendered by default.

‎build/ableplayer.js‎

Lines changed: 92 additions & 37 deletions
Large diffs are not rendered by default.

‎build/ableplayer.min.css‎

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

‎build/ableplayer.min.js‎

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

‎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": "2.3.23",
3+
"version": "2.3.24",
44
"description": "fully accessible HTML5 media player",
55
"homepage": "http://ableplayer.github.io/ableplayer",
66
"bugs": "https://github.com/ableplayer/ableplayer/issues",

‎scripts/ableplayer-base.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@
126126

127127
if ($(media).data('chapters-default') !== undefined && $(media).data('chapters-default') !== "") {
128128
this.defaultChapter = $(media).data('chapters-default');
129-
this.chapter = this.defaultChapter; // this.chapter is the id of the default chapter (as defined within WebVTT file)
129+
this.chapterId = this.defaultChapter; // the id of the default chapter (as defined within WebVTT file)
130130
}
131131

132132
if ($(media).data('use-chapters-button') !== undefined && $(media).data('use-chapters-button') === false) {

‎scripts/buildplayer.js‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -206,8 +206,7 @@
206206
var thisObj, headingLevel, headingType, headingId, $chaptersHeading,
207207
$chaptersNav, $chaptersList, $chapterItem, $chapterButton,
208208
i, itemId, chapter, buttonId, hasDefault,
209-
getFocusFunction, getHoverFunction, getBlurFunction, getClickFunction,
210-
$thisButton, $thisListItem, $prevButton, $nextButton, blurListener;
209+
getClickFunction, $clickedItem, $chaptersList, thisChapterIndex;
211210

212211
thisObj = this;
213212

@@ -248,12 +247,12 @@
248247
// add event listeners
249248
getClickFunction = function (time) {
250249
return function () {
251-
$(this).closest('ul').find('li')
252-
.removeClass('able-current-chapter')
253-
.attr('aria-selected','');
254-
$(this).closest('li')
255-
.addClass('able-current-chapter')
256-
.attr('aria-selected','true');
250+
$clickedItem = $(this).closest('li');
251+
$chaptersList = $(this).closest('ul').find('li');
252+
thisChapterIndex = $chaptersList.index($clickedItem);
253+
$chaptersList.removeClass('able-current-chapter').attr('aria-selected','');
254+
$clickedItem.addClass('able-current-chapter').attr('aria-selected','true');
255+
thisObj.currentChapter = thisObj.chapters[thisChapterIndex];
257256
thisObj.seekTo(time);
258257
}
259258
};
@@ -329,20 +328,26 @@
329328

330329
AblePlayer.prototype.injectAlert = function () {
331330

331+
// inject two alerts, one visible for all users and one for screen reader users only
332+
332333
var top;
333334

334-
this.alertBox = $('<div role="alert"></div>');
335-
this.alertBox.addClass('able-alert');
336-
this.alertBox.appendTo(this.$ableDiv);
335+
this.$alertBox = $('<div role="alert"></div>');
336+
this.$alertBox.addClass('able-alert');
337+
this.$alertBox.appendTo(this.$ableDiv);
337338
if (this.mediaType == 'audio') {
338339
top = -10;
339340
}
340341
else {
341342
top = Math.round(this.$mediaContainer.offset().top * 10) / 10;
342343
}
343-
this.alertBox.css({
344+
this.$alertBox.css({
344345
top: top + 'px'
345346
});
347+
348+
this.$srAlertBox = $('<div role="alert"></div>');
349+
this.$srAlertBox.addClass('able-screenreader-alert');
350+
this.$srAlertBox.appendTo(this.$ableDiv);
346351
};
347352

348353
AblePlayer.prototype.injectPlaylist = function () {

‎scripts/chapters.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
(function ($) {
2+
AblePlayer.prototype.seekToDefaultChapter = function() {
3+
// this function is only called if this.defaultChapter is not null
4+
// step through chapters looking for default
5+
var i=0;
6+
while (i < this.chapters.length) {
7+
if (this.chapters[i].id === this.defaultChapter) {
8+
// found the default chapter! Seek to it
9+
this.seekTo(this.chapters[i].start);
10+
}
11+
i++;
12+
}
13+
};
14+
15+
AblePlayer.prototype.updateChapter = function(now) {
16+
17+
// as time-synced chapters change during playback, update external container
18+
19+
if (typeof this.$chaptersDiv === 'undefined') {
20+
return;
21+
}
22+
var chapters, i, thisChapterIndex, chapterLabel;
23+
chapters = this.chapters;
24+
for (i in chapters) {
25+
if ((chapters[i].start <= now) && (chapters[i].end > now)) {
26+
thisChapterIndex = i;
27+
break;
28+
}
29+
}
30+
if (typeof thisChapterIndex !== 'undefined') {
31+
if (this.currentChapter !== chapters[thisChapterIndex]) {
32+
// this is a new chapter
33+
this.$chaptersDiv.find('ul').find('li').removeClass('able-current-chapter').attr('aria-selected','');
34+
this.$chaptersDiv.find('ul').find('li').eq(thisChapterIndex)
35+
.addClass('able-current-chapter').attr('aria-selected','true');
36+
this.currentChapter = chapters[thisChapterIndex];
37+
chapterLabel = this.tt.newChapter + ': ' + this.flattenCueForCaption(this.currentChapter);
38+
this.showAlert(chapterLabel,'screenreader');
39+
}
40+
}
41+
};
42+
43+
})(jQuery);

‎scripts/control.js‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -960,14 +960,21 @@
960960

961961
AblePlayer.prototype.showAlert = function( msg, location ) {
962962

963-
// location is either 'main' (default) or 'sign' (i.e., sign language window)
963+
// location is either of the following:
964+
// 'main' (default)
965+
// 'screenreader
966+
// 'sign' (i.e., sign language window)
967+
964968
var thisObj = this;
965969
var alertBox, alertLeft;
966970
if (location === 'sign') {
967971
alertBox = this.$windowAlert;
968972
}
973+
else if (location === 'screenreader') {
974+
alertBox = this.$srAlertBox;
975+
}
969976
else {
970-
alertBox = this.alertBox;
977+
alertBox = this.$alertBox;
971978
}
972979
alertBox.show();
973980
alertBox.text(msg);
@@ -985,7 +992,7 @@
985992
left: alertLeft
986993
});
987994
}
988-
else {
995+
else if (location !== 'screenreader') {
989996
// The original formula incorporated offset() into the calculation
990997
// but at some point this began resulting in an alert that's off-centered
991998
// Changed in v2.2.17, but here's the original for reference in case needed:
@@ -994,9 +1001,11 @@
9941001
left: (this.$playerDiv.width() / 2) - (alertBox.width() / 2)
9951002
});
9961003
}
997-
setTimeout(function () {
998-
alertBox.fadeOut(300);
999-
}, 3000);
1004+
if (location !== 'screenreader') {
1005+
setTimeout(function () {
1006+
alertBox.fadeOut(300);
1007+
}, 3000);
1008+
}
10001009
};
10011010

10021011
// Resizes all relevant player attributes.

0 commit comments

Comments
 (0)