4 files changed, 38 insertions, 6 deletions
diff --git a/src/client/views/LightboxView.scss b/src/client/views/LightboxView.scss
index ae5dc9902..f86a1d211 100644
--- a/src/client/views/LightboxView.scss
+++ b/src/client/views/LightboxView.scss
@@ -46,6 +46,22 @@
         opacity: 1;
     }
 }
+.lightboxView-exploreBtn {
+    margin: auto;
+    position: absolute;
+    right: 100;
+    top: 10;
+    background: transparent;
+    border-radius: 8;
+    color: white;
+    opacity: 0.7;
+    width: 25;
+    flex-direction: column;
+    display: flex;
+    &:hover {
+        opacity: 1;
+    }
+}
 .lightboxView-frame {
     position: absolute;
     top: 0;
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index e3e8403df..e8b8a3eaa 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -16,6 +16,7 @@ import { CollectionStackedTimeline } from './collections/CollectionStackedTimeli
 import { TabDocView } from './collections/TabDocView';
 import { GestureOverlay } from './GestureOverlay';
 import './LightboxView.scss';
+import { MainView } from './MainView';
 import { DocumentView } from './nodes/DocumentView';
 import { DefaultStyleProvider, wavyBorderPath } from './StyleProvider';
 
@@ -53,6 +54,8 @@ export class LightboxView extends React.Component<LightboxViewProps> {
         if (!doc) {
             this._docFilters && (this._docFilters.length = 0);
             this._future = this._history = [];
+            Doc.ActiveTool = InkTool.None;
+            MainView.Instance._exploreMode = false;
         } else {
             if (doc) {
                 const l = DocUtils.MakeLinkToActiveAudio(() => doc).lastElement();
@@ -292,6 +295,7 @@ export class LightboxView extends React.Component<LightboxViewProps> {
                             isContentActive={returnTrue}
                             addDocTab={this.addDocTab}
                             pinToPres={TabDocView.PinDoc}
+                            onBrowseClick={MainView.Instance.exploreMode}
                             rootSelected={returnTrue}
                             docViewPath={returnEmptyDoclist}
                             docFilters={this.docFilters}
@@ -367,6 +371,16 @@ export class LightboxView extends React.Component<LightboxViewProps> {
                     }}>
                     <FontAwesomeIcon color={Doc.ActiveTool === InkTool.Pen ? 'black' : 'white'} icon={'pen'} size="2x" />
                 </div>
+                <div
+                    className="lightboxView-exploreBtn"
+                    title="toggle explore mode to navigate among documents only"
+                    style={{ background: MainView.Instance._exploreMode ? 'white' : undefined }}
+                    onClick={action(e => {
+                        e.stopPropagation();
+                        MainView.Instance._exploreMode = !MainView.Instance._exploreMode;
+                    })}>
+                    <FontAwesomeIcon color={MainView.Instance._exploreMode ? 'black' : 'white'} icon={'globe-americas'} size="2x" />
+                </div>
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 3cc425745..e9d0826cd 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1101,10 +1101,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     @action
     zoomSmoothlyAboutPt(docpt: number[], scale: number, transitionTime = 500) {
         if (this.Document._isGroup) return;
-        setTimeout(
-            action(() => (this._viewTransition = 0)),
-            (this._viewTransition = transitionTime)
-        ); // set transition to be smooth, then reset
+        this._viewTransition = transitionTime;
         const screenXY = this.getTransform().inverse().transformPoint(docpt[0], docpt[1]);
         this.layoutDoc[this.scaleFieldKey] = scale;
         const newScreenXY = this.getTransform().inverse().transformPoint(docpt[0], docpt[1]);
@@ -1112,6 +1109,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         const newpan = this.getTransform().transformDirection(scrDelta.x, scrDelta.y);
         this.layoutDoc._panX = NumCast(this.layoutDoc._panX) - newpan[0];
         this.layoutDoc._panY = NumCast(this.layoutDoc._panY) - newpan[1];
+        return new Promise<number>(res => setTimeout(() => res(runInAction(() => (this._viewTransition = 0))), this._viewTransition)); // set transition to be smooth, then reset
     }
 
     focusDocument = (doc: Doc, options?: DocFocusOptions) => {
@@ -2237,7 +2235,7 @@ export function CollectionBrowseClick(dv: DocumentView, clientX: number, clientY
                 const selfFfview = dv.ComponentView instanceof CollectionFreeFormView ? dv.ComponentView : undefined;
                 const parFfview = dv.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView;
                 const ffview = selfFfview && selfFfview.rootDoc[selfFfview.props.scaleField || '_viewScale'] !== 0.5 ? selfFfview : parFfview; // if focus doc is a freeform that is not at it's default 0.5 scale, then zoom out on it.  Otherwise, zoom out on the parent ffview
-                ffview?.zoomSmoothlyAboutPt(ffview.getTransform().transformPoint(clientX, clientY), 0.5);
+                await ffview?.zoomSmoothlyAboutPt(ffview.getTransform().transformPoint(clientX, clientY), 0.5);
             }
             return ViewAdjustment.doNothing;
         },
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 5dc65afb7..0c4d514cd 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -421,7 +421,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 pinDoc.presPinViewScroll = pinDoc._scrollTop;
             }
             if (clippable) pinDoc.presPinClipWidth = pinDoc._clipWidth;
-            if (temporal) pinDoc.presEndTime = NumCast((pinDoc.presStartTime = pinDoc._currentTimecode)) + 0.1;
+            if (temporal) {
+                pinDoc.presStartTime = pinDoc._currentTimecode;
+                const duration = NumCast(pinDoc[`${Doc.LayoutFieldKey(pinDoc)}-duration`], NumCast(pinDoc.presStartTime) + 0.1);
+                pinDoc.presEndTime = NumCast(pinDoc.clipEnd, duration);
+            }
             if (textview) pinDoc.presData = targetDoc.text instanceof ObjectField ? targetDoc.text[Copy]() : targetDoc.text;
             if (dataview) pinDoc.presData = targetDoc.data instanceof ObjectField ? targetDoc.data[Copy]() : targetDoc.data;
             if (pannable || scrollable) {