feat: notebook replay comments can just be comments

frontend/src/scenes/notebooks/Nodes/NotebookNodePlaylist.tsx

@@ -2,8 +2,6 @@ import { BuiltLogic, useActions, useValues } from 'kea'
 import { PostHogErrorBoundary } from 'posthog-js/react'
 import { useEffect, useMemo } from 'react'
 
-import { IconComment } from '@posthog/icons'
-
 import { JSONContent } from 'lib/components/RichContentEditor/types'
 import { useOnMountEffect } from 'lib/hooks/useOnMountEffect'
 import { createPostHogWidgetNode } from 'scenes/notebooks/Nodes/NodeWrapper'
@@ -51,8 +49,7 @@ const Component = ({
         [playerKey, universalFilters, pinned]
     )
 
-    const { setActions, insertAfter, insertReplayCommentByTimestamp, setMessageListeners, scrollIntoView } =
-        useActions(notebookNodeLogic)
+    const { setActions, insertAfter, setMessageListeners, scrollIntoView } = useActions(notebookNodeLogic)
 
     const logic = sessionRecordingsPlaylistLogic(recordingPlaylistLogicProps)
     const { activeSessionRecording } = useValues(logic)
@@ -83,16 +80,6 @@ const Component = ({
                               })
                           },
                       },
-                      {
-                          text: 'Comment',
-                          icon: <IconComment />,
-                          onClick: () => {
-                              if (activeSessionRecording.id) {
-                                  const time = getReplayLogic(activeSessionRecording.id)?.values.currentPlayerTime
-                                  insertReplayCommentByTimestamp(time ?? 0, activeSessionRecording.id)
-                              }
-                          },
-                      },
                   ]
                 : []
         )

frontend/src/scenes/notebooks/Nodes/NotebookNodeRecording.tsx

@@ -1,11 +1,10 @@
 import { useActions, useValues } from 'kea'
 import { useEffect } from 'react'
 
-import { IconComment, IconPerson } from '@posthog/icons'
+import { IconPerson } from '@posthog/icons'
 import { LemonInput, LemonSwitch } from '@posthog/lemon-ui'
 
 import { NotFound } from 'lib/components/NotFound'
-import { JSONContent } from 'lib/components/RichContentEditor/types'
 import { useOnMountEffect } from 'lib/hooks/useOnMountEffect'
 import { colonDelimitedDuration } from 'lib/utils'
 import { parseTimestampToMs } from 'lib/utils/timestamps'
@@ -18,7 +17,6 @@ import {
 import { sessionRecordingDataLogic } from 'scenes/session-recordings/player/sessionRecordingDataLogic'
 import {
     SessionRecordingPlayerMode,
-    getCurrentPlayerTime,
     sessionRecordingPlayerLogic,
 } from 'scenes/session-recordings/player/sessionRecordingPlayerLogic'
 import {
@@ -48,14 +46,7 @@ const Component = ({ attributes }: NotebookNodeProps<NotebookNodeRecordingAttrib
     }
 
     const { expanded } = useValues(notebookNodeLogic)
-    const {
-        setActions,
-        insertAfter,
-        insertReplayCommentByTimestamp,
-        setMessageListeners,
-        setExpanded,
-        scrollIntoView,
-    } = useActions(notebookNodeLogic)
+    const { setActions, insertAfter, setMessageListeners, setExpanded, scrollIntoView } = useActions(notebookNodeLogic)
 
     const { sessionPlayerMetaData, sessionPlayerMetaDataLoading, sessionPlayerData } = useValues(
         sessionRecordingDataLogic(recordingLogicProps)
@@ -71,15 +62,6 @@ const Component = ({ attributes }: NotebookNodeProps<NotebookNodeRecordingAttrib
     useEffect(() => {
         const person = sessionPlayerMetaData?.person
         setActions([
-            {
-                text: 'Comment',
-                icon: <IconComment />,
-                onClick: () => {
-                    const time = getCurrentPlayerTime(recordingLogicProps) * 1000
-
-                    insertReplayCommentByTimestamp(time, id)
-                },
-            },
             person
                 ? {
                       text: `View ${asDisplay(person)}`,
@@ -212,12 +194,3 @@ export function sessionRecordingPlayerProps(id: SessionRecordingId): SessionReco
         playerKey: `notebook-${id}`,
     }
 }
-
-export function buildRecordingContent(sessionRecordingId: string): JSONContent {
-    return {
-        type: 'ph-recording',
-        attrs: {
-            id: sessionRecordingId,
-        },
-    }
-}

frontend/src/scenes/notebooks/Nodes/NotebookNodeReplayTimestamp.tsx

@@ -6,7 +6,6 @@ import { useMemo } from 'react'
 
 import { LemonButton } from '@posthog/lemon-ui'
 
-import { JSONContent } from 'lib/components/RichContentEditor/types'
 import { dayjs } from 'lib/dayjs'
 import { urls } from 'scenes/urls'
 
@@ -101,16 +100,3 @@ export const NotebookNodeReplayTimestamp = Node.create({
 export function formatTimestamp(time: number): string {
     return dayjs.duration(time, 'milliseconds').format('HH:mm:ss').replace(/^00:/, '').trim()
 }
-
-export function buildTimestampCommentContent(attrs: NotebookNodeReplayTimestampAttrs): JSONContent {
-    return {
-        type: 'paragraph',
-        content: [
-            {
-                type: NotebookNodeType.ReplayTimestamp,
-                attrs,
-            },
-            { type: 'text', text: ' ' },
-        ],
-    }
-}

frontend/src/scenes/notebooks/Nodes/notebookNodeLogic.ts

@@ -51,10 +51,6 @@ export const notebookNodeLogic = kea<notebookNodeLogicType>([
         insertAfter: (content: JSONContent) => ({ content }),
         insertAfterLastNodeOfType: (nodeType: string, content: JSONContent) => ({ content, nodeType }),
         updateAttributes: (attributes: Partial<NotebookNodeAttributes<any>>) => ({ attributes }),
-        insertReplayCommentByTimestamp: (timestamp: number, sessionRecordingId: string) => ({
-            timestamp,
-            sessionRecordingId,
-        }),
         insertOrSelectNextLine: true,
         setPreviousNode: (node: RichContentNode | null) => ({ node }),
         setNextNode: (node: RichContentNode | null) => ({ node }),
@@ -240,19 +236,6 @@ export const notebookNodeLogic = kea<notebookNodeLogicType>([
             }
             values.notebookLogic.actions.insertAfterLastNodeOfType(nodeType, content, insertionPosition)
         },
-
-        insertReplayCommentByTimestamp: ({ timestamp, sessionRecordingId }) => {
-            if (!props.getPos) {
-                return
-            }
-            const insertionPosition = props.getPos()
-            values.notebookLogic.actions.insertReplayCommentByTimestamp({
-                timestamp,
-                sessionRecordingId,
-                knownStartingPosition: insertionPosition,
-                nodeId: values.nodeId,
-            })
-        },
         insertOrSelectNextLine: () => {
             const pos = props.getPos?.()
             if (!pos || !values.isEditable) {

frontend/src/scenes/notebooks/Notebook/notebookLogic.ts

@@ -11,10 +11,6 @@ import { accessLevelSatisfied } from 'lib/components/AccessControlAction'
 import { EditorRange, JSONContent } from 'lib/components/RichContentEditor/types'
 import { base64Decode, base64Encode, downloadFile, slugify } from 'lib/utils'
 import { commentsLogic } from 'scenes/comments/commentsLogic'
-import {
-    NotebookNodeReplayTimestampAttrs,
-    buildTimestampCommentContent,
-} from 'scenes/notebooks/Nodes/NotebookNodeReplayTimestamp'
 import { urls } from 'scenes/urls'
 
 import { sidePanelStateLogic } from '~/layout/navigation-3000/sidepanel/sidePanelStateLogic'
@@ -133,12 +129,6 @@ export const notebookLogic = kea<notebookLogicType>([
             nodeType,
             knownStartingPosition,
         }),
-        insertReplayCommentByTimestamp: (options: {
-            timestamp: number
-            sessionRecordingId: string
-            knownStartingPosition?: number
-            nodeId?: string
-        }) => options,
         setShowHistory: (showHistory: boolean) => ({ showHistory }),
         setTableOfContents: (tableOfContents: TableOfContentData) => ({ tableOfContents }),
         setTextSelection: (selection: number | EditorRange) => ({ selection }),
@@ -523,36 +513,6 @@ export const notebookLogic = kea<notebookLogicType>([
                 }
             )
         },
-        insertReplayCommentByTimestamp: async ({ timestamp, sessionRecordingId, knownStartingPosition, nodeId }) => {
-            await runWhenEditorIsReady(
-                () => !!values.editor,
-                () => {
-                    let insertionPosition =
-                        knownStartingPosition || values.editor?.findNodePositionByAttrs({ id: sessionRecordingId })
-                    let nextNode = values.editor?.nextNode(insertionPosition)
-                    while (nextNode && values.editor?.hasChildOfType(nextNode.node, NotebookNodeType.ReplayTimestamp)) {
-                        const candidateTimestampAttributes = nextNode.node.content.firstChild
-                            ?.attrs as NotebookNodeReplayTimestampAttrs
-                        const nextNodePlaybackTime = candidateTimestampAttributes.playbackTime || -1
-                        if (nextNodePlaybackTime <= timestamp) {
-                            insertionPosition = nextNode.position
-                            nextNode = values.editor?.nextNode(insertionPosition)
-                        } else {
-                            nextNode = null
-                        }
-                    }
-
-                    values.editor?.insertContentAfterNode(
-                        insertionPosition,
-                        buildTimestampCommentContent({
-                            playbackTime: timestamp,
-                            sessionRecordingId,
-                            sourceNodeId: nodeId,
-                        })
-                    )
-                }
-            )
-        },
         setLocalContent: async ({ updateEditor, jsonContent, skipCapture }, breakpoint) => {
             if (
                 values.mode !== 'canvas' &&

frontend/src/scenes/notebooks/Suggestions/insertionSuggestionsLogic.ts

@@ -3,7 +3,6 @@ import { actions, events, kea, listeners, path, reducers, selectors } from 'kea'
 import { RichContentEditorType, RichContentNode } from 'lib/components/RichContentEditor/types'
 
 import { InsertionSuggestion } from './InsertionSuggestion'
-import ReplayTimestampSuggestion from './ReplayTimestamp'
 import SlashCommands from './SlashCommands'
 import type { insertionSuggestionsLogicType } from './insertionSuggestionsLogicType'
 
@@ -19,7 +18,7 @@ export const insertionSuggestionsLogic = kea<insertionSuggestionsLogicType>([
     }),
     reducers({
         suggestions: [
-            [ReplayTimestampSuggestion] as InsertionSuggestion[],
+            [] as InsertionSuggestion[],
             {
                 setSuggestions: (_, { suggestions }) => suggestions,
             },

frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx

@@ -12,6 +12,7 @@ import {
     EmojiCommentOnRecordingButton,
 } from 'scenes/session-recordings/player/commenting/CommentOnRecordingButton'
 import {
+    ModesThatCanHavePlayerControllerButtons,
     SessionRecordingPlayerMode,
     sessionRecordingPlayerLogic,
 } from 'scenes/session-recordings/player/sessionRecordingPlayerLogic'
@@ -155,15 +156,17 @@ export function PlayerController(): JSX.Element {
                     <SeekSkip direction="forward" />
                 </div>
                 <div className="flex justify-end items-center">
-                    {!isCinemaMode && playerMode === SessionRecordingPlayerMode.Standard && (
+                    {!isCinemaMode && ModesThatCanHavePlayerControllerButtons.includes(playerMode) && (
                         <>
                             <CommentOnRecordingButton />
                             <EmojiCommentOnRecordingButton />
                             <Screenshot />
                             <ClipRecording />
-                            {playlistLogic ? <PlayerUpNext playlistLogic={playlistLogic} /> : undefined}
                         </>
                     )}
+                    {playlistLogic && ModesThatCanHavePlayerControllerButtons.includes(playerMode) ? (
+                        <PlayerUpNext playlistLogic={playlistLogic} />
+                    ) : undefined}
                     {playerMode === SessionRecordingPlayerMode.Standard && <CinemaMode />}
                     <FullScreen />
                 </div>

frontend/src/scenes/session-recordings/player/player-meta/PlayerMetaLinks.tsx

@@ -115,17 +115,11 @@ export function PlayerMetaLinks({ size }: { size: PlayerMetaBreakpoints }): JSX.
 }
 
 const AddToNotebookButton = ({ fullWidth = false }: Pick<LemonButtonProps, 'fullWidth'>): JSX.Element => {
-    const { sessionRecordingId, logicProps } = useValues(sessionRecordingPlayerLogic)
+    const { sessionRecordingId } = useValues(sessionRecordingPlayerLogic)
     const { setPause } = useActions(sessionRecordingPlayerLogic)
 
     const { closeSessionPlayer } = useActions(sessionPlayerModalLogic())
 
-    const getCurrentPlayerTime = (): number => {
-        // NOTE: We pull this value at call time as otherwise it would trigger re-renders if pulled from the hook
-        const playerTime = sessionRecordingPlayerLogic.findMounted(logicProps)?.values.currentPlayerTime || 0
-        return Math.floor(playerTime / 1000)
-    }
-
     return (
         <NotebookSelectButton
             fullWidth={fullWidth}
@@ -136,19 +130,7 @@ const AddToNotebookButton = ({ fullWidth = false }: Pick<LemonButtonProps, 'full
                 attrs: { id: sessionRecordingId, __init: { expanded: true } },
             }}
             onClick={() => setPause()}
-            onNotebookOpened={(theNotebookLogic, theNodeLogic) => {
-                const time = getCurrentPlayerTime() * 1000
-
-                if (theNodeLogic) {
-                    // Node already exists, we just add a comment
-                    theNodeLogic.actions.insertReplayCommentByTimestamp(time, sessionRecordingId)
-                    return
-                }
-                theNotebookLogic.actions.insertReplayCommentByTimestamp({
-                    timestamp: time,
-                    sessionRecordingId,
-                })
-
+            onNotebookOpened={() => {
                 closeSessionPlayer()
                 personsModalLogic.findMounted()?.actions.closeModal()
             }}

frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.ts

@@ -113,6 +113,7 @@ export enum SessionRecordingPlayerMode {
 }
 
 const ModesThatCanBeMarkedViewed = [SessionRecordingPlayerMode.Standard, SessionRecordingPlayerMode.Notebook]
+export const ModesThatCanHavePlayerControllerButtons = ModesThatCanBeMarkedViewed
 
 export interface SessionRecordingPlayerLogicProps extends SessionRecordingDataLogicProps {
     playerKey: string