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

package/src/components/transcript/transcript.scss

@@ -7,12 +7,11 @@
 .root {
   display: flex;
   justify-content: center;
-  padding: 8px 4px 8px 0px;
-  color: $white-color;
+  padding: 16px 4px 0px 0px;
+  color: $tone-1-color;
   height: 100%;
   width: 100%;
   position: absolute;
-  background-color: $root-background;
   z-index: 1;
   .skip-transcript-button {
     position: absolute;
@@ -23,15 +22,15 @@
     justify-content: center;
     width: 120px;
     height: 32px;
-    border-radius: 16px;
+    border-radius: $roundness-3;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
-    border: solid 1px $main-color;
-    background-color: $semiblack-color;
+    border: solid 1px $primary-color;
+    background-color: $tone-7-color;
     font-size: 15px;
     line-height: 1.27;
-    color: $white-color;
+    color: $tone-1-color;
     &:focus {
-      top: 46px;
+      top: 56px;
       right: 12px;
       outline: none !important; // prevent focus styles inherited from playkit-player.playkit-nav
     }
@@ -56,7 +55,7 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  margin-bottom: 6px;
+  margin-bottom: 8px;
   padding-left: 16px;
   font-size: 16px;
   &.small-width {
@@ -78,7 +77,6 @@
   @include plugin-scrollbar();
 }
 
-.loading-wrapper,
 .error-wrapper {
   height: 100%;
   width: 100%;
@@ -86,7 +84,7 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  color: $lightgray-color;
+  color: $tone-3-color;
   .error-icon {
     width: 100%;
     height: 100%;
@@ -115,23 +113,3 @@
     cursor: pointer;
   }
 }
-
-.autoscroll-button {
-  opacity: 0;
-  position: absolute;
-  right: 12px;
-  bottom: 25px;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
-  background-color: #01819a;
-  cursor: pointer;
-  z-index: 1;
-}
-
-.autoscroll-button-visible {
-  opacity: 1;
-}

package/src/components/transcript/transcript.tsx

@@ -1,5 +1,5 @@
 import {h, Component} from 'preact';
-import {A11yWrapper, OnClickEvent} from '@playkit-js/common';
+import {OnClickEvent} from '@playkit-js/common';
 import {debounce} from '../../utils';
 import * as styles from './transcript.scss';
 import {Spinner} from '../spinner';
@@ -8,15 +8,15 @@ import {CaptionList} from '../caption-list';
 import {HighlightedMap, CuePointData} from '../../types';
 import {CloseButton} from '../close-button';
 import {ErrorIcon} from './error-icon';
+import {AutoscrollButton} from '../autoscroll-button';
 
 const {ENTER, SPACE, TAB, ESC} = KalturaPlayer.ui.utils.KeyMap;
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
 
 const translates = {
-  autoScrollLabel: <Text id="transcript.auto_scroll">Enable auto scroll</Text>,
+  skipTranscript: <Text id="transcript.skip_transcript">Skip transcript</Text>,
   errorTitle: <Text id="transcript.whoops">Whoops!</Text>,
-  errorDescripton: <Text id="transcript.load_failed">Failed to load transcript</Text>,
-  skipTranscript: <Text id="transcript.skip_transcript">Skip transcript</Text>
+  errorDescripton: <Text id="transcript.load_failed">Failed to load transcript</Text>
 };
 
 export interface TranscriptProps {
@@ -36,10 +36,9 @@ export interface TranscriptProps {
   toggledWithEnter: boolean;
   highlightedMap: HighlightedMap;
   onItemClicked: (n: number) => void;
-  autoScrollLabel?: string;
+  skipTranscript?: string;
   errorTitle?: string;
   errorDescripton?: string;
-  skipTranscript?: string;
 }
 
 interface TranscriptState {
@@ -62,7 +61,8 @@ const initialSearch = {
 
 const SEARCHBAR_HEIGHT = 38; // height of search bar with margins
 
-export class TranscriptComponent extends Component<TranscriptProps, TranscriptState> {
+@withText(translates)
+export class Transcript extends Component<TranscriptProps, TranscriptState> {
   private _transcriptListRef: HTMLElement | null = null;
   private _captionListRef: any = null;
   private _skipTranscriptButtonRef: HTMLDivElement | null = null;
@@ -113,32 +113,13 @@ export class TranscriptComponent extends Component<TranscriptProps, TranscriptSt
   private _renderScrollToButton = () => {
     const {isAutoScrollEnabled} = this.state;
     return (
-      <A11yWrapper onClick={this._enableAutoScroll}>
-        <div
-          role="button"
-          className={`${styles.autoscrollButton} ${isAutoScrollEnabled ? '' : styles.autoscrollButtonVisible}`}
-          tabIndex={isAutoScrollEnabled ? -1 : 0}
-          aria-label={this.props.autoScrollLabel}
-          ref={node => {
-            this._autoscrollButtonRef = node;
-          }}>
-          <svg
-            width="32px"
-            height="32px"
-            viewBox="0 0 16 16"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlnsXlink="http://www.w3.org/1999/xlink">
-            <g id="Icons/16/Arrowline/up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-              <path
-                d="M8.0000393,2 C8.55232405,2 9.0000393,2.44771525 9.0000393,3 L9.0000393,3 L9,10.17 L11.216782,7.37830235 C11.5337243,6.97899674 12.0940739,6.88664831 12.5186429,7.14486093 L12.6217369,7.21674268 C13.054318,7.56009681 13.1266507,8.18911658 12.7832966,8.62169765 L12.7832966,8.62169765 L8.78329662,13.6611718 C8.3829349,14.165575 7.61714369,14.165575 7.21678198,13.6611718 L7.21678198,13.6611718 L3.21678198,8.62169765 C2.87342784,8.18911658 2.94576057,7.56009681 3.37834164,7.21674268 C3.81092272,6.87338855 4.43994248,6.94572127 4.78329662,7.37830235 L4.78329662,7.37830235 L7,10.17 L7.0000393,3 C7.0000393,2.48716416 7.38607949,2.06449284 7.88341817,2.00672773 Z"
-                id="Combined-Shape"
-                fill="#ffffff"
-                transform="translate(8.000039, 8.019737) scale(1, -1) translate(-8.000039, -8.019737) "></path>
-            </g>
-          </svg>
-        </div>
-      </A11yWrapper>
+      <AutoscrollButton
+        setAutoscrollButtonRef={(node: HTMLDivElement) => {
+          this._autoscrollButtonRef = node;
+        }}
+        isAutoScrollEnabled={isAutoScrollEnabled}
+        onClick={this._enableAutoScroll}
+      />
     );
   };
 
@@ -199,7 +180,7 @@ export class TranscriptComponent extends Component<TranscriptProps, TranscriptSt
     const {toggledWithEnter, kitchenSinkActive} = this.props;
     const {search, activeSearchIndex, totalSearchResults} = this.state;
     return (
-      <div className={[styles.header, this._getHeaderStyles()].join(' ')}>
+      <div className={[styles.header, this._getHeaderStyles()].join(' ')} data-testid="transcript_header">
         <Search
           onChange={this._onSearch}
           onSearchIndexChange={this._debounced.onActiveSearchIndexChange}
@@ -208,7 +189,6 @@ export class TranscriptComponent extends Component<TranscriptProps, TranscriptSt
           totalSearchResults={totalSearchResults}
           toggledWithEnter={toggledWithEnter}
           kitchenSinkActive={kitchenSinkActive}
-          searchQuery={search}
         />
       </div>
     );
@@ -316,11 +296,7 @@ export class TranscriptComponent extends Component<TranscriptProps, TranscriptSt
   };
 
   private _renderLoading = () => {
-    return (
-      <div className={styles.loadingWrapper}>
-        <Spinner />
-      </div>
-    );
+    return <Spinner />;
   };
 
   private _scrollTo = (el: HTMLElement) => {
@@ -402,5 +378,3 @@ export class TranscriptComponent extends Component<TranscriptProps, TranscriptSt
     );
   }
 }
-
-export const Transcript = withText(translates)(TranscriptComponent);

package/src/variables.scss

@@ -1,18 +1,8 @@
-$main-color: #01accd;
-$white-color: #ffffff;
-$gray-color: #cccccc;
-$darken-gray: #444444;
-$darkgray-color: #333333;
-$semigray-color: #666666;
-$lightgray-color: #999999;
-$black-color: #000000;
-$semiblack-color: #222222;
-$text-match-color: #fdd304;
-$text-current-match-color: #1687ff;
-$text-selection-color: #5b80a7;
-$main-color-darken: darken($main-color, 10%);
-$root-background: #000000a1;
-$focus-color: #00cbff;
+@import '~@playkit-js/playkit-js-ui';
+
+// border radius
+$roundness-1: 4px;
+$roundness-3: 16px;
 
 @mixin plugin-scrollbar {
   &::-webkit-scrollbar {

package/src/components/search/search.scss

@@ -1,94 +0,0 @@
-@import '../../variables.scss';
-
-.search-wrapper {
-  ::-moz-placeholder {
-    opacity: 1;
-  }
-
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-  width: 100%;
-  max-width: 599px;
-  height: 32px;
-  background-color: rgba(255, 255, 255, 0.24);
-  border: solid 1px rgba(255, 255, 255, 0.4);
-  border-radius: 4px;
-  .search-icon {
-    flex: 0 0 32px;
-    background-color: transparent;
-    width: 32px;
-    height: 32px;
-    margin: 0 2px;
-  }
-  .search-results {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    flex-shrink: 0;
-    margin: 0 8px;
-    font-size: 12px;
-    text-overflow: ellipsis;
-  }
-  .prev-next-wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    max-height: 100%;
-    height: 100%;
-    width: 14px;
-    margin-right: 8px;
-    .prev-next-button {
-      padding: 0;
-      background-color: transparent;
-      background-position: center;
-      background-size: cover;
-      border: none;
-      cursor: pointer;
-      &.disabled {
-        opacity: 0.4;
-        cursor: default;
-      }
-    }
-  }
-  .search-input {
-    width: 100%;
-    flex-grow: 1;
-    flex-shrink: 1;
-    font-size: 15px;
-    padding: 0 6px 1px 0;
-    color: $gray-color;
-    background: transparent;
-    border: none;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    &:focus {
-      outline: none !important; // prevent focus styles inherited from playkit-player.playkit-nav
-    }
-    &::placeholder {
-      color: $gray-color;
-    }
-    &::selection {
-      background-color: $text-selection-color;
-    }
-  }
-  .clear-icon {
-    padding: 0;
-    flex: 0 0 32px;
-    max-width: 32px;
-    max-height: 32px;
-    background-color: transparent;
-    width: 32px;
-    height: 32px;
-    border: none;
-    cursor: pointer;
-  }
-  &.active {
-    color: $gray-color;
-    background: $black-color;
-  }
-  &.focused {
-    box-shadow: 0 0 0 1px $focus-color;
-    border-radius: 4px;
-  }
-}