Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add UI for Markers with end seconds on scene player. #5633

Open
wants to merge 22 commits into
base: develop
Choose a base branch
from

Conversation

skier233
Copy link
Contributor

@skier233 skier233 commented Jan 29, 2025

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.

image

@WithoutPants
Copy link
Collaborator

Please include a proper description for this change.

@WithoutPants
Copy link
Collaborator

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.

@WithoutPants WithoutPants added this to the Version 0.28.0 milestone Feb 7, 2025
@skier233
Copy link
Contributor Author

skier233 commented Feb 7, 2025

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.

Copy link
Collaborator

@WithoutPants WithoutPants left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

graphql/schema/types/config.graphql Outdated Show resolved Hide resolved
@skier233
Copy link
Contributor Author

skier233 commented Feb 11, 2025

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

@neru2132

This comment was marked as outdated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants