diff --git a/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js b/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js index 6624e28d1..72ab7ea7d 100644 --- a/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js +++ b/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js @@ -11,7 +11,7 @@ import { setEditNoteTooltip } from 'Duck/sessions'; // TODO: incapsulate toggler in LocationEvent @withToggle("showLoadInfo", "toggleLoadInfo") -@connect(state => ({members: state.getIn(['members', 'list']), currentUserId: state.getIn(['account', 'id']) }), { setEditNoteTooltip }) +@connect(state => ({members: state.getIn(['members', 'list']), currentUserId: state.getIn(['user', 'account', 'id']) }), { setEditNoteTooltip }) class EventGroupWrapper extends React.Component { toggleLoadInfo = (e) => { @@ -52,6 +52,8 @@ class EventGroupWrapper extends React.Component { const whiteBg = isLastInGroup && event.type !== TYPES.LOCATION || (!isLastEvent && event.type !== TYPES.LOCATION) const safeRef = String(event.referrer || ''); + + console.log(this.props.currentUserId, event.userId) return (
{ props.onEdit({ isVisible: true, @@ -40,14 +41,14 @@ function NoteEvent(props: Props) { isPublic: props.isPublic, message: props.message, sessionId: props.sessionId, - noteId: props.noteId + noteId: props.noteId, }, }); }; const onCopy = () => { copy( - `${window.location.origin}${session(props.sessionId)}${ + `${window.location.origin}/${window.location.pathname.split('/')[1]}${session(props.sessionId)}${ props.timestamp > 0 ? '?jumpto=' + props.timestamp : '' }` ); @@ -70,7 +71,7 @@ function NoteEvent(props: Props) { } }; const menuItems = [ - { icon: 'pencil', text: 'Edit', onClick: onEdit, disabled: props.onEdit }, + { icon: 'pencil', text: 'Edit', onClick: onEdit, disabled: props.noEdit }, { icon: 'link-45deg', text: 'Copy URL', onClick: onCopy }, { icon: 'trash', text: 'Delete', onClick: onDelete }, ]; @@ -101,8 +102,13 @@ function NoteEvent(props: Props) { {props.tags.map((tag) => (
{tag}
diff --git a/frontend/app/components/Session_/Player/Controls/Timeline.js b/frontend/app/components/Session_/Player/Controls/Timeline.js index 8059629fd..c63324fac 100644 --- a/frontend/app/components/Session_/Player/Controls/Timeline.js +++ b/frontend/app/components/Session_/Player/Controls/Timeline.js @@ -227,10 +227,12 @@ export default class Timeline extends React.PureComponent { background: 'white', zIndex: 3, pointerEvents: 'none', + height: 10, + width: 16, left: `${getTimelinePosition(note.timestamp, scale)}%`, }} > - +
) : null)} diff --git a/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx b/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx index 7ae2b702d..38df4dc34 100644 --- a/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx +++ b/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx @@ -33,7 +33,7 @@ function CreateNote({ const [text, setText] = React.useState(''); const [isPublic, setPublic] = React.useState(false); const [tags, setTags] = React.useState([]); - const [useTimestamp, setUseTs] = React.useState(false); + const [useTimestamp, setUseTs] = React.useState(true); const { notesStore } = useStore(); @@ -105,11 +105,9 @@ function CreateNote({ }; const tagActive = (tag: iTag) => tags.includes(tag); - const removeTag = (tag: iTag) => { - setTags(tags.filter((t) => t !== tag)); - }; + const addTag = (tag: iTag) => { - setTags([...tags, tag]); + setTags([tag]); }; return ( @@ -145,6 +143,7 @@ function CreateNote({ placeholder="Note..." rows={3} value={text} + autoFocus onChange={(e) => setText(e.target.value)} style={{ border: 'solid thin #ddd', @@ -162,9 +161,11 @@ function CreateNote({ style={{ background: tagActive(tag) ? tagProps[tag] : 'rgba(0,0,0, 0.38)', userSelect: 'none', + minWidth: 60, + textAlign: 'center' }} - className="cursor-pointer rounded-xl px-2 py-1 mr-2 text-white" - onClick={() => (tagActive(tag) ? removeTag(tag) : addTag(tag))} + className="cursor-pointer rounded-full px-2 py-1 mr-2 text-white" + onClick={() => addTag(tag)} > {tag} diff --git a/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx b/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx index 3a7e5ce6a..db497e866 100644 --- a/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx +++ b/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx @@ -26,7 +26,7 @@ function ReadNote(props: Props) { return (
@@ -50,8 +50,8 @@ function ReadNote(props: Props) { return (
@@ -63,7 +63,7 @@ function ReadNote(props: Props) { {formatTimeOrDate(props.date as unknown as number, timezone)}
-
+
diff --git a/frontend/app/components/Session_/Player/Controls/components/styles.module.css b/frontend/app/components/Session_/Player/Controls/components/styles.module.css index bba5d3057..2a34e1129 100644 --- a/frontend/app/components/Session_/Player/Controls/components/styles.module.css +++ b/frontend/app/components/Session_/Player/Controls/components/styles.module.css @@ -27,13 +27,13 @@ .noteTooltip { position: absolute; padding: 1rem; + border-radius: 0.25rem; 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%); } diff --git a/frontend/app/components/Session_/Player/Overlay/PlayIconLayer.tsx b/frontend/app/components/Session_/Player/Overlay/PlayIconLayer.tsx index 95549ddce..49613413c 100644 --- a/frontend/app/components/Session_/Player/Overlay/PlayIconLayer.tsx +++ b/frontend/app/components/Session_/Player/Overlay/PlayIconLayer.tsx @@ -1,32 +1,37 @@ import React, { useState, useCallback, useEffect } from 'react'; import cn from 'classnames'; import { Icon } from 'UI'; - +import { connect } from 'react-redux'; import cls from './PlayIconLayer.module.css'; import clsOv from './overlay.module.css'; interface Props { - togglePlay: () => void, - playing: boolean, + togglePlay: () => void; + playing: boolean; + notesEdit: boolean; } -export default function PlayIconLayer({ playing, togglePlay }: Props) { - const [ showPlayOverlayIcon, setShowPlayOverlayIcon ] = useState(false); +function PlayIconLayer({ playing, togglePlay, notesEdit }: Props) { + const [showPlayOverlayIcon, setShowPlayOverlayIcon] = useState(false); useEffect(() => { // TODO Find a better way to do this document.addEventListener('keydown', onKeyDown); - + return () => { document.removeEventListener('keydown', onKeyDown); - } - }, []) + }; + }, [notesEdit]); - const onKeyDown = (e) => { + const getIsEdit = React.useCallback(() => notesEdit, [notesEdit]) + + const onKeyDown = (e: any) => { + console.log(getIsEdit()) + if (getIsEdit()) return; if (e.key === ' ') { - togglePlayAnimated() + togglePlayAnimated(); } - } + }; const togglePlayAnimated = useCallback(() => { setShowPlayOverlayIcon(true); @@ -35,18 +40,19 @@ export default function PlayIconLayer({ playing, togglePlay }: Props) { }, []); return ( -
-
+
- +
- ) -} \ No newline at end of file + ); +} + +export default connect((state) => ({ + // @ts-ignore + notesEdit: state.getIn(['sessions', 'createNoteTooltip', 'isVisible']), +}))(PlayIconLayer); diff --git a/frontend/app/components/Session_/components/NotePopup.tsx b/frontend/app/components/Session_/components/NotePopup.tsx index ab76d36b7..6fc5eb81d 100644 --- a/frontend/app/components/Session_/components/NotePopup.tsx +++ b/frontend/app/components/Session_/components/NotePopup.tsx @@ -10,6 +10,9 @@ function NotePopup({ setCreateNoteTooltip, time }: { setCreateNoteTooltip: (args setCreateNoteTooltip({ time: time, isVisible: true }) }; + React.useEffect(() => { + return () => setCreateNoteTooltip({ time: -1, isVisible: false }) + }) return (
{ - copy(`${window.location.origin}${session(props.sessionId)}${props.timestamp > 0 ? '?jumpto=' + props.timestamp : ''}`); - toast.success('Note URL copied to clipboard') - } + copy( + `${window.location.origin}/${window.location.pathname.split('/')[1]}${session( + props.sessionId + )}${props.timestamp > 0 ? '?jumpto=' + props.timestamp : ''}` + ); + toast.success('Note URL copied to clipboard'); + }; const onDelete = () => { - notesStore.deleteNote(props.noteId).then(r => { - notesStore.fetchNotes() - toast.success('Note deleted') - }) + notesStore.deleteNote(props.noteId).then((r) => { + notesStore.fetchNotes(); + toast.success('Note deleted'); + }); }; const menuItems = [ { icon: 'link-45deg', text: 'Copy URL', onClick: onCopy }, { icon: 'trash', text: 'Delete', onClick: onDelete }, -] + ]; return (
-
-
{props.description}
-
- {props.tags.length ? ( -
- {props.tags.map((tag) => ( -
- {tag} -
- ))} + 0 ? `?jumpto=${props.timestamp}¬e=${props.noteId}` : '')}> +
+
{props.description}
+
+ {props.tags.length ? ( +
+ {props.tags.map((tag) => ( +
+ {tag} +
+ ))} +
+ ) : null} +
+ By + {props.userEmail}, {formatTimeOrDate(props.date as unknown as number, timezone)} + {!props.isPublic ? null : ( + <> + Team + + )}
- ) : null} -
- By - {props.userEmail}, {formatTimeOrDate(props.date as unknown as number, timezone)} - {!props.isPublic ? null : ( - <> - Team - - )}
-
+
0 ? `?jumpto=${props.timestamp}¬e=${props.noteId}` : '')} + sessionId={ + props.sessionId + } />
- +
); diff --git a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteList.tsx b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteList.tsx index b16c43fba..33609bea6 100644 --- a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteList.tsx +++ b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteList.tsx @@ -27,7 +27,7 @@ function NotesList({ members }: {members: Array>}) {
} > -
+
{sliceListPerPage(list, notesStore.page - 1, notesStore.pageSize).map(note => ( +
+ notesStore.toggleTag()} + label="ALL" + isActive={notesStore.activeTags.length === 0} + /> +
{TAGS.map((tag: iTag) => (
))} - +