fix(ADA-1988): [ORS] - Playlist items - duration not read aloud by sc…

…reen reader (#71) Adding the video duration on aria-label of each playlist item. Using getDurationAsText from ui to get the duration with hour/minute/second solves ADA-1988
kaltura · Jan 6, 2025 · f0c385b · f0c385b
1 parent 81d0f8d
commit f0c385b
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 279 deletions.
diff --git a/cypress/e2e/playlist.cy.ts b/cypress/e2e/playlist.cy.ts
@@ -1,4 +1,3 @@
-// @ts-expect-error Module '"@playkit-js/kaltura-player-js"' has no exported member 'core'
 import {core} from '@playkit-js/kaltura-player-js';
 import {mockKalturaBe, loadPlayer, MANIFEST, MANIFEST_SAFARI} from './env';
 
@@ -49,7 +48,7 @@ describe('Playlist plugin', () => {
         cy.get('[data-testid="playlist_title"]').should('exist');
         cy.get('[data-testid="playlist_title"]').should('have.text', 'new playlist');
         cy.get('[data-testid="playlist_duration"]').should('exist');
-        cy.get('[data-testid="playlist_duration"]').should('have.text', '3 videos, 34 min 16 sec');
+        cy.get('[data-testid="playlist_duration"]').should('have.text', '3 videos, 17 min 27 sec');
       });
     });
     it('should render 3 playlist items', () => {

diff --git a/cypress/fixtures/playlist.json b/cypress/fixtures/playlist.json
@@ -58,5 +58,10 @@
       "thumbnailUrl": "https://cfvod.kaltura.com/p/27017/sp/2701700/thumbnail/entry_id/1_l4h9vq7r/version/100001",
       "objectType": "KalturaMediaEntry"
     }
-  ]
+  ],
+  {
+    "objectType": "KalturaUserEntryListResponse",
+    "objects": [],
+    "totalCount": 0
+  }
 ]
diff --git a/cypress/public/ui-conf.js b/cypress/public/ui-conf.js
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "prettier:fix": "prettier --write ."
   },
   "devDependencies": {
-    "@playkit-js/kaltura-player-js": "3.17.5",
+    "@playkit-js/kaltura-player-js": "3.17.31",
     "conventional-github-releaser": "3.1.3",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
@@ -43,7 +43,7 @@
     "webpack-dev-server": "^4.9.0"
   },
   "peerDependencies": {
-    "@playkit-js/kaltura-player-js": "^3.14.3-canary.0-99a98cb"
+    "@playkit-js/kaltura-player-js": "3.17.31"
   },
   "publishConfig": {
     "access": "public"
@@ -64,7 +64,7 @@
   },
   "dependencies": {
     "@playkit-js/common": "1.5.17",
-    "@playkit-js/playkit-js-ui": "^0.77.3",
-    "@playkit-js/ui-managers": "^1.3.11"
+    "@playkit-js/playkit-js-ui": "0.79.16",
+    "@playkit-js/ui-managers": "1.6.3"
   }
 }
diff --git a/src/components/playlist-item/index.tsx b/src/components/playlist-item/index.tsx
@@ -11,6 +11,9 @@ import {KalturaViewHistoryUserEntry, KalturaBaseEntry, Capabilities} from '../..
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
 const {Icon} = KalturaPlayer.ui.components;
 const {toHHMMSS} = KalturaPlayer.ui.utils;
+//@ts-ignore
+const {getDurationAsText} = KalturaPlayer.ui.utils
+const {withPlayer} = KalturaPlayer.ui.components;
 
 const PLACEHOLDER_IMAGE_SRC =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAASCAYAAAA6yNxSAAAAJklEQVR42u3OMQEAAAgDoJnc6BpjDyRgLrcpGgEBAQEBAQGBduABaVYs3Q5APwQAAAAASUVORK5CYII=';
@@ -23,7 +26,8 @@ const translates = ({}: PlaylistItemProps) => {
     document: <Text id="playlist.document_type">Document</Text>,
     toPlayAreaLabel: <Text id="playlist.play-item-area-label">Click to play:</Text>,
     currentlyPlaying: <Text id="playlist.currently-playing">Currently playing:</Text>,
-    playlistItemIndex: <Text id="playlist.playlist-item-index">Playlist item #</Text>
+    playlistItemIndex: <Text id="playlist.playlist-item-index">Playlist item #</Text>,
+    duration: <Text id="playlist.duration">duration</Text>
   };
 };
 
@@ -41,6 +45,8 @@ interface PlaylistItemProps {
   toPlayAreaLabel?: string;
   currentlyPlaying?: string;
   playlistItemIndex?: string;
+  duration?: string;
+  player: any
 }
 
 const MediaTypes = {
@@ -49,7 +55,7 @@ const MediaTypes = {
   Document: core.MediaType.DOCUMENT
 };
 
-export const PlaylistItem = withText(translates)(({item, active, onSelect, pluginMode, viewHistory, baseEntry, ...otherProps}: PlaylistItemProps) => {
+export const PlaylistItem = withPlayer(withText(translates)(({item, active, onSelect, pluginMode, viewHistory, baseEntry, ...otherProps}: PlaylistItemProps) => {
   const {sources, index} = item;
   const playlistItemIndex = index + 1;
   const playlistItemName = sources.metadata?.name;
@@ -161,7 +167,7 @@ export const PlaylistItem = withText(translates)(({item, active, onSelect, plugi
       <div
         title={`${otherProps.playlistItemIndex}${index + 1}. ${
           active ? otherProps.currentlyPlaying : otherProps.toPlayAreaLabel
-        } ${playlistItemName}`}
+        } ${playlistItemName} ${otherProps.duration}: ${getDurationAsText(sources.duration, otherProps.player.config.ui.locale)}`}
         className={[
           styles.playlistItem,
           pluginMode === PluginPositions.VERTICAL ? styles.vertical : styles.horizontal,
@@ -186,4 +192,4 @@ export const PlaylistItem = withText(translates)(({item, active, onSelect, plugi
       </div>
     </A11yWrapper>
   );
-});
+}));
diff --git a/src/playlist.tsx b/src/playlist.tsx
@@ -1,5 +1,4 @@
 import {h} from 'preact';
-// @ts-expect-error Module '"@playkit-js/kaltura-player-js"' has no exported member 'core'
 import {ui, core} from '@playkit-js/kaltura-player-js';
 import {OnClickEvent} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import {UpperBarManager, SidePanelsManager} from '@playkit-js/ui-managers';

diff --git a/translations/en.i18n.json b/translations/en.i18n.json
@@ -16,7 +16,8 @@
       "document_type": "Document",
       "play-item-area-label": "Click to play:",
       "currently-playing": "Currently playing:",
-      "playlist-item-index": "Playlist item #"
+      "playlist-item-index": "Playlist item #",
+      "duration": "duration"
     }
   }
 }