Composer preview side shows the control buttons under the uploaded videos

Don · August 11, 2024, 9:20pm

Hello

These buttons are not active but appears under videos too.

Screenshot 2024-08-11 at 23.14.36

Thanks

awesomerobot · August 13, 2024, 5:38pm

I can’t reproduce the issue, is this a specific filetype perhaps? I’ve tried MP4 and WebM with no luck

Don · August 13, 2024, 6:03pm

Hello Here is a sample video. It’s an MP4 video. I still see the buttons there…

Oh, Now I tried to upload a longer video and it seems it’s only appears to the short few sec one…

Don · August 13, 2024, 6:19pm

Hmm now just tried on more videos. Screen records etc. and seems only that video affects now on my side, strange. Probably it’s a result of some converting. But even then it’s not normal.

awesomerobot · August 13, 2024, 6:42pm

ah ha, this is kind of silly… but it’s because the video file name contains dimensions, this gets picked up by a function that is meant to append metadata to an image:

github.com

discourse/discourse/blob/9cadc402e60e60298eb45910cc4293e6e198eb71/app/assets/javascripts/discourse-markdown-it/src/features/image-controls.js#L37


      
          }
          
          function isUpload(token) {
            return token.content.includes("upload://");
          }
          
          function hasMetadata(token) {
            return token.content.match(/(\d{1,4}x\d{1,4})/);
          }
          
          function appendMetaData(index, token) {
            const sizePart = token.content
              .split("|")
              .find((x) => x.match(/\d{1,4}x\d{1,4}(,\s*\d{1,3}%)?/));
            let selectedScale =
              sizePart && sizePart.split(",").pop().trim().replace("%", "");
          
            const overwriteScale = !SCALES.find((scale) => scale === selectedScale);
            if (overwriteScale) {
              selectedScale = "100";
            }

and this metadata is used to determine if the controls should appear

Don · August 13, 2024, 6:50pm

Indeed Nice catch, I would never have realized that

![SampleVideo1mb|video](upload://7cZrskeouBoDXn3EruQR8mFS3gN.mp4)

![SampleVideo_1280x720_1mb|video](upload://7cZrskeouBoDXn3EruQR8mFS3gN.mp4)

awesomerobot · August 13, 2024, 7:15pm

I’ve got a PR ready that will fix this soon:

github.com/discourse/discourse

UX: do not check for dimensions in video filename

discourse:main ← discourse:ux-video-controls

opened 07:14PM - 13 Aug 24 UTC

awesomerobot

+10 -1

When adding a video/image/audio to a post, we check the token content for dimens…ions. If dimensions are found, we assume the content can be resized and give it image controls in the composer preview. The problem is that we check the entire token, including filename, for dimensions. This means if a video has dimensions in its filename, we show broken controls: ![image](https://github.com/user-attachments/assets/93f3bbc9-1c0f-4ac3-b541-aab854624824) This PR updates the `hasMetadata` function so it checks the area dedicated to dimensions specifically, which comes after the `|` in markdown. Now images get the controls, and videos with dimensions in their filename do not: ![image](https://github.com/user-attachments/assets/92d64c52-f4d5-4ecc-9567-c0737f724ae7)

Topic		Replies	Views
Make it more obvious an image is resizable when uploading an image UX	10	995	October 7, 2024
Weird...videos changed in my topic Site feedback	4	123	August 8, 2024
Uploading of video file fails due to JS error Bug uploads , fixed	19	211	August 27, 2024
Expand composer button on mobile UX mobile	2	319	February 23, 2024
Help us test the restyled composer UX feedback	32	5581	May 23, 2018

Composer preview side shows the control buttons under the uploaded videos

Related topics