viaprog/shaka-player
1
0
Fork 0
mirror of https://github.com/shaka-project/shaka-player.git synced 2026-06-26 17:46:26 +03:00
Code Issues Packages Projects Releases Wiki Activity

Separate text parsing and display logic.

Browse Source 
Closes #796.
Closes #923.

Change-Id: Ifc2017b40a0fb570103f0fed7bc130aa24819e9f
This commit is contained in:
Sandra Lokshina
2017-06-05 14:56:16 -07:00
parent d70f78b5c7
commit c70367dc97
23 changed files with 1425 additions and 472 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/text/ttml_text_parser_unit.js
+169 -70
View File
@@ -17,19 +17,7 @@
describe('TtmlTextParser', function() {
/** @const */
var originalVTTCue = window.VTTCue;
afterAll(function() {
window.VTTCue = originalVTTCue;
});
beforeEach(function() {
window.VTTCue = function(start, end, text) {
this.startTime = start;
this.endTime = end;
this.text = text;
};
});
var Cue = shaka.text.Cue;
it('supports no cues', function() {
verifyHelper([],
@@ -55,21 +43,21 @@ describe('TtmlTextParser', function() {
// When xml:space="default", ignore whitespace outside tags.
verifyHelper(
[
{start: 62.03, end: 62.05, text: 'A B C'}
{start: 62.03, end: 62.05, payload: 'A B C'}
],
'<tt xml:space="default">' + ttBody + '</tt>',
{periodStart: 0, segmentStart: 0, segmentEnd: 0 });
// When xml:space="preserve", take them into account.
verifyHelper(
[
{start: 62.03, end: 62.05, text: '\n A B C \n '}
{start: 62.03, end: 62.05, payload: '\n A B C \n '}
],
'<tt xml:space="preserve">' + ttBody + '</tt>',
{periodStart: 0, segmentStart: 0, segmentEnd: 0 });
// The default value for xml:space is "default".
verifyHelper(
[
{start: 62.03, end: 62.05, text: 'A B C'}
{start: 62.03, end: 62.05, payload: 'A B C'}
],
'<tt>' + ttBody + '</tt>',
{periodStart: 0, segmentStart: 0, segmentEnd: 0 });
@@ -93,7 +81,7 @@ describe('TtmlTextParser', function() {
it('supports colon formatted time', function() {
verifyHelper(
[
{start: 62.05, end: 3723.2, text: 'Test'}
{start: 62.05, end: 3723.2, payload: 'Test'}
],
'<tt><body><p begin="01:02.05" ' +
'end="01:02:03.200">Test</p></body></tt>',
@@ -103,7 +91,7 @@ describe('TtmlTextParser', function() {
it('accounts for offset', function() {
verifyHelper(
[
{start: 69.05, end: 3730.2, text: 'Test'}
{start: 69.05, end: 3730.2, payload: 'Test'}
],
'<tt><body><p begin="01:02.05" ' +
'end="01:02:03.200">Test</p></body></tt>',
@@ -113,7 +101,7 @@ describe('TtmlTextParser', function() {
it('supports time in 0.00h 0.00m 0.00s format', function() {
verifyHelper(
[
{start: 3567.03, end: 5402.3, text: 'Test'}
{start: 3567.03, end: 5402.3, payload: 'Test'}
],
'<tt><body><p begin="59.45m30ms" ' +
'end="1.5h2.3s">Test</p></body></tt>',
@@ -123,7 +111,7 @@ describe('TtmlTextParser', function() {
it('supports time with frame rate', function() {
verifyHelper(
[
{start: 615.5, end: 663, text: 'Test'}
{start: 615.5, end: 663, payload: 'Test'}
],
'<tt xmlns:ttp="ttml#parameter" ' +
'ttp:frameRate="30"> ' +
@@ -137,7 +125,7 @@ describe('TtmlTextParser', function() {
it('supports time with frame rate multiplier', function() {
verifyHelper(
[
{start: 615.5, end: 663, text: 'Test'}
{start: 615.5, end: 663, payload: 'Test'}
],
'<tt xmlns:ttp="ttml#parameter" ' +
'ttp:frameRate="60" ' +
@@ -152,7 +140,7 @@ describe('TtmlTextParser', function() {
it('supports time with subframes', function() {
verifyHelper(
[
{start: 615.517, end: 663, text: 'Test'}
{start: 615.517, end: 663, payload: 'Test'}
],
'<tt xmlns:ttp="ttml#parameter" ' +
'ttp:frameRate="30" ' +
@@ -167,7 +155,7 @@ describe('TtmlTextParser', function() {
it('supports time in frame format', function() {
verifyHelper(
[
{start: 2.5, end: 10.01, text: 'Test'}
{start: 2.5, end: 10.01, payload: 'Test'}
],
'<tt xmlns:ttp="ttml#parameter" ' +
'ttp:frameRate="60" ' +
@@ -182,7 +170,7 @@ describe('TtmlTextParser', function() {
it('supports time in tick format', function() {
verifyHelper(
[
{start: 5, end: 6.02, text: 'Test'}
{start: 5, end: 6.02, payload: 'Test'}
],
'<tt xmlns:ttp="ttml#parameter" ' +
'ttp:frameRate="60" ' +
@@ -197,7 +185,7 @@ describe('TtmlTextParser', function() {
it('supports time with duration', function() {
verifyHelper(
[
{start: 62.05, end: 67.05, text: 'Test'}
{start: 62.05, end: 67.05, payload: 'Test'}
],
'<tt><body><p begin="01:02.05" ' +
'dur="5s">Test</p></body></tt>',
@@ -207,7 +195,12 @@ describe('TtmlTextParser', function() {
it('parses alignment from textAlign attribute of a region', function() {
verifyHelper(
[
{start: 62.05, end: 3723.2, text: 'Test', lineAlign: 'start'}
{
start: 62.05,
end: 3723.2,
payload: 'Test',
lineAlign: Cue.textAlign.START
}
],
'<tt xmlns:tts="ttml#styling">' +
'<layout>' +
@@ -223,7 +216,12 @@ describe('TtmlTextParser', function() {
it('parses alignment from <style> block with id on region', function() {
verifyHelper(
[
{start: 62.05, end: 3723.2, text: 'Test', lineAlign: 'end'}
{
start: 62.05,
end: 3723.2,
payload: 'Test',
lineAlign: Cue.textAlign.END
}
],
'<tt xmlns:tts="ttml#styling">' +
'<styling>' +
@@ -242,7 +240,12 @@ describe('TtmlTextParser', function() {
it('parses alignment from <style> block with id on p', function() {
verifyHelper(
[
{start: 62.05, end: 3723.2, text: 'Test', lineAlign: 'end'}
{
start: 62.05,
end: 3723.2,
payload: 'Test',
lineAlign: Cue.textAlign.END
}
],
'<tt xmlns:tts="ttml#styling">' +
'<styling>' +
@@ -261,7 +264,8 @@ describe('TtmlTextParser', function() {
it('supports size setting', function() {
verifyHelper(
[
{start: 62.05, end: 3723.2, text: 'Test', size: 50}
{
start: 62.05, end: 3723.2, payload: 'Test', size: 50}
],
'<tt xmlns:tts="ttml#styling">' +
'<layout>' +
@@ -278,7 +282,13 @@ describe('TtmlTextParser', function() {
function() {
verifyHelper(
[
{start: 62.05, end: 3723.2, text: 'Test', position: 50, line: 16}
{
start: 62.05,
end: 3723.2,
payload: 'Test',
position: 50,
line: 16
}
],
'<tt xmlns:tts="ttml#styling">' +
'<layout>' +
@@ -291,7 +301,13 @@ describe('TtmlTextParser', function() {
{periodStart: 0, segmentStart: 0, segmentEnd: 0 });
verifyHelper(
[
{start: 62.05, end: 3723.2, text: 'Test', position: 50, line: 16}
{
start: 62.05,
end: 3723.2,
payload: 'Test',
position: 50,
line: 16
}
],
'<tt xmlns:tts="ttml#styling">' +
'<layout>' +
@@ -305,7 +321,13 @@ describe('TtmlTextParser', function() {
{periodStart: 0, segmentStart: 0, segmentEnd: 0 });
verifyHelper(
[
{start: 62.05, end: 3723.2, text: 'Test', position: 50, line: 16}
{
start: 62.05,
end: 3723.2,
payload: 'Test',
position: 50,
line: 16
}
],
'<tt xmlns:tts="ttml#styling">' +
'<layout>' +
@@ -323,7 +345,13 @@ describe('TtmlTextParser', function() {
function() {
verifyHelper(
[
{start: 62.05, end: 3723.2, text: 'Test', position: 16, line: 50}
{
start: 62.05,
end: 3723.2,
payload: 'Test',
position: 16,
line: 50
}
],
'<tt xmlns:tts="ttml#styling">' +
'<layout>' +
@@ -337,7 +365,13 @@ describe('TtmlTextParser', function() {
{periodStart: 0, segmentStart: 0, segmentEnd: 0 });
verifyHelper(
[
{start: 62.05, end: 3723.2, text: 'Test', position: 16, line: 50}
{
start: 62.05,
end: 3723.2,
payload: 'Test',
position: 16,
line: 50
}
],
'<tt xmlns:tts="ttml#styling">' +
'<layout>' +
@@ -351,7 +385,13 @@ describe('TtmlTextParser', function() {
{periodStart: 0, segmentStart: 0, segmentEnd: 0 });
verifyHelper(
[
{start: 62.05, end: 3723.2, text: 'Test', position: 16, line: 50}
{
start: 62.05,
end: 3723.2,
payload: 'Test',
position: 16,
line: 50
}
],
'<tt xmlns:tts="ttml#styling">' +
'<layout>' +
@@ -365,10 +405,15 @@ describe('TtmlTextParser', function() {
{periodStart: 0, segmentStart: 0, segmentEnd: 0 });
});
it('supports vertical setting', function() {
it('supports writingDirection setting', function() {
verifyHelper(
[
{start: 62.05, end: 3723.2, text: 'Test', vertical: 'lr'}
{
start: 62.05,
end: 3723.2,
payload: 'Test',
writingDirection: Cue.writingDirection.VERTICAL_LEFT
}
],
'<tt xmlns:tts="ttml#styling">' +
'<layout>' +
@@ -382,7 +427,12 @@ describe('TtmlTextParser', function() {
{periodStart: 0, segmentStart: 0, segmentEnd: 0 });
verifyHelper(
[
{start: 62.05, end: 3723.2, text: 'Test', vertical: 'rl'}
{
start: 62.05,
end: 3723.2,
payload: 'Test',
writingDirection: Cue.writingDirection.VERTICAL_RIGHT
}
],
'<tt xmlns:tts="ttml#styling">' +
'<layout>' +
@@ -396,7 +446,12 @@ describe('TtmlTextParser', function() {
{periodStart: 0, segmentStart: 0, segmentEnd: 0 });
verifyHelper(
[
{start: 62.05, end: 3723.2, text: 'Test', vertical: 'lr'}
{
start: 62.05,
end: 3723.2,
payload: 'Test',
writingDirection: Cue.writingDirection.VERTICAL_LEFT
}
],
'<tt xmlns:tts="ttml#styling">' +
'<layout>' +
@@ -413,7 +468,7 @@ describe('TtmlTextParser', function() {
it('disregards empty divs and ps', function() {
verifyHelper(
[
{start: 62.05, end: 3723.2, text: 'Test'}
{start: 62.05, end: 3723.2, payload: 'Test'}
],
'<tt>' +
'<body>' +
@@ -426,7 +481,7 @@ describe('TtmlTextParser', function() {
{periodStart: 0, segmentStart: 0, segmentEnd: 0 });
verifyHelper(
[
{start: 62.05, end: 3723.2, text: 'Test'}
{start: 62.05, end: 3723.2, payload: 'Test'}
],
'<tt>' +
'<body>' +
@@ -453,14 +508,14 @@ describe('TtmlTextParser', function() {
it('inserts newline characters into <br> tags', function() {
verifyHelper(
[
{start: 62.05, end: 3723.2, text: 'Line1\nLine2'}
{start: 62.05, end: 3723.2, payload: 'Line1\nLine2'}
],
'<tt><body><p begin="01:02.05" ' +
'end="01:02:03.200">Line1<br/>Line2</p></body></tt>',
{periodStart: 0, segmentStart: 0, segmentEnd: 0 });
verifyHelper(
[
{start: 62.05, end: 3723.2, text: 'Line1\nLine2'}
{start: 62.05, end: 3723.2, payload: 'Line1\nLine2'}
],
'<tt><body><p begin="01:02.05" ' +
'end="01:02:03.200"><span>Line1<br/>Line2</span></p></body></tt>',
@@ -470,8 +525,14 @@ describe('TtmlTextParser', function() {
it('parses cue alignment from textAlign attribute', function() {
verifyHelper(
[
{start: 62.05, end: 3723.2, text: 'Test', lineAlign: 'start',
align: 'left', positionAlign: 'line-left'}
{
start: 62.05,
end: 3723.2,
payload: 'Test',
lineAlign: Cue.lineAlign.START,
textAlign: Cue.textAlign.LEFT,
positionAlign: Cue.positionAlign.LEFT
}
],
'<tt xmlns:tts="ttml#styling">' +
'<styling>' +
@@ -487,29 +548,49 @@ describe('TtmlTextParser', function() {
{periodStart: 0, segmentStart: 0, segmentEnd: 0 });
});
it('uses a workaround for browsers not supporting align=center', function() {
window.VTTCue = function(start, end, text) {
var align = 'middle';
Object.defineProperty(this, 'align', {
get: function() { return align; },
set: function(newValue) { if (newValue != 'center') align = newValue; }
});
this.startTime = start;
this.endTime = end;
this.text = text;
};
it('parses text style information', function() {
verifyHelper(
[
{start: 62.05, end: 3723.2, text: 'Test', lineAlign: 'center',
align: 'middle', position: 'auto', positionAlign: 'center'}
{
start: 62.05,
end: 3723.2,
payload: 'Test',
color: 'red',
backgroundColor: 'blue',
fontWeight: Cue.fontWeight.BOLD,
fontFamily: 'Times New Roman'
}
],
'<tt xmlns:tts="ttml#styling">' +
'<styling>' +
'<style xml:id="s1" tts:textAlign="center"/>' +
'<style xml:id="s1" tts:color="red" ' +
'tts:backgroundColor="blue" ' +
'tts:fontWeight="bold" ' +
'tts:fontFamily="Times New Roman"/>' +
'</styling>' +
'<layout xmlns:tts="ttml#styling">' +
'<region xml:id="subtitleArea" />' +
'</layout>' +
'<body region="subtitleArea">' +
'<p begin="01:02.05" end="01:02:03.200" style="s1">Test</p>' +
'</body>' +
'</tt>',
{periodStart: 0, segmentStart: 0, segmentEnd: 0 });
});
it('parses wrapping option', function() {
verifyHelper(
[
{
start: 62.05,
end: 3723.2,
payload: 'Test',
wrapLine: false
}
],
'<tt xmlns:tts="ttml#styling">' +
'<styling>' +
'<style xml:id="s1" tts:wrapOption="noWrap"/>' +
'</styling>' +
'<layout xmlns:tts="ttml#styling">' +
'<region xml:id="subtitleArea" />' +
@@ -535,24 +616,42 @@ describe('TtmlTextParser', function() {
for (var i = 0; i < cues.length; i++) {
expect(result[i].startTime).toBeCloseTo(cues[i].start, 3);
expect(result[i].endTime).toBeCloseTo(cues[i].end, 3);
expect(result[i].text).toBe(cues[i].text);
expect(result[i].payload).toBe(cues[i].payload);
// Workaround a bug in the compiler's externs.
// TODO: Remove when compiler is updated.
if (cues[i].align)
expect(/** @type {?} */ (result[i]).align).toBe(cues[i].align);
if (cues[i].textAlign)
expect(/** @type {?} */ (result[i]).textAlign).toBe(cues[i].textAlign);
if (cues[i].lineAlign)
expect(result[i].lineAlign).toBe(cues[i].lineAlign);
expect(/** @type {?} */ (result[i]).lineAlign).toBe(cues[i].lineAlign);
if (cues[i].positionAlign)
expect(result[i].positionAlign).toBe(cues[i].positionAlign);
expect(/** @type {?} */ (result[i]).positionAlign)
.toBe(cues[i].positionAlign);
if (cues[i].size)
expect(/** @type {?} */ (result[i]).size).toBe(cues[i].size);
if (cues[i].line)
expect(result[i].line).toBe(cues[i].line);
expect(/** @type {?} */ (result[i]).line).toBe(cues[i].line);
if (cues[i].position)
expect(/** @type {?} */ (result[i]).position).toBe(cues[i].position);
if (cues[i].vertical)
expect(result[i].vertical).toBe(cues[i].vertical);
expect(/** @type {?} */ (result[i]).writingDirection)
.toBe(cues[i].writingDirection);
if (cues[i].vertical)
expect(/** @type {?} */ (result[i]).lineInterpretation)
.toBe(cues[i].lineInterpretation);
if (cues[i].color)
expect(/** @type {?} */ (result[i]).color).toBe(cues[i].color);
if (cues[i].backgroundColor)
expect(/** @type {?} */ (result[i]).backgroundColor)
.toBe(cues[i].backgroundColor);
if (cues[i].fontWeight)
expect(/** @type {?} */ (result[i]).fontWeight)
.toBe(cues[i].fontWeight);
if (cues[i].fontFamily)
expect(/** @type {?} */ (result[i]).fontFamily)
.toBe(cues[i].fontFamily);
if (cues[i].wrapLine)
expect(/** @type {?} */ (result[i]).wrapLine).toBe(cues[i].wrapLine);
}
}