diff --git a/frontend/app/components/Session_/Player/Controls/TimeTooltip.tsx b/frontend/app/components/Session_/Player/Controls/TimeTooltip.tsx
deleted file mode 100644
index fe22c4ea9..000000000
--- a/frontend/app/components/Session_/Player/Controls/TimeTooltip.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-// @ts-ignore
-import { Duration } from 'luxon';
-import { connect } from 'react-redux';
-// @ts-ignore
-import stl from './timeline.module.css';
-
-function TimeTooltip({ time, offset, isVisible, liveTimeTravel }: { time: number; offset: number; isVisible: boolean, liveTimeTravel: boolean }) {
- const duration = Duration.fromMillis(time).toFormat(`${liveTimeTravel ? '-' : ''}mm:ss`);
- return (
-
- {!time ? 'Loading' : duration}
-
- );
-}
-
-export default connect((state) => {
- const { time = 0, offset = 0, isVisible } = state.getIn(['sessions', 'timeLineTooltip']);
- return { time, offset, isVisible };
-})(TimeTooltip);
diff --git a/frontend/app/components/Session_/Player/Controls/components/NoteTooltip.tsx b/frontend/app/components/Session_/Player/Controls/components/NoteTooltip.tsx
new file mode 100644
index 000000000..ad3de3079
--- /dev/null
+++ b/frontend/app/components/Session_/Player/Controls/components/NoteTooltip.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { Icon, Button, Checkbox } from 'UI';
+import { Duration } from 'luxon';
+import { connect } from 'react-redux';
+import stl from './styles.module.css';
+
+interface Props {
+ offset: number;
+ isVisible: boolean;
+ time: number;
+}
+
+const TAGS = ['QUERY', 'ISSUE', 'TASK', 'OTHER'];
+
+function NoteTooltip({ offset, isVisible, time }: Props) {
+ const duration = Duration.fromMillis(time).toFormat('mm:ss');
+
+ const stopEvents = (e: any) => {
+ e.stopPropagation();
+ };
+
+ return (
+
+
+
+
Add Note
+
+
+ {`at ${duration}`}
+
+
+
+
+
+
+
+
text field
+
+
+ {TAGS.map((tag) => (
+
{tag}
+ ))}
+
+
+
+
+
+
+
+ Visible to the team
+
+
+
+
+
+ {!time ? 'Loading' : duration}
+
+ );
+}
+
+export default connect((state) => {
+ const { time = 0, offset = 0, isVisible } = state.getIn(['sessions', 'timeLineTooltip']);
+ return { time, offset, isVisible };
+})(TimeTooltip);
diff --git a/frontend/app/components/Session_/Player/Controls/components/TooltipContainer.tsx b/frontend/app/components/Session_/Player/Controls/components/TooltipContainer.tsx
index 19396fbc6..8488fa848 100644
--- a/frontend/app/components/Session_/Player/Controls/components/TooltipContainer.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/TooltipContainer.tsx
@@ -1,5 +1,6 @@
import React from 'react'
-import TimeTooltip from '../TimeTooltip';
+import TimeTooltip from './TimeTooltip';
+import NoteTooltip from './NoteTooltip';
import store from 'App/store';
import { Provider } from 'react-redux';
@@ -7,7 +8,10 @@ function TooltipContainer({ live }: { live: boolean }) {
return (
-
+ <>
+
+
+
)
}
diff --git a/frontend/app/components/Session_/Player/Controls/components/styles.module.css b/frontend/app/components/Session_/Player/Controls/components/styles.module.css
new file mode 100644
index 000000000..bba5d3057
--- /dev/null
+++ b/frontend/app/components/Session_/Player/Controls/components/styles.module.css
@@ -0,0 +1,52 @@
+
+.timeTooltip {
+ position: absolute;
+ padding: 0.25rem;
+ transition-property: all;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 150ms;
+ background: black;
+ top: -35px;
+ color: white;
+
+ &:after {
+ content:'';
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ width: 0;
+ height: 0;
+ border-top: solid 5px black;
+ border-left: solid 5px transparent;
+ border-right: solid 5px transparent;
+ }
+}
+
+.noteTooltip {
+ position: absolute;
+ padding: 1rem;
+ transition-property: all;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 150ms;
+ background: #F5F5F5;
+ top: -35px;
+ color: black;
+ border-radius: 12px;
+ cursor: default;
+ box-shadow: 0 4px 20px 4px rgb(0 20 60 / 10%), 0 4px 80px -8px rgb(0 20 60 / 20%);
+}
+
+.arrow {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ width: 0;
+ height: 0;
+ border-top: solid 10px #f5f5f5;
+ border-left: solid 10px transparent;
+ border-right: solid 10px transparent;
+}
diff --git a/frontend/app/components/Session_/Subheader.js b/frontend/app/components/Session_/Subheader.js
index c378386ee..1f36382c7 100644
--- a/frontend/app/components/Session_/Subheader.js
+++ b/frontend/app/components/Session_/Subheader.js
@@ -1,80 +1,91 @@
import React from 'react';
import { Icon } from 'UI';
import Autoplay from './Autoplay';
-import Bookmark from 'Shared/Bookmark'
+import Bookmark from 'Shared/Bookmark';
import SharePopup from '../shared/SharePopup/SharePopup';
-import { connectPlayer } from 'Player';
+import { connectPlayer, pause } from 'Player';
import copy from 'copy-to-clipboard';
import { Tooltip } from 'react-tippy';
import Issues from './Issues/Issues';
function SubHeader(props) {
- const [isCopied, setCopied] = React.useState(false);
+ const [isCopied, setCopied] = React.useState(false);
- const isAssist = window.location.pathname.includes('/assist/');
+ const isAssist = window.location.pathname.includes('/assist/');
- const location = props.currentLocation && props.currentLocation.length > 60 ? `${props.currentLocation.slice(0, 60)}...` : props.currentLocation
- return (
-
- {location && (
-
{
- copy(props.currentLocation);
- setCopied(true)
- setTimeout(() => setCopied(false), 5000)
- }}
- >
-
-
- {location}
-
-
- )}
- {!isAssist ? (
-
-
- {props.jiraConfig && props.jiraConfig.token && }
-
-
- }
- />
-
-
-
-
-
-
-
-
+ {location && (
+
{
+ copy(props.currentLocation);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 5000);
+ }}
+ >
+
+
+ {location}
+
- )
+ )}
+ {!isAssist ? (
+
+
+
+ Add note
+
+
+ {props.jiraConfig && props.jiraConfig.token && }
+
+
+ }
+ />
+
+
+
+
+
+
+