From 872d9a57bdb5bf2b3f3a26acf17d77b72dcb5164 Mon Sep 17 00:00:00 2001 From: Jude Date: Sat, 9 Mar 2019 20:09:11 -0500 Subject: schema view improvements --- src/client/views/collections/CollectionSchemaView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/collections/CollectionSchemaView.tsx') diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 49f95c014..19ed97391 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -24,7 +24,7 @@ import { setupDrag } from "../../util/DragManager"; @observer export class CollectionSchemaView extends CollectionViewBase { private _mainCont = React.createRef(); - private DIVIDER_WIDTH = 5; + private DIVIDER_WIDTH = 4; @observable _contentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ContentScaling prop of the DocumentView @observable _dividerX = 0; -- cgit v1.2.3-70-g09d2 From 81c0a8373fd5cb051531762243e200f11f8c7297 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Sat, 9 Mar 2019 23:00:41 -0500 Subject: editable workspace titles now supported, added 'display' prop to EditableView --- src/client/views/EditableView.tsx | 5 ++-- .../views/collections/CollectionSchemaView.tsx | 6 ++-- .../views/collections/CollectionTreeView.tsx | 5 +++- .../authentication/controllers/WorkspacesMenu.tsx | 32 +++++++++++++++------- 4 files changed, 33 insertions(+), 15 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.tsx') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 84b1b91c3..55a49863d 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -20,6 +20,7 @@ export interface EditableProps { */ contents: any; height: number + display: string; } /** @@ -46,10 +47,10 @@ export class EditableView extends React.Component { render() { if (this.editing) { return this.editing = false)} - style={{ display: "inline" }}> + style={{ display: this.props.display }}> } else { return ( -
this.editing = true)}> {this.props.contents}
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 49f95c014..2868e1322 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -50,7 +50,9 @@ export class CollectionSchemaView extends CollectionViewBase { let onItemDown = setupDrag(reference, () => props.doc); return (
- { let field = props.doc.Get(props.fieldKey); if (field && field instanceof Field) { @@ -59,7 +61,7 @@ export class CollectionSchemaView extends CollectionViewBase { return field || ""; }} SetValue={(value: string) => { - let script = CompileScript(value, undefined, true); + let script = CompileScript(value); if (!script.compiled) { return false; } diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 8b06d9ac4..9c31bdae2 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -69,7 +69,9 @@ class TreeView extends React.Component { return
; } - return
{ let title = this.props.document.GetT(KeyStore.Title, TextField); if (title && title !== "") @@ -159,6 +161,7 @@ export class CollectionTreeView extends CollectionViewBase {
this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }}>

{ return this.props.Document.Title; }} SetValue={(value: string) => { diff --git a/src/server/authentication/controllers/WorkspacesMenu.tsx b/src/server/authentication/controllers/WorkspacesMenu.tsx index 70c37774c..ffef2e11c 100644 --- a/src/server/authentication/controllers/WorkspacesMenu.tsx +++ b/src/server/authentication/controllers/WorkspacesMenu.tsx @@ -7,6 +7,8 @@ import './WorkspacesMenu.css' import { Document } from '../../../fields/Document'; import { Server } from '../../../client/Server'; import { Field } from '../../../fields/Field'; +import { EditableView } from '../../../client/views/EditableView'; +import { KeyStore } from '../../../fields/KeyStore'; export interface WorkspaceMenuProps { active: Document; @@ -67,19 +69,29 @@ export class WorkspacesMenu extends React.Component { }} onClick={this.addNewWorkspace} /> - {this.props.allWorkspaces.map(s => -
  • +
    { + onContextMenu={(e) => { + e.preventDefault(); this.props.open(s); - console.log(this.props.allWorkspaces.length); }} - >{s.Title}
    • + style={{ + marginTop: 10 + }} + > + {i + 1} - + { return s.Title }} + SetValue={(title: string): boolean => { + s.SetText(KeyStore.Title, title); + return true; + }} + contents={s.Title} + height={20} + /> +

    )}
    ); -- cgit v1.2.3-70-g09d2 From 43c96800f0a651247fdcaf2c77c710a30cb3f79d Mon Sep 17 00:00:00 2001 From: Jude Date: Sun, 10 Mar 2019 13:06:04 -0400 Subject: changed default sizing --- src/client/documents/Documents.ts | 8 +++--- src/client/views/Main.tsx | 14 ++++----- src/client/views/_global_variables.scss | 2 +- .../views/collections/CollectionFreeFormView.scss | 2 +- .../views/collections/CollectionSchemaView.scss | 2 ++ .../views/collections/CollectionSchemaView.tsx | 2 +- .../views/collections/CollectionTreeView.scss | 33 ++++++++++++---------- src/client/views/nodes/FormattedTextBox.tsx | 2 +- src/client/views/nodes/ImageBox.scss | 29 +++++++++---------- 9 files changed, 49 insertions(+), 45 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index fc210e9a2..30a292502 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -113,7 +113,7 @@ export namespace Documents { function GetCollectionPrototype(): Document { return collProto ? collProto : collProto = setupPrototypeOptions(collProtoId, "COLLECTION_PROTO", CollectionView.LayoutString("DataKey"), - { panx: 0, pany: 0, scale: 1, layoutKeys: [KeyStore.Data] }); + { panx: 0, pany: 0, scale: 1, width: 500, height: 500, layoutKeys: [KeyStore.Data] }); } function GetKVPPrototype(): Document { @@ -125,9 +125,9 @@ export namespace Documents { export function ImageDocument(url: string, options: DocumentOptions = {}) { let doc = SetInstanceOptions(GetImagePrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] }, new URL(url), ImageField); - doc.SetText(KeyStore.Caption, "my caption..."); - doc.SetText(KeyStore.BackgroundLayout, EmbeddedCaption()); - doc.SetText(KeyStore.OverlayLayout, FixedCaption()); + // doc.SetText(KeyStore.Caption, "my caption..."); + // doc.SetText(KeyStore.BackgroundLayout, EmbeddedCaption()); + // doc.SetText(KeyStore.OverlayLayout, FixedCaption()); return doc; } export function TextDocument(options: DocumentOptions = {}) { diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 1caaa1cba..79c5cb5aa 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -76,12 +76,12 @@ Documents.initProtos(mainDocId, (res?: Document) => { let pdfurl = "http://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf" let weburl = "https://cs.brown.edu/courses/cs166/"; let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {})) - let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" })) - let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a freeform collection" })); - let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 200, height: 200, title: "a schema collection" })); - let addPDFNode = action(() => Documents.PdfDocument(pdfurl, { width: 200, height: 200, title: "a schema collection" })); + let addTextNode = action(() => Documents.TextDocument({ width: 230, height: 130, title: "a text note" })) + let addColNode = action(() => Documents.FreeformDocument([], { width: 300, height: 300, title: "a freeform collection" })); + let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 450, height: 200, title: "a schema collection" })); + let addPDFNode = action(() => Documents.PdfDocument(pdfurl, { width: 300, height: 400, title: "a pdf" })); let addImageNode = action(() => Documents.ImageDocument(imgurl, { width: 200, height: 200, title: "an image of a cat" })); - let addWebNode = action(() => Documents.WebDocument(weburl, { width: 200, height: 200, title: "a sample web page" })); + let addWebNode = action(() => Documents.WebDocument(weburl, { width: 300, height: 400, title: "a sample web page" })); let addClick = (creator: () => Document) => action(() => @@ -100,7 +100,7 @@ Documents.initProtos(mainDocId, (res?: Document) => { ReactDOM.render((
    -
    — DASH —
    + {/*
    — DASH —
    */} Transform.Identity} @@ -153,7 +153,7 @@ Documents.initProtos(mainDocId, (res?: Document) => {
    - + {/* */}
    ), document.getElementById('root')); }) diff --git a/src/client/views/_global_variables.scss b/src/client/views/_global_variables.scss index 333fb3122..1c06ab44a 100644 --- a/src/client/views/_global_variables.scss +++ b/src/client/views/_global_variables.scss @@ -1,4 +1,4 @@ -@import url("https://fonts.googleapis.com/css?family=Roboto+Slab:300,700|Crimson+Text:400,400i,700"); +@import url("https://fonts.googleapis.com/css?family=Roboto+Slab:,700|Crimson+Text:400,400i,700"); // colors $light-color: #fcfbf7; diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss index 90caa0d14..7250c9241 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -41,7 +41,7 @@ background: $light-color-secondary; } - border: 0px solid $intermediate-color; + border: 0px solid transparent; border-radius: $border-radius; box-sizing: border-box; position: absolute; diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index cb0040657..b66fc7981 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -7,6 +7,8 @@ position: absolute; width: 100%; height: 100%; + overflow: hidden; + .collectionSchemaView-previewRegion { position: relative; background: $light-color; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 19ed97391..deb307fb3 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -31,7 +31,7 @@ export class CollectionSchemaView extends CollectionViewBase { @observable _panelWidth = 0; @observable _panelHeight = 0; @observable _selectedIndex = 0; - @observable _splitPercentage: number = 50; + @observable _splitPercentage: number = 100; renderCell = (rowProps: CellInfo) => { let props: FieldViewProps = { diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index f8d580a7b..4b28ded45 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -1,37 +1,40 @@ +@import "../global_variables"; + #body { - padding: 20px; - background: #bbbbbb; + padding: 20px; + background: $light-color-secondary; } ul { - list-style: none; + list-style: none; } li { - margin: 5px 0; + margin: 5px 0; } .no-indent { - padding-left: 0; + padding-left: 0; } .bullet { - width: 1.5em; - display: inline-block; + width: 1.5em; + display: inline-block; } .collectionTreeView-dropTarget { - border-style: solid; - box-sizing: border-box; - height: 100%; + border: 0px solid $intermediate-color; + border-radius: $border-radius; + box-sizing: border-box; + height: 100%; } .docContainer { - display: inline-table; + display: inline-table; } .delete-button { - color: #999999; - float: right; - margin-left: 1em; -} \ No newline at end of file + color: $intermediate-color; + float: right; + margin-left: 1em; +} diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index a6cee9957..a375cfc48 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -31,7 +31,7 @@ import { ContextMenu } from "../../views/ContextMenu"; // and 'doc' property to the document that is being rendered // // When rendered() by React, this extracts the TextController from the Document stored at the -// specified Key and assigns it to an HTML input node. When changes are made tot his node, +// specified Key and assigns it to an HTML input node. When changes are made to this node, // this will edit the document and assign the new value to that field. //] export class FormattedTextBox extends React.Component { diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss index ea459b911..2cb460eea 100644 --- a/src/client/views/nodes/ImageBox.scss +++ b/src/client/views/nodes/ImageBox.scss @@ -1,22 +1,21 @@ - .imageBox-cont { - padding: 0vw; - position: relative; - text-align: center; - width: 100%; - height: auto; - max-width: 100%; - max-height: 100% + padding: 0vw; + position: relative; + text-align: center; + width: 100%; + height: auto; + max-width: 100%; + max-height: 100%; } .imageBox-cont img { - object-fit: contain; - height: 100%; + object-fit: contain; + height: 100%; } .imageBox-button { - padding : 0vw; - border: none; - width : 100%; - height: 100%; -} \ No newline at end of file + padding: 0vw; + border: none; + width: 100%; + height: 100%; +} -- cgit v1.2.3-70-g09d2 From 3874dd9ea6efb96f01c32827d2d2fc103d66d57b Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 11 Mar 2019 12:29:13 -0400 Subject: minor fix to divider dragger --- src/client/views/collections/CollectionSchemaView.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/client/views/collections/CollectionSchemaView.tsx') diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 49f95c014..04f017378 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -203,6 +203,8 @@ export class CollectionSchemaView extends CollectionViewBase { ) let previewHandle = !this.props.active() ? (null) : (
    ); + let dividerDragger = this._splitPercentage == 100 ? (null) : +
    return (
    this.onDrop(e, {})} ref={this.createDropTarget}> @@ -232,7 +234,7 @@ export class CollectionSchemaView extends CollectionViewBase {
    } -
    + {dividerDragger}
    {content}
    -- cgit v1.2.3-70-g09d2 From 44d669b46616e561aef874471d2740a4f205d9f0 Mon Sep 17 00:00:00 2001 From: Fawn Date: Mon, 11 Mar 2019 21:25:13 -0400 Subject: column adding works, but render doesn't get called on add --- .../views/collections/CollectionSchemaView.scss | 91 +++++++++++++++------- .../views/collections/CollectionSchemaView.tsx | 42 +++++++++- src/fields/Document.ts | 5 ++ 3 files changed, 108 insertions(+), 30 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.tsx') diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index d40e6d314..38da3505e 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -1,5 +1,3 @@ - - .collectionSchemaView-container { border-style: solid; box-sizing: border-box; @@ -7,36 +5,74 @@ width: 100%; height: 100%; .collectionSchemaView-previewRegion { - position: relative; - background: black; - float: left; + position: relative; + background: black; + float: left; height: 100%; } .collectionSchemaView-previewHandle { position: absolute; height: 37px; - width: 20px; - z-index: 20; - right: 0; - top: 0; - background: Black ; - } - .collectionSchemaView-dividerDragger{ - position: relative; - background: black; - float: left; + width: 20px; + z-index: 20; + right: 0; + top: 0; + background: Black; + } + .collectionSchemaView-dividerDragger { + position: relative; + background: black; + float: left; height: 100%; } .collectionSchemaView-tableContainer { position: relative; float: left; - height: 100%; + height: 100%; } - - .ReactTable { + .collectionSchemaView-addColumn { position: absolute; - // display: inline-block; - // overflow: auto; + z-index: 20px; + right: 10px; + bottom: 10px; + input { + display: none; + } + label { + background: red; + display: inline-block; + border-radius: 18px; + font-size: 25px; + width: 36px; + height: 36px; + margin-right: 10px; + text-align: center; + cursor: pointer; + } + input:not(:checked)~.addColumn-options { + display: none; + } + .addColumn-options { + position: absolute; + right: 70px; + bottom: 0; + width: 150px; + background-color: white; + ul { + padding: 0; + margin: 0; + } + li { + padding: 6px; + border: 1px solid gray; + width: 100%; + margin: 0; + } + } + } + .ReactTable { + position: absolute; // display: inline-block; + // overflow: auto; width: 100%; height: 100%; background: white; @@ -45,10 +81,8 @@ overflow-y: auto; overflow-x: auto; height: 100%; - display: -webkit-inline-box; - direction: ltr; - // direction:rtl; + direction: ltr; // direction:rtl; // display:block; } .rt-tbody { @@ -63,8 +97,8 @@ border-width: 1; border-right-color: #aaa; .imageBox-cont { - position:relative; - max-height:100%; + position: relative; + max-height: 100%; } .imageBox-cont img { object-fit: contain; @@ -78,9 +112,10 @@ } } .ReactTable .rt-thead.-header { - background:grey; - } - .ReactTable .rt-th, .ReactTable .rt-td { + background: grey; + } + .ReactTable .rt-th, + .ReactTable .rt-td { max-height: 44; padding: 3px 7px; } diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 04f017378..e1036e9b0 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -1,5 +1,5 @@ import React = require("react") -import { action, observable } from "mobx"; +import { action, observable, ObservableMap, runInAction } from "mobx"; import { observer } from "mobx-react"; import Measure from "react-measure"; import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table"; @@ -17,6 +17,8 @@ import "./CollectionSchemaView.scss"; import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; import { setupDrag } from "../../util/DragManager"; +import { Key } from "./../../../fields/Key"; + // bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657 @@ -26,6 +28,7 @@ export class CollectionSchemaView extends CollectionViewBase { private _mainCont = React.createRef(); private DIVIDER_WIDTH = 5; + @observable _columns: Array = [KeyStore.Title, KeyStore.Data, KeyStore.Author]; @observable _contentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ContentScaling prop of the DocumentView @observable _dividerX = 0; @observable _panelWidth = 0; @@ -102,6 +105,29 @@ export class CollectionSchemaView extends CollectionViewBase { }; } + @action + addColumn = (k: Key): void => { + this._columns.push(k); + console.log("adding", this._columns.length); + } + + findAllDocumentKeys = (docs: Array): Set => { + let keys = new Set(); + docs.forEach(doc => { + let fields: ObservableMap = doc.Fields; + Array.from(fields).map(item => { + let v: { key: Key, field: Field } = item[1]; + let k = v.key; + keys.add(k); + }) + }) + keys.delete(KeyStore.Title); + keys.delete(KeyStore.Data); + keys.delete(KeyStore.Author); + console.log("key set", keys); + return keys; + } + _startSplitPercent = 0; @action onDividerMove = (e: PointerEvent): void => { @@ -179,7 +205,7 @@ export class CollectionSchemaView extends CollectionViewBase { focusDocument = (doc: Document) => { } render() { - const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author]) + const columns = this.props.Document.GetList(KeyStore.ColumnsKey, this._columns) const children = this.props.Document.GetList(this.props.fieldKey, []); const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined; let content = this._selectedIndex == -1 || !selected ? (null) : ( @@ -205,6 +231,7 @@ export class CollectionSchemaView extends CollectionViewBase {
    ); let dividerDragger = this._splitPercentage == 100 ? (null) :
    + return (
    this.onDrop(e, {})} ref={this.createDropTarget}> @@ -231,6 +258,16 @@ export class CollectionSchemaView extends CollectionViewBase { }} getTrProps={this.getTrProps} /> +
    + + + +
    +
      {Array.from(this.findAllDocumentKeys(children)).map(item => { + return
    • this.addColumn(item)}>{item.Name}
      • + })}
    +
    +
    } @@ -239,6 +276,7 @@ export class CollectionSchemaView extends CollectionViewBase { {content}
    {previewHandle} +
    ) diff --git a/src/fields/Document.ts b/src/fields/Document.ts index 25e239417..6cf9c194e 100644 --- a/src/fields/Document.ts +++ b/src/fields/Document.ts @@ -38,6 +38,11 @@ export class Document extends Field { return this.GetText(KeyStore.Title, ""); } + @computed + public get Fields() { + return this.fields; + } + /** * Get the field in the document associated with the given key. If the * associated field has not yet been filled in from the server, a request -- cgit v1.2.3-70-g09d2 From c17605b4d1fe04429b029ff5a161f31ce19f5fd4 Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 15 Mar 2019 10:48:23 -0400 Subject: think video resizing is fixed now. --- src/client/views/collections/CollectionSchemaView.tsx | 2 +- src/client/views/nodes/VideoBox.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.tsx') diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 37620cd7c..14e1df8ca 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -49,7 +49,7 @@ export class CollectionSchemaView extends CollectionViewBase { let reference = React.createRef(); let onItemDown = setupDrag(reference, () => props.doc); return ( -
    +
    { let field = props.doc.Get(props.fieldKey); diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 053d9dd56..fef278cec 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -30,7 +30,7 @@ export class VideoBox extends React.Component { var nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 0); var nativeHeight = this.props.doc.GetNumber(KeyStore.NativeHeight, 0); var newNativeHeight = nativeWidth * r.entry.height / r.entry.width; - if (newNativeHeight != nativeHeight && !isNaN(newNativeHeight)) { + if (!nativeHeight && newNativeHeight != nativeHeight && !isNaN(newNativeHeight)) { this.props.doc.SetNumber(KeyStore.Height, newNativeHeight / nativeWidth * this.props.doc.GetNumber(KeyStore.Width, 0)); this.props.doc.SetNumber(KeyStore.NativeHeight, newNativeHeight); } @@ -48,7 +48,7 @@ export class VideoBox extends React.Component { //setTimeout(action(() => this._loaded = true), 500); return ( -
    +
    {({ measureRef }) =>