3 files changed, 23 insertions, 7 deletions
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index c4c14c708..398974cb6 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -695,6 +695,17 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
             templates.set(template, checked);
         });
 
+        bounds.x = Math.max(0, bounds.x - this._resizeBorderWidth / 2) + this._resizeBorderWidth / 2;
+        bounds.y = Math.max(0, bounds.y - this._resizeBorderWidth / 2 - this._titleHeight) + this._resizeBorderWidth / 2 + this._titleHeight;
+        const borderRadiusDraggerWidth = 15;
+        bounds.r = Math.min(window.innerWidth, bounds.r + borderRadiusDraggerWidth + this._resizeBorderWidth / 2) - this._resizeBorderWidth / 2 - borderRadiusDraggerWidth;
+        bounds.b = Math.min(window.innerHeight, bounds.b + this._resizeBorderWidth / 2 + this._linkBoxHeight) - this._resizeBorderWidth / 2 - this._linkBoxHeight;
+        if (bounds.x > bounds.r) {
+            bounds.x = bounds.r - this._resizeBorderWidth;
+        }
+        if (bounds.y > bounds.b) {
+            bounds.y = bounds.b - (this._resizeBorderWidth + this._linkBoxHeight + this._titleHeight);
+        }
         return (<div className="documentDecorations">
             <div className="documentDecorations-background" style={{
                 width: (bounds.r - bounds.x + this._resizeBorderWidth) + "px",
diff --git a/src/client/views/MainOverlayTextBox.scss b/src/client/views/MainOverlayTextBox.scss
index f636ca070..c9d44e194 100644
--- a/src/client/views/MainOverlayTextBox.scss
+++ b/src/client/views/MainOverlayTextBox.scss
@@ -1,24 +1,28 @@
 @import "globalCssVariables";
+
 .mainOverlayTextBox-textInput {
     background-color: rgba(248, 6, 6, 0.001);
     width: 400px;
     height: 200px;
-    position:absolute;
+    position: absolute;
     overflow: visible;
     top: 0;
     left: 0;
-    pointer-events: none;   
+    pointer-events: none;
     z-index: $mainTextInput-zindex;
+
     .formattedTextBox-cont {
         background-color: rgba(248, 6, 6, 0.001);
         width: 100%;
         height: 100%;
-        position:absolute;
+        position: absolute;
         top: 0;
         left: 0;
     }
 }
-.mainOverlayTextBox-.unscaled_div{
+
+.mainOverlayTextBox-unscaled_div {
+    // width: 0px;
     z-index: 10000;
     position: absolute;
     pointer-events: none;
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index e86348241..66844cdd6 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -44,12 +44,13 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
         }
     }
 
-    @action public Play() {
+    @action public Play = () => {
         this.Playing = true;
         this.player && this.player.play();
         this._youtubePlayer && this._youtubePlayer.playVideo();
         !this._playTimer && (this._playTimer = setInterval(this.updateTimecode, 500));
         this._youtubeSeekTo = false;
+        this.updateTimecode();
     }
 
     @action public Seek(time: number) {
@@ -59,7 +60,7 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
         }
     }
 
-    @action public Pause() {
+    @action public Pause = () => {
         this.Playing = false;
         this.player && this.player.pause();
         this._youtubePlayer && this._youtubePlayer.pauseVideo();
@@ -176,7 +177,7 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
         let interactive = InkingControl.Instance.selectedTool || !this.props.isSelected() ? "" : "-interactive";
         let style = "videoBox-content" + (this._fullScreen ? "-fullScreen" : "") + interactive;
         return !field ? <div>Loading</div> :
-            <video className={`${style}`} ref={this.setVideoRef} onCanPlay={this.videoLoad} controls={VideoBox._showControls}>
+            <video className={`${style}`} ref={this.setVideoRef} onCanPlay={this.videoLoad} controls={VideoBox._showControls} onPlay={this.Play} onSeeked={this.updateTimecode} onPause={this.Pause}>
                 <source src={field.url.href} type="video/mp4" />
                 Not supported.
             </video>;