Add UI for Markers with end seconds on scene player.

[skier233]

End seconds to markers was added in #5311. However, the UI has not yet had a way to show markers that are timespans instead of single timestamps. This PR adds support to show markers that are a timerange/timespan. To be able to see multiple markers that would have overlapping time ranges, time ranges stack when needed. Tags used for primary tags of markers are each assigned a unique/consistent (when possible) color so that users can easily distinguish the different markers. Also existing behavior with tag name on hover popping up is maintained.

[WithoutPants]

Please include a proper description for this change.

[WithoutPants]

I am getting the following error when running with this change, after playing the video:

markers.ts:281 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'digest')
    at MarkersPlugin.computeBaseHue (markers.ts:281:44)
    at MarkersPlugin.findColors (markers.ts:263:34)
    at loadMarkers (ScenePlayer.tsx:718:23)
    at Player2.<anonymous> (ScenePlayer.tsx:745:12)

The crypto.subtle field is undefined.

[skier233]

I am getting the following error when running with this change, after playing the video:

markers.ts:281 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'digest')
    at MarkersPlugin.computeBaseHue (markers.ts:281:44)
    at MarkersPlugin.findColors (markers.ts:263:34)
    at loadMarkers (ScenePlayer.tsx:718:23)
    at Player2.<anonymous> (ScenePlayer.tsx:745:12)

The crypto.subtle field is undefined.

So this was originally using the Web Crypto API which worked in my testing. Though based on your error I did some research and it looks like in certain older browser that library may not exist. So, I swapped to using an explicitly defined crypto-js library instead for hashing here and tested on my end and it works as well.

[WithoutPants]

Thanks for this. I identified the following while testing:

• markers don't seem to be updated when changing the scene markers. While this is not a huge issue, it's guaranteed to be raised as a bug if we don't address it.
• I think you might need a minimum width on the marker range indicator. I would probably use the same width as marker points on the video scrubber.

[skier233]

Thanks for this. I identified the following while testing:

• markers don't seem to be updated when changing the scene markers. While this is not a huge issue, it's guaranteed to be raised as a bug if we don't address it.
• I think you might need a minimum width on the marker range indicator. I would probably use the same width as marker points on the video scrubber.

Fixed these two

[SyZeeGee]

I am not sure if this or the original implementation contain the bug, but navigating via next file (perhaps quickly, not sure) causes the markers to persevere and layer over one another (refreshing fixes of course)

Seems like a state clear / reset issue. Not a big deal really, just posting here.

[skier233]

I am not sure if this or the original implementation contain the bug, but navigating via next file (perhaps quickly, not sure) causes the markers to persevere and layer over one another (refreshing fixes of course)

Seems like a state clear / reset issue. Not a big deal really, just posting here.

How are you navigating to "next file" exactly? I tried reproducing what you mentioned by going to the next file in the queue or by opening up 2 tabs with 2 different videos but so far I wasn't able to reproduce on my branch from this PR.

[SyZeeGee]

So on checking again, it does seem easily reproducible here.

Load up a list of files (say with a filter: has marker, to make it easier to see.)

Click on first video of the list. It does not need to be queued files, just regular list navigation from video player although they probably behave similarly.

Click the "Skip To Next Video" button a couple of times (bottom left of player.)

I am not sure if it is related to the speed one clicks next but it might be. Try clicking it a few times quickly - I was able to reproducibly get the markers to not clear.

[skier233]

So on checking again, it does seem easily reproducible here.

Load up a list of files (say with a filter: has marker, to make it easier to see.)

Click on first video of the list. It does not need to be queued files, just regular list navigation from video player although they probably behave similarly.

Click the "Skip To Next Video" button a couple of times (bottom left of player.)

I am not sure if it is related to the speed one clicks next but it might be. Try clicking it a few times quickly - I was able to reproducibly get the markers to not clear.

I see. I wasn't able to reproduce this in my branch but I just tried on the latest dev build and I'm able to reproduce it there.

[skier233]

So on checking again, it does seem easily reproducible here.

Load up a list of files (say with a filter: has marker, to make it easier to see.)

Click on first video of the list. It does not need to be queued files, just regular list navigation from video player although they probably behave similarly.

Click the "Skip To Next Video" button a couple of times (bottom left of player.)

I am not sure if it is related to the speed one clicks next but it might be. Try clicking it a few times quickly - I was able to reproducibly get the markers to not clear.

I found the root issue. Its fixed in this PR: #5671