Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-56938

Images are cropped in new messaging UI, videos are small

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      Enable url-to-link and multimedia filter (urltolink first)
      Open messaging window and try to send somebody a url to an image e.g.

      https://www.ancestry.com/wiki/images/archive/a/a9/20100708215937!Example.jpg

      Do the same with a link to a video http://techslides.com/demos/sample-videos/small.mp4

      Check the display in boost and clean themes and verify the video and image are shown at a reasonable size in the messaging UI (not overflowing, or too tiny). Resize the window down and verify they scale down to the available space.

      Show
      Enable url-to-link and multimedia filter (urltolink first) Open messaging window and try to send somebody a url to an image e.g. https://www.ancestry.com/wiki/images/archive/a/a9/20100708215937!Example.jpg Do the same with a link to a video http://techslides.com/demos/sample-videos/small.mp4 Check the display in boost and clean themes and verify the video and image are shown at a reasonable size in the messaging UI (not overflowing, or too tiny). Resize the window down and verify they scale down to the available space.
    • Affected Branches:
      MOODLE_32_STABLE
    • Fixed Branches:
      MOODLE_32_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-56938-master
    • Pull Master Diff URL:

      Description

      Something in new messaging interface CSS tries to squish the contents of the messages. It is especially obvious when you try to send somebody an image or a video. Video.js player in Moodle uses "fluid" layout where videos are automatically resized to 100% of their container width to ensure responsiveness (there is also max-width specified so they don't get too wide).

      Probably the easiest way to see what's going on is to try to send somebody an image (I used https://www.ancestry.com/wiki/images/archive/a/a9/20100708215937!Example.jpg ).

      1. Enable url-to-link and multimedia filter (urltolink first)
      2. Open messaging window and try to send somebody a url to an image or a video file, for example https://www.ancestry.com/wiki/images/archive/a/a9/20100708215937!Example.jpg or http://techslides.com/demos/sample-videos/small.mp4
      3. try to do the same but with the text in the same message

        Attachments

        1. imageinmessage.png
          imageinmessage.png
          168 kB
        2. messagingmoodle31.png
          messagingmoodle31.png
          244 kB
        3. screenshot-1.png
          screenshot-1.png
          289 kB
        4. Screen Shot 2016-11-22 at 10.01.20.png
          Screen Shot 2016-11-22 at 10.01.20.png
          502 kB
        5. Screen Shot 2016-11-22 at 10.01.23.png
          Screen Shot 2016-11-22 at 10.01.23.png
          502 kB
        6. Screen Shot 2016-11-22 at 10.04.10.png
          Screen Shot 2016-11-22 at 10.04.10.png
          252 kB
        7. videojsmesage.png
          videojsmesage.png
          35 kB

          Issue Links

          Discovered while testing

          Bug - A problem which impairs or prevents Moodle from functioning correctly. MDL-56899 Videos in messaging and chat give an error

          • Major - Major loss of function, incorrect output
          • Closed
          has been marked as being related by

          Bug - A problem which impairs or prevents Moodle from functioning correctly. MDL-57109 Messages panel does not wait for filters to process before scrolling down

          • Major - Major loss of function, incorrect output
          • Open

          Bug - A problem which impairs or prevents Moodle from functioning correctly. MDL-56825 messaging: responsiveness of messaging UI impacted by boost pop-out menu

          • Major - Major loss of function, incorrect output
          • Closed

            Activity

              People

              Assignee:
              damyon Damyon Wiese
              Reporter:
              marina Marina Glancy
              Peer reviewer:
              Marina Glancy
              Integrator:
              David Monllaó
              Tester:
              cameron1729
              Participants:
              Component watchers:
              Amy Groshek, David Scotson, Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Sara Arjona (@sarjona), Víctor Déniz Falcón, Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Sara Arjona (@sarjona), Víctor Déniz Falcón, Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Sara Arjona (@sarjona), Víctor Déniz Falcón
              Votes:
              0 Vote for this issue
              Watchers:
              5 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                5/Dec/16