fixed pinWithVIew for videos to capture timecode. fixed formatting of time labels in presBox panel.

3 files changed, 15 insertions, 13 deletions

diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 2d8055ba9..35edbe684 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -249,15 +249,15 @@ export class TabDocView extends React.Component<TabDocViewProps> {
             const presSelected: Doc | undefined = presArray && size ? presArray[size - 1] : undefined;
             const duration = NumCast(doc[`${Doc.LayoutFieldKey(pinDoc)}-duration`], null);
 
-            PresBox.pinDocView(pinDoc, pinProps, doc);
-            pinDoc.onClick = ScriptField.MakeFunction('navigateToDoc(self.presentationTargetDoc, self)');
-            Doc.AddDocToList(curPres, 'data', pinDoc, presSelected);
             if (!pinProps?.audioRange && duration !== undefined) {
                 pinDoc.mediaStart = 'manual';
                 pinDoc.mediaStop = 'manual';
                 pinDoc.presStartTime = NumCast(doc.clipStart);
                 pinDoc.presEndTime = NumCast(doc.clipEnd, duration);
             }
+            PresBox.pinDocView(pinDoc, pinProps, doc);
+            pinDoc.onClick = ScriptField.MakeFunction('navigateToDoc(self.presentationTargetDoc, self)');
+            Doc.AddDocToList(curPres, 'data', pinDoc, presSelected);
             //save position
             if (pinProps?.activeFrame !== undefined) {
                 pinDoc.presActiveFrame = pinProps?.activeFrame;
diff --git a/src/client/views/nodes/trails/PresBox.scss b/src/client/views/nodes/trails/PresBox.scss
index 34df415ac..4d60a02f1 100644
--- a/src/client/views/nodes/trails/PresBox.scss
+++ b/src/client/views/nodes/trails/PresBox.scss
@@ -352,8 +352,8 @@
 
         .slider-number {
             border-radius: 3px;
-            width: 30px;
             margin: auto;
+            overflow: hidden;
         }
     }
 
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index de19f831d..3d9c38186 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -1447,9 +1447,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                         <div id={'startTime'} className="slider-number" style={{ backgroundColor: Colors.LIGHT_GRAY }}>
                                             <input
                                                 className="presBox-input"
-                                                style={{ textAlign: 'center', width: 30, height: 15, fontSize: 10 }}
+                                                style={{ textAlign: 'center', width: '100%', height: 15, fontSize: 10 }}
                                                 type="number"
-                                                value={NumCast(activeItem.presStartTime)}
+                                                value={NumCast(activeItem.presStartTime).toFixed(2)}
                                                 onKeyDown={e => e.stopPropagation()}
                                                 onChange={action((e: React.ChangeEvent<HTMLInputElement>) => {
                                                     activeItem.presStartTime = Number(e.target.value);
@@ -1473,9 +1473,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                             <input
                                                 className="presBox-input"
                                                 onKeyDown={e => e.stopPropagation()}
-                                                style={{ textAlign: 'center', width: 30, height: 15, fontSize: 10 }}
+                                                style={{ textAlign: 'center', width: '100%', height: 15, fontSize: 10 }}
                                                 type="number"
-                                                value={NumCast(activeItem.presEndTime)}
+                                                value={NumCast(activeItem.presEndTime).toFixed(2)}
                                                 onChange={action((e: React.ChangeEvent<HTMLInputElement>) => {
                                                     activeItem.presEndTime = Number(e.target.value);
                                                 })}
@@ -1493,13 +1493,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                         style={{ gridColumn: 1, gridRow: 1 }}
                                         className={`toolbar-slider ${'end'}`}
                                         id="toolbar-slider"
-                                        onPointerDown={() => {
+                                        onPointerDown={e => {
                                             this._batch = UndoManager.StartBatch('presEndTime');
                                             const endBlock = document.getElementById('endTime');
                                             if (endBlock) {
                                                 endBlock.style.color = Colors.LIGHT_GRAY;
                                                 endBlock.style.backgroundColor = Colors.MEDIUM_BLUE;
                                             }
+                                            e.stopPropagation();
                                         }}
                                         onPointerUp={() => {
                                             this._batch?.end();
@@ -1523,13 +1524,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                         style={{ gridColumn: 1, gridRow: 1 }}
                                         className={`toolbar-slider ${'start'}`}
                                         id="toolbar-slider"
-                                        onPointerDown={() => {
+                                        onPointerDown={e => {
                                             this._batch = UndoManager.StartBatch('presStartTime');
                                             const startBlock = document.getElementById('startTime');
                                             if (startBlock) {
                                                 startBlock.style.color = Colors.LIGHT_GRAY;
                                                 startBlock.style.backgroundColor = Colors.MEDIUM_BLUE;
                                             }
+                                            e.stopPropagation();
                                         }}
                                         onPointerUp={() => {
                                             this._batch?.end();
@@ -1545,10 +1547,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                         }}
                                     />
                                 </div>
-                                <div className={`slider-headers ${activeItem.presMovement === PresMovement.Pan || activeItem.presMovement === PresMovement.Zoom ? '' : 'none'}`}>
-                                    <div className="slider-text">{clipStart} s</div>
+                                <div className="slider-headers">
+                                    <div className="slider-text">{clipStart.toFixed(2)} s</div>
                                     <div className="slider-text"></div>
-                                    <div className="slider-text">{clipEnd} s</div>
+                                    <div className="slider-text">{clipEnd.toFixed(2)} s</div>
                                 </div>
                             </div>
                             <div className="ribbon-final-box">