Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vtt parse fix #476

Merged
merged 4 commits into from
Apr 25, 2024
Merged

Vtt parse fix #476

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d571b7c
Skip STYLE, REGION blocks when parsing VTT for transcript
Dananji Apr 8, 2024
a31ada2
Add automated tests for parsing, parse comments to display in transcr…
Dananji Apr 8, 2024
997c236
Fix failing tests, add new tests for invalid WebVTT handling in trans…
Dananji Apr 9, 2024
67bb0f5
Add sample vtt file for demo content
Dananji Apr 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 25 additions & 4 deletions public/lunchroom_manners/lunchroom_manners.vtt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,37 @@
WEBVTT

region
id:bill
width:40%
lines:3
regionanchor:100%,100%
viewportanchor:90%,90%
scroll:up

STYLE
::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
/* Style blocks cannot use blank lines nor "dash dash greater than" */

NOTE
This file was machine-generated.
The cues and timing maybe not 100% accurate.

1
00:00:01.200 --> 00:00:21.000
00:00:01.200 --> 00:00:21.000 region:fred align:left
[music]

NOTE End of music, and starting dialog

2
00:00:22.200 --> 00:00:26.600
Just before lunch one day, a puppet show
00:00:22.200 --> 00:00:26.600 region:bill align:right
<em>Just</em> before lunch one day, a puppet show
was put on at school.

3
00:00:26.700 --> 00:00:31.500
00:00:26.700 --> 00:00:31.500 region:fred align:left
It was called "Mister Bungle Goes to Lunch".

4
Expand Down
72 changes: 42 additions & 30 deletions src/components/Transcript/Transcript.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,13 @@ import {
parseTranscriptData,
sanitizeTranscripts,
TRANSCRIPT_TYPES,
TRANSCRIPT_CUE_TYPES,
} from '@Services/transcript-parser';
import './Transcript.scss';

const NO_TRANSCRIPTS_MSG = 'No valid Transcript(s) found, please check again.';
const INVALID_URL_MSG = 'Invalid URL for transcript, please check again.';
const INVALID_VTT = 'Invalid WebVTT file, please check again.';
const NO_SUPPORT = 'Transcript format is not supported, please check again.';

/**
Expand Down Expand Up @@ -231,6 +233,8 @@ const Transcript = ({ playerID, manifestUrl, transcripts = [] }) => {
newError = NO_TRANSCRIPTS_MSG;
} else if (tType === TRANSCRIPT_TYPES.noSupport) {
newError = NO_SUPPORT;
} else if (tType === TRANSCRIPT_TYPES.invalidTimedText) {
newError = INVALID_VTT;
}
setTranscript(tData);
setTranscriptInfo({ title, filename, id, isMachineGen, tType, tUrl, tFileExt, tError: newError });
Expand Down Expand Up @@ -374,37 +378,45 @@ const Transcript = ({ playerID, manifestUrl, transcripts = [] }) => {
case TRANSCRIPT_TYPES.timedText:
if (transcript.length > 0) {
transcript.map((t, index) => {
let line = (
<a
className="ramp--transcript_item"
data-testid="transcript_item"
key={`t_${index}`}
ref={(el) => (textRefs.current[index] = el)}
onClick={handleTranscriptChange}
onKeyDown={handleOnKeyPress}
starttime={t.begin} // set custom attribute: starttime
endtime={t.end} // set custom attribute: endtime
href={'#'}
role="listitem"
>
{t.begin && (
let line;
if (t.tag === TRANSCRIPT_CUE_TYPES.note) {
line = <span
className="ramp--transcript_text"
data-testid="transcript_text"
key={`ttext_${index}`}
dangerouslySetInnerHTML={{ __html: buildSpeakerText(t) }}
></span>;
} else if (t.tag === TRANSCRIPT_CUE_TYPES.timedCue) {
line = (
<a
className="ramp--transcript_item"
data-testid="transcript_item"
key={`t_${index}`}
ref={(el) => (textRefs.current[index] = el)}
onClick={handleTranscriptChange}
onKeyDown={handleOnKeyPress}
starttime={t.begin} // set custom attribute: starttime
endtime={t.end} // set custom attribute: endtime
href={'#'}
role="listitem"
>
{t.begin && (
<span
className="ramp--transcript_time"
data-testid="transcript_time"
key={`ttime_${index}`}
>
[{timeToHHmmss(t.begin, true)}]
</span>
)}
<span
className="ramp--transcript_time"
data-testid="transcript_time"
key={`ttime_${index}`}
>
[{timeToHHmmss(t.begin, true)}]
</span>
)}

<span
className="ramp--transcript_text"
data-testid="transcript_text"
key={`ttext_${index}`}
dangerouslySetInnerHTML={{ __html: buildSpeakerText(t) }}
/>
</a>
);
className="ramp--transcript_text"
data-testid="transcript_text"
key={`ttext_${index}`}
dangerouslySetInnerHTML={{ __html: buildSpeakerText(t) }}
/>
</a>);
}
timedText.push(line);
});
}
Expand Down
3 changes: 2 additions & 1 deletion src/components/Transcript/Transcript.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ a.ramp--transcript_item {
.ramp--transcript_machine_generated {
flex-basis: 100%;
margin: 0;
line-height: 1.5em;
}

.ramp--transcript_auto_scroll_check {
Expand Down Expand Up @@ -256,4 +257,4 @@ a.ramp--transcript_item {
100% {
opacity: 0;
}
}
}
137 changes: 132 additions & 5 deletions src/components/Transcript/Transcript.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,16 +39,19 @@ describe('Transcript component', () => {
begin: 1.2,
end: 21,
text: '[music]',
tag: 'TIMED_CUE'
},
{
begin: 22.2,
end: 26.6,
text: 'transcript text 1',
tag: 'TIMED_CUE'
},
{
begin: 27.3,
end: 31,
text: '<strong>transcript text 2</strong>',
tag: 'TIMED_CUE'
},
],
tUrl: 'http://example.com/transcript.json',
Expand Down Expand Up @@ -102,7 +105,82 @@ describe('Transcript component', () => {
});
});

describe('non timed-text', () => {
describe('with WebVTT including a header block', () => {
let parseTranscriptMock;
beforeEach(async () => {
const parsedData = {
tData: [
{
begin: 0,
end: 0,
text: 'NOTE<br />This is a multi-line comment.<br />Following is a list of cues.',
tag: 'NOTE'
},
{
begin: 1.2,
end: 21,
text: '[music]',
tag: 'TIMED_CUE'
},
{
begin: 22.2,
end: 26.6,
text: 'transcript text 1',
tag: 'TIMED_CUE'
},
{
begin: 27.3,
end: 31,
text: '<strong>transcript text 2</strong>',
tag: 'TIMED_CUE'
},
],
tUrl: 'http://example.com/transcript.vtt',
tType: transcriptParser.TRANSCRIPT_TYPES.timedText,
tFileExt: 'vtt',
};
parseTranscriptMock = jest
.spyOn(transcriptParser, 'parseTranscriptData')
.mockReturnValue(parsedData);

render(
<React.Fragment>
<video id="player-id" />
<Transcript {...props} />
</React.Fragment>
);
await act(() => Promise.resolve());
});
test('renders successfully', async () => {
await waitFor(() => {
expect(parseTranscriptMock).toHaveBeenCalledTimes(1);
expect(screen.queryByTestId('transcript_content_1')).toBeInTheDocument();
expect(screen.queryAllByTestId('transcript_time')).toHaveLength(3);
// One more than timestamps for displaying the comment
expect(screen.queryAllByTestId('transcript_text')).toHaveLength(4);
});
});

test('renders comment in the header block', async () => {
await waitFor(() => {
expect(screen.queryAllByTestId('transcript_text')[0]).toHaveTextContent(
'NOTEThis is a multi-line comment.Following is a list of cues.'
);
});
});

test('renders the rest of the cue with timestamp', async () => {
await waitFor(() => {
const transcriptItem = screen.queryAllByTestId('transcript_item')[1];
expect(transcriptItem).toHaveAttribute('starttime');
expect(transcriptItem).toHaveAttribute('endtime');
fireEvent.click(transcriptItem);
expect(transcriptItem.classList.contains('active')).toBeTruthy();
});
});
});

describe('with transcript as an annotation list', () => {
let parseTranscriptMock;
beforeEach(async () => {
const parsedData = {
Expand All @@ -111,16 +189,19 @@ describe('Transcript component', () => {
begin: null,
end: null,
text: '[music]',
tag: 'TIMED_CUE'
},
{
begin: null,
end: null,
text: 'transcript text 1',
tag: 'TIMED_CUE'
},
{
begin: null,
end: null,
text: '<strong>transcript text 2</strong>',
tag: 'TIMED_CUE'
},
],
tUrl: 'http://example.com/transcript.json',
Expand Down Expand Up @@ -266,8 +347,8 @@ describe('Transcript component', () => {
});
});

describe('renders a message with invalid transcript data', () => {
test('empty list of transcripts', () => {
describe('renders a message for', () => {
test('an empty list of transcripts', () => {
render(
<React.Fragment>
<Transcript playerID="player-id" transcripts={[]} />
Expand All @@ -281,7 +362,7 @@ describe('Transcript component', () => {
);
});

test('empty transcript item list', async () => {
test('an empty transcript item list', async () => {
const props = {
playerID: 'player-id',
transcripts: [
Expand Down Expand Up @@ -514,6 +595,49 @@ describe('Transcript component', () => {
);
});
});

test('invalid WebVTT file', async () => {
const props = {
playerID: 'player-id',
transcripts: [
{
canvasId: 0,
items: [
{
title: 'WebVTT Transcript',
url: 'https://example.com/lunchroom_manners.vtt',
},
],
},
],
};

const parseTranscriptMock = jest
.spyOn(transcriptParser, 'parseTranscriptData')
.mockReturnValue({
tData: [],
tUrl: 'https://example.com/lunchroom_manners.vtt',
tType: transcriptParser.TRANSCRIPT_TYPES.invalidTimedText,
});


render(
<React.Fragment>
<video id="player-id" />
<Transcript {...props} />
</React.Fragment>
);
await act(() => Promise.resolve());

await waitFor(() => {
expect(parseTranscriptMock).toHaveBeenCalledTimes(1);
expect(screen.queryByTestId('transcript_content_-3')).toBeInTheDocument();
expect(screen.queryByTestId('no-transcript')).toBeInTheDocument();
expect(screen.getByTestId('no-transcript')).toHaveTextContent(
'Invalid WebVTT file, please check again.'
);
});
});
});

describe('with props', () => {
Expand Down Expand Up @@ -558,7 +682,10 @@ describe('Transcript component', () => {
const parseTranscriptMock = jest
.spyOn(transcriptParser, 'parseTranscriptData')
.mockReturnValue({
tData: [{ begin: 1.2, end: 21, text: '[music]' }, { begin: 22.2, end: 26.6, text: 'transcript text 1' }],
tData: [
{ begin: 1.2, end: 21, text: '[music]', tag: 'TIMED_CUE' },
{ begin: 22.2, end: 26.6, text: 'transcript text 1', tag: 'TIMED_CUE' }
],
tUrl: 'http://example.com/webvtt-transcript.vtt',
tType: transcriptParser.TRANSCRIPT_TYPES.timedText,
tFileExt: 'vtt',
Expand Down
Loading