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.

Done Looks Like

• Parse commenting annotations similar to the way Ramp is parsing highlighting annotations for Avalon playlist manifests with additional properties to include information about tags relevant to the annotation
• Display these annotations in the UI as seen in the sample mockups in Add display of annotations to Markers component (UI) #649

Annotations need to be ordered as Ramp parses them from the Manifest, because they are not in chronological order in the Manifest.

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"
}

[joncameron]

Commenting annotations could be a good starting point for implementation; a new component for rendering annotations could start there and we could continue adding support for additional annotations as needed.

[Dananji]

Aviary displays these commenting annotations as timepoints in the 'Annotations' tab. Each value is associated with a single time point extracted from the point selector value in the target of the Annotation.

Example manifest: https://tanyaclement.github.io/shoes/manifests/manifest.json

{
    "@context": "http://www.w3.org/ns/anno.jsonld",
    "type": "Annotation",
    "id": "https://tanyaclement.github.io/shoes/shoes_1916_editing/canvas-2/canvas/page1",
    "motivation": [
      "commenting",
      "tagging"
    ],
    "body": [
      {
        "type": "TextualBody",
        "value": "Here we see a dissolve used to indicate that this is a distance in time, not necessarily an oddity of mental faculty; however, it does seem that because it is foreshadowing a place, that this could be an effect of memory rather than complete foreshadowing. ",
        "format": "text/plain",
        "motivation": "commenting"
      },
      {
        "type": "TextualBody",
        "value": "Editing:Dissolve",
        "format": "text/plain",
        "purpose": "tagging",
        "motivation": "tagging"
      }
    ],
    "target": {
      "source": {
        "id": "https://tanyaclement.github.io/shoes/shoes_1916_editing/canvas-2/canvas",
        "type": "Canvas",
        "partOf": [
          {
            "id": "https://tanyaclement.github.io/shoes/manifests.json",
            "type": "Manifest"
          }
        ]
      },
      "selector": {
        "type": "PointSelector",
        "t": "45"
      }
    }
  },

The above annotation is displayed in Aviary and AVAnnotate as follows;

Aviary	AVAnnotate

Suggested solution:

Parse commenting annotations similar to the way Ramp is parsing highlighting annotations for Avalon playlist manifests with additional properties to include information about tags relevant to the annotation.
Display these annotations in the UI as seen in the sample mockups in #649

Annotations need to be ordered as Ramp parses them from the Manifest, because they are not in chronological order in the Manifest.