CaptionAider: Event Track Editor Non-Modal Dialog Box

[JKJensen]

View an interactive design here: https://invis.io/DX7HN0HZB#/164135093_Captionaider-WithMetadataCues (Click anywhere to see blue areas that are clickable)

In Captionaider a user can select a track called "Metadata," and create green cues. When users click on an event track cue, a modal should pop up. The model can be grabbed and moved around the screen freely.

Users can select events similar to the "select language" dialogue box. (But without the search, or the scrolling)

Users can click on an event and it will selected.

And users can select multiple events.

Pause, Mute and Blank do not show any other data in the modal box besides the tiny "tags" next to the "select actions" button.

However, Blur, Volume and Speed populate the modal box with sliders and precision input boxes.

The input boxes can by typed into and the sliders will adjust accordingly (and vice versa).

Th minimum blur (in pixels) is 0 and the maximum is 100. The minimum volume is 0 and the maximum is 100. The minimum speed is 0 and the maximum is 2.

In Captionaider the Cue will display fontawesome icons like the following:

Use these FontAwesome logos to populate the cues: Pause: http://fontawesome.io/icon/pause/

Mute: http://fontawesome.io/icon/bell-slash-o/

Blank: http://fontawesome.io/icon/eye-slash/

Blur: http://fontawesome.io/icon/low-vision/

Volume: http://fontawesome.io/icon/volume-down/

Speed: http://fontawesome.io/icon/hourglass-end/

Note that the modal box does not contain a save button. The events are saved automatically as they are selected. Users that want to get ride of an event will have to click on the small "x" on each tagged event.

[JKJensen]

The design of this feature has been heavily revised. Feedback would be appreciated.