From 55bd28e383b7b679c0f449a76af37e9165ca460b Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Tue, 3 Jun 2025 13:25:39 +0200 Subject: [PATCH] bla bla --- .../Session_/Player/Controls/Controls.tsx | 132 +++++++++++++++--- .../Session_/Player/Controls/Timeline.tsx | 6 + .../components/Session_/Player/Overlay.tsx | 1 - .../SimilarSessions/SimilarSessionsButton.tsx | 5 + .../app/components/Session_/Subheader.tsx | 2 + frontend/app/components/Survey/Survey.tsx | 5 + frontend/app/components/Survey/index.ts | 1 + 7 files changed, 129 insertions(+), 23 deletions(-) create mode 100644 frontend/app/components/Session_/SimilarSessions/SimilarSessionsButton.tsx create mode 100644 frontend/app/components/Survey/Survey.tsx create mode 100644 frontend/app/components/Survey/index.ts diff --git a/frontend/app/components/Session_/Player/Controls/Controls.tsx b/frontend/app/components/Session_/Player/Controls/Controls.tsx index 8aa152b61..d182130bc 100644 --- a/frontend/app/components/Session_/Player/Controls/Controls.tsx +++ b/frontend/app/components/Session_/Player/Controls/Controls.tsx @@ -18,6 +18,7 @@ import { LaunchStateShortcut, LaunchXRaShortcut, } from 'Components/Session_/Player/Controls/components/KeyboardHelp'; +import { signalService } from 'App/services'; import { CONSOLE, GRAPHQL, @@ -29,19 +30,21 @@ import { STACKEVENTS, STORAGE, BACKENDLOGS, - LONG_TASK -} from "App/mstore/uiPlayerStore"; +} from 'App/mstore/uiPlayerStore'; import { Icon } from 'UI'; import LogsButton from 'App/components/Session/Player/SharedComponents/BackendLogs/LogsButton'; -import { CodeOutlined, DashboardOutlined, ClusterOutlined } from '@ant-design/icons'; -import { ArrowDownUp, ListCollapse, Merge, Waypoints, Timer } from 'lucide-react' +import { + CodeOutlined, + DashboardOutlined, + ClusterOutlined, +} from '@ant-design/icons'; +import { ArrowDownUp, ListCollapse, Merge, Waypoints } from 'lucide-react'; import ControlButton from './ControlButton'; import Timeline from './Timeline'; import PlayerControls from './components/PlayerControls'; import styles from './controls.module.css'; import { useTranslation } from 'react-i18next'; -import SummaryButton from './SummaryButton'; export const SKIP_INTERVALS = { 2: 2e3, @@ -56,15 +59,30 @@ export const SKIP_INTERVALS = { function getStorageName(type: any) { switch (type) { case STORAGE_TYPES.REDUX: - return { name: 'Redux', icon: }; + return { + name: 'Redux', + icon: , + }; case STORAGE_TYPES.MOBX: - return { name: 'Mobx', icon: }; + return { + name: 'Mobx', + icon: , + }; case STORAGE_TYPES.VUEX: - return { name: 'Vuex', icon: }; + return { + name: 'Vuex', + icon: , + }; case STORAGE_TYPES.NGRX: - return { name: 'NgRx', icon: }; + return { + name: 'NgRx', + icon: , + }; case STORAGE_TYPES.ZUSTAND: - return { name: 'Zustand', icon: }; + return { + name: 'Zustand', + icon: , + }; case STORAGE_TYPES.NONE: return { name: 'State', icon: }; default: @@ -81,6 +99,7 @@ function Controls({ setActiveTab, activeTab }: any) { sessionStore, userStore, } = useStore(); + const [mounted, setMounted] = React.useState(false); const permissions = userStore.account.permissions || []; const disableDevtools = userStore.isEnterprise && @@ -115,6 +134,7 @@ function Controls({ setActiveTab, activeTab }: any) { const disabled = disableDevtools || messagesLoading || inspectorMode || markedTargets; const sessionTz = session?.timezone; + const sessionId = session?.sessionId; const nextHandler = () => { history.push(withSiteId(sessionRoute(nextSessionId), siteId)); @@ -135,19 +155,63 @@ function Controls({ setActiveTab, activeTab }: any) { disableDevtools, }); + React.useEffect(() => { + setMounted(true); + }, []); + + React.useEffect(() => { + if (mounted) { + signalService.send( + { + source: 'speed', + value: speed, + }, + sessionId, + ); + } + }, [speed]); + const forthTenSeconds = () => { // @ts-ignore player.jumpInterval(SKIP_INTERVALS[skipInterval]); + signalService.send( + { + source: 'fast_forward', + }, + sessionId, + ); }; const backTenSeconds = () => { // @ts-ignore player.jumpInterval(-SKIP_INTERVALS[skipInterval]); + signalService.send( + { + source: 'rewind', + }, + sessionId, + ); }; const toggleBottomTools = (blockName: number) => { player.toggleInspectorMode(false); toggleBottomBlock(blockName); + signalService.send( + { + source: getBlockLabel(blockName)!, + }, + sessionId, + ); + }; + + const togglePlay = () => { + player.togglePlay(); + signalService.send( + { + source: playing ? 'pause' : 'play', + }, + sessionId, + ); }; const state = completed @@ -175,7 +239,7 @@ function Controls({ setActiveTab, activeTab }: any) { playButton={ } @@ -265,7 +329,7 @@ const DevtoolsButtons = observer( const integratedServices = integrationsStore.integrations.backendLogIntegrations; - const showIcons = activeTab === 'EXPORT' + const showIcons = activeTab === 'EXPORT'; const labels = { console: { icon: , @@ -295,9 +359,10 @@ const DevtoolsButtons = observer( icon: , label: t('Long Tasks'), }, - } + }; // @ts-ignore - const getLabel = (block: string) => labels[block][showIcons ? 'icon' : 'label'] + const getLabel = (block: string) => + labels[block][showIcons ? 'icon' : 'label']; return ( <> @@ -360,14 +425,6 @@ const DevtoolsButtons = observer( label={getLabel('performance')} /> - toggleBottomTools(LONG_TASK)} - active={bottomBlock === LONG_TASK && !inspectorMode} - label={getLabel('longTask')} - /> - {showGraphql && ( void; + withToggle?: boolean; + onToggle?: () => void; + toggleValue?: boolean; +}) { + const { t } = useTranslation(); + const [isHovered, setHovered] = React.useState(false); + + return ( +
+
setHovered(true)} + onMouseLeave={() => setHovered(false)} + > + {withToggle ? ( + + ) : null} + +
{t('Summary AI')}
+
+
+ ); +} + export const gradientButton = { border: 'double 1px transparent', borderRadius: '60px', diff --git a/frontend/app/components/Session_/Player/Controls/Timeline.tsx b/frontend/app/components/Session_/Player/Controls/Timeline.tsx index 81cddcee7..985035f91 100644 --- a/frontend/app/components/Session_/Player/Controls/Timeline.tsx +++ b/frontend/app/components/Session_/Player/Controls/Timeline.tsx @@ -16,6 +16,7 @@ import { import stl from './timeline.module.css' import TooltipContainer from './components/TooltipContainer'; import CustomDragLayer, { OnDragCallback } from './components/CustomDragLayer'; +import { signalService } from 'App/services'; function Timeline({ isMobile }: { isMobile: boolean }) { const { player, store } = useContext(PlayerContext); @@ -32,6 +33,7 @@ function Timeline({ isMobile }: { isMobile: boolean }) { const highlightEnabled = uiPlayerStore.highlightSelection.enabled; const { playing, skipToIssue, ready, endTime, devtoolsLoading, domLoading } = store.get(); + const sessionId = sessionStore.current.sessionId; const progressRef = useRef(null); const timelineRef = useRef(null); @@ -67,6 +69,10 @@ function Timeline({ isMobile }: { isMobile: boolean }) { const time = Math.max(Math.round(p * endTime), 0); debouncedJump(time); hideTimeTooltip(); + signalService.send({ + source: 'jump', + value: time, + }, sessionId) if (playing) { setWasPlaying(true); player.pause(); diff --git a/frontend/app/components/Session_/Player/Overlay.tsx b/frontend/app/components/Session_/Player/Overlay.tsx index 015b7af1b..37a6e549f 100644 --- a/frontend/app/components/Session_/Player/Overlay.tsx +++ b/frontend/app/components/Session_/Player/Overlay.tsx @@ -5,7 +5,6 @@ import React from 'react'; import { Link2 } from 'lucide-react'; import copy from 'copy-to-clipboard'; import { toast } from 'react-toastify'; - import { PlayerContext } from 'App/components/Session/playerContext'; import { CONSOLE, diff --git a/frontend/app/components/Session_/SimilarSessions/SimilarSessionsButton.tsx b/frontend/app/components/Session_/SimilarSessions/SimilarSessionsButton.tsx new file mode 100644 index 000000000..c33cc133b --- /dev/null +++ b/frontend/app/components/Session_/SimilarSessions/SimilarSessionsButton.tsx @@ -0,0 +1,5 @@ +function SimilarSessionsButton() { + return null +} + +export default SimilarSessionsButton; diff --git a/frontend/app/components/Session_/Subheader.tsx b/frontend/app/components/Session_/Subheader.tsx index 313b346ca..107b7bf0e 100644 --- a/frontend/app/components/Session_/Subheader.tsx +++ b/frontend/app/components/Session_/Subheader.tsx @@ -27,6 +27,7 @@ import QueueControls from './QueueControls'; import HighlightButton from './Highlight/HighlightButton'; import ShareModal from '../shared/SharePopup/SharePopup'; import { useTranslation } from 'react-i18next'; +import SimilarSessionsButton from './SimilarSessions/SimilarSessionsButton'; const disableDevtools = 'or_devtools_uxt_toggle'; @@ -167,6 +168,7 @@ function SubHeader(props) { )} style={{ width: 'max-content' }} > +