Merge pull request #3 from kaltura/FEC-13672-entry-name

fix(FEC-13672): use source metadata to display doc name
kaltura · Feb 1, 2024 · dba9dbf · dba9dbf
2 parents 901eb0c + 956a3ab
commit dba9dbf
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 28 deletions.
diff --git a/cypress/e2e/document-player.cy.ts b/cypress/e2e/document-player.cy.ts
@@ -1,21 +1,20 @@
-import {mockKalturaBe, loadEntry, loadPlaylist} from './env';
+import { mockKalturaBe, loadEntry, loadPlaylist } from './env';
 
 Cypress.on('uncaught:exception', (err, runnable) => {
   return false;
 });
 
 describe('Document player', () => {
-
   beforeEach(() => {
-    cy.intercept('GET', '**/mock-thumb/p/1091/**', {fixture: '640.jpeg'}).as("mockThumb");
+    cy.intercept('GET', '**/mock-thumb/p/1091/**', { fixture: '640.jpeg' }).as('mockThumb');
   });
 
   describe('document player engine', () => {
     it('should load document entry with thumbnail', () => {
       mockKalturaBe();
       loadEntry().then(() => {
         cy.get('[data-testid="doc-player-overlay"]').should('exist');
-        cy.wait("@mockThumb");
+        cy.wait('@mockThumb');
         cy.get('.playkit-seek-bar').should('not.exist');
         cy.get('.playkit-left-controls .playkit-playback-controls').should('not.exist');
         cy.get('.playkit-control-fullscreen').should('exist');
@@ -25,45 +24,53 @@ describe('Document player', () => {
       mockKalturaBe();
       loadPlaylist().then((kalturaPlayer) => {
         cy.get('[data-testid="doc-player-overlay"]').should('exist');
-        cy.wait("@mockThumb");
+        cy.wait('@mockThumb');
         cy.get('.playkit-seek-bar').should('exist');
         cy.get('.playkit-control-playlist-button').should('exist');
         cy.get('.playkit-control-fullscreen').should('exist');
-        cy.get('.playkit-control-play-pause').should('exist').then(() => {
-          expect(kalturaPlayer.paused).to.equal(false);
-        });
+        cy.get('.playkit-control-play-pause')
+          .should('exist')
+          .then(() => {
+            expect(kalturaPlayer.paused).to.equal(false);
+          });
       });
     });
   });
 
   describe('document player configuration', () => {
     it('should load document entry with preview', () => {
       mockKalturaBe();
-      loadEntry({ basePreviewUrl: "http://test-preview-url/"}).then(() => {
+      loadEntry({ basePreviewUrl: 'http://test-preview-url/' }).then(() => {
         cy.window().then((win) => {
-          cy.stub(win, 'open').as('previewUrl')
+          cy.stub(win, 'open').as('previewUrl');
+          cy.get('[data-testid="doc-player-text-wrapper"]').should('have.text', 'Click to view Accessibility Deck - latest presentation');
           cy.get('[data-testid="doc-player-button"]').should('exist');
-          cy.get('[data-testid="doc-player-button"]').should('have.text', "View document");
+          cy.get('[data-testid="doc-player-button"]').should('have.text', 'View document');
           cy.get('[data-testid="doc-player-button"]').click({ force: true });
-          cy.get('@previewUrl').should('have.been.calledOnceWithExactly', "http://test-preview-url/0_wifqaipd", "_blank");
-      })
+          cy.get('@previewUrl').should('have.been.calledOnceWithExactly', 'http://test-preview-url/0_wifqaipd', '_blank');
+        });
       });
     });
 
     it('should load document entry with download', () => {
       mockKalturaBe();
       loadEntry({ downloadDisabled: false }).then(() => {
-        cy.intercept('GET', 'https://mock-download-document/1', { statusCode: 200}).as("downloadUrl");
+        cy.intercept('GET', 'https://mock-download-document/1', { statusCode: 200 }).as('downloadUrl');
+        cy.get('[data-testid="doc-player-text-wrapper"]').should(
+          'have.text',
+          'Accessibility Deck - latest presentation is unavailable, download to view.'
+        );
         cy.get('[data-testid="doc-player-button"]').should('exist');
-        cy.get('[data-testid="doc-player-button"]').should('have.text', "Download document");
+        cy.get('[data-testid="doc-player-button"]').should('have.text', 'Download document');
         cy.get('[data-testid="doc-player-button"]').click({ force: true });
-        cy.wait("@downloadUrl");
+        cy.wait('@downloadUrl');
       });
     });
 
     it('should load document entry without preview and download', () => {
       mockKalturaBe();
       loadEntry({ downloadDisabled: true }).then(() => {
+        cy.get('[data-testid="doc-player-text-wrapper"]').should('have.text', 'Accessibility Deck - latest presentation is unavailable to view.');
         cy.get('[data-testid="doc-player-overlay"]').should('exist');
         cy.get('[data-testid="doc-player-button"]').should('not.exist');
       });

diff --git a/src/components/doc-overlay/doc-overlay.tsx b/src/components/doc-overlay/doc-overlay.tsx
@@ -8,11 +8,11 @@ import * as styles from './doc-overlay.scss';
 const { withText, Text } = ui.preacti18n;
 
 const translates = {
-  previewText: <Text id="docPlayer.previewText">Click to view Supply & Demand</Text>,
+  previewText: <Text id="docPlayer.previewText">Click to view</Text>,
   previewButtonText: <Text id="docPlayer.previewButtonText">View document</Text>,
-  downloadText: <Text id="docPlayer.downloadText">Supply & Demand is unavailable, download to view.</Text>,
+  downloadText: <Text id="docPlayer.downloadText">is unavailable, download to view.</Text>,
   downloadButtonText: <Text id="docPlayer.downloadButtonText">Download document</Text>,
-  contentUnavailableText: <Text id="docPlayer.contentUnavailableText">Supply & Demand is unavailable to view.</Text>
+  contentUnavailableText: <Text id="docPlayer.contentUnavailableText">is unavailable to view.</Text>
 };
 
 export interface DocumentOverlayProps {
@@ -23,33 +23,36 @@ export interface DocumentOverlayProps {
   downloadText?: string;
   downloadButtonText?: string;
   contentUnavailableText?: string;
+  sourceName?: string;
 }
 
 export const DocumentOverlay = withText(translates)((props: DocumentOverlayProps) => {
   const getContent = (): { text: string; buttonText?: string; onClick?: () => void } => {
     if (props.onPreview) {
       return {
-        text: props.previewText!,
+        text: `${props.previewText!} ${props.sourceName}`,
         buttonText: props.previewButtonText!,
         onClick: props.onPreview
       };
     } else if (props.onDownload) {
       return {
-        text: props.downloadText!,
+        text: `${props.sourceName} ${props.downloadText!}`,
         buttonText: props.downloadButtonText!,
         onClick: props.onDownload
       };
     }
     return {
-      text: props.contentUnavailableText!
+      text: `${props.sourceName} ${props.contentUnavailableText!}`
     };
   };
 
   const content = getContent();
   return (
     <OverlayPortal>
       <div className={styles.docOverlay} data-testid="doc-player-overlay">
-        <div className={styles.docTextWrapper}>{content.text}</div>
+        <div className={styles.docTextWrapper} data-testid="doc-player-text-wrapper">
+          {content.text}
+        </div>
         {content.buttonText && (
           <Button onClick={content.onClick} type={ButtonType.primary} size={ButtonSize.medium} testId="doc-player-button">
             {content.buttonText}

diff --git a/src/doc-player.tsx b/src/doc-player.tsx
@@ -25,7 +25,11 @@ export class PlaykitJsDocumentPlugin extends core.BasePlugin {
 
   private docOverlayDisposer: (() => void) | null = null;
 
-  constructor(name: string, private player: any, private config: DocumentPlayerConfig) {
+  constructor(
+    name: string,
+    private player: any,
+    private config: DocumentPlayerConfig
+  ) {
     super(name, player, config);
     DocumentPlayerEngine.getPlayerWidth = (): number => {
       const playerState = this.player.ui.store.getState();
@@ -45,7 +49,9 @@ export class PlaykitJsDocumentPlugin extends core.BasePlugin {
   }
 
   private addUI(): void {
-    const docOverlayProps: DocumentOverlayProps = {};
+    const docOverlayProps: DocumentOverlayProps = {
+      sourceName: this.player.sources.metadata?.name
+    };
     if (this.config?.basePreviewUrl) {
       docOverlayProps.onPreview = (): void => this.onPreview(`${this.config?.basePreviewUrl}${this.player.sources.id}`);
     } else if (!this.config?.downloadDisabled) {

diff --git a/translations/en.i18n.json b/translations/en.i18n.json
@@ -1,11 +1,11 @@
 {
   "en": {
     "docPlayer": {
-      "previewText": "Click to view Supply & Demand",
+      "previewText": "Click to view",
       "previewButtonText": "View document",
-      "downloadText": "Supply & Demand is unavailable, download to view.",
+      "downloadText": "is unavailable, download to view.",
       "downloadButtonText": "Download document",
-      "contentUnavailableText": "Supply & Demand is unavailable to view."
+      "contentUnavailableText": "is unavailable to view."
     }
   }
 }