diff --git a/frontend/src/scenes/session-recordings/player/PlayerFrame.scss b/frontend/src/scenes/session-recordings/player/PlayerFrame.scss index 67b9410516d9f..78bbe50f457d0 100644 --- a/frontend/src/scenes/session-recordings/player/PlayerFrame.scss +++ b/frontend/src/scenes/session-recordings/player/PlayerFrame.scss @@ -10,9 +10,6 @@ align-items: center; position: relative; - .posthog-3000 & { - background-color: var(--bg-3000); - } .PlayerFrame__content { position: absolute; diff --git a/frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.scss b/frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.scss index b09f3af62dee6..4ff8665202c6b 100644 --- a/frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.scss +++ b/frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.scss @@ -18,11 +18,17 @@ align-items: center; z-index: 1; - transition: background-color 100ms; - background-color: rgba(0, 0, 0, 0.08); + transition: opacity 100ms; + background-color: rgba(0, 0, 0, 0.15); + opacity: 0.8; &:hover { - background-color: rgba(0, 0, 0, 0.15); + opacity: 1; + } + + &--only-hover { + // When paused only show on hover to allow people to take screenshots + opacity: 0; } } } diff --git a/frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.tsx b/frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.tsx index 4081daff18d3a..2ef95db9eb3e7 100644 --- a/frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.tsx +++ b/frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.tsx @@ -9,6 +9,7 @@ import { LemonButton } from 'lib/lemon-ui/LemonButton' import './PlayerFrameOverlay.scss' import { PlayerUpNext } from './PlayerUpNext' import { useState } from 'react' +import clsx from 'clsx' export interface PlayerFrameOverlayProps extends SessionRecordingPlayerLogicProps { nextSessionRecording?: Partial @@ -20,6 +21,9 @@ const PlayerFrameOverlayContent = ({ currentPlayerState: SessionPlayerState }): JSX.Element | null => { let content = null + const pausedState = + currentPlayerState === SessionPlayerState.PAUSE || currentPlayerState === SessionPlayerState.READY + if (currentPlayerState === SessionPlayerState.ERROR) { content = (
@@ -56,14 +60,17 @@ const PlayerFrameOverlayContent = ({
Buffering…
) } - if (currentPlayerState === SessionPlayerState.PAUSE || currentPlayerState === SessionPlayerState.READY) { + if (pausedState) { content = } if (currentPlayerState === SessionPlayerState.SKIP) { content =
Skipping inactivity
} return content ? ( -
+
{content}
) : null