@playkit-js/transcript 2.1.4 → 2.1.5-canary.16-1ac3e09

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "2.1.4",
+  "version": "2.1.5-canary.16-1ac3e09",
+  "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,
   "bugs": {
@@ -11,67 +12,69 @@
     "type": "git",
     "url": "git+https://github.com/kaltura/playkit-js-transcript.git"
   },
-  "dependencies": {
-    "@playkit-js-contrib/cli": "1.1.0",
-    "@playkit-js-contrib/common": "^4.1.10",
-    "@playkit-js-contrib/plugin": "^4.1.13",
-    "@playkit-js-contrib/ui": "^4.1.13",
-    "classnames": "2.2.6",
-    "kaltura-typescript-client": "file:libs/kaltura-typescript-client-7.0.2-v20201028-171103.tgz",
-    "xml-js": "^1.6.11"
-  },
   "devDependencies": {
-    "@commitlint/cli": "8.3.5",
-    "@commitlint/config-conventional": "8.3.4",
-    "@types/classnames": "2.2.9",
-    "@types/node": "13.7.6",
-    "@typescript-eslint/eslint-plugin": "2.21.0",
-    "@typescript-eslint/parser": "2.21.0",
-    "conventional-github-releaser": "^3.1.3",
-    "husky": "3.1.0",
+    "@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",
+    "node-sass": "^7.0.1",
     "preact": "^10.4.1",
-    "tslint": "5.20.1",
-    "typescript": "3.8.2"
+    "prettier": "^2.6.2",
+    "sass-loader": "^12.6.0",
+    "standard-version": "^9.3.2",
+    "style-loader": "1.3.0",
+    "ts-loader": "^9.3.0",
+    "tslint": "^6.1.3",
+    "typescript": "^4.6.4",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "webpack": "^5.72.1",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.9.0"
+  },
+  "peerDependencies": {
+    "kaltura-player-js": "https://github.com/kaltura/kaltura-player-js.git#master"
   },
   "scripts": {
-    "clean": "rm -rf dist",
-    "reset": "npm run clean && rm -rf node_modules",
-    "build": "kcontrib build",
-    "build:dev": "kcontrib build --dev",
-    "bump-canary": "standard-version --prerelease canary --skip.commit=true --skip.tag=true",
-    "serve": "kcontrib serve",
-    "analyze": "npm run build && npx source-map-explorer dist/playkit-transcript.js",
-    "lint": "tsc --noEmit && eslint ./src --ext .ts,.tsx",
-    "lint:fix": "tsc --noEmit && eslint ./src --ext .ts,.tsx --fix",
-    "husky:pre-commit": "lint-staged",
-    "husky:commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
-    "deploy:prepare": "kcontrib deploy --prepare",
-    "contrib:latest": "kcontrib contrib --type=latest",
-    "infra:latest": "kcontrib infra --type=latest",
-    "infra:next": "kcontrib infra --type=next",
-    "infra:local": "kcontrib infra --type=local",
-    "infra:add": "kcontrib infra --add"
+    "clean": "rm -rf ./dist",
+    "prebuild": "npm run clean",
+    "build": "webpack --mode production",
+    "dev": "webpack-dev-server --mode development",
+    "watch": "webpack --progress --color --watch --mode development",
+    "test": "jest",
+    "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": {
     "access": "public"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
   "files": [
     "dist",
     "LICENSE",
     "README.md",
     "CHANGELOG.md",
     "src"
-  ]
+  ],
+  "keywords": [
+    "transcript",
+    "kaltura",
+    "player",
+    "playkit-js",
+    "playkit-js-transcript",
+    "html5 player"
+  ],
+  "dependencies": {
+    "stream-browserify": "^3.0.0"
+  }
 }

package/src/components/a11y-wrapper/a11y-wrapper.ts

@@ -0,0 +1,26 @@
+import {cloneElement, VNode} from 'preact';
+
+const {ENTER, SPACE} = KalturaPlayer.ui.utils.KeyMap;
+
+export type OnClickEvent = KeyboardEvent | MouseEvent;
+export type OnClick = (e: OnClickEvent, byKeyboard?: boolean) => void;
+
+interface A11yWrapperProps {
+  children: VNode;
+  onClick: OnClick;
+}
+
+export const A11yWrapper = ({children, onClick}: A11yWrapperProps) => {
+  return cloneElement(children, {
+    onKeyDown: (e: KeyboardEvent) => {
+      if ([SPACE, ENTER].includes(e.keyCode)) {
+        e.preventDefault();
+        onClick(e, true);
+      }
+    },
+    onClick: (e: MouseEvent) => {
+      e.stopPropagation();
+      onClick(e);
+    }
+  });
+};

package/src/components/a11y-wrapper/index.ts

@@ -0,0 +1 @@
+export * from './a11y-wrapper';

package/src/components/caption/caption.scss

@@ -75,4 +75,4 @@
       }
     }
   }
-}
+}

package/src/components/caption/caption.tsx

@@ -1,161 +1,139 @@
-import { h, Component } from "preact";
-import { KeyboardKeys } from "@playkit-js-contrib/ui";
-import * as styles from "./caption.scss";
-import { secontsToTime, CaptionItem } from "../../utils";
+import * as styles from './caption.scss';
+import {secontsToTime} from '../../utils';
+import {CuePointData} from '../../types';
+
+const {ENTER, Space} = KalturaPlayer.ui.utils.KeyMap;
+
+import {Component, h} from 'preact';
 
 export interface CaptionProps {
-    showTime: boolean;
-    searchLength: number;
-    scrollTo(el: HTMLElement): void;
-    scrollToSearchMatch(el: HTMLElement): void;
-    videoDuration: number;
+  showTime: boolean;
+  searchLength: number;
+  scrollTo(el: HTMLElement): void;
+  scrollToSearchMatch(el: HTMLElement): void;
+  videoDuration: number;
 }
 
 interface ExtendedCaptionProps extends CaptionProps {
-    caption: CaptionItem;
-    onClick(): void;
-    highlighted: boolean;
-    shouldScroll: boolean;
-    shouldScrollToSearchMatch: boolean;
-    indexMap: Record<string, number> | undefined;
-    activeSearchIndex: number;
-    longerThanHour: boolean;
-    isAutoScrollEnabled: boolean;
+  caption: CuePointData;
+  onClick: () => void;
+  highlighted: boolean;
+  shouldScroll: boolean;
+  shouldScrollToSearchMatch: boolean;
+  indexMap: Record<string, number> | undefined;
+  activeSearchIndex: number;
+  longerThanHour: boolean;
+  isAutoScrollEnabled: boolean;
 }
 
 export class Caption extends Component<ExtendedCaptionProps> {
-    private _hotspotRef: HTMLElement | null = null;
+  private _hotspotRef: HTMLElement | null = null;
 
-    componentDidUpdate() {
-        if (this._hotspotRef && this.props.shouldScroll) {
-            this.props.scrollTo(this._hotspotRef);
-        } else if (this._hotspotRef && this.props.shouldScrollToSearchMatch) {
-            this.props.scrollToSearchMatch(this._hotspotRef);
-        }
+  componentDidUpdate() {
+    if (this._hotspotRef && this.props.shouldScroll) {
+      this.props.scrollTo(this._hotspotRef);
+    } else if (this._hotspotRef && this.props.shouldScrollToSearchMatch) {
+      this.props.scrollToSearchMatch(this._hotspotRef);
     }
+  }
 
-    shouldComponentUpdate(nextProps: ExtendedCaptionProps) {
-        const {
-            indexMap,
-            highlighted,
-            isAutoScrollEnabled,
-            activeSearchIndex,
-            longerThanHour,
-        } = this.props;
-        if (longerThanHour !== nextProps.longerThanHour) {
-            return true;
-        }
-        if (highlighted !== nextProps.highlighted) {
-            return true;
-        }
-        if (highlighted && isAutoScrollEnabled !== nextProps.isAutoScrollEnabled) {
-            return true;
-        }
-        if (indexMap !== nextProps.indexMap) {
-            return true;
-        }
-        if (indexMap && nextProps.indexMap && indexMap[activeSearchIndex] !== nextProps.indexMap[nextProps.activeSearchIndex]) {
-            return true;
-        }
-        return false;
+  shouldComponentUpdate(nextProps: ExtendedCaptionProps) {
+    const {indexMap, highlighted, isAutoScrollEnabled, activeSearchIndex, longerThanHour, caption} = this.props;
+    if (longerThanHour !== nextProps.longerThanHour) {
+      return true;
     }
-
-    private _handleKeyPress = (event: KeyboardEvent) => {
-        const keyCode = event.which || event.keyCode;
-        if (
-            keyCode === KeyboardKeys.Enter ||
-            keyCode === KeyboardKeys.Space
-        ) {
-            event.preventDefault();
-            this._gotoCurrentTime();
-            return;
-        }
+    if (highlighted !== nextProps.highlighted) {
+      return true;
     }
-
-    private _handleClick = (event: MouseEvent) => {
-        event.stopPropagation();
-        this._hotspotRef?.focus();
-        this._gotoCurrentTime();
+    if (highlighted && isAutoScrollEnabled !== nextProps.isAutoScrollEnabled) {
+      return true;
+    }
+    if (indexMap !== nextProps.indexMap) {
+      return true;
     }
+    if (indexMap && nextProps.indexMap && indexMap[activeSearchIndex] !== nextProps.indexMap[nextProps.activeSearchIndex]) {
+      return true;
+    }
+    return false;
+  }
 
-    private _gotoCurrentTime = () => {
-        const { caption, onClick } = this.props;
-        if (caption.text.length) {
-            onClick();
-        }
+  private _handleKeyPress = (event: KeyboardEvent) => {
+    const keyCode = event.which || event.keyCode;
+    if (keyCode === ENTER || keyCode === Space) {
+      event.preventDefault();
+      this._gotoCurrentTime();
+      return;
     }
+  };
 
-    private _renderText = (text: string) => {
-        const { activeSearchIndex, searchLength, indexMap } = this.props;
-        let indexArray: string[] = [];
-        if (indexMap) {
-            indexArray = Object.keys(indexMap).sort((a, b) => Number(a) - Number(b));
-        }
-        if (text.length === 0) {
-            return null;
-        }
-        return (
-            <span className={styles.captionSpan}>
-                {indexMap
-                    ? indexArray.map((el: string, index: number) => {
-                          const preSelected = index === 0 ? text.substring(0, indexMap[el]) : "";
-                          const selected = text.substring(
-                              indexMap[el],
-                              indexMap[el] + searchLength
-                          );
-                          const postSelected = text.substring(
-                              indexMap[el] + searchLength,
-                              index - 1 === indexArray.length
-                                  ? text.length
-                                  : indexMap[indexArray[index + 1]]
-                          );
-                          return (
-                              <span>
-                                  {preSelected}
-                                  <span
-                                      className={
-                                          Number(el) === activeSearchIndex
-                                              ? styles.activeSearch
-                                              : styles.highlightSearch
-                                      }
-                                  >
-                                      {selected}
-                                  </span>
-                                  {postSelected}
-                              </span>
-                          );
-                      })
-                    : text}
-            </span>
-        );
-    };
+  private _handleClick = (event: MouseEvent) => {
+    event.stopPropagation();
+    this._hotspotRef?.focus();
+    this._gotoCurrentTime();
+  };
 
-    render() {
-        const { caption, highlighted, showTime, longerThanHour } = this.props;
-        const { text, startTime } = caption;
+  private _gotoCurrentTime = () => {
+    const {caption, onClick} = this.props;
+    if (caption.text.length) {
+      onClick();
+    }
+  };
 
-        return (
-            <div
-                className={styles.caption}
-                tabIndex={1}
-                ref={node => {
-                    this._hotspotRef = node;
-                }}
-                onKeyDown={this._handleKeyPress}
-            >
-                {showTime && (
-                    <div className={styles.captionTime}>
-                        {secontsToTime(startTime, longerThanHour)}
-                    </div>
-                )}
-                <div
-                    onClick={this._handleClick}
-                    className={`${styles.captionContent} ${highlighted ? styles.highlighted : ""} ${showTime ? "" : styles.withoutTime}`}
-                    role="button"
-                >
-                    {this._renderText(text)}
-                </div>
-            </div>
-        );
+  private _renderText = (text: string) => {
+    const {activeSearchIndex, searchLength, indexMap} = this.props;
+    let indexArray: string[] = [];
+    if (indexMap) {
+      indexArray = Object.keys(indexMap).sort((a, b) => Number(a) - Number(b));
+    }
+    if (text?.length === 0) {
+      return null;
     }
+    return (
+      <span className={styles.captionSpan}>
+        {indexMap
+          ? indexArray.map((el: string, index: number) => {
+              const preSelected = index === 0 ? text.substring(0, indexMap[el]) : '';
+              const selected = text.substring(indexMap[el], indexMap[el] + searchLength);
+              const postSelected = text.substring(
+                indexMap[el] + searchLength,
+                index - 1 === indexArray.length ? text.length : indexMap[indexArray[index + 1]]
+              );
+              return (
+                <span>
+                  {preSelected}
+                  <span className={Number(el) === activeSearchIndex ? styles.activeSearch : styles.highlightSearch}>{selected}</span>
+                  {postSelected}
+                </span>
+              );
+            })
+          : text}
+      </span>
+    );
+  };
+
+  render() {
+    const {caption, highlighted, showTime, longerThanHour} = this.props;
+    const {startTime, id} = caption;
+    const isHighlighted = Object.keys(highlighted)[0] === id;
+
+    return (
+      <div
+        className={styles.caption}
+        tabIndex={1}
+        ref={node => {
+          this._hotspotRef = node;
+        }}
+        onKeyDown={this._handleKeyPress}
+      >
+        {showTime && <div className={styles.captionTime}>{secontsToTime(startTime, longerThanHour)}</div>}
+        <div
+          onClick={this._handleClick}
+          className={`${styles.captionContent} ${isHighlighted ? styles.highlighted : ''} ${showTime ? '' : styles.withoutTime}`}
+          role="button"
+        >
+          {this._renderText(caption.text)}
+        </div>
+      </div>
+    );
+  }
 }

package/src/components/caption/index.ts

@@ -1 +1 @@
-export * from "./caption";
+export * from './caption';

package/src/components/caption-list/captionList.scss

@@ -1,9 +1,9 @@
 .transcript-wrapper {
-    position: absolute;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding-right: 9px;
-}
+  position: absolute;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-right: 9px;
+}