-
+
+
);
};
@@ -40,10 +52,20 @@ const VideoPlayer = ({ videoURL, onReady }) => {
VideoPlayer.propTypes = {
videoURL: PropTypes.string.isRequired,
onReady: PropTypes.func,
+ customOptions: PropTypes.shape({
+ showPlaybackMenu: PropTypes.bool,
+ showTranscripts: PropTypes.bool,
+ transcriptUrls: PropTypes.objectOf(PropTypes.string),
+ }),
};
VideoPlayer.defaultProps = {
onReady: null,
+ customOptions: {
+ showPlaybackMenu: false,
+ showTranscripts: false,
+ transcriptUrls: undefined,
+ },
};
export default VideoPlayer;
diff --git a/src/components/video/data/constants.js b/src/components/video/data/constants.js
new file mode 100644
index 0000000000..476ee71d93
--- /dev/null
+++ b/src/components/video/data/constants.js
@@ -0,0 +1 @@
+export const PLAYBACK_RATES = [0.75, 1, 1.25, 1.50, 2.0];
diff --git a/src/components/video/data/service.js b/src/components/video/data/service.js
new file mode 100644
index 0000000000..2d8acff75d
--- /dev/null
+++ b/src/components/video/data/service.js
@@ -0,0 +1,42 @@
+import { logError } from '@edx/frontend-platform/logging';
+import { convertToWebVtt, createWebVttFile } from './utils';
+
+const fetchAndAddTranscripts = async (transcriptUrls, player) => {
+ const transcriptPromises = Object.entries(transcriptUrls).map(([lang, url]) => fetch(url)
+ .then(response => {
+ if (!response.ok) {
+ logError(`Failed to fetch transcript for ${lang}`);
+ }
+ return response.json();
+ })
+ .then(transcriptData => {
+ const webVttData = convertToWebVtt(transcriptData);
+ const webVttFileUrl = createWebVttFile(webVttData);
+
+ player.addRemoteTextTrack({
+ kind: 'subtitles',
+ src: webVttFileUrl,
+ srclang: lang,
+ label: lang,
+ }, false);
+
+ // We are only catering to English transcripts for now as we don't have the option to change
+ // the transcript language yet.
+ if (lang === 'en') {
+ player.vjstranscribe({
+ urls: [webVttFileUrl],
+ });
+ }
+ })
+ .catch(error => {
+ logError(`Error fetching or processing transcript for ${lang}:`, error);
+ }));
+
+ try {
+ await Promise.all(transcriptPromises);
+ } catch (error) {
+ logError('Error fetching or processing transcripts:', error);
+ }
+};
+
+export { fetchAndAddTranscripts };
diff --git a/src/components/video/data/tests/service.test.js b/src/components/video/data/tests/service.test.js
new file mode 100644
index 0000000000..bb66cdeae7
--- /dev/null
+++ b/src/components/video/data/tests/service.test.js
@@ -0,0 +1,134 @@
+import { logError } from '@edx/frontend-platform/logging';
+import { fetchAndAddTranscripts } from '../service';
+import { convertToWebVtt, createWebVttFile } from '../utils';
+
+jest.mock('@edx/frontend-platform/logging', () => ({
+ logError: jest.fn(),
+}));
+
+jest.mock('../utils', () => ({
+ convertToWebVtt: jest.fn(),
+ createWebVttFile: jest.fn(),
+}));
+
+describe('fetchAndAddTranscripts', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('should fetch, convert, and add transcripts successfully', async () => {
+ const mockTranscriptUrls = {
+ en: 'https://example.com/en-transcript.json',
+ };
+
+ const mockTranscriptData = {
+ items: ['example'],
+ };
+
+ const mockWebVttData = 'WEBVTT\n\n1\n00:00:00.000 --> 00:00:05.000\nExample subtitle';
+ const mockWebVttFileUrl = 'https://example.com/en-transcript.vtt';
+
+ global.fetch = jest.fn().mockResolvedValue({
+ ok: true,
+ json: () => Promise.resolve(mockTranscriptData),
+ });
+
+ convertToWebVtt.mockReturnValue(mockWebVttData);
+ createWebVttFile.mockReturnValue(mockWebVttFileUrl);
+
+ const player = {
+ addRemoteTextTrack: jest.fn(),
+ vjstranscribe: jest.fn(),
+ };
+
+ await fetchAndAddTranscripts(mockTranscriptUrls, player);
+
+ expect(global.fetch).toHaveBeenCalledWith(mockTranscriptUrls.en);
+ expect(convertToWebVtt).toHaveBeenCalledWith(mockTranscriptData);
+ expect(createWebVttFile).toHaveBeenCalledWith(mockWebVttData);
+ expect(player.addRemoteTextTrack).toHaveBeenCalledWith(
+ {
+ kind: 'subtitles',
+ src: mockWebVttFileUrl,
+ srclang: 'en',
+ label: 'en',
+ },
+ false,
+ );
+ expect(player.vjstranscribe).toHaveBeenCalledWith({
+ urls: [mockWebVttFileUrl],
+ });
+ });
+
+ it('should log an error if the transcript fetch fails', async () => {
+ const mockTranscriptUrls = {
+ en: 'https://example.com/en-transcript.json',
+ };
+
+ global.fetch = jest.fn().mockResolvedValue({
+ ok: false,
+ });
+
+ const player = {
+ addRemoteTextTrack: jest.fn(),
+ vjstranscribe: jest.fn(),
+ };
+
+ await fetchAndAddTranscripts(mockTranscriptUrls, player);
+
+ expect(global.fetch).toHaveBeenCalledWith(mockTranscriptUrls.en);
+ expect(logError).toHaveBeenCalledWith('Failed to fetch transcript for en');
+ });
+
+ it('should log an error if JSON parsing or file creation fails', async () => {
+ const mockTranscriptUrls = {
+ en: 'https://example.com/en-transcript.json',
+ };
+
+ global.fetch = jest.fn().mockResolvedValue({
+ ok: true,
+ json: () => Promise.reject(new Error('Parsing error')),
+ });
+
+ const player = {
+ addRemoteTextTrack: jest.fn(),
+ vjstranscribe: jest.fn(),
+ };
+
+ await fetchAndAddTranscripts(mockTranscriptUrls, player);
+
+ expect(global.fetch).toHaveBeenCalledWith(mockTranscriptUrls.en);
+ expect(logError).toHaveBeenCalledWith(
+ 'Error fetching or processing transcript for en:',
+ expect.any(Error),
+ );
+ });
+
+ it('should log an error if there is an error during Promise.all', async () => {
+ const mockTranscriptUrls = {
+ en: 'https://example.com/en-transcript.json',
+ };
+
+ global.fetch = jest.fn().mockResolvedValue({
+ ok: true,
+ json: () => Promise.resolve({ items: [] }),
+ });
+
+ const player = {
+ addRemoteTextTrack: jest.fn(),
+ vjstranscribe: jest.fn(),
+ };
+
+ createWebVttFile.mockImplementation(() => {
+ throw new Error('File creation error');
+ });
+
+ await fetchAndAddTranscripts(mockTranscriptUrls, player);
+
+ expect(global.fetch).toHaveBeenCalledWith(mockTranscriptUrls.en);
+ expect(logError).toHaveBeenCalledWith(
+ 'Error fetching or processing transcript for en:',
+ expect.any(Error),
+ );
+ });
+});
diff --git a/src/components/video/data/tests/utils.test.js b/src/components/video/data/tests/utils.test.js
new file mode 100644
index 0000000000..a131128901
--- /dev/null
+++ b/src/components/video/data/tests/utils.test.js
@@ -0,0 +1,43 @@
+import { convertToWebVtt, createWebVttFile } from '../utils';
+
+describe('Video utils tests', () => {
+ it('should convert transcript data to WebVTT format correctly', () => {
+ const mockTranscriptData = {
+ start: [0, 5000],
+ end: [5000, 10000],
+ text: ['Hello
World', 'Goodbye'],
+ };
+
+ const expectedWebVtt = 'WEBVTT\n\n'
+ + '1\n'
+ + '00:00:00.000 --> 00:00:05.000\n'
+ + 'Hello World\n\n'
+ + '2\n'
+ + '00:00:05.000 --> 00:00:10.000\n'
+ + 'Goodbye\n\n';
+
+ const result = convertToWebVtt(mockTranscriptData);
+
+ expect(result).toBe(expectedWebVtt);
+ });
+ it('should create a Blob with correct MIME type and generate an Object URL', () => {
+ const mockWebVttContent = 'WEBVTT\n\n'
+ + '1\n'
+ + '00:00:00.000 --> 00:00:05.000\n'
+ + 'Hello World\n\n';
+
+ // Mock URL.createObjectURL
+ URL.createObjectURL = jest.fn().mockReturnValue('blob:https://example.com/12345');
+
+ const result = createWebVttFile(mockWebVttContent);
+
+ expect(URL.createObjectURL).toHaveBeenCalledTimes(1);
+ expect(URL.createObjectURL).toHaveBeenCalledWith(expect.any(Blob));
+ expect(result).toBe('blob:https://example.com/12345');
+
+ // Verify Blob properties
+ const blob = URL.createObjectURL.mock.calls[0][0];
+ expect(blob.type).toBe('text/vtt');
+ expect(blob.size).toBe(mockWebVttContent.length);
+ });
+});
diff --git a/src/components/video/data/utils.js b/src/components/video/data/utils.js
new file mode 100644
index 0000000000..d75d693e39
--- /dev/null
+++ b/src/components/video/data/utils.js
@@ -0,0 +1,28 @@
+export const convertToWebVtt = (transcriptData) => {
+ const formatTime = (timeInMilliseconds) => {
+ const pad = (num, size) => (`000${num}`).slice(size * -1);
+ const hours = Math.floor(timeInMilliseconds / 3600000);
+ const minutes = Math.floor((timeInMilliseconds % 3600000) / 60000);
+ const seconds = Math.floor((timeInMilliseconds % 60000) / 1000);
+ const milliseconds = timeInMilliseconds % 1000;
+ return `${pad(hours, 2)}:${pad(minutes, 2)}:${pad(seconds, 2)}.${pad(milliseconds, 3)}`;
+ };
+
+ const removeImageTags = (text) => text.replace(/
]*>/g, '');
+
+ const length = Math.min(transcriptData.start.length, transcriptData.end.length, transcriptData.text.length);
+
+ let webVtt = 'WEBVTT\n\n';
+ for (let index = 0; index < length; index++) {
+ webVtt += `${index + 1}\n`;
+ webVtt += `${formatTime(transcriptData.start[index])} --> ${formatTime(transcriptData.end[index])}\n`;
+ webVtt += `${removeImageTags(transcriptData.text[index])}\n\n`;
+ }
+
+ return webVtt;
+};
+
+export const createWebVttFile = (webVttContent) => {
+ const blob = new Blob([webVttContent], { type: 'text/vtt' });
+ return URL.createObjectURL(blob);
+};
diff --git a/src/components/video/tests/VideoJS.test.jsx b/src/components/video/tests/VideoJS.test.jsx
index 86eccc1226..8368cccfe7 100644
--- a/src/components/video/tests/VideoJS.test.jsx
+++ b/src/components/video/tests/VideoJS.test.jsx
@@ -2,6 +2,8 @@ import React from 'react';
import { VideoJS } from '..';
import { renderWithRouter } from '../../../utils/tests';
+jest.mock('videojs-vjstranscribe');
+
const hlsUrl = 'https://test-domain.com/test-prefix/id.m3u8';
const ytUrl = 'https://www.youtube.com/watch?v=oHg5SJYRHA0';
diff --git a/src/components/video/tests/VideoPlayer.test.jsx b/src/components/video/tests/VideoPlayer.test.jsx
index 3d760db27b..83d0cd4a38 100644
--- a/src/components/video/tests/VideoPlayer.test.jsx
+++ b/src/components/video/tests/VideoPlayer.test.jsx
@@ -1,13 +1,14 @@
import React from 'react';
import { waitFor } from '@testing-library/react';
-import { VideoPlayer } from '..';
+import { VideoPlayer } from '..'; // Assuming VideoPlayer is exported as named export
import { renderWithRouter } from '../../../utils/tests';
const hlsUrl = 'https://test-domain.com/test-prefix/id.m3u8';
const ytUrl = 'https://www.youtube.com/watch?v=oHg5SJYRHA0';
+const mp3Url = 'https://example.com/audio.mp3';
describe('Video Player component', () => {
- it('Renders Video Player components correctly.', async () => {
+ it('Renders Video Player components correctly for HLS videos.', async () => {
const { container } = renderWithRouter();
expect(container.querySelector('.video-player-container')).toBeTruthy();
await waitFor(() => expect(container.querySelector('.video-js-wrapper')).toBeTruthy());
@@ -22,4 +23,25 @@ describe('Video Player component', () => {
expect(container.querySelector('.vjs-big-play-centered')).toBeTruthy();
expect(container.querySelector('video-js')).toBeTruthy();
});
+
+ it('Renders Video Player components correctly for mp3 audio.', async () => {
+ const { container } = renderWithRouter();
+ expect(container.querySelector('.video-player-container')).toBeTruthy();
+ await waitFor(() => expect(container.querySelector('.video-js-wrapper')).toBeTruthy());
+ expect(container.querySelector('.vjs-big-play-centered')).toBeTruthy();
+ expect(container.querySelector('video-js')).toBeTruthy();
+ });
+
+ it('Renders Video Player components correctly with transcripts.', async () => {
+ const customOptions = {
+ showTranscripts: true,
+ transcriptUrls: { english: 'https://example.com/transcript-en.txt' },
+ };
+ const { container } = renderWithRouter();
+ expect(container.querySelector('.video-player-container-with-transcript')).toBeTruthy();
+ await waitFor(() => expect(container.querySelector('.video-js-wrapper')).toBeTruthy());
+ expect(container.querySelector('.vjs-big-play-centered')).toBeTruthy();
+ expect(container.querySelector('video-js')).toBeTruthy();
+ expect(container.querySelector('#vjs-transcribe')).toBeTruthy();
+ });
});