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

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

@@ -1,132 +1,130 @@
-import { h, Component } from "preact";
-import { ObjectUtils } from "@playkit-js-contrib/common";
-import { KeyboardKeys } from "@playkit-js-contrib/ui";
-import { Caption, CaptionProps } from "../caption";
-import * as styles from "./captionList.scss";
-import { CaptionItem, HOUR } from "../../utils";
+import {h, Component} from 'preact';
+import {HOUR} from '../../utils';
+import {Caption} from '../caption';
+import * as styles from './captionList.scss';
+import {HighlightedMap, CuePointData} from '../../types';
 
-const { get } = ObjectUtils;
+const {End, Home} = KalturaPlayer.ui.utils.KeyMap;
 
-interface CaptionListProps {
-    highlightedMap: Record<number, true>;
-    captions: CaptionItem[];
-    seekTo(caption: CaptionItem): void;
-    isAutoScrollEnabled: boolean;
-    searchMap: Record<number, Record<string, number>>;
-    activeSearchIndex: number;
-    captionProps: CaptionProps;
+export interface CaptionProps {
+  showTime: boolean;
+  searchLength: number;
+  scrollTo(el: HTMLElement): void;
+  scrollToSearchMatch(el: HTMLElement): void;
+  videoDuration: number;
 }
 
-export class CaptionList extends Component<CaptionListProps> {
-    private _currentCaptionRef: any = null;
-    private _firstCaptionRef: any = null;
-    private _lastCaptionRef: any = null;
-    shouldComponentUpdate(nextProps: Readonly<CaptionListProps>) {
-        const {
-            highlightedMap,
-            captions,
-            searchMap,
-            activeSearchIndex,
-            isAutoScrollEnabled,
-            captionProps
-        } = this.props
-        if (
-            highlightedMap !== nextProps.highlightedMap ||
-            captions !== nextProps.captions ||
-            searchMap !== nextProps.searchMap ||
-            activeSearchIndex !== nextProps.activeSearchIndex ||
-            isAutoScrollEnabled !== nextProps.isAutoScrollEnabled ||
-            captionProps.videoDuration !== nextProps.captionProps.videoDuration
-        ) {
-            return true;
-        }
-        return false;
+export interface Props {
+  data: Array<CuePointData>;
+  onSeek: (n: CuePointData) => void;
+  autoScroll?: boolean;
+  onScroll: (n: number) => void;
+  widgetWidth: number;
+  highlightedMap: HighlightedMap;
+  showItemsIcons: boolean;
+  listDataContainCaptions?: boolean;
+  searchActive: boolean;
+  isAutoScrollEnabled: boolean;
+  activeSearchIndex: number;
+  searchMap: Record<string, Record<string, number>>;
+  captionProps: CaptionProps;
+}
+export class CaptionList extends Component<Props> {
+  private _currentCaptionRef: any = null;
+  private _firstCaptionRef: any = null;
+  private _lastCaptionRef: any = null;
+  shouldComponentUpdate(nextProps: Readonly<Props>) {
+    const {highlightedMap, data, searchMap, activeSearchIndex, isAutoScrollEnabled, captionProps} = this.props;
+    if (
+      highlightedMap !== nextProps.highlightedMap ||
+      data !== nextProps.data ||
+      searchMap !== nextProps.searchMap ||
+      activeSearchIndex !== nextProps.activeSearchIndex ||
+      isAutoScrollEnabled !== nextProps.isAutoScrollEnabled ||
+      captionProps.videoDuration !== nextProps.captionProps.videoDuration
+    ) {
+      return true;
     }
+    return false;
+  }
 
-    private _handleClick = (caption: CaptionItem) => () => {
-        const { seekTo } = this.props;
-        seekTo(caption);
-    };
+  private _handleClick = (caption: CuePointData) => () => {
+    const {onSeek} = this.props;
+    onSeek(caption);
+  };
 
-    private _getShouldScroll = (captionId: number) => {
-        const { isAutoScrollEnabled, highlightedMap } = this.props;
-        return isAutoScrollEnabled && highlightedMap[captionId];
-    }
+  private _getShouldScroll = (captionId: string) => {
+    const {isAutoScrollEnabled, highlightedMap} = this.props;
+    return isAutoScrollEnabled && highlightedMap[captionId];
+  };
 
-    private _getShouldScrollToSearchMatch = (captionId: number) => {
-        const { isAutoScrollEnabled, searchMap, activeSearchIndex } = this.props;
-        return !isAutoScrollEnabled && (searchMap[captionId] && searchMap[captionId][activeSearchIndex] !== undefined);
-    }
+  private _getShouldScrollToSearchMatch = (captionId: string) => {
+    const {isAutoScrollEnabled, searchMap, activeSearchIndex} = this.props;
+    return !isAutoScrollEnabled && searchMap[captionId] && searchMap[captionId][activeSearchIndex] !== undefined;
+  };
 
-    private _getSearchProps = (captionId: number) => {
-        const { searchMap, activeSearchIndex, captionProps } = this.props;
-        const searchProps: any = {};
-        if (searchMap[captionId]) {
-            searchProps.indexMap = searchMap[captionId];
-            searchProps.activeSearchIndex = activeSearchIndex;
-            searchProps.searchLength = captionProps.searchLength;
-        }
-        return searchProps;
+  private _getSearchProps = (captionId: string) => {
+    const {searchMap, activeSearchIndex, captionProps} = this.props;
+    const searchProps: any = {};
+    if (searchMap[captionId]) {
+      searchProps.indexMap = searchMap[captionId];
+      searchProps.activeSearchIndex = activeSearchIndex;
+      searchProps.searchLength = captionProps.searchLength;
     }
+    return searchProps;
+  };
 
-    private _getCaptionProps = (captionData: CaptionItem) => {
-        const {
-            highlightedMap,
-            captionProps,
-            isAutoScrollEnabled
-        } = this.props;
-        const { id } = captionData;
-        const newCaptionProps = {
-            showTime: captionProps.showTime,
-            scrollTo: captionProps.scrollTo,
-            scrollToSearchMatch: captionProps.scrollToSearchMatch,
-            key: id,
-            onClick: this._handleClick(captionData),
-            caption: captionData,
-            highlighted: highlightedMap[id],
-            longerThanHour: captionProps.videoDuration >= HOUR,
-            shouldScroll: this._getShouldScroll(id),
-            shouldScrollToSearchMatch: this._getShouldScrollToSearchMatch(id),
-            isAutoScrollEnabled,
-            ...this._getSearchProps(id)
-        }
-        return newCaptionProps;
-    }
+  private _getCaptionProps = (captionData: CuePointData) => {
+    const {highlightedMap, captionProps, isAutoScrollEnabled} = this.props;
+    const {id}: {id: string} = captionData;
+    const newCaptionProps = {
+      showTime: captionProps.showTime,
+      scrollTo: captionProps.scrollTo,
+      scrollToSearchMatch: captionProps.scrollToSearchMatch,
+      key: id,
+      onClick: this._handleClick(captionData),
+      caption: captionData,
+      highlighted: highlightedMap,
+      longerThanHour: captionProps.videoDuration >= HOUR,
+      shouldScroll: this._getShouldScroll(id),
+      shouldScrollToSearchMatch: this._getShouldScrollToSearchMatch(id),
+      isAutoScrollEnabled,
+      ...this._getSearchProps(id)
+    };
+    return newCaptionProps;
+  };
 
-    private _handleKeyUp = (event: KeyboardEvent) => {
-        if (event.keyCode === KeyboardKeys.End) {
-            this._lastCaptionRef?._hotspotRef?.focus();
-        } else if (event.keyCode === KeyboardKeys.Home) {
-            this._firstCaptionRef?._hotspotRef?.focus();
-        }
+  private _handleKeyUp = (event: KeyboardEvent) => {
+    if (event.keyCode === End) {
+      this._lastCaptionRef?._hotspotRef?.focus();
+    } else if (event.keyCode === Home) {
+      this._firstCaptionRef?._hotspotRef?.focus();
     }
+  };
 
-    render() {
-        const { captions } = this.props;
-        return (
-            <div
-                className={styles.transcriptWrapper}
-                onKeyUp={this._handleKeyUp}
-            >
-                {captions.map((captionData, index) => {
-                    const captionProps = this._getCaptionProps(captionData);
-                    return (
-                        <Caption
-                            ref={node => {
-                                if (index === 0) {
-                                    this._firstCaptionRef = node;
-                                } else if (index === captions.length - 1) {
-                                    this._lastCaptionRef = node;
-                                }
-                                if (captionProps.highlighted) {
-                                    this._currentCaptionRef = node;
-                                }
-                            }}
-                            {...captionProps}
-                        />
-                    )
-                })}
-            </div>
-        );
-    }
+  render() {
+    const {data} = this.props;
+    return (
+      <div className={styles.transcriptWrapper} onKeyUp={this._handleKeyUp}>
+        {data.map((captionData, index) => {
+          const captionProps = this._getCaptionProps(captionData);
+          return (
+            <Caption
+              ref={node => {
+                if (index === 0) {
+                  this._firstCaptionRef = node;
+                } else if (index === data.length - 1) {
+                  this._lastCaptionRef = node;
+                }
+                if (captionProps.highlighted) {
+                  this._currentCaptionRef = node;
+                }
+              }}
+              {...captionProps}
+            />
+          );
+        })}
+      </div>
+    );
+  }
 }

package/src/components/caption-list/index.ts

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

package/src/components/close-button/close-button.scss

@@ -0,0 +1,11 @@
+.close-btn {
+  position: absolute;
+  top: 13px;
+  right: 14px;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}

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

@@ -0,0 +1,23 @@
+import {h} from 'preact';
+import * as styles from './close-button.scss';
+import {A11yWrapper} from '../a11y-wrapper/a11y-wrapper';
+import {icons} from '../icons';
+const {Icon} = KalturaPlayer.ui.components;
+
+interface CloseButtonProps {
+  onClick: () => void;
+}
+
+export const CloseButton = (props: CloseButtonProps) => (
+  <A11yWrapper onClick={props.onClick}>
+    <button className={styles.closeBtn} tabIndex={1}>
+      <Icon
+        id="transcript-plugin-close-button"
+        height={icons.BigSize}
+        width={icons.BigSize}
+        viewBox={`0 0 ${icons.BigSize} ${icons.BigSize}`}
+        path={icons.CLOSE_ICON}
+      />
+    </button>
+  </A11yWrapper>
+);

package/src/components/download-print-menu/download-print-menu.scss

@@ -1,55 +1,56 @@
-@import "../../variables.scss";
+@import '../../variables.scss';
 
 .download-print-button {
-    display: inline-block;
-    width: 36px;
-    height: 36px;
-    color: $white-color;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    opacity: 0.8;
-    background: none;
-    &:hover,
+  display: inline-block;
+  width: 36px;
+  height: 36px;
+  color: $white-color;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  background: none;
+  border-radius: 4px;
+  outline-offset: 0 -1px;
+  &:hover,
+  &:active {
+    border-radius: 4px;
+    background-color: rgba(0, 0, 0, 0.8);
+  }
+  &:focus {
+    outline: 1px solid $focus-color;
+  }
+  .icon {
+    width: 100%;
+    height: 100%;
+    background-position: center;
+    background-size: cover;
+  }
+  .download-icon {
+    background-image: url('../../assets/download.svg');
     &:active {
-        border-radius: 4px;
-        background-color: rgba(0, 0, 0, 0.8);
-    }
-    &:focus {
-        outline: 1px solid $focus-color;
-    }
-    .icon {
-        width: 100%;
-        height: 100%;
-        background-position: center;
-        background-size: cover;
+      background-image: url('../../assets/download-over.svg');
     }
-    .download-icon {
-        background-image: url('../../assets/download.svg');
-         &:active {
-            background-image: url('../../assets/download-over.svg');
-         }
-    }
-    .print-icon {
-        background-image: url('../../assets/print.svg');
-         &:active {
-            background-image: url('../../assets/print-over.svg');
-         }
+  }
+  .print-icon {
+    background-image: url('../../assets/print.svg');
+    &:active {
+      background-image: url('../../assets/print-over.svg');
     }
+  }
 }
 .popover-menu-item {
-    display: flex;
-    align-items: center;
-    padding: 9px 24px 9px 16px;
-    white-space: nowrap;
-    min-height: 30px;
-    line-height: 18px;
-    font-size: 15px;
-    &:hover {
-        cursor: pointer;
-        background-color: $semigray-color;
-    }
-    &:focus {
-        outline: 1px solid $focus-color;
-    }
-  }
+  display: flex;
+  align-items: center;
+  padding: 9px 24px 9px 16px;
+  white-space: nowrap;
+  min-height: 30px;
+  line-height: 18px;
+  font-size: 15px;
+  &:hover {
+    cursor: pointer;
+    background-color: $semigray-color;
+  }
+  &:focus {
+    outline: 1px solid $focus-color;
+  }
+}