Add skip inactivity button in SSH session recording playback

web/packages/design/src/Icon/Icons.story.tsx

@@ -124,6 +124,7 @@ export const Icons = () => (
     <IconBox IconCmpt={Icon.EqualizersVertical} text="EqualizersVertical" />
     <IconBox IconCmpt={Icon.Expand} text="Expand" />
     <IconBox IconCmpt={Icon.Facebook} text="Facebook" />
+    <IconBox IconCmpt={Icon.FastForward} text="FastForward" />
     <IconBox IconCmpt={Icon.FilmStrip} text="FilmStrip" />
     <IconBox IconCmpt={Icon.FingerprintSimple} text="FingerprintSimple" />
     <IconBox IconCmpt={Icon.Floppy} text="Floppy" />

web/packages/design/src/Icon/Icons/FastForward.tsx

@@ -0,0 +1,78 @@
+/**
+ * Teleport
+ * Copyright (C) 2023  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/* MIT License
+
+Copyright (c) 2020 Phosphor Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+*/
+
+import { forwardRef } from 'react';
+
+import { Icon, IconProps } from '../Icon';
+
+/*
+
+THIS FILE IS GENERATED. DO NOT EDIT.
+
+*/
+
+export const FastForward = forwardRef<HTMLSpanElement, IconProps>(
+  ({ size = 24, color, ...otherProps }, ref) => (
+    <Icon
+      size={size}
+      color={color}
+      className="icon icon-fastforward"
+      {...otherProps}
+      ref={ref}
+    >
+      <path
+        stroke="#000"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M3 6.736v10.528a.741.741 0 0 0 1.142.618l8.268-5.264a.73.73 0 0 0 0-1.236L4.142 6.118A.741.741 0 0 0 3 6.736"
+      />
+      <path
+        stroke="#000"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M12.75 6.736v10.528a.74.74 0 0 0 1.142.618l8.268-5.264a.73.73 0 0 0 0-1.236l-8.268-5.264a.741.741 0 0 0-1.142.618"
+      />
+    </Icon>
+  )
+);

web/packages/design/src/Icon/index.ts

@@ -113,6 +113,7 @@ export { EnvelopeOpen } from './Icons/EnvelopeOpen';
 export { EqualizersVertical } from './Icons/EqualizersVertical';
 export { Expand } from './Icons/Expand';
 export { Facebook } from './Icons/Facebook';
+export { FastForward } from './Icons/FastForward';
 export { FilmStrip } from './Icons/FilmStrip';
 export { FingerprintSimple } from './Icons/FingerprintSimple';
 export { Floppy } from './Icons/Floppy';

web/packages/teleport/src/SessionRecordings/view/CurrentEventInfo.tsx

@@ -0,0 +1,134 @@
+/**
+ * Teleport
+ * Copyright (C) 2025  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+  type Ref,
+} from 'react';
+import styled from 'styled-components';
+
+import { ButtonPrimary } from 'design/Button';
+import { FastForward } from 'design/Icon';
+
+import {
+  SessionRecordingEventType,
+  type SessionRecordingEvent,
+} from 'teleport/services/recordings';
+import { formatSessionRecordingDuration } from 'teleport/SessionRecordings/list/RecordingItem';
+
+export interface CurrentEventInfoHandle {
+  setTime: (time: number) => void;
+}
+
+interface CurrentEventInfoProps {
+  events: SessionRecordingEvent[];
+  onSeek: (time: number) => void;
+  ref?: Ref<CurrentEventInfoHandle>;
+}
+
+const EventsList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${props => props.theme.space[2]}px;
+  position: absolute;
+  top: ${props => props.theme.space[4]}px;
+  right: ${props => props.theme.space[4]}px;
+  z-index: 2;
+`;
+
+export function CurrentEventInfo({
+  events,
+  onSeek,
+  ref,
+}: CurrentEventInfoProps) {
+  const [currentEvents, setCurrentEvents] = useState<SessionRecordingEvent[]>(
+    []
+  );
+  const currentEventsRef = useRef<SessionRecordingEvent[]>([]);
+
+  useImperativeHandle(ref, () => ({
+    setTime(time: number) {
+      const eventsInTimePeriod = events.filter(
+        e => e.startTime <= time && e.endTime >= time
+      );
+
+      const hasChanged =
+        eventsInTimePeriod.length !== currentEventsRef.current.length ||
+        eventsInTimePeriod.some(
+          (event, index) => event !== currentEventsRef.current[index]
+        );
+
+      if (hasChanged) {
+        currentEventsRef.current = eventsInTimePeriod;
+        setCurrentEvents(eventsInTimePeriod);
+      }
+    },
+  }));
+
+  const handleSkipToEnd = useCallback(
+    (time: number) => {
+      onSeek(time + 1);
+    },
+    [onSeek]
+  );
+
+  const items = useMemo(() => {
+    if (currentEvents.length === 0) {
+      return null;
+    }
+
+    const items: ReactNode[] = [];
+
+    for (const [index, event] of currentEvents.entries()) {
+      if (event.type !== SessionRecordingEventType.Inactivity) {
+        continue;
+      }
+
+      items.push(
+        <ButtonPrimary
+          key={`event-${index}-${event.type}`}
+          onClick={() => {
+            handleSkipToEnd(event.endTime);
+          }}
+          px={2}
+        >
+          Skip {formatSessionRecordingDuration(event.endTime - event.startTime)}{' '}
+          of inactivity
+          <FastForward size="small" ml={2} />
+        </ButtonPrimary>
+      );
+    }
+
+    if (items.length === 0) {
+      return null;
+    }
+
+    return items;
+  }, [currentEvents, handleSkipToEnd]);
+
+  if (currentEvents.length === 0) {
+    return null;
+  }
+
+  return <EventsList>{items}</EventsList>;
+}

web/packages/teleport/src/SessionRecordings/view/RecordingPlayer.tsx

@@ -23,7 +23,10 @@ import styled from 'styled-components';
 import Flex from 'design/Flex';
 import Indicator from 'design/Indicator';
 
-import type { RecordingType } from 'teleport/services/recordings';
+import type {
+  RecordingType,
+  SessionRecordingEvent,
+} from 'teleport/services/recordings';
 import { RECORDING_TYPES_WITH_METADATA } from 'teleport/services/recordings/recordings';
 import { DesktopPlayer } from 'teleport/SessionRecordings/view/DesktopPlayer';
 import { TtyRecordingPlayer } from 'teleport/SessionRecordings/view/player/tty/TtyRecordingPlayer';
@@ -43,6 +46,7 @@ interface RecordingPlayerProps {
   fullscreen?: boolean;
   initialCols?: number;
   initialRows?: number;
+  events?: SessionRecordingEvent[];
   ref?: RefObject<PlayerHandle>;
 }
 
@@ -75,6 +79,7 @@ export function RecordingPlayer({
   recordingType,
   initialCols,
   initialRows,
+  events,
   ref,
 }: RecordingPlayerProps) {
   if (recordingType === 'desktop') {
@@ -121,6 +126,7 @@ export function RecordingPlayer({
             onToggleTimeline={onToggleTimeline}
             initialCols={initialCols}
             initialRows={initialRows}
+            events={events}
             ref={ref}
           />
         </Suspense>

web/packages/teleport/src/SessionRecordings/view/RecordingWithMetadata.tsx

@@ -147,6 +147,7 @@ export function RecordingWithMetadata({
           onTimeChange={handleTimeChange}
           initialCols={data.metadata.startCols}
           initialRows={data.metadata.startRows}
+          events={data.metadata.events}
           ref={playerRef}
         />
       </Player>

web/packages/teleport/src/SessionRecordings/view/player/RecordingPlayer.tsx

@@ -31,6 +31,11 @@ import Box from 'web/packages/design/src/Box';
 import Flex from 'web/packages/design/src/Flex';
 import { Pause, Play } from 'web/packages/design/src/Icon';
 
+import type { SessionRecordingEvent } from 'teleport/services/recordings';
+import {
+  CurrentEventInfo,
+  type CurrentEventInfoHandle,
+} from 'teleport/SessionRecordings/view/CurrentEventInfo';
 import type { Player } from 'teleport/SessionRecordings/view/player/Player';
 import {
   PlayerControls,
@@ -58,6 +63,7 @@ export interface RecordingPlayerProps<
   endEventType: TEndEventType;
   decodeEvent: (buffer: ArrayBuffer) => TEvent;
   ref: RefObject<PlayerHandle>;
+  events?: SessionRecordingEvent[];
   ws: WebSocket;
 }
 
@@ -74,13 +80,15 @@ export function RecordingPlayer<
   onToggleFullscreen,
   onToggleSidebar,
   onToggleTimeline,
+  events,
   ref,
   ws,
 }: RecordingPlayerProps<TEvent>) {
   const [playerState, setPlayerState] = useState(PlayerState.Loading);
 
   const [showPlayButton, setShowPlayButton] = useState(true);
 
+  const eventInfoRef = useRef<CurrentEventInfoHandle>(null);
   const controlsRef = useRef<PlayerControlsHandle>(null);
   const playerRef = useRef<HTMLDivElement>(null);
 
@@ -95,12 +103,13 @@ export function RecordingPlayer<
     });
 
     stream.on('time', time => {
-      if (!controlsRef.current) {
+      if (!controlsRef.current || !eventInfoRef.current) {
         return;
       }
 
       controlsRef.current.setTime(time);
       onTimeChange(time);
+      eventInfoRef.current.setTime(time);
     });
 
     stream.loadInitial();
@@ -161,7 +170,14 @@ export function RecordingPlayer<
         borderColor="spotBackground.1"
         borderRadius={4}
         overflow="hidden"
+        position="relative"
       >
+        <CurrentEventInfo
+          events={events}
+          onSeek={handleSeek}
+          ref={eventInfoRef}
+        />
+
         {showPlayButton && (
           <PlayButton onClick={handlePlay}>
             <AdjustedPlay size="extra-large" />