@playkit-js/transcript 3.2.0-canary.3-a35aaf1 → 3.2.0-canary.4-2b8a565

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.2.0-canary.3-a35aaf1",
+  "version": "3.2.0-canary.4-2b8a565",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,
@@ -67,7 +67,8 @@
     "html5 player"
   ],
   "dependencies": {
-    "@playkit-js/common": "^1.0.7",
+    "@playkit-js/common": "^1.0.18",
+    "@playkit-js/playkit-js-ui": "^0.73.0",
     "@playkit-js/ui-managers": "^1.3.2",
     "cypress": "^12.3.0",
     "stream-browserify": "^3.0.0"

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

@@ -0,0 +1,20 @@
+@import '../../variables.scss';
+
+.autoscroll-button {
+  opacity: 0;
+  position: absolute;
+  right: 12px;
+  bottom: 25px;
+  width: 32px;
+  height: 32px;
+  padding: 4px;
+  border-radius: $roundness-1;
+  border: none;
+  box-shadow: 0px 1px 0.75px rgba(0, 0, 0, 0.42), 0px 1px 0.5px rgba(0, 0, 0, 0.25), 0px 2px 3px rgba(0, 0, 0, 0.2);
+  background-color: $primary-darker-color;
+  cursor: pointer;
+  z-index: 1;
+  &.autoscroll-button-visible {
+    opacity: 1;
+  }
+}

package/src/components/autoscroll-button/autoscroll-button.tsx

@@ -0,0 +1,46 @@
+import {h} from 'preact';
+import * as styles from './autoscroll-button.scss';
+import {A11yWrapper, OnClick} from '@playkit-js/common';
+
+const {withText, Text} = KalturaPlayer.ui.preacti18n;
+const {Tooltip} = KalturaPlayer.ui.components;
+
+interface AutoscrollButtonProps {
+  onClick: OnClick;
+  isAutoScrollEnabled: boolean;
+  setAutoscrollButtonRef: (node: HTMLDivElement | null) => void;
+  autoScrollLabel?: string;
+}
+
+const translates = {
+  autoScrollLabel: <Text id="transcript.auto_scroll">Resume AutoScroll</Text>
+};
+
+export const AutoscrollButton = withText(translates)(
+  ({onClick, isAutoScrollEnabled, setAutoscrollButtonRef, autoScrollLabel}: AutoscrollButtonProps) => {
+    return (
+      <A11yWrapper onClick={onClick}>
+        <div
+          role="button"
+          className={`${styles.autoscrollButton} ${isAutoScrollEnabled ? '' : styles.autoscrollButtonVisible}`}
+          tabIndex={isAutoScrollEnabled ? -1 : 1}
+          aria-label={autoScrollLabel}
+          ref={setAutoscrollButtonRef}>
+          <Tooltip label={autoScrollLabel} type="left">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M6.29289 15.2929C6.65338 14.9324 7.22061 14.9047 7.6129 15.2097L7.70711 15.2929L12 19.585L16.2929 15.2929C16.6534 14.9324 17.2206 14.9047 17.6129 15.2097L17.7071 15.2929C18.0676 15.6534 18.0953 16.2206 17.7903 16.6129L17.7071 16.7071L12.7071 21.7071C12.3466 22.0676 11.7794 22.0953 11.3871 21.7903L11.2929 21.7071L6.29289 16.7071C5.90237 16.3166 5.90237 15.6834 6.29289 15.2929Z"
+                fill="white"
+              />
+              <path
+                d="M17.7071 8.70711C17.3466 9.06759 16.7794 9.09532 16.3871 8.7903L16.2929 8.70711L12 4.415L7.70711 8.70711C7.34662 9.06759 6.77939 9.09532 6.3871 8.79029L6.29289 8.70711C5.93241 8.34662 5.90468 7.77939 6.2097 7.3871L6.29289 7.29289L11.2929 2.29289C11.6534 1.93241 12.2206 1.90468 12.6129 2.2097L12.7071 2.29289L17.7071 7.29289C18.0976 7.68342 18.0976 8.31658 17.7071 8.70711Z"
+                fill="white"
+              />
+              <rect x="10" y="10" width="4" height="4" rx="2" fill="white" />
+            </svg>
+          </Tooltip>
+        </div>
+      </A11yWrapper>
+    );
+  }
+);

package/src/components/autoscroll-button/index.ts

@@ -0,0 +1 @@
+export * from './autoscroll-button';

package/src/components/caption/caption.scss

@@ -6,7 +6,7 @@
   width: 100%;
   margin-bottom: 9px;
   margin-left: 8px;
-  color: $white-color;
+  color: $tone-1-color;
   .caption-time {
     flex-shrink: 1;
     min-width: 48px;
@@ -15,7 +15,7 @@
     padding-top: 2px;
     text-align: right;
     font-size: 12px;
-    color: $gray-color;
+    color: $tone-2-color;
   }
   .caption-content {
     flex-grow: 1;
@@ -25,20 +25,19 @@
     user-select: text;
     &:hover {
       .caption-span {
-        background-color: $semigray-color;
+        background-color: $tone-6-color;
       }
       &.highlighted {
         .caption-span {
-          color: $white-color;
-          background-color: $main-color-darken;
+          background-color: $primary-darker-color;
           padding: 0 2px;
         }
       }
     }
     &.highlighted {
       .caption-span {
-        color: $black-color;
-        background-color: $main-color;
+        color: $primary-text-contrast-color;
+        background-color: $primary-color;
         padding: 0 2px;
       }
     }
@@ -51,27 +50,27 @@
       border-radius: 2px;
       cursor: pointer;
       &::selection {
-        background-color: $text-selection-color;
+        background-color: $primary-brighter-color;
         padding: 0 2px;
       }
       & > span::selection {
-        background-color: $text-selection-color;
+        background-color: $primary-brighter-color;
       }
     }
     .highlight-search {
-      color: $black-color;
-      background-color: $text-match-color;
+      color: $secondary-text-contrast-color;
+      background-color: $secondary-color;
       border-radius: 2px;
       &::selection {
-        background-color: $text-selection-color;
+        background-color: $primary-brighter-color;
       }
     }
     .active-search {
-      color: $black-color;
-      background-color: $text-current-match-color;
+      color: $secondary-text-contrast-color;
+      background-color: $primary-darker-color;
       border-radius: 2px;
       &::selection {
-        background-color: $text-selection-color;
+        background-color: $primary-brighter-color;
       }
     }
   }

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

@@ -1,6 +1,6 @@
 .close-btn {
   position: absolute;
-  top: 13px;
+  top: 20px;
   right: 14px;
   width: 24px;
   height: 24px;

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

@@ -2,6 +2,6 @@
 
 .pluginButton {
   &.active {
-    background-color: $darken-gray;
+    background-color: $tone-6-color;
   }
 }

package/src/components/plugin-button/plugin-button.tsx

@@ -19,8 +19,10 @@ export const PluginButton = ({isActive, onClick, label, id, icon, dataTestId}: P
   return (
     <Tooltip label={label} type="bottom">
       <A11yWrapper onClick={onClick}>
-        <button aria-label={label} className={[ui.style.upperBarIcon, styles.pluginButton, isActive ? styles.active : ''].join(' ')}
-                data-testid={dataTestId}>
+        <button
+          aria-label={label}
+          className={[ui.style.upperBarIcon, styles.pluginButton, isActive ? styles.active : ''].join(' ')}
+          data-testid={dataTestId}>
           <Icon id={id} height={icons.BigSize} width={icons.BigSize} viewBox={`0 0 ${icons.BigSize} ${icons.BigSize}`} path={icon} />
         </button>
       </A11yWrapper>
@@ -29,5 +31,5 @@ export const PluginButton = ({isActive, onClick, label, id, icon, dataTestId}: P
 };
 
 PluginButton.defaultProps = {
-  dataTestId: "transcript_pluginButton"
-}
+  dataTestId: 'transcript_pluginButton'
+};

package/src/components/search/search.tsx

@@ -1,8 +1,5 @@
 import {h, Component} from 'preact';
-import {A11yWrapper, OnClickEvent} from '@playkit-js/common';
-import * as styles from './search.scss';
-import {debounce} from '../../utils';
-const DEBOUNCE_TIMEOUT = 300;
+import {InputField} from '@playkit-js/common';
 
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
 const translates = ({activeSearchIndex, totalSearchResults}: SearchProps) => ({
@@ -24,12 +21,11 @@ const translates = ({activeSearchIndex, totalSearchResults}: SearchProps) => ({
 
 export interface SearchProps {
   onChange(value: string): void;
-  searchQuery: string;
+  value: string;
   kitchenSinkActive: boolean;
   toggledWithEnter: boolean;
 
   onSearchIndexChange: (index: number) => void;
-  value: string;
   activeSearchIndex: number;
   totalSearchResults: number;
 
@@ -40,36 +36,16 @@ export interface SearchProps {
   searchResultsLabel?: string;
 }
 
-interface SearchState {
-  active: boolean;
-  focused: boolean;
-}
-
-class SearchComponent extends Component<SearchProps, SearchState> {
-  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
-    };
-  }
+class SearchComponent extends Component<SearchProps> {
+  private _inputField: InputField | null = null;
 
-  shouldComponentUpdate(nextProps: Readonly<SearchProps>, nextState: Readonly<SearchState>) {
+  shouldComponentUpdate(nextProps: Readonly<SearchProps>) {
     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
+      kitchenSinkActive !== nextProps.kitchenSinkActive
     ) {
       return true;
     }
@@ -78,176 +54,30 @@ class SearchComponent extends Component<SearchProps, SearchState> {
   componentDidUpdate(previousProps: Readonly<SearchProps>): void {
     const {kitchenSinkActive, toggledWithEnter} = this.props;
     if (!previousProps.kitchenSinkActive && kitchenSinkActive && toggledWithEnter) {
-      this._inputRef?.focus();
+      this._inputField?.setFocus();
     }
   }
 
-  private _handleOnChange = (e: any) => {
-    this.props.onChange(e.target.value);
-  };
-
-  private _onClear = (event: OnClickEvent, byKeyboard?: boolean) => {
-    if (!byKeyboard) {
-      this._focusedByMouse = true;
-    }
-    this._inputRef?.focus();
-    this.props.onChange('');
-  };
-
-  private _onFocus = () => {
-    this.setState({
-      active: true,
-      focused: !this._focusedByMouse
-    });
-    this._focusedByMouse = false;
-  };
-
-  private _onBlur = () => {
-    this.setState({
-      active: false,
-      focused: false
-    });
-  };
-
-  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;
+    const {value, totalSearchResults, activeSearchIndex, onChange, onSearchIndexChange} = this.props;
     return (
-      <div
-        className={[styles.searchWrapper, searchQuery || this.state.active ? styles.active : '', this.state.focused ? styles.focused : ''].join(' ')}
-        data-testid="transcript_searchBar">
-        <div className={styles.searchIcon}>
-          <svg
-            width="32px"
-            height="32px"
-            viewBox="0 0 32 32"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlnsXlink="http://www.w3.org/1999/xlink">
-            <g id="Icons/32/serch" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-              <path
-                d="M15.1578947,8 C19.1110908,8 22.3157895,11.2046986 22.3157895,15.1578947 C22.3157895,16.8311546 21.7416502,18.3703171 20.7796271,19.5891266 L24.5954583,23.4045417 C24.9243209,23.7334042 24.9243209,24.2665958 24.5954583,24.5954583 C24.2665958,24.9243209 23.7334042,24.9243209 23.4045417,24.5954583 L19.5891266,20.7796271 C18.3703171,21.7416502 16.8311546,22.3157895 15.1578947,22.3157895 C11.2046986,22.3157895 8,19.1110908 8,15.1578947 C8,11.2046986 11.2046986,8 15.1578947,8 Z M15.1578947,9.68421053 C12.1348624,9.68421053 9.68421053,12.1348624 9.68421053,15.1578947 C9.68421053,18.1809271 12.1348624,20.6315789 15.1578947,20.6315789 C18.1809271,20.6315789 20.6315789,18.1809271 20.6315789,15.1578947 C20.6315789,12.1348624 18.1809271,9.68421053 15.1578947,9.68421053 Z"
-                id="Shape"
-                fill="#cccccc"></path>
-            </g>
-          </svg>
-        </div>
-        <input
-          className={styles.searchInput}
-          aria-label={this.props.searchLabel}
-          placeholder={this.props.searchLabel}
-          value={searchQuery}
-          onInput={this._handleOnChange}
-          onFocus={this._onFocus}
-          onBlur={this._onBlur}
-          onMouseDown={this._handleMouseDown}
-          tabIndex={0}
-          ref={node => {
-            this._inputRef = node;
-          }}
-        />
-        {searchQuery && (
-          <A11yWrapper onClick={this._onClear}>
-            <button className={styles.clearIcon} tabIndex={0} aria-label={this.props.clearSearchLabel} data-testid="transcript_clearSearchButton">
-              <svg
-                width="32px"
-                height="32px"
-                viewBox="0 0 32 32"
-                version="1.1"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink">
-                <g id="Icons/32/Clere" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                  <path
-                    d="M16,8 C20.418278,8 24,11.581722 24,16 C24,20.418278 20.418278,24 16,24 C11.581722,24 8,20.418278 8,16 C8,11.581722 11.581722,8 16,8 Z M19.8665357,12.1334643 C19.6885833,11.9555119 19.4000655,11.9555119 19.2221131,12.1334643 L16,15.356 L12.7778869,12.1334643 L12.7064039,12.0750737 C12.5295326,11.9582924 12.2891726,11.977756 12.1334643,12.1334643 L12.0750737,12.2049473 C11.9582924,12.3818186 11.977756,12.6221786 12.1334643,12.7778869 L15.356,16 L12.1334643,19.2221131 C11.9555119,19.4000655 11.9555119,19.6885833 12.1334643,19.8665357 C12.3114167,20.0444881 12.5999345,20.0444881 12.7778869,19.8665357 L16,16.644 L19.2221131,19.8665357 L19.2935961,19.9249263 C19.4704674,20.0417076 19.7108274,20.022244 19.8665357,19.8665357 L19.9249263,19.7950527 C20.0417076,19.6181814 20.022244,19.3778214 19.8665357,19.2221131 L16.644,16 L19.8665357,12.7778869 C20.0444881,12.5999345 20.0444881,12.3114167 19.8665357,12.1334643 Z"
-                    id="Shape"
-                    fill="#cccccc"></path>
-                </g>
-              </svg>
-            </button>
-          </A11yWrapper>
-        )}
-        {searchQuery && (
-          <div className={styles.searchResults} aria-live="polite" aria-label={this.props.searchResultsLabel} data-testid="transcript_searchResultLabel">{`${
-            totalSearchResults > 0 ? `${activeSearchIndex}/${totalSearchResults}` : '0/0'
-          }`}</div>
-        )}
-        <div className={styles.prevNextWrapper}>
-          {searchQuery && (
-            <A11yWrapper onClick={this._goToPrevSearchResult}>
-              <button
-                tabIndex={0}
-                className={`${styles.prevNextButton} ${totalSearchResults === 0 ? styles.disabled : ''}`}
-                aria-label={this.props.prevMatchLabel}>
-                <svg
-                  width="14px"
-                  height="12px"
-                  viewBox="1 0 14 12"
-                  version="1.1"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlnsXlink="http://www.w3.org/1999/xlink">
-                  <g id="Icons/16/Arrow/-up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                    <path
-                      d="M4.78325732,5.37830235 C4.43990319,4.94572127 3.81088342,4.87338855 3.37830235,5.21674268 C2.94572127,5.56009681 2.87338855,6.18911658 3.21674268,6.62169765 L7.21674268,11.6611718 C7.61710439,12.165575 8.38289561,12.165575 8.78325732,11.6611718 L12.7832573,6.62169765 C13.1266115,6.18911658 13.0542787,5.56009681 12.6216977,5.21674268 C12.1891166,4.87338855 11.5600968,4.94572127 11.2167427,5.37830235 L8,9.43097528 L4.78325732,5.37830235 Z"
-                      id="Path-2"
-                      fill="#cccccc"
-                      transform="translate(8.000000, 8.519717) scale(1, -1) translate(-8.000000, -8.519717) "></path>
-                  </g>
-                </svg>
-              </button>
-            </A11yWrapper>
-          )}
-          {searchQuery && (
-            <A11yWrapper onClick={this._goToNextSearchResult}>
-              <button
-                tabIndex={0}
-                className={`${styles.prevNextButton} ${totalSearchResults === 0 ? styles.disabled : ''}`}
-                aria-label={this.props.nextMatchLabel}>
-                <svg
-                  width="14px"
-                  height="12px"
-                  viewBox="1 2 14 12"
-                  version="1.1"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlnsXlink="http://www.w3.org/1999/xlink">
-                  <g id="Icons/16/Arrow/down" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                    <path
-                      d="M4.78325732,5.37830235 C4.43990319,4.94572127 3.81088342,4.87338855 3.37830235,5.21674268 C2.94572127,5.56009681 2.87338855,6.18911658 3.21674268,6.62169765 L7.21674268,11.6611718 C7.61710439,12.165575 8.38289561,12.165575 8.78325732,11.6611718 L12.7832573,6.62169765 C13.1266115,6.18911658 13.0542787,5.56009681 12.6216977,5.21674268 C12.1891166,4.87338855 11.5600968,4.94572127 11.2167427,5.37830235 L8,9.43097528 L4.78325732,5.37830235 Z"
-                      id="Path-2"
-                      fill="#cccccc"></path>
-                  </g>
-                </svg>
-              </button>
-            </A11yWrapper>
-          )}
-        </div>
-      </div>
+      <InputField
+        ref={node => {
+          this._inputField = node;
+        }}
+        value={value}
+        onChange={onChange}
+        placeholder={this.props.searchLabel}
+        clearSearchLabel={this.props.clearSearchLabel}
+        searchResults={{
+          activeSearchIndex,
+          totalSearchResults,
+          onSearchIndexChange,
+          nextMatchLabel: this.props.nextMatchLabel as string,
+          prevMatchLabel: this.props.prevMatchLabel as string,
+          searchResultsLabel: this.props.searchResultsLabel as string
+        }}
+      />
     );
   }
 }

package/src/components/spinner/spinner.scss

@@ -1,52 +1,16 @@
-.transcript-spinner-ball {
-  position: relative;
+@import '../../variables.scss';
+
+.transcript-loader {
   display: flex;
-  align-items: center;
-  width: 100%;
+  flex-direction: column;
   height: 100%;
-  max-width: 184px;
-  max-height: 184px;
-  margin: 4px 0 8px 0;
-  animation: icon-bounce 2s infinite ease-in-out;
-  svg {
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
-}
-
-.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;
+  color: $tone-3-color;
+  margin: 0;
   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;
-  }
-  50% {
-    -webkit-transform: scale(1.3);
-    opacity: 0.1;
+  overflow: hidden;
+  svg {
+    flex-shrink: 0;
   }
 }
 
@@ -54,12 +18,8 @@
   0%,
   100% {
     opacity: 0.1;
-    transform: scale(1);
-    -webkit-transform: scale(1);
   }
   50% {
     opacity: 0.25;
-    transform: scale(1.3);
-    -webkit-transform: scale(1.3);
   }
 }

package/src/components/spinner/spinner.tsx

@@ -1,61 +1,18 @@
 import {h, Component} from 'preact';
 import * as styles from './spinner.scss';
 
+const DEFAULT_LINES = 20;
+
 export class Spinner extends Component {
   render() {
     return (
-      <div className={styles.transcriptSpinnerBall}>
-        <svg
-          width="184px"
-          height="184px"
-          viewBox="0 0 184 184"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          xmlnsXlink="http://www.w3.org/1999/xlink">
-          <g id="IL/-transcript/-loder" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-            <path
-              d="M131,37 C133.688755,37 135.881818,39.1223067 135.99538,41.7831104 L136,42 L136,142 C136,144.688755 133.877693,146.881818 131.21689,146.99538 L131,147 L54,147 C51.3112453,147 49.1181819,144.877693 49.0046195,142.21689 L49,142 L49,42 C49,39.3112453 51.1223067,37.1181819 53.7831104,37.0046195 L54,37 L131,37 Z M101.454542,126.814926 L63.4545421,126.814926 C62.3499726,126.814926 61.4545421,127.710356 61.4545421,128.814926 C61.4545421,129.919495 62.3499726,130.814926 63.4545421,130.814926 L63.4545421,130.814926 L101.454542,130.814926 C102.559112,130.814926 103.454542,129.919495 103.454542,128.814926 C103.454542,127.710356 102.559112,126.814926 101.454542,126.814926 L101.454542,126.814926 Z M115.288711,116.850282 L63.2887108,116.850282 C62.1841413,116.850282 61.2887108,117.745712 61.2887108,118.850282 C61.2887108,119.904643 62.1045886,120.768447 63.1394485,120.844796 L63.2887108,120.850282 L115.288711,120.850282 C116.39328,120.850282 117.288711,119.954851 117.288711,118.850282 C117.288711,117.745712 116.39328,116.850282 115.288711,116.850282 Z M97.011063,106.163706 L64.011063,106.163706 C62.9064935,106.163706 62.011063,107.059136 62.011063,108.163706 C62.011063,109.218068 62.8269408,110.081871 63.8618007,110.15822 L64.011063,110.163706 L97.011063,110.163706 C98.1156325,110.163706 99.011063,109.268275 99.011063,108.163706 C99.011063,107.059136 98.1156325,106.163706 97.011063,106.163706 Z M112.011284,95.3010779 L64.0112838,95.3010779 C62.9067143,95.3010779 62.0112838,96.1965084 62.0112838,97.3010779 C62.0112838,98.3554397 62.8271616,99.219243 63.8620215,99.2955922 L64.0112838,99.3010779 L112.011284,99.3010779 C113.115853,99.3010779 114.011284,98.4056474 114.011284,97.3010779 C114.011284,96.1965084 113.115853,95.3010779 112.011284,95.3010779 Z M96.7184437,84.7881504 L63.7184437,84.7881504 C62.6138742,84.7881504 61.7184437,85.6835809 61.7184437,86.7881504 C61.7184437,87.8425122 62.5343215,88.7063156 63.5691814,88.7826647 L63.7184437,88.7881504 L96.7184437,88.7881504 C97.8230132,88.7881504 98.7184437,87.8927199 98.7184437,86.7881504 C98.7184437,85.6835809 97.8230132,84.7881504 96.7184437,84.7881504 Z M108.741453,73.6650501 L63.7414529,73.6650501 C62.6368834,73.6650501 61.7414529,74.5604806 61.7414529,75.6650501 C61.7414529,76.7194119 62.5573307,77.5832152 63.5921905,77.6595644 L63.7414529,77.6650501 L108.741453,77.6650501 C109.846022,77.6650501 110.741453,76.7696196 110.741453,75.6650501 C110.741453,74.5604806 109.846022,73.6650501 108.741453,73.6650501 Z M92.456209,63.0652986 L63.456209,63.0652986 C62.3516395,63.0652986 61.456209,63.9607291 61.456209,65.0652986 C61.456209,66.1196603 62.2720867,66.9834637 63.3069466,67.0598128 L63.456209,67.0652986 L92.456209,67.0652986 C93.5607785,67.0652986 94.456209,66.1698681 94.456209,65.0652986 C94.456209,63.9607291 93.5607785,63.0652986 92.456209,63.0652986 Z M102.320762,52.7533578 L63.3207622,52.7533578 C62.2161927,52.7533578 61.3207622,53.6487883 61.3207622,54.7533578 C61.3207622,55.8077196 62.13664,56.6715229 63.1714998,56.7478721 L63.3207622,56.7533578 L102.320762,56.7533578 C103.425332,56.7533578 104.320762,55.8579273 104.320762,54.7533578 C104.320762,53.6487883 103.425332,52.7533578 102.320762,52.7533578 Z"
-              id="Combined-Shape"
-              fill="#999999"
-              transform="translate(92.500000, 92.000000) rotate(-10.000000) translate(-92.500000, -92.000000) "></path>
-            <g id="Oval-2" opacity="0.5" transform="translate(38.000000, 147.000000)" fill="#999999">
-              <path
-                d="M3.3015873,6.64864865 C5.12500362,6.64864865 6.6031746,5.16029795 6.6031746,3.32432432 C6.6031746,1.4883507 5.12500362,0 3.3015873,0 C1.47817098,0 1.08002496e-12,1.4883507 1.08002496e-12,3.32432432 C1.08002496e-12,5.16029795 1.47817098,6.64864865 3.3015873,6.64864865 Z M3.3015873,4.64864865 C2.5858248,4.64864865 2,4.05878945 2,3.32432432 C2,2.5898592 2.5858248,2 3.3015873,2 C4.0173498,2 4.6031746,2.5898592 4.6031746,3.32432432 C4.6031746,4.05878945 4.0173498,4.64864865 3.3015873,4.64864865 Z"
-                id="Oval"></path>
-            </g>
-            <g id="Oval-Copy-8" opacity="0.8" transform="translate(147.000000, 93.000000)" fill="#999999">
-              <path
-                d="M3.3015873,6.64864865 C5.12500362,6.64864865 6.6031746,5.16029795 6.6031746,3.32432432 C6.6031746,1.4883507 5.12500362,1.42108547e-14 3.3015873,1.42108547e-14 C1.47817098,1.42108547e-14 1.08002496e-12,1.4883507 1.08002496e-12,3.32432432 C1.08002496e-12,5.16029795 1.47817098,6.64864865 3.3015873,6.64864865 Z M3.3015873,4.64864865 C2.5858248,4.64864865 2,4.05878945 2,3.32432432 C2,2.5898592 2.5858248,2 3.3015873,2 C4.0173498,2 4.6031746,2.5898592 4.6031746,3.32432432 C4.6031746,4.05878945 4.0173498,4.64864865 3.3015873,4.64864865 Z"
-                id="Oval-Copy"></path>
-            </g>
-            <g id="Oval-Copy-6" opacity="0.6" transform="translate(11.000000, 80.000000)" fill="#999999">
-              <path
-                d="M3.3015873,6.64864865 C5.12500362,6.64864865 6.6031746,5.16029795 6.6031746,3.32432432 C6.6031746,1.4883507 5.12500362,0 3.3015873,0 C1.47817098,0 1.08713039e-12,1.4883507 1.08713039e-12,3.32432432 C1.08713039e-12,5.16029795 1.47817098,6.64864865 3.3015873,6.64864865 Z M3.3015873,4.64864865 C2.5858248,4.64864865 2,4.05878945 2,3.32432432 C2,2.5898592 2.5858248,2 3.3015873,2 C4.0173498,2 4.6031746,2.5898592 4.6031746,3.32432432 C4.6031746,4.05878945 4.0173498,4.64864865 3.3015873,4.64864865 Z"
-                id="Oval-Copy-2"></path>
-            </g>
-            <g id="Oval-Copy-5" opacity="0.3" transform="translate(56.000000, 25.000000)" fill="#999999">
-              <path
-                d="M3.3015873,6.64864865 C5.12500362,6.64864865 6.6031746,5.16029795 6.6031746,3.32432432 C6.6031746,1.4883507 5.12500362,-5.32907052e-15 3.3015873,-5.32907052e-15 C1.47817098,-5.32907052e-15 1.07647224e-12,1.4883507 1.07647224e-12,3.32432432 C1.07647224e-12,5.16029795 1.47817098,6.64864865 3.3015873,6.64864865 Z M3.3015873,4.64864865 C2.5858248,4.64864865 2,4.05878945 2,3.32432432 C2,2.5898592 2.5858248,2 3.3015873,2 C4.0173498,2 4.6031746,2.5898592 4.6031746,3.32432432 C4.6031746,4.05878945 4.0173498,4.64864865 3.3015873,4.64864865 Z"
-                id="Oval-Copy-3"></path>
-            </g>
-            <g id="Path-2" opacity="0.4" transform="translate(88.000000, 164.000000)" fill="#999999">
-              <polygon id="Path" points="5.5 2.5 8 2.5 8 5.5 5.5 5.5 5.5 8 2.5 8 2.5 5.5 0 5.5 0 2.5 2.5 2.5 2.5 0 5.5 0"></polygon>
-            </g>
-            <g id="Path-2-Copy-3" opacity="0.4" transform="translate(15.000000, 57.000000)" fill="#999999">
-              <polygon id="Path" points="5.5 2.5 8 2.5 8 5.5 5.5 5.5 5.5 8 2.5 8 2.5 5.5 0 5.5 0 2.5 2.5 2.5 2.5 0 5.5 0"></polygon>
-            </g>
-            <g id="Path-Copy-5" opacity="0.3" transform="translate(129.000000, 155.000000)" fill="#999999">
-              <polygon id="Path-Copy" points="5.5 2.5 8 2.5 8 5.5 5.5 5.5 5.5 8 2.5 8 2.5 5.5 0 5.5 0 2.5 2.5 2.5 2.5 0 5.5 0"></polygon>
-            </g>
-            <g id="Path-Copy-4" opacity="0.9" transform="translate(77.000000, 12.000000)" fill="#999999">
-              <polygon id="Path-Copy-2" points="5.5 2.5 8 2.5 8 5.5 5.5 5.5 5.5 8 2.5 8 2.5 5.5 0 5.5 0 2.5 2.5 2.5 2.5 0 5.5 0"></polygon>
-            </g>
-            <g id="Path-Copy-6" opacity="0.9" transform="translate(146.000000, 56.000000)" fill="#999999">
-              <polygon id="Path-Copy-2" points="5.5 2.5 8 2.5 8 5.5 5.5 5.5 5.5 8 2.5 8 2.5 5.5 0 5.5 0 2.5 2.5 2.5 2.5 0 5.5 0"></polygon>
-            </g>
-          </g>
-        </svg>
-        <div className={styles.bounceFrame} />
+      <div className={styles.transcriptLoader}>
+        {Array.apply(null, Array(DEFAULT_LINES)).map((el, index) => (
+          <svg key={index} width="100%" height="50" viewBox="0 0 100% 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="16" y="8" width="90%" height="12" rx="4" fill="white" />
+            <rect x="16" y="30" width="60%" height="12" rx="4" fill="white" />
+          </svg>
+        ))}
       </div>
     );
   }