+
+ )
+}
diff --git a/src/components/canvas/VideoPlayer/Duration.tsx b/src/components/canvas/VideoPlayer/Duration.tsx
new file mode 100644
index 0000000..2837c37
--- /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: number) {
+ 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: number) {
+ 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..017f604
--- /dev/null
+++ b/src/components/canvas/VideoPlayer/Index.tsx
@@ -0,0 +1,192 @@
+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 { 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 { stageAddNote } from "../../../store/timenotes/actions"
+import NoteRangeSetter from "../../NoteRangeSetter"
+import NotesOnTimeLine from "../../NotesOnTimeLine"
+
+function Player() {
+ const [played, setPlayed] = useState(0)
+ const ref = useRef
+
+
+ {/* */}
+
+ {id !== 0 ? (
+ <>
+
+ {notesAtPointInTime.map((timenote) => {
+ return timenote.notes.map((note) => {
+ return (
+
+
+
+ {note.id === 1 ? : ""}
+ {deleteBtn ? (
+
+ )
+ })
+ })}
+
+
+
+
+ ) : (
+ ""
+ )}
+
+
+
+ Show note at
+
+
+ Stop showing note at:
+
+
+
+ {allTimeNotes.map((timenote) => {
+ return (
+
+
+ ) : (
+ ""
+ )}
+
+ {/* // make a tooltip or modal for displaying the user indications of notes */}
+ {/* {timenote.notes.map((note) => {
+ return {note.content}
+ })} */}
+
+ ✍︎
+
+
+ )
+ })}
+ + +
+ + {playing ? ( ++ } + onClick={handlePlayPause} + > + Pause + + +
+ ) : ( ++ } + onClick={handlePlayPause} + > + Play + +
+ )} ++ Volume +
+ + {/*+ Jump to{" "} + +
*/} + +
+ duration
+ elapsed
+ remaining
Note Time: {note}
+loading
+ // ) : ( + // data.map((video: any) => { + // return video.id.videoId; + // }) + // ); + + return ( + <> +{videos}
+ + ) +} + +export default VideoList diff --git a/src/global.ts b/src/global.ts new file mode 100644 index 0000000..39ca7bd --- /dev/null +++ b/src/global.ts @@ -0,0 +1,25 @@ +export type Note = { + id: number + content: string +} + +export type Timenote = { + id: number + timeIn: number + timeOut: number + notes: Note[] +} + +export type VideoId = string + +export type Video = { + title: string + url: VideoId + lengthOfVid: number + curTimeOfVideo: number +} + +export type Appstore = { + btnRangeVisible: boolean + curTimeNoteId: number | null +} 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