From 3a7d24651e230347af98085bad16bc3cfbc24f3c Mon Sep 17 00:00:00 2001 From: rokpopov Date: Mon, 14 Sep 2020 11:50:13 +0200 Subject: [PATCH 01/33] Add components and pages folder --- src/components/canvas/index.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 src/components/canvas/index.tsx diff --git a/src/components/canvas/index.tsx b/src/components/canvas/index.tsx new file mode 100644 index 0000000..abe2ef0 --- /dev/null +++ b/src/components/canvas/index.tsx @@ -0,0 +1,9 @@ +import React from "react"; + +export default function Canvas() { + return ( +
+

Something

+
+ ); +} From 51281cadee4a0a17c1e856ba8c1aa5306327185b Mon Sep 17 00:00:00 2001 From: Bartan89 Date: Mon, 14 Sep 2020 13:15:38 +0200 Subject: [PATCH 02/33] pair programming types and basic setup for dispatch --- src/App.tsx | 11 +++++---- src/components/canvas/KonvaApproach/index.tsx | 23 +++++++++++++++++++ src/components/canvas/index.tsx | 4 ++-- src/global.d.ts | 14 +++++++++++ src/index.tsx | 16 ++++++------- 5 files changed, 53 insertions(+), 15 deletions(-) create mode 100644 src/components/canvas/KonvaApproach/index.tsx create mode 100644 src/global.d.ts diff --git a/src/App.tsx b/src/App.tsx index 483e75c..3143b05 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,13 +1,14 @@ -import React from "react"; -import logo from "./logo.svg"; -import "./App.css"; +import React from "react" +import "./App.css" +import KonvaApproach from "./components/canvas/KonvaApproach" function App() { return (

Something arbitrary

+
- ); + ) } -export default App; +export default App diff --git a/src/components/canvas/KonvaApproach/index.tsx b/src/components/canvas/KonvaApproach/index.tsx new file mode 100644 index 0000000..e711bd2 --- /dev/null +++ b/src/components/canvas/KonvaApproach/index.tsx @@ -0,0 +1,23 @@ +import React, { useState } from "react" +import useDispatch from "react-redux" + +export default function KonvaApproach() { + const [noteValue, setNoteValue] = useState("") + + //const dispatch = useDispatch(function) + + function addNote(e: React.ChangeEvent) { + setNoteValue(e.target.value) + } + + console.log(noteValue) + return ( +
+ +

temp canvas:

+
+

{noteValue}

+
+
+ ) +} diff --git a/src/components/canvas/index.tsx b/src/components/canvas/index.tsx index abe2ef0..1feb061 100644 --- a/src/components/canvas/index.tsx +++ b/src/components/canvas/index.tsx @@ -1,9 +1,9 @@ -import React from "react"; +import React from "react" export default function Canvas() { return (

Something

- ); + ) } diff --git a/src/global.d.ts b/src/global.d.ts new file mode 100644 index 0000000..2682c95 --- /dev/null +++ b/src/global.d.ts @@ -0,0 +1,14 @@ +type Canvas = { + width: number + height: number +} + +type TimeStamp = { + data +} + +type Note = { + content: string + createdAt: number + timestamp: TimeStamp +} diff --git a/src/index.tsx b/src/index.tsx index f5185c1..97f7f38 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,17 +1,17 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import * as serviceWorker from './serviceWorker'; +import React from "react" +import ReactDOM from "react-dom" +import "./index.css" +import App from "./App" +import * as serviceWorker from "./serviceWorker" ReactDOM.render( , - document.getElementById('root') -); + document.getElementById("root") +) // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA -serviceWorker.unregister(); +serviceWorker.unregister() From 03daae4f8a95d4ee7f22a6c9678b3b513068cc4b Mon Sep 17 00:00:00 2001 From: Bartan89 Date: Mon, 14 Sep 2020 13:35:29 +0200 Subject: [PATCH 03/33] setting up redux for whole project --- package-lock.json | 25 +++++++++++++++++++++++++ package.json | 2 ++ src/index.tsx | 10 +++++++--- src/store/index.ts | 11 +++++++++++ src/store/rootReducer.ts | 5 +++++ 5 files changed, 50 insertions(+), 3 deletions(-) create mode 100644 src/store/index.ts create mode 100644 src/store/rootReducer.ts diff --git a/package-lock.json b/package-lock.json index 387474e..3b3ad08 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1700,6 +1700,15 @@ "@types/node": "*" } }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/istanbul-lib-coverage": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz", @@ -1777,6 +1786,17 @@ "@types/react": "*" } }, + "@types/react-redux": { + "version": "7.1.9", + "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.9.tgz", + "integrity": "sha512-mpC0jqxhP4mhmOl3P4ipRsgTgbNofMRXJb08Ms6gekViLj61v1hOZEKWDCyWsdONr6EjEA6ZHXC446wdywDe0w==", + "requires": { + "@types/hoist-non-react-statics": "^3.3.0", + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0", + "redux": "^4.0.0" + } + }, "@types/stack-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", @@ -10906,6 +10926,11 @@ "symbol-observable": "^1.2.0" } }, + "redux-thunk": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz", + "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==" + }, "regenerate": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.1.tgz", diff --git a/package.json b/package.json index c34aeba..1af93b5 100644 --- a/package.json +++ b/package.json @@ -10,11 +10,13 @@ "@types/node": "^12.12.58", "@types/react": "^16.9.49", "@types/react-dom": "^16.9.8", + "@types/react-redux": "^7.1.9", "react": "^16.13.1", "react-dom": "^16.13.1", "react-redux": "^7.2.1", "react-scripts": "3.4.3", "redux": "^4.0.5", + "redux-thunk": "^2.3.0", "typescript": "^3.7.5" }, "scripts": { diff --git a/src/index.tsx b/src/index.tsx index 97f7f38..9c9d04c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,11 +3,15 @@ import ReactDOM from "react-dom" import "./index.css" import App from "./App" import * as serviceWorker from "./serviceWorker" +import { Provider } from "react-redux" +import store from "./store/index" ReactDOM.render( - - - , + + + + + , document.getElementById("root") ) diff --git a/src/store/index.ts b/src/store/index.ts new file mode 100644 index 0000000..2296b99 --- /dev/null +++ b/src/store/index.ts @@ -0,0 +1,11 @@ +import { createStore, applyMiddleware, compose } from "redux" +import ReduxThunk from "redux-thunk" +import reducer from "./rootReducer" + +// @ts-ignore +const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose +const enhancer = composeEnhancers(applyMiddleware(ReduxThunk)) + +const store = createStore(reducer, enhancer) + +export default store diff --git a/src/store/rootReducer.ts b/src/store/rootReducer.ts new file mode 100644 index 0000000..c6e56ee --- /dev/null +++ b/src/store/rootReducer.ts @@ -0,0 +1,5 @@ +import { combineReducers } from "redux" + +export default combineReducers({ + //appState, +}) From b177cd462de8bf7681035a64cbf4592766356aa7 Mon Sep 17 00:00:00 2001 From: Bartan89 Date: Mon, 14 Sep 2020 17:31:18 +0200 Subject: [PATCH 04/33] we setup redux to work with a temp canvas in html and temp input --- src/App.tsx | 3 +- src/components/canvas/KonvaApproach/index.tsx | 62 +++++++++++++++---- src/global.d.ts | 14 ----- src/global.ts | 9 +++ src/store/notes/actions.ts | 55 ++++++++++++++++ src/store/notes/reducer.ts | 45 ++++++++++++++ src/store/notes/selectors.ts | 3 + src/store/notes/types.ts | 22 +++++++ src/store/rootReducer.ts | 3 +- src/store/types.ts | 8 +++ 10 files changed, 197 insertions(+), 27 deletions(-) delete mode 100644 src/global.d.ts create mode 100644 src/global.ts create mode 100644 src/store/notes/actions.ts create mode 100644 src/store/notes/reducer.ts create mode 100644 src/store/notes/selectors.ts create mode 100644 src/store/notes/types.ts create mode 100644 src/store/types.ts diff --git a/src/App.tsx b/src/App.tsx index 3143b05..f33602c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,7 +5,8 @@ import KonvaApproach from "./components/canvas/KonvaApproach" function App() { return (
-

Something arbitrary

+

Noteassieur:

+
) diff --git a/src/components/canvas/KonvaApproach/index.tsx b/src/components/canvas/KonvaApproach/index.tsx index e711bd2..72a06c9 100644 --- a/src/components/canvas/KonvaApproach/index.tsx +++ b/src/components/canvas/KonvaApproach/index.tsx @@ -1,22 +1,62 @@ import React, { useState } from "react" -import useDispatch from "react-redux" +import { useDispatch, useSelector } from "react-redux" +import { stageChangeNote, stageNewNote, stageRemoveNote } from "../../../store/notes/actions" +import { selectAllNotes } from "../../../store/notes/selectors" export default function KonvaApproach() { - const [noteValue, setNoteValue] = useState("") + const allNotes = useSelector(selectAllNotes) - //const dispatch = useDispatch(function) + const dispatch = useDispatch() - function addNote(e: React.ChangeEvent) { - setNoteValue(e.target.value) + function newNote() { + dispatch(stageNewNote()) } - console.log(noteValue) + function removeNote(id: number) { + dispatch(stageRemoveNote(id)) + } + + function changeNote(e: React.ChangeEvent) { + const content = e.target.value + const id = parseInt(e.target.id) + + dispatch(stageChangeNote(id, content)) + } + + const [show, setShow] = useState(true) + + function minimize() { + setShow(!show) + } + + const display = show ? "none" : "" + const gridsize = show ? 100 : 200 + return ( -
- -

temp canvas:

-
-

{noteValue}

+
+
+ +
+ {allNotes.map((note) => { + return ( +
+ + +
+ ) + })} +
+ +
+
+
+
+ {allNotes.map((note) => { + return

{note.content.length > 1 ? note.content : "_"}

+ })} +
) diff --git a/src/global.d.ts b/src/global.d.ts deleted file mode 100644 index 2682c95..0000000 --- a/src/global.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -type Canvas = { - width: number - height: number -} - -type TimeStamp = { - data -} - -type Note = { - content: string - createdAt: number - timestamp: TimeStamp -} diff --git a/src/global.ts b/src/global.ts new file mode 100644 index 0000000..2c08e86 --- /dev/null +++ b/src/global.ts @@ -0,0 +1,9 @@ +export type Canvas = { + width: number + height: number +} + +export type Note = { + id: number + content: string +} diff --git a/src/store/notes/actions.ts b/src/store/notes/actions.ts new file mode 100644 index 0000000..ddf3d2e --- /dev/null +++ b/src/store/notes/actions.ts @@ -0,0 +1,55 @@ +import { Dispatch } from "redux" +import { GetState } from "../types" +import { CHANGE_NOTE_BY_ID, REMOVE_NOTE_BY_ID, STORE_NOTE } from "./types" + +export function stageNewNote() { + return (dispatch: Dispatch, getState: GetState) => { + console.log("test") + const notes = getState().notes + + const highestID = notes.reduce((accumulator: any, note) => { + if (note.id > accumulator) { + return note.id + } + return accumulator + }, 0) + + const id = highestID + 1 + + dispatch(storeNote(id)) + } +} + +function storeNote(id: number) { + return { + type: STORE_NOTE, + id + } +} + +export function stageRemoveNote(id: number) { + return (dispatch: Dispatch, getState: GetState) => { + dispatch(removeNoteById(id)) + } +} + +function removeNoteById(id: number) { + return { + type: REMOVE_NOTE_BY_ID, + id + } +} + +export function stageChangeNote(id: number, content: string) { + return (dispatch: Dispatch, getSTate: GetState) => { + dispatch(changeNote(id, content)) + } +} + +function changeNote(id: number, content: string) { + return { + type: CHANGE_NOTE_BY_ID, + id, + content + } +} diff --git a/src/store/notes/reducer.ts b/src/store/notes/reducer.ts new file mode 100644 index 0000000..32ddabe --- /dev/null +++ b/src/store/notes/reducer.ts @@ -0,0 +1,45 @@ +import { Note } from "../../global" +import { CHANGE_NOTE_BY_ID, myNoteActionTypes, REMOVE_NOTE_BY_ID, STORE_NOTE } from "./types" + +const initialState: Note[] = [ + { + id: 1, + content: "new note" + }, + { + id: 2, + content: "new note" + } +] + +export default (state = initialState, action: myNoteActionTypes) => { + switch (action.type) { + case STORE_NOTE: + return [...state, { id: action.id, content: "new note" }] + + case REMOVE_NOTE_BY_ID: + return [ + ...state.filter((note) => { + if (note.id === action.id) { + return null + } else { + return note + } + }) + ] + + case CHANGE_NOTE_BY_ID: + return [ + ...state.map((note) => { + if (note.id === action.id) { + return { ...note, content: action.content } + } else { + return { ...note } + } + }) + ] + + default: + return state + } +} diff --git a/src/store/notes/selectors.ts b/src/store/notes/selectors.ts new file mode 100644 index 0000000..32afc31 --- /dev/null +++ b/src/store/notes/selectors.ts @@ -0,0 +1,3 @@ +import { StoreState } from "../types" + +export const selectAllNotes = (state: StoreState) => state.notes diff --git a/src/store/notes/types.ts b/src/store/notes/types.ts new file mode 100644 index 0000000..7d5b277 --- /dev/null +++ b/src/store/notes/types.ts @@ -0,0 +1,22 @@ +export const STORE_NOTE = "STORE_NOTE" + +export const REMOVE_NOTE_BY_ID = "REMOVE_NOTE_BY_ID" +export const CHANGE_NOTE_BY_ID = "CHANGE_NOTE_BY_ID" + +type storeNote = { + type: typeof STORE_NOTE + id: number +} + +type RemoveNoteById = { + type: typeof REMOVE_NOTE_BY_ID + id: number +} + +type ChangeNotebyId = { + type: typeof CHANGE_NOTE_BY_ID + id: number + content: string +} + +export type myNoteActionTypes = storeNote | RemoveNoteById | ChangeNotebyId diff --git a/src/store/rootReducer.ts b/src/store/rootReducer.ts index c6e56ee..c7d7f3f 100644 --- a/src/store/rootReducer.ts +++ b/src/store/rootReducer.ts @@ -1,5 +1,6 @@ import { combineReducers } from "redux" +import notes from "./notes/reducer" export default combineReducers({ - //appState, + notes }) diff --git a/src/store/types.ts b/src/store/types.ts new file mode 100644 index 0000000..9edd4c6 --- /dev/null +++ b/src/store/types.ts @@ -0,0 +1,8 @@ +import { Note } from "../global" + +export type StoreState = { + note: Note + notes: Note[] +} + +export type GetState = () => StoreState From 2bce92b2221f7b2042d2fe8a039aeb5c3958dde5 Mon Sep 17 00:00:00 2001 From: rokpopov Date: Mon, 14 Sep 2020 17:36:58 +0200 Subject: [PATCH 05/33] Add canvas component --- .env | 1 + src/App.tsx | 3 ++- src/components/canvas/index.tsx | 23 ++++++++++++++++++++++- 3 files changed, 25 insertions(+), 2 deletions(-) create mode 100644 .env diff --git a/.env b/.env new file mode 100644 index 0000000..7d910f1 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +SKIP_PREFLIGHT_CHECK=true \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 483e75c..6052f1e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,12 @@ import React from "react"; -import logo from "./logo.svg"; import "./App.css"; +import Canvas from "./components/canvas"; function App() { return (

Something arbitrary

+
); } diff --git a/src/components/canvas/index.tsx b/src/components/canvas/index.tsx index abe2ef0..50425b9 100644 --- a/src/components/canvas/index.tsx +++ b/src/components/canvas/index.tsx @@ -1,9 +1,30 @@ -import React from "react"; +import React, { useRef, useEffect } from "react"; export default function Canvas() { + const canvasRef = useRef(null); + + useEffect(() => { + if (canvasRef.current) { + const context = canvasRef.current.getContext("2d"); + if (context) { + context.beginPath(); + context.fillStyle = "black"; + context.fillRect(0, 0, 400, 400); + context.closePath(); + } + } + }, []); return (

Something

+
); } From ebbfc28a02fc1d65a9e3a2259ed18207624d2541 Mon Sep 17 00:00:00 2001 From: Bartan89 Date: Mon, 14 Sep 2020 17:45:20 +0200 Subject: [PATCH 06/33] some shortcuts for working with global types --- src/components/canvas/KonvaApproach/index.tsx | 2 +- src/global_types.d.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 src/global_types.d.ts diff --git a/src/components/canvas/KonvaApproach/index.tsx b/src/components/canvas/KonvaApproach/index.tsx index 72a06c9..bcec429 100644 --- a/src/components/canvas/KonvaApproach/index.tsx +++ b/src/components/canvas/KonvaApproach/index.tsx @@ -16,7 +16,7 @@ export default function KonvaApproach() { dispatch(stageRemoveNote(id)) } - function changeNote(e: React.ChangeEvent) { + function changeNote(e: textAreaOnChange) { const content = e.target.value const id = parseInt(e.target.id) diff --git a/src/global_types.d.ts b/src/global_types.d.ts new file mode 100644 index 0000000..1c8b041 --- /dev/null +++ b/src/global_types.d.ts @@ -0,0 +1 @@ +type textAreaOnChange = React.ChangeEvent From 5a82bffac90009f2166793fabdb129266d984ae5 Mon Sep 17 00:00:00 2001 From: Bartan89 Date: Mon, 14 Sep 2020 23:17:55 +0200 Subject: [PATCH 07/33] failed attempt so far at double nesting data --- src/App.tsx | 13 +-- src/components/canvas/KonvaApproach/index.tsx | 93 ++++++++++------ src/global.ts | 7 ++ src/index.tsx | 4 +- src/store/notes/actions.ts | 55 ---------- src/store/notes/reducer.ts | 45 -------- src/store/notes/selectors.ts | 3 - src/store/notes/types.ts | 22 ---- src/store/rootReducer.ts | 4 +- src/store/timenotes/actions.ts | 17 +++ src/store/timenotes/reducer.ts | 103 ++++++++++++++++++ src/store/timenotes/selectors.ts | 18 +++ src/store/timenotes/types.ts | 12 ++ src/store/types.ts | 5 +- 14 files changed, 226 insertions(+), 175 deletions(-) delete mode 100644 src/store/notes/actions.ts delete mode 100644 src/store/notes/reducer.ts delete mode 100644 src/store/notes/selectors.ts delete mode 100644 src/store/notes/types.ts create mode 100644 src/store/timenotes/actions.ts create mode 100644 src/store/timenotes/reducer.ts create mode 100644 src/store/timenotes/selectors.ts create mode 100644 src/store/timenotes/types.ts diff --git a/src/App.tsx b/src/App.tsx index 057ab26..43e74c9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,22 +1,19 @@ - -import React from "react"; -import "./App.css"; -import Canvas from "./components/canvas"; +import React from "react" +import "./App.css" +import Canvas from "./components/canvas" import KonvaApproach from "./components/canvas/KonvaApproach" - function App() { return (
- + {/*

Something arbitrary

- + */}

Noteassieur:


-
) } diff --git a/src/components/canvas/KonvaApproach/index.tsx b/src/components/canvas/KonvaApproach/index.tsx index bcec429..b3bcfc7 100644 --- a/src/components/canvas/KonvaApproach/index.tsx +++ b/src/components/canvas/KonvaApproach/index.tsx @@ -1,29 +1,26 @@ +import { notEqual } from "assert" +import { time } from "console" import React, { useState } from "react" import { useDispatch, useSelector } from "react-redux" -import { stageChangeNote, stageNewNote, stageRemoveNote } from "../../../store/notes/actions" -import { selectAllNotes } from "../../../store/notes/selectors" +import { Note } from "../../../global" +import { stageRemoveNote } from "../../../store/timenotes/actions" +import { selectAllNotes } from "../../../store/timenotes/selectors" export default function KonvaApproach() { - const allNotes = useSelector(selectAllNotes) - const dispatch = useDispatch() - function newNote() { - dispatch(stageNewNote()) - } - - function removeNote(id: number) { - dispatch(stageRemoveNote(id)) - } + // function newNote() { + // dispatch(stageNewNote()) + // } - function changeNote(e: textAreaOnChange) { - const content = e.target.value - const id = parseInt(e.target.id) + // function changeNote(e: textAreaOnChange) { + // const content = e.target.value + // const id = parseInt(e.target.id) - dispatch(stageChangeNote(id, content)) - } + // dispatch(stageChangeNote(id, content)) + // } - const [show, setShow] = useState(true) + const [show, setShow] = useState(false) function minimize() { setShow(!show) @@ -32,32 +29,60 @@ export default function KonvaApproach() { const display = show ? "none" : "" const gridsize = show ? 100 : 200 + const [timelineValue, setTimeLine] = useState(0) + + const allNotes = useSelector(selectAllNotes(timelineValue)) + + function timelineout(e: any) { + console.log(e.target.value) + setTimeLine(parseInt(e.target.value)) + } + + console.log("this is,", allNotes) + + function removeNote(id: number, timenoteId: number) { + dispatch(stageRemoveNote(id, timenoteId)) + } + return ( -
-
- +
+
+ + +
- {allNotes.map((note) => { - return ( -
- - -
- ) + {allNotes.map((timenote) => { + return timenote.notes.map((note) => { + return ( +
+ + +
+ ) + }) })} +
- + {/* */}
-
-
- {allNotes.map((note) => { - return

{note.content.length > 1 ? note.content : "_"}

+ {allNotes.map((timenotes) => { + return timenotes.notes.map((note) => { + return

{note.content}

+ }) })}
+
+
{/*
+ {allNotes.map((note) => { + return

{note.content.length > 1 ? note.content : "_"}

+ })} +
*/}
+ +

range :{timelineValue}

) } diff --git a/src/global.ts b/src/global.ts index 2c08e86..434a537 100644 --- a/src/global.ts +++ b/src/global.ts @@ -7,3 +7,10 @@ export type Note = { id: number content: string } + +export type Timenote = { + id: number + timeIn: number + timeOut: number + notes: Note[] +} diff --git a/src/index.tsx b/src/index.tsx index 9c9d04c..bf5f681 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -8,9 +8,7 @@ import store from "./store/index" ReactDOM.render( - - - + , document.getElementById("root") ) diff --git a/src/store/notes/actions.ts b/src/store/notes/actions.ts deleted file mode 100644 index ddf3d2e..0000000 --- a/src/store/notes/actions.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { Dispatch } from "redux" -import { GetState } from "../types" -import { CHANGE_NOTE_BY_ID, REMOVE_NOTE_BY_ID, STORE_NOTE } from "./types" - -export function stageNewNote() { - return (dispatch: Dispatch, getState: GetState) => { - console.log("test") - const notes = getState().notes - - const highestID = notes.reduce((accumulator: any, note) => { - if (note.id > accumulator) { - return note.id - } - return accumulator - }, 0) - - const id = highestID + 1 - - dispatch(storeNote(id)) - } -} - -function storeNote(id: number) { - return { - type: STORE_NOTE, - id - } -} - -export function stageRemoveNote(id: number) { - return (dispatch: Dispatch, getState: GetState) => { - dispatch(removeNoteById(id)) - } -} - -function removeNoteById(id: number) { - return { - type: REMOVE_NOTE_BY_ID, - id - } -} - -export function stageChangeNote(id: number, content: string) { - return (dispatch: Dispatch, getSTate: GetState) => { - dispatch(changeNote(id, content)) - } -} - -function changeNote(id: number, content: string) { - return { - type: CHANGE_NOTE_BY_ID, - id, - content - } -} diff --git a/src/store/notes/reducer.ts b/src/store/notes/reducer.ts deleted file mode 100644 index 32ddabe..0000000 --- a/src/store/notes/reducer.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { Note } from "../../global" -import { CHANGE_NOTE_BY_ID, myNoteActionTypes, REMOVE_NOTE_BY_ID, STORE_NOTE } from "./types" - -const initialState: Note[] = [ - { - id: 1, - content: "new note" - }, - { - id: 2, - content: "new note" - } -] - -export default (state = initialState, action: myNoteActionTypes) => { - switch (action.type) { - case STORE_NOTE: - return [...state, { id: action.id, content: "new note" }] - - case REMOVE_NOTE_BY_ID: - return [ - ...state.filter((note) => { - if (note.id === action.id) { - return null - } else { - return note - } - }) - ] - - case CHANGE_NOTE_BY_ID: - return [ - ...state.map((note) => { - if (note.id === action.id) { - return { ...note, content: action.content } - } else { - return { ...note } - } - }) - ] - - default: - return state - } -} diff --git a/src/store/notes/selectors.ts b/src/store/notes/selectors.ts deleted file mode 100644 index 32afc31..0000000 --- a/src/store/notes/selectors.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { StoreState } from "../types" - -export const selectAllNotes = (state: StoreState) => state.notes diff --git a/src/store/notes/types.ts b/src/store/notes/types.ts deleted file mode 100644 index 7d5b277..0000000 --- a/src/store/notes/types.ts +++ /dev/null @@ -1,22 +0,0 @@ -export const STORE_NOTE = "STORE_NOTE" - -export const REMOVE_NOTE_BY_ID = "REMOVE_NOTE_BY_ID" -export const CHANGE_NOTE_BY_ID = "CHANGE_NOTE_BY_ID" - -type storeNote = { - type: typeof STORE_NOTE - id: number -} - -type RemoveNoteById = { - type: typeof REMOVE_NOTE_BY_ID - id: number -} - -type ChangeNotebyId = { - type: typeof CHANGE_NOTE_BY_ID - id: number - content: string -} - -export type myNoteActionTypes = storeNote | RemoveNoteById | ChangeNotebyId diff --git a/src/store/rootReducer.ts b/src/store/rootReducer.ts index c7d7f3f..57b73f6 100644 --- a/src/store/rootReducer.ts +++ b/src/store/rootReducer.ts @@ -1,6 +1,6 @@ import { combineReducers } from "redux" -import notes from "./notes/reducer" +import timenotes from "./timenotes/reducer" export default combineReducers({ - notes + timenotes }) diff --git a/src/store/timenotes/actions.ts b/src/store/timenotes/actions.ts new file mode 100644 index 0000000..0eddbf5 --- /dev/null +++ b/src/store/timenotes/actions.ts @@ -0,0 +1,17 @@ +import { Dispatch } from "redux" +import { GetState } from "../types" +import { REMOVE_NOT_BY_IDS } from "./types" + +export function stageRemoveNote(id: number, timenoteId: number) { + return (dispatch: Dispatch, getState: GetState) => { + dispatch(removeNoteByIds(id, timenoteId)) + } +} + +function removeNoteByIds(id: number, timenoteId: number) { + return { + type: REMOVE_NOT_BY_IDS, + id, + timenoteId + } +} diff --git a/src/store/timenotes/reducer.ts b/src/store/timenotes/reducer.ts new file mode 100644 index 0000000..0b4b627 --- /dev/null +++ b/src/store/timenotes/reducer.ts @@ -0,0 +1,103 @@ +import { time } from "console" +import { Timenote } from "../../global" +import { CHANGE_NOTE_BY_ID, myNoteActionTypes, REMOVE_NOT_BY_IDS, STORE_NOTE } from "./types" + +const initialState: Timenote[] = [ + { + id: 1, + timeIn: 0, + timeOut: 10, + notes: [ + { + id: 1, + content: "some title 1-1 " + }, + { + id: 2, + content: "some title 1-2 " + } + ] + }, + { + id: 2, + timeIn: 10, + timeOut: 20, + notes: [ + { + id: 1, + content: "some title 2-1" + } + ] + }, + { + id: 3, + timeIn: 30, + timeOut: 40, + notes: [ + { + id: 1, + content: "some title 3-1" + }, + { + id: 2, + content: "some title 3-2" + }, + { + id: 3, + content: "some title 3-3" + } + ] + } +] + +export default (state = initialState, action: myNoteActionTypes) => { + switch (action.type) { + // case STORE_NOTE: + // return [...state, { id: action.id, content: "new note" }] + + // case REMOVE_NOTE_BY_ID: + // return [ + // ...state.filter((note) => { + // if (note.id === action.id) { + // return null + // } else { + // return note + // } + // }) + // ] + + case REMOVE_NOT_BY_IDS: + return [ + ...state.filter((timenote) => { + if (timenote.id === action.timenoteId) { + return { + ...timenote.notes.map((note) => { + if (note.id === action.id) { + return null + } else { + return note + } + }) + } + } + }) + ] + + // console.log("timenote id:", action.timenoteId) + // console.log("title id:", action.id) + + // case CHANGE_NOTE_BY_ID: + // return [ + // ...state.map((note) => { + // if (note.id === action.id) { + // return { ...note, content: action.content } + // } else { + // return { ...note } + // } + // }) + // ] + + default: + return state + } +} diff --git a/src/store/timenotes/selectors.ts b/src/store/timenotes/selectors.ts new file mode 100644 index 0000000..fb306d2 --- /dev/null +++ b/src/store/timenotes/selectors.ts @@ -0,0 +1,18 @@ +import { time } from "console" +import { Note, Timenote } from "../../global" +import { StoreState } from "../types" + +export const selectAllNotes = (argument: any) => { + return (state: StoreState) => { + if (state.timenotes === undefined) { + return [] + } + return state.timenotes.filter((timenote) => { + if (timenote.timeIn <= argument && timenote.timeOut >= argument) { + return timenote.notes.filter((note) => { + return note + }) + } + }) + } +} diff --git a/src/store/timenotes/types.ts b/src/store/timenotes/types.ts new file mode 100644 index 0000000..68e1eee --- /dev/null +++ b/src/store/timenotes/types.ts @@ -0,0 +1,12 @@ +export const STORE_NOTE = "STORE_NOTE" + +export const REMOVE_NOT_BY_IDS = "REMOVE_NOT_BY_IDS" +export const CHANGE_NOTE_BY_ID = "CHANGE_NOTE_BY_ID" + +type RemoveNoteByIds = { + type: typeof REMOVE_NOT_BY_IDS + id: number + timenoteId: number +} + +export type myNoteActionTypes = RemoveNoteByIds diff --git a/src/store/types.ts b/src/store/types.ts index 9edd4c6..900ab1b 100644 --- a/src/store/types.ts +++ b/src/store/types.ts @@ -1,8 +1,7 @@ -import { Note } from "../global" +import { Timenote } from "../global" export type StoreState = { - note: Note - notes: Note[] + timenotes: Timenote[] } export type GetState = () => StoreState From 45e0bc2d3afed40c3bcecbae132d1304bc70d1c1 Mon Sep 17 00:00:00 2001 From: Bartan89 Date: Tue, 15 Sep 2020 08:16:21 +0200 Subject: [PATCH 08/33] demo ali --- src/store/timenotes/reducer.ts | 32 +++++++++++++++++--------------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/src/store/timenotes/reducer.ts b/src/store/timenotes/reducer.ts index 0b4b627..a2bc3ce 100644 --- a/src/store/timenotes/reducer.ts +++ b/src/store/timenotes/reducer.ts @@ -67,21 +67,23 @@ export default (state = initialState, action: myNoteActionTypes) => { // ] case REMOVE_NOT_BY_IDS: - return [ - ...state.filter((timenote) => { - if (timenote.id === action.timenoteId) { - return { - ...timenote.notes.map((note) => { - if (note.id === action.id) { - return null - } else { - return note - } - }) - } - } - }) - ] + console.log(action.id) + console.log(action.timenoteId) + // return [ + // ...state.map((timenote) => { + // if (timenote.id === action.timenoteId) { + // return { + // ...timenote.notes.filter((note) => { + // if (note.id === action.id) { + // return null + // } else { + // return note + // } + // }) + // } + // } + // }) + // ] // console.log("timenote id:", action.timenoteId) // console.log("title id:", action.id) From 93a0f1fff0cfb2fb6814b23f30060b1e27542060 Mon Sep 17 00:00:00 2001 From: Bartan89 Date: Tue, 15 Sep 2020 09:30:11 +0200 Subject: [PATCH 09/33] adding in other data structures --- src/store/timenotes/reducer.ts | 67 ++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) diff --git a/src/store/timenotes/reducer.ts b/src/store/timenotes/reducer.ts index a2bc3ce..027036c 100644 --- a/src/store/timenotes/reducer.ts +++ b/src/store/timenotes/reducer.ts @@ -103,3 +103,70 @@ export default (state = initialState, action: myNoteActionTypes) => { return state } } + +// const istate = { +// notes : { +// byId : { +// "post1" : { +// id : "post1", +// author : "user1", +// body : "......", +// comments : ["comment1", "comment2"] +// }, +// "post2" : { +// id : "post2", +// author : "user2", +// body : "......", +// comments : ["comment3", "comment4", "comment5"] +// } +// }, +// allIds : ["post1", "post2"] +// }, +// comments : { +// byId : { +// "comment1" : { +// id : "comment1", +// author : "user2", +// comment : ".....", +// }, +// "comment2" : { +// id : "comment2", +// author : "user3", +// comment : ".....", +// }, +// "comment3" : { +// id : "comment3", +// author : "user3", +// comment : ".....", +// }, +// "comment4" : { +// id : "comment4", +// author : "user1", +// comment : ".....", +// }, +// "comment5" : { +// id : "comment5", +// author : "user3", +// comment : ".....", +// }, +// }, +// allIds : ["comment1", "comment2", "comment3", "commment4", "comment5"] +// }, +// users : { +// byId : { +// "user1" : { +// username : "user1", +// name : "User 1", +// }, +// "user2" : { +// username : "user2", +// name : "User 2", +// }, +// "user3" : { +// username : "user3", +// name : "User 3", +// } +// }, +// allIds : ["user1", "user2", "user3"] +// } +// } From 3af303b5af9def5e23beac2d68240e447478f68b Mon Sep 17 00:00:00 2001 From: AliLotfi123 Date: Tue, 15 Sep 2020 11:04:14 +0200 Subject: [PATCH 10/33] videoplayer and videos fethcing done --- package-lock.json | 287 +++++++----------- package.json | 2 + src/App.tsx | 10 +- .../canvas/VideoPlayer/Duration.tsx | 20 ++ src/components/canvas/VideoPlayer/Index.tsx | 134 ++++++++ .../canvas/VideoPlayer/VideoList.tsx | 51 ++++ src/components/canvas/index.tsx | 6 +- 7 files changed, 316 insertions(+), 194 deletions(-) create mode 100644 src/components/canvas/VideoPlayer/Duration.tsx create mode 100644 src/components/canvas/VideoPlayer/Index.tsx create mode 100644 src/components/canvas/VideoPlayer/VideoList.tsx diff --git a/package-lock.json b/package-lock.json index 3b3ad08..6be2491 100644 --- a/package-lock.json +++ b/package-lock.json @@ -56,6 +56,11 @@ "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==" + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" } } }, @@ -67,6 +72,13 @@ "@babel/types": "^7.11.5", "jsesc": "^2.5.1", "source-map": "^0.5.0" + }, + "dependencies": { + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" + } } }, "@babel/helper-annotate-as-pure": { @@ -1294,13 +1306,6 @@ "slash": "^2.0.0", "source-map": "^0.6.0", "string-length": "^2.0.0" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" - } } }, "@jest/source-map": { @@ -1317,11 +1322,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==" - }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" } } }, @@ -1367,13 +1367,6 @@ "slash": "^2.0.0", "source-map": "^0.6.1", "write-file-atomic": "2.4.1" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" - } } }, "@jest/types": { @@ -1547,6 +1540,11 @@ "@types/yargs-parser": "*" } }, + "ansi-regex": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", + "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==" + }, "ansi-styles": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", @@ -1556,15 +1554,6 @@ "color-convert": "^2.0.1" } }, - "aria-query": { - "version": "4.2.2", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz", - "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==", - "requires": { - "@babel/runtime": "^7.10.2", - "@babel/runtime-corejs3": "^7.10.2" - } - }, "chalk": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", @@ -1839,6 +1828,11 @@ "@types/yargs-parser": "*" } }, + "ansi-regex": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", + "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==" + }, "ansi-styles": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", @@ -2284,9 +2278,9 @@ "integrity": "sha1-gTWEAhliqenm/QOflA0S9WynhZ4=" }, "ansi-regex": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", - "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==" + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==" }, "ansi-styles": { "version": "3.2.1", @@ -2319,12 +2313,12 @@ } }, "aria-query": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-3.0.0.tgz", - "integrity": "sha1-ZbP8wcoRVajJrmTW7uKX8V1RM8w=", + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz", + "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==", "requires": { - "ast-types-flow": "0.0.7", - "commander": "^2.11.0" + "@babel/runtime": "^7.10.2", + "@babel/runtime-corejs3": "^7.10.2" } }, "arity-n": { @@ -2550,6 +2544,14 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.1.tgz", "integrity": "sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA==" }, + "axios": { + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz", + "integrity": "sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==", + "requires": { + "follow-redirects": "^1.10.0" + } + }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -3050,15 +3052,6 @@ "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz", "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==" }, - "bindings": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", - "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", - "optional": true, - "requires": { - "file-uri-to-path": "1.0.0" - } - }, "bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -3579,13 +3572,6 @@ "integrity": "sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==", "requires": { "source-map": "~0.6.0" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" - } } }, "clean-stack": { @@ -4026,13 +4012,6 @@ "source-map": "^0.6.1", "source-map-resolve": "^0.5.2", "urix": "^0.1.0" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" - } } }, "css-blank-pseudo": { @@ -4140,13 +4119,6 @@ "requires": { "mdn-data": "2.0.4", "source-map": "^0.6.1" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" - } } }, "css-what": { @@ -4261,11 +4233,6 @@ "version": "2.0.6", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.6.tgz", "integrity": "sha512-rQvjv71olwNHgiTbfPZFkJtjNMciWgswYeciZhtvWLO8bmX3TnhyA62I6sTWOyZssWHJJjY6/KiWwqQsWWsqOA==" - }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" } } }, @@ -4372,6 +4339,11 @@ "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz", "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=" }, + "deepmerge": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz", + "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==" + }, "default-gateway": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz", @@ -4936,14 +4908,6 @@ "esutils": "^2.0.2", "optionator": "^0.8.1", "source-map": "~0.6.1" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "optional": true - } } }, "eslint": { @@ -5297,6 +5261,15 @@ "jsx-ast-utils": "^2.2.1" }, "dependencies": { + "aria-query": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-3.0.0.tgz", + "integrity": "sha1-ZbP8wcoRVajJrmTW7uKX8V1RM8w=", + "requires": { + "ast-types-flow": "0.0.7", + "commander": "^2.11.0" + } + }, "emoji-regex": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", @@ -5812,12 +5785,6 @@ "schema-utils": "^2.5.0" } }, - "file-uri-to-path": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", - "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", - "optional": true - }, "filesize": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.0.1.tgz", @@ -6743,6 +6710,11 @@ "through": "^2.3.6" }, "dependencies": { + "ansi-regex": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", + "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==" + }, "ansi-styles": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", @@ -7174,13 +7146,6 @@ "make-dir": "^2.1.0", "rimraf": "^2.6.3", "source-map": "^0.6.1" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" - } } }, "istanbul-reports": { @@ -7416,11 +7381,7 @@ "version": "1.2.13", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "optional": true, - "requires": { - "bindings": "^1.5.0", - "nan": "^2.12.1" - } + "optional": true } } }, @@ -7626,11 +7587,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==" - }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" } } }, @@ -7940,6 +7896,11 @@ "strip-bom": "^3.0.0" } }, + "load-script": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz", + "integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ=" + }, "loader-fs-cache": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz", @@ -8165,6 +8126,11 @@ "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" }, + "memoize-one": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz", + "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==" + }, "memory-fs": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz", @@ -8479,12 +8445,6 @@ "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz", "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==" }, - "nan": { - "version": "2.14.1", - "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz", - "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==", - "optional": true - }, "nanomatch": { "version": "1.2.13", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", @@ -9378,11 +9338,6 @@ "supports-color": "^6.1.0" }, "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" - }, "supports-color": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", @@ -10326,13 +10281,6 @@ "ansi-regex": "^4.0.0", "ansi-styles": "^3.2.0", "react-is": "^16.8.4" - }, - "dependencies": { - "ansi-regex": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==" - } } }, "process": { @@ -10600,11 +10548,6 @@ "@babel/highlight": "^7.8.3" } }, - "ansi-regex": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==" - }, "browserslist": { "version": "4.10.0", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.10.0.tgz", @@ -10778,11 +10721,28 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz", "integrity": "sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==" }, + "react-fast-compare": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", + "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-player": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.6.2.tgz", + "integrity": "sha512-Wi9DynNSVgddKxac5OzsH0Upk6VRYssvLLGgCRw6vsjzqMX6S5N26WDRNYnLaHykxFNtpPSDc53fXDe52hMaCg==", + "requires": { + "deepmerge": "^4.0.0", + "load-script": "^1.0.0", + "memoize-one": "^5.1.1", + "prop-types": "^15.7.2", + "react-fast-compare": "^3.0.1" + } + }, "react-redux": { "version": "7.2.1", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.1.tgz", @@ -11246,11 +11206,6 @@ "supports-color": "^6.1.0" } }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" - }, "supports-color": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", @@ -11789,6 +11744,11 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" } } }, @@ -11906,9 +11866,9 @@ "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==" }, "source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" }, "source-map-resolve": { "version": "0.5.3", @@ -11929,13 +11889,6 @@ "requires": { "buffer-from": "^1.0.0", "source-map": "^0.6.0" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" - } } }, "source-map-url": { @@ -12195,6 +12148,11 @@ "strip-ansi": "^6.0.0" }, "dependencies": { + "ansi-regex": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", + "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==" + }, "strip-ansi": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz", @@ -12334,13 +12292,6 @@ "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", "requires": { "ansi-regex": "^4.1.0" - }, - "dependencies": { - "ansi-regex": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==" - } } }, "strip-bom": { @@ -12507,13 +12458,6 @@ "commander": "^2.20.0", "source-map": "~0.6.1", "source-map-support": "~0.5.12" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" - } } }, "terser-webpack-plugin": { @@ -12602,11 +12546,6 @@ "find-up": "^4.0.0" } }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" - }, "supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -12836,9 +12775,9 @@ "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, "typescript": { - "version": "3.7.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.5.tgz", - "integrity": "sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==" + "version": "3.9.7", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.7.tgz", + "integrity": "sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==" }, "unicode-canonical-property-names-ecmascript": { "version": "1.0.4", @@ -13196,11 +13135,7 @@ "version": "1.2.13", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "optional": true, - "requires": { - "bindings": "^1.5.0", - "nan": "^2.12.1" - } + "optional": true }, "glob-parent": { "version": "3.1.0", @@ -13364,11 +13299,6 @@ "ajv-keywords": "^3.1.0" } }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" - }, "ssri": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz", @@ -13480,11 +13410,7 @@ "version": "1.2.13", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "optional": true, - "requires": { - "bindings": "^1.5.0", - "nan": "^2.12.1" - } + "optional": true }, "glob-parent": { "version": "3.1.0", @@ -13630,13 +13556,6 @@ "requires": { "source-list-map": "^2.0.0", "source-map": "~0.6.1" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" - } } }, "websocket-driver": { diff --git a/package.json b/package.json index 1af93b5..4a1b110 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,10 @@ "@types/react": "^16.9.49", "@types/react-dom": "^16.9.8", "@types/react-redux": "^7.1.9", + "axios": "^0.20.0", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-player": "^2.6.2", "react-redux": "^7.2.1", "react-scripts": "3.4.3", "redux": "^4.0.5", diff --git a/src/App.tsx b/src/App.tsx index 057ab26..6cb9d9f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,24 +1,20 @@ - import React from "react"; import "./App.css"; import Canvas from "./components/canvas"; -import KonvaApproach from "./components/canvas/KonvaApproach" - +import KonvaApproach from "./components/canvas/KonvaApproach"; function App() { return (
-

Something arbitrary

Noteassieur:


-
- ) + ); } -export default App +export default App; diff --git a/src/components/canvas/VideoPlayer/Duration.tsx b/src/components/canvas/VideoPlayer/Duration.tsx new file mode 100644 index 0000000..bfcc114 --- /dev/null +++ b/src/components/canvas/VideoPlayer/Duration.tsx @@ -0,0 +1,20 @@ +import React from "react"; + +export default function Duration({ seconds }: { seconds: any }) { + return ; +} + +function format(seconds: any) { + const date = new Date(seconds * 1000); + const hh = date.getUTCHours(); + const mm = date.getUTCMinutes(); + const ss = pad(date.getUTCSeconds()); + if (hh) { + return `${hh}:${pad(mm)}:${ss}`; + } + return `${mm}:${ss}`; +} + +function pad(string: any) { + return ("0" + string).slice(-2); +} diff --git a/src/components/canvas/VideoPlayer/Index.tsx b/src/components/canvas/VideoPlayer/Index.tsx new file mode 100644 index 0000000..08e3890 --- /dev/null +++ b/src/components/canvas/VideoPlayer/Index.tsx @@ -0,0 +1,134 @@ +import React, { useState, useRef } from "react"; +import ReactPlayer from "react-player"; +import VideoList from "./VideoList"; +import Duration from "./Duration"; + +function Player() { + const [played, setPlayed] = useState(0); + const ref = useRef(null); + const [, setSeeking] = useState(true); + const [playing, setPlaying] = useState(false); + const [volume, setVolume] = useState(0.8); + const [duration, setDuration] = useState(1); + + function handleSeekChange(e: any) { + setPlayed(parseFloat(e.target.value)); + } + + function handlePlayPause() { + setPlaying(!playing); + } + + function handleSeekMouseDown() { + setSeeking(true); + } + + function handleSeekMouseUp(e: any) { + setSeeking(false); + ref?.current?.seekTo(parseFloat(e.target.value)); + } + + function handleVolumeChange(e: any) { + setVolume(parseFloat(e.target.value)); + } + + function handleDuration(duration: number) { + setDuration(duration); + } + + function handleProgress(data: any) { + setPlayed(data.played); + } + + function handleAddNote() { + console.log("This time", Math.round(duration * played)); + setPlaying(false); + return

{Math.round(duration * played)}

; + } + + const videoId = "jhdFe3evXpk"; + + return ( +
+ + + + + + + + + + + + + + + + + Volume + + + + + + + Seeking + + + + + + + duration + + + + + + elapsed + + + + + + remaining + + + + + +
+ ); +} + +export default Player; diff --git a/src/components/canvas/VideoPlayer/VideoList.tsx b/src/components/canvas/VideoPlayer/VideoList.tsx new file mode 100644 index 0000000..036a38d --- /dev/null +++ b/src/components/canvas/VideoPlayer/VideoList.tsx @@ -0,0 +1,51 @@ +import React, { useState, useEffect } from "react"; +import axios from "axios"; + +function VideoList() { + const [data, setData] = useState([]); + + useEffect(() => { + const fetchData = async () => { + const result = await axios( + "https://www.googleapis.com/youtube/v3/search?part=snippet&q=react-redux&key=AIzaSyD-w8GimrLZJV5Bp-8I-wYDcnqe0AXHVwg" + ); + + setData(result.data.items); + }; + + fetchData(); + }, []); + + const videos: any = !data ? ( +

loading

+ ) : ( + data.map((video: any) => { + console.log("this are videos", video); + return ( + <> +

{video.snippet.title}

+

{video.id.videoId}

+

+ {" "} + + {video.snippet.title} + +

+ + ); + }) + ); + + return ( + <> +

{videos}

+ + ); +} + +export default VideoList; diff --git a/src/components/canvas/index.tsx b/src/components/canvas/index.tsx index ceff979..57b21d6 100644 --- a/src/components/canvas/index.tsx +++ b/src/components/canvas/index.tsx @@ -1,6 +1,5 @@ - import React, { useRef, useEffect } from "react"; - +import Player from "./VideoPlayer/Index"; export default function Canvas() { const canvasRef = useRef(null); @@ -27,6 +26,7 @@ export default function Canvas() { backgroundColor: "grey", }} > +
- ) + ); } From f5d86f31625ca9facacd34229fcf2dd567e384d2 Mon Sep 17 00:00:00 2001 From: Bartan89 Date: Tue, 15 Sep 2020 11:33:47 +0200 Subject: [PATCH 11/33] logic for removel of individual items sound --- src/components/canvas/KonvaApproach/index.tsx | 7 +-- src/store/timenotes/reducer.ts | 52 +++++++++++-------- src/store/timenotes/selectors.ts | 13 ++--- 3 files changed, 40 insertions(+), 32 deletions(-) diff --git a/src/components/canvas/KonvaApproach/index.tsx b/src/components/canvas/KonvaApproach/index.tsx index b3bcfc7..de1be83 100644 --- a/src/components/canvas/KonvaApproach/index.tsx +++ b/src/components/canvas/KonvaApproach/index.tsx @@ -1,10 +1,7 @@ -import { notEqual } from "assert" -import { time } from "console" import React, { useState } from "react" import { useDispatch, useSelector } from "react-redux" -import { Note } from "../../../global" import { stageRemoveNote } from "../../../store/timenotes/actions" -import { selectAllNotes } from "../../../store/timenotes/selectors" +import { selectTimenotes } from "../../../store/timenotes/selectors" export default function KonvaApproach() { const dispatch = useDispatch() @@ -31,7 +28,7 @@ export default function KonvaApproach() { const [timelineValue, setTimeLine] = useState(0) - const allNotes = useSelector(selectAllNotes(timelineValue)) + const allNotes = useSelector(selectTimenotes(timelineValue)) function timelineout(e: any) { console.log(e.target.value) diff --git a/src/store/timenotes/reducer.ts b/src/store/timenotes/reducer.ts index 027036c..2db064a 100644 --- a/src/store/timenotes/reducer.ts +++ b/src/store/timenotes/reducer.ts @@ -1,6 +1,5 @@ -import { time } from "console" import { Timenote } from "../../global" -import { CHANGE_NOTE_BY_ID, myNoteActionTypes, REMOVE_NOT_BY_IDS, STORE_NOTE } from "./types" +import { myNoteActionTypes, REMOVE_NOT_BY_IDS } from "./types" const initialState: Timenote[] = [ { @@ -51,7 +50,37 @@ const initialState: Timenote[] = [ ] export default (state = initialState, action: myNoteActionTypes) => { + function removeFromTimenote(timenote: Timenote) { + if (timenote.id === action.timenoteId) { + return { + ...timenote, + notes: timenote.notes.filter((note) => note.id !== action.id) + } + } + return timenote + } + console.log(action) + console.log("this is state", state) switch (action.type) { + case REMOVE_NOT_BY_IDS: + return state.map(removeFromTimenote) + + //WHAT I SHOULD HAVE BEEN DOING: + // return state.map((timenote: Timenote) => { + // if (timenote.id === action.timenoteId) { + // return { + // ...timenote, + // notes: timenote.notes.filter((note) => { + // if (note.id === action.id) { + // return null + // } else { + // return note + // } + // }) + // } + // } + // }) + // case STORE_NOTE: // return [...state, { id: action.id, content: "new note" }] @@ -66,25 +95,6 @@ export default (state = initialState, action: myNoteActionTypes) => { // }) // ] - case REMOVE_NOT_BY_IDS: - console.log(action.id) - console.log(action.timenoteId) - // return [ - // ...state.map((timenote) => { - // if (timenote.id === action.timenoteId) { - // return { - // ...timenote.notes.filter((note) => { - // if (note.id === action.id) { - // return null - // } else { - // return note - // } - // }) - // } - // } - // }) - // ] - // console.log("timenote id:", action.timenoteId) // console.log("title id:", action.id) diff --git a/src/store/timenotes/selectors.ts b/src/store/timenotes/selectors.ts index fb306d2..85aed85 100644 --- a/src/store/timenotes/selectors.ts +++ b/src/store/timenotes/selectors.ts @@ -2,17 +2,18 @@ import { time } from "console" import { Note, Timenote } from "../../global" import { StoreState } from "../types" -export const selectAllNotes = (argument: any) => { +export const selectTimenotes = (argument: any) => { return (state: StoreState) => { if (state.timenotes === undefined) { return [] } + console.log(state.timenotes) return state.timenotes.filter((timenote) => { - if (timenote.timeIn <= argument && timenote.timeOut >= argument) { - return timenote.notes.filter((note) => { - return note - }) - } + console.log(timenote) + const startsAfter = timenote.timeIn <= argument + const endsBefore = timenote.timeOut >= argument + const isInside = startsAfter && endsBefore + return isInside }) } } From 18c15256bc5e9d97725315638e63ec01e2d13071 Mon Sep 17 00:00:00 2001 From: Bartan89 Date: Tue, 15 Sep 2020 13:16:59 +0200 Subject: [PATCH 12/33] adding a note per timenote works --- src/App.tsx | 2 - src/components/canvas/KonvaApproach/index.tsx | 47 ++---- src/store/timenotes/actions.ts | 36 ++++- src/store/timenotes/reducer.ts | 151 ++++-------------- src/store/timenotes/selectors.ts | 5 +- src/store/timenotes/types.ts | 9 +- 6 files changed, 83 insertions(+), 167 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 43e74c9..ae10850 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,5 @@ import React from "react" import "./App.css" -import Canvas from "./components/canvas" - import KonvaApproach from "./components/canvas/KonvaApproach" function App() { diff --git a/src/components/canvas/KonvaApproach/index.tsx b/src/components/canvas/KonvaApproach/index.tsx index de1be83..1f8aa64 100644 --- a/src/components/canvas/KonvaApproach/index.tsx +++ b/src/components/canvas/KonvaApproach/index.tsx @@ -1,56 +1,32 @@ import React, { useState } from "react" import { useDispatch, useSelector } from "react-redux" -import { stageRemoveNote } from "../../../store/timenotes/actions" +import { stageAddNote, stageRemoveNote } from "../../../store/timenotes/actions" import { selectTimenotes } from "../../../store/timenotes/selectors" export default function KonvaApproach() { const dispatch = useDispatch() - // function newNote() { - // dispatch(stageNewNote()) - // } - - // function changeNote(e: textAreaOnChange) { - // const content = e.target.value - // const id = parseInt(e.target.id) - - // dispatch(stageChangeNote(id, content)) - // } - - const [show, setShow] = useState(false) - - function minimize() { - setShow(!show) - } - - const display = show ? "none" : "" - const gridsize = show ? 100 : 200 - const [timelineValue, setTimeLine] = useState(0) - const allNotes = useSelector(selectTimenotes(timelineValue)) + const notesAtPointInTime = useSelector(selectTimenotes(timelineValue)) function timelineout(e: any) { console.log(e.target.value) setTimeLine(parseInt(e.target.value)) } - console.log("this is,", allNotes) - function removeNote(id: number, timenoteId: number) { dispatch(stageRemoveNote(id, timenoteId)) } + function newNote() { + dispatch(stageAddNote(timelineValue)) + } return (
-
- - -
-
- {allNotes.map((timenote) => { +
+
+ {notesAtPointInTime.map((timenote) => { return timenote.notes.map((note) => { return (
@@ -60,14 +36,13 @@ export default function KonvaApproach() { ) }) })} -
- {/* */} +
- {allNotes.map((timenotes) => { + {notesAtPointInTime.map((timenotes) => { return timenotes.notes.map((note) => { - return

{note.content}

+ return

{note.content}

}) })}
diff --git a/src/store/timenotes/actions.ts b/src/store/timenotes/actions.ts index 0eddbf5..c6638ea 100644 --- a/src/store/timenotes/actions.ts +++ b/src/store/timenotes/actions.ts @@ -1,6 +1,8 @@ +import { time } from "console" import { Dispatch } from "redux" +import { Timenote } from "../../global" import { GetState } from "../types" -import { REMOVE_NOT_BY_IDS } from "./types" +import { REMOVE_NOT_BY_IDS, STORE_A_NOTE_BY_TIMENOTE_ID } from "./types" export function stageRemoveNote(id: number, timenoteId: number) { return (dispatch: Dispatch, getState: GetState) => { @@ -15,3 +17,35 @@ function removeNoteByIds(id: number, timenoteId: number) { timenoteId } } + +export function stageAddNote(timeLineValue: number) { + return (dispatch: Dispatch, GetState: GetState) => { + const timenoteMatchingTimecode = GetState().timenotes.filter((timenote) => { + const startsAfter = timenote.timeIn <= timeLineValue + const endsBefore = timenote.timeOut >= timeLineValue + const isInside = startsAfter && endsBefore + return isInside + }) + console.log(timeLineValue) + console.log("this is it:", timenoteMatchingTimecode[0].id) + + const timenoteId = timenoteMatchingTimecode[0].id + + const highestID = timenoteMatchingTimecode[0].notes.reduce((accumulator: any, note) => { + if (note.id > accumulator) { + return note.id + } + return accumulator + }, 0) + + dispatch(storeANoteByTimenoteId(timenoteId, highestID + 1)) + } +} + +function storeANoteByTimenoteId(timenoteId: Number, highestID: number) { + return { + type: STORE_A_NOTE_BY_TIMENOTE_ID, + timenoteId, + highestID + } +} diff --git a/src/store/timenotes/reducer.ts b/src/store/timenotes/reducer.ts index 2db064a..224697e 100644 --- a/src/store/timenotes/reducer.ts +++ b/src/store/timenotes/reducer.ts @@ -1,5 +1,5 @@ import { Timenote } from "../../global" -import { myNoteActionTypes, REMOVE_NOT_BY_IDS } from "./types" +import { myNoteActionTypes, REMOVE_NOT_BY_IDS, STORE_A_NOTE_BY_TIMENOTE_ID } from "./types" const initialState: Timenote[] = [ { @@ -50,133 +50,38 @@ const initialState: Timenote[] = [ ] export default (state = initialState, action: myNoteActionTypes) => { - function removeFromTimenote(timenote: Timenote) { - if (timenote.id === action.timenoteId) { - return { - ...timenote, - notes: timenote.notes.filter((note) => note.id !== action.id) - } - } - return timenote - } - console.log(action) - console.log("this is state", state) switch (action.type) { case REMOVE_NOT_BY_IDS: - return state.map(removeFromTimenote) - - //WHAT I SHOULD HAVE BEEN DOING: - // return state.map((timenote: Timenote) => { - // if (timenote.id === action.timenoteId) { - // return { - // ...timenote, - // notes: timenote.notes.filter((note) => { - // if (note.id === action.id) { - // return null - // } else { - // return note - // } - // }) - // } - // } - // }) - - // case STORE_NOTE: - // return [...state, { id: action.id, content: "new note" }] + return state.map((timenote: Timenote) => { + if (timenote.id === action.timenoteId) { + return { + ...timenote, + notes: timenote.notes.filter((note) => note.id !== action.id) + } + } else { + return timenote + } + }) - // case REMOVE_NOTE_BY_ID: - // return [ - // ...state.filter((note) => { - // if (note.id === action.id) { - // return null - // } else { - // return note - // } - // }) - // ] - - // console.log("timenote id:", action.timenoteId) - // console.log("title id:", action.id) - - // case CHANGE_NOTE_BY_ID: - // return [ - // ...state.map((note) => { - // if (note.id === action.id) { - // return { ...note, content: action.content } - // } else { - // return { ...note } - // } - // }) - // ] + case STORE_A_NOTE_BY_TIMENOTE_ID: + return state.map((timenote: Timenote) => { + if (timenote.id === action.timenoteId) { + return { + ...timenote, + notes: [ + ...timenote.notes, + { + id: action.highestID, + content: `note ${action.highestID}` + } + ] + } + } else { + return timenote + } + }) default: return state } } - -// const istate = { -// notes : { -// byId : { -// "post1" : { -// id : "post1", -// author : "user1", -// body : "......", -// comments : ["comment1", "comment2"] -// }, -// "post2" : { -// id : "post2", -// author : "user2", -// body : "......", -// comments : ["comment3", "comment4", "comment5"] -// } -// }, -// allIds : ["post1", "post2"] -// }, -// comments : { -// byId : { -// "comment1" : { -// id : "comment1", -// author : "user2", -// comment : ".....", -// }, -// "comment2" : { -// id : "comment2", -// author : "user3", -// comment : ".....", -// }, -// "comment3" : { -// id : "comment3", -// author : "user3", -// comment : ".....", -// }, -// "comment4" : { -// id : "comment4", -// author : "user1", -// comment : ".....", -// }, -// "comment5" : { -// id : "comment5", -// author : "user3", -// comment : ".....", -// }, -// }, -// allIds : ["comment1", "comment2", "comment3", "commment4", "comment5"] -// }, -// users : { -// byId : { -// "user1" : { -// username : "user1", -// name : "User 1", -// }, -// "user2" : { -// username : "user2", -// name : "User 2", -// }, -// "user3" : { -// username : "user3", -// name : "User 3", -// } -// }, -// allIds : ["user1", "user2", "user3"] -// } -// } diff --git a/src/store/timenotes/selectors.ts b/src/store/timenotes/selectors.ts index 85aed85..75f66f3 100644 --- a/src/store/timenotes/selectors.ts +++ b/src/store/timenotes/selectors.ts @@ -1,5 +1,3 @@ -import { time } from "console" -import { Note, Timenote } from "../../global" import { StoreState } from "../types" export const selectTimenotes = (argument: any) => { @@ -7,9 +5,8 @@ export const selectTimenotes = (argument: any) => { if (state.timenotes === undefined) { return [] } - console.log(state.timenotes) + return state.timenotes.filter((timenote) => { - console.log(timenote) const startsAfter = timenote.timeIn <= argument const endsBefore = timenote.timeOut >= argument const isInside = startsAfter && endsBefore diff --git a/src/store/timenotes/types.ts b/src/store/timenotes/types.ts index 68e1eee..42435fd 100644 --- a/src/store/timenotes/types.ts +++ b/src/store/timenotes/types.ts @@ -2,6 +2,7 @@ export const STORE_NOTE = "STORE_NOTE" export const REMOVE_NOT_BY_IDS = "REMOVE_NOT_BY_IDS" export const CHANGE_NOTE_BY_ID = "CHANGE_NOTE_BY_ID" +export const STORE_A_NOTE_BY_TIMENOTE_ID = "STORE_A_NOTE_BY_TIMENOTE_ID" type RemoveNoteByIds = { type: typeof REMOVE_NOT_BY_IDS @@ -9,4 +10,10 @@ type RemoveNoteByIds = { timenoteId: number } -export type myNoteActionTypes = RemoveNoteByIds +type StoreANotByTimenoteId = { + type: typeof STORE_A_NOTE_BY_TIMENOTE_ID + timenoteId: number + highestID: number +} + +export type myNoteActionTypes = RemoveNoteByIds | StoreANotByTimenoteId From 403623ad697429aeaef0fb6f66da1a023b67728a Mon Sep 17 00:00:00 2001 From: AliLotfi123 Date: Tue, 15 Sep 2020 14:05:36 +0200 Subject: [PATCH 13/33] searching is done --- src/components/canvas/KonvaApproach/index.tsx | 103 ++++++++++------ .../canvas/VideoPlayer/Duration.tsx | 6 +- src/components/canvas/VideoPlayer/Index.tsx | 112 ++++++++---------- .../canvas/VideoPlayer/VideoList.tsx | 94 +++++++++------ src/components/canvas/index.tsx | 2 - 5 files changed, 171 insertions(+), 146 deletions(-) diff --git a/src/components/canvas/KonvaApproach/index.tsx b/src/components/canvas/KonvaApproach/index.tsx index bcec429..d3e5757 100644 --- a/src/components/canvas/KonvaApproach/index.tsx +++ b/src/components/canvas/KonvaApproach/index.tsx @@ -1,63 +1,88 @@ -import React, { useState } from "react" -import { useDispatch, useSelector } from "react-redux" -import { stageChangeNote, stageNewNote, stageRemoveNote } from "../../../store/notes/actions" -import { selectAllNotes } from "../../../store/notes/selectors" +import React, { useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { + stageChangeNote, + stageNewNote, + stageRemoveNote, +} from "../../../store/notes/actions"; +import { selectAllNotes } from "../../../store/notes/selectors"; +import Player from "../VideoPlayer/Index"; export default function KonvaApproach() { - const allNotes = useSelector(selectAllNotes) + const allNotes = useSelector(selectAllNotes); - const dispatch = useDispatch() + const dispatch = useDispatch(); function newNote() { - dispatch(stageNewNote()) + dispatch(stageNewNote()); } function removeNote(id: number) { - dispatch(stageRemoveNote(id)) + dispatch(stageRemoveNote(id)); } function changeNote(e: textAreaOnChange) { - const content = e.target.value - const id = parseInt(e.target.id) + const content = e.target.value; + const id = parseInt(e.target.id); - dispatch(stageChangeNote(id, content)) + dispatch(stageChangeNote(id, content)); } - const [show, setShow] = useState(true) + const [show, setShow] = useState(true); function minimize() { - setShow(!show) + setShow(!show); } - const display = show ? "none" : "" - const gridsize = show ? 100 : 200 + const display = show ? "none" : ""; + const gridsize = show ? 100 : 200; return ( -
-
- -
- {allNotes.map((note) => { - return ( -
- - -
- ) - })} -
- + <> + + +
+
+ +
+ {allNotes.map((note) => { + return ( +
+ + +
+ ); + })} +
+ +
-
-
-
- {allNotes.map((note) => { - return

{note.content.length > 1 ? note.content : "_"}

- })} +
+
+ {allNotes.map((note) => { + return

{note.content.length > 1 ? note.content : "_"}

; + })} +
-
- ) + + ); } diff --git a/src/components/canvas/VideoPlayer/Duration.tsx b/src/components/canvas/VideoPlayer/Duration.tsx index bfcc114..521426c 100644 --- a/src/components/canvas/VideoPlayer/Duration.tsx +++ b/src/components/canvas/VideoPlayer/Duration.tsx @@ -1,10 +1,10 @@ import React from "react"; -export default function Duration({ seconds }: { seconds: any }) { +export default function Duration({ seconds }: { seconds: number }) { return ; } -function format(seconds: any) { +function format(seconds: number) { const date = new Date(seconds * 1000); const hh = date.getUTCHours(); const mm = date.getUTCMinutes(); @@ -15,6 +15,6 @@ function format(seconds: any) { return `${mm}:${ss}`; } -function pad(string: any) { +function pad(string: number) { return ("0" + string).slice(-2); } diff --git a/src/components/canvas/VideoPlayer/Index.tsx b/src/components/canvas/VideoPlayer/Index.tsx index 08e3890..670cc08 100644 --- a/src/components/canvas/VideoPlayer/Index.tsx +++ b/src/components/canvas/VideoPlayer/Index.tsx @@ -10,6 +10,7 @@ function Player() { const [playing, setPlaying] = useState(false); const [volume, setVolume] = useState(0.8); const [duration, setDuration] = useState(1); + const [data, setData] = useState([]); function handleSeekChange(e: any) { setPlayed(parseFloat(e.target.value)); @@ -50,6 +51,7 @@ function Player() { return (
+ - - - - - - - - - + {playing ? ( +

+ - - - - - Volume - - - - - - - Seeking - - - - - - - duration - - - - - - elapsed - - - - - - remaining - - - - - +

+ ) : ( +

+ +

+ )} + +

+ Volume{" "} + +

+ +

+ Jump to{" "} + +

+ +

+ duration +

+ +

+ elapsed +

+ +

+ remaining +

); } diff --git a/src/components/canvas/VideoPlayer/VideoList.tsx b/src/components/canvas/VideoPlayer/VideoList.tsx index 036a38d..7a156c4 100644 --- a/src/components/canvas/VideoPlayer/VideoList.tsx +++ b/src/components/canvas/VideoPlayer/VideoList.tsx @@ -2,48 +2,64 @@ import React, { useState, useEffect } from "react"; import axios from "axios"; function VideoList() { - const [data, setData] = useState([]); - - useEffect(() => { - const fetchData = async () => { - const result = await axios( - "https://www.googleapis.com/youtube/v3/search?part=snippet&q=react-redux&key=AIzaSyD-w8GimrLZJV5Bp-8I-wYDcnqe0AXHVwg" - ); - - setData(result.data.items); - }; - - fetchData(); - }, []); - - const videos: any = !data ? ( -

loading

- ) : ( - data.map((video: any) => { - console.log("this are videos", video); - return ( - <> -

{video.snippet.title}

-

{video.id.videoId}

-

- {" "} - - {video.snippet.title} - -

- - ); - }) - ); + // const [data, setData] = useState([]); + // const [search, setSearch] = useState(); + + // function handleSubmit(e: any) { + // console.log(search); + // e.preventDefault(); + // } + + // function onChange(e: any) { + // e.preventDefault(); + + // setSearch(e.target.value); + // } + + // useEffect(() => { + // const fetchData = async () => { + // const result = await axios( + // `https://www.googleapis.com/youtube/v3/search?part=snippet&q=${search}&key=AIzaSyD-w8GimrLZJV5Bp-8I-wYDcnqe0AXHVwg` + // ); + + // setData(result.data.items); + // }; + + // fetchData(); + // }, []); + + // const videos: any = !data ? ( + //

loading

+ // ) : ( + // data.map((video: any) => { + // // console.log("this are videos", video); + // return ( + // <> + //

{video.snippet.title}

+ //

{video.id.videoId}

+ //

+ // {" "} + // + // {video.snippet.title} + // + //

+ // + // ); + // }) + // ); return ( <> -

{videos}

+ {/*

{videos}

+
+ + +
*/} ); } diff --git a/src/components/canvas/index.tsx b/src/components/canvas/index.tsx index 57b21d6..50425b9 100644 --- a/src/components/canvas/index.tsx +++ b/src/components/canvas/index.tsx @@ -1,5 +1,4 @@ import React, { useRef, useEffect } from "react"; -import Player from "./VideoPlayer/Index"; export default function Canvas() { const canvasRef = useRef(null); @@ -26,7 +25,6 @@ export default function Canvas() { backgroundColor: "grey", }} > -
); } From 982713530f39294e2113ee6f459e90814da13850 Mon Sep 17 00:00:00 2001 From: Bartan89 Date: Tue, 15 Sep 2020 16:23:00 +0200 Subject: [PATCH 14/33] implemented range setting --- src/components/canvas/KonvaApproach/index.tsx | 84 +++++++++++++++++-- src/store/timenotes/actions.ts | 36 +++++++- src/store/timenotes/reducer.ts | 26 +++++- src/store/timenotes/selectors.ts | 18 +++- src/store/timenotes/types.ts | 16 +++- 5 files changed, 166 insertions(+), 14 deletions(-) diff --git a/src/components/canvas/KonvaApproach/index.tsx b/src/components/canvas/KonvaApproach/index.tsx index 1f8aa64..f4be4fe 100644 --- a/src/components/canvas/KonvaApproach/index.tsx +++ b/src/components/canvas/KonvaApproach/index.tsx @@ -1,12 +1,22 @@ -import React, { useState } from "react" +import React, { useEffect, useState } from "react" import { useDispatch, useSelector } from "react-redux" -import { stageAddNote, stageRemoveNote } from "../../../store/timenotes/actions" -import { selectTimenotes } from "../../../store/timenotes/selectors" +import { Timenote } from "../../../global" +import { stageAddNote, stageNewtimenote, stageRemoveNote, stageSetTimeIn, stageSetTimeOut } from "../../../store/timenotes/actions" +import { selectMinMaxValueById, selectTimenotes } from "../../../store/timenotes/selectors" export default function KonvaApproach() { const dispatch = useDispatch() const [timelineValue, setTimeLine] = useState(0) + const [playPause, setPlayPause] = useState(false) + + useEffect(() => { + if (playPause) { + setTimeout(() => { + setTimeLine(timelineValue + 1) + }, 1000) + } + }, [timelineValue, playPause]) const notesAtPointInTime = useSelector(selectTimenotes(timelineValue)) @@ -22,6 +32,34 @@ export default function KonvaApproach() { function newNote() { dispatch(stageAddNote(timelineValue)) } + + function newTimenote() { + dispatch(stageNewtimenote(timelineValue)) + } + + const buttonshow = notesAtPointInTime.length === 0 ? true : false + + const [id, setId] = useState(0) + const minMaxValue: Timenote | undefined = useSelector(selectMinMaxValueById(id)) + + function setRange(id: number) { + setId(id) + } + + console.log(typeof minMaxValue?.timeIn) + + function setTimeIn(e: any) { + const timeIn = e.target.value + + dispatch(stageSetTimeIn(timeIn, id)) + } + + function setTimeOut(e: any) { + const timeOut = e.target.value + + dispatch(stageSetTimeOut(timeOut, id)) + } + return (
@@ -30,6 +68,23 @@ export default function KonvaApproach() { return timenote.notes.map((note) => { return (
+ {note.id === 1 ? ( +
+ {timenote.timeOut - timelineValue > 3 ? ( +
+ range: + {timenote.timeIn} - + {timenote.timeOut} + +
+ ) : ( + {timenote.timeOut - timelineValue} sec left + )} +
+ ) : ( + "" + )} +
@@ -37,7 +92,10 @@ export default function KonvaApproach() { }) })}
- + +
{notesAtPointInTime.map((timenotes) => { @@ -53,8 +111,22 @@ export default function KonvaApproach() { })}
*/}
- -

range :{timelineValue}

+ +
+ +
+

time {timelineValue} in seconds

+ + {id !== 0 ? ( +
+ In point: {minMaxValue?.timeIn} + + Out point: {minMaxValue?.timeOut} + +
+ ) : ( + "" + )}
) } diff --git a/src/store/timenotes/actions.ts b/src/store/timenotes/actions.ts index c6638ea..a780f35 100644 --- a/src/store/timenotes/actions.ts +++ b/src/store/timenotes/actions.ts @@ -1,8 +1,6 @@ -import { time } from "console" import { Dispatch } from "redux" -import { Timenote } from "../../global" import { GetState } from "../types" -import { REMOVE_NOT_BY_IDS, STORE_A_NOTE_BY_TIMENOTE_ID } from "./types" +import { REMOVE_NOT_BY_IDS, SET_TIME_IN_BY_ID, SET_TIME_OUT_BY_ID, STORE_A_NOTE_BY_TIMENOTE_ID } from "./types" export function stageRemoveNote(id: number, timenoteId: number) { return (dispatch: Dispatch, getState: GetState) => { @@ -18,6 +16,12 @@ function removeNoteByIds(id: number, timenoteId: number) { } } +export function stageNewtimenote(curtime: number) { + return (dispatch: Dispatch, getState: GetState) => { + console.log(curtime) + } +} + export function stageAddNote(timeLineValue: number) { return (dispatch: Dispatch, GetState: GetState) => { const timenoteMatchingTimecode = GetState().timenotes.filter((timenote) => { @@ -49,3 +53,29 @@ function storeANoteByTimenoteId(timenoteId: Number, highestID: number) { highestID } } + +export function stageSetTimeIn(timeIn: number, timenoteId: number) { + return (dispatch: Dispatch) => { + console.log(timeIn) + console.log(timenoteId) + + dispatch({ + type: SET_TIME_IN_BY_ID, + timeIn, + timenoteId + }) + } +} + +export function stageSetTimeOut(timeOut: number, timenoteId: number) { + return (dispatch: Dispatch) => { + console.log(timeOut) + console.log(timenoteId) + + dispatch({ + type: SET_TIME_OUT_BY_ID, + timeOut, + timenoteId + }) + } +} diff --git a/src/store/timenotes/reducer.ts b/src/store/timenotes/reducer.ts index 224697e..79c2e83 100644 --- a/src/store/timenotes/reducer.ts +++ b/src/store/timenotes/reducer.ts @@ -1,5 +1,5 @@ import { Timenote } from "../../global" -import { myNoteActionTypes, REMOVE_NOT_BY_IDS, STORE_A_NOTE_BY_TIMENOTE_ID } from "./types" +import { myNoteActionTypes, REMOVE_NOT_BY_IDS, SET_TIME_IN_BY_ID, SET_TIME_OUT_BY_ID, STORE_A_NOTE_BY_TIMENOTE_ID } from "./types" const initialState: Timenote[] = [ { @@ -81,6 +81,30 @@ export default (state = initialState, action: myNoteActionTypes) => { } }) + case SET_TIME_IN_BY_ID: + return state.map((timenote: Timenote) => { + if (timenote.id === action.timenoteId) { + return { + ...timenote, + timeIn: action.timeIn + } + } else { + return timenote + } + }) + + case SET_TIME_OUT_BY_ID: + return state.map((timenote: Timenote) => { + if (timenote.id === action.timenoteId) { + return { + ...timenote, + timeOut: action.timeOut + } + } else { + return timenote + } + }) + default: return state } diff --git a/src/store/timenotes/selectors.ts b/src/store/timenotes/selectors.ts index 75f66f3..36ba597 100644 --- a/src/store/timenotes/selectors.ts +++ b/src/store/timenotes/selectors.ts @@ -1,16 +1,28 @@ import { StoreState } from "../types" -export const selectTimenotes = (argument: any) => { +export const selectTimenotes = (timecode: any) => { return (state: StoreState) => { if (state.timenotes === undefined) { return [] } return state.timenotes.filter((timenote) => { - const startsAfter = timenote.timeIn <= argument - const endsBefore = timenote.timeOut >= argument + const startsAfter = timenote.timeIn <= timecode + const endsBefore = timenote.timeOut >= timecode const isInside = startsAfter && endsBefore return isInside }) } } + +export const selectMinMaxValueById = (id: number | null) => { + return (state: StoreState) => { + return state.timenotes.find((timenote) => { + if (timenote.id === id) { + return timenote + } + }) + + console.log(id) + } +} diff --git a/src/store/timenotes/types.ts b/src/store/timenotes/types.ts index 42435fd..99a6326 100644 --- a/src/store/timenotes/types.ts +++ b/src/store/timenotes/types.ts @@ -3,6 +3,8 @@ export const STORE_NOTE = "STORE_NOTE" export const REMOVE_NOT_BY_IDS = "REMOVE_NOT_BY_IDS" export const CHANGE_NOTE_BY_ID = "CHANGE_NOTE_BY_ID" export const STORE_A_NOTE_BY_TIMENOTE_ID = "STORE_A_NOTE_BY_TIMENOTE_ID" +export const SET_TIME_IN_BY_ID = "SET_TIME_IN_BY_ID" +export const SET_TIME_OUT_BY_ID = "SET_TIME_OUT_BY_ID" type RemoveNoteByIds = { type: typeof REMOVE_NOT_BY_IDS @@ -16,4 +18,16 @@ type StoreANotByTimenoteId = { highestID: number } -export type myNoteActionTypes = RemoveNoteByIds | StoreANotByTimenoteId +type SetTimeInById = { + type: typeof SET_TIME_IN_BY_ID + timenoteId: number + timeIn: number +} + +type SetTimeOutById = { + type: typeof SET_TIME_OUT_BY_ID + timenoteId: number + timeOut: number +} + +export type myNoteActionTypes = RemoveNoteByIds | StoreANotByTimenoteId | SetTimeInById | SetTimeOutById From 161b782c94436e6a5767c4e4030ff57e0b75026b Mon Sep 17 00:00:00 2001 From: AliLotfi123 Date: Tue, 15 Sep 2020 16:40:08 +0200 Subject: [PATCH 15/33] search and first video work --- src/components/canvas/KonvaApproach/index.tsx | 5 +- src/components/canvas/VideoPlayer/Index.tsx | 14 +-- .../canvas/VideoPlayer/VideoList.tsx | 96 +++++++++++-------- src/components/canvas/index.tsx | 3 +- 4 files changed, 67 insertions(+), 51 deletions(-) diff --git a/src/components/canvas/KonvaApproach/index.tsx b/src/components/canvas/KonvaApproach/index.tsx index d3e5757..8ac8f10 100644 --- a/src/components/canvas/KonvaApproach/index.tsx +++ b/src/components/canvas/KonvaApproach/index.tsx @@ -6,7 +6,8 @@ import { stageRemoveNote, } from "../../../store/notes/actions"; import { selectAllNotes } from "../../../store/notes/selectors"; -import Player from "../VideoPlayer/Index"; +// import Player from "../VideoPlayer/Index"; +import VideoList from "../VideoPlayer/VideoList"; export default function KonvaApproach() { const allNotes = useSelector(selectAllNotes); @@ -39,8 +40,6 @@ export default function KonvaApproach() { return ( <> - -
diff --git a/src/components/canvas/VideoPlayer/Index.tsx b/src/components/canvas/VideoPlayer/Index.tsx index 670cc08..1ff493f 100644 --- a/src/components/canvas/VideoPlayer/Index.tsx +++ b/src/components/canvas/VideoPlayer/Index.tsx @@ -1,16 +1,16 @@ import React, { useState, useRef } from "react"; import ReactPlayer from "react-player"; -import VideoList from "./VideoList"; +// import VideoList from "./VideoList"; import Duration from "./Duration"; -function Player() { +function Player({ videoPlay }: { videoPlay: any }) { const [played, setPlayed] = useState(0); const ref = useRef(null); const [, setSeeking] = useState(true); const [playing, setPlaying] = useState(false); const [volume, setVolume] = useState(0.8); const [duration, setDuration] = useState(1); - const [data, setData] = useState([]); + const [note, setNote] = useState(0); function handleSeekChange(e: any) { setPlayed(parseFloat(e.target.value)); @@ -44,16 +44,15 @@ function Player() { function handleAddNote() { console.log("This time", Math.round(duration * played)); setPlaying(false); - return

{Math.round(duration * played)}

; + setNote(Math.round(duration * played)); } - const videoId = "jhdFe3evXpk"; + const videoId = videoPlay; return (
- remaining

+

{note}

); } diff --git a/src/components/canvas/VideoPlayer/VideoList.tsx b/src/components/canvas/VideoPlayer/VideoList.tsx index 7a156c4..4bcdf6a 100644 --- a/src/components/canvas/VideoPlayer/VideoList.tsx +++ b/src/components/canvas/VideoPlayer/VideoList.tsx @@ -1,65 +1,81 @@ import React, { useState, useEffect } from "react"; import axios from "axios"; +import Player from "./Index"; function VideoList() { - // const [data, setData] = useState([]); - // const [search, setSearch] = useState(); + const [data, setData] = useState([]); + const [search, setSearch] = useState("React Native"); - // function handleSubmit(e: any) { - // console.log(search); - // e.preventDefault(); - // } + const [videoId, setVideoId] = useState("Hf4MJH0jDb4"); - // function onChange(e: any) { - // e.preventDefault(); + function handleSubmit(e: any) { + console.log(search); + e.preventDefault(); - // setSearch(e.target.value); - // } + fetchData(); + } - // useEffect(() => { - // const fetchData = async () => { - // const result = await axios( - // `https://www.googleapis.com/youtube/v3/search?part=snippet&q=${search}&key=AIzaSyD-w8GimrLZJV5Bp-8I-wYDcnqe0AXHVwg` - // ); + function onChange(e: any) { + e.preventDefault(); + setSearch(e.target.value); + } - // setData(result.data.items); - // }; + const fetchData = async () => { + const result = await axios( + `https://www.googleapis.com/youtube/v3/search?part=snippet&q=${search}&key=AIzaSyB0E92lnR4Ar160Qst27hLpLAH4qS-YatU` + ); - // fetchData(); - // }, []); + setData(result.data.items); + }; - // const videos: any = !data ? ( + useEffect(() => { + fetchData(); + }, []); + + const videos: any = !data ? ( +

loading

+ ) : ( + data.map((video: any) => { + return ( + <> +

{video.snippet.title}

+ +

+ { + setVideoId(video.id.videoId); + }} + style={{ cursor: "pointer" }} + > + {video.snippet.title} + +

+ + ); + }) + ); + + // const videoPlay: any = !data ? ( //

loading

// ) : ( // data.map((video: any) => { - // // console.log("this are videos", video); - // return ( - // <> - //

{video.snippet.title}

- //

{video.id.videoId}

- //

- // {" "} - // - // {video.snippet.title} - // - //

- // - // ); + // return video.id.videoId; // }) // ); return ( <> - {/*

{videos}

+
-
*/} + +

{videos}

); } diff --git a/src/components/canvas/index.tsx b/src/components/canvas/index.tsx index 50425b9..d91b286 100644 --- a/src/components/canvas/index.tsx +++ b/src/components/canvas/index.tsx @@ -1,4 +1,5 @@ import React, { useRef, useEffect } from "react"; +import VideoList from "./VideoPlayer/VideoList"; export default function Canvas() { const canvasRef = useRef(null); @@ -17,8 +18,8 @@ export default function Canvas() { return (

Something

+ Date: Tue, 15 Sep 2020 20:48:17 +0200 Subject: [PATCH 16/33] videoplayer is ready for merging with react-redux --- package-lock.json | 227 ++++++++++++++++++ package.json | 1 + src/App.tsx | 1 - src/components/canvas/VideoPlayer/Index.tsx | 189 ++++++++++----- .../canvas/VideoPlayer/VideoList.tsx | 122 +++++++--- src/components/canvas/VideoPlayer/index.css | 0 6 files changed, 444 insertions(+), 96 deletions(-) create mode 100644 src/components/canvas/VideoPlayer/index.css diff --git a/package-lock.json b/package-lock.json index 6be2491..d8b6a70 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1173,6 +1173,11 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + }, "@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", @@ -1379,6 +1384,88 @@ "@types/yargs": "^13.0.0" } }, + "@material-ui/core": { + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.0.tgz", + "integrity": "sha512-bYo9uIub8wGhZySHqLQ833zi4ZML+XCBE1XwJ8EuUVSpTWWG57Pm+YugQToJNFsEyiKFhPh8DPD0bgupz8n01g==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/styles": "^4.10.0", + "@material-ui/system": "^4.9.14", + "@material-ui/types": "^5.1.0", + "@material-ui/utils": "^4.10.2", + "@types/react-transition-group": "^4.2.0", + "clsx": "^1.0.4", + "hoist-non-react-statics": "^3.3.2", + "popper.js": "1.16.1-lts", + "prop-types": "^15.7.2", + "react-is": "^16.8.0", + "react-transition-group": "^4.4.0" + } + }, + "@material-ui/styles": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz", + "integrity": "sha512-XPwiVTpd3rlnbfrgtEJ1eJJdFCXZkHxy8TrdieaTvwxNYj42VnnCyFzxYeNW9Lhj4V1oD8YtQ6S5Gie7bZDf7Q==", + "requires": { + "@babel/runtime": "^7.4.4", + "@emotion/hash": "^0.8.0", + "@material-ui/types": "^5.1.0", + "@material-ui/utils": "^4.9.6", + "clsx": "^1.0.4", + "csstype": "^2.5.2", + "hoist-non-react-statics": "^3.3.2", + "jss": "^10.0.3", + "jss-plugin-camel-case": "^10.0.3", + "jss-plugin-default-unit": "^10.0.3", + "jss-plugin-global": "^10.0.3", + "jss-plugin-nested": "^10.0.3", + "jss-plugin-props-sort": "^10.0.3", + "jss-plugin-rule-value-function": "^10.0.3", + "jss-plugin-vendor-prefixer": "^10.0.3", + "prop-types": "^15.7.2" + }, + "dependencies": { + "csstype": { + "version": "2.6.13", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.13.tgz", + "integrity": "sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A==" + } + } + }, + "@material-ui/system": { + "version": "4.9.14", + "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.14.tgz", + "integrity": "sha512-oQbaqfSnNlEkXEziDcJDDIy8pbvwUmZXWNqlmIwDqr/ZdCK8FuV3f4nxikUh7hvClKV2gnQ9djh5CZFTHkZj3w==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/utils": "^4.9.6", + "csstype": "^2.5.2", + "prop-types": "^15.7.2" + }, + "dependencies": { + "csstype": { + "version": "2.6.13", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.13.tgz", + "integrity": "sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A==" + } + } + }, + "@material-ui/types": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz", + "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==" + }, + "@material-ui/utils": { + "version": "4.10.2", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.10.2.tgz", + "integrity": "sha512-eg29v74P7W5r6a4tWWDAAfZldXIzfyO1am2fIsC39hdUUHm/33k6pGOKPbgDjg/U/4ifmgAePy/1OjkKN6rFRw==", + "requires": { + "@babel/runtime": "^7.4.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0" + } + }, "@mrmlnc/readdir-enhanced": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz", @@ -1786,6 +1873,14 @@ "redux": "^4.0.0" } }, + "@types/react-transition-group": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz", + "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==", + "requires": { + "@types/react": "*" + } + }, "@types/stack-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", @@ -3636,6 +3731,11 @@ "shallow-clone": "^0.1.2" } }, + "clsx": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", + "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==" + }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -4121,6 +4221,15 @@ "source-map": "^0.6.1" } }, + "css-vendor": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz", + "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==", + "requires": { + "@babel/runtime": "^7.8.3", + "is-in-browser": "^1.0.2" + } + }, "css-what": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.3.0.tgz", @@ -4580,6 +4689,15 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz", + "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "dom-serializer": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", @@ -6573,6 +6691,11 @@ "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz", "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=" }, + "hyphenate-style-name": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", + "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" + }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -6961,6 +7084,11 @@ "is-extglob": "^2.1.1" } }, + "is-in-browser": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", + "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=" + }, "is-negative-zero": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.0.tgz", @@ -7812,6 +7940,84 @@ "verror": "1.10.0" } }, + "jss": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.4.0.tgz", + "integrity": "sha512-l7EwdwhsDishXzqTc3lbsbyZ83tlUl5L/Hb16pHCvZliA9lRDdNBZmHzeJHP0sxqD0t1mrMmMR8XroR12JBYzw==", + "requires": { + "@babel/runtime": "^7.3.1", + "csstype": "^3.0.2", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-camel-case": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.4.0.tgz", + "integrity": "sha512-9oDjsQ/AgdBbMyRjc06Kl3P8lDCSEts2vYZiPZfGAxbGCegqE4RnMob3mDaBby5H9vL9gWmyyImhLRWqIkRUCw==", + "requires": { + "@babel/runtime": "^7.3.1", + "hyphenate-style-name": "^1.0.3", + "jss": "10.4.0" + } + }, + "jss-plugin-default-unit": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.4.0.tgz", + "integrity": "sha512-BYJ+Y3RUYiMEgmlcYMLqwbA49DcSWsGgHpVmEEllTC8MK5iJ7++pT9TnKkKBnNZZxTV75ycyFCR5xeLSOzVm4A==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0" + } + }, + "jss-plugin-global": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.4.0.tgz", + "integrity": "sha512-b8IHMJUmv29cidt3nI4bUI1+Mo5RZE37kqthaFpmxf5K7r2aAegGliAw4hXvA70ca6ckAoXMUl4SN/zxiRcRag==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0" + } + }, + "jss-plugin-nested": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.4.0.tgz", + "integrity": "sha512-cKgpeHIxAP0ygeWh+drpLbrxFiak6zzJ2toVRi/NmHbpkNaLjTLgePmOz5+67ln3qzJiPdXXJB1tbOyYKAP4Pw==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-props-sort": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.4.0.tgz", + "integrity": "sha512-j/t0R40/2fp+Nzt6GgHeUFnHVY2kPGF5drUVlgkcwYoHCgtBDOhTTsOfdaQFW6sHWfoQYgnGV4CXdjlPiRrzwA==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0" + } + }, + "jss-plugin-rule-value-function": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.4.0.tgz", + "integrity": "sha512-w8504Cdfu66+0SJoLkr6GUQlEb8keHg8ymtJXdVHWh0YvFxDG2l/nS93SI5Gfx0fV29dO6yUugXnKzDFJxrdFQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-vendor-prefixer": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.4.0.tgz", + "integrity": "sha512-DpF+/a+GU8hMh/948sBGnKSNfKkoHg2p9aRFUmyoyxgKjOeH9n74Ht3Yt8lOgdZsuWNJbPrvaa3U4PXKwxVpTQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "css-vendor": "^2.0.8", + "jss": "10.4.0" + } + }, "jsx-ast-utils": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz", @@ -9303,6 +9509,11 @@ "ts-pnp": "^1.1.6" } }, + "popper.js": { + "version": "1.16.1-lts", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz", + "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==" + }, "portfinder": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", @@ -10815,6 +11026,17 @@ "workbox-webpack-plugin": "4.3.1" } }, + "react-transition-group": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", + "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", @@ -12633,6 +12855,11 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", diff --git a/package.json b/package.json index 4a1b110..cacb1a0 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@material-ui/core": "^4.11.0", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", diff --git a/src/App.tsx b/src/App.tsx index 6cb9d9f..803b79b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,7 +7,6 @@ import KonvaApproach from "./components/canvas/KonvaApproach"; function App() { return (
-

Something arbitrary

Noteassieur:

diff --git a/src/components/canvas/VideoPlayer/Index.tsx b/src/components/canvas/VideoPlayer/Index.tsx index 1ff493f..1bb561d 100644 --- a/src/components/canvas/VideoPlayer/Index.tsx +++ b/src/components/canvas/VideoPlayer/Index.tsx @@ -1,7 +1,12 @@ +import { Button, Container } from "@material-ui/core"; import React, { useState, useRef } from "react"; import ReactPlayer from "react-player"; // import VideoList from "./VideoList"; import Duration from "./Duration"; +import "./index.css"; +import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"; +import Paper from "@material-ui/core/Paper"; +import Grid from "@material-ui/core/Grid"; function Player({ videoPlay }: { videoPlay: any }) { const [played, setPlayed] = useState(0); @@ -49,71 +54,127 @@ function Player({ videoPlay }: { videoPlay: any }) { const videoId = videoPlay; + const gridStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + flexGrow: 1, + }, + paper: { + padding: theme.spacing(2), + textAlign: "center", + color: theme.palette.text.secondary, + }, + }) + ); + + const buttonStyles = makeStyles((theme: Theme) => + createStyles({ + button: { + margin: theme.spacing(1), + }, + }) + ); + + const gridClass = gridStyles(); + const buttonClass = buttonStyles(); + return ( -
- - - {playing ? ( -

- - -

- ) : ( -

- -

- )} - -

- Volume{" "} - -

- -

- Jump to{" "} - -

- -

- duration -

- -

- elapsed -

- -

- remaining -

-

{note}

-
+ + + + + + + + + + + + {/* This Button uses a Font Icon, see the installation instructions in the Icon component docs. */} + + {playing ? ( +

+ + +

+ ) : ( +

+ +

+ )} +

+ Volume{" "} + +

+

+ Jump to{" "} + +

+

+ duration +

+

+ elapsed +

+

+ remaining +

+

Note Time: {note}

+ + + + ); } diff --git a/src/components/canvas/VideoPlayer/VideoList.tsx b/src/components/canvas/VideoPlayer/VideoList.tsx index 4bcdf6a..be6f60f 100644 --- a/src/components/canvas/VideoPlayer/VideoList.tsx +++ b/src/components/canvas/VideoPlayer/VideoList.tsx @@ -1,13 +1,24 @@ import React, { useState, useEffect } from "react"; import axios from "axios"; import Player from "./Index"; +import { makeStyles } from "@material-ui/core/styles"; +import Card from "@material-ui/core/Card"; +import CardActions from "@material-ui/core/CardActions"; +import CardContent from "@material-ui/core/CardContent"; + +import Button from "@material-ui/core/Button"; +import Typography from "@material-ui/core/Typography"; +import Grid from "@material-ui/core/Grid"; +import { Container, Input } from "@material-ui/core"; function VideoList() { const [data, setData] = useState([]); const [search, setSearch] = useState("React Native"); const [videoId, setVideoId] = useState("Hf4MJH0jDb4"); + const apiKey = "AIzaSyAFOU_P_EeypyHzJg-N4IfuneruGzrm1Ak"; + function handleSubmit(e: any) { console.log(search); e.preventDefault(); @@ -22,7 +33,7 @@ function VideoList() { const fetchData = async () => { const result = await axios( - `https://www.googleapis.com/youtube/v3/search?part=snippet&q=${search}&key=AIzaSyB0E92lnR4Ar160Qst27hLpLAH4qS-YatU` + `https://www.googleapis.com/youtube/v3/search?part=snippet&q=${search}&key=${apiKey}` ); setData(result.data.items); @@ -32,32 +43,67 @@ function VideoList() { fetchData(); }, []); - const videos: any = !data ? ( -

loading

- ) : ( - data.map((video: any) => { - return ( - <> -

{video.snippet.title}

- -

- { - setVideoId(video.id.videoId); - }} - style={{ cursor: "pointer" }} - > - {video.snippet.title} - -

- - ); - }) + const useStyles = makeStyles({ + root: { + maxWidth: 345, + }, + media: { + height: 140, + }, + }); + + const classes = useStyles(); + + const videos: any = ( + <> + + {data.map((video: any) => { + return ( + + + + + {video.snippet.title} + + + {video.snippet.title.slice(0, 30)} + + + {video.snippet.title} + + + + + + + + + ); + })} + + ); // const videoPlay: any = !data ? ( @@ -70,11 +116,25 @@ function VideoList() { return ( <> + +
+ + + +
+ -
- - -
+

{videos}

); diff --git a/src/components/canvas/VideoPlayer/index.css b/src/components/canvas/VideoPlayer/index.css new file mode 100644 index 0000000..e69de29 From 5a34b76fb834ace95b0f7f6775d1e1a7bf80d643 Mon Sep 17 00:00:00 2001 From: Bartan89 Date: Wed, 16 Sep 2020 10:00:20 +0200 Subject: [PATCH 17/33] added library feature --- src/components/canvas/KonvaApproach/index.tsx | 80 +++++++++++------ src/store/timenotes/actions.ts | 28 +++++- src/store/timenotes/reducer.ts | 86 ++++++++----------- src/store/timenotes/selectors.ts | 4 + src/store/timenotes/types.ts | 16 +++- 5 files changed, 135 insertions(+), 79 deletions(-) diff --git a/src/components/canvas/KonvaApproach/index.tsx b/src/components/canvas/KonvaApproach/index.tsx index f4be4fe..d14583d 100644 --- a/src/components/canvas/KonvaApproach/index.tsx +++ b/src/components/canvas/KonvaApproach/index.tsx @@ -1,8 +1,8 @@ import React, { useEffect, useState } from "react" import { useDispatch, useSelector } from "react-redux" import { Timenote } from "../../../global" -import { stageAddNote, stageNewtimenote, stageRemoveNote, stageSetTimeIn, stageSetTimeOut } from "../../../store/timenotes/actions" -import { selectMinMaxValueById, selectTimenotes } from "../../../store/timenotes/selectors" +import { stageAddNote, stageEditNote, stageNewtimenote, stageRemoveNote, stageSetTimeIn, stageSetTimeOut } from "../../../store/timenotes/actions" +import { selectAllTimenotes, selectMinMaxValueById, selectTimenotes } from "../../../store/timenotes/selectors" export default function KonvaApproach() { const dispatch = useDispatch() @@ -60,14 +60,39 @@ export default function KonvaApproach() { dispatch(stageSetTimeOut(timeOut, id)) } + function editNote(e: React.ChangeEvent) { + const content = e.target.value + + const [noteId, timenoteId] = e.target.id.split(" ") + + dispatch(stageEditNote(content, parseInt(noteId), parseInt(timenoteId))) + } + + const allTimeNotes = useSelector(selectAllTimenotes) + + const [videoLength, setVideoLength] = useState(500) + + const [deleteBtn, setDelete] = useState(false) + const [opacityDelete, setstate] = useState(1) + + function hoverIn() { + setDelete(!deleteBtn) + } + + function hoverAway() { + setTimeout(() => { + setDelete(!deleteBtn) + }, 1000) + } + return (
-
-
+
+
{notesAtPointInTime.map((timenote) => { return timenote.notes.map((note) => { return ( -
+
{note.id === 1 ? (
{timenote.timeOut - timelineValue > 3 ? ( @@ -75,7 +100,7 @@ export default function KonvaApproach() { range: {timenote.timeIn} - {timenote.timeOut} - +
) : ( {timenote.timeOut - timelineValue} sec left @@ -84,34 +109,33 @@ export default function KonvaApproach() { ) : ( "" )} - - - + {deleteBtn ? ( + + ) : ( + "" + )} +
) }) })} -
- + - -
-
- {notesAtPointInTime.map((timenotes) => { - return timenotes.notes.map((note) => { - return

{note.content}

- }) - })}
-
{/*
- {allNotes.map((note) => { - return

{note.content.length > 1 ? note.content : "_"}

- })} -
*/}
- +
+ {allTimeNotes.map((timenote) => { + return ✍︎ + })} +
+
@@ -120,9 +144,9 @@ export default function KonvaApproach() { {id !== 0 ? (
In point: {minMaxValue?.timeIn} - + Out point: {minMaxValue?.timeOut} - +
) : ( "" diff --git a/src/store/timenotes/actions.ts b/src/store/timenotes/actions.ts index a780f35..8a9ba7f 100644 --- a/src/store/timenotes/actions.ts +++ b/src/store/timenotes/actions.ts @@ -1,6 +1,6 @@ import { Dispatch } from "redux" import { GetState } from "../types" -import { REMOVE_NOT_BY_IDS, SET_TIME_IN_BY_ID, SET_TIME_OUT_BY_ID, STORE_A_NOTE_BY_TIMENOTE_ID } from "./types" +import { CHANGE_NOTE_BY_ID, NEW_NOTE_AT_CUR_TIME, REMOVE_NOT_BY_IDS, SET_TIME_IN_BY_ID, SET_TIME_OUT_BY_ID, STORE_A_NOTE_BY_TIMENOTE_ID } from "./types" export function stageRemoveNote(id: number, timenoteId: number) { return (dispatch: Dispatch, getState: GetState) => { @@ -18,7 +18,20 @@ function removeNoteByIds(id: number, timenoteId: number) { export function stageNewtimenote(curtime: number) { return (dispatch: Dispatch, getState: GetState) => { - console.log(curtime) + const HighestId = getState().timenotes.reduce((accumulator: any, timenote) => { + if (timenote.id > accumulator) { + return timenote.id + } + return accumulator + }, 0) + + const newId = HighestId + 1 + + dispatch({ + type: NEW_NOTE_AT_CUR_TIME, + curtime, + newId + }) } } @@ -79,3 +92,14 @@ export function stageSetTimeOut(timeOut: number, timenoteId: number) { }) } } + +export function stageEditNote(content: string, id: number, timenoteId: number) { + return (dispatch: Dispatch) => { + dispatch({ + type: CHANGE_NOTE_BY_ID, + content, + id, + timenoteId + }) + } +} diff --git a/src/store/timenotes/reducer.ts b/src/store/timenotes/reducer.ts index 79c2e83..01a9cd1 100644 --- a/src/store/timenotes/reducer.ts +++ b/src/store/timenotes/reducer.ts @@ -1,56 +1,26 @@ import { Timenote } from "../../global" -import { myNoteActionTypes, REMOVE_NOT_BY_IDS, SET_TIME_IN_BY_ID, SET_TIME_OUT_BY_ID, STORE_A_NOTE_BY_TIMENOTE_ID } from "./types" +import { CHANGE_NOTE_BY_ID, myNoteActionTypes, NEW_NOTE_AT_CUR_TIME, REMOVE_NOT_BY_IDS, SET_TIME_IN_BY_ID, SET_TIME_OUT_BY_ID, STORE_A_NOTE_BY_TIMENOTE_ID } from "./types" -const initialState: Timenote[] = [ - { - id: 1, - timeIn: 0, - timeOut: 10, - notes: [ - { - id: 1, - content: "some title 1-1 " - }, - { - id: 2, - content: "some title 1-2 " - } - ] - }, - { - id: 2, - timeIn: 10, - timeOut: 20, - notes: [ - { - id: 1, - content: "some title 2-1" - } - ] - }, - { - id: 3, - timeIn: 30, - timeOut: 40, - notes: [ - { - id: 1, - content: "some title 3-1" - }, - { - id: 2, - content: "some title 3-2" - }, - { - id: 3, - content: "some title 3-3" - } - ] - } -] +const initialState: Timenote[] = [] export default (state = initialState, action: myNoteActionTypes) => { switch (action.type) { + case NEW_NOTE_AT_CUR_TIME: + return [ + ...state, + { + id: action.newId, + timeIn: action.curtime, + timeOut: action.curtime + 30, + notes: [ + { + id: 1, + content: "Here your first note! 😜" + } + ] + } + ] + case REMOVE_NOT_BY_IDS: return state.map((timenote: Timenote) => { if (timenote.id === action.timenoteId) { @@ -105,6 +75,26 @@ export default (state = initialState, action: myNoteActionTypes) => { } }) + case CHANGE_NOTE_BY_ID: + return state.map((timenote: Timenote) => { + if (timenote.id === action.timenoteId) { + return { + ...timenote, + notes: [ + ...timenote.notes.map((note) => { + if (note.id === action.id) { + return { ...note, content: action.content } + } else { + return { ...note } + } + }) + ] + } + } else { + return timenote + } + }) + default: return state } diff --git a/src/store/timenotes/selectors.ts b/src/store/timenotes/selectors.ts index 36ba597..d530846 100644 --- a/src/store/timenotes/selectors.ts +++ b/src/store/timenotes/selectors.ts @@ -26,3 +26,7 @@ export const selectMinMaxValueById = (id: number | null) => { console.log(id) } } + +export const selectAllTimenotes = (state: StoreState) => { + return state.timenotes +} diff --git a/src/store/timenotes/types.ts b/src/store/timenotes/types.ts index 99a6326..02d71a7 100644 --- a/src/store/timenotes/types.ts +++ b/src/store/timenotes/types.ts @@ -5,6 +5,7 @@ export const CHANGE_NOTE_BY_ID = "CHANGE_NOTE_BY_ID" export const STORE_A_NOTE_BY_TIMENOTE_ID = "STORE_A_NOTE_BY_TIMENOTE_ID" export const SET_TIME_IN_BY_ID = "SET_TIME_IN_BY_ID" export const SET_TIME_OUT_BY_ID = "SET_TIME_OUT_BY_ID" +export const NEW_NOTE_AT_CUR_TIME = "NEW_NOTE_AT_CUR_TIME" type RemoveNoteByIds = { type: typeof REMOVE_NOT_BY_IDS @@ -30,4 +31,17 @@ type SetTimeOutById = { timeOut: number } -export type myNoteActionTypes = RemoveNoteByIds | StoreANotByTimenoteId | SetTimeInById | SetTimeOutById +type ChangeNoteById = { + type: typeof CHANGE_NOTE_BY_ID + id: number + timenoteId: number + content: string +} + +type NewNoteAtCurTime = { + type: typeof NEW_NOTE_AT_CUR_TIME + curtime: number + newId: number +} + +export type myNoteActionTypes = RemoveNoteByIds | StoreANotByTimenoteId | SetTimeInById | SetTimeOutById | ChangeNoteById | NewNoteAtCurTime From 326137abad9db18b8ff253cab99e8c8e52e1cd8c Mon Sep 17 00:00:00 2001 From: Bartan89 Date: Wed, 16 Sep 2020 11:28:01 +0200 Subject: [PATCH 18/33] pair programming setting up redux for video --- package-lock.json | 39 +++++- src/App.tsx | 18 +-- .../{KonvaApproach => NoteTaker}/index.tsx | 100 ++------------ src/components/canvas/VideoPlayer/Index.tsx | 125 ++++++++---------- .../canvas/VideoPlayer/VideoList.tsx | 107 ++++++--------- src/components/canvas/index.tsx | 31 ----- src/global.ts | 9 ++ src/store/rootReducer.ts | 4 +- src/store/timenotes/selectors.ts | 4 - src/store/types.ts | 3 +- src/store/video/actions.ts | 12 ++ src/store/video/reducer.ts | 20 +++ src/store/video/selector.ts | 5 + src/store/video/types.ts | 10 ++ 14 files changed, 214 insertions(+), 273 deletions(-) rename src/components/canvas/{KonvaApproach => NoteTaker}/index.tsx (68%) delete mode 100644 src/components/canvas/index.tsx create mode 100644 src/store/video/actions.ts create mode 100644 src/store/video/reducer.ts create mode 100644 src/store/video/selector.ts create mode 100644 src/store/video/types.ts diff --git a/package-lock.json b/package-lock.json index d8b6a70..158875c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3147,6 +3147,15 @@ "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz", "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==" }, + "bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", + "optional": true, + "requires": { + "file-uri-to-path": "1.0.0" + } + }, "bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -5903,6 +5912,12 @@ "schema-utils": "^2.5.0" } }, + "file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "optional": true + }, "filesize": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.0.1.tgz", @@ -7509,7 +7524,11 @@ "version": "1.2.13", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "optional": true + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } } } }, @@ -8651,6 +8670,12 @@ "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz", "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==" }, + "nan": { + "version": "2.14.1", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz", + "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==", + "optional": true + }, "nanomatch": { "version": "1.2.13", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", @@ -13362,7 +13387,11 @@ "version": "1.2.13", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "optional": true + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } }, "glob-parent": { "version": "3.1.0", @@ -13637,7 +13666,11 @@ "version": "1.2.13", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "optional": true + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } }, "glob-parent": { "version": "3.1.0", diff --git a/src/App.tsx b/src/App.tsx index c61ec19..5abdfea 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,24 +1,18 @@ - import React from "react" import "./App.css" -import KonvaApproach from "./components/canvas/KonvaApproach" -import Canvas from "./components/canvas"; +import NoteTaker from "./components/canvas/NoteTaker" -import KonvaApproach from "./components/canvas/KonvaApproach"; +import VideoList from "./components/canvas/VideoPlayer/VideoList" function App() { return (
- - {/* -

Something arbitrary

- */} -

Noteassieur:

+
- +
- ); + ) } -export default App; +export default App diff --git a/src/components/canvas/KonvaApproach/index.tsx b/src/components/canvas/NoteTaker/index.tsx similarity index 68% rename from src/components/canvas/KonvaApproach/index.tsx rename to src/components/canvas/NoteTaker/index.tsx index 25d5de5..7b855e0 100644 --- a/src/components/canvas/KonvaApproach/index.tsx +++ b/src/components/canvas/NoteTaker/index.tsx @@ -1,24 +1,14 @@ - import React, { useEffect, useState } from "react" import { useDispatch, useSelector } from "react-redux" import { Timenote } from "../../../global" import { stageAddNote, stageEditNote, stageNewtimenote, stageRemoveNote, stageSetTimeIn, stageSetTimeOut } from "../../../store/timenotes/actions" import { selectAllTimenotes, selectMinMaxValueById, selectTimenotes } from "../../../store/timenotes/selectors" - -export default function KonvaApproach() { - const dispatch = useDispatch() - - - +import VideoList from "../VideoPlayer/VideoList" // import Player from "../VideoPlayer/Index"; -import VideoList from "../VideoPlayer/VideoList"; - -export default function KonvaApproach() { - const allNotes = useSelector(selectAllNotes); - - const dispatch = useDispatch(); +export default function NoteTaker() { + const dispatch = useDispatch() const [timelineValue, setTimeLine] = useState(0) const [playPause, setPlayPause] = useState(false) @@ -43,8 +33,6 @@ export default function KonvaApproach() { } function newNote() { - - dispatch(stageAddNote(timelineValue)) } @@ -85,7 +73,7 @@ export default function KonvaApproach() { const allTimeNotes = useSelector(selectAllTimenotes) - const [videoLength, setVideoLength] = useState(500) + const [videoLength, setVideoLength] = useState(60 * 5) const [deleteBtn, setDelete] = useState(false) const [opacityDelete, setstate] = useState(1) @@ -147,7 +135,15 @@ export default function KonvaApproach() {
{allTimeNotes.map((timenote) => { - return ✍︎ + return ( +
+ {/* // make a tooltip or modal for displaying the user indications of notes */} + {/* {timenote.notes.map((note) => { + return {note.content} + })} */} + ✍︎ +
+ ) })}
@@ -168,74 +164,4 @@ export default function KonvaApproach() { )}
) - - dispatch(stageNewNote()); - } - - function removeNote(id: number) { - dispatch(stageRemoveNote(id)); - } - - function changeNote(e: textAreaOnChange) { - const content = e.target.value; - const id = parseInt(e.target.id); - - dispatch(stageChangeNote(id, content)); - } - - const [show, setShow] = useState(true); - - function minimize() { - setShow(!show); - } - - const display = show ? "none" : ""; - const gridsize = show ? 100 : 200; - - return ( - <> -
-
- -
- {allNotes.map((note) => { - return ( -
- - -
- ); - })} -
- -
-
-
-
- {allNotes.map((note) => { - return

{note.content.length > 1 ? note.content : "_"}

; - })} -
-
-
- - ); } diff --git a/src/components/canvas/VideoPlayer/Index.tsx b/src/components/canvas/VideoPlayer/Index.tsx index 1bb561d..9146b4e 100644 --- a/src/components/canvas/VideoPlayer/Index.tsx +++ b/src/components/canvas/VideoPlayer/Index.tsx @@ -1,82 +1,95 @@ -import { Button, Container } from "@material-ui/core"; -import React, { useState, useRef } from "react"; -import ReactPlayer from "react-player"; +import { Button, Container } from "@material-ui/core" +import React, { useState, useRef, useEffect } from "react" +import ReactPlayer from "react-player" // import VideoList from "./VideoList"; -import Duration from "./Duration"; -import "./index.css"; -import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"; -import Paper from "@material-ui/core/Paper"; -import Grid from "@material-ui/core/Grid"; +import Duration from "./Duration" +import "./index.css" +import { createStyles, makeStyles, Theme } from "@material-ui/core/styles" +import Paper from "@material-ui/core/Paper" +import Grid from "@material-ui/core/Grid" +import { useDispatch, useSelector } from "react-redux" +import { selectMyVideo } from "../../../store/video/selector" +import { stageCurTimeOfVideo } from "../../../store/video/actions" function Player({ videoPlay }: { videoPlay: any }) { - const [played, setPlayed] = useState(0); - const ref = useRef(null); - const [, setSeeking] = useState(true); - const [playing, setPlaying] = useState(false); - const [volume, setVolume] = useState(0.8); - const [duration, setDuration] = useState(1); - const [note, setNote] = useState(0); + const [played, setPlayed] = useState(0) + const ref = useRef(null) + const [, setSeeking] = useState(true) + const [playing, setPlaying] = useState(false) + const [volume, setVolume] = useState(0.8) + const [duration, setDuration] = useState(1) + const [note, setNote] = useState(0) function handleSeekChange(e: any) { - setPlayed(parseFloat(e.target.value)); + setPlayed(parseFloat(e.target.value)) } function handlePlayPause() { - setPlaying(!playing); + setPlaying(!playing) } function handleSeekMouseDown() { - setSeeking(true); + setSeeking(true) } function handleSeekMouseUp(e: any) { - setSeeking(false); - ref?.current?.seekTo(parseFloat(e.target.value)); + setSeeking(false) + ref?.current?.seekTo(parseFloat(e.target.value)) } function handleVolumeChange(e: any) { - setVolume(parseFloat(e.target.value)); + setVolume(parseFloat(e.target.value)) } function handleDuration(duration: number) { - setDuration(duration); + setDuration(duration) } function handleProgress(data: any) { - setPlayed(data.played); + setPlayed(data.played) } function handleAddNote() { - console.log("This time", Math.round(duration * played)); - setPlaying(false); - setNote(Math.round(duration * played)); + //console.log("This time", Math.round(duration * played)) + setPlaying(false) + setNote(Math.round(duration * played)) } - const videoId = videoPlay; + const dispatch = useDispatch() + + useEffect(() => { + const curTime = Math.round(duration * played) + + dispatch(stageCurTimeOfVideo(curTime)) + }, [played]) + + const videoId = videoPlay const gridStyles = makeStyles((theme: Theme) => createStyles({ root: { - flexGrow: 1, + flexGrow: 1 }, paper: { padding: theme.spacing(2), textAlign: "center", - color: theme.palette.text.secondary, - }, + color: theme.palette.text.secondary + } }) - ); + ) const buttonStyles = makeStyles((theme: Theme) => createStyles({ button: { - margin: theme.spacing(1), - }, + margin: theme.spacing(1) + } }) - ); + ) + + const gridClass = gridStyles() + const buttonClass = buttonStyles() - const gridClass = gridStyles(); - const buttonClass = buttonStyles(); + const myVideo = useSelector(selectMyVideo) return ( @@ -84,18 +97,7 @@ function Player({ videoPlay }: { videoPlay: any }) { - + @@ -138,28 +140,10 @@ function Player({ videoPlay }: { videoPlay: any }) {

)}

- Volume{" "} - + Volume

- Jump to{" "} - + Jump to

duration @@ -170,12 +154,13 @@ function Player({ videoPlay }: { videoPlay: any }) {

remaining

+

Note Time: {note}

 - ); + ) } -export default Player; +export default Player diff --git a/src/components/canvas/VideoPlayer/VideoList.tsx b/src/components/canvas/VideoPlayer/VideoList.tsx index be6f60f..9d9dea3 100644 --- a/src/components/canvas/VideoPlayer/VideoList.tsx +++ b/src/components/canvas/VideoPlayer/VideoList.tsx @@ -1,58 +1,57 @@ -import React, { useState, useEffect } from "react"; -import axios from "axios"; -import Player from "./Index"; -import { makeStyles } from "@material-ui/core/styles"; -import Card from "@material-ui/core/Card"; - -import CardActions from "@material-ui/core/CardActions"; -import CardContent from "@material-ui/core/CardContent"; - -import Button from "@material-ui/core/Button"; -import Typography from "@material-ui/core/Typography"; -import Grid from "@material-ui/core/Grid"; -import { Container, Input } from "@material-ui/core"; +import React, { useState, useEffect } from "react" +import axios from "axios" +import Player from "./Index" +import { makeStyles } from "@material-ui/core/styles" +import Card from "@material-ui/core/Card" + +import CardActions from "@material-ui/core/CardActions" +import CardContent from "@material-ui/core/CardContent" + +import Button from "@material-ui/core/Button" +import Typography from "@material-ui/core/Typography" +import Grid from "@material-ui/core/Grid" +import { Container, Input } from "@material-ui/core" +import { VideoId } from "../../../global" function VideoList() { - const [data, setData] = useState([]); - const [search, setSearch] = useState("React Native"); + const [data, setData] = useState([]) + const [search, setSearch] = useState("React Native") - const [videoId, setVideoId] = useState("Hf4MJH0jDb4"); + const [videoId, setVideoId] = useState("Hf4MJH0jDb4") - const apiKey = "AIzaSyAFOU_P_EeypyHzJg-N4IfuneruGzrm1Ak"; + const apiKey = "AIzaSyAFOU_P_EeypyHzJg-N4IfuneruGzrm1Ak" function handleSubmit(e: any) { - console.log(search); - e.preventDefault(); + console.log(search) + e.preventDefault() - fetchData(); + fetchData() } function onChange(e: any) { - e.preventDefault(); - setSearch(e.target.value); + e.preventDefault() + setSearch(e.target.value) } const fetchData = async () => { - const result = await axios( - `https://www.googleapis.com/youtube/v3/search?part=snippet&q=${search}&key=${apiKey}` - ); + const result = await axios(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${search}&key=${apiKey}`) - setData(result.data.items); - }; + setData(result.data.items) + } useEffect(() => { - fetchData(); - }, []); + fetchData() + }, []) const useStyles = makeStyles({ root: { - maxWidth: 345, + maxWidth: 345 }, media: { - height: 140, - }, - }); + height: 140 + } + }) - const classes = useStyles(); + const classes = useStyles() const videos: any = ( <> @@ -60,35 +59,25 @@ function VideoList() { {data.map((video: any) => { return ( - + - {video.snippet.title} + {video.snippet.title} {video.snippet.title.slice(0, 30)} - - {video.snippet.title} - + {video.snippet.title} +
) : ( - {timenote.timeOut - timelineValue} sec left + + {timenote.timeOut - timelineValue} sec left + )}
) : ( "" )} {deleteBtn ? ( - ) : ( "" )} - +
- ) - }) + ); + }); })} - -
-
+
{allTimeNotes.map((timenote) => { return (
@@ -141,27 +196,64 @@ export default function NoteTaker() { {/* {timenote.notes.map((note) => { return {note.content} })} */} - ✍︎ + + ✍︎ +
- ) + ); })}
- +
- +

time {timelineValue} in seconds

{id !== 0 ? (
In point: {minMaxValue?.timeIn} - + Out point: {minMaxValue?.timeOut} - +
) : ( "" )}
- ) + ); } diff --git a/src/store/timenotes/selectors.ts b/src/store/timenotes/selectors.ts index 6ca9282..3127fe4 100644 --- a/src/store/timenotes/selectors.ts +++ b/src/store/timenotes/selectors.ts @@ -26,3 +26,7 @@ export const selectMinMaxValueById = (id: number | null) => { export const selectAllTimenotes = (state: StoreState) => { return state.timenotes } + +export const selectCurTime = (state: StoreState) => { + return state.video.curTimeOfVideo +} diff --git a/src/store/video/selector.ts b/src/store/video/selector.ts index b6cf2c3..b5c3f38 100644 --- a/src/store/video/selector.ts +++ b/src/store/video/selector.ts @@ -3,3 +3,5 @@ import { StoreState } from "../types" export const selectMyVideo = (state: StoreState) => { return state.video } + + From 2cd9fc4ad5f65a11da543803a7aef779866cc2c1 Mon Sep 17 00:00:00 2001 From: AliLotfi123 Date: Wed, 16 Sep 2020 12:26:26 +0200 Subject: [PATCH 20/33] time and video works with redux --- src/components/canvas/VideoPlayer/Index.tsx | 136 +++++++++++------- .../canvas/VideoPlayer/VideoList.tsx | 118 +++++++++------ src/store/video/actions.ts | 30 +++- src/store/video/reducer.ts | 27 ++-- src/store/video/types.ts | 24 +++- 5 files changed, 218 insertions(+), 117 deletions(-) diff --git a/src/components/canvas/VideoPlayer/Index.tsx b/src/components/canvas/VideoPlayer/Index.tsx index 9146b4e..2178df4 100644 --- a/src/components/canvas/VideoPlayer/Index.tsx +++ b/src/components/canvas/VideoPlayer/Index.tsx @@ -1,95 +1,96 @@ -import { Button, Container } from "@material-ui/core" -import React, { useState, useRef, useEffect } from "react" -import ReactPlayer from "react-player" +import { Button, Container } from "@material-ui/core"; +import React, { useState, useRef, useEffect } from "react"; +import ReactPlayer from "react-player"; // import VideoList from "./VideoList"; -import Duration from "./Duration" -import "./index.css" -import { createStyles, makeStyles, Theme } from "@material-ui/core/styles" -import Paper from "@material-ui/core/Paper" -import Grid from "@material-ui/core/Grid" -import { useDispatch, useSelector } from "react-redux" -import { selectMyVideo } from "../../../store/video/selector" -import { stageCurTimeOfVideo } from "../../../store/video/actions" - -function Player({ videoPlay }: { videoPlay: any }) { - const [played, setPlayed] = useState(0) - const ref = useRef(null) - const [, setSeeking] = useState(true) - const [playing, setPlaying] = useState(false) - const [volume, setVolume] = useState(0.8) - const [duration, setDuration] = useState(1) - const [note, setNote] = useState(0) +import Duration from "./Duration"; +import "./index.css"; +import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"; +import Paper from "@material-ui/core/Paper"; +import Grid from "@material-ui/core/Grid"; +import { useDispatch, useSelector } from "react-redux"; +import { selectMyVideo } from "../../../store/video/selector"; +import { + stageCurTimeOfVideo, + stageTotalTimeOfVideo, +} from "../../../store/video/actions"; + +function Player() { + const [played, setPlayed] = useState(0); + const ref = useRef(null); + const [, setSeeking] = useState(true); + const [playing, setPlaying] = useState(false); + const [volume, setVolume] = useState(0.8); + const [duration, setDuration] = useState(1); + const [note, setNote] = useState(0); function handleSeekChange(e: any) { - setPlayed(parseFloat(e.target.value)) + setPlayed(parseFloat(e.target.value)); } function handlePlayPause() { - setPlaying(!playing) + setPlaying(!playing); } function handleSeekMouseDown() { - setSeeking(true) + setSeeking(true); } function handleSeekMouseUp(e: any) { - setSeeking(false) - ref?.current?.seekTo(parseFloat(e.target.value)) + setSeeking(false); + ref?.current?.seekTo(parseFloat(e.target.value)); } function handleVolumeChange(e: any) { - setVolume(parseFloat(e.target.value)) + setVolume(parseFloat(e.target.value)); } function handleDuration(duration: number) { - setDuration(duration) + setDuration(duration); } function handleProgress(data: any) { - setPlayed(data.played) + setPlayed(data.played); } function handleAddNote() { - //console.log("This time", Math.round(duration * played)) - setPlaying(false) - setNote(Math.round(duration * played)) + setPlaying(false); + setNote(Math.round(duration * played)); } - const dispatch = useDispatch() + const dispatch = useDispatch(); useEffect(() => { - const curTime = Math.round(duration * played) - - dispatch(stageCurTimeOfVideo(curTime)) - }, [played]) - - const videoId = videoPlay + const curTime = Math.round(duration * played); + const TotalTime = Math.round(duration); + dispatch(stageCurTimeOfVideo(curTime)); + dispatch(stageTotalTimeOfVideo(TotalTime)); + }, [played]); const gridStyles = makeStyles((theme: Theme) => createStyles({ root: { - flexGrow: 1 + flexGrow: 1, }, paper: { padding: theme.spacing(2), textAlign: "center", - color: theme.palette.text.secondary - } + color: theme.palette.text.secondary, + }, }) - ) + ); const buttonStyles = makeStyles((theme: Theme) => createStyles({ button: { - margin: theme.spacing(1) - } + margin: theme.spacing(1), + }, }) - ) + ); - const gridClass = gridStyles() - const buttonClass = buttonStyles() + const gridClass = gridStyles(); + const buttonClass = buttonStyles(); - const myVideo = useSelector(selectMyVideo) + const myVideo = useSelector(selectMyVideo); return ( @@ -97,7 +98,18 @@ function Player({ videoPlay }: { videoPlay: any }) { - + @@ -140,10 +152,28 @@ function Player({ videoPlay }: { videoPlay: any }) {

)}

- Volume + Volume{" "} +

- Jump to + Jump to{" "} +

duration @@ -160,7 +190,7 @@ function Player({ videoPlay }: { videoPlay: any }) { - ) + ); } -export default Player +export default Player; diff --git a/src/components/canvas/VideoPlayer/VideoList.tsx b/src/components/canvas/VideoPlayer/VideoList.tsx index 9d9dea3..09d63a5 100644 --- a/src/components/canvas/VideoPlayer/VideoList.tsx +++ b/src/components/canvas/VideoPlayer/VideoList.tsx @@ -1,57 +1,67 @@ -import React, { useState, useEffect } from "react" -import axios from "axios" -import Player from "./Index" -import { makeStyles } from "@material-ui/core/styles" -import Card from "@material-ui/core/Card" - -import CardActions from "@material-ui/core/CardActions" -import CardContent from "@material-ui/core/CardContent" - -import Button from "@material-ui/core/Button" -import Typography from "@material-ui/core/Typography" -import Grid from "@material-ui/core/Grid" -import { Container, Input } from "@material-ui/core" -import { VideoId } from "../../../global" +import React, { useState, useEffect } from "react"; +import axios from "axios"; +import Player from "./Index"; +import { makeStyles } from "@material-ui/core/styles"; +import Card from "@material-ui/core/Card"; + +import CardActions from "@material-ui/core/CardActions"; +import CardContent from "@material-ui/core/CardContent"; +import { stageCurVideo } from "../../../store/video/actions"; +import Button from "@material-ui/core/Button"; +import Typography from "@material-ui/core/Typography"; +import Grid from "@material-ui/core/Grid"; +import { Container, Input } from "@material-ui/core"; +import { VideoId } from "../../../global"; +import { useDispatch } from "react-redux"; function VideoList() { - const [data, setData] = useState([]) - const [search, setSearch] = useState("React Native") + const [data, setData] = useState([]); + const [search, setSearch] = useState("React Native"); - const [videoId, setVideoId] = useState("Hf4MJH0jDb4") + const [videoId, setVideoId] = useState(""); - const apiKey = "AIzaSyAFOU_P_EeypyHzJg-N4IfuneruGzrm1Ak" + const apiKey = "AIzaSyAFOU_P_EeypyHzJg-N4IfuneruGzrm1Ak"; function handleSubmit(e: any) { - console.log(search) - e.preventDefault() + e.preventDefault(); - fetchData() + fetchData(); } function onChange(e: any) { - e.preventDefault() - setSearch(e.target.value) + e.preventDefault(); + setSearch(e.target.value); } const fetchData = async () => { - const result = await axios(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${search}&key=${apiKey}`) + const result = await axios( + `https://www.googleapis.com/youtube/v3/search?part=snippet&q=${search}&key=${apiKey}` + ); - setData(result.data.items) - } + setData(result.data.items); + }; + + useEffect(() => { + fetchData(); + }, []); + + const dispatch = useDispatch(); useEffect(() => { - fetchData() - }, []) + const curVideo = videoId; + + dispatch(stageCurVideo(curVideo)); + }, [videoId]); const useStyles = makeStyles({ root: { - maxWidth: 345 + maxWidth: 345, }, media: { - height: 140 - } - }) + height: 140, + }, + }); - const classes = useStyles() + const classes = useStyles(); const videos: any = ( <> @@ -59,25 +69,35 @@ function VideoList() { {data.map((video: any) => { return ( - + - {video.snippet.title} + {video.snippet.title} {video.snippet.title.slice(0, 30)} - {video.snippet.title} + + {video.snippet.title} +

) : ( - - {timenote.timeOut - timelineValue} sec left - + {timenote.timeOut - curTime} sec left )}
) : ( @@ -217,7 +216,7 @@ export default function NoteTaker() {
-

time {timelineValue} in seconds

+

time {curTime} in seconds

{id !== 0 ? (
diff --git a/src/components/canvas/VideoPlayer/Index.tsx b/src/components/canvas/VideoPlayer/Index.tsx index 9146b4e..5660a09 100644 --- a/src/components/canvas/VideoPlayer/Index.tsx +++ b/src/components/canvas/VideoPlayer/Index.tsx @@ -1,95 +1,96 @@ -import { Button, Container } from "@material-ui/core" -import React, { useState, useRef, useEffect } from "react" -import ReactPlayer from "react-player" +import { Button, Container } from "@material-ui/core"; +import React, { useState, useRef, useEffect } from "react"; +import ReactPlayer from "react-player"; // import VideoList from "./VideoList"; -import Duration from "./Duration" -import "./index.css" -import { createStyles, makeStyles, Theme } from "@material-ui/core/styles" -import Paper from "@material-ui/core/Paper" -import Grid from "@material-ui/core/Grid" -import { useDispatch, useSelector } from "react-redux" -import { selectMyVideo } from "../../../store/video/selector" -import { stageCurTimeOfVideo } from "../../../store/video/actions" +import Duration from "./Duration"; +import "./index.css"; +import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"; +import Paper from "@material-ui/core/Paper"; +import Grid from "@material-ui/core/Grid"; +import { useDispatch, useSelector } from "react-redux"; +import { selectMyVideo } from "../../../store/video/selector"; +import { stageCurTimeOfVideo } from "../../../store/video/actions"; function Player({ videoPlay }: { videoPlay: any }) { - const [played, setPlayed] = useState(0) - const ref = useRef(null) - const [, setSeeking] = useState(true) - const [playing, setPlaying] = useState(false) - const [volume, setVolume] = useState(0.8) - const [duration, setDuration] = useState(1) - const [note, setNote] = useState(0) + const [played, setPlayed] = useState(0); + const ref = useRef(null); + const [, setSeeking] = useState(true); + const [playing, setPlaying] = useState(false); + const [volume, setVolume] = useState(0.8); + const [duration, setDuration] = useState(1); + const [note, setNote] = useState(0); function handleSeekChange(e: any) { - setPlayed(parseFloat(e.target.value)) + setPlayed(parseFloat(e.target.value)); } function handlePlayPause() { - setPlaying(!playing) + setPlaying(!playing); } function handleSeekMouseDown() { - setSeeking(true) + setSeeking(true); } function handleSeekMouseUp(e: any) { - setSeeking(false) - ref?.current?.seekTo(parseFloat(e.target.value)) + setSeeking(false); + ref?.current?.seekTo(parseFloat(e.target.value)); } function handleVolumeChange(e: any) { - setVolume(parseFloat(e.target.value)) + setVolume(parseFloat(e.target.value)); } function handleDuration(duration: number) { - setDuration(duration) + setDuration(duration); } function handleProgress(data: any) { - setPlayed(data.played) + // we need dispatch it to the store with an action (?) + setPlayed(data.played); } function handleAddNote() { //console.log("This time", Math.round(duration * played)) - setPlaying(false) - setNote(Math.round(duration * played)) + setPlaying(false); + setNote(Math.round(duration * played)); } - const dispatch = useDispatch() + const dispatch = useDispatch(); useEffect(() => { - const curTime = Math.round(duration * played) + const curTime = Math.round(duration * played); - dispatch(stageCurTimeOfVideo(curTime)) - }, [played]) + dispatch(stageCurTimeOfVideo(curTime)); + }, [played]); - const videoId = videoPlay + const videoId = videoPlay; const gridStyles = makeStyles((theme: Theme) => createStyles({ root: { - flexGrow: 1 + flexGrow: 1, }, paper: { padding: theme.spacing(2), textAlign: "center", - color: theme.palette.text.secondary - } + color: theme.palette.text.secondary, + }, }) - ) + ); const buttonStyles = makeStyles((theme: Theme) => createStyles({ button: { - margin: theme.spacing(1) - } + margin: theme.spacing(1), + }, }) - ) + ); - const gridClass = gridStyles() - const buttonClass = buttonStyles() + const gridClass = gridStyles(); + const buttonClass = buttonStyles(); - const myVideo = useSelector(selectMyVideo) + const myVideo = useSelector(selectMyVideo); return ( @@ -97,7 +98,18 @@ function Player({ videoPlay }: { videoPlay: any }) { - + @@ -140,10 +152,28 @@ function Player({ videoPlay }: { videoPlay: any }) {

)}

- Volume + Volume{" "} +

- Jump to + Jump to{" "} +

duration @@ -160,7 +190,7 @@ function Player({ videoPlay }: { videoPlay: any }) { - ) + ); } -export default Player +export default Player; diff --git a/src/store/video/actions.ts b/src/store/video/actions.ts index ba1fbcc..661c6ec 100644 --- a/src/store/video/actions.ts +++ b/src/store/video/actions.ts @@ -10,3 +10,5 @@ export function stageCurTimeOfVideo(curtime: number) { }) } } + + From 9c1e5ffeb768f227af2e90b88fe21cc3c59000ec Mon Sep 17 00:00:00 2001 From: AliLotfi123 Date: Wed, 16 Sep 2020 13:44:16 +0200 Subject: [PATCH 22/33] selectors added --- src/components/canvas/NoteTaker/index.tsx | 213 ++++++++++++++------ src/components/canvas/VideoPlayer/Index.tsx | 22 ++ src/store/timenotes/selectors.ts | 4 + src/store/video/actions.ts | 2 + src/store/video/selector.ts | 2 + 5 files changed, 182 insertions(+), 61 deletions(-) diff --git a/src/components/canvas/NoteTaker/index.tsx b/src/components/canvas/NoteTaker/index.tsx index 7b855e0..709be2c 100644 --- a/src/components/canvas/NoteTaker/index.tsx +++ b/src/components/canvas/NoteTaker/index.tsx @@ -1,139 +1,193 @@ -import React, { useEffect, useState } from "react" -import { useDispatch, useSelector } from "react-redux" -import { Timenote } from "../../../global" -import { stageAddNote, stageEditNote, stageNewtimenote, stageRemoveNote, stageSetTimeIn, stageSetTimeOut } from "../../../store/timenotes/actions" -import { selectAllTimenotes, selectMinMaxValueById, selectTimenotes } from "../../../store/timenotes/selectors" -import VideoList from "../VideoPlayer/VideoList" +import React, { useEffect, useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { Timenote } from "../../../global"; +import { + stageAddNote, + stageEditNote, + stageNewtimenote, + stageRemoveNote, + stageSetTimeIn, + stageSetTimeOut, +} from "../../../store/timenotes/actions"; +import { + selectAllTimenotes, + selectCurTime, + selectMinMaxValueById, + selectTimenotes, +} from "../../../store/timenotes/selectors"; +import { stageCurTimeOfVideo } from "../../../store/video/actions"; +import VideoList from "../VideoPlayer/VideoList"; // import Player from "../VideoPlayer/Index"; export default function NoteTaker() { - const dispatch = useDispatch() + const dispatch = useDispatch(); - const [timelineValue, setTimeLine] = useState(0) - const [playPause, setPlayPause] = useState(false) + const [playPause, setPlayPause] = useState(false); - useEffect(() => { - if (playPause) { - setTimeout(() => { - setTimeLine(timelineValue + 1) - }, 1000) - } - }, [timelineValue, playPause]) + const curTime = useSelector(selectCurTime); - const notesAtPointInTime = useSelector(selectTimenotes(timelineValue)) + const notesAtPointInTime = useSelector(selectTimenotes(curTime)); function timelineout(e: any) { - console.log(e.target.value) - setTimeLine(parseInt(e.target.value)) + console.log(e.target.value); + dispatch(stageCurTimeOfVideo(e.target.value)); } function removeNote(id: number, timenoteId: number) { - dispatch(stageRemoveNote(id, timenoteId)) + dispatch(stageRemoveNote(id, timenoteId)); } function newNote() { - dispatch(stageAddNote(timelineValue)) + dispatch(stageAddNote(curTime)); } function newTimenote() { - dispatch(stageNewtimenote(timelineValue)) + dispatch(stageNewtimenote(curTime)); } - const buttonshow = notesAtPointInTime.length === 0 ? true : false + const buttonshow = notesAtPointInTime.length === 0 ? true : false; - const [id, setId] = useState(0) - const minMaxValue: Timenote | undefined = useSelector(selectMinMaxValueById(id)) + const [id, setId] = useState(0); + const minMaxValue: Timenote | undefined = useSelector( + selectMinMaxValueById(id) + ); function setRange(id: number) { - setId(id) + setId(id); } - console.log(typeof minMaxValue?.timeIn) + console.log(typeof minMaxValue?.timeIn); function setTimeIn(e: any) { - const timeIn = e.target.value + const timeIn = e.target.value; - dispatch(stageSetTimeIn(timeIn, id)) + dispatch(stageSetTimeIn(timeIn, id)); } function setTimeOut(e: any) { - const timeOut = e.target.value + const timeOut = e.target.value; - dispatch(stageSetTimeOut(timeOut, id)) + dispatch(stageSetTimeOut(timeOut, id)); } function editNote(e: React.ChangeEvent) { - const content = e.target.value + const content = e.target.value; - const [noteId, timenoteId] = e.target.id.split(" ") + const [noteId, timenoteId] = e.target.id.split(" "); - dispatch(stageEditNote(content, parseInt(noteId), parseInt(timenoteId))) + dispatch(stageEditNote(content, parseInt(noteId), parseInt(timenoteId))); } - const allTimeNotes = useSelector(selectAllTimenotes) + const allTimeNotes = useSelector(selectAllTimenotes); - const [videoLength, setVideoLength] = useState(60 * 5) + const [videoLength, setVideoLength] = useState(60 * 5); - const [deleteBtn, setDelete] = useState(false) - const [opacityDelete, setstate] = useState(1) + const [deleteBtn, setDelete] = useState(false); + const [opacityDelete, setstate] = useState(1); function hoverIn() { - setDelete(!deleteBtn) + setDelete(!deleteBtn); } function hoverAway() { setTimeout(() => { - setDelete(!deleteBtn) - }, 1000) + setDelete(!deleteBtn); + }, 1000); } return (

-
-
+
+
{notesAtPointInTime.map((timenote) => { return timenote.notes.map((note) => { return (
{note.id === 1 ? (
- {timenote.timeOut - timelineValue > 3 ? ( + {timenote.timeOut - curTime > 3 ? (
range: {timenote.timeIn} - {timenote.timeOut} - +
) : ( - {timenote.timeOut - timelineValue} sec left + {timenote.timeOut - curTime} sec left )}
) : ( "" )} {deleteBtn ? ( - ) : ( "" )} - +
- ) - }) + ); + }); })} - -
-
+
{allTimeNotes.map((timenote) => { return (
@@ -141,27 +195,64 @@ export default function NoteTaker() { {/* {timenote.notes.map((note) => { return {note.content} })} */} - ✍︎ + + ✍︎ +
- ) + ); })}
- +
- +
-

time {timelineValue} in seconds

+

time {curTime} in seconds

{id !== 0 ? (
In point: {minMaxValue?.timeIn} - + Out point: {minMaxValue?.timeOut} - +
) : ( "" )}
- ) + ); } diff --git a/src/components/canvas/VideoPlayer/Index.tsx b/src/components/canvas/VideoPlayer/Index.tsx index 2178df4..230b76a 100644 --- a/src/components/canvas/VideoPlayer/Index.tsx +++ b/src/components/canvas/VideoPlayer/Index.tsx @@ -9,12 +9,18 @@ import Paper from "@material-ui/core/Paper"; import Grid from "@material-ui/core/Grid"; import { useDispatch, useSelector } from "react-redux"; import { selectMyVideo } from "../../../store/video/selector"; +<<<<<<< HEAD import { stageCurTimeOfVideo, stageTotalTimeOfVideo, } from "../../../store/video/actions"; function Player() { +======= +import { stageCurTimeOfVideo } from "../../../store/video/actions"; + +function Player({ videoPlay }: { videoPlay: any }) { +>>>>>>> 0337b8464ca8dd14930c44b816eb4428e426d5b8 const [played, setPlayed] = useState(0); const ref = useRef(null); const [, setSeeking] = useState(true); @@ -49,10 +55,18 @@ function Player() { } function handleProgress(data: any) { +<<<<<<< HEAD +======= + // we need dispatch it to the store with an action (?) +>>>>>>> 0337b8464ca8dd14930c44b816eb4428e426d5b8 setPlayed(data.played); } function handleAddNote() { +<<<<<<< HEAD +======= + //console.log("This time", Math.round(duration * played)) +>>>>>>> 0337b8464ca8dd14930c44b816eb4428e426d5b8 setPlaying(false); setNote(Math.round(duration * played)); } @@ -61,10 +75,18 @@ function Player() { useEffect(() => { const curTime = Math.round(duration * played); +<<<<<<< HEAD const TotalTime = Math.round(duration); dispatch(stageCurTimeOfVideo(curTime)); dispatch(stageTotalTimeOfVideo(TotalTime)); }, [played]); +======= + + dispatch(stageCurTimeOfVideo(curTime)); + }, [played]); + + const videoId = videoPlay; +>>>>>>> 0337b8464ca8dd14930c44b816eb4428e426d5b8 const gridStyles = makeStyles((theme: Theme) => createStyles({ diff --git a/src/store/timenotes/selectors.ts b/src/store/timenotes/selectors.ts index 6ca9282..3127fe4 100644 --- a/src/store/timenotes/selectors.ts +++ b/src/store/timenotes/selectors.ts @@ -26,3 +26,7 @@ export const selectMinMaxValueById = (id: number | null) => { export const selectAllTimenotes = (state: StoreState) => { return state.timenotes } + +export const selectCurTime = (state: StoreState) => { + return state.video.curTimeOfVideo +} diff --git a/src/store/video/actions.ts b/src/store/video/actions.ts index 9988a50..49eab0b 100644 --- a/src/store/video/actions.ts +++ b/src/store/video/actions.ts @@ -28,3 +28,5 @@ export function stageCurVideo(curvideo: string) { }); }; } + + diff --git a/src/store/video/selector.ts b/src/store/video/selector.ts index b6cf2c3..b5c3f38 100644 --- a/src/store/video/selector.ts +++ b/src/store/video/selector.ts @@ -3,3 +3,5 @@ import { StoreState } from "../types" export const selectMyVideo = (state: StoreState) => { return state.video } + + From 3b758fb7c739657f23638a656c75955ea102f172 Mon Sep 17 00:00:00 2001 From: AliLotfi123 Date: Wed, 16 Sep 2020 14:24:59 +0200 Subject: [PATCH 23/33] jump to fix --- src/components/canvas/VideoPlayer/Index.tsx | 32 +++++++------------ .../canvas/VideoPlayer/VideoList.tsx | 2 +- 2 files changed, 13 insertions(+), 21 deletions(-) diff --git a/src/components/canvas/VideoPlayer/Index.tsx b/src/components/canvas/VideoPlayer/Index.tsx index 16dd284..805c932 100644 --- a/src/components/canvas/VideoPlayer/Index.tsx +++ b/src/components/canvas/VideoPlayer/Index.tsx @@ -9,15 +9,13 @@ import Paper from "@material-ui/core/Paper"; import Grid from "@material-ui/core/Grid"; import { useDispatch, useSelector } from "react-redux"; import { selectMyVideo } from "../../../store/video/selector"; - import { stageCurTimeOfVideo, stageTotalTimeOfVideo, } from "../../../store/video/actions"; - +import { selectCurTime } from "../../../store/timenotes/selectors"; function Player() { - const [played, setPlayed] = useState(0); const ref = useRef(null); const [, setSeeking] = useState(true); @@ -27,22 +25,21 @@ function Player() { const [note, setNote] = useState(0); function handleSeekChange(e: any) { + console.log("waarde", e.target.value); + console.log("waarde", parseFloat(e.target.value)); setPlayed(parseFloat(e.target.value)); } - function handlePlayPause() { - setPlaying(!playing); - } - - function handleSeekMouseDown() { - setSeeking(true); - } - function handleSeekMouseUp(e: any) { setSeeking(false); + console.log("önchange", e.target.value); ref?.current?.seekTo(parseFloat(e.target.value)); } + function handlePlayPause() { + setPlaying(!playing); + } + function handleVolumeChange(e: any) { setVolume(parseFloat(e.target.value)); } @@ -52,12 +49,10 @@ function Player() { } function handleProgress(data: any) { - setPlayed(data.played); } function handleAddNote() { - setPlaying(false); setNote(Math.round(duration * played)); } @@ -65,17 +60,15 @@ function Player() { const dispatch = useDispatch(); useEffect(() => { - const curTime = Math.round(duration * played); - + const curTime = played; const TotalTime = Math.round(duration); dispatch(stageCurTimeOfVideo(curTime)); dispatch(stageTotalTimeOfVideo(TotalTime)); }, [played]); + const curTime = useSelector(selectCurTime); - dispatch(stageCurTimeOfVideo(curTime)); - }, [played]); - + console.log("Ciurrent ntime", curTime); const gridStyles = makeStyles((theme: Theme) => createStyles({ @@ -180,8 +173,7 @@ function Player() { min={0} max={0.999999} step="any" - value={played} - onMouseDown={handleSeekMouseDown} + value={curTime} onChange={handleSeekChange} onMouseUp={handleSeekMouseUp} /> diff --git a/src/components/canvas/VideoPlayer/VideoList.tsx b/src/components/canvas/VideoPlayer/VideoList.tsx index 09d63a5..3c82178 100644 --- a/src/components/canvas/VideoPlayer/VideoList.tsx +++ b/src/components/canvas/VideoPlayer/VideoList.tsx @@ -19,7 +19,7 @@ function VideoList() { const [videoId, setVideoId] = useState(""); - const apiKey = "AIzaSyAFOU_P_EeypyHzJg-N4IfuneruGzrm1Ak"; + const apiKey = "AIzaSyAdNVIdAe-mPOfI2fotUCNSuIWr02Gy3Vo"; function handleSubmit(e: any) { e.preventDefault(); From 37e2e20bbb85a777e887a657a744304857dc91ba Mon Sep 17 00:00:00 2001 From: AliLotfi123 Date: Wed, 16 Sep 2020 14:26:04 +0200 Subject: [PATCH 24/33] fixes selector --- src/components/canvas/VideoPlayer/Index.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/components/canvas/VideoPlayer/Index.tsx b/src/components/canvas/VideoPlayer/Index.tsx index 16dd284..88b60ac 100644 --- a/src/components/canvas/VideoPlayer/Index.tsx +++ b/src/components/canvas/VideoPlayer/Index.tsx @@ -15,9 +15,7 @@ import { stageTotalTimeOfVideo, } from "../../../store/video/actions"; - function Player() { - const [played, setPlayed] = useState(0); const ref = useRef(null); const [, setSeeking] = useState(true); @@ -52,12 +50,10 @@ function Player() { } function handleProgress(data: any) { - setPlayed(data.played); } function handleAddNote() { - setPlaying(false); setNote(Math.round(duration * played)); } @@ -72,11 +68,6 @@ function Player() { dispatch(stageTotalTimeOfVideo(TotalTime)); }, [played]); - - dispatch(stageCurTimeOfVideo(curTime)); - }, [played]); - - const gridStyles = makeStyles((theme: Theme) => createStyles({ root: { From 6f1909cc19f3eb0587525302d1496740bd6a394a Mon Sep 17 00:00:00 2001 From: AliLotfi123 Date: Wed, 16 Sep 2020 14:34:14 +0200 Subject: [PATCH 25/33] working videoselector --- src/components/canvas/VideoPlayer/Index.tsx | 27 ++++++++++--------- .../canvas/VideoPlayer/VideoList.tsx | 2 +- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src/components/canvas/VideoPlayer/Index.tsx b/src/components/canvas/VideoPlayer/Index.tsx index 88b60ac..805c932 100644 --- a/src/components/canvas/VideoPlayer/Index.tsx +++ b/src/components/canvas/VideoPlayer/Index.tsx @@ -9,11 +9,11 @@ import Paper from "@material-ui/core/Paper"; import Grid from "@material-ui/core/Grid"; import { useDispatch, useSelector } from "react-redux"; import { selectMyVideo } from "../../../store/video/selector"; - import { stageCurTimeOfVideo, stageTotalTimeOfVideo, } from "../../../store/video/actions"; +import { selectCurTime } from "../../../store/timenotes/selectors"; function Player() { const [played, setPlayed] = useState(0); @@ -25,22 +25,21 @@ function Player() { const [note, setNote] = useState(0); function handleSeekChange(e: any) { + console.log("waarde", e.target.value); + console.log("waarde", parseFloat(e.target.value)); setPlayed(parseFloat(e.target.value)); } - function handlePlayPause() { - setPlaying(!playing); - } - - function handleSeekMouseDown() { - setSeeking(true); - } - function handleSeekMouseUp(e: any) { setSeeking(false); + console.log("önchange", e.target.value); ref?.current?.seekTo(parseFloat(e.target.value)); } + function handlePlayPause() { + setPlaying(!playing); + } + function handleVolumeChange(e: any) { setVolume(parseFloat(e.target.value)); } @@ -61,13 +60,16 @@ function Player() { const dispatch = useDispatch(); useEffect(() => { - const curTime = Math.round(duration * played); - + const curTime = played; const TotalTime = Math.round(duration); dispatch(stageCurTimeOfVideo(curTime)); dispatch(stageTotalTimeOfVideo(TotalTime)); }, [played]); + const curTime = useSelector(selectCurTime); + + console.log("Ciurrent ntime", curTime); + const gridStyles = makeStyles((theme: Theme) => createStyles({ root: { @@ -171,8 +173,7 @@ function Player() { min={0} max={0.999999} step="any" - value={played} - onMouseDown={handleSeekMouseDown} + value={curTime} onChange={handleSeekChange} onMouseUp={handleSeekMouseUp} /> diff --git a/src/components/canvas/VideoPlayer/VideoList.tsx b/src/components/canvas/VideoPlayer/VideoList.tsx index 09d63a5..1a9b37c 100644 --- a/src/components/canvas/VideoPlayer/VideoList.tsx +++ b/src/components/canvas/VideoPlayer/VideoList.tsx @@ -19,7 +19,7 @@ function VideoList() { const [videoId, setVideoId] = useState(""); - const apiKey = "AIzaSyAFOU_P_EeypyHzJg-N4IfuneruGzrm1Ak"; + const apiKey = "AIzaSyDBf7WfQCOaXPBa6KuNIZbu_XqowXO4lxg"; function handleSubmit(e: any) { e.preventDefault(); From 0509839d8316d58b9353f7da4193924cc80d89fd Mon Sep 17 00:00:00 2001 From: rokpopov Date: Wed, 16 Sep 2020 15:03:58 +0200 Subject: [PATCH 26/33] Configure slider in Notetaker component --- src/components/canvas/NoteTaker/index.tsx | 9 ++++++--- src/store/video/reducer.ts | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/canvas/NoteTaker/index.tsx b/src/components/canvas/NoteTaker/index.tsx index 709be2c..9bfefac 100644 --- a/src/components/canvas/NoteTaker/index.tsx +++ b/src/components/canvas/NoteTaker/index.tsx @@ -96,6 +96,8 @@ export default function NoteTaker() { }, 1000); } + console.log("time", curTime); + return (
) : ( - {timenote.timeOut - curTime} sec left + + {timenote.timeOut - curTime * TotalTime} sec left + )}
) : ( @@ -199,11 +204,9 @@ export default function NoteTaker() { })} */} - -
- -
-

time {curTime} in seconds

+ /> */} {id !== 0 ? (
- In point: {minMaxValue?.timeIn} + + In point:{" "} + {minMaxValue?.timeIn ? ( + + ) : ( + minMaxValue?.timeIn + )} + - Out point: {minMaxValue?.timeOut} + + Out point: + {minMaxValue?.timeIn ? ( + + ) : ( + minMaxValue?.timeOut + )} +
) : ( diff --git a/src/components/canvas/VideoPlayer/Duration.tsx b/src/components/canvas/VideoPlayer/Duration.tsx index 521426c..2837c37 100644 --- a/src/components/canvas/VideoPlayer/Duration.tsx +++ b/src/components/canvas/VideoPlayer/Duration.tsx @@ -1,6 +1,6 @@ import React from "react"; -export default function Duration({ seconds }: { seconds: number }) { +export default function Duration({ seconds }: { seconds: any }) { return ; } diff --git a/src/components/canvas/VideoPlayer/Index.tsx b/src/components/canvas/VideoPlayer/Index.tsx index 805c932..638c201 100644 --- a/src/components/canvas/VideoPlayer/Index.tsx +++ b/src/components/canvas/VideoPlayer/Index.tsx @@ -3,7 +3,7 @@ import React, { useState, useRef, useEffect } from "react"; import ReactPlayer from "react-player"; // import VideoList from "./VideoList"; import Duration from "./Duration"; -import "./index.css"; + import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"; import Paper from "@material-ui/core/Paper"; import Grid from "@material-ui/core/Grid"; @@ -14,6 +14,9 @@ import { stageTotalTimeOfVideo, } from "../../../store/video/actions"; import { selectCurTime } from "../../../store/timenotes/selectors"; +import NoteTaker from "../NoteTaker"; + +import { stageAddNote } from "../../../store/timenotes/actions"; function Player() { const [played, setPlayed] = useState(0); @@ -25,7 +28,6 @@ function Player() { const [note, setNote] = useState(0); function handleSeekChange(e: any) { - console.log("waarde", e.target.value); console.log("waarde", parseFloat(e.target.value)); setPlayed(parseFloat(e.target.value)); } @@ -45,6 +47,7 @@ function Player() { } function handleDuration(duration: number) { + console.log("duration", duration); setDuration(duration); } @@ -54,7 +57,8 @@ function Player() { function handleAddNote() { setPlaying(false); - setNote(Math.round(duration * played)); + // setNote(Math.round(duration * played)); + dispatch(stageAddNote(curTime)); } const dispatch = useDispatch(); @@ -68,8 +72,6 @@ function Player() { const curTime = useSelector(selectCurTime); - console.log("Ciurrent ntime", curTime); - const gridStyles = makeStyles((theme: Theme) => createStyles({ root: { @@ -119,8 +121,21 @@ function Player() { + {/* This Button uses a Font Icon, see the installation instructions in the Icon component docs. */} - +

+ Jump to{" "} + +

{playing ? (

-
- {allTimeNotes.map((timenote) => { - return ( -
- {/* // make a tooltip or modal for displaying the user indications of notes */} - {/* {timenote.notes.map((note) => { - return {note.content} - })} */} - - ✍︎ - -
- ); - })} -
+ {/* */} {id !== 0 ? ( -
- - In point:{" "} - {minMaxValue?.timeIn ? ( + <> +
+ + Show note at + + + {/* + Moment when note starts showing:{" "} + {minMaxValue?.timeIn ? ( ) : ( minMaxValue?.timeIn )} - - - - Out point: - {minMaxValue?.timeIn ? ( + */} + {/* */} + + Stop showing note at: + + + {/* + Moment when note stops showing: + {minMaxValue?.timeIn ? ( ) : ( minMaxValue?.timeOut )} - - -
+ + + */} +
+
+ {allTimeNotes.map((timenote) => { + return ( +
+ {/* // make a tooltip or modal for displaying the user indications of notes */} + {/* {timenote.notes.map((note) => { + return {note.content} + })} */} + + ✍︎ + +
+ ); + })} +
+ ) : ( "" )} diff --git a/src/components/canvas/VideoPlayer/Index.tsx b/src/components/canvas/VideoPlayer/Index.tsx index 2a07e5f..feb05b9 100644 --- a/src/components/canvas/VideoPlayer/Index.tsx +++ b/src/components/canvas/VideoPlayer/Index.tsx @@ -19,7 +19,6 @@ import NoteTaker from "../NoteTaker"; import { stageAddNote } from "../../../store/timenotes/actions"; - function Player() { const [played, setPlayed] = useState(0); const ref = useRef(null); @@ -30,7 +29,6 @@ function Player() { const [note, setNote] = useState(0); function handleSeekChange(e: any) { - console.log("waarde", parseFloat(e.target.value)); setPlayed(parseFloat(e.target.value)); } @@ -75,7 +73,6 @@ function Player() { const curTime = useSelector(selectCurTime); - const gridStyles = makeStyles((theme: Theme) => createStyles({ root: { @@ -186,7 +183,7 @@ function Player() { />

-

+ {/*

Jump to{" "} -

+

*/}

duration diff --git a/src/components/canvas/VideoPlayer/VideoList.tsx b/src/components/canvas/VideoPlayer/VideoList.tsx index 046372e..e1dd356 100644 --- a/src/components/canvas/VideoPlayer/VideoList.tsx +++ b/src/components/canvas/VideoPlayer/VideoList.tsx @@ -19,9 +19,7 @@ function VideoList() { const [videoId, setVideoId] = useState(""); - - const apiKey = "AIzaSyBW6AVOckvw-UaHQG4NYBKqCP1JQBnLEs4"; - + const apiKey = "AIzaSyBfH8mAxCiv1XQhSjgsmffHE_sOJamYd-g"; function handleSubmit(e: any) { e.preventDefault(); From d0d25eeaa8e641a65af351f7276c08fe7acc495c Mon Sep 17 00:00:00 2001 From: Bartan89 Date: Thu, 17 Sep 2020 13:31:28 +0200 Subject: [PATCH 30/33] note display and edit with range, partial done --- package-lock.json | 17 ++ package.json | 1 + src/components/NoteRangeSetter.tsx | 68 +++++++ src/components/NoteRangeToggleBtn.tsx | 23 +++ src/components/canvas/NoteTaker/index.tsx | 188 ++++++------------ src/components/canvas/VideoPlayer/Index.tsx | 145 ++++++-------- .../canvas/VideoPlayer/VideoList.tsx | 123 +++++------- src/global.ts | 10 +- src/store/appstore/actions.ts | 19 ++ src/store/appstore/reducer.ts | 20 ++ src/store/appstore/selector.ts | 9 + src/store/appstore/types.ts | 13 ++ src/store/rootReducer.ts | 4 +- src/store/timenotes/actions.ts | 4 +- src/store/timenotes/reducer.ts | 2 +- src/store/types.ts | 3 +- src/store/video/selector.ts | 4 +- 17 files changed, 358 insertions(+), 295 deletions(-) create mode 100644 src/components/NoteRangeSetter.tsx create mode 100644 src/components/NoteRangeToggleBtn.tsx create mode 100644 src/store/appstore/actions.ts create mode 100644 src/store/appstore/reducer.ts create mode 100644 src/store/appstore/selector.ts create mode 100644 src/store/appstore/types.ts diff --git a/package-lock.json b/package-lock.json index 158875c..04ebf94 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1820,6 +1820,15 @@ "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz", "integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==" }, + "@types/material-ui": { + "version": "0.21.8", + "resolved": "https://registry.npmjs.org/@types/material-ui/-/material-ui-0.21.8.tgz", + "integrity": "sha512-Rsx3tRNoYkidDKfMfh+cegtOHMl73akzKnQ5pzxTrbx5oaUXLtG6YVlvtS43uebOSTDf8GQNaseB52r3zVagEg==", + "requires": { + "@types/react": "*", + "@types/react-addons-linked-state-mixin": "*" + } + }, "@types/minimatch": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", @@ -1854,6 +1863,14 @@ "csstype": "^3.0.2" } }, + "@types/react-addons-linked-state-mixin": { + "version": "0.14.21", + "resolved": "https://registry.npmjs.org/@types/react-addons-linked-state-mixin/-/react-addons-linked-state-mixin-0.14.21.tgz", + "integrity": "sha512-3UF7Szd3JyuU+z90kqu8L4VdDWp7SUC0eRjV2QmMEliaHODGLi5XyO5ctS50K/lG6fjC0dSAPVbvnqv0nPoGMQ==", + "requires": { + "@types/react": "*" + } + }, "@types/react-dom": { "version": "16.9.8", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.8.tgz", diff --git a/package.json b/package.json index cacb1a0..7c2676c 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "@types/jest": "^24.9.1", + "@types/material-ui": "^0.21.8", "@types/node": "^12.12.58", "@types/react": "^16.9.49", "@types/react-dom": "^16.9.8", diff --git a/src/components/NoteRangeSetter.tsx b/src/components/NoteRangeSetter.tsx new file mode 100644 index 0000000..8f839ef --- /dev/null +++ b/src/components/NoteRangeSetter.tsx @@ -0,0 +1,68 @@ +import React, { useEffect, useState } from "react" +import { makeStyles } from "@material-ui/core/styles" +import Typography from "@material-ui/core/Typography" +import Slider from "@material-ui/core/Slider" +import { useDispatch, useSelector } from "react-redux" +import { selectBtnRangeVisible, selectCurTimeNoteId } from "../store/appstore/selector" +import { selectMinMaxValueById, selectTotalTime } from "../store/timenotes/selectors" +import { stageSetTimeIn, stageSetTimeOut } from "../store/timenotes/actions" +import Duration from "./canvas/VideoPlayer/Duration" + +const useStyles = makeStyles({ + root: { + width: 500 + } +}) + +function valuetext(value: any) { + return `${value}°C` +} + +export default function RangeSlider() { + const show = useSelector(selectBtnRangeVisible) + const curtimenotid = useSelector(selectCurTimeNoteId) + + const inoutRange = useSelector(selectMinMaxValueById(curtimenotid)) + + console.log("I AM INOUT", inoutRange) + + const classes = useStyles() + + const totalTime = useSelector(selectTotalTime) + + const inValue = + const outValue = + + useEffect(() => { + setValue([inValue, outValue]) + }, [show]) + + const initialValue = [inValue, outValue] + + const [value, setValue] = useState(initialValue) + + const dispatch = useDispatch() + + const handleChange = (event: any, newValue: any) => { + dispatch(stageSetTimeIn(newValue[0], curtimenotid)) + dispatch(stageSetTimeOut(newValue[1], curtimenotid)) + + setValue(newValue) + } + return ( + <> + {show ? ( +

+
+ + Temperature range + + +
+
+ ) : ( + "" + )} + + ) +} diff --git a/src/components/NoteRangeToggleBtn.tsx b/src/components/NoteRangeToggleBtn.tsx new file mode 100644 index 0000000..de63c91 --- /dev/null +++ b/src/components/NoteRangeToggleBtn.tsx @@ -0,0 +1,23 @@ +import React from "react" +import { useDispatch } from "react-redux" +import { stageTimeNoteId, toggleNoteRange } from "../store/appstore/actions" + +type Props = { + timenoteId: any +} + +export default function NoteRangeToggleBtn(props: Props) { + const dispatch = useDispatch() + + function handleToggle() { + dispatch(stageTimeNoteId(parseInt(props.timenoteId))) + + dispatch(toggleNoteRange()) + } + + return ( +
+ +
+ ) +} diff --git a/src/components/canvas/NoteTaker/index.tsx b/src/components/canvas/NoteTaker/index.tsx index d615097..7bcc19d 100644 --- a/src/components/canvas/NoteTaker/index.tsx +++ b/src/components/canvas/NoteTaker/index.tsx @@ -1,106 +1,87 @@ -import React, { useEffect, useState } from "react"; -import { useDispatch, useSelector } from "react-redux"; -import { Timenote } from "../../../global"; -import { Typography, Slider } from "@material-ui/core"; -import { - stageAddNote, - stageEditNote, - stageNewtimenote, - stageRemoveNote, - stageSetTimeIn, - stageSetTimeOut, -} from "../../../store/timenotes/actions"; -import { - selectAllTimenotes, - selectCurTime, - selectTotalTime, - selectMinMaxValueById, - selectTimenotes, -} from "../../../store/timenotes/selectors"; -import { stageCurTimeOfVideo } from "../../../store/video/actions"; -import Duration from "../VideoPlayer/Duration"; -import VideoList from "../VideoPlayer/VideoList"; +import React, { useEffect, useState } from "react" +import { useDispatch, useSelector } from "react-redux" +import { Timenote } from "../../../global" +import { Typography, Slider } from "@material-ui/core" +import { stageAddNote, stageEditNote, stageNewtimenote, stageRemoveNote, stageSetTimeIn, stageSetTimeOut } from "../../../store/timenotes/actions" +import { selectAllTimenotes, selectCurTime, selectTotalTime, selectMinMaxValueById, selectTimenotes } from "../../../store/timenotes/selectors" +import { stageCurTimeOfVideo } from "../../../store/video/actions" +import Duration from "../VideoPlayer/Duration" +import VideoList from "../VideoPlayer/VideoList" +import NoteRangeToggleBtn from "../../NoteRangeToggleBtn" +import { stageTimeNoteId } from "../../../store/appstore/actions" // import Player from "../VideoPlayer/Index"; export default function NoteTaker() { - const dispatch = useDispatch(); + const dispatch = useDispatch() - const [playPause, setPlayPause] = useState(false); + const curTime = useSelector(selectCurTime) + const TotalTime = useSelector(selectTotalTime) - const curTime = useSelector(selectCurTime); - const TotalTime = useSelector(selectTotalTime); - - const notesAtPointInTime = useSelector(selectTimenotes(curTime)); + const notesAtPointInTime = useSelector(selectTimenotes(curTime)) function timelineout(e: any) { - console.log(e.target.value); - dispatch(stageCurTimeOfVideo(parseFloat(e.target.value))); + console.log(e.target.value) + dispatch(stageCurTimeOfVideo(parseFloat(e.target.value))) } function removeNote(id: number, timenoteId: number) { - dispatch(stageRemoveNote(id, timenoteId)); + dispatch(stageRemoveNote(id, timenoteId)) } function newNote() { - dispatch(stageAddNote(curTime)); + dispatch(stageAddNote(curTime)) } function newTimenote() { - dispatch(stageNewtimenote(curTime)); + dispatch(stageNewtimenote(curTime)) } - const buttonshow = notesAtPointInTime.length === 0 ? true : false; - - const [id, setId] = useState(0); - const minMaxValue: Timenote | undefined = useSelector( - selectMinMaxValueById(id) - ); + const buttonshow = notesAtPointInTime.length === 0 ? true : false - function setRange(id: number) { - setId(id); - } + const [id, setId] = useState(0) + const minMaxValue: Timenote | undefined = useSelector(selectMinMaxValueById(id)) - console.log(minMaxValue); + console.log(minMaxValue) function setTimeIn(e: any) { - const timeIn = e.target.value; + const timeIn = e.target.value - dispatch(stageSetTimeIn(timeIn, id)); + dispatch(stageSetTimeIn(timeIn, id)) } function setTimeOut(e: any) { - const timeOut = e.target.value; + const timeOut = e.target.value - dispatch(stageSetTimeOut(timeOut, id)); + dispatch(stageSetTimeOut(timeOut, id)) } function editNote(e: React.ChangeEvent) { - const content = e.target.value; + const content = e.target.value - const [noteId, timenoteId] = e.target.id.split(" "); + const [noteId, timenoteId] = e.target.id.split(" ") - dispatch(stageEditNote(content, parseInt(noteId), parseInt(timenoteId))); + dispatch(stageEditNote(content, parseInt(noteId), parseInt(timenoteId))) } - const allTimeNotes = useSelector(selectAllTimenotes); + const allTimeNotes = useSelector(selectAllTimenotes) - const [videoLength, setVideoLength] = useState(60 * 5); + const [videoLength, setVideoLength] = useState(60 * 5) - const [deleteBtn, setDelete] = useState(false); - const [opacityDelete, setstate] = useState(1); + const [deleteBtn, setDelete] = useState(false) + const [opacityDelete, setstate] = useState(1) function hoverIn() { - setDelete(!deleteBtn); + setDelete(!deleteBtn) } function hoverAway() { setTimeout(() => { - setDelete(!deleteBtn); - }, 1000); + setDelete(!deleteBtn) + }, 1000) } - console.log("time", curTime); + console.log("time", curTime) return (
@@ -108,7 +89,7 @@ export default function NoteTaker() { style={{ margin: "10px", display: "grid", - gridTemplateColumns: `200px 200px`, + gridTemplateColumns: `200px 200px` }} >
{notesAtPointInTime.map((timenote) => { @@ -127,61 +108,40 @@ export default function NoteTaker() {
{timenote.timeOut - curTime > 3 ? (
- range: + {/* range: {timenote.timeIn} - - {timenote.timeOut} - + {timenote.timeOut} */} +
) : ( - - {timenote.timeOut - curTime * TotalTime} sec left - + {timenote.timeOut - (curTime * TotalTime) / 100} sec left )}
) : ( "" )} {deleteBtn ? ( - ) : ( "" )} - +
- ); - }); + ) + }) })} -
@@ -215,28 +175,12 @@ export default function NoteTaker() { // getAriaValueText={curTime} /> - {/* - Moment when note starts showing:{" "} - {minMaxValue?.timeIn ? ( - - ) : ( - minMaxValue?.timeIn - )} - */} - {/* */} + Moment when note starts showing: {minMaxValue?.timeIn ? : minMaxValue?.timeIn} + Stop showing note at: - {/* + Moment when note stops showing: - {minMaxValue?.timeIn ? ( - - ) : ( - minMaxValue?.timeOut - )} + {minMaxValue?.timeIn ? : minMaxValue?.timeOut} - */} +
{allTimeNotes.map((timenote) => { @@ -289,13 +221,13 @@ export default function NoteTaker() { color: "#98B6D3", border: "none", fontSize: "2xp", - boxShadow: "0px 1px 1px rgba(0,0,0,0.2)", + boxShadow: "0px 1px 1px rgba(0,0,0,0.2)" }} > ✍︎
- ); + ) })}
@@ -303,5 +235,5 @@ export default function NoteTaker() { "" )}
- ); + ) } diff --git a/src/components/canvas/VideoPlayer/Index.tsx b/src/components/canvas/VideoPlayer/Index.tsx index feb05b9..ea76a4e 100644 --- a/src/components/canvas/VideoPlayer/Index.tsx +++ b/src/components/canvas/VideoPlayer/Index.tsx @@ -1,103 +1,101 @@ -import { Button, Container } from "@material-ui/core"; -import React, { useState, useRef, useEffect } from "react"; -import ReactPlayer from "react-player"; +import { Button, Container } from "@material-ui/core" +import React, { useState, useRef, useEffect } from "react" +import ReactPlayer from "react-player" // import VideoList from "./VideoList"; -import Duration from "./Duration"; +import Duration from "./Duration" -import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"; -import Paper from "@material-ui/core/Paper"; -import Grid from "@material-ui/core/Grid"; -import { useDispatch, useSelector } from "react-redux"; -import { selectMyVideo } from "../../../store/video/selector"; -import { - stageCurTimeOfVideo, - stageTotalTimeOfVideo, -} from "../../../store/video/actions"; -import { selectCurTime } from "../../../store/timenotes/selectors"; +import { createStyles, makeStyles, Theme } from "@material-ui/core/styles" +import Paper from "@material-ui/core/Paper" +import Grid from "@material-ui/core/Grid" +import { useDispatch, useSelector } from "react-redux" +import { selectMyVideo } from "../../../store/video/selector" +import { stageCurTimeOfVideo, stageTotalTimeOfVideo } from "../../../store/video/actions" +import { selectCurTime } from "../../../store/timenotes/selectors" -import NoteTaker from "../NoteTaker"; +import NoteTaker from "../NoteTaker" -import { stageAddNote } from "../../../store/timenotes/actions"; +import { stageAddNote } from "../../../store/timenotes/actions" +import NoteRangeSetter from "../../NoteRangeSetter" function Player() { - const [played, setPlayed] = useState(0); - const ref = useRef(null); - const [, setSeeking] = useState(true); - const [playing, setPlaying] = useState(false); - const [volume, setVolume] = useState(0.8); - const [duration, setDuration] = useState(1); - const [note, setNote] = useState(0); + const [played, setPlayed] = useState(0) + const ref = useRef(null) + const [, setSeeking] = useState(true) + const [playing, setPlaying] = useState(false) + const [volume, setVolume] = useState(0.8) + const [duration, setDuration] = useState(1) + const [note, setNote] = useState(0) function handleSeekChange(e: any) { - console.log("waarde", parseFloat(e.target.value)); - setPlayed(parseFloat(e.target.value)); + console.log("waarde", parseFloat(e.target.value)) + setPlayed(parseFloat(e.target.value)) } function handleSeekMouseUp(e: any) { - setSeeking(false); - console.log("önchange", e.target.value); - ref?.current?.seekTo(parseFloat(e.target.value)); + setSeeking(false) + console.log("önchange", e.target.value) + ref?.current?.seekTo(parseFloat(e.target.value)) } function handlePlayPause() { - setPlaying(!playing); + setPlaying(!playing) } function handleVolumeChange(e: any) { - setVolume(parseFloat(e.target.value)); + setVolume(parseFloat(e.target.value)) } function handleDuration(duration: number) { - console.log("duration", duration); - setDuration(duration); + console.log("duration", duration) + setDuration(duration) } function handleProgress(data: any) { - setPlayed(data.played); + setPlayed(data.played) } function handleAddNote() { - setPlaying(false); + setPlaying(false) // setNote(Math.round(duration * played)); - dispatch(stageAddNote(curTime)); + dispatch(stageAddNote(curTime)) } - const dispatch = useDispatch(); + const dispatch = useDispatch() useEffect(() => { - const curTime = played; - const TotalTime = Math.round(duration); - dispatch(stageCurTimeOfVideo(curTime)); - dispatch(stageTotalTimeOfVideo(TotalTime)); - }, [played]); + const curTime = played + const TotalTime = Math.round(duration) + dispatch(stageCurTimeOfVideo(curTime)) + dispatch(stageTotalTimeOfVideo(TotalTime)) + }, [played]) - const curTime = useSelector(selectCurTime); + const curTime = useSelector(selectCurTime) const gridStyles = makeStyles((theme: Theme) => createStyles({ root: { - flexGrow: 1, + flexGrow: 1 }, paper: { padding: theme.spacing(2), textAlign: "center", - color: theme.palette.text.secondary, - }, + color: theme.palette.text.secondary + } }) - ); + ) const buttonStyles = makeStyles((theme: Theme) => createStyles({ button: { - margin: theme.spacing(1), - }, + margin: theme.spacing(1) + } }) - ); + ) - const gridClass = gridStyles(); - const buttonClass = buttonStyles(); + const gridClass = gridStyles() + const buttonClass = buttonStyles() - const myVideo = useSelector(selectMyVideo); + const myVideo = useSelector(selectMyVideo) return ( @@ -105,37 +103,20 @@ function Player() { - + + + + {/* This Button uses a Font Icon, see the installation instructions in the Icon component docs. */} +

- Jump to{" "} - +

{playing ? (

@@ -172,15 +153,7 @@ function Player() {

)}

- Volume{" "} - + Volume

{/*

@@ -211,7 +184,7 @@ function Player() { - ); + ) } -export default Player; +export default Player diff --git a/src/components/canvas/VideoPlayer/VideoList.tsx b/src/components/canvas/VideoPlayer/VideoList.tsx index e1dd356..67e20eb 100644 --- a/src/components/canvas/VideoPlayer/VideoList.tsx +++ b/src/components/canvas/VideoPlayer/VideoList.tsx @@ -1,67 +1,70 @@ -import React, { useState, useEffect } from "react"; -import axios from "axios"; -import Player from "./Index"; -import { makeStyles } from "@material-ui/core/styles"; -import Card from "@material-ui/core/Card"; - -import CardActions from "@material-ui/core/CardActions"; -import CardContent from "@material-ui/core/CardContent"; -import { stageCurVideo } from "../../../store/video/actions"; -import Button from "@material-ui/core/Button"; -import Typography from "@material-ui/core/Typography"; -import Grid from "@material-ui/core/Grid"; -import { Container, Input } from "@material-ui/core"; -import { VideoId } from "../../../global"; -import { useDispatch } from "react-redux"; +import React, { useState, useEffect } from "react" +import axios from "axios" +import Player from "./Index" +import { makeStyles } from "@material-ui/core/styles" +import Card from "@material-ui/core/Card" + +import CardActions from "@material-ui/core/CardActions" +import CardContent from "@material-ui/core/CardContent" +import { stageCurVideo } from "../../../store/video/actions" +import Button from "@material-ui/core/Button" +import Typography from "@material-ui/core/Typography" +import Grid from "@material-ui/core/Grid" +import { Container, Input } from "@material-ui/core" +import { VideoId } from "../../../global" +import { useDispatch } from "react-redux" function VideoList() { - const [data, setData] = useState([]); - const [search, setSearch] = useState("React Native"); + const [data, setData] = useState([]) + const [search, setSearch] = useState("React Native") - const [videoId, setVideoId] = useState(""); + const [videoId, setVideoId] = useState("") - const apiKey = "AIzaSyBfH8mAxCiv1XQhSjgsmffHE_sOJamYd-g"; + const apiKey = "AIzaSyA9iWgCYiyw6dwHjWjU9SKhV3j8NJE7Xjo" function handleSubmit(e: any) { - e.preventDefault(); + e.preventDefault() - fetchData(); + fetchData() } function onChange(e: any) { - e.preventDefault(); - setSearch(e.target.value); + e.preventDefault() + setSearch(e.target.value) } const fetchData = async () => { - const result = await axios( - `https://www.googleapis.com/youtube/v3/search?part=snippet&q=${search}&key=${apiKey}` - ); - - setData(result.data.items); - }; + try { + const result = await axios(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${search}&key=${apiKey}`) + + console.log("THIS IS FETCH FROM YOUTUBE:", result) + setData(result.data.items) + } catch (error) { + console.log(error.message) + } + } useEffect(() => { - fetchData(); - }, []); + fetchData() + }, []) - const dispatch = useDispatch(); + const dispatch = useDispatch() useEffect(() => { - const curVideo = videoId; + const curVideo = videoId - dispatch(stageCurVideo(curVideo)); - }, [videoId]); + dispatch(stageCurVideo(curVideo)) + }, [videoId]) const useStyles = makeStyles({ root: { - maxWidth: 345, + maxWidth: 345 }, media: { - height: 140, - }, - }); + height: 140 + } + }) - const classes = useStyles(); + const classes = useStyles() const videos: any = ( <> @@ -69,35 +72,25 @@ function VideoList() { {data.map((video: any) => { return ( - + - {video.snippet.title} + {video.snippet.title} {video.snippet.title.slice(0, 30)} - - {video.snippet.title} - + {video.snippet.title}

) : ( diff --git a/src/components/NotesOnTimeLine.tsx b/src/components/NotesOnTimeLine.tsx new file mode 100644 index 0000000..24bfe5e --- /dev/null +++ b/src/components/NotesOnTimeLine.tsx @@ -0,0 +1,47 @@ +import React from "react" +import { useSelector } from "react-redux" +import { selectAllTimenotes } from "../store/timenotes/selectors" +import { selectLengthOfVid } from "../store/video/selector" + +export default function NotesOnTimeLine() { + const allTimeNotes = useSelector(selectAllTimenotes) + + const lengthOfVid = useSelector(selectLengthOfVid) + + return ( +
+ {allTimeNotes.map((timenote: any) => { + return ( +
+ {/* // make a tooltip or modal for displaying the user indications of notes */} + {/* {timenote.notes.map((note) => { + return {note.content} + })} */} + + {console.log("THIS IS TIMENOTE TIME IN: ", timenote.timeIn)} + {console.log("LEN OF VID:", lengthOfVid)} + {console.log("CALC 1", timenote.timeIn * lengthOfVid)} + + + ✍︎ + +
+ ) + })} +
+ ) +} + +// width: `${(timenote.timeOut - timenote.timeIn) * 100}px`, +// position: "absolute", +// left: `${timenote.timeIn * 100}px`, diff --git a/src/components/canvas/NoteTaker/index.tsx b/src/components/canvas/NoteTaker/index.tsx index 7bcc19d..5d7e5b0 100644 --- a/src/components/canvas/NoteTaker/index.tsx +++ b/src/components/canvas/NoteTaker/index.tsx @@ -104,29 +104,18 @@ export default function NoteTaker() { return timenote.notes.map((note) => { return (
- {note.id === 1 ? ( + {note.id === 1 ?
: ""} + {deleteBtn ? (
- {timenote.timeOut - curTime > 3 ? ( -
- {/* range: - {timenote.timeIn} - - {timenote.timeOut} */} - -
- ) : ( - {timenote.timeOut - (curTime * TotalTime) / 100} sec left - )} + + +
) : ( "" )} - {deleteBtn ? ( - - ) : ( - "" - )}
) diff --git a/src/components/canvas/VideoPlayer/Index.tsx b/src/components/canvas/VideoPlayer/Index.tsx index ea76a4e..017f604 100644 --- a/src/components/canvas/VideoPlayer/Index.tsx +++ b/src/components/canvas/VideoPlayer/Index.tsx @@ -16,6 +16,7 @@ import NoteTaker from "../NoteTaker" import { stageAddNote } from "../../../store/timenotes/actions" import NoteRangeSetter from "../../NoteRangeSetter" +import NotesOnTimeLine from "../../NotesOnTimeLine" function Player() { const [played, setPlayed] = useState(0) @@ -114,10 +115,11 @@ function Player() { {/* This Button uses a Font Icon, see the installation instructions in the Icon component docs. */} - +

+ {playing ? (