feat: Don't show "play" overlay when not hovered (#17676)

PostHog · Sep 28, 2023 · e5f54a2 · e5f54a2
1 parent 20faa20
commit e5f54a2
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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<SessionRecordingType>
@@ -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 = (
             <div className="flex flex-col justify-center items-center p-6 bg-bg-light rounded m-6 gap-2 max-w-120 shadow">
@@ -56,14 +60,17 @@ const PlayerFrameOverlayContent = ({
             <div className="SessionRecordingPlayer--buffering text-3xl italic font-medium text-white">Buffering…</div>
         )
     }
-    if (currentPlayerState === SessionPlayerState.PAUSE || currentPlayerState === SessionPlayerState.READY) {
+    if (pausedState) {
         content = <IconPlay className="text-6xl text-white" />
     }
     if (currentPlayerState === SessionPlayerState.SKIP) {
         content = <div className="text-3xl italic font-medium text-white">Skipping inactivity</div>
     }
     return content ? (
-        <div className="PlayerFrameOverlay__content" aria-busy={currentPlayerState === SessionPlayerState.BUFFER}>
+        <div
+            className={clsx('PlayerFrameOverlay__content', pausedState && 'PlayerFrameOverlay__content--only-hover')}
+            aria-busy={currentPlayerState === SessionPlayerState.BUFFER}
+        >
             {content}
         </div>
     ) : null