From c9aa2e55331fd1a68934e10bb41dc596646ec97f Mon Sep 17 00:00:00 2001 From: Sahir Gomez Date: Wed, 23 Jun 2021 18:48:11 -0400 Subject: [PATCH] added video store and video components --- README.md | 37 ++---- package-lock.json | 72 +++++++++++ package.json | 2 + src/assets/scss/custom.scss | 3 +- src/assets/scss/main_content.scss | 14 ++- src/assets/scss/variables.scss | 24 +++- src/assets/scss/video_controls.scss | 16 +++ src/components/AnnotationView.js | 130 ++++++++++++++++++++ src/components/EnvironmentContainer.js | 18 ++- src/components/Scene2.js | 38 ------ src/components/Section.js | 25 ---- src/components/TopSection.js | 23 +--- src/components/videoPlayer/FormattedTime.js | 31 +++++ src/stores/ObjectStore.js | 2 - src/stores/VideoStore.js | 30 +++++ 15 files changed, 348 insertions(+), 117 deletions(-) create mode 100644 src/assets/scss/video_controls.scss create mode 100644 src/components/AnnotationView.js delete mode 100644 src/components/Scene2.js delete mode 100644 src/components/Section.js create mode 100644 src/components/videoPlayer/FormattedTime.js create mode 100644 src/stores/VideoStore.js diff --git a/README.md b/README.md index 70cba0a..361b0c7 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,15 @@ ## Available Scripts -In the project directory, you can run: +To install +`git clone https://github.com/sahirgomez1/ycb_objects.git` + +In the project directory : +`cd ycb_objects_app` +you can run to install all dependencies +`npm install` +then run +`npm start`. ### `npm start` @@ -27,33 +35,6 @@ Your app is ready to be deployed! See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. -### `npm run eject` - -**Note: this is a one-way operation. Once you `eject`, you can’t go back!** - -If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. - -Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. - -You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. - -## Learn More - -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). - -To learn React, check out the [React documentation](https://reactjs.org/). - -### Code Splitting - -This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) - -### Analyzing the Bundle Size - -This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) - -### Making a Progressive Web App - -This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) ### Advanced Configuration diff --git a/package-lock.json b/package-lock.json index a4074a8..c34a22c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,10 +13,12 @@ "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", "bootstrap": "^5.0.1", + "bootstrap-icons": "^1.5.0", "node-sass": "^6.0.0", "react": "^17.0.2", "react-bootstrap": "^1.6.1", "react-dom": "^17.0.2", + "react-player": "^2.9.0", "react-scripts": "4.0.3", "three": "^0.129.0", "web-vitals": "^1.1.2", @@ -5324,6 +5326,14 @@ "@popperjs/core": "^2.9.2" } }, + "node_modules/bootstrap-icons": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.5.0.tgz", + "integrity": "sha512-44feMc7DE1Ccpsas/1wioN8ewFJNquvi5FewA06wLnqct7CwMdGDVy41ieHaacogzDqLfG8nADIvMNp9e4bfbA==", + "engines": { + "node": ">=10" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -13448,6 +13458,11 @@ "node": ">=4" } }, + "node_modules/load-script": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz", + "integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ=" + }, "node_modules/loader-runner": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz", @@ -13700,6 +13715,11 @@ "node": ">= 0.6" } }, + "node_modules/memoize-one": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" + }, "node_modules/memory-fs": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz", @@ -17229,6 +17249,11 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz", "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==" }, + "node_modules/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==" + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -17278,6 +17303,21 @@ "node": ">=6.9.0" } }, + "node_modules/react-player": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.9.0.tgz", + "integrity": "sha512-jNUkTfMmUhwPPAktAdIqiBcVUKsFKrVGH6Ocutj6535CNfM91yrvWxHg6fvIX8Y/fjYUPoejddwh7qboNV9vGA==", + "dependencies": { + "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" + }, + "peerDependencies": { + "react": ">=16.6.0" + } + }, "node_modules/react-reconciler": { "version": "0.26.2", "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.26.2.tgz", @@ -27016,6 +27056,11 @@ "integrity": "sha512-Fl79+wsLOZKoiU345KeEaWD0ik8WKRI5zm0YSPj2oF1Qr+BO7z0fco6GbUtqjoG1h4VI89PeKJnMsMMVQdKKTw==", "requires": {} }, + "bootstrap-icons": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.5.0.tgz", + "integrity": "sha512-44feMc7DE1Ccpsas/1wioN8ewFJNquvi5FewA06wLnqct7CwMdGDVy41ieHaacogzDqLfG8nADIvMNp9e4bfbA==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -33193,6 +33238,11 @@ } } }, + "load-script": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz", + "integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ=" + }, "loader-runner": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz", @@ -33401,6 +33451,11 @@ "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" }, + "memoize-one": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" + }, "memory-fs": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz", @@ -36190,6 +36245,11 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz", "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==" }, + "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": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -36230,6 +36290,18 @@ } } }, + "react-player": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.9.0.tgz", + "integrity": "sha512-jNUkTfMmUhwPPAktAdIqiBcVUKsFKrVGH6Ocutj6535CNfM91yrvWxHg6fvIX8Y/fjYUPoejddwh7qboNV9vGA==", + "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-reconciler": { "version": "0.26.2", "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.26.2.tgz", diff --git a/package.json b/package.json index 185a23c..f1ff3b7 100644 --- a/package.json +++ b/package.json @@ -9,10 +9,12 @@ "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", "bootstrap": "^5.0.1", + "bootstrap-icons": "^1.5.0", "node-sass": "^6.0.0", "react": "^17.0.2", "react-bootstrap": "^1.6.1", "react-dom": "^17.0.2", + "react-player": "^2.9.0", "react-scripts": "4.0.3", "three": "^0.129.0", "web-vitals": "^1.1.2", diff --git a/src/assets/scss/custom.scss b/src/assets/scss/custom.scss index 8058d41..3ecb0fa 100644 --- a/src/assets/scss/custom.scss +++ b/src/assets/scss/custom.scss @@ -1,7 +1,8 @@ - @import "./variables.scss"; +@import "./video_controls"; @import "./main_content.scss"; @import "./sliders.scss"; +@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"); @import "node_modules/bootstrap/scss/bootstrap"; diff --git a/src/assets/scss/main_content.scss b/src/assets/scss/main_content.scss index 9605a02..d9ea179 100644 --- a/src/assets/scss/main_content.scss +++ b/src/assets/scss/main_content.scss @@ -40,7 +40,7 @@ left: 0; right: 0; top: 0; - bottom: 60px; + bottom: 0; } .video_box { @@ -62,6 +62,18 @@ z-index: 1; } +.scene-tooltip { + padding-top: 5px; + transform: translate3d(50%, 0, 0); + text-align: center; + background: $primary; + color: white; + padding: 10px 10px; + border-radius: 5px; + font-size: xx-small; + +} + .output { background-color: $primary; border-radius: 5px; diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss index 7f14b2b..ad17c12 100644 --- a/src/assets/scss/variables.scss +++ b/src/assets/scss/variables.scss @@ -74,4 +74,26 @@ $h2-font-size: $font-size-base * 1.25 !default; $h3-font-size: $font-size-base * 1.0625 !default; $h4-font-size: $font-size-base * .9375 !default; $h5-font-size: $font-size-base * .8125 !default; -$h6-font-size: $font-size-base * .625 !default; \ No newline at end of file +$h6-font-size: $font-size-base * .625 !default; + +// Navbar + +$navbar-nav-link-font-size: .5rem !default; +$navbar-nav-link-font-weight: 500 !default; +$navbar-nav-link-text-transform: normal !default; +$navbar-nav-link-letter-spacing: 0 !default; + + + +// Buttons + Forms + +$input-btn-font-size-sm: .75rem !default; +$input-btn-font-size: .8rem !default; +$input-btn-font-size-lg: .85rem !default; + +// Dropdown + +$dropdown-bg: $white !default; +$dropdown-border-width: 0 !default; +$dropdown-border-color: rgba($black, .15) !default; +$dropdown-font-size: .75rem !default; \ No newline at end of file diff --git a/src/assets/scss/video_controls.scss b/src/assets/scss/video_controls.scss new file mode 100644 index 0000000..32c3da9 --- /dev/null +++ b/src/assets/scss/video_controls.scss @@ -0,0 +1,16 @@ +.player-control { + &__button { + color: transparent; + padding-bottom: 0; + padding-top: 0; + } + + &__speed-toggle { + color: #000; + font-family: Courier, sans-serif; + } + + &__time { + font-family: Courier, sans-serif; + } +} \ No newline at end of file diff --git a/src/components/AnnotationView.js b/src/components/AnnotationView.js new file mode 100644 index 0000000..6254013 --- /dev/null +++ b/src/components/AnnotationView.js @@ -0,0 +1,130 @@ +import React, { useRef } from 'react'; +import { Dropdown, Button, ButtonGroup } from 'react-bootstrap'; +import ReactPlayer from 'react-player'; +import EnvironmentContainer from './EnvironmentContainer'; +import FormattedTime from '../components/videoPlayer/FormattedTime'; +import { useVideoStore } from '../stores/VideoStore'; + +const Slider = ({ onMouseUp, onMouseDown, onChange, played }) => ( +
+ +
+); + +const AnnotationView = ({camPosition, objScale}) => { + + const player = useRef() + const { + playing, + played, + duration, + playbackRate, + loop, + seeking, + handleProgress, + handleVideoPlayPause, + handleVideoRewind, + handleSeekingtoFalse, + handleVideoDuration, + handleEnded, + handleSeekMouseDown, + handleSeekChange, + handleVideoSpeedChange } = useVideoStore(); + + const handleSeekMouseUp = e => { + handleSeekingtoFalse() + player.current.seekTo(parseFloat(e.target.value)) + } + + const handleRewind = () => { + handleVideoRewind() + player.current.seekTo(0); + } + + const onProgress = state => { + if (!seeking) handleProgress(state.played) + } + + return ( + <> +
+
+
+ +
+
+ console.log('onReady')} + onStart={() => console.log('onStart')} + onBuffer={() => console.log('onBuffer')} + onSeek={e => console.log('onSeek', e)} + onEnded={handleEnded} + onError={e => console.log('onError', e)} + onProgress={onProgress} + onDuration={e => handleVideoDuration(e)} + /> +
+
+ handleSeekMouseDown(e)} + onChange={(e) => handleSeekChange(e)} + onMouseUp={(e) => handleSeekMouseUp(e)} + /> +
+
+ + + + + + + { playbackRate } + + + handleVideoSpeedChange(0.5) }>0.5 + handleVideoSpeedChange(1) }>1 + handleVideoSpeedChange(1.5) }>1.5 + handleVideoSpeedChange(2) }>2 + + +
+
+
+ + {' / ' } + +
+
+
+
+ + ) +} + +export default AnnotationView; diff --git a/src/components/EnvironmentContainer.js b/src/components/EnvironmentContainer.js index 37dd7bf..abcbe4c 100644 --- a/src/components/EnvironmentContainer.js +++ b/src/components/EnvironmentContainer.js @@ -1,4 +1,4 @@ -import React, { useRef, useEffect, useCallback, Suspense } from "react"; +import React, { useRef, useEffect, useCallback, Suspense, useState } from "react"; import { Canvas, useFrame, useThree, extend } from "@react-three/fiber"; import { useGLTF, Environment, Html, softShadows, Shadow } from "@react-three/drei"; import { useObjectStore } from '../stores/ObjectStore'; @@ -13,6 +13,7 @@ const Banana = ({camPosition, ...props}) => { const group = useRef(); const object = useRef(); const { nodes, materials } = useGLTF("/banana.gltf"); + const [ hovered, setHover ] = useState(false) const { objPosition, objRotation, handleTranslation, handleRotation } = useObjectStore(); const { addAnnotation } = useAnnotationStore() @@ -45,11 +46,12 @@ const Banana = ({camPosition, ...props}) => { }) const annotateFrame = () => { - console.log(object.current.position, object.current.rotation) + console.log(object.current) let dataAnnotation = { id:1, position: object.current.position, - rotation: object.current.rotation + rotation: object.current.rotation, + scale: object.current.scale } addAnnotation(dataAnnotation) } @@ -72,11 +74,19 @@ const Banana = ({camPosition, ...props}) => { receiveShadow castShadow position={[0, 0, -0.5]} - onClick={annotateFrame}> + onClick={annotateFrame} + onPointerOver={(event) => setHover(true)} + onPointerOut={(event) => setHover(false)} + > + { hovered && + +
Click to annotate
+ + } { object.current && } diff --git a/src/components/Scene2.js b/src/components/Scene2.js deleted file mode 100644 index 2d9685d..0000000 --- a/src/components/Scene2.js +++ /dev/null @@ -1,38 +0,0 @@ -import React, { useRef, Suspense } from "react"; -import { Canvas } from "@react-three/fiber"; -import { useGLTF, OrbitControls, Environment } from "@react-three/drei"; - -const Banana = (props) => { - const group = useRef(); - const { nodes, materials } = useGLTF("/banana.gltf"); - - return ( - - - - ); - } - -const EnvironmentContainer = () => { - return ( - <> - - - - - - - - - - - ) -} - -export default EnvironmentContainer; \ No newline at end of file diff --git a/src/components/Section.js b/src/components/Section.js deleted file mode 100644 index 04112c0..0000000 --- a/src/components/Section.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { Container, Row, Col } from "react-bootstrap"; -import EnvironmentContainer from './EnvironmentContainer'; -import Scene2 from './Scene2'; - -const Section = () => { - return ( - - - -
- -
- - -
- -
- - - - ) -} - -export default Section; diff --git a/src/components/TopSection.js b/src/components/TopSection.js index f4459b1..96d750b 100644 --- a/src/components/TopSection.js +++ b/src/components/TopSection.js @@ -1,8 +1,7 @@ import React, { useState } from 'react'; import { Container, Row, Col, Tab, Nav, FormControl, InputGroup } from "react-bootstrap"; -import EnvironmentContainer from './EnvironmentContainer'; -import video from '../rbgt_banana.mp4' import { useObjectStore } from '../stores/ObjectStore'; +import AnnotationView from './AnnotationView'; const TopSection = () => { @@ -212,21 +211,12 @@ const TopSection = () => {
Press shift to rotate object | Click to translate object
- + - -
-
-
- -
-
- - - -
+ + @@ -234,4 +224,3 @@ const TopSection = () => { } export default TopSection; - diff --git a/src/components/videoPlayer/FormattedTime.js b/src/components/videoPlayer/FormattedTime.js new file mode 100644 index 0000000..a0446a2 --- /dev/null +++ b/src/components/videoPlayer/FormattedTime.js @@ -0,0 +1,31 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const pad = (string, digits) => ('0'.repeat(digits - 1) + string).slice(-digits); + +const format = (seconds) => { + const date = new Date(seconds * 1000); + const hh = date.getUTCHours(); + const mm = pad(date.getUTCMinutes(), 2); + const ss = pad(date.getUTCSeconds(), 2); + const ms = pad(date.getUTCMilliseconds(), 3); + if (hh) { + return `${hh}:${mm}:${ss}:${ms}`; + } + return `${mm}:${ss}:${ms}`; +}; + +const FormattedTime = ({ seconds }) => ( + +); + +FormattedTime.propTypes = { + seconds: PropTypes.number, +}; +FormattedTime.defaultProps = { + seconds: 0, +}; + +export default FormattedTime; \ No newline at end of file diff --git a/src/stores/ObjectStore.js b/src/stores/ObjectStore.js index 351263b..ea7e804 100644 --- a/src/stores/ObjectStore.js +++ b/src/stores/ObjectStore.js @@ -1,10 +1,8 @@ import create from 'zustand'; const useObjectStore = create(set => ({ - bears: 0, objPosition: { x: 0, y: 0.2, z: 0 }, objRotation: { _x: Math.PI/2, _y: 0, _z: 0 }, - increasePopulation : () => set(state => ({ bears: state.bears + 1 })), handleTranslation: (newPosition) => set(state => ({ objPosition: {...newPosition} })), handleRotation: (newRotation) => set(state => ({ objRotation: {_x: newRotation._x, _y: newRotation._y, _z: newRotation._z, } })), })) diff --git a/src/stores/VideoStore.js b/src/stores/VideoStore.js new file mode 100644 index 0000000..d2b2b41 --- /dev/null +++ b/src/stores/VideoStore.js @@ -0,0 +1,30 @@ +import create from 'zustand'; + +const useVideoStore = create(set => ({ + url: '', + duration: 0, + id :'react-player', + played: 0, + playing: false, + controls: false , + muted: true, + loop: false, + seeking: false, + playbackRate: 1.0, + width: '100%', + height: 'auto', + + handleToggleLoop : () => set ( state => ({ loop: !state.loop})), + handleVideoPlayPause : () => set (state => ({ playing : !state.playing })), + handleVideoRewind : () => set (state => ({ playing: false, played: 0})), + handleVideoDuration : (duration) => set (state => ({ duration : duration })), + handleEnded: () => set (state => ({ playing : state.loop})), + handleProgress: (played) => set(state => ({ played: played })), + handleSeekingtoFalse: () => set (state => ({ seeking: false })), + handleSeekMouseDown: (e) => set (state => ({ seeking: true })), + handleSeekChange : (e) => set (state => ({ played : parseFloat(e.target.value) })), + handleVideoSpeedChange : (speed) => set(state => ({ playbackRate: speed })) +})) + + +export { useVideoStore }; \ No newline at end of file