Details

      Description

      User Experience

      Flyout changes for adding video

      The flyout has two states: Default and Video URL state.

      1. Default state now has a toolbar with 4 actions: add an image, add a video, add a table and add a line.
      2. Video URL state has an input box and the confirm button.

      Interaction

      • Clicking the video icon, the toolbar flyout changes to Video URL state. 
      • The confirm button is disabled when the input box is empty.
      • The confirm button is enabled when the input box has content.
      • Pressing the ESC key while the Video URL State is active changes the Flyout to Default State.
      • Once the confirm button is clicked, the video is inserted.

      • Hovering the video box while it's unselected, the mouse cursor changes to pointer style.

      Select

      • The video box can be selected clicking on it.
      • The video box can be unselected clicking / losing focus on other UI component.

      Validation

      The URL must be a correct URL. If a not valid URL is added an error message appears with the following text:

      • "Please add a valid URL" 

      Currently, we only support Youtube, Facebook Video, Vimeo and Twitch videos. If a video of other platforms is added an error message appears with the following text:

      • "Sorry, this platform is not supported"

      Note: The short length is due to the máx. width (360px) established by Lexicon v2.0. A tooltip could add more information "Please try again with a Youtube, Facebook, Vimeo or Twitch video"

      When the URL is confirmed by the user, we are going to send a request to the platform owner. If something wrong happens during that time an error message appears with the following text:

      • "Request not processed. Please try again"

      All the errors are shown as toast messages, check the alert section for lexicon v2.0

      Design

      Selected State

      • In selected state the video box has an overlay (#000000 alpha=50%) with a center-center message.
      • The message is made up with a white (#FFFFFF) "icon-info-circle" and a 16px font-size text.  
      • The content of the message: "Video playback is disabled during edition mode"

      Alloy Editor

      • Use "lexicon-video-icon" icon for "Add video" button action

      Alloy Editor in Video URL state

      • The input box has a hint with the following message: "Paste the video link..."

        Attachments

        1. adding_video.gif
          adding_video.gif
          136 kB
        2. Error 1.png
          Error 1.png
          4 kB
        3. Error 2.png
          Error 2.png
          6 kB
        4. Error 3.png
          Error 3.png
          6 kB
        5. Twitch.png
          Twitch.png
          252 kB
        6. Vimeo.png
          Vimeo.png
          301 kB
        7. Youtube.png
          Youtube.png
          266 kB

          Activity

            People

            • Assignee:
              jose.balsas Chema Balsas
              Reporter:
              jose.balsas Chema Balsas
              Recent user:
              Jason Pince
              Participants of an Issue:
            • Votes:
              1 Vote for this issue
              Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Packages

                Version Package
                7.1.X
                Master