small progressbar ui changes

2 files changed, 8 insertions, 3 deletions

diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.scss b/src/client/views/nodes/RecordingBox/ProgressBar.scss
index 1cf60b82b..7aa241b8e 100644
--- a/src/client/views/nodes/RecordingBox/ProgressBar.scss
+++ b/src/client/views/nodes/RecordingBox/ProgressBar.scss
@@ -5,6 +5,7 @@
   text-align: center;
 
   align-items: center;
+  cursor: pointer;
 
 
       position: absolute;
@@ -32,6 +33,10 @@
       }
 }
 
+.progressbar-disabled {
+    cursor: not-allowed;
+}
+
 .segment {
   border: 3px solid black;
   background-color: red;
diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.tsx b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
index a00a4643d..7aa84a70f 100644
--- a/src/client/views/nodes/RecordingBox/ProgressBar.tsx
+++ b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
@@ -61,12 +61,12 @@ export function ProgressBar(props: ProgressBarProps) {
     useEffect(() => handleUndo(), [props.doUndo])
 
   useEffect(() => {
-      console.log("useEffect recording", props.recording)
       // get segments segment's html using it's id -> make them appeared disabled (or enabled)
       segments.forEach((seg) => document.getElementById(seg.props.id)?.classList.toggle('segment-disabled', props.recording));
+      progressBarRef.current?.classList.toggle('progressbar-disabled', props.recording);
       
       if (props.recording)
-          setSegments(prevSegments => [...prevSegments, <div key='segment-expanding' id='segment-expanding' className='segment segment-expanding' style={{ width: 'auto' }}>{props.videos.length + 1}</div>]);
+          setSegments(prevSegments => [...prevSegments, <div key='segment-expanding' id='segment-expanding' className='segment segment-expanding' style={{ width: 'min-content' }}>{props.videos.length + 1}</div>]);
   }, [props.recording])
   
 
@@ -168,7 +168,7 @@ export function ProgressBar(props: ProgressBarProps) {
     if (progressBar == null || clickedSegment.id === progressBar.id) return
 
     // if holding shift key, let's remove that segment
-    // TODO: think of a way to accomodate touch -> maybe if poiuntermove isn't fired after x secs?
+    // TODO: think of a way to accomodate touch -> maybe if pointerup isn't fired after x secs? or if dragged into a trash bin or smthn
     if (e.shiftKey) {
       const segId = parseInt(clickedSegment.id.split('-')[1]);
       setRemoved(segId);