@playkit-js/transcript 3.5.38 → 3.5.39-canary.0-c715d39
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.
- package/CHANGELOG.md +2 -0
- package/dist/playkit-transcript.js +1 -1
- package/dist/playkit-transcript.js.map +1 -1
- package/package.json +1 -1
- package/src/components/caption/caption.tsx +6 -0
- package/src/components/transcript/transcript.tsx +2 -0
- package/src/events/events.ts +1 -0
- package/src/transcript-plugin.tsx +5 -0
package/package.json
CHANGED
|
@@ -80,6 +80,12 @@ export class Caption extends Component<ExtendedCaptionProps> {
|
|
|
80
80
|
this._captionRef?.focus();
|
|
81
81
|
}
|
|
82
82
|
});
|
|
83
|
+
|
|
84
|
+
eventManager?.listen(player, TranscriptEvents.TRANSCRIPT_SCROLLING, () => {
|
|
85
|
+
if(this._hasSearchMatch()) {
|
|
86
|
+
this._captionRef?.scrollIntoView()
|
|
87
|
+
}
|
|
88
|
+
})
|
|
83
89
|
}
|
|
84
90
|
|
|
85
91
|
shouldComponentUpdate(nextProps: ExtendedCaptionProps) {
|
|
@@ -71,6 +71,7 @@ export interface TranscriptProps {
|
|
|
71
71
|
isMobile?: boolean;
|
|
72
72
|
playerWidth?: number;
|
|
73
73
|
onJumpToSearchMatch: () => void;
|
|
74
|
+
onScrollToSearchMatch: () => void;
|
|
74
75
|
focusPluginButton: (event: KeyboardEvent) => void;
|
|
75
76
|
textTracks: Array<core.TextTrack>;
|
|
76
77
|
changeLanguage: (textTrack: core.TextTrack) => void;
|
|
@@ -224,6 +225,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
|
|
|
224
225
|
|
|
225
226
|
private _onSearch = (search: string) => {
|
|
226
227
|
this.setState({search});
|
|
228
|
+
this.props.onScrollToSearchMatch()
|
|
227
229
|
};
|
|
228
230
|
|
|
229
231
|
private _findSearchMatches = () => {
|
package/src/events/events.ts
CHANGED
|
@@ -9,6 +9,7 @@ export const TranscriptEvents = {
|
|
|
9
9
|
TRANSCRIPT_POPOUT_CLOSE: 'transcript_popout_close',
|
|
10
10
|
TRANSCRIPT_POPOUT_DRAG: 'transcript_popout_drag',
|
|
11
11
|
TRANSCRIPT_POPOUT_RESIZE: 'transcript_popout_resize',
|
|
12
|
+
TRANSCRIPT_SCROLLING: 'transcript_scrolling',
|
|
12
13
|
|
|
13
14
|
TRANSCRIPT_TO_SEARCH_MATCH: 'transcript_to_search_match' // internal event
|
|
14
15
|
};
|
|
@@ -284,6 +284,10 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
|
|
|
284
284
|
this.dispatchEvent(TranscriptEvents.TRANSCRIPT_TO_SEARCH_MATCH);
|
|
285
285
|
};
|
|
286
286
|
|
|
287
|
+
private _scrollToMatch = () => {
|
|
288
|
+
this.dispatchEvent(TranscriptEvents.TRANSCRIPT_SCROLLING);
|
|
289
|
+
}
|
|
290
|
+
|
|
287
291
|
private _changeLanguage = (textTrack: core.TextTrack) => {
|
|
288
292
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
289
293
|
// @ts-expect-error - Property 'selectTrack' does not exist on type 'Player'
|
|
@@ -340,6 +344,7 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
|
|
|
340
344
|
this._handleAttach(CloseDetachTypes.arrow);
|
|
341
345
|
}}
|
|
342
346
|
onJumpToSearchMatch={this._toSearchMatch}
|
|
347
|
+
onScrollToSearchMatch={this._scrollToMatch}
|
|
343
348
|
//@ts-ignore
|
|
344
349
|
focusPluginButton={(event: KeyboardEvent) => this.upperBarManager!.focusPluginButton(this._transcriptIcon, event)}
|
|
345
350
|
textTracks={this._getTextTracks()}
|