/** * Copyright (c) Microsoft Corporation. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ import { ActionEntry } from '../../../server/trace/viewer/traceModel'; import { Boundaries, Size } from '../geometry'; import './snapshotTab.css'; import * as React from 'react'; import { useMeasure } from './helpers'; import { msToString } from '../../uiUtils'; import type { Point } from '../../../common/types'; export const SnapshotTab: React.FunctionComponent<{ actionEntry: ActionEntry | undefined, snapshotSize: Size, selection: { pageId: string, time: number } | undefined, boundaries: Boundaries, }> = ({ actionEntry, snapshotSize, selection, boundaries }) => { const [measure, ref] = useMeasure(); const [snapshotIndex, setSnapshotIndex] = React.useState(0); const snapshots = actionEntry ? (actionEntry.snapshots || []) : []; const { pageId, time } = selection || { pageId: undefined, time: 0 }; const iframeRef = React.createRef(); React.useEffect(() => { if (!iframeRef.current) return; let snapshotUri = undefined; let point: Point | undefined = undefined; if (pageId) { snapshotUri = `${pageId}?time=${time}`; } else if (actionEntry) { const snapshot = snapshots[snapshotIndex]; if (snapshot && snapshot.snapshotName) { snapshotUri = `${actionEntry.metadata.pageId}?name=${snapshot.snapshotName}`; if (snapshot.snapshotName.includes('action')) point = actionEntry.metadata.point; } } const snapshotUrl = snapshotUri ? `${window.location.origin}/snapshot/${snapshotUri}` : 'data:text/html,'; try { (iframeRef.current.contentWindow as any).showSnapshot(snapshotUrl, { point }); } catch (e) { } }, [actionEntry, snapshotIndex, pageId, time]); const scale = Math.min(measure.width / snapshotSize.width, measure.height / snapshotSize.height); const scaledSize = { width: snapshotSize.width * scale, height: snapshotSize.height * scale, }; return

{ selection &&

{msToString(selection.time - boundaries.minimum)}

}{!selection && snapshots.map((snapshot, index) => { return

setSnapshotIndex(index)}> {snapshot.title}

}) }

; };