fixed zoom behavior of pdf / video buttons.

7 files changed, 87 insertions, 40 deletions

diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 08f3a338b..98fb23fa4 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -335,7 +335,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
                     ref={this._canvasRef}>
                     {this.backgroundView}
                     <InkingCanvas getScreenTransform={this.getTransform} Document={this.props.Document} />
-                    <PreviewCursor container={this} addLiveTextDocuemnt={this.addLiveTextBox} getTransform={this.getTransform} />
+                    <PreviewCursor container={this} addLiveTextDocument={this.addLiveTextBox} getTransform={this.getTransform} />
                     {this.views}
                 </div>
                 <MarqueeView container={this} activeDocuemnts={this.getActiveDocuments} selectDocuments={this.selectDocuments} addDocument={this.props.addDocument} removeDocument={this.props.removeDocument} getMarqueeTransform={this.getMarqueeTransform} getTransform={this.getTransform} />
diff --git a/src/client/views/collections/CollectionPDFView.scss b/src/client/views/collections/CollectionPDFView.scss
new file mode 100644
index 000000000..28878c6fa
--- /dev/null
+++ b/src/client/views/collections/CollectionPDFView.scss
@@ -0,0 +1,28 @@
+.collectionPdfView-buttonTray {
+    width: 100%;
+    height: 100%;
+    top : 25px;
+    left : 20px;
+    position: relative; 
+    transform-origin: left top;
+    position: absolute;
+}
+.collectionPdfView-cont{
+    width: 100%;
+    height: 100%;
+    position: absolute; 
+}
+.collectionPdfView-backward {
+    color : white;
+    top :0px;
+    left : 0px;
+    position: absolute;
+    background-color: rgba(50, 50, 50, 0.2);
+}
+.collectionPdfView-forward {
+    color : white;
+    top :0px;
+    left : 25px;
+    position: absolute;
+    background-color: rgba(50, 50, 50, 0.2);
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx
index be3a281f2..124d82c8b 100644
--- a/src/client/views/collections/CollectionPDFView.tsx
+++ b/src/client/views/collections/CollectionPDFView.tsx
@@ -5,6 +5,7 @@ import { KeyStore } from "../../../fields/KeyStore";
 import { ContextMenu } from "../ContextMenu";
 import { CollectionView, CollectionViewType } from "./CollectionView";
 import { CollectionViewProps } from "./CollectionViewBase";
+import "./CollectionPDFView.scss"
 import React = require("react");
 import { FieldId } from "../../../fields/Field";
 
@@ -24,10 +25,11 @@ export class CollectionPDFView extends React.Component<CollectionViewProps> {
     @action onPageForward = () => this.curPage < this.numPages ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage + 1) : -1;
 
     private get uIButtons() {
+        let scaling = Math.min(1.8, this.props.ScreenToLocalTransform().transformDirection(1, 1)[0]);
         return (
-            <div className="pdfBox-buttonTray" key="tray">
-                <button className="pdfButton" onClick={this.onPageBack}>{"<"}</button>
-                <button className="pdfButton" onClick={this.onPageForward}>{">"}</button>
+            <div className="collectionPdfView-buttonTray" key="tray" style={{ transform: `scale(${scaling}, ${scaling})` }}>
+                <button className="collectionPdfView-backward" onClick={this.onPageBack}>{"<"}</button>
+                <button className="collectionPdfView-forward" onClick={this.onPageForward}>{">"}</button>
             </div>);
     }
 
@@ -49,7 +51,7 @@ export class CollectionPDFView extends React.Component<CollectionViewProps> {
     get subView(): any { return CollectionView.SubView(this); }
 
     render() {
-        return (<div className="collectionView-cont" onContextMenu={this.specificContextMenu}>
+        return (<div className="collectionPdfView-cont" onContextMenu={this.specificContextMenu}>
             {this.subView}
             {this.props.isSelected() ? this.uIButtons : (null)}
         </div>)
diff --git a/src/client/views/collections/CollectionVideoView.scss b/src/client/views/collections/CollectionVideoView.scss
index 6c2f5a62a..ec3c0327d 100644
--- a/src/client/views/collections/CollectionVideoView.scss
+++ b/src/client/views/collections/CollectionVideoView.scss
@@ -1,4 +1,9 @@
-.collectionVideoView-controls{
+.collectionVideoView-buttonTray{
+    width: 100%;
+    height: 100%;
+    position: absolute; 
+}
+.collectionVideoView-cont{
     width: 100%;
     height: 100%;
     position: absolute;
@@ -9,6 +14,7 @@
     left : 25px;
     position: absolute;
     background-color: rgba(50, 50, 50, 0.2);
+    transform-origin: left top;
 }
 .collectionVideoView-play {
     width: 25px;
@@ -20,6 +26,7 @@
     background-color: rgba(50, 50, 50, 0.2);
     border-radius: 4px;
     text-align: center;
+    transform-origin: left bottom;
 }
 .collectionVideoView-full {
     width: 25px;
@@ -31,5 +38,6 @@
     background-color: rgba(50, 50, 50, 0.2);
     border-radius: 4px;
     text-align: center;
+    transform-origin: right bottom;
 
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx
index 9856a1284..9b01c23c9 100644
--- a/src/client/views/collections/CollectionVideoView.tsx
+++ b/src/client/views/collections/CollectionVideoView.tsx
@@ -7,7 +7,6 @@ import { CollectionView, CollectionViewType } from "./CollectionView";
 import { CollectionViewProps } from "./CollectionViewBase";
 import React = require("react");
 import { FieldId } from "../../../fields/Field";
-import { ReplaceAroundStep } from "prosemirror-transform";
 import "./CollectionVideoView.scss"
 
 
@@ -21,6 +20,25 @@ export class CollectionVideoView extends React.Component<CollectionViewProps> {
     }
 
     private _mainCont = React.createRef<HTMLDivElement>();
+
+    private get uIButtons() {
+        let scaling = Math.min(1.8, this.props.ScreenToLocalTransform().transformDirection(1, 1)[0]);
+        return (
+            <div className="collectionVideoView-buttonTray" key="tray">
+                <div className="collectionVideoView-time" onPointerDown={this.onResetDown} style={{ transform: `scale(${scaling}, ${scaling})` }}>
+                    <span>{"" + Math.round(this.ctime)}</span>
+                    <span style={{ fontSize: 8 }}>{" " + Math.round((this.ctime - Math.trunc(this.ctime)) * 100)}</span>
+                </div>
+                <div className="collectionVideoView-play" onPointerDown={this.onPlayDown} style={{ transform: `scale(${scaling}, ${scaling})` }}>
+                    {this.playing ? "\"" : ">"}
+                </div>
+                <div className="collectionVideoView-full" onPointerDown={this.onFullDown} style={{ transform: `scale(${scaling}, ${scaling})` }}>
+                    F
+                </div>
+            </div>);
+    }
+
+
     // "inherited" CollectionView API starts here...
 
     @observable
@@ -40,20 +58,20 @@ export class CollectionVideoView extends React.Component<CollectionViewProps> {
     get subView(): any { return CollectionView.SubView(this); }
 
     componentDidMount() {
-        this.repete();
+        this.updateTimecode();
     }
 
-    player = (): HTMLVideoElement => {
-        return this._mainCont.current!.getElementsByTagName("video")[0];
+    get player(): HTMLVideoElement | undefined {
+        return this._mainCont.current ? this._mainCont.current.getElementsByTagName("video")[0] : undefined;
     }
 
     @action
-    repete = () => {
-        if (this.player()) {
-            this.ctime = this.player().currentTime;
+    updateTimecode = () => {
+        if (this.player) {
+            this.ctime = this.player.currentTime;
             this.props.Document.SetNumber(KeyStore.CurPage, Math.round(this.ctime));
         }
-        setTimeout(() => this.repete(), 100)
+        setTimeout(() => this.updateTimecode(), 100)
     }
 
 
@@ -64,20 +82,20 @@ export class CollectionVideoView extends React.Component<CollectionViewProps> {
 
     @action
     onPlayDown = () => {
-        if (this.player()) {
-            if (this.player().paused) {
-                this.player().play();
+        if (this.player) {
+            if (this.player.paused) {
+                this.player.play();
                 this.playing = true;
             } else {
-                this.player().pause();
+                this.player.pause();
                 this.playing = false;
             }
         }
     }
     @action
     onFullDown = (e: React.PointerEvent) => {
-        if (this.player()) {
-            this.player().requestFullscreen();
+        if (this.player) {
+            this.player.requestFullscreen();
             e.stopPropagation();
             e.preventDefault();
         }
@@ -85,28 +103,17 @@ export class CollectionVideoView extends React.Component<CollectionViewProps> {
 
     @action
     onResetDown = () => {
-        if (this.player()) {
-            this.player().pause();
-            this.player().currentTime = 0;
+        if (this.player) {
+            this.player.pause();
+            this.player.currentTime = 0;
         }
 
     }
 
     render() {
         return (<div className="collectionVideoView-cont" ref={this._mainCont} onContextMenu={this.specificContextMenu}>
-            <div className="collectionVideoView-controls" >
-                {this.subView}
-                <div className="collectionVideoView-time" onPointerDown={this.onResetDown}>
-                    <span>{"" + Math.round(this.ctime)}</span>
-                    <span style={{ fontSize: 8 }}>{" " + Math.round((this.ctime - Math.trunc(this.ctime)) * 100)}</span>
-                </div>
-                <div className="collectionVideoView-play" onPointerDown={this.onPlayDown}>
-                    {this.playing ? "\"" : ">"}
-                </div>
-                <div className="collectionVideoView-full" onPointerDown={this.onFullDown}>
-                    F
-                </div>
-            </div>
+            {this.subView}
+            {this.uIButtons}
         </div>)
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/PreviewCursor.tsx b/src/client/views/collections/PreviewCursor.tsx
index ab68fbc46..a1411250a 100644
--- a/src/client/views/collections/PreviewCursor.tsx
+++ b/src/client/views/collections/PreviewCursor.tsx
@@ -16,7 +16,7 @@ import { CollectionFreeFormView } from "./CollectionFreeFormView";
 export interface PreviewCursorProps {
     getTransform: () => Transform;
     container: CollectionFreeFormView;
-    addLiveTextDocuemnt: (doc: Document) => void;
+    addLiveTextDocument: (doc: Document) => void;
 }
 
 @observer
@@ -57,11 +57,13 @@ export class PreviewCursor extends React.Component<PreviewCursorProps>  {
     @action
     onKeyPress = (e: KeyboardEvent) => {
         //if not these keys, make a textbox if preview cursor is active!
-        if (!e.ctrlKey && !e.altKey) {
+        if (!e.ctrlKey && !e.altKey && !e.defaultPrevented) {
             //make textbox and add it to this collection
             let [x, y] = this.props.getTransform().transformPoint(this._lastX, this._lastY);
             let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "new" });
-            this.props.addLiveTextDocuemnt(newBox);
+            this.props.addLiveTextDocument(newBox);
+            e.stopPropagation();
+            e.preventDefault();
         }
     }
 
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index 9f92410d4..ad947afd5 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -11,5 +11,5 @@
 }
 .pdfBox-contentContainer {
     position: absolute;
-    transform-origin: "left top";
+    transform-origin: left top;
 }
\ No newline at end of file