Skip to content

Commit 0e28ea2

Browse files
terrillterrill
committed
Add support for <i> and <b> in captions and transcript
1 parent 2532ee4 commit 0e28ea2

11 files changed

Lines changed: 212 additions & 34 deletions

File tree

‎build/ableplayer.dist.js‎

Lines changed: 62 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2278,7 +2278,6 @@
22782278
if (typeof cueId === 'undefined') {
22792279
cueId = state.cues.length + 1;
22802280
}
2281-
22822281
state.cues.push({
22832282
id: cueId,
22842283
start: startTime,
@@ -2308,7 +2307,6 @@
23082307
if (nextLine.indexOf('-->') !== -1 || /^\s*$/.test(nextLine)) {
23092308
break; // Handle empty cues
23102309
}
2311-
23122310
// Have to separately detect double-lines ending cue due to our non-standard parsing.
23132311
// TODO: Redo outer algorithm to conform to W3 spec?
23142312
if (state.text.length >= 2 && state.text[0] === '\n' && state.text[1] === '\n') {
@@ -2323,9 +2321,9 @@
23232321
}
23242322
else if (token.type === 'startTag') {
23252323
token.type = token.tagName;
2326-
// Define token.parent; added by Terrill to fix bug on Line 296
2324+
// Define token.parent; added by Terrill to fix bug end 'endTag' loop
23272325
token.parent = current;
2328-
if ($.inArray(token.tagName, ['c', 'i', 'b', 'u', 'ruby']) !== -1) {
2326+
if ($.inArray(token.tagName, ['i', 'b', 'u', 'ruby']) !== -1) {
23292327
if (languageStack.length > 0) {
23302328
current.language = languageStack[languageStack.length - 1];
23312329
}
@@ -2339,6 +2337,14 @@
23392337
current.children.push(token);
23402338
current = token;
23412339
}
2340+
else if (token.tagName === 'c') {
2341+
token.value = token.annotation;
2342+
if (languageStack.length > 0) {
2343+
current.language = languageStack[languageStack.length - 1];
2344+
}
2345+
current.children.push(token);
2346+
current = token;
2347+
}
23422348
else if (token.tagName === 'v') {
23432349
token.value = token.annotation;
23442350
if (languageStack.length > 0) {
@@ -2359,7 +2365,7 @@
23592365
else if (token.type === 'endTag') {
23602366
if (token.tagName === current.type && $.inArray(token.tagName, ['c', 'i', 'b', 'u', 'ruby', 'rt', 'v']) !== -1) {
23612367
// NOTE from Terrill: This was resulting in an error because current.parent was undefined
2362-
// Fixed (I think) by assigning current token to token.parent on Line 260
2368+
// Fixed (I think) by assigning current token to token.parent in 'startTag' loop
23632369
current = current.parent;
23642370
}
23652371
else if (token.tagName === 'lang' && current.type === 'lang') {
@@ -8215,6 +8221,22 @@
82158221
// Takes a cue and returns the caption text to display for it.
82168222
AblePlayer.prototype.flattenCueForCaption = function (cue) {
82178223

8224+
// Support for 'i' and 'b' tags added in 2.3.66
8225+
// TODO: Add support for 'c' (class) and 'ruby'
8226+
8227+
// c (class): <c.myClass1.myClass2>Some text</c>
8228+
// Classes can be used to modify other tags too (e.g., <v.loud>)
8229+
// If <c> tag, should be rendered as a <span>
8230+
8231+
// ruby: http://www.w3schools.com/tags/tag_ruby.asp
8232+
8233+
// WebVTT also supports 'u' (underline)
8234+
// I see no reason to support that in Able Player.
8235+
// If it's available authors are likely to use it incorrectly
8236+
// where <i> or <b> should be used instead
8237+
// Here are the rare use cases where an underline is appropriate on the web:
8238+
// http://html5doctor.com/u-element/
8239+
82188240
var result = [];
82198241

82208242
var flattenComponent = function (component) {
@@ -8228,6 +8250,20 @@
82288250
result.push(flattenComponent(component.children[ii]));
82298251
}
82308252
}
8253+
else if (component.type === 'i') {
8254+
result.push('<em>');
8255+
for (var ii in component.children) {
8256+
result.push(flattenComponent(component.children[ii]));
8257+
}
8258+
result.push('</em>');
8259+
}
8260+
else if (component.type === 'b') {
8261+
result.push('<strong>');
8262+
for (var ii in component.children) {
8263+
result.push(flattenComponent(component.children[ii]));
8264+
}
8265+
result.push('</strong>');
8266+
}
82318267
else {
82328268
for (var ii in component.children) {
82338269
result.push(flattenComponent(component.children[ii]));
@@ -9041,11 +9077,15 @@
90419077
};
90429078

90439079
var addCaption = function(div, cap) {
9080+
90449081
var capSpan = $('<span class="able-transcript-seekpoint able-transcript-caption"></span>');
90459082

90469083
var flattenComponentForCaption = function(comp) {
9084+
90479085
var result = [];
9086+
90489087
var flattenString = function (str) {
9088+
90499089
var result = [];
90509090
if (str === '') {
90519091
return result;
@@ -9087,6 +9127,23 @@
90879127
}
90889128
}
90899129
}
9130+
else if (comp.type === 'b' || comp.type === 'i') {
9131+
if (comp.type === 'b') {
9132+
var $tag = $('<strong>');
9133+
}
9134+
else if (comp.type === 'i') {
9135+
var $tag = $('<em>');
9136+
}
9137+
for (var ii in comp.children) {
9138+
var subResults = flattenComponentForCaption(comp.children[ii]);
9139+
for (var jj in subResults) {
9140+
$tag.append(subResults[jj]);
9141+
}
9142+
}
9143+
if (comp.type === 'b' || comp.type == 'i') {
9144+
result.push($tag);
9145+
}
9146+
}
90909147
else {
90919148
for (var ii in comp.children) {
90929149
result = result.concat(flattenComponentForCaption(comp.children[ii]));
@@ -9106,7 +9163,6 @@
91069163
capSpan.append(result);
91079164
}
91089165
}
9109-
91109166
capSpan.attr('data-start', cap.start.toString());
91119167
capSpan.attr('data-end', cap.end.toString());
91129168
div.append(capSpan);

‎build/ableplayer.js‎

Lines changed: 62 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2278,7 +2278,6 @@
22782278
if (typeof cueId === 'undefined') {
22792279
cueId = state.cues.length + 1;
22802280
}
2281-
22822281
state.cues.push({
22832282
id: cueId,
22842283
start: startTime,
@@ -2308,7 +2307,6 @@
23082307
if (nextLine.indexOf('-->') !== -1 || /^\s*$/.test(nextLine)) {
23092308
break; // Handle empty cues
23102309
}
2311-
23122310
// Have to separately detect double-lines ending cue due to our non-standard parsing.
23132311
// TODO: Redo outer algorithm to conform to W3 spec?
23142312
if (state.text.length >= 2 && state.text[0] === '\n' && state.text[1] === '\n') {
@@ -2323,9 +2321,9 @@
23232321
}
23242322
else if (token.type === 'startTag') {
23252323
token.type = token.tagName;
2326-
// Define token.parent; added by Terrill to fix bug on Line 296
2324+
// Define token.parent; added by Terrill to fix bug end 'endTag' loop
23272325
token.parent = current;
2328-
if ($.inArray(token.tagName, ['c', 'i', 'b', 'u', 'ruby']) !== -1) {
2326+
if ($.inArray(token.tagName, ['i', 'b', 'u', 'ruby']) !== -1) {
23292327
if (languageStack.length > 0) {
23302328
current.language = languageStack[languageStack.length - 1];
23312329
}
@@ -2339,6 +2337,14 @@
23392337
current.children.push(token);
23402338
current = token;
23412339
}
2340+
else if (token.tagName === 'c') {
2341+
token.value = token.annotation;
2342+
if (languageStack.length > 0) {
2343+
current.language = languageStack[languageStack.length - 1];
2344+
}
2345+
current.children.push(token);
2346+
current = token;
2347+
}
23422348
else if (token.tagName === 'v') {
23432349
token.value = token.annotation;
23442350
if (languageStack.length > 0) {
@@ -2359,7 +2365,7 @@
23592365
else if (token.type === 'endTag') {
23602366
if (token.tagName === current.type && $.inArray(token.tagName, ['c', 'i', 'b', 'u', 'ruby', 'rt', 'v']) !== -1) {
23612367
// NOTE from Terrill: This was resulting in an error because current.parent was undefined
2362-
// Fixed (I think) by assigning current token to token.parent on Line 260
2368+
// Fixed (I think) by assigning current token to token.parent in 'startTag' loop
23632369
current = current.parent;
23642370
}
23652371
else if (token.tagName === 'lang' && current.type === 'lang') {
@@ -8215,6 +8221,22 @@
82158221
// Takes a cue and returns the caption text to display for it.
82168222
AblePlayer.prototype.flattenCueForCaption = function (cue) {
82178223

8224+
// Support for 'i' and 'b' tags added in 2.3.66
8225+
// TODO: Add support for 'c' (class) and 'ruby'
8226+
8227+
// c (class): <c.myClass1.myClass2>Some text</c>
8228+
// Classes can be used to modify other tags too (e.g., <v.loud>)
8229+
// If <c> tag, should be rendered as a <span>
8230+
8231+
// ruby: http://www.w3schools.com/tags/tag_ruby.asp
8232+
8233+
// WebVTT also supports 'u' (underline)
8234+
// I see no reason to support that in Able Player.
8235+
// If it's available authors are likely to use it incorrectly
8236+
// where <i> or <b> should be used instead
8237+
// Here are the rare use cases where an underline is appropriate on the web:
8238+
// http://html5doctor.com/u-element/
8239+
82188240
var result = [];
82198241

82208242
var flattenComponent = function (component) {
@@ -8228,6 +8250,20 @@
82288250
result.push(flattenComponent(component.children[ii]));
82298251
}
82308252
}
8253+
else if (component.type === 'i') {
8254+
result.push('<em>');
8255+
for (var ii in component.children) {
8256+
result.push(flattenComponent(component.children[ii]));
8257+
}
8258+
result.push('</em>');
8259+
}
8260+
else if (component.type === 'b') {
8261+
result.push('<strong>');
8262+
for (var ii in component.children) {
8263+
result.push(flattenComponent(component.children[ii]));
8264+
}
8265+
result.push('</strong>');
8266+
}
82318267
else {
82328268
for (var ii in component.children) {
82338269
result.push(flattenComponent(component.children[ii]));
@@ -9041,11 +9077,15 @@
90419077
};
90429078

90439079
var addCaption = function(div, cap) {
9080+
90449081
var capSpan = $('<span class="able-transcript-seekpoint able-transcript-caption"></span>');
90459082

90469083
var flattenComponentForCaption = function(comp) {
9084+
90479085
var result = [];
9086+
90489087
var flattenString = function (str) {
9088+
90499089
var result = [];
90509090
if (str === '') {
90519091
return result;
@@ -9087,6 +9127,23 @@
90879127
}
90889128
}
90899129
}
9130+
else if (comp.type === 'b' || comp.type === 'i') {
9131+
if (comp.type === 'b') {
9132+
var $tag = $('<strong>');
9133+
}
9134+
else if (comp.type === 'i') {
9135+
var $tag = $('<em>');
9136+
}
9137+
for (var ii in comp.children) {
9138+
var subResults = flattenComponentForCaption(comp.children[ii]);
9139+
for (var jj in subResults) {
9140+
$tag.append(subResults[jj]);
9141+
}
9142+
}
9143+
if (comp.type === 'b' || comp.type == 'i') {
9144+
result.push($tag);
9145+
}
9146+
}
90909147
else {
90919148
for (var ii in comp.children) {
90929149
result = result.concat(flattenComponentForCaption(comp.children[ii]));
@@ -9106,7 +9163,6 @@
91069163
capSpan.append(result);
91079164
}
91089165
}
9109-
91109166
capSpan.attr('data-start', cap.start.toString());
91119167
capSpan.attr('data-end', cap.end.toString());
91129168
div.append(capSpan);

0 commit comments

Comments
 (0)