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.


      • 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.


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


      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


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


        1. 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
          252 kB
        6. Vimeo.png
          301 kB
        7. Youtube.png
          266 kB



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


              • Created:


                Version Package