@playkit-js/transcript 3.4.2-canary.2-7cccf5e → 3.4.2-canary.4-77e14dc

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +3 -1
  2. package/dist/playkit-transcript.js +1 -1
  3. package/dist/playkit-transcript.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/components/autoscroll-button/AutoScrollIcon.tsx +15 -0
  6. package/src/components/autoscroll-button/autoscroll-button.scss +6 -3
  7. package/src/components/autoscroll-button/autoscroll-button.tsx +13 -22
  8. package/src/components/search/search.tsx +4 -4
  9. package/translations/en.i18n.json +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@playkit-js/transcript",
3
- "version": "3.4.2-canary.2-7cccf5e",
3
+ "version": "3.4.2-canary.4-77e14dc",
4
4
  "main": "dist/playkit-transcript.js",
5
5
  "license": "AGPL-3.0",
6
6
  "private": false,
package/src/components/autoscroll-button/AutoScrollIcon.tsx ADDED
@@ -0,0 +1,15 @@
1
+ import { h } from 'preact';
2
+
3
+ export const AutoScrollIcon = () => (
4
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
5
+ <path
6
+ 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"
7
+ fill="white"
8
+ />
9
+ <path
10
+ 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"
11
+ fill="white"
12
+ />
13
+ <rect x="10" y="10" width="4" height="4" rx="2" fill="white" />
14
+ </svg>
15
+ );
package/src/components/autoscroll-button/autoscroll-button.scss CHANGED
@@ -1,13 +1,16 @@
1
1
  @import '../../variables.scss';
2
2
 
3
- .autoscroll-button {
4
- opacity: 0;
3
+ .autoscroll-root {
5
4
  position: absolute;
6
5
  right: 12px;
7
6
  bottom: 25px;
8
- width: 32px;
7
+ width: auto;
9
8
  height: 32px;
10
9
  padding: 4px;
10
+ }
11
+
12
+ .autoscroll-button {
13
+ opacity: 0;
11
14
  border-radius: $roundness-1;
12
15
  border: none;
13
16
  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);
package/src/components/autoscroll-button/autoscroll-button.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import {h} from 'preact';
2
2
  import * as styles from './autoscroll-button.scss';
3
3
  import {A11yWrapper, OnClick} from '@playkit-js/common/dist/hoc/a11y-wrapper';
4
+ import {AutoScrollIcon} from "./AutoScrollIcon";
4
5
 
5
6
  const {withText, Text} = KalturaPlayer.ui.preacti18n;
6
7
  const {Tooltip} = KalturaPlayer.ui.components;
@@ -8,7 +9,7 @@ const {Tooltip} = KalturaPlayer.ui.components;
8
9
  interface AutoscrollButtonProps {
9
10
  onClick: OnClick;
10
11
  isAutoScrollEnabled: boolean;
11
- setAutoscrollButtonRef: (node: HTMLDivElement | null) => void;
12
+ setAutoscrollButtonRef: (node: HTMLButtonElement | null) => void;
12
13
  autoScrollLabel?: string;
13
14
  }
14
15
 
@@ -19,27 +20,17 @@ const translates = {
19
20
  export const AutoscrollButton = withText(translates)(
20
21
  ({onClick, isAutoScrollEnabled, setAutoscrollButtonRef, autoScrollLabel}: AutoscrollButtonProps) => {
21
22
  return (
22
- <A11yWrapper onClick={onClick}>
23
- <div
24
- className={`${styles.autoscrollButton} ${isAutoScrollEnabled ? '' : styles.autoscrollButtonVisible}`}
25
- tabIndex={isAutoScrollEnabled ? -1 : 1}
26
- aria-label={autoScrollLabel}
27
- ref={setAutoscrollButtonRef}>
28
- <Tooltip label={autoScrollLabel} type="left">
29
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
30
- <path
31
- 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"
32
- fill="white"
33
- />
34
- <path
35
- 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"
36
- fill="white"
37
- />
38
- <rect x="10" y="10" width="4" height="4" rx="2" fill="white" />
39
- </svg>
40
- </Tooltip>
41
- </div>
42
- </A11yWrapper>
23
+ <div className={styles.autoscrollRoot} tabIndex={isAutoScrollEnabled ? -1 : 1} aria-label={autoScrollLabel}>
24
+ <Tooltip label={autoScrollLabel} type="left">
25
+ <A11yWrapper onClick={onClick}>
26
+ <button
27
+ className={`${styles.autoscrollButton} ${isAutoScrollEnabled ? '' : styles.autoscrollButtonVisible}`}
28
+ ref={setAutoscrollButtonRef}>
29
+ <AutoScrollIcon/>
30
+ </button>
31
+ </A11yWrapper>
32
+ </Tooltip>
33
+ </div>
43
34
  );
44
35
  }
45
36
  );
package/src/components/search/search.tsx CHANGED
@@ -5,16 +5,16 @@ const {withText, Text} = KalturaPlayer.ui.preacti18n;
5
5
  const translates = ({activeSearchIndex, totalSearchResults}: SearchProps) => ({
6
6
  searchLabel: <Text id="transcript.search">Search in Transcript</Text>,
7
7
  clearSearchLabel: <Text id="transcript.clear_search">Clear search</Text>,
8
- nextMatchLabel: <Text id="transcript.next_search_match">Next</Text>,
9
- prevMatchLabel: <Text id="transcript.prev_search_match">Previous</Text>,
8
+ nextMatchLabel: <Text id="transcript.next_search_match">Next search result</Text>,
9
+ prevMatchLabel: <Text id="transcript.prev_search_match">Previous search result</Text>,
10
10
  searchResultsLabel: (
11
11
  <Text
12
- id="transcript.prev_search_match"
12
+ id="transcript.search_results"
13
13
  fields={{
14
14
  current: totalSearchResults > 0 ? activeSearchIndex : 0,
15
15
  total: totalSearchResults
16
16
  }}>
17
- {`Result ${totalSearchResults > 0 ? activeSearchIndex : 0} of ${totalSearchResults}`}
17
+ {`Search result ${totalSearchResults > 0 ? activeSearchIndex : 0} out of ${totalSearchResults}`}
18
18
  </Text>
19
19
  )
20
20
  });
package/translations/en.i18n.json CHANGED
@@ -8,9 +8,9 @@
8
8
  "download_transcript": "Download current transcript",
9
9
  "search": "Search in Transcript",
10
10
  "clear_search": "Clear search",
11
- "next_search_match": "Next",
12
- "prev_search_match": "Previous",
13
- "search_results": "Result {{current}} of {{total}}",
11
+ "next_search_match": "Next search result",
12
+ "prev_search_match": "Previous search result",
13
+ "search_results": "Search result {{current}} out of {{total}}",
14
14
  "auto_scroll": "Resume AutoScroll",
15
15
  "whoops": "Whoops!",
16
16
  "load_failed": "Failed to load transcript",