Skip to content

Commit 889d793

Browse files
terrillterrill
committed
Add support for multiple interactive transcripts per page
1 parent 0b69a91 commit 889d793

7 files changed

Lines changed: 70 additions & 70 deletions

File tree

‎build/ableplayer.dist.js‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,14 @@
4040
$('body').trigger('youtubeIframeAPIReady', []);
4141
};
4242

43-
//
43+
// If there is only one player on the page, dispatch global keydown events to it
44+
// Otherwise, keydowwn events are handled locally (see event.js > handleEventListeners())
4445
$(window).keydown(function(e) {
45-
if (AblePlayer.nextIndex === 1) {
46-
// Only one player on the page; dispatch global key presses to it.
46+
if (AblePlayer.nextIndex === 1) {
4747
AblePlayer.lastCreated.onPlayerKeyPress(e);
4848
}
4949
});
5050

51-
5251
// Construct an AblePlayer object
5352
// Parameters are:
5453
// media - jQuery selector or element identifying the media.
@@ -1140,15 +1139,6 @@
11401139
thisObj.onClickPlayerButton(this);
11411140
});
11421141

1143-
// TODO: Ascertain whether this is needed
1144-
// handle local key-presses if this is not the only player on the page;
1145-
// otherwise these are dispatched by global handler.
1146-
this.$ccButton.keydown(function (e) {
1147-
if (AblePlayer.nextIndex > 1) {
1148-
thisObj.onPlayerKeyPress(e);
1149-
}
1150-
});
1151-
11521142
// TODO: might need to adjust width and height of div.able-vidcap-container
11531143
// Only used if !this.usingYouTubeCaptions
11541144
/*
@@ -6116,6 +6106,7 @@
61166106

61176107
(function ($) {
61186108
AblePlayer.prototype.updateTranscript = function() {
6109+
61196110
if (!this.includeTranscript) {
61206111
return;
61216112
}
@@ -6160,11 +6151,11 @@
61606151
}
61616152

61626153
// handle clicks on text within transcript
6163-
// Note #1: Only one transcript per page is supported
6164-
// Note #2: Pressing Enter on an element that is not natively clickable does NOT trigger click()
6165-
// Forcing this elsewhere, in the keyboard handler section
6166-
if ($('.able-transcript').length > 0) {
6167-
$('.able-transcript span.able-transcript-seekpoint').click(function(event) {
6154+
// Note: This event listeners handles clicks only, not keydown events
6155+
// Pressing Enter on an element that is not natively clickable does NOT trigger click()
6156+
// Keydown events are handled elsehwere, both globally (ableplayer-base.js) and locally (event.js)
6157+
if (this.$transcriptArea.length > 0) {
6158+
this.$transcriptArea.find('.able-transcript span.able-transcript-seekpoint').click(function(event) {
61686159
var spanStart = parseFloat($(this).attr('data-start'));
61696160
// Add a tiny amount so that we're inside the span.
61706161
spanStart += .01;
@@ -6185,12 +6176,12 @@
61856176
currentTime = parseFloat(currentTime);
61866177

61876178
// Highlight the current transcript item.
6188-
$('.able-transcript span.able-transcript-caption').each(function() {
6179+
this.$transcriptArea.find('.able-transcript span.able-transcript-caption').each(function() {
61896180
start = parseFloat($(this).attr('data-start'));
61906181
end = parseFloat($(this).attr('data-end'));
61916182
if (currentTime >= start && currentTime <= end) {
61926183
// move all previous highlights before adding one to current span
6193-
$('.able-highlight').removeClass('able-highlight');
6184+
thisObj.$transcriptArea.find('.able-highlight').removeClass('able-highlight');
61946185
$(this).addClass('able-highlight');
61956186
return false;
61966187
}
@@ -6747,6 +6738,7 @@
67476738
}
67486739
// Convert to lower case.
67496740
var which = e.which;
6741+
67506742
if (which >= 65 && which <= 90) {
67516743
which += 32;
67526744
}
@@ -7029,13 +7021,21 @@
70297021
thisObj.onClickPlayerButton(this);
70307022
});
70317023

7032-
// handle local key-presses if we're not the only player on the page; otherwise these are dispatched by global handler.
7024+
// handle local keydown events if this isn't the only player on the page;
7025+
// otherwise these are dispatched by global handler (see ableplayer-base,js)
70337026
this.$ableDiv.keydown(function (e) {
70347027
if (AblePlayer.nextIndex > 1) {
70357028
thisObj.onPlayerKeyPress(e);
70367029
}
70377030
});
7038-
7031+
// transcript is not a child of this.$ableDiv
7032+
// therefore, must be added separately
7033+
this.$transcriptArea.keydown(function (e) {
7034+
if (AblePlayer.nextIndex > 1) {
7035+
thisObj.onPlayerKeyPress(e);
7036+
}
7037+
});
7038+
70397039
// handle clicks on playlist items
70407040
if (this.$playlist) {
70417041
this.$playlist.click(function() {

‎build/ableplayer.js‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,14 @@
4040
$('body').trigger('youtubeIframeAPIReady', []);
4141
};
4242

43-
//
43+
// If there is only one player on the page, dispatch global keydown events to it
44+
// Otherwise, keydowwn events are handled locally (see event.js > handleEventListeners())
4445
$(window).keydown(function(e) {
45-
if (AblePlayer.nextIndex === 1) {
46-
// Only one player on the page; dispatch global key presses to it.
46+
if (AblePlayer.nextIndex === 1) {
4747
AblePlayer.lastCreated.onPlayerKeyPress(e);
4848
}
4949
});
5050

51-
5251
// Construct an AblePlayer object
5352
// Parameters are:
5453
// media - jQuery selector or element identifying the media.
@@ -1140,15 +1139,6 @@
11401139
thisObj.onClickPlayerButton(this);
11411140
});
11421141

1143-
// TODO: Ascertain whether this is needed
1144-
// handle local key-presses if this is not the only player on the page;
1145-
// otherwise these are dispatched by global handler.
1146-
this.$ccButton.keydown(function (e) {
1147-
if (AblePlayer.nextIndex > 1) {
1148-
thisObj.onPlayerKeyPress(e);
1149-
}
1150-
});
1151-
11521142
// TODO: might need to adjust width and height of div.able-vidcap-container
11531143
// Only used if !this.usingYouTubeCaptions
11541144
/*
@@ -6116,6 +6106,7 @@
61166106

61176107
(function ($) {
61186108
AblePlayer.prototype.updateTranscript = function() {
6109+
61196110
if (!this.includeTranscript) {
61206111
return;
61216112
}
@@ -6160,11 +6151,11 @@
61606151
}
61616152

61626153
// handle clicks on text within transcript
6163-
// Note #1: Only one transcript per page is supported
6164-
// Note #2: Pressing Enter on an element that is not natively clickable does NOT trigger click()
6165-
// Forcing this elsewhere, in the keyboard handler section
6166-
if ($('.able-transcript').length > 0) {
6167-
$('.able-transcript span.able-transcript-seekpoint').click(function(event) {
6154+
// Note: This event listeners handles clicks only, not keydown events
6155+
// Pressing Enter on an element that is not natively clickable does NOT trigger click()
6156+
// Keydown events are handled elsehwere, both globally (ableplayer-base.js) and locally (event.js)
6157+
if (this.$transcriptArea.length > 0) {
6158+
this.$transcriptArea.find('.able-transcript span.able-transcript-seekpoint').click(function(event) {
61686159
var spanStart = parseFloat($(this).attr('data-start'));
61696160
// Add a tiny amount so that we're inside the span.
61706161
spanStart += .01;
@@ -6185,12 +6176,12 @@
61856176
currentTime = parseFloat(currentTime);
61866177

61876178
// Highlight the current transcript item.
6188-
$('.able-transcript span.able-transcript-caption').each(function() {
6179+
this.$transcriptArea.find('.able-transcript span.able-transcript-caption').each(function() {
61896180
start = parseFloat($(this).attr('data-start'));
61906181
end = parseFloat($(this).attr('data-end'));
61916182
if (currentTime >= start && currentTime <= end) {
61926183
// move all previous highlights before adding one to current span
6193-
$('.able-highlight').removeClass('able-highlight');
6184+
thisObj.$transcriptArea.find('.able-highlight').removeClass('able-highlight');
61946185
$(this).addClass('able-highlight');
61956186
return false;
61966187
}
@@ -6747,6 +6738,7 @@
67476738
}
67486739
// Convert to lower case.
67496740
var which = e.which;
6741+
67506742
if (which >= 65 && which <= 90) {
67516743
which += 32;
67526744
}
@@ -7029,13 +7021,21 @@
70297021
thisObj.onClickPlayerButton(this);
70307022
});
70317023

7032-
// handle local key-presses if we're not the only player on the page; otherwise these are dispatched by global handler.
7024+
// handle local keydown events if this isn't the only player on the page;
7025+
// otherwise these are dispatched by global handler (see ableplayer-base,js)
70337026
this.$ableDiv.keydown(function (e) {
70347027
if (AblePlayer.nextIndex > 1) {
70357028
thisObj.onPlayerKeyPress(e);
70367029
}
70377030
});
7038-
7031+
// transcript is not a child of this.$ableDiv
7032+
// therefore, must be added separately
7033+
this.$transcriptArea.keydown(function (e) {
7034+
if (AblePlayer.nextIndex > 1) {
7035+
thisObj.onPlayerKeyPress(e);
7036+
}
7037+
});
7038+
70397039
// handle clicks on playlist items
70407040
if (this.$playlist) {
70417041
this.$playlist.click(function() {

‎build/ableplayer.min.js‎

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

‎scripts/ableplayer-base.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,14 @@
4040
$('body').trigger('youtubeIframeAPIReady', []);
4141
};
4242

43-
//
43+
// If there is only one player on the page, dispatch global keydown events to it
44+
// Otherwise, keydowwn events are handled locally (see event.js > handleEventListeners())
4445
$(window).keydown(function(e) {
45-
if (AblePlayer.nextIndex === 1) {
46-
// Only one player on the page; dispatch global key presses to it.
46+
if (AblePlayer.nextIndex === 1) {
4747
AblePlayer.lastCreated.onPlayerKeyPress(e);
4848
}
4949
});
5050

51-
5251
// Construct an AblePlayer object
5352
// Parameters are:
5453
// media - jQuery selector or element identifying the media.

‎scripts/event.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,7 @@
209209
}
210210
// Convert to lower case.
211211
var which = e.which;
212+
212213
if (which >= 65 && which <= 90) {
213214
which += 32;
214215
}
@@ -491,13 +492,21 @@
491492
thisObj.onClickPlayerButton(this);
492493
});
493494

494-
// handle local key-presses if we're not the only player on the page; otherwise these are dispatched by global handler.
495+
// handle local keydown events if this isn't the only player on the page;
496+
// otherwise these are dispatched by global handler (see ableplayer-base,js)
495497
this.$ableDiv.keydown(function (e) {
496498
if (AblePlayer.nextIndex > 1) {
497499
thisObj.onPlayerKeyPress(e);
498500
}
499501
});
500-
502+
// transcript is not a child of this.$ableDiv
503+
// therefore, must be added separately
504+
this.$transcriptArea.keydown(function (e) {
505+
if (AblePlayer.nextIndex > 1) {
506+
thisObj.onPlayerKeyPress(e);
507+
}
508+
});
509+
501510
// handle clicks on playlist items
502511
if (this.$playlist) {
503512
this.$playlist.click(function() {

‎scripts/initialize.js‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -891,15 +891,6 @@
891891
thisObj.onClickPlayerButton(this);
892892
});
893893

894-
// TODO: Ascertain whether this is needed
895-
// handle local key-presses if this is not the only player on the page;
896-
// otherwise these are dispatched by global handler.
897-
this.$ccButton.keydown(function (e) {
898-
if (AblePlayer.nextIndex > 1) {
899-
thisObj.onPlayerKeyPress(e);
900-
}
901-
});
902-
903894
// TODO: might need to adjust width and height of div.able-vidcap-container
904895
// Only used if !this.usingYouTubeCaptions
905896
/*

‎scripts/transcript.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
(function ($) {
22
AblePlayer.prototype.updateTranscript = function() {
3+
34
if (!this.includeTranscript) {
45
return;
56
}
@@ -44,11 +45,11 @@
4445
}
4546

4647
// handle clicks on text within transcript
47-
// Note #1: Only one transcript per page is supported
48-
// Note #2: Pressing Enter on an element that is not natively clickable does NOT trigger click()
49-
// Forcing this elsewhere, in the keyboard handler section
50-
if ($('.able-transcript').length > 0) {
51-
$('.able-transcript span.able-transcript-seekpoint').click(function(event) {
48+
// Note: This event listeners handles clicks only, not keydown events
49+
// Pressing Enter on an element that is not natively clickable does NOT trigger click()
50+
// Keydown events are handled elsehwere, both globally (ableplayer-base.js) and locally (event.js)
51+
if (this.$transcriptArea.length > 0) {
52+
this.$transcriptArea.find('.able-transcript span.able-transcript-seekpoint').click(function(event) {
5253
var spanStart = parseFloat($(this).attr('data-start'));
5354
// Add a tiny amount so that we're inside the span.
5455
spanStart += .01;
@@ -69,12 +70,12 @@
6970
currentTime = parseFloat(currentTime);
7071

7172
// Highlight the current transcript item.
72-
$('.able-transcript span.able-transcript-caption').each(function() {
73+
this.$transcriptArea.find('.able-transcript span.able-transcript-caption').each(function() {
7374
start = parseFloat($(this).attr('data-start'));
7475
end = parseFloat($(this).attr('data-end'));
7576
if (currentTime >= start && currentTime <= end) {
7677
// move all previous highlights before adding one to current span
77-
$('.able-highlight').removeClass('able-highlight');
78+
thisObj.$transcriptArea.find('.able-highlight').removeClass('able-highlight');
7879
$(this).addClass('able-highlight');
7980
return false;
8081
}

0 commit comments

Comments
 (0)