diff --git a/cypress/e2e/env.ts b/cypress/e2e/env.ts
index 2b0a060..65f9261 100644
--- a/cypress/e2e/env.ts
+++ b/cypress/e2e/env.ts
@@ -45,7 +45,10 @@ export const clickClosePluginButton = () => {
cy.get('[data-testid="transcriptCloseButton"] button').click({force: true});
};
-const checkRequest = (reqBody: any, service: string, action: string) => {
+const checkRequest = (reqBody: any, service: string, action: string, captionAssetId?: string) => {
+ if (captionAssetId) {
+ return reqBody?.service === service && reqBody?.action === action && reqBody?.captionAssetId === captionAssetId;
+ }
return reqBody?.service === service && reqBody?.action === action;
};
@@ -54,8 +57,11 @@ export const mockKalturaBe = (entryFixture = 'vod-with-captions.json', captionsF
if (checkRequest(req.body[2], 'baseEntry', 'list')) {
return req.reply({fixture: entryFixture});
}
- if (checkRequest(req.body[2], 'caption_captionasset', 'serveAsJson')) {
+ if (checkRequest(req.body[2], 'caption_captionasset', 'serveAsJson', '1_nkiuwh50')) {
return req.reply({fixture: captionsFixture});
}
+ if (checkRequest(req.body[2], 'caption_captionasset', 'serveAsJson', '1_drrtkrgf')) {
+ return req.reply({fixture: 'captions-fr-response.json'});
+ }
});
};
diff --git a/cypress/e2e/transcript.cy.ts b/cypress/e2e/transcript.cy.ts
index ba6ee90..95eadfc 100644
--- a/cypress/e2e/transcript.cy.ts
+++ b/cypress/e2e/transcript.cy.ts
@@ -24,6 +24,8 @@ describe('Transcript plugin', () => {
cy.intercept('GET', '**/height/360/width/640', {fixture: '640.jpeg'});
// kava
cy.intercept('POST', '**/index.php?service=analytics*', {});
+ // caption asset
+ cy.intercept('GET', '**/service/caption_captionAsset/action/serve/**', {fixture: 'captions.vtt'});
});
describe('transcript', () => {
@@ -311,4 +313,51 @@ describe('Transcript plugin', () => {
});
});
});
+
+ describe('language change', () => {
+ it('should load first captions from list', () => {
+ mockKalturaBe();
+ cy.window().then($win => {
+ $win.localStorage.setItem('@playkit-js/kaltura-player-js_captionsDisplay', 'false');
+ loadPlayer().then(() => {
+ cy.contains('first caption').should('exist');
+ });
+ });
+ });
+
+ it('should load caption language from local-storage', () => {
+ mockKalturaBe();
+ cy.window().then($win => {
+ $win.localStorage.setItem('@playkit-js/kaltura-player-js_textLanguage', 'fi');
+ $win.localStorage.setItem('@playkit-js/kaltura-player-js_captionsDisplay', 'true');
+ loadPlayer().then(() => {
+ cy.contains('première légende').should('exist');
+ });
+ });
+ });
+
+ it('should switch captions when user selected another language', () => {
+ mockKalturaBe();
+ loadPlayer().then(() => {
+ cy.contains('first caption').should('exist');
+ cy.get('.playkit-control-settings > .playkit-tooltip > .playkit-control-button > .playkit-icon').click({force: true});
+ cy.get('#captionsActive').click({force: true});
+ cy.contains('Finnish').click({force: true});
+ cy.contains('première légende').should('exist');
+ });
+ });
+
+ it('should keep current caption language if user swtich captions off', () => {
+ mockKalturaBe();
+ cy.window().then($win => {
+ $win.localStorage.setItem('@playkit-js/kaltura-player-js_textLanguage', 'fi');
+ $win.localStorage.setItem('@playkit-js/kaltura-player-js_captionsDisplay', 'true');
+ loadPlayer().then(() => {
+ cy.contains('première légende').should('exist');
+ cy.get('.playkit-control-closed-captions > .playkit-tooltip > .playkit-control-button > .playkit-icon').click({force: true});
+ cy.contains('première légende').should('exist');
+ });
+ });
+ });
+ });
});
diff --git a/cypress/fixtures/captions-fr-response.json b/cypress/fixtures/captions-fr-response.json
new file mode 100644
index 0000000..366137b
--- /dev/null
+++ b/cypress/fixtures/captions-fr-response.json
@@ -0,0 +1,138 @@
+[
+ {
+ "partnerId": 1091,
+ "ks": "",
+ "userId": 0,
+ "objectType": "KalturaStartWidgetSessionResponse"
+ },
+ {
+ "objects": [
+ {
+ "startTime": 1000,
+ "endTime": 10000,
+ "content": [
+ {
+ "text": "première légende"
+ }
+ ]
+ },
+ {
+ "startTime": 12120,
+ "endTime": 14960,
+ "content": [
+ {
+ "text": "Quelles sont les trois chansons que vous\recommanderiez à quelqu'un -"
+ }
+ ]
+ },
+ {
+ "startTime": 15040,
+ "endTime": 18360,
+ "content": [
+ {
+ "text": "écouter de la musique pour la première fois"
+ }
+ ]
+ },
+ {
+ "startTime": 19680,
+ "endTime": 21000,
+ "content": [
+ {
+ "text": "Côté obscur."
+ }
+ ]
+ },
+ {
+ "startTime": 21080,
+ "endTime": 23960,
+ "content": [
+ {
+ "text": "Bombe à retardement.\n- Sur mon cadavre."
+ }
+ ]
+ },
+ {
+ "startTime": 24600,
+ "endTime": 28120,
+ "content": [
+ {
+ "text": "C'est toujours mon préféré.\n- C'est tout ce que vous avez besoin d'écouter."
+ }
+ ]
+ },
+ {
+ "startTime": 28200,
+ "endTime": 32800,
+ "content": [
+ {
+ "text": "Si vous n'étiez pas un groupe de Violent Pop,\n\"Groupe de Violent Bop\", -"
+ }
+ ]
+ },
+ {
+ "startTime": 32880,
+ "endTime": 34800,
+ "content": [
+ {
+ "text": "quel genre jouerais-tu ?"
+ }
+ ]
+ },
+ {
+ "startTime": 34880,
+ "endTime": 38400,
+ "content": [
+ {
+ "text": "Je rapperais, je ferais des trucs de trap."
+ }
+ ]
+ },
+ {
+ "startTime": 38480,
+ "endTime": 42280,
+ "content": [
+ {
+ "text": "Je ferais probablement du smooth jazz.\n- Aleksi serait DJ."
+ }
+ ]
+ },
+ {
+ "startTime": 42360,
+ "endTime": 45960,
+ "content": [
+ {
+ "text": "Ouais, Aleksi.\n- Aleksi serait producteur."
+ }
+ ]
+ },
+ {
+ "startTime": 46040,
+ "endTime": 49160,
+ "content": [
+ {
+ "text": "Avez-vous déjà eu de gros combats?"
+ }
+ ]
+ },
+ {
+ "startTime": 49240,
+ "endTime": 51480,
+ "content": [
+ {
+ "text": "Si oui, de quoi s’agissait-il?"
+ }
+ ]
+ },
+ {
+ "startTime": 51560,
+ "endTime": 55440,
+ "content": [
+ {
+ "text": "Je peux penser à un grand combat."
+ }
+ ]
+ }
+ ]
+ }
+]
diff --git a/cypress/fixtures/captions.vtt b/cypress/fixtures/captions.vtt
new file mode 100644
index 0000000..3d7aa15
--- /dev/null
+++ b/cypress/fixtures/captions.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:01.000 --> 00:00:10.000
+first caption
\ No newline at end of file
diff --git a/cypress/fixtures/vod-with-captions.json b/cypress/fixtures/vod-with-captions.json
index d75337e..bebf175 100644
--- a/cypress/fixtures/vod-with-captions.json
+++ b/cypress/fixtures/vod-with-captions.json
@@ -36,16 +36,6 @@
}
],
"playbackCaptions": [
- {
- "label": "Finnish",
- "format": "1",
- "language": "Finnish",
- "webVttUrl": "https://mock-captions/api_v3/index.php/service/caption_captionasset/action/serveWebVTT/captionAssetId/1_drrtkrgf/segmentIndex/-1/version/1/captions.vtt",
- "url": "https://mock-captions/api_v3/index.php/service/caption_captionAsset/action/serve/captionAssetId/1_drrtkrgf",
- "isDefault": true,
- "languageCode": "fi",
- "objectType": "KalturaCaptionPlaybackPluginData"
- },
{
"label": "English",
"format": "1",
@@ -55,6 +45,16 @@
"isDefault": false,
"languageCode": "en",
"objectType": "KalturaCaptionPlaybackPluginData"
+ },
+ {
+ "label": "Finnish",
+ "format": "1",
+ "language": "Finnish",
+ "webVttUrl": "https://mock-captions/api_v3/index.php/service/caption_captionasset/action/serveWebVTT/captionAssetId/1_drrtkrgf/segmentIndex/-1/version/1/captions.vtt",
+ "url": "https://mock-captions/api_v3/index.php/service/caption_captionAsset/action/serve/captionAssetId/1_drrtkrgf",
+ "isDefault": true,
+ "languageCode": "fi",
+ "objectType": "KalturaCaptionPlaybackPluginData"
}
],
"flavorAssets": [
diff --git a/src/transcript-plugin.tsx b/src/transcript-plugin.tsx
index 4f5ed5c..7bc0951 100644
--- a/src/transcript-plugin.tsx
+++ b/src/transcript-plugin.tsx
@@ -174,6 +174,10 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
const allTextTracks = this._getTextTracks();
const activeTextTrack = allTextTracks.find(track => track.active);
if (activeTextTrack?.language === 'off') {
+ if (this._activeCaptionMapId) {
+ // use current captions language
+ return this._activeCaptionMapId;
+ }
// use 1st captions from text-track list
return this._makeCaptionKey(allTextTracks[0]?.language, allTextTracks[0]?.label);
}