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

package/src/components/search/search.tsx

@@ -1,165 +1,158 @@
-import { h, Component } from "preact";
-import * as styles from "./search.scss";
+import {h, Component} from 'preact';
+import * as styles from './search.scss';
+import {debounce} from '../../utils';
+const DEBOUNCE_TIMEOUT = 300;
 
 export interface SearchProps {
-    onChange(value: string): void;
-    onSearchIndexChange(value: number): void;
-    value: string;
-    activeSearchIndex: number;
-    totalSearchResults: number;
-    kitchenSinkActive: boolean;
-    toggledWithEnter: boolean;
+  onChange(value: string): void;
+  searchQuery: string;
+  kitchenSinkActive: boolean;
+  toggledWithEnter: boolean;
+
+  onSearchIndexChange: (index: number) => void;
+  value: string;
+  activeSearchIndex: number;
+  totalSearchResults: number;
 }
 
 interface SearchState {
-    active: boolean;
-    focused: boolean;
+  active: boolean;
+  focused: boolean;
 }
 
 export class Search extends Component<SearchProps, SearchState> {
-    state: SearchState = {
-        active: false,
-        focused: false,
+  state: SearchState = {
+    active: false,
+    focused: false
+  };
+  private _inputRef: null | HTMLInputElement = null;
+  private _focusedByMouse = false;
+  private _debouncedOnChange: (value: string) => void;
+  constructor(props: SearchProps) {
+    super(props);
+    this._debouncedOnChange = debounce(props.onChange, DEBOUNCE_TIMEOUT);
+    this.state = {
+      active: false,
+      focused: false
     };
-    private _inputRef: null | HTMLInputElement = null;
-    private _focusedByMouse = false;
+  }
 
-    shouldComponentUpdate(
-        nextProps: Readonly<SearchProps>,
-        nextState: Readonly<SearchState>
+  shouldComponentUpdate(nextProps: Readonly<SearchProps>, nextState: Readonly<SearchState>) {
+    const {value, activeSearchIndex, totalSearchResults, kitchenSinkActive} = this.props;
+    if (
+      value !== nextProps.value ||
+      activeSearchIndex !== nextProps.activeSearchIndex ||
+      totalSearchResults !== nextProps.totalSearchResults ||
+      kitchenSinkActive !== nextProps.kitchenSinkActive ||
+      this.state.active !== nextState.active
     ) {
-        const { value, activeSearchIndex, totalSearchResults, kitchenSinkActive } = this.props;
-        if (
-            value !== nextProps.value ||
-            activeSearchIndex !== nextProps.activeSearchIndex ||
-            totalSearchResults !== nextProps.totalSearchResults ||
-            kitchenSinkActive !== nextProps.kitchenSinkActive ||
-            this.state.active !== nextState.active
-        ) {
-            return true;
-        }
-        return false;
+      return true;
     }
-    componentDidUpdate(previousProps: Readonly<SearchProps>): void {
-        const { kitchenSinkActive, toggledWithEnter } = this.props;
-        if (!previousProps.kitchenSinkActive && kitchenSinkActive && toggledWithEnter) {
-            this._inputRef?.focus();
-        }
+    return false;
+  }
+  componentDidUpdate(previousProps: Readonly<SearchProps>): void {
+    const {kitchenSinkActive, toggledWithEnter} = this.props;
+    if (!previousProps.kitchenSinkActive && kitchenSinkActive && toggledWithEnter) {
+      this._inputRef?.focus();
     }
-    private _handleOnChange = (e: any) => {
-        this.props.onChange(e.target.value);
-    };
-
-    private _onClear = (event: MouseEvent) => {
-        if (event.x !== 0 && event.y !== 0) {
-            this._focusedByMouse = true;
-        }
-        this._inputRef?.focus();
-        this.props.onChange("");
-    };
+  }
 
-    private _onFocus = () => {
-        this.setState({
-            active: true,
-            focused: !this._focusedByMouse,
-        });
-        this._focusedByMouse = false;
-    }
+  private _handleOnChange = (e: any) => {
+    this.props.onChange(e.target.value);
+  };
 
-    private _onBlur = () => {
-        this.setState({
-            active: false,
-            focused: false
-        });
+  private _onClear = (event: MouseEvent) => {
+    if (event.x !== 0 && event.y !== 0) {
+      this._focusedByMouse = true;
     }
+    this._inputRef?.focus();
+    this.props.onChange('');
+  };
 
-    private _goToNextSearchResult = () => {
-        const { activeSearchIndex, totalSearchResults, onSearchIndexChange } = this.props;
-        if (totalSearchResults === 0) {
-            return;
-        }
-        let index = 0;
-        if (activeSearchIndex !== totalSearchResults) {
-            index = this.props.activeSearchIndex + 1;
-        } else {
-            index = 1;
-        }
-        onSearchIndexChange(index);
-    };
-    private _goToPrevSearchResult = () => {
-        const { activeSearchIndex, totalSearchResults, onSearchIndexChange } = this.props;
-        let index = 0;
-        if (activeSearchIndex !== 1) {
-            index = activeSearchIndex - 1;
-        } else {
-            index = totalSearchResults;
-        }
-        onSearchIndexChange(index);
-    };
+  private _onFocus = () => {
+    this.setState({
+      active: true,
+      focused: !this._focusedByMouse
+    });
+    this._focusedByMouse = false;
+  };
 
-    _handleMouseDown = () => {
-        this._focusedByMouse = true;
-    };
+  private _onBlur = () => {
+    this.setState({
+      active: false,
+      focused: false
+    });
+  };
 
-    render() {
-        const { value, activeSearchIndex, totalSearchResults } = this.props;
-        return (
-            <div className={[
-                styles.searchWrapper,
-                (value || this.state.active) ? styles.active : "",
-                this.state.focused ? styles.focused : "",
-            ].join(" ")}>
-                <div className={styles.searchIcon} />
-                <input
-                    className={styles.searchInput}
-                    placeholder={"Search in Transcript"}
-                    value={value}
-                    onInput={this._handleOnChange}
-                    onFocus={this._onFocus}
-                    onBlur={this._onBlur}
-                    onMouseDown={this._handleMouseDown}
-                    tabIndex={1}
-                    ref={(node) => {
-                        this._inputRef = node;
-                    }}
-                />
-                {value && (
-                    <button
-                        className={styles.clearIcon}
-                        onClick={this._onClear}
-                        tabIndex={1}
-                    />
-                )}
-                {value && (
-                    <div className={styles.searchResults}>
-                        {`${
-                            totalSearchResults > 0
-                                ? `${activeSearchIndex}/${totalSearchResults}`
-                                : "0/0"
-                        }`}
-                    </div>
-                )}
-                <div className={styles.prevNextWrapper}>
-                    {value && (
-                        <button
-                            tabIndex={1}
-                            className={`${styles.prevNextButton} ${styles.prevButton} ${
-                                totalSearchResults === 0 ? styles.disabled : ""
-                            }`}
-                            onClick={this._goToPrevSearchResult}
-                        />
-                    )}
-                    {value && (
-                        <button
-                            tabIndex={1}
-                            className={`${styles.prevNextButton} ${styles.nextButton} ${
-                                totalSearchResults === 0 ? styles.disabled : ""
-                            }`}
-                            onClick={this._goToNextSearchResult}
-                        />
-                    )}
-                </div>
-            </div>
-        );
+  private _goToNextSearchResult = () => {
+    const {activeSearchIndex, totalSearchResults, onSearchIndexChange} = this.props;
+    if (totalSearchResults === 0) {
+      return;
+    }
+    let index = 0;
+    if (activeSearchIndex !== totalSearchResults) {
+      index = this.props.activeSearchIndex + 1;
+    } else {
+      index = 1;
     }
+    onSearchIndexChange(index);
+  };
+  private _goToPrevSearchResult = () => {
+    const {activeSearchIndex, totalSearchResults, onSearchIndexChange} = this.props;
+    let index = 0;
+    if (activeSearchIndex !== 1) {
+      index = activeSearchIndex - 1;
+    } else {
+      index = totalSearchResults;
+    }
+    onSearchIndexChange(index);
+  };
+
+  _handleMouseDown = () => {
+    this._focusedByMouse = true;
+  };
+
+  render() {
+    const {searchQuery, totalSearchResults, activeSearchIndex} = this.props;
+    return (
+      <div
+        className={[styles.searchWrapper, searchQuery || this.state.active ? styles.active : '', this.state.focused ? styles.focused : ''].join(' ')}
+      >
+        <div className={styles.searchIcon} />
+        <input
+          className={styles.searchInput}
+          placeholder={'Search in Transcript'}
+          value={searchQuery}
+          onInput={this._handleOnChange}
+          onFocus={this._onFocus}
+          onBlur={this._onBlur}
+          onMouseDown={this._handleMouseDown}
+          tabIndex={1}
+          ref={node => {
+            this._inputRef = node;
+          }}
+        />
+        {searchQuery && <button className={styles.clearIcon} onClick={this._onClear} tabIndex={1} />}
+        {searchQuery && (
+          <div className={styles.searchResults}>{`${totalSearchResults > 0 ? `${activeSearchIndex}/${totalSearchResults}` : '0/0'}`}</div>
+        )}
+        <div className={styles.prevNextWrapper}>
+          {searchQuery && (
+            <button
+              tabIndex={1}
+              className={`${styles.prevNextButton} ${styles.prevButton} ${totalSearchResults === 0 ? styles.disabled : ''}`}
+              onClick={this._goToPrevSearchResult}
+            />
+          )}
+          {searchQuery && (
+            <button
+              tabIndex={1}
+              className={`${styles.prevNextButton} ${styles.nextButton} ${totalSearchResults === 0 ? styles.disabled : ''}`}
+              onClick={this._goToNextSearchResult}
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
 }

package/src/components/spinner/index.ts

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

package/src/components/spinner/spinner.scss

@@ -1,57 +1,65 @@
 .spinner-ball {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    max-width: 184px;
-    max-height: 184px;
-    margin: 4px 0 8px 0;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-image: url('../../assets/loader.svg');
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  max-width: 184px;
+  max-height: 184px;
+  margin: 4px 0 8px 0;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url('../../assets/loader.svg');
 
-    animation: icon-bounce 2.0s infinite ease-in-out;
+  animation: icon-bounce 2s infinite ease-in-out;
+}
+
+.bounce-frame {
+  width: 100%;
+  height: 100%;
+  min-width: 184px;
+  min-height: 184px;
+  border-radius: 50%;
+  background-color: #cccccc;
+  opacity: 0.2;
+
+  -webkit-animation: frame-bounce 2s infinite ease-in-out;
+  animation: frame-bounce 2s infinite ease-in-out;
+}
+
+@keyframes icon-bounce {
+  0%,
+  100% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes frame-bounce {
+  0%,
+  100% {
+    -webkit-transform: scale(1);
+    opacity: 0.1;
   }
-  
-  .bounce-frame {
-    width: 100%;
-    height: 100%;
-    min-width: 184px;
-    min-height: 184px;
-    border-radius: 50%;
-    background-color: #cccccc;
-    opacity: 0.2;
-  
-    -webkit-animation: frame-bounce 2.0s infinite ease-in-out;
-    animation: frame-bounce 2.0s infinite ease-in-out;
+  50% {
+    -webkit-transform: scale(1.3);
+    opacity: 0.1;
   }
+}
 
-  @keyframes icon-bounce {
-    0%, 100% { opacity: 0.3 }
-    50% { opacity: 1 }
+@keyframes frame-bounce {
+  0%,
+  100% {
+    opacity: 0.1;
+    transform: scale(1);
+    -webkit-transform: scale(1);
   }
-  
-  @-webkit-keyframes frame-bounce {
-    0%, 100% {
-      -webkit-transform: scale(1.0);
-      opacity: 0.1;
-    }
-    50% {
-      -webkit-transform: scale(1.3);
-      opacity: 0.1;
-    }
+  50% {
+    opacity: 0.25;
+    transform: scale(1.3);
+    -webkit-transform: scale(1.3);
   }
-  
-  @keyframes frame-bounce {
-    0%, 100% {
-      opacity: 0.1;
-      transform: scale(1.0);
-      -webkit-transform: scale(1.0);
-    } 50% {
-        opacity: 0.25;
-        transform: scale(1.3);
-        -webkit-transform: scale(1.3);
-      }
-  }
+}

package/src/components/spinner/spinner.tsx

@@ -1,12 +1,12 @@
-import { h, Component } from "preact";
-import * as styles from "./spinner.scss";
+import {h, Component} from 'preact';
+import * as styles from './spinner.scss';
 
 export class Spinner extends Component {
-    render() {
-        return (
-            <div className={styles.spinnerBall}>
-                <div className={styles.bounceFrame} />
-            </div>
-        );
-    }
+  render() {
+    return (
+      <div className={styles.spinnerBall}>
+        <div className={styles.bounceFrame} />
+      </div>
+    );
+  }
 }

package/src/components/transcript/index.ts

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

package/src/components/transcript/transcript.scss

@@ -1,21 +1,5 @@
 @import '../../variables.scss';
 
-/* TODO: (1) remove this once 3rd party cross-browser custom scroll bar is Added */
-.body::-webkit-scrollbar {
-  width: 4px;
-}
-
-/* Track TODO: as (1)*/
-.body::-webkit-scrollbar-track {
-  background: rgba(33, 33, 33, 0.9);
-}
-
-/* Handle TODO: as (1) */
-.body::-webkit-scrollbar-thumb {
-  border-radius: 3px;
-  background-color: rgba(255, 255, 255, 0.3);
-}
-
 .hidden {
   visibility: hidden;
 }
@@ -29,6 +13,7 @@
   width: 100%;
   position: absolute;
   background-color: $root-background;
+  z-index: 1;
   .skip-transcript-button {
     position: absolute;
     top: -1000px;
@@ -51,6 +36,11 @@
       outline: none !important; // prevent focus styles inherited from playkit-player.playkit-nav
     }
   }
+
+  * {
+    font-family: sans-serif;
+    font-style: normal;
+  }
 }
 
 .global-container {
@@ -76,20 +66,6 @@
     padding-right: 22px;
   }
 }
-.close-button {
-  position: absolute;
-  top: 8px;
-  right: 0;
-  width: 32px;
-  height: 32px;
-  min-width: 32px;
-  margin: 0 8px;
-  cursor: pointer;
-  background-image: url('../../assets/close.svg');
-  background-color: transparent;
-  border: none;
-  padding: 0;
-}
 
 .body {
   position: relative;
@@ -98,6 +74,7 @@
   overflow-y: auto;
   text-align: center;
   overflow-x: hidden;
+  @include plugin-scrollbar();
 }
 
 .loading-wrapper,
@@ -117,7 +94,6 @@
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
-    background-image: url('../../assets/error.svg');
   }
   .error-main-text {
     font-size: 1.3em;
@@ -142,7 +118,7 @@
   opacity: 0;
   position: absolute;
   right: 12px;
-  bottom: 12px;
+  bottom: 25px;
   width: 32px;
   height: 32px;
   padding: 0;
@@ -160,4 +136,4 @@
 
 .autoscroll-button-visible {
   opacity: 1;
-}
+}