Basic zoom functionality for the cutting view #1033

Arnei · 2023-04-13T14:33:02Z

Based off of the subtitle view. Implements a very basic zoom functionality, hoping that it's better than nothing. Includes:

A Slider to control the zoom level
A horizontal scrollbar to move the timeline
Drag n' Drop to move the timeline

Known issues:

~~The scrubber/playhead is cut off if placed either at 0 or at the maximum duration. I might have css'd myself into a corner here.~~

Possible future feature extensions:

Hotkeys
Centering the zoom on the scrubber/playhead while zooming in (difficult to do without jittering)
Configuration

Resolves #107.

Courtesy of the Opencast 2023 Crowdfunding.

Based off of the subtitle view. Implements a very basic zoom functionality, hoping that it's better than nothing. Includes: - A Slider to control the zoom level - A horizontal scrollbar to move the timeline - Drag n' Drop to move the timeline Known issues: - The scrubber/playhead is cut off if placed either at 0 or at the maximum duration. I might have css'd myself into a corner here.

github-actions · 2023-04-13T14:47:36Z

This pull request is deployed at test.editor.opencast.org/1033/2023-04-13_14-43-59/ .
It might take a few minutes for it to become available.

github-actions · 2023-06-14T13:13:08Z

This pull request has conflicts ☹
Please resolve those so we can review the pull request.
Thanks.

ziegenberg · 2023-09-21T10:49:29Z

@Arnei could you rebase and fix the conflicts? I'd like to test this.

github-actions · 2023-09-21T14:03:36Z

This pull request is deployed at test.editor.opencast.org/1033/2023-09-21_14-00-10/ .
It might take a few minutes for it to become available.

ziegenberg · 2023-09-21T14:21:13Z

Thank you @Arnei! :)

ziegenberg · 2023-09-21T14:32:31Z

Works as described. I only have one small visual bug to report. The slider should probably live in its own div like the other controls around it. At the moment it almost overlaps the control to the left of it. See the screenshot for reference.

github-actions · 2023-09-22T13:14:36Z

This pull request has conflicts ☹
Please resolve those so we can review the pull request.
Thanks.

github-actions · 2023-09-22T14:04:21Z

This pull request is deployed at test.editor.opencast.org/1033/2023-09-22_14-00-35/ .
It might take a few minutes for it to become available.

github-actions · 2023-10-05T09:03:53Z

This pull request has conflicts ☹
Please resolve those so we can review the pull request.
Thanks.

Wrapping with `ScrollContainer` caused the playhead to get cut off, because `ScrollContainer` sets CSS `overflow`. Elevating the relative parent for the playhead above `ScrollContainer` fixes this issue.

github-actions · 2023-12-11T14:59:09Z

This pull request is deployed at test.editor.opencast.org/1033/2023-12-11_14-56-49/ .
It might take a few minutes for it to become available.

ziegenberg · 2023-12-12T10:01:32Z

Works now (mostly). 🎉

I found some funny bugs, though:

WHEN I scroll/move the timeline,
THEN the scrubber does not move together with it.
WHEN I zoom the timeline
AND the scrubber moves out of the viewport
AND I scroll/move the timeline afterwards,
THEN the scrubber stays gone, even if it should be back in the viewport.
WHEN I zoom the timeline
AND I then scroll/move the timeline a bit so that the scrubber still remains in the viewport
AND then click on the timeline,
THEN the scrubber gets placed with a certain offset to the click position.

The previous fix for showing the head of scrubber/playhead again caused a number of issues with the position of the scrubber. This undoes the previous change, so that the scrubber binds to the correct parent again, which should undo all the issues. This also includes a stylistic change in moving the timeline a little lower inside its scroll container, to make the top of the scrubber show again.

github-actions · 2023-12-12T10:59:23Z

This pull request is deployed at test.editor.opencast.org/1033/2023-12-12_10-56-44/ .
It might take a few minutes for it to become available.

Arnei · 2023-12-12T11:00:05Z

Thanks for the quick review. Looks like my workaround was no workaround at all.

In that case, the only solution I can think of is moving the elements around a bit, so that the scrubber is completely inside the scroll container (so that it does not get cut off). Otherwise we would have to go with a different approach for zooming altogether, which would be shame since the library we're using for this is otherwise rather nice.

ziegenberg · 2023-12-12T11:29:54Z

Looks better now!

Scrolling the timeline also moves the scrubber ✅
Zooming the timeline with the scrubber going off-screen does not make it disappear when scrolling it back into the viewport ✅
The scrubber gets placed correctly when zooming and then scrolling the timeline. ✅

Features nice to have:

Centering the zoom on the scrubber/play-head while zooming in
Scrolling the timeline with the mouse wheel while being zoomed in
Having hotkeys for zooming in/out and scrolling left/right while being zoomed in

luniki · 2024-05-22T04:28:58Z

It would also be nice if the slider was wider to give more precise control over the zoom level.
Fixed:
0004-Increase-the-width-of-the-zoom-slider.patch.txt

luniki · 2024-05-22T04:29:40Z

Already told this luniki in private chat, but for posterities sake: When changing the zoom level, the playhead jumps (jitters?) back and forth. This seems to be a purely visual issue:
Bildschirmaufzeichnung.vom.2024-05-17.14-09-59.webm

The jumping of the scrubber is a result of the asynchronous update of:
1. `scrollLeft` of the `ScrollContainer`

2. `width` of the `div` that contains the `Waveforms`

3. `controlledPosition` of the `Scrubber`
When we zoom in, the scrollLeft updates before the width and the controlledPosition.

I do not have a clue on how to synchronize all of this.

I will try to position the scrubber by using a percentage instead of a changing px value.

luniki · 2024-05-22T06:01:03Z

Nope, this does not work. The only way I can imagine removing the flickering of the scrubber is separating the elements of the scrollable waveform and the scrubber. The scrubber would have to be positioned separately in a different element.

0001-Add-zoom-tooltip.patch.txt 0002-Debounce-drag-handler-of-the-scrubber.patch.txt 0003-Fix-fast-zooming-bug.patch.txt 0004-Increase-the-width-of-the-zoom-slider.patch.txt

github-actions · 2024-05-22T07:39:19Z

This pull request is deployed at test.editor.opencast.org/1033/2024-05-22_07-38-02/ .
It might take a few minutes for it to become available.

snoesberger · 2024-05-28T15:18:59Z

If you set the maximum zoom factor in this way, the width of the browser will play a role. Which lead me to an interesting bug in the current implementation: If you change the window width, the timeline shifts in an unexpected way.

@luniki is this a new bug that we already have now or will this bug be added by changing the way we set the max zoom factor? And what do you mean by "shifts in an unexpected way"?

snoesberger · 2024-06-04T14:06:01Z

I have tested the latest changes. Here are the results of my tests for the various open issues:

Drag and drop of cut marker when zoomed in
Does still not work for me.
Always 20 sec of waveform in view when max. zoom
Still 10x max zoom factor.
Increased width of zoom slider
implemented
jumping of the scrubber when zooming
still the same behavior
Zoom slider tooltip
implemented

oas777 · 2024-06-06T15:18:58Z

Late to the game with a question: Do the shortcuts work for you? Both me and my colleague failed to activate them.

snoesberger · 2024-06-07T07:09:08Z

Late to the game with a question: Do the shortcuts work for you? Both me and my colleague failed to activate them.

The shortcuts for zooming in and out (Shift + Option + z/t or "+"/"-") don't work for me either. However, if I first activate the zoom slider by clicking on it, I can use the "left"/"right" keys to change the zoom level.

Arnei · 2024-06-07T09:31:21Z

I've tested Shift + Alt/Option + z/t with the latest Chrome, Firefox and Safari, and it worked in all three. +/- did not work in Safari, but is also not expected to work in every browser, which is the reason for the alternative shortcut.

Any further information like Browser version, System or detailed description/video of what you are doing would be appreciated.

oas777 · 2024-06-07T11:45:56Z

My observations for Windows 11 with Firefox and Chrome:

SHIFT+ALT+z seems to work "once", but if you interact with UI afterwards, the hotkey doesn't work anymore.
SHIFT+ALT+t seems to trigger a screen recording here, but maybe that's my Lenovo or the Snipping tool interfering.
Also, I find the syntax of the hotkey description confusing, what do the additional + and - stand for?

snoesberger · 2024-06-07T12:02:08Z

Any further information like Browser version, System or detailed description/video of what you are doing would be appreciated.

I tested it on a MacBook Pro (Sonoma 14.5) and Shift + Option + z/t or "+"/"-" didn't work at all in Firefox, Safari, Chrome and Opera Browsers ().

oas777 · 2024-06-07T12:05:05Z

Oh, so that's an alternative to z/t? They don't work at all at my end.

luniki · 2024-06-10T09:12:23Z

I have tested the latest changes. Here are the results of my tests for the various open issues:

* [ ]  **Drag and drop of cut marker when zoomed in**
  Does still not work for me.

* [ ]  **Always 20 sec of waveform in view when max. zoom**
  Still 10x max zoom factor.

* [x]  **Increased width of zoom slider**
  implemented

* [ ]  **jumping of the scrubber when zooming**
  still the same behavior

* [x]  **Zoom slider tooltip**
  implemented

I have fixed the drag and drop of the cut marks and changed the timeline zoom maximum depending on the video length in these patches:

0002-Enable-drag-and-drop-of-cut-markers-when-zoomed-in.patch.txt
0001-Compute-maximum-zoom-factor-depending-on-the-length-.patch.txt

I cannot find a solution for the jumping of the scrubber. I would like to work on a proof of concept for using another library specialized in this. For a first version I would estimate about 2-3h to get an idea on how (and if) this could work.

Signed-off-by: Arnei <arnewilken@yahoo.de>

github-actions · 2024-06-10T10:14:23Z

This pull request is deployed at test.editor.opencast.org/1033/2024-06-10_10-13-07/ .
It might take a few minutes for it to become available.

Signed-off-by: Arnei <arnewilken@yahoo.de>

github-actions · 2024-06-11T07:06:21Z

This pull request is deployed at test.editor.opencast.org/1033/2024-06-11_07-04-48/ .
It might take a few minutes for it to become available.

Arnei · 2024-06-11T07:12:11Z

With lunikis patches we should now be here:

Drag and drop of cut marker when zoomed in
Does still not work for me.

Always 20 sec of waveform in view when max. zoom
Still 10x max zoom factor.

Increased width of zoom slider
implemented

jumping of the scrubber when zooming
still the same behavior

Zoom slider tooltip
implemented

As already elaborated, fixing "jumping of the scrubber when zooming" will require a lot more work and as such we should consider if want to merge this even with this bug present.

Also if you try to test "Always 20 sec of waveform in view when max. zoom" with the default "Dual Stream Demo" video, you will notice that the max zoom will not be at 20 seconds. That is because the video is relatively short with only about a minute of playtime, for which 20 seconds don't really make sense. For longer videos "Always 20 sec of waveform in view when max. zoom" will work.

Arnei · 2024-06-11T07:16:54Z

Also regarding the hotkey issue. Is it only the zoom hotkeys that are not working, or are you having this problem with other hotkeys as well? If it is the latter, I suggest we discuss it in a separate issue.

snoesberger · 2024-06-11T13:57:02Z

As already elaborated, fixing "jumping of the scrubber when zooming" will require a lot more work and as such we should consider if want to merge this even with this bug present.

We can live with this behaviour for now. I would suggest that we open a separate issue for this cosmetic problem.

Also if you try to test "Always 20 sec of waveform in view when max. zoom" with the default "Dual Stream Demo" video, you will notice that the max zoom will not be at 20 seconds. That is because the video is relatively short with only about a minute of playtime, for which 20 seconds don't really make sense. For longer videos "Always 20 sec of waveform in view when max. zoom" will work.

I agree with you, it makes sense and is fine for us.

And I have tested the latest changes and can confirm that "drag and drop cut marker" and "always 20 sec waveform" work as expected/described.

snoesberger · 2024-06-11T14:06:19Z

Also regarding the hotkey issue. Is it only the zoom hotkeys that are not working, or are you having this problem with other hotkeys as well? If it is the latter, I suggest we discuss it in a separate issue.

Some of the shortcuts for the timeline don't work for me either (Shift + Option + i, Shift + Option + k, Up, Down). So, I'll create a separate issue for that (->#1384).

jduehring

Looks good to me and works as expected, exept for the comment below. I experienced the "jumping of the scrubber when zooming" but I see this has already been addressed.

jduehring · 2024-06-12T09:51:14Z

src/redux/videoSlice.ts

@@ -489,6 +503,14 @@ const setThumbnailHelper = (state: video, id: Track["id"], uri: Track["thumbnail
  }
 };

+const ZOOM_SECONDS_VISIBLE = 20 * 1000;


For videos of 20 seconds length or less, I can not use the zoom-slider at all because the returned value is used as maximum and will always be 1. This might be fine since the zoom level is already very detailed on a short video, but it would probably make sense to have some kind of visual indication / explanation as to why the user can't drag the slider. I was a bit confused at first.

Edit: I meant to highlight the whole timelineZoomMax() function...

Maybe even just hide the zoom bar completely for short videos < 20sec?

Hiding is nice. On the other hand, we could always have a minimal "maximum zoom factor" of 2.

Personally, I'd prefer to have a minimum zoom factor. That way the user always has the same experience and never has to wonder where the zoom slider has gone.

I have changed the minimal maxZoom factor. This patch takes care of it:
0001-Update-the-minimal-maxZoom-from-1-to-2.patch.txt

@luniki Now the zoom-bar seems to be not correctly shown for short videos. I guess the buttons are not intended?

Tested with the ID-3d-print video on develop.

@jduehring I haven't noticed your problems on https://test.editor.opencast.org/1033/2024-06-18_10-33-57/?id=ID-3d-print. My PC displays the zoom slider as it should (tested with Safari, Firefox, Chrome and Opera).

Hmm strange, might have been a local hiccup on my side. Seems to work now. So all in all I have no more complaints and its ready to merge from my side.

This way there is always something to zoom into even with very small videos. Signed-off-by: Arnei <arnewilken@yahoo.de>

github-actions · 2024-06-18T10:35:19Z

This pull request is deployed at test.editor.opencast.org/1033/2024-06-18_10-33-57/ .
It might take a few minutes for it to become available.

Arnei added the type:feature A new feature or feature request label Apr 13, 2023

Arnei mentioned this pull request Apr 13, 2023

Basic example for how a zoom of the timeline could be implemented #437

Closed

Arnei force-pushed the zoom-timeline-revival branch from 942495b to fcc79d0 Compare April 13, 2023 14:43

github-actions bot added the status:conflicts Conflicts with another pull request or issue label Jun 14, 2023

Merge remote-tracking branch 'upstream/main' into zoom-timeline-revival

0aac9f5

github-actions bot removed the status:conflicts Conflicts with another pull request or issue label Sep 21, 2023

github-actions bot added the status:conflicts Conflicts with another pull request or issue label Sep 22, 2023

Merge remote-tracking branch 'upstream/main' into zoom-timeline-revival

63269cc

github-actions bot removed the status:conflicts Conflicts with another pull request or issue label Sep 22, 2023

github-actions bot added the status:conflicts Conflicts with another pull request or issue label Oct 5, 2023

Arnei added 3 commits December 11, 2023 12:10

Merge remote-tracking branch 'upstream/main' into zoom-timeline-revival

4bdd005

Fit zoom to redesign

564980a

Make scrubber head show again

bb8f42f

Wrapping with `ScrollContainer` caused the playhead to get cut off, because `ScrollContainer` sets CSS `overflow`. Elevating the relative parent for the playhead above `ScrollContainer` fixes this issue.

github-actions bot removed the status:conflicts Conflicts with another pull request or issue label Dec 11, 2023

Apply various minor patches...

17c3d35

0001-Add-zoom-tooltip.patch.txt 0002-Debounce-drag-handler-of-the-scrubber.patch.txt 0003-Fix-fast-zooming-bug.patch.txt 0004-Increase-the-width-of-the-zoom-slider.patch.txt

Marcus added 2 commits June 10, 2024 11:59

Compute maximum zoom factor depending on the length of the event.

0285c39

Signed-off-by: Arnei <arnewilken@yahoo.de>

Enable drag and drop of cut markers when zoomed in.

61b0974

Signed-off-by: Arnei <arnewilken@yahoo.de>

Marcus added 2 commits June 11, 2024 09:04

Remove the rounding up to the nearest multiple of 5

e28319a

Signed-off-by: Arnei <arnewilken@yahoo.de>

Remove debouncing of dragging the cut marks.

ef1e696

Signed-off-by: Arnei <arnewilken@yahoo.de>

snoesberger mentioned this pull request Jun 11, 2024

Keyboard shortcuts do not work in every case. #1384

Open

jduehring self-requested a review June 12, 2024 08:39

jduehring reviewed Jun 12, 2024

View reviewed changes

Update the minimal maxZoom from 1 to 2.

ed6fda8

This way there is always something to zoom into even with very small videos. Signed-off-by: Arnei <arnewilken@yahoo.de>

Arnei merged commit b321cf9 into opencast:main Jun 25, 2024
6 checks passed

Basic zoom functionality for the cutting view #1033

Basic zoom functionality for the cutting view #1033

Conversation

Arnei commented Apr 13, 2023 • edited Loading

github-actions bot commented Apr 13, 2023

github-actions bot commented Jun 14, 2023

ziegenberg commented Sep 21, 2023

github-actions bot commented Sep 21, 2023

ziegenberg commented Sep 21, 2023

ziegenberg commented Sep 21, 2023

github-actions bot commented Sep 22, 2023

github-actions bot commented Sep 22, 2023

github-actions bot commented Oct 5, 2023

github-actions bot commented Dec 11, 2023

ziegenberg commented Dec 12, 2023 • edited Loading

github-actions bot commented Dec 12, 2023

Arnei commented Dec 12, 2023

ziegenberg commented Dec 12, 2023

luniki commented May 22, 2024

luniki commented May 22, 2024

luniki commented May 22, 2024

github-actions bot commented May 22, 2024

snoesberger commented May 28, 2024

snoesberger commented Jun 4, 2024

oas777 commented Jun 6, 2024

snoesberger commented Jun 7, 2024

Arnei commented Jun 7, 2024

oas777 commented Jun 7, 2024

snoesberger commented Jun 7, 2024

oas777 commented Jun 7, 2024

luniki commented Jun 10, 2024

github-actions bot commented Jun 10, 2024

github-actions bot commented Jun 11, 2024

Arnei commented Jun 11, 2024 • edited Loading

Arnei commented Jun 11, 2024

snoesberger commented Jun 11, 2024 • edited Loading

snoesberger commented Jun 11, 2024 • edited Loading

jduehring left a comment • edited Loading

Choose a reason for hiding this comment

jduehring Jun 12, 2024 • edited Loading

Choose a reason for hiding this comment

jduehring Jun 12, 2024

Choose a reason for hiding this comment

luniki Jun 14, 2024

Choose a reason for hiding this comment

snoesberger Jun 14, 2024

Choose a reason for hiding this comment

luniki Jun 18, 2024

Choose a reason for hiding this comment

jduehring Jun 25, 2024

Choose a reason for hiding this comment

snoesberger Jun 25, 2024

Choose a reason for hiding this comment

jduehring Jun 25, 2024

Choose a reason for hiding this comment

github-actions bot commented Jun 18, 2024

Arnei commented Apr 13, 2023 •

edited

Loading

ziegenberg commented Dec 12, 2023 •

edited

Loading

Arnei commented Jun 11, 2024 •

edited

Loading

snoesberger commented Jun 11, 2024 •

edited

Loading

snoesberger commented Jun 11, 2024 •

edited

Loading

jduehring left a comment •

edited

Loading

jduehring Jun 12, 2024 •

edited

Loading