1 files changed, 27 insertions, 16 deletions

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index ce7cfa5f4..3cf40c087 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -53,7 +53,7 @@ import { OpenWhere, OpenWhereMod } from './OpenWhere';
 import { FormattedTextBox } from './formattedText/FormattedTextBox';
 import { PresEffect, PresEffectDirection } from './trails/PresEnums';
 import SpringAnimation from './trails/SlideEffect';
-import { SpringType, springMappings } from './trails/SpringUtils';
+import { SpringSettings, SpringType, springMappings } from './trails/SpringUtils';
 
 interface Window {
     MediaRecorder: MediaRecorder;
@@ -969,8 +969,8 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
      * @returns a function that will wrap a JSX animation element wrapping any JSX element
      */
     public static AnimationEffect(renderDoc: JSX.Element, presEffectDoc: Opt<Doc>, root: Doc) {
-        const dir = ((presEffectDoc?.presentation_effectDirection ?? presEffectDoc?.followLinkAnimDirection) || PresEffectDirection.Center) as PresEffectDirection;
-        const duration = Cast(presEffectDoc?.presentation_transition, 'number', Cast(presEffectDoc?.followLinkTransitionTime, 'number', null));
+        let dir = (presEffectDoc?.presentation_effectDirection ?? presEffectDoc?.followLinkAnimDirection) as PresEffectDirection;
+        const transitionTime = presEffectDoc?.presentation_transition ? NumCast(presEffectDoc?.presentation_transition) : 500;
         const effectProps = {
             left: dir === PresEffectDirection.Left,
             right: dir === PresEffectDirection.Right,
@@ -978,14 +978,26 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
             bottom: dir === PresEffectDirection.Bottom,
             opposite: true,
             delay: 0,
-            duration,
+            duration: Cast(presEffectDoc?.presentation_transition, 'number', Cast(presEffectDoc?.followLinkTransitionTime, 'number', null)),
         };
 
         const timing = StrCast(presEffectDoc?.presentation_effectTiming);
-        const timingConfig = (timing ? JSON.parse(timing) : undefined) ??  {
-            type: SpringType.GENTLE,
-            ...springMappings.gentle,
-        };
+        let timingConfig: SpringSettings | undefined;
+        if (timing) {
+            timingConfig = JSON.parse(timing);
+        }
+
+        if (!timingConfig) {
+            timingConfig = {
+                type: SpringType.GENTLE,
+                ...springMappings.gentle,
+            };
+        }
+
+        if (!dir) {
+            dir = PresEffectDirection.Center;
+        }
+
         switch (StrCast(presEffectDoc?.presentation_effect, StrCast(presEffectDoc?.followLinkAnimEffect))) {
             case PresEffect.Expand:     return <SpringAnimation doc={root} startOpacity={0} dir={dir} presEffect={PresEffect.Expand} springSettings={timingConfig}>{renderDoc}</SpringAnimation>
             case PresEffect.Flip:       return <SpringAnimation doc={root} startOpacity={0} dir={dir} presEffect={PresEffect.Flip}   springSettings={timingConfig}>{renderDoc}</SpringAnimation>
@@ -1067,16 +1079,15 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
         finished?: (changed: boolean) => void // func called after focusing on target with flag indicating whether anything needed to be done.
     ) => Promise<void>;
     public static linkCommonAncestor: (link: Doc) => DocumentView | undefined;
-    /**
-     * Pins a Doc to the current presentation trail. (see TabDocView for implementation)
-     */
+    // pin func
     public static PinDoc: (docIn: Doc | Doc[], pinProps: PinProps) => void;
-    /**
-     * The DocumentView below the cursor at the start of a gesture (that receives the pointerDown event).  Used by GestureOverlay to determine the doc a gesture should apply to.
-     */
-    public static DownDocView: DocumentView | undefined;
+    // gesture
+    public static DownDocView: DocumentView | undefined; // the first DocView that receives a pointerdown event.  used by GestureOverlay to determine the doc a gesture should apply to.
+    // media playing
+    @observable public static CurrentlyPlaying: DocumentView[] = [];
 
     public get displayName() {  return 'DocumentView(' + (this.Document?.title??"") + ')';  } // prettier-ignore
+    public ContentRef = React.createRef<HTMLDivElement>();
     private _htmlOverlayEffect: Opt<Doc>;
     private _disposers: { [name: string]: IReactionDisposer } = {};
     private _viewTimer: NodeJS.Timeout | undefined;
@@ -1107,7 +1118,6 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
     @observable private _htmlOverlayText: Opt<string> = undefined;
     @observable private _isHovering = false;
     @observable private _selected = false;
-    @observable public static CurrentlyPlaying: DocumentView[] = [];  // audio or video media views that are currently playing
 
     @computed private get shouldNotScale() {
         return (this.layout_fitWidth && !this.nativeWidth) || this.ComponentView?.isUnstyledView?.();
@@ -1454,6 +1464,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
                 {!this.Document || !this._props.PanelWidth() ? null : (
                     <div
                         className="contentFittingDocumentView-previewDoc"
+                        ref={this.ContentRef}
                         style={{
                             transform: `translate(${this.centeringX}px, ${this.centeringY}px)`,
                             width: xshift ?? `${this._props.PanelWidth() - this.Xshift * 2}px`,