컴포저 미리보기 측면에 업로드된 영상 아래에 컨트롤 버튼이 표시됩니다

Don · 8월 11, 2024, 9:20오후

안녕하세요

이 버튼들은 비활성 상태이지만, 비디오 아래에도 표시됩니다.

감사합니다

awesomerobot · 8월 13, 2024, 5:38오후

문제를 재현할 수 없는데, 혹시 특정 파일 형식인가요? MP4와 WebM을 시도해 봤지만 실패했습니다

Don · 8월 13, 2024, 6:03오후

안녕하세요 샘플 비디오를 올립니다. MP4 형식입니다. 그런데 여전히 버튼이 보인다고요…

아, 방금 더 긴 비디오를 업로드해 봤는데, 짧은 몇 초짜리 것만 표시되는 것 같습니다…

Don · 8월 13, 2024, 6:19오후

음, 방금 다른 영상 몇 개와 스크린 녹화 등도 시도해 봤는데, 제 쪽에서는 그 영상만 영향을 받는 것 같네요. 이상하네요. 아마 어떤 변환 과정의 결과일 수도 있겠지만, 그래도 정상적인 현상은 아닌 것 같습니다.

awesomerobot · 8월 13, 2024, 6:42오후

아하, 이건 좀 웃긴 일이네요… 하지만 비디오 파일명에 해상도 정보가 포함되어 있어서, 이미지에 메타데이터를 추가하려는 함수에서 이 정보가 인식되고 있기 때문입니다:

github.com/discourse/discourse

app/assets/javascripts/discourse-markdown-it/src/features/image-controls.js

9cadc402e


      
          }
          
          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";
            }

그리고 이 메타데이터는 컨트롤이 표시되어야 하는지 여부를 결정하는 데 사용됩니다.

Don · 8월 13, 2024, 6:50오후

정말이네요 좋은 지적이에요, 저는 절대 알아차리지 못했을 거예요

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

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

awesomerobot · 8월 13, 2024, 7:15오후

곧 이 문제를 수정할 PR을 준비했습니다:

github.com/discourse/discourse

UX: do not check for dimensions in video filename (#28349)

main ← ux-video-controls

merged 03:59PM - 15 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)

글		댓글	조회수
Make it more obvious an image is resizable when uploading an image UX	10	1146	10월 7, 2024
100% 75% 50% next to images in preview window UX	2	470	3월 22, 2024
Is there any way to check I chose the correct video without publishing the topic? Product Support	1	345	5월 29, 2024
Insert Video icon missing from composer UX completed , insert-video	6	242	7월 24, 2020
Uploading of video file fails due to JS error Bug uploads , fixed	18	784	8월 24, 2024

컴포저 미리보기 측면에 업로드된 영상 아래에 컨트롤 버튼이 표시됩니다

Related topics