diff --git a/frontend/app/components/Session_/Player/Controls/CustomDragLayer.tsx b/frontend/app/components/Session_/Player/Controls/CustomDragLayer.tsx
new file mode 100644
index 000000000..c72f03ce2
--- /dev/null
+++ b/frontend/app/components/Session_/Player/Controls/CustomDragLayer.tsx
@@ -0,0 +1,98 @@
+import React, { memo } from 'react';
+import { useDragLayer } from "react-dnd";
+import Circle from './Circle'
+import type { CSSProperties, FC } from 'react'
+
+const layerStyles: CSSProperties = {
+ position: "fixed",
+ pointerEvents: "none",
+ zIndex: 100,
+ left: 0,
+ top: 0,
+ width: "100%",
+ height: "100%"
+ };
+
+const ItemTypes = {
+ BOX: 'box',
+}
+
+function getItemStyles(initialOffset, currentOffset, maxX, minX) {
+ if (!initialOffset || !currentOffset) {
+ return {
+ display: "none"
+ };
+ }
+ let { x, y } = currentOffset;
+ // if (isSnapToGrid) {
+ // x -= initialOffset.x;
+ // y -= initialOffset.y;
+ // [x, y] = [x, y];
+ // x += initialOffset.x;
+ // y += initialOffset.y;
+ // }
+ if (x > maxX) {
+ x = maxX;
+ }
+
+ if (x < minX) {
+ x = minX;
+ }
+ const transform = `translate(${x}px, ${initialOffset.y}px)`;
+ return {
+ transition: 'transform 0.1s ease-out',
+ transform,
+ WebkitTransform: transform
+ };
+}
+
+interface Props {
+ onDrag: (offset: { x: number, y: number } | null) => void;
+ maxX: number;
+ minX: number;
+}
+
+const CustomDragLayer: FC
= memo(function CustomDragLayer(props) {
+ const {
+ itemType,
+ isDragging,
+ item,
+ initialOffset,
+ currentOffset,
+ } = useDragLayer((monitor) => ({
+ item: monitor.getItem(),
+ itemType: monitor.getItemType(),
+ initialOffset: monitor.getInitialSourceClientOffset(),
+ currentOffset: monitor.getSourceClientOffset(),
+ isDragging: monitor.isDragging(),
+ }));
+
+ function renderItem() {
+ switch (itemType) {
+ case ItemTypes.BOX:
+ return ;
+ default:
+ return null;
+ }
+ }
+
+ if (!isDragging) {
+ return null;
+ }
+
+ if (isDragging) {
+ props.onDrag(currentOffset)
+ }
+
+ return (
+
+ );
+})
+
+export default CustomDragLayer;
\ No newline at end of file
diff --git a/frontend/app/components/Session_/Player/Controls/DraggableCircle.tsx b/frontend/app/components/Session_/Player/Controls/DraggableCircle.tsx
new file mode 100644
index 000000000..9bdf37651
--- /dev/null
+++ b/frontend/app/components/Session_/Player/Controls/DraggableCircle.tsx
@@ -0,0 +1,67 @@
+import React, { memo, FC, useEffect, useRef, CSSProperties } from 'react';
+import type { DragSourceMonitor } from 'react-dnd'
+import { useDrag } from 'react-dnd'
+import { getEmptyImage } from 'react-dnd-html5-backend'
+import Circle from './Circle'
+
+function getStyles(
+ left: number,
+ isDragging: boolean,
+ ): CSSProperties {
+ // const transform = `translate3d(${(left * 1161) / 100}px, -8px, 0)`
+ return {
+ position: 'absolute',
+ top: '-3px',
+ left: `${left}%`,
+ // transform,
+ // WebkitTransform: transform,
+ // IE fallback: hide the real node using CSS when dragging
+ // because IE will ignore our custom "empty image" drag preview.
+ opacity: isDragging ? 0 : 1,
+ height: isDragging ? 0 : '',
+ zIndex: '99999',
+ cursor: 'move'
+ }
+}
+
+const ItemTypes = {
+ BOX: 'box',
+}
+
+interface Props {
+ left: number;
+ top: number;
+ onDrop?: (item, monitor) => void;
+}
+
+const DraggableCircle: FC = memo(function DraggableCircle(props) {
+ const { left, top } = props
+ const [{ isDragging, item }, dragRef, preview] = useDrag(
+ () => ({
+ type: ItemTypes.BOX,
+ item: { left, top },
+ end: props.onDrop,
+ collect: (monitor: DragSourceMonitor) => ({
+ isDragging: monitor.isDragging(),
+ item: monitor.getItem(),
+ }),
+ }),
+ [left, top],
+ )
+
+ useEffect(() => {
+ preview(getEmptyImage(), { captureDraggingState: true })
+ }, [])
+
+ return (
+
+
+
+ );
+})
+
+export default DraggableCircle
\ No newline at end of file
diff --git a/frontend/app/components/Session_/Player/Controls/TimeTracker.js b/frontend/app/components/Session_/Player/Controls/TimeTracker.js
index be91f69fe..e3de669e5 100644
--- a/frontend/app/components/Session_/Player/Controls/TimeTracker.js
+++ b/frontend/app/components/Session_/Player/Controls/TimeTracker.js
@@ -4,10 +4,6 @@ import styles from './timeTracker.css';
const TimeTracker = ({ time, scale }) => (
-
{
// exception,
@@ -51,6 +53,8 @@ const getPointerIcon = (type) => {
}
@connectPlayer(state => ({
+ playing: state.playing,
+ time: state.time,
skipIntervals: state.skipIntervals,
events: state.eventList,
skip: state.skip,
@@ -72,6 +76,11 @@ const getPointerIcon = (type) => {
state.getIn([ 'sessions', 'current', 'returningLocationTime' ]),
}), { setTimelinePointer })
export default class Timeline extends React.PureComponent {
+ progressRef = React.createRef()
+ progressWidth = 0
+ seekTime = 0
+ wasPlaying = false
+
seekProgress = (e) => {
const { endTime } = this.props;
const p = e.nativeEvent.offsetX / e.target.offsetWidth;
@@ -88,11 +97,32 @@ export default class Timeline extends React.PureComponent {
componentDidMount() {
const { issues, events, fetchList, skipToIssue } = this.props;
const firstIssue = issues.get(0);
+ this.progressWidth = this.progressRef.current.offsetWidth;
+
if (firstIssue && skipToIssue) {
this.props.jump(firstIssue.time);
}
}
+ onDragEnd = (item, monitor) => {
+ this.props.jump(this.seekTime);
+ if (this.wasPlaying) {
+ this.props.togglePlay();
+ }
+ }
+
+ onDrag = (offset) => {
+ const { endTime } = this.props;
+
+ const p = (offset.x - 60) / this.progressRef.current.offsetWidth;
+ const time = Math.max(Math.round(p * endTime), 0);
+ this.seekTime = time;
+ if (this.props.playing) {
+ this.wasPlaying = true;
+ this.props.pause();
+ }
+ }
+
render() {
const {
events,
@@ -103,7 +133,7 @@ export default class Timeline extends React.PureComponent {
live,
logList,
exceptionsList,
- resourceList,
+ resourceList,
clickRageTime,
stackList,
fetchList,
@@ -111,12 +141,19 @@ export default class Timeline extends React.PureComponent {
} = this.props;
const scale = 100 / endTime;
+
return (
{ !live &&
}
-
+
+
+
{ skip && skipIntervals.map(interval =>
(
{
+ // TODO Find a better way to do this
+ document.addEventListener('keydown', onKeyDown);
+
+ return () => {
+ document.removeEventListener('keydown', onKeyDown);
+ }
+ }, [])
+
+ const onKeyDown = (e) => {
+ if (e.key === ' ') {
+ togglePlayAnimated()
+ }
+ }
+
const togglePlayAnimated = useCallback(() => {
setShowPlayOverlayIcon(true);
togglePlay();
- setTimeout(
- () => setShowPlayOverlayIcon(false),
- 800,
- );
+ setTimeout(() => setShowPlayOverlayIcon(false), 800);
}, []);
+
return (
{
return {
type: REFRESH_FILTER_OPTIONS
}
+}
+
+export const setScrollPosition = (scrollPosition) => {
+ return {
+ type: SET_SCROLL_POSITION,
+ scrollPosition,
+ }
}
\ No newline at end of file
diff --git a/frontend/app/initialize.js b/frontend/app/initialize.js
index dcfd01058..874bd0586 100644
--- a/frontend/app/initialize.js
+++ b/frontend/app/initialize.js
@@ -1,13 +1,9 @@
import './init';
-
import { render } from 'react-dom';
import { Provider } from 'react-redux';
-
import store from './store';
import Router from './Router';
import { StoreProvider, RootStore } from './mstore';
-import { ModalProvider } from './components/Modal';
-import ModalRoot from './components/Modal/ModalRoot';
import { HTML5Backend } from 'react-dnd-html5-backend'
import { DndProvider } from 'react-dnd'
@@ -17,10 +13,7 @@ document.addEventListener('DOMContentLoaded', () => {
- {/* */}
- {/* */}
- {/* */}
diff --git a/frontend/app/svg/icons/pie-chart-fill.svg b/frontend/app/svg/icons/pie-chart-fill.svg
index 6aa71eb89..e3e67bb5c 100644
--- a/frontend/app/svg/icons/pie-chart-fill.svg
+++ b/frontend/app/svg/icons/pie-chart-fill.svg
@@ -1,3 +1,3 @@
-