@playkit-js/transcript 3.1.0 → 3.2.0-canary.2-0254f9e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.1.0",
+  "version": "3.2.0-canary.2-0254f9e",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,
@@ -13,16 +13,10 @@
     "url": "git+https://github.com/kaltura/playkit-js-transcript.git"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.23.0",
-    "@typescript-eslint/parser": "^5.23.0",
     "conventional-github-releaser": "3.1.3",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
-    "documentation": "^13.2.5",
-    "husky": "^8.0.1",
-    "jest": "^28.1.0",
     "kaltura-player-js": "https://github.com/kaltura/kaltura-player-js.git#master",
-    "lint-staged": "^12.4.1",
     "preact": "^10.4.1",
     "prettier": "^2.6.2",
     "sass": "^1.54.3",
@@ -30,8 +24,7 @@
     "standard-version": "^9.3.2",
     "style-loader": "1.3.0",
     "ts-loader": "^9.3.0",
-    "tslint": "^6.1.3",
-    "typescript": "^4.6.4",
+    "typescript": "^4.9.4",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "webpack": "^5.72.1",
     "webpack-cli": "^4.9.2",
@@ -46,14 +39,13 @@
     "build": "webpack --mode production",
     "dev": "webpack-dev-server --mode development",
     "watch": "webpack --progress --color --watch --mode development",
-    "test": "jest",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "test:prepare": "yarn run build && yes | cp -i ./dist/playkit-transcript.js ./cypress/public/plugin.js",
+    "test:watch": "yarn run test:prepare && cypress open",
+    "test": "yarn run test:prepare && cypress run",
     "release": "standard-version",
     "pushTaggedRelease": "git push --follow-tags --no-verify origin master",
-    "eslint": "eslint . --color",
-    "commit:dist": "git add --force --all dist && (git commit -m 'chore: update dist' || exit 0)",
-    "docs:generate": "documentation build flow-typed/** src/** -f md -o docs/configuration.md",
-    "docs:serve": "documentation serve flow-typed/** src/** --watch",
-    "precommit": "lint-staged",
     "prettier:fix": "prettier --write ."
   },
   "publishConfig": {
@@ -77,6 +69,7 @@
   "dependencies": {
     "@playkit-js/common": "^1.0.7",
     "@playkit-js/ui-managers": "^1.3.1",
+    "cypress": "^12.3.0",
     "stream-browserify": "^3.0.0"
   },
   "kaltura": {

package/src/components/close-button/index.tsx

@@ -16,7 +16,7 @@ interface CloseButtonProps {
 
 export const CloseButton = withText(translates)((props: CloseButtonProps) => (
   <A11yWrapper onClick={props.onClick}>
-    <button className={styles.closeBtn} tabIndex={0} aria-label={props.closeLabel}>
+    <button className={styles.closeBtn} tabIndex={0} aria-label={props.closeLabel} data-testid="transcriptCloseButton">
       <Icon
         id="transcript-plugin-close-button"
         height={icons.BigSize}

package/src/components/plugin-button/plugin-button.tsx

@@ -12,16 +12,22 @@ interface PluginButtonProps {
   id: string;
   icon: string;
   label?: string;
+  dataTestId?: string;
 }
 
-export const PluginButton = ({isActive, onClick, label, id, icon}: PluginButtonProps) => {
+export const PluginButton = ({isActive, onClick, label, id, icon, dataTestId}: PluginButtonProps) => {
   return (
     <Tooltip label={label} type="bottom">
       <A11yWrapper onClick={onClick}>
-        <button aria-label={label} className={[ui.style.upperBarIcon, styles.pluginButton, isActive ? styles.active : ''].join(' ')}>
+        <button aria-label={label} className={[ui.style.upperBarIcon, styles.pluginButton, isActive ? styles.active : ''].join(' ')}
+                data-testid={dataTestId}>
           <Icon id={id} height={icons.BigSize} width={icons.BigSize} viewBox={`0 0 ${icons.BigSize} ${icons.BigSize}`} path={icon} />
         </button>
       </A11yWrapper>
     </Tooltip>
   );
 };
+
+PluginButton.defaultProps = {
+  dataTestId: "transcript_pluginButton"
+}

package/src/components/search/search.tsx

@@ -141,7 +141,8 @@ class SearchComponent extends Component<SearchProps, SearchState> {
     const {searchQuery, totalSearchResults, activeSearchIndex} = this.props;
     return (
       <div
-        className={[styles.searchWrapper, searchQuery || this.state.active ? styles.active : '', this.state.focused ? styles.focused : ''].join(' ')}>
+        className={[styles.searchWrapper, searchQuery || this.state.active ? styles.active : '', this.state.focused ? styles.focused : ''].join(' ')}
+        data-testid="transcript_searchBar">
         <div className={styles.searchIcon}>
           <svg
             width="32px"
@@ -174,7 +175,7 @@ class SearchComponent extends Component<SearchProps, SearchState> {
         />
         {searchQuery && (
           <A11yWrapper onClick={this._onClear}>
-            <button className={styles.clearIcon} tabIndex={0} aria-label={this.props.clearSearchLabel}>
+            <button className={styles.clearIcon} tabIndex={0} aria-label={this.props.clearSearchLabel} data-testid="transcript_clearSearchButton">
               <svg
                 width="32px"
                 height="32px"
@@ -193,7 +194,7 @@ class SearchComponent extends Component<SearchProps, SearchState> {
           </A11yWrapper>
         )}
         {searchQuery && (
-          <div className={styles.searchResults} aria-live="polite" aria-label={this.props.searchResultsLabel}>{`${
+          <div className={styles.searchResults} aria-live="polite" aria-label={this.props.searchResultsLabel} data-testid="transcript_searchResultLabel">{`${
             totalSearchResults > 0 ? `${activeSearchIndex}/${totalSearchResults}` : '0/0'
           }`}</div>
         )}

package/src/components/transcript/transcript.tsx

@@ -379,7 +379,8 @@ export class TranscriptComponent extends Component<TranscriptProps, TranscriptSt
         ref={node => {
           this._widgetRootRef = node;
         }}
-        onKeyUp={this._handleEsc}>
+        onKeyUp={this._handleEsc}
+        data-testid="transcript_root">
         <div className={styles.globalContainer}>
           {this._renderHeader()}
 
@@ -391,7 +392,8 @@ export class TranscriptComponent extends Component<TranscriptProps, TranscriptSt
             onScroll={this._onScroll}
             ref={node => {
               this._transcriptListRef = node;
-            }}>
+            }}
+            data-testid="transcript_list">
             {isLoading ? this._renderLoading() : this._renderTranscript()}
           </div>
           {renderTranscriptButtons && this._renderScrollToButton()}

package/src/transcript-plugin.tsx

@@ -86,10 +86,6 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
         this.eventManager.listen(this.player, this.player.Event.TIMED_METADATA_CHANGE, this._onTimedMetadataChange);
         this.eventManager.listen(this.player, this.player.Event.TIMED_METADATA_ADDED, this._onTimedMetadataAdded);
         this.eventManager.listen(this.player, this.player.Event.TEXT_TRACK_CHANGED, this._handleLanguageChange);
-        this._addDownloadIcon();
-        this._addPrintIcon();
-        this._addTranscriptItem();
-        this._initLoading();
       }
     });
   }
@@ -131,6 +127,9 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
     });
     if (captionData.length) {
       this._addCaptionData(captionData);
+      this._addDownloadIcon();
+      this._addPrintIcon();
+      this._addTranscriptItem();
     }
   };
 
@@ -206,6 +205,7 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
   private _addDownloadIcon(): void {
     const {downloadDisabled} = this.config;
     if (this._downloadIcon > 0 || downloadDisabled) {
+      // download icon already exist or download disabled
       return;
     }
     const translate = {
@@ -216,13 +216,15 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
       svgIcon: {path: icons.DOWNLOAD_ICON, viewBox: `0 0 ${icons.BigSize} ${icons.BigSize}`},
       onClick: this._handleDownload,
       component: withText(translate)((props: {label: string}) => (
-        <PluginButton isActive={false} onClick={this._handleDownload} id={'download-transcript'} icon={icons.DOWNLOAD_ICON} label={props.label} />
+        <PluginButton isActive={false} onClick={this._handleDownload} id={'download-transcript'} icon={icons.DOWNLOAD_ICON} label={props.label}
+                      dataTestId="transcript_downloadButton" />
       ))
     }) as number;
   }
   private _addPrintIcon(): void {
     const {printDisabled} = this.config;
     if (this._printIcon > 0 || printDisabled) {
+      // print icon already exist or download disabled
       return;
     }
     const translate = {
@@ -233,13 +235,15 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
       svgIcon: {path: icons.PRINT_ICON, viewBox: `0 0 ${icons.BigSize} ${icons.BigSize}`},
       onClick: this._handlePrint,
       component: withText(translate)((props: {label: string}) => (
-        <PluginButton isActive={false} onClick={this._handlePrint} id={'print-transcript'} icon={icons.PRINT_ICON} label={props.label} />
+        <PluginButton isActive={false} onClick={this._handlePrint} id={'print-transcript'} icon={icons.PRINT_ICON} label={props.label}
+                      dataTestId="transcript_printButton" />
       ))
     }) as number;
   }
 
   private _addTranscriptItem(): void {
-    if (this._transcriptPanel > 0) {
+    if (Math.max(this._transcriptPanel, this._transcriptIcon) > 0) {
+      // transcript panel or icon already exist
       return;
     }
 
@@ -285,7 +289,8 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
         const isActive = this._isPluginActive();
         const label = isActive ? props.hideTranscript : props.showTranscript;
         return (
-          <PluginButton isActive={isActive} onClick={this._handleClickOnPluginIcon} id="transcript-icon" label={label} icon={icons.PLUGIN_ICON} />
+          <PluginButton isActive={isActive} onClick={this._handleClickOnPluginIcon} id="transcript-icon" label={label} icon={icons.PLUGIN_ICON}
+                        dataTestId="transcript_pluginButton" />
         );
       })
     }) as number;