From e196643c8f7da00413933adff6ccf7b6a1ad3e04 Mon Sep 17 00:00:00 2001 From: Delirium Date: Fri, 13 Sep 2024 14:37:20 +0200 Subject: [PATCH] UI patch 4 (#2572) * ui: spot related fixes * ui: remove random logs * ui: fix insights mapping * ui: hide doc link for spot stuff * ui: force worker for hls --- .../Dashboard/components/WidgetOptions.tsx | 1 - .../Session_/EventsBlock/EventsBlock.tsx | 1 - .../components/Panels/SpotNetwork.tsx | 1 + .../components/SpotVideoContainer.tsx | 91 +++++++++++-------- .../DevTools/NetworkPanel/NetworkPanel.tsx | 3 + .../FetchDetailsModal/FetchDetailsModal.tsx | 5 +- .../FetchBasicDetails/FetchBasicDetails.tsx | 21 ++--- .../components/FetchTabs/FetchTabs.tsx | 8 +- frontend/app/mstore/types/widget.ts | 2 +- spot/entrypoints/popup/Settings.tsx | 9 +- 10 files changed, 74 insertions(+), 68 deletions(-) diff --git a/frontend/app/components/Dashboard/components/WidgetOptions.tsx b/frontend/app/components/Dashboard/components/WidgetOptions.tsx index 0c39e1e65..a992ef3a6 100644 --- a/frontend/app/components/Dashboard/components/WidgetOptions.tsx +++ b/frontend/app/components/Dashboard/components/WidgetOptions.tsx @@ -16,7 +16,6 @@ function WidgetOptions(props: Props) { const metric: any = metricStore.instance; const handleChange = (value: any) => { - console.log(`selected ${value}`); metric.update({ metricFormat: value }); }; diff --git a/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx b/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx index e30d55e36..79045ebde 100644 --- a/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx +++ b/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx @@ -157,7 +157,6 @@ function EventsBlock(props: IProps) { React.useEffect(() => { if (scroller.current) { if (!mouseOver) { - console.log('scrolling to index', currentTimeEventIndex, scroller.current); scroller.current.scrollToIndex(currentTimeEventIndex, { align: 'center' }); } } diff --git a/frontend/app/components/Spots/SpotPlayer/components/Panels/SpotNetwork.tsx b/frontend/app/components/Spots/SpotPlayer/components/Panels/SpotNetwork.tsx index 0f346999c..818d61854 100644 --- a/frontend/app/components/Spots/SpotPlayer/components/Panels/SpotNetwork.tsx +++ b/frontend/app/components/Spots/SpotPlayer/components/Panels/SpotNetwork.tsx @@ -24,6 +24,7 @@ function SpotNetwork({ panelHeight, onClose }: { panelHeight: number, onClose: ( resourceListNow={[]} websocketList={[]} websocketListNow={[]} + isSpot /* @ts-ignore */ player={{ jump: (t) => spotPlayerStore.setTime(t) }} activeOutsideIndex={index} diff --git a/frontend/app/components/Spots/SpotPlayer/components/SpotVideoContainer.tsx b/frontend/app/components/Spots/SpotPlayer/components/SpotVideoContainer.tsx index 18370dfb3..0fe7a81ea 100644 --- a/frontend/app/components/Spots/SpotPlayer/components/SpotVideoContainer.tsx +++ b/frontend/app/components/Spots/SpotPlayer/components/SpotVideoContainer.tsx @@ -1,8 +1,9 @@ +import { InfoCircleOutlined, PlayCircleOutlined } from '@ant-design/icons'; +import { Alert, Button } from 'antd'; import Hls from 'hls.js'; import { observer } from 'mobx-react-lite'; import React from 'react'; -import {Alert, Button} from 'antd'; -import {PlayCircleOutlined, InfoCircleOutlined} from '@ant-design/icons'; + import spotPlayerStore from '../spotPlayerStore'; const base64toblob = (str: string) => { @@ -33,7 +34,9 @@ function SpotVideoContainer({ checkReady: () => Promise; }) { const [prevIsProcessing, setPrevIsProcessing] = React.useState(false); - const [processingState, setProcessingState] = React.useState(ProcessingState.Unchecked); + const [processingState, setProcessingState] = React.useState( + ProcessingState.Unchecked + ); const [isLoaded, setLoaded] = React.useState(false); const videoRef = React.useRef(null); const playbackTime = React.useRef(0); @@ -69,13 +72,15 @@ function SpotVideoContainer({ clearInterval(int); } }); - }, 5000) + }, 5000); } else { setProcessingState(ProcessingState.Ready); } import('hls.js').then(({ default: Hls }) => { if (Hls.isSupported() && videoRef.current) { - const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); + const isSafari = /^((?!chrome|android).)*safari/i.test( + navigator.userAgent + ); if (isSafari) { setLoaded(true); } else { @@ -85,9 +90,7 @@ function SpotVideoContainer({ } if (streamFile) { const hls = new Hls({ - // not needed for small videos (we have 3 min limit and 720 quality with half kbps) - enableWorker: false, - // = 1MB, should be enough + enableWorker: true, maxBufferSize: 1000 * 1000, }); const url = URL.createObjectURL(base64toblob(streamFile)); @@ -124,7 +127,11 @@ function SpotVideoContainer({ }; check(); } - } else if (streamFile && videoRef.current && videoRef.current.canPlayType('application/vnd.apple.mpegurl')) { + } else if ( + streamFile && + videoRef.current && + videoRef.current.canPlayType('application/vnd.apple.mpegurl') + ) { setLoaded(true); videoRef.current.src = URL.createObjectURL(base64toblob(streamFile)); startPlaying(); @@ -185,40 +192,44 @@ function SpotVideoContainer({ } }, [spotPlayerStore.playbackRate]); - const reloadPage = () => { window.location.reload(); }; + const reloadPage = () => { + window.location.reload(); + }; return ( <> -
- {processingState === ProcessingState.Processing ? ( - } - /> - ) : prevIsProcessing ? ( - } - onClick={reloadPage} - className='ml-2' - > - Play Now - - } - /> - ) : null} -
- +
+ {processingState === ProcessingState.Processing ? ( + } + /> + ) : prevIsProcessing ? ( + } + onClick={reloadPage} + className="ml-2" + > + Play Now + + } + /> + ) : null} +
{!isLoaded && (
diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx index 4b4e7906f..28a638f6f 100644 --- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx +++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx @@ -310,6 +310,7 @@ interface Props { panelHeight: number; onClose?: () => void; activeOutsideIndex?: number; + isSpot?: boolean; } export const NetworkPanelComp = observer( @@ -331,6 +332,7 @@ export const NetworkPanelComp = observer( zoomEndTs, onClose, activeOutsideIndex, + isSpot, }: Props) => { const { showModal } = useModal(); const [sortBy, setSortBy] = useState('time'); @@ -500,6 +502,7 @@ export const NetworkPanelComp = observer( setIsDetailsModalActive(true); showModal( Network Request - {isXHR && } + {isXHR && } {rows && rows.length > 0 && (
diff --git a/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx b/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx index bb21965ff..22248a623 100644 --- a/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx +++ b/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx @@ -24,23 +24,16 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
Name
{resource.url}
-
-
Type
- - {resource.type} - -
- {resource.method && (
Request Method
- {resource.method} @@ -53,7 +46,7 @@ function FetchBasicDetails({ resource, timestamp }: Props) { @@ -64,7 +57,7 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
Type
- {resource.type} @@ -73,7 +66,7 @@ function FetchBasicDetails({ resource, timestamp }: Props) { {!!resource.decodedBodySize && (
Size
- {formatBytes(resource.decodedBodySize)} @@ -84,7 +77,7 @@ function FetchBasicDetails({ resource, timestamp }: Props) { {!!_duration && (
Duration
- {_duration} ms @@ -94,7 +87,7 @@ function FetchBasicDetails({ resource, timestamp }: Props) { {timestamp && (
Time
- {timestamp} diff --git a/frontend/app/components/shared/FetchDetailsModal/components/FetchTabs/FetchTabs.tsx b/frontend/app/components/shared/FetchDetailsModal/components/FetchTabs/FetchTabs.tsx index 14d13c613..afffa4a4a 100644 --- a/frontend/app/components/shared/FetchDetailsModal/components/FetchTabs/FetchTabs.tsx +++ b/frontend/app/components/shared/FetchDetailsModal/components/FetchTabs/FetchTabs.tsx @@ -71,8 +71,9 @@ function parseRequestResponse( interface Props { resource: { request: string, response: string }; + isSpot?: boolean; } -function FetchTabs({ resource }: Props) { +function FetchTabs({ resource, isSpot }: Props) { const [activeTab, setActiveTab] = useState(HEADERS); const onTabClick = (tab: string) => setActiveTab(tab); const [jsonRequest, setJsonRequest] = useState(null); @@ -84,7 +85,6 @@ function FetchTabs({ resource }: Props) { useEffect(() => { const { request, response } = resource; - console.log(resource, request, response) parseRequestResponse( request, setRequestHeaders, @@ -119,7 +119,7 @@ function FetchTabs({ resource }: Props) { } size="small" - show={!jsonRequest && !stringRequest} + show={!isSpot && !jsonRequest && !stringRequest} // animatedIcon="no-results" >
@@ -151,7 +151,7 @@ function FetchTabs({ resource }: Props) {
} size="small" - show={!jsonResponse && !stringResponse} + show={!isSpot && !jsonResponse && !stringResponse} // animatedIcon="no-results" >
diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts index f067a4e6d..8495f1aed 100644 --- a/frontend/app/mstore/types/widget.ts +++ b/frontend/app/mstore/types/widget.ts @@ -303,7 +303,7 @@ export default class Widget { } else if (this.metricType === INSIGHTS) { _data['issues'] = data .filter((i: any) => i.change > 0 || i.change < 0) -x .map( + .map( (i: any) => new InsightIssue(i.category, i.name, i.ratio, i.oldValue, i.value, i.change, i.isNew) ); diff --git a/spot/entrypoints/popup/Settings.tsx b/spot/entrypoints/popup/Settings.tsx index ce24330c8..c74e39c18 100644 --- a/spot/entrypoints/popup/Settings.tsx +++ b/spot/entrypoints/popup/Settings.tsx @@ -13,15 +13,14 @@ function Settings({ goBack }: { goBack: () => void }) { onMount(() => { chrome.storage.local.get("settings", (data: any) => { if (data.settings) { + const ingest = data.settings.ingestPoint || "https://app.openreplay.com"; const devToolsEnabled = data.settings.consoleLogs && data.settings.networkLogs; setOpenInNewTab(data.settings.openInNewTab ?? false); setIncludeDevTools(devToolsEnabled); - setShowIngest(data.settings.showIngest ?? true); - setIngest(data.settings.ingestPoint || "https://app.openreplay.com"); - setTempIngest( - data.settings.ingestPoint || "https://app.openreplay.com", - ); + setIngest(ingest); + setTempIngest(ingest); + setShowIngest(ingest !== "https://app.openreplay.com"); setEditIngest(!data.settings.ingestPoint); } });