(Floe) Video Player WordPress Plugin Early Wireframe

1. Default empty plugin UI.
2. Each interactive component brings up a context menu when activated.
Selecting a menu option will launch a dialog seen below.

1. Default empty view. Done button is disabled.
2. Use pastes link. "Required" indicator appears once link is pasted.
3. Once link is pasted, a preview is generated.
4. Preview can be played. Title and duration appears below the thumbnail.
5. Use begins typing a language. A list of suggestions appear below. "Required" indicator disappears when not empty. Done button enables.
6. Suggestions narrow as the user continues typing. Use can select an option to finish.
7. Done entering language.
8. User selects Done.
9. The Edit UI. Same as "Add" but with a title change.
Notes

• If user specifies language before pasting youtube link, "Required" appears on the Link field.
• Done button is disabled until both fields are not empty.
• Cancel is always enabled.
  Todo:
• Error case where URL is not valid.

1. Default / empty view.
2. User selects browse to choose a file.
3. System file browse dialog appears.
4. Filename appears in the Upload field. A checkmark and bold text indicate that this is what will be added. "Required" indicators appear on Title and Language fields.
5. User fills out title and begins filling in language. Language field offers suggestions.
6. Done filling out fields.
7. "Done" is selected.
8. Progress is indicated: checkmark turns into a spinner, and a progress bar moves up the upload field. All other form elements dim / disable.
9. Error case. The dialog expands downward to display the error message. Selecting a new file via browse will shrink the dialog back to normal size.

1. Default view with some existing videos.
2. Video selected. Checkmark and bold text indicate the selection. "Required" indicators appear on empty fields.
3. User fills in Title and Language. Language field offers suggestions.
4. Selects "Done".
5. Scenario where the user has selected a video already but has also specified a file to upload. The file will not upload in this case since it is not selected.
6. Scenario where the user has existing videos and has also specified a file to upload. The file will be uploaded since it is selected.

1. Adding Amara transcript behaves similarly to adding a youtube video.
2. Adding JSON Transcript behaves similarly to adding a VTT caption.

1. Default view.
2. Link is pasted in. "Required" indicator appears on the next empty field.
3. User filling in the language and there is an auto-complete suggestion.
4. Done.
5. The Edit UI is the same as the Add UI with the exception of the title being different.