Minor code changes

Remove component memoization, it didn't work anyway and doesn't seem needed. We don't have anything particularly expensive to render here from React's perspective.

web/packages/teleport/src/DesktopSession/DesktopSession.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { Box, ButtonPrimary, ButtonSecondary, Flex, Indicator } from 'design';
 import { Info } from 'design/Alert';
@@ -272,7 +272,8 @@ export function DesktopSession(props: State) {
     if (!client) {
       return;
     }
-    const setResolution = tdpClientCanvasRef.current?.setResolution;
+    const setResolution = (spec: ClientScreenSpec) =>
+      tdpClientCanvasRef.current?.setResolution(spec);
     client.addListener(TdpClientEvent.TDP_CLIENT_SCREEN_SPEC, setResolution);
 
     return () => {

web/packages/teleport/src/Player/DesktopPlayer.tsx

@@ -26,7 +26,8 @@ import { TdpClientCanvasRef } from 'teleport/components/TdpClientCanvas/TdpClien
 import cfg from 'teleport/config';
 import { formatDisplayTime, StatusEnum } from 'teleport/lib/player';
 import { PlayerClient, TdpClientEvent } from 'teleport/lib/tdp';
-import type { ClientScreenSpec } from 'teleport/lib/tdp/codec';
+import { BitmapFrame } from 'teleport/lib/tdp/client';
+import type { ClientScreenSpec, PngFrame } from 'teleport/lib/tdp/codec';
 import { getHostName } from 'teleport/services/api';
 
 import ProgressBar from './ProgressBar';

web/packages/teleport/src/components/TdpClientCanvas/TdpClientCanvas.tsx

@@ -18,7 +18,6 @@
 
 import React, {
   forwardRef,
-  memo,
   useEffect,
   useImperativeHandle,
   useRef,
@@ -42,7 +41,27 @@ export interface TdpClientCanvasRef {
   focus(): void;
 }
 
-const TdpClientCanvas = forwardRef<TdpClientCanvasRef, Props>((props, ref) => {
+export const TdpClientCanvas = forwardRef<
+  TdpClientCanvasRef,
+  {
+    onKeyDown?(e: React.KeyboardEvent): void;
+    onKeyUp?(e: React.KeyboardEvent): void;
+    onBlur?(e: React.FocusEvent): void;
+    onMouseMove?(e: React.MouseEvent): void;
+    onMouseDown?(e: React.MouseEvent): void;
+    onMouseUp?(e: React.MouseEvent): void;
+    onMouseWheel?(e: WheelEvent): void;
+    onContextMenu?(e: React.MouseEvent): void;
+    /**
+     * Handles canvas resize events.
+     *
+     * This function is called whenever the canvas is resized,
+     * with a debounced delay of 250 ms to optimize performance.
+     */
+    onResize?(e: { width: number; height: number }): void;
+    style?: CSSProperties;
+  }
+>((props, ref) => {
   const {
     onKeyDown,
     onKeyUp,
@@ -141,25 +160,6 @@ const TdpClientCanvas = forwardRef<TdpClientCanvasRef, Props>((props, ref) => {
   );
 });
 
-export type Props = {
-  onKeyDown?(e: React.KeyboardEvent): void;
-  onKeyUp?(e: React.KeyboardEvent): void;
-  onBlur?(e: React.FocusEvent): void;
-  onMouseMove?(e: React.MouseEvent): void;
-  onMouseDown?(e: React.MouseEvent): void;
-  onMouseUp?(e: React.MouseEvent): void;
-  onMouseWheel?(e: WheelEvent): void;
-  onContextMenu?(e: React.MouseEvent): void;
-  /**
-   * Handles canvas resize events.
-   *
-   * This function is called whenever the canvas is resized,
-   * with a debounced delay of 250 ms to optimize performance.
-   */
-  onResize?(e: { width: number; height: number }): void;
-  style?: CSSProperties;
-};
-
 interface Pointer {
   data: ImageData | boolean;
   hotspot_x?: number;
@@ -240,5 +240,3 @@ function makeBitmapFrameRenderer(
 
   return frame => bitmapBuffer.push(frame);
 }
-
-export default memo(TdpClientCanvas);

web/packages/teleport/src/components/TdpClientCanvas/index.ts

@@ -16,6 +16,6 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import TdpClientCanvas from './TdpClientCanvas';
+import { TdpClientCanvas } from './TdpClientCanvas';
 
 export default TdpClientCanvas;