fixed ffmpeg for uploading videos. fixed getView() to take focus options so that if a sidebar or timeline has to be opened, the didMove flag can be set properly. added video snapshot frame to top menu. fixed using '^' to stop and start a selection region on timelines.

1 files changed, 29 insertions, 11 deletions

diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index d99b4f9de..22a67c501 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -56,8 +56,11 @@ export enum TrimScope {
 
 @observer
 export class CollectionStackedTimeline extends CollectionSubView<CollectionStackedTimelineProps>() {
-    @observable static SelectingRegion: CollectionStackedTimeline | undefined = undefined;
-    @observable public static CurrentlyPlaying: DocumentView[] = [];
+    public static SelectingRegions: Set<CollectionStackedTimeline> = new Set();
+    public static StopSelecting() {
+        this.SelectingRegions.forEach(action(region => (region._selectingRegion = false)));
+        this.SelectingRegions.clear();
+    }
     constructor(props: any) {
         super(props);
         makeObservable(this);
@@ -69,6 +72,8 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
     private _timeline: HTMLDivElement | null = null; // ref to actual timeline div
     private _timelineWrapper: HTMLDivElement | null = null; // ref to timeline wrapper div for zooming and scrolling
     private _markerStart: number = 0;
+    @observable public static CurrentlyPlaying: DocumentView[] = [];
+    @observable _selectingRegion = false;
     @observable _markerEnd: number | undefined = undefined;
     @observable _trimming: number = TrimScope.None;
     @observable _trimStart: number = 0; // trim controls start pos
@@ -123,8 +128,9 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
 
     componentWillUnmount() {
         document.removeEventListener('keydown', this.keyEvents, true);
-        if (CollectionStackedTimeline.SelectingRegion === this) {
-            runInAction(() => (CollectionStackedTimeline.SelectingRegion = undefined));
+        if (this._selectingRegion) {
+            runInAction(() => (this._selectingRegion = false));
+            CollectionStackedTimeline.SelectingRegions.delete(this);
         }
     }
 
@@ -154,6 +160,15 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
         this._zoomFactor = zoom;
     }
 
+    makeDocUnfiltered = (doc: Doc) => this.childDocList?.some(item => item === doc);
+
+    getView = async (doc: Doc, options: DocFocusOptions): Promise<Opt<DocumentView>> =>
+        new Promise<Opt<DocumentView>>(res => {
+            if (doc.hidden) options.didMove = !(doc.hidden = false);
+            const findDoc = (finish: (dv: DocumentView) => void) => DocumentManager.Instance.AddViewRenderedCb(doc, dv => finish(dv));
+            findDoc(dv => res(dv));
+        });
+
     anchorStart = (anchor: Doc) => NumCast(anchor._timecodeToShow, NumCast(anchor[this._props.startTag]));
     anchorEnd = (anchor: Doc, val: any = null) => NumCast(anchor._timecodeToHide, NumCast(anchor[this._props.endTag], val) ?? null);
 
@@ -191,14 +206,16 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                     this._props.playing() ? this._props.Pause() : this._props.Play();
                     break;
                 case '^':
-                    if (!CollectionStackedTimeline.SelectingRegion) {
+                    if (!this._selectingRegion) {
                         this._markerStart = this._markerEnd = this.currentTime;
-                        CollectionStackedTimeline.SelectingRegion = this;
+                        this._selectingRegion = true;
+                        CollectionStackedTimeline.SelectingRegions.add(this);
                     } else {
                         this._markerEnd = this.currentTime;
                         CollectionStackedTimeline.createAnchor(this.Document, this.dataDoc, this._props.fieldKey, this._markerStart, this._markerEnd, undefined, true);
                         this._markerEnd = undefined;
-                        CollectionStackedTimeline.SelectingRegion = undefined;
+                        this._selectingRegion = false;
+                        CollectionStackedTimeline.SelectingRegions.delete(this);
                     }
                     e.stopPropagation();
                     break;
@@ -405,6 +422,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                 backgroundColor: 'rgba(128, 128, 128, 0.5)',
                 layout_hideLinkButton: true,
                 onClick: FollowLinkScript(),
+                _embedContainer: doc,
                 annotationOn: doc,
                 _isTimelineLabel: true,
                 layout_borderRounding: anchorEndTime === undefined ? '100%' : undefined,
@@ -511,7 +529,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
 
     // renders selection region on timeline
     @computed get selectionContainer() {
-        const markerEnd = CollectionStackedTimeline.SelectingRegion === this ? this.currentTime : this._markerEnd;
+        const markerEnd = this._selectingRegion ? this.currentTime : this._markerEnd;
         return markerEnd === undefined ? null : (
             <div
                 className="collectionStackedTimeline-selector"
@@ -532,9 +550,9 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
             anchorEndTime: number;
             level: number;
         }[] = [];
-        const drawAnchors = this.childDocs.map(anchor => ({
-            level: this.getLevel(anchor, overlaps),
-            anchor,
+        const drawAnchors = this.childLayoutPairs.map(pair => ({
+            level: this.getLevel(pair.layout, overlaps),
+            anchor: pair.layout,
         }));
         const maxLevel = overlaps.reduce((m, o) => Math.max(m, o.level), 0) + 2;
         return this.clipDuration === 0 ? null : (