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

package/src/types/transcript-config.ts

@@ -0,0 +1,11 @@
+export interface TranscriptConfig {
+  expandOnFirstPlay: boolean;
+  showTime: boolean;
+  position: string;
+  scrollOffset: number; // distance between top border of transcript container and active caption on auto-scroll
+  searchDebounceTimeout: number; // debounce on search
+  searchNextPrevDebounceTimeout: number; // debounce on jump between prev/next search result
+  downloadDisabled: boolean; // disable download menu
+  printDisabled: boolean; // disable print menu
+  expandMode: string; // over or pushing the player
+}

package/src/types/transcript-item-data.ts

@@ -0,0 +1,29 @@
+export type HighlightedMap = Record<string, boolean>;
+
+export interface RawItemData {
+  content?: Array<{text: string}>;
+  cuePointType?: string;
+  label?: string;
+  language?: string;
+  text?: string;
+}
+
+export interface CuePointData {
+  id: string;
+  startTime: number;
+  displayTime?: number;
+  text: string;
+}
+
+export enum ItemTypes {
+  Caption = 'kalturaCaption'
+}
+
+export interface CuePoint {
+  startTime: number;
+  endTime?: number;
+  id: string;
+  type: string;
+  metadata: RawItemData;
+  text?: string;
+}

package/src/types/types-ui.ts

@@ -0,0 +1,11 @@
+export type OnClick = (e: KeyboardEvent | MouseEvent, byKeyboard?: boolean) => void;
+
+export enum PluginPositions {
+  HORIZONTAL = 'horizontal',
+  VERTICAL = 'vertical'
+}
+
+export enum PluginStates {
+  OPENED = 'opened',
+  CLOSED = 'closed'
+}

package/src/utils/debounce.ts

@@ -0,0 +1,36 @@
+type Procedure = (...args: any[]) => void;
+
+type Options = {
+  isImmediate: boolean;
+};
+
+export function debounce<F extends Procedure>(
+  func: F,
+  waitMilliseconds = 50,
+  options: Options = {
+    isImmediate: false
+  }
+): F {
+  let timeoutId: any;
+
+  return function (this: any, ...args: any[]) {
+    const doLater = () => {
+      timeoutId = undefined;
+      if (!options.isImmediate) {
+        func.apply(this, args);
+      }
+    };
+
+    const shouldCallNow = options.isImmediate && timeoutId === undefined;
+
+    if (timeoutId !== undefined) {
+      clearTimeout(timeoutId);
+    }
+
+    timeoutId = setTimeout(doLater, waitMilliseconds);
+
+    if (shouldCallNow) {
+      func.apply(this, args);
+    }
+  } as any;
+}

package/src/utils/index.ts

@@ -0,0 +1,4 @@
+export * from './utils';
+export * from './object-utils';
+export * from './debounce';
+export * from './popover/popover';

package/src/utils/object-utils.ts

@@ -0,0 +1,34 @@
+export class ObjectUtils {
+  public static get(obj: Record<string, any>, path: string, defaultValue: any): any {
+    function stringToPath(path: string) {
+      const output: any = [];
+      // Split to an array with dot notation
+      path.split('.').forEach(item => {
+        // Split to an array with bracket notation
+        item.split(/\[([^}]+)\]/g).forEach(key => {
+          // Push to the new array
+          if (key.length > 0) {
+            output.push(key);
+          }
+        });
+      });
+      return output;
+    }
+
+    // Get the path as an array
+    const pathArray = stringToPath(path);
+
+    let current = obj;
+
+    // For each item in the path, dig into the object
+    for (let i = 0; i < pathArray.length; i++) {
+      // If the item isn't found, return the default (or null)
+      if (!current[pathArray[i]]) return defaultValue;
+
+      // Otherwise, update the current value
+      current = current[pathArray[i]];
+    }
+
+    return current;
+  }
+}

package/src/utils/popover/popover.scss

@@ -0,0 +1,30 @@
+.popover-container {
+  position: relative;
+  .popover-component {
+    background-color: #222222;
+    border-radius: 4px;
+    position: absolute;
+    right: 0px;
+    font-size: 15px;
+    display: block;
+    &.visible {
+      visibility: visible;
+      opacity: 1;
+      z-index: 10;
+    }
+    &.top {
+      bottom: 100%;
+      margin-bottom: 6px;
+    }
+    &.bottom {
+      top: 100%;
+      margin-top: 6px;
+    }
+    &.right {
+      left: 0px;
+    }
+    &.left {
+      right: 0px;
+    }
+  }
+}

package/src/utils/popover/popover.tsx

@@ -0,0 +1,178 @@
+import {h, Component, ComponentChild} from 'preact';
+import * as styles from './popover.scss';
+
+const {ENTER, Esc} = KalturaPlayer.ui.utils.KeyMap;
+
+export enum PopoverVerticalPositions {
+  Top = 'top',
+  Bottom = 'bottom'
+}
+export enum PopoverHorizontalPositions {
+  Left = 'left',
+  Right = 'right'
+}
+export enum PopoverTriggerMode {
+  Click = 'click',
+  Hover = 'hover'
+}
+
+const CLOSE_ON_HOVER_DELAY = 500;
+
+const defaultProps = {
+  verticalPosition: PopoverVerticalPositions.Top,
+  horizontalPosition: PopoverHorizontalPositions.Left,
+  triggerMode: PopoverTriggerMode.Click,
+  className: 'popover',
+  closeOnEsc: true,
+  closeOnClick: true
+};
+
+interface PopoverProps {
+  onClose?: () => void;
+  onOpen?: () => void;
+  closeOnClick: boolean;
+  closeOnEsc: boolean;
+  verticalPosition: PopoverVerticalPositions;
+  horizontalPosition: PopoverHorizontalPositions;
+  className: string;
+  triggerMode: PopoverTriggerMode;
+  content: ComponentChild;
+  children: ComponentChild;
+}
+
+interface PopoverState {
+  open: boolean;
+}
+
+export class Popover extends Component<PopoverProps, PopoverState> {
+  private _closeTimeout: any = null;
+  private _controlElement: HTMLDivElement | null = null;
+  static defaultProps = {
+    ...defaultProps
+  };
+  state = {
+    open: false
+  };
+
+  componentWillUnmount() {
+    this._removeListeners();
+  }
+
+  private _clearTimeout = () => {
+    clearTimeout(this._closeTimeout);
+    this._closeTimeout = null;
+  };
+
+  private _handleMouseEvent = (event: MouseEvent) => {
+    if (!this._controlElement?.contains(event.target as Node | null) && this.props.closeOnClick) {
+      this._closePopover();
+    }
+  };
+
+  private _handleKeyboardEvent = (event: KeyboardEvent) => {
+    if (this._controlElement?.contains(event.target as Node | null) && event.keyCode === ENTER) {
+      // handle Enter key pressed on Target icon to prevent triggering of _closePopover twice
+      return;
+    }
+    if ((this.props.closeOnEsc && event.keyCode === Esc) || event.keyCode === ENTER) {
+      // handle if ESC or Enter button presesd
+      this._closePopover();
+    }
+  };
+
+  private _openPopover = () => {
+    const {onOpen} = this.props;
+    this._clearTimeout();
+    this.setState({open: true}, () => {
+      this._addListeners();
+      if (onOpen) {
+        onOpen();
+      }
+    });
+  };
+
+  private _closePopover = () => {
+    const {onClose} = this.props;
+    this._clearTimeout();
+    this.setState({open: false}, () => {
+      this._removeListeners();
+      if (onClose) {
+        onClose();
+      }
+    });
+  };
+
+  private _togglePopover = (e: MouseEvent | KeyboardEvent) => {
+    if (this.state.open) {
+      this._closePopover();
+    } else {
+      this._openPopover();
+    }
+  };
+  private _handleMouseEnter = () => {
+    if (!this.state.open) {
+      this._openPopover();
+    }
+  };
+  private _handleMouseLeave = () => {
+    this._closeTimeout = setTimeout(this._closePopover, CLOSE_ON_HOVER_DELAY);
+  };
+  private _handleHoverOnPopover = () => {
+    if (this.state.open && this._closeTimeout) {
+      this._clearTimeout();
+    } else {
+      this._closePopover();
+    }
+  };
+  private _addListeners = () => {
+    document.addEventListener('click', this._handleMouseEvent);
+    document.addEventListener('keydown', this._handleKeyboardEvent);
+  };
+  private _removeListeners = () => {
+    document.removeEventListener('click', this._handleMouseEvent);
+    document.removeEventListener('keydown', this._handleKeyboardEvent);
+  };
+  private _getHoverEvents = () => {
+    if (this.props.triggerMode === PopoverTriggerMode.Hover) {
+      return {
+        targetEvents: {
+          onMouseEnter: this._handleMouseEnter,
+          onMouseLeave: this._handleMouseLeave
+        },
+        popoverEvents: {
+          onMouseEnter: this._handleHoverOnPopover,
+          onMouseLeave: this._handleHoverOnPopover
+        }
+      };
+    }
+    return {targetEvents: {onClick: this._togglePopover}, popoverEvents: {}};
+  };
+  render(props: PopoverProps) {
+    if (!props.content || !props.children) {
+      return null;
+    }
+    const {targetEvents, popoverEvents} = this._getHoverEvents();
+    return (
+      <div className={styles.popoverContainer}>
+        <div
+          className="popover-anchor-container"
+          ref={node => {
+            this._controlElement = node;
+          }}
+          {...targetEvents}
+        >
+          {props.children}
+        </div>
+        {this.state.open && (
+          <div
+            aria-expanded="true"
+            className={[props.className, styles.popoverComponent, styles[props.verticalPosition], styles[props.horizontalPosition]].join(' ')}
+            {...popoverEvents}
+          >
+            {props.content}
+          </div>
+        )}
+      </div>
+    );
+  }
+}

package/src/utils/utils.ts

@@ -0,0 +1,86 @@
+export const HOUR = 3600; // seconds in 1 hour
+
+export const toSeconds = (val: any, vtt = false): number => {
+  const regex = vtt ? /(\d+):(\d{2}):(\d{2}).(\d{2,3}|\d{2})/ : /(\d+):(\d{2}):(\d{2}),((\d{2,3}|\d{2}|\d{1}))?/;
+  const parts: any | null[] = regex.exec(val);
+  if (parts === null) {
+    return 0;
+  }
+
+  for (var i = 1; i < 5; i++) {
+    parts[i] = parseInt(parts[i], 10);
+    if (isNaN(parts[i])) {
+      parts[i] = 0;
+    }
+  }
+  // hours + minutes + seconds + ms
+  return parts[1] * HOUR + parts[2] * 60 + parts[3] + parts[4] / 1000;
+};
+
+const pad = (number: number) => {
+  if (number < 10) {
+    return `0${number}`;
+  }
+  return number;
+};
+
+const makeHoursString = (seconds: number): string => {
+  const hours = Math.floor(seconds / HOUR);
+  if (hours >= 1) {
+    return `${hours}:`;
+  }
+  return '';
+};
+
+export const secontsToTime = (seconds: number, longerThanHour: boolean): string => {
+  const date = new Date(0);
+  date.setSeconds(seconds);
+  return `${longerThanHour ? makeHoursString(seconds) : ''}${pad(date.getUTCMinutes())}:${pad(date.getUTCSeconds())}`;
+};
+
+export function getConfigValue(value: any, condition: (value: any) => boolean, defaultValue: any) {
+  let result = defaultValue;
+  if (typeof condition === 'function' && condition(value)) {
+    result = value;
+  }
+  return result;
+}
+
+export function isBoolean(value: any) {
+  return typeof value === 'boolean';
+}
+
+export function makePlainText(captions: Array<CuePointData>): string {
+  return captions.reduce((acc: string, next: CuePointData) => {
+    return `${acc} ${next.text}`;
+  }, '');
+}
+
+import {CuePointData, CuePoint} from '../types';
+
+const {toHHMMSS} = KalturaPlayer.ui.utils;
+const MAX_CHARACTERS = 77;
+
+export const decodeString = (content: any): string => {
+  if (typeof content !== 'string') {
+    return content;
+  }
+  return content
+    .replace(/&lt;/gi, '<')
+    .replace(/&gt;/gi, '>')
+    .replace(/&nbsp;/gi, ' ')
+    .replace(/&amp;/gi, '&')
+    .replace(/&quot;/gi, '"');
+};
+
+export const prepareCuePoint = (cuePoint: CuePoint): CuePointData => {
+  const {metadata} = cuePoint;
+  const itemData: CuePointData = {
+    id: cuePoint.id,
+    startTime: cuePoint.startTime,
+    displayTime: Math.floor(cuePoint.startTime),
+    text: decodeString(metadata.text)
+  };
+
+  return itemData;
+};

package/src/variables.scss

@@ -1,6 +1,7 @@
 $main-color: #01accd;
 $white-color: #ffffff;
 $gray-color: #cccccc;
+$darken-gray: #444444;
 $darkgray-color: #333333;
 $semigray-color: #666666;
 $lightgray-color: #999999;
@@ -12,3 +13,16 @@ $text-selection-color: #5b80a7;
 $main-color-darken: darken($main-color, 10%);
 $root-background: #000000a1;
 $focus-color: #00cbff;
+
+@mixin plugin-scrollbar {
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-track {
+    background: rgba(33, 33, 33, 0.9);
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+}

package/src/assets/close.svg

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
-    <title>Icons/32/Close</title>
-    <desc>Created with Sketch.</desc>
-    <g id="Icons/32/Close" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <rect id="Bounds" x="0" y="0" width="32" height="32"></rect>
-        <path d="M17.9113162,16 L24.6072325,9.30408374 C25.1313645,8.77995172 25.1287183,7.92687249 24.6009229,7.3990771 C24.0694478,6.86760201 23.220227,6.86845682 22.6959163,7.39276754 L16,14.0886838 L9.30408374,7.39276754 C8.77995172,6.86863552 7.92687249,6.8712817 7.3990771,7.3990771 C6.86760201,7.93055219 6.86845682,8.77977302 7.39276754,9.30408374 L14.0886838,16 L7.39276754,22.6959163 C6.86863552,23.2200483 6.8712817,24.0731275 7.3990771,24.6009229 C7.93055219,25.132398 8.77977302,25.1315432 9.30408374,24.6072325 L16,17.9113162 L22.6959163,24.6072325 C23.2200483,25.1313645 24.0731275,25.1287183 24.6009229,24.6009229 C25.132398,24.0694478 25.1315432,23.220227 24.6072325,22.6959163 L17.9113162,16 Z" id="Close" fill="rgba(255,255,255,0.8)"></path>
-    </g>
-</svg>

package/src/utils.ts

@@ -1,192 +0,0 @@
-import { xml2js } from "xml-js";
-import { Cuepoint } from "@playkit-js-contrib/common";
-import { KalturaRequest, KalturaRequestArgs } from 'kaltura-typescript-client/api/kaltura-request';
-import { KalturaObjectMetadata } from 'kaltura-typescript-client/api/kaltura-object-base';
-
-export const HOUR = 3600; // seconds in 1 hour
-
-export interface CaptionItem extends Cuepoint {
-    text: string;
-    id: number;
-}
-
-export const toSeconds = (val: any, vtt = false): number => {
-    const regex = vtt
-        ? /(\d+):(\d{2}):(\d{2}).(\d{2,3}|\d{2})/
-        : /(\d+):(\d{2}):(\d{2}),((\d{2,3}|\d{2}|\d{1}))?/;
-    const parts: any | null[] = regex.exec(val);
-    if (parts === null) {
-        return 0;
-    } 
-    
-    for (var i = 1; i < 5; i++) {
-        parts[i] = parseInt(parts[i], 10);
-        if (isNaN(parts[i])) {
-            parts[i] = 0;
-        }
-    }
-    // hours + minutes + seconds + ms
-    return parts[1] * HOUR + parts[2] * 60 + parts[3] + parts[4] / 1000;
-};
-
-export const getCaptionsByFormat = (captions: any, captionsFormat: string): CaptionItem[] => {
-    const format = captionsFormat.toLowerCase();
-    // const a = fromSrt(captions);
-    switch (format) {
-        case "1":
-            return fromSrt(captions);
-        case "2":
-            // strip 'span' from the p tags, they break the parser and no time (now) to write a parser
-            captions = captions
-                .replace(/<span[^>]+\?>/i, "")
-                .replace(/<\/span>/i, "")
-                .replace(/<br><\/br>/g, " ") // remove <br></br>'s as it breaks the parser too.
-                .replace(/<[//]{0,1}(SPAN|span)[^><]*>/g, "");
-            return TTML2Obj(captions);
-        case "3":
-            return fromVtt(captions);
-        default:
-            return [];
-    }
-};
-
-const fromVtt = (data: string): CaptionItem[] => {
-    let source: string | string[] = data.replace(/\r/g, "");
-    // remove webvtt metadata first line/s if exist 
-    // the 200 is optimization - no point break all string to lines and join them together
-    let linesBefore = source.substring(0, 200);
-    const linesAfter = source.substring(200);
-    const lines =  linesBefore.split(/\r?\n/);
-    for (let i = 0; i < 4 ; i++) {
-        // find first numeric char 
-        if (!/^\d+$/.test(linesBefore[0].charAt(0))) {
-            // first char in the line is not numeric - this line needs to be removed
-            lines.shift()
-        }
-    }
-    // re-join
-    linesBefore = lines.join("\n");
-    source = linesBefore + linesAfter;
-    // parse 
-    const regex = /(\d+)?\n?(\d{2}:\d{2}:\d{2}[,.]\d{3}) --> (\d{2}:\d{2}:\d{2}[,.]\d{3}).*\n/g;
-    source = source.split(regex);
-    source.shift();
-    const result = [];
-    for (let i = 0; i < source.length; i += 4) {
-        result.push({
-            id: result.length + 1,
-            startTime: toSeconds(source[i + 1].trim(), true),
-            endTime: toSeconds(source[i + 2].trim(), true),
-            text: source[i + 3].trim()
-        });
-    }
-    return result;
-};
-
-const fromSrt = (data: string): CaptionItem[] => {
-    let source: string | string[] = data.replace(/\r/g, "");
-    const regex = /(\d+)?\n?(\d{2}:\d{2}:\d{2}[,.]\d{3}) --> (\d{2}:\d{2}:\d{2}[,.]\d{3}).*\n/g;
-    source = source.split(regex);
-    source.shift();
-    const result = [];
-    for (let i = 0; i < source.length; i += 4) {
-        result.push({
-            id: result.length + 1,
-            startTime: toSeconds(source[i + 1].trim()),
-            endTime: toSeconds(source[i + 2].trim()),
-            text: source[i + 3].trim()
-        });
-    }
-    return result;
-};
-
-export const TTML2Obj = (ttml: any): CaptionItem[] => {
-    const data: any = xml2js(ttml, { compact: true });
-    // need only captions for showing. they located in tt.body.div.p.
-    const chapters = data.tt.body.div.p;
-    const correctData = chapters.map((item: any, index: number) => {
-        const { begin, end, ...otherAttributes } = item._attributes;
-        // convert time to 00:00:00.000 to 00:00:00,000
-        const endTime = end.replace(/\./g, ",");
-        const startTime = begin.replace(/\./g, ",");
-        const prepareObj = {
-            id: index + 1,
-            endTime: toSeconds(endTime),
-            startTime: toSeconds(startTime),
-            text: (Array.isArray(item._text) ? item._text.join(" ") : item._text) || ""
-            // all non-required
-            // otherAttributes: otherAttributes
-        };
-        return prepareObj;
-    });
-    return correctData;
-};
-
-const pad = (number: number) => {
-    if (number < 10) {
-        return `0${number}`;
-    }
-    return number;
-};
-
-const makeHoursString = (seconds: number): string => {
-    const hours = Math.floor(seconds / HOUR)
-    if (hours >= 1) {
-        return `${hours}:`
-    }
-    return "";
-};
-
-export const secontsToTime = (seconds: number, longerThanHour: boolean): string => {
-    const date = new Date(0);
-    date.setSeconds(seconds);
-    return `${longerThanHour ? makeHoursString(seconds) : ""}${pad(date.getUTCMinutes())}:${pad(date.getUTCSeconds())}`;
-};
-
-export function getConfigValue(value: any, condition: (value: any) => boolean, defaultValue: any) {
-    let result = defaultValue;
-    if (typeof condition === "function" && condition(value)) {
-        result = value;
-    }
-    return result;
-}
-
-export function isBoolean(value: any) {
-    return typeof value === "boolean";
-}
-
-export function makePlainText(captions: Array<CaptionItem>): string {
-    return captions.reduce((acc: string, next: CaptionItem) => {
-        return `${acc} ${next.text}`;
-    }, "");
-}
-
-
-// KalturaClient uses custom CaptionAssetServeAction method,
-// once KalturaFileRequest is fixed remove custom CaptionAssetServeAction and use
-// CaptionAssetServeAction from "kaltura-typescript-client/api/types/CaptionAssetServeAction"
-interface CaptionAssetServeActionArgs extends KalturaRequestArgs {
-    captionAssetId : string;
-  }
-export class CaptionAssetServeAction extends KalturaRequest<{url: string}> {
-    captionAssetId: any;
-    constructor(data: CaptionAssetServeActionArgs)
-    {
-        super(data, { responseType: 'v', responseSubType: '', responseConstructor: null } as any);
-    }
-    protected _getMetadata(): KalturaObjectMetadata
-    {
-        const result = super._getMetadata();
-        Object.assign(
-            result.properties,
-            {
-                service : { type : 'c', default : 'caption_captionasset' },
-                action : { type : 'c', default : 'serve' },
-                captionAssetId : { type : 's' }
-            }
-        );
-        return result;
-    }
-  }
-
-