fixed caption scrolling in carousel view. fixed display of audio tags in textboxes. fixed screengrab video upload and made dictation view possible (but needs reworking)

9 files changed, 30 insertions, 54 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index bb12ce568..e28e29267 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -643,7 +643,7 @@ export namespace Docs {
                 DocumentType.SCREENSHOT,
                 {
                     layout: { view: ScreenshotBox, dataField: defaultDataKey },
-                    options: {},
+                    options: { nativeDimModifiable: true, nativeHeightUnfrozen: true },
                 },
             ],
             [
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index 0e4556eb4..02f925bea 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, Opt } from '../../../fields/Doc';
 import { NumCast, ScriptCast, StrCast } from '../../../fields/Types';
-import { emptyFunction, returnFalse, returnZero } from '../../../Utils';
+import { emptyFunction, returnFalse, returnZero, StopEvent } from '../../../Utils';
 import { DragManager } from '../../util/DragManager';
 import { DocumentView, DocumentViewProps } from '../nodes/DocumentView';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
@@ -73,6 +73,7 @@ export class CollectionCarouselView extends CollectionSubView() {
                 <div
                     className="collectionCarouselView-caption"
                     key="caption"
+                    onWheel={StopEvent}
                     style={{
                         display: showCaptions ? undefined : 'none',
                         borderRadius: this.props.styleProvider?.(this.layoutDoc, captionProps, StyleProp.BorderRounding),
@@ -80,7 +81,7 @@ export class CollectionCarouselView extends CollectionSubView() {
                         marginLeft: marginX,
                         width: `calc(100% - ${marginX * 2}px)`,
                     }}>
-                    <FormattedTextBox key={index} {...captionProps} fieldKey={showCaptions} styleProvider={this.captionStyleProvider} Document={curDoc.layout} DataDoc={undefined} />
+                    <FormattedTextBox key={index} {...captionProps} allowScroll={true} fieldKey={showCaptions} styleProvider={this.captionStyleProvider} Document={curDoc.layout} DataDoc={undefined} />
                 </div>
             </>
         );
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index f81c17a7b..f774781ab 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -229,7 +229,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
         return (
             <FormattedTextBox
                 {...this.props}
-                fieldKey={'text'}
+                fieldKey="text"
                 renderDepth={this.props.renderDepth + 1}
                 isContentActive={this.isContentActive}
                 isDocumentActive={this.isContentActive}
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 12daa1252..9f659752a 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -268,7 +268,7 @@ export class SchemaRTFCell extends React.Component<SchemaTableCellProps> {
         fieldProps.isContentActive = this.selectedFunc;
         return (
             <div className="schemaRTFCell" style={{ display: 'flex', fontStyle: this.selected ? undefined : 'italic', width: '100%', height: '100%', position: 'relative', color, textDecoration, cursor, pointerEvents }}>
-                {this.selected ? <FormattedTextBox {...fieldProps} /> : (field => (field ? Field.toString(field) : ''))(FieldValue(fieldProps.Document[fieldProps.fieldKey]))}
+                {this.selected ? <FormattedTextBox allowScroll={true} {...fieldProps} /> : (field => (field ? Field.toString(field) : ''))(FieldValue(fieldProps.Document[fieldProps.fieldKey]))}
             </div>
         );
     }
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 86779e0dd..7eae4e938 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -55,45 +55,13 @@ export class FieldView extends React.Component<FieldViewProps> {
     }
     render() {
         const field = this.field;
-        if (field === undefined) {
-            return <p>{'<null>'}</p>;
-        }
-        // if (typeof field === "string") {
-        //     return <p>{field}</p>;
-        // }
-        // else if (field instanceof RichTextField) {
-        //     return <FormattedTextBox {...this.props} />;
-        // }
-        // else if (field instanceof ImageField) {
-        //     return <ImageBox {...this.props} />;
-        // }
-        // else if (field instaceof PresBox) {
-        //    return <PresBox {...this.props} />;
-        // }
-        // else if (field instanceof VideoField) {
-        //     return <VideoBox {...this.props} />;
-        // }
-        // else if (field instanceof AudioField) {
-        //     return <AudioBox {...this.props} />;
-        //}
-        else if (field instanceof DateField) {
-            return <p>{field.date.toLocaleString()}</p>;
-        } else if (field instanceof Doc) {
-            return (
-                <p>
-                    <b>{field.title?.toString()}</b>
-                </p>
-            );
-        } else if (field instanceof List) {
-            return <div> {field.length ? field.map(f => Field.toString(f)).join(', ') : ''} </div>;
-        }
-        // bcz: this belongs here, but it doesn't render well so taking it out for now
-        else if (field instanceof WebField) {
-            return <p>{Field.toString(field.url.href)}</p>;
-        } else if (!(field instanceof Promise)) {
-            return <p>{Field.toString(field)}</p>;
-        } else {
-            return <p> {'Waiting for server...'} </p>;
-        }
+        // prettier-ignore
+        if (field instanceof Doc)  return <p> <b>{field.title?.toString()}</b></p>;
+        if (field === undefined) return <p>{'<null>'}</p>;
+        if (field instanceof DateField) return <p>{field.date.toLocaleString()}</p>;
+        if (field instanceof List) return <div> {field.map(f => Field.toString(f)).join(', ')} </div>;
+        if (field instanceof WebField) return <p>{Field.toString(field.url.href)}</p>;
+        if (!(field instanceof Promise)) return <p>{Field.toString(field)}</p>;
+        return <p> {'Waiting for server...'} </p>;
     }
 }
diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx
index aa2b22e28..75e61bbeb 100644
--- a/src/client/views/nodes/ScreenshotBox.tsx
+++ b/src/client/views/nodes/ScreenshotBox.tsx
@@ -311,7 +311,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
                             </>
                         </CollectionFreeFormView>
                     </div>
-                    <div style={{ position: 'relative', height: this.formattedPanelHeight() }}>
+                    <div style={{ background: 'white', position: 'relative', height: this.formattedPanelHeight() }}>
                         {!(this.dataDoc[this.fieldKey + '-dictation'] instanceof Doc) ? null : (
                             <FormattedTextBox
                                 {...this.props}
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index b5a3c5d84..109b62e6f 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -41,7 +41,7 @@ audiotag:hover {
     flex-direction: row;
     transition: opacity 1s;
     width: 100%;
-    position: absolute;
+    position: relative;
     top: 0;
     left: 0;
 }
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 68160ac9b..88adba1e7 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -74,8 +74,11 @@ const translateGoogleApi = require('translate-google-api');
 export const GoogleRef = 'googleDocId';
 type PullHandler = (exportState: Opt<GoogleApiClientUtils.Docs.ImportResult>, dataDoc: Doc) => void;
 
+export interface FormattedTextBoxProps {
+    allowScroll?: boolean;
+}
 @observer
-export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
+export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps & FormattedTextBoxProps>() {
     public static LayoutString(fieldStr: string) {
         return FieldView.LayoutString(FormattedTextBox, fieldStr);
     }
@@ -612,7 +615,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         if (Array.from(highlights).join('') === FormattedTextBox._globalHighlightsCache) return;
         setTimeout(() => (FormattedTextBox._globalHighlightsCache = Array.from(highlights).join('')));
         clearStyleSheetRules(FormattedTextBox._userStyleSheet);
-        if (highlights.includes('Audio Tags')) {
+        if (!highlights.includes('Audio Tags')) {
             addStyleSheetRule(FormattedTextBox._userStyleSheet, 'audiotag', { display: 'none' }, '');
         }
         if (highlights.includes('Text from Others')) {
@@ -1811,9 +1814,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         const margins = 2 * NumCast(this.layoutDoc._yMargin, this.props.yPadding || 0);
         const children = this.ProseRef?.children.length ? Array.from(this.ProseRef.children[0].children) : undefined;
         if (children) {
-            const proseHeight = !this.ProseRef
-                ? 0
-                : children.reduce((p, child) => p + Number(getComputedStyle(child).height.replace('px', '')) + Number(getComputedStyle(child).marginTop.replace('px', '')) + Number(getComputedStyle(child).marginBottom.replace('px', '')), margins);
+            const toNum = (val: string) => Number(val.replace('px', '').replace('auto', '0'));
+            const toHgt = (node: Element) => {
+                const { height, marginTop, marginBottom } = getComputedStyle(node);
+                return toNum(height) + Math.max(0, toNum(marginTop)) + Math.max(0, toNum(marginBottom));
+            };
+            const proseHeight = !this.ProseRef ? 0 : children.reduce((p, child) => p + toHgt(child), margins);
             const scrollHeight = this.ProseRef && Math.min(NumCast(this.layoutDoc.docMaxAutoHeight, proseHeight), proseHeight);
             if (this.props.setHeight && scrollHeight && !this.props.dontRegisterView) {
                 // if top === 0, then the text box is growing upward (as the overlay caption) which doesn't contribute to the height computation
@@ -2003,7 +2009,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                     r?.addEventListener(
                         'wheel', // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this)
                         (e: WheelEvent) => {
-                            if (this.props.isContentActive()) {
+                            if (this.props.isContentActive() && !this.props.allowScroll) {
                                 if (!NumCast(this.layoutDoc._scrollTop) && e.deltaY <= 0) e.preventDefault();
                                 e.stopPropagation();
                             }
diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts
index 070d49ec3..11523a9d8 100644
--- a/src/server/DashUploadUtils.ts
+++ b/src/server/DashUploadUtils.ts
@@ -205,6 +205,7 @@ export namespace DashUploadUtils {
                             .videoCodec('copy') // this will copy the data instead of reencode it
                             .save(file.path.replace('.mkv', '.mp4'))
                             .on('end', res)
+                            .on('error', (e: any) => console.log(e))
                     );
                     file.path = file.path.replace('.mkv', '.mp4');
                     format = '.mp4';
@@ -234,7 +235,7 @@ export namespace DashUploadUtils {
                         return { source: file, result: { name: 'Unsupported video format', message: `Could not upload unsupported file (${name}). Please convert to an .mp4` } };
                     }
                 }
-                if (videoFormats.includes(format)) {
+                if (videoFormats.includes(format) || format.includes('.webm')) {
                     return MoveParsedFile(file, Directory.videos);
                 }
                 fs.unlink(path, () => {});