diff options
| -rw-r--r-- | src/client/views/nodes/VideoBox.scss | 2 | ||||
| -rw-r--r-- | src/client/views/nodes/VideoBox.tsx | 15 |
2 files changed, 13 insertions, 4 deletions
diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss index c7108d290..f279b9709 100644 --- a/src/client/views/nodes/VideoBox.scss +++ b/src/client/views/nodes/VideoBox.scss @@ -96,8 +96,6 @@ border-radius: 100px; z-index: 2001; min-width: 300px; - - transition: top 0.5s, width 0.5s, opacity 0.2s, visibility 0.2s; height: 50px; padding: 0 10px 0 7px; diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 5fe1ad5ed..76b1ad842 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -31,6 +31,17 @@ import "./VideoBox.scss"; const path = require('path'); +//TODO mj: one option for doing thumbnail previews of video in timeline? +/** + * 1. set vref in videobox + * 2. when vref is set immediately process video to extract ~50 thumbnails + * (^^ would make more sense to do this when video is initially uploaded) + * 3. upload each file to server using convertDataURI and save list of URLs as field on doc + * 4. in CST onHover, set hover time + * 5. use hover time to figure out index of nearest thumbnail + * 6. get URL of image and use source to paint canvas accordingly + */ + /** * VideoBox * Main component: VideoBox.tsx @@ -755,8 +766,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp const yPos = height * this.heightPercent / 100 - 60 + top; const width = Math.max(right - left, 300); const overflow = (width - right + left) / 2; - return this._fullScreen ? null : <div className="videoBox-ui-wrapper" style={{ clip: `rect(${boundsTop}px, 10000px, 10000px, ${boundsLeft}px)` }}> - <div className="videoBox-ui" style={{ left: left - overflow, top: yPos, width: width }}> + return this._fullScreen || (right - left) < 250 ? null : <div className="videoBox-ui-wrapper" style={{ clip: `rect(${boundsTop}px, 10000px, 10000px, ${boundsLeft}px)` }}> + <div className="videoBox-ui" style={{ left: left - overflow, top: yPos, width: width, transition: this._clicking ? "top 0.5s" : "" }}> {this.UIButtons} </div> </div> |