Add media embed step 1 (by URL)

[kathi-fletcher]

Plugin to embed multimedia

We want a multimedia embed tool, that will allow video and other embedded content in the editor.
We will do this in several stages. Each stage will be a separate issue. This issue will cover the
first stage.

Stages

1. Embed by URL (this issue)
2. Check that whether captions are available for the video and add metadata to the embed if so.
3. Add youtube search.
4. Support print alternates.

Goals

1. Make it possible to embed multimedia in OERPUB editor in a standard way.
2. Make accessible multimedia easy to discover (by including metadata).
3. Allow searching of youtube.
4. Create print alternates for multimedia.
5. Design a way to edit the print alternates. (Probably won't implement this.)

Mockups

editor-57.html Firefox only: To see the action

• Click "[>]" symbol in the toolbar

Screenshots

Variations from the mockup

This is the list of all of them. They are duplicated under each step as a checklist.

• Title of the dialog should say "Add video, slides or other media"
• Do NOT include "or Upload video"
• Search isn't in this phase so ignore that at the beginning.
• Not the right video? is the same as "Back" and can be ommitted if it is a hassle. Check
  this item if it has been ommitted.
• Change "Video Caption" to "Figure Caption" to distinguish from captioned video.
• Default text for caption coming soon.
• Add "Figure Title" above "Figure Caption" : default text should be the oEmbed "title"
• Beneath both inputs, add in gray italics "The title will show up above and
  the caption will show up below the media you are inserting."
• Change "Insert Video" to "Insert Now"
• Once inserted show both title and caption like with images.
• Once inserted, add mechanism to edit the title/caption/metadata like with images.

Format for the embed code

• Sample video html : Note that not all parts of the format are relevant at the first stage. In particular, the
  accessibility metadata and the alternates stuff won't be present for the very first version.

Implementation Resources

• oembed examples: Max found some jquery that will negotiate oEmbed for a bunch of different sites
• noembed Noembed also looks interesting. A service that does a bunch
  of oembed providers plus a bunch extra.

Step 1: First page of the dialog for the URL

• MOVED to OWN ISSUE Arrow shows in the doc where the media will go.

Variations from the mockup

• Title of the dialog should say "Add video, slides or other media"
• Do NOT include "or Upload video"
• Search isn't in this phase so ignore that at the beginning.
• Youtube works http://www.youtube.com/watch?v=01viXRa8Hqg
• Vimeo works http://vimeo.com/51075488
• Slideshare works http://www.slideshare.net/kathi-fletcher/real-remix-realized
• Flicker works http://www.flickr.com/photos/openpad/3327933534/
• Twitter works https://twitter.com/kefletcher/status/326810345677152256

Step 1 Error: oEmbed doesn't return good stuff

• If oEmbed doesn't return something useful, "We could not determine how to include the media.
  Please check the URL for the media and try again or cancel."

Step 2: Previewing the video and adding title/caption

Variations from the mockup

• Not the right video? is the same as "Back" and can be ommitted if it is a hassle. Check
  this item if it has been ommitted.
• Change "Video Caption" to "Figure Caption" to distinguish from captioned video.
• Default text for caption coming soon.
• Add "Figure Title" above "Figure Caption" : default text should be the oEmbed "title"
• Beneath both inputs, add in gray italics "The title will show up above and
  the caption will show up below the media you are inserting."
• Change "Insert Video" to "Insert Now"

Step 3: View in the doc

Variations from the mockup

• Once inserted show both title and caption like with images.
• Once inserted, add mechanism to edit the title/caption/metadata like with images.

[kathi-fletcher]

Moving the stuff left to the PR - and closing this.

• Z-index of the embedded stuff is wrong. It slides over the semantic block buttons, and the image dialog slides under the embedded content.
• Unfortunately, that camera really doesn't work. Use fa-play-circle-o instead. Make same size as other icons.
• Make the messages for the optional title and caption, show up only on hover.

Stuff that has been confirmed or is moving to separate issue

These seem to be missing:

• Make Figure Title and Figure Caption bold.
• Change "Copy image" to "Copy figure". Same for other three locations (hover over move handle, hover over x, hover over gear).
• Style title bold and center like for images.- [x] [Confirmed. Needs a "." at the end of the second sentence though. ] If oEmbed doesn't return something useful, "We could not determine how to include the media. Please check the URL for the media and try again or cancel." (KEF: I got nothing in the preview but things still proceeded.)
• MOVING to separate ticket for Izak. Arrow shows in the doc where the media will go. (This is lost for tables and images also. Something made this go away unfortunately.)
• Add a "." at the end of the error message's second sentence, when oEmbed doesn't return something useful, "We could not determine how to include the media. Please check the URL for the media and try again or cancel."
• Once inserted, add mechanism to edit the title/caption/metadata like with images.

New stuff.

• [Confirmed] Change "Video URL" to "URL"
• [Confirmed] Limit the size of the preview to something reasonable. (Note the size of the vimeo example.)
• [Confirmed, but for bold, see below] Format Figure title, Figure caption and their input boxes like they are done in the image insert. The are bold and the input boxes are beneath them and stretch the whole width. Having the caption input box be more lines that the title, is nice, however.
• Since we will have room now, put "(Shows up above the media)." beside "Figure title:". Keep in italics, add parens, and note the slightly different wording."
• NA Put "(Shows up below the media.)" beside "Figure caption".
• NA Buttons go off the bottom of the screen.
  
• Default text in the figure caption: Source: by
  Mr. Bees I noticed that you have those in there when the media is inserted, but there is no way to edit them. Of course the intention was always that these be editable in the content. That would be an alternative. We probably should discuss this one.
• NA The extra space just moved above the buttons.] Get rid of extra space beneath the buttons.