@playkit-js/transcript 3.5.21 → 3.5.22-canary.0-d2a2936

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.5.21",
+  "version": "3.5.22-canary.0-d2a2936",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,
@@ -85,7 +85,7 @@
     "name": "playkit-js-transcript",
     "dependencies": {
       "playkit-kaltura-cuepoints": "3.0.13",
-      "playkit-ui-managers": "1.5.4"
+      "playkit-ui-managers": "1.5.5"
     }
   }
 }

package/src/components/transcript/transcript.scss

@@ -44,6 +44,10 @@
     font-family: sans-serif;
     font-style: normal;
   }
+
+  *:focus-visible:not(input) {
+    outline: 1px solid $tab-focus-color;
+  }
 }
 
 .global-container {

package/src/components/transcript/transcript.tsx

@@ -113,6 +113,8 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
   private _bottomAutoscrollEdge: number = 0;
   private _thirdOfWidgetHeight: number = 0;
 
+  private _resizeObserver: ResizeObserver | null = null;
+
   state: TranscriptState = {
     isAutoScrollEnabled: true,
     widgetWidth: 0,
@@ -120,7 +122,16 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
   };
 
   componentDidMount(): void {
-    this._setWidgetSize();
+    if (window.ResizeObserver) {
+      // observe transcript root element size changes
+      this._resizeObserver = new ResizeObserver(() => {
+        this._setWidgetSize();
+      });
+      this._resizeObserver.observe(this._widgetRootRef!);
+    } else {
+      // use player size to define transcript root element size
+      this._setWidgetSize();
+    }
   }
 
   componentDidUpdate(previousProps: Readonly<TranscriptProps>, previousState: Readonly<TranscriptState>): void {
@@ -136,12 +147,19 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
       this._debounced.findSearchMatches();
     }
 
-    if (previousProps.playerWidth !== playerWidth) {
+    if (!this._resizeObserver && previousProps.playerWidth !== playerWidth) {
       // re-calculate wiget size if player size changed
       this._setWidgetSize();
     }
   }
 
+  componentWillUnmount(): void {
+    if (this._resizeObserver) {
+      this._resizeObserver?.disconnect();
+      this._resizeObserver = null;
+    }
+  }
+
   private _enableAutoScroll = (event: OnClickEvent, byKeyboard?: boolean) => {
     event.preventDefault();
     if (this.state.isAutoScrollEnabled) {

package/src/transcript-plugin.tsx

@@ -181,7 +181,8 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
   };
 
   private _makeCaptionKey = (language?: string, label?: string): string => {
-    return `${language}-${label}`;
+    // use 'default' language as fallback when language argument is undefined or empty string
+    return `${language || 'default'}-${label}`;
   };
 
   private _activatePlugin = (isFirstOpen = false) => {
@@ -229,6 +230,9 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
   };
 
   private _handleDetach = () => {
+    if (this._isDetached()) {
+      this._handleAttach(CloseDetachTypes.bringBack);
+    }
     this.sidePanelsManager?.detachItem(this._transcriptPanel, {
       width: 600,
       height: 600,
@@ -315,7 +319,7 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
           />
         ) as any;
       },
-      presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live, ReservedPresetNames.Ads],
+      presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live, ReservedPresetNames.Ads, 'MiniAudioUI'],
       position: position,
       expandMode: expandMode === SidePanelModes.ALONGSIDE ? SidePanelModes.ALONGSIDE : SidePanelModes.OVER
     }) as number;
@@ -389,6 +393,10 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
     this._pluginState = PluginStates.CLOSED;
   };
 
+  public isPluginAvailable = () => {
+    return this._captionMap.size > 0;
+  };
+
   static isValid(): boolean {
     return true;
   }