Support display of commenting annotations at specific timepoints

[elynema]

Is your feature request related to a problem? Please describe.
Manifests from AVAnnotate utilize annotations with motivation = commenting. We should be able to display these in Ramp. These manifests do have a PointSelector that point to a specific point in time in a media item.

Describe the solution you'd like
Potentially create a component in Ramp that will display commenting annotations (potentially other generic annotation types, as well, in the future). This could be a tab component like Transcripts. It would need to display the timepoint such that the user can select that timepoint to navigate in the media item and probably all these annotations should have some type of auto-scroll functionality so they can be displayed as the media item plays.

Annotations without a timepoint should also be supported (perhaps they would display first?)

Recommend checking Aviary functionality for ideas on UI design.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Here is an example annotation from this manifest: https://lgsump.github.io/maya-deren-example/meshes-of-the-afternoon/manifest.json

{
"@context": "http://www.w3.org/ns/anno.jsonld",
"id": "meshes-of-the-afternoon-canvas-1-shadow-annotation-2.json",
"type": "Annotation",
"motivation": [
"supplementing",
"commenting"
],
"body": {
"type": "TextualBody",
"value": "Shadow reaches for the flower, and it combines the shot of showing the shadow and the real hand coming together as she gets closer to the flower. However, the intention of making the shadow go for the flower first catches the eye.",
"format": "text/plain",
"purpose": "commenting"
},
"target": {
"source": {
"id": "https://lgsump.github.io/maya-deren-example/meshes-of-the-afternoon/canvas-1/canvas",
"type": "Canvas",
"partOf": [
{
"id": "https://lgsump.github.io/maya-deren-example/meshes-of-the-afternoon/manifest.json",
"type": "Manifest"
}
]
},
"selector": {
"type": "PointSelector",
"t": "30"
}
}
},
{
"@context": "http://www.w3.org/ns/anno.jsonld",
"id": "meshes-of-the-afternoon-canvas-1-shadow-annotation-3.json",
"type": "Annotation",
"motivation": [
"supplementing",
"commenting"
],
"body": {
"type": "TextualBody",
"value": "The camera focuses on the shadow of her walking, not the actual figure.",
"format": "text/plain",
"purpose": "commenting"
},
"target": {
"source": {
"id": "https://lgsump.github.io/maya-deren-example/meshes-of-the-afternoon/canvas-1/canvas",
"type": "Canvas",
"partOf": [
{
"id": "https://lgsump.github.io/maya-deren-example/meshes-of-the-afternoon/manifest.json",
"type": "Manifest"
}
]
},
"selector": {
"type": "PointSelector",
"t": "40"
}