Soundcloud와 YouTube 원박스 썸네일 문제

우리는 메인 페이지에서 타일(tiles)을 사용하여 Topic List Previews (legacy) 플러그인을 사용하고 있습니다. 어제 TPL과 무관한 이유로 인스턴스를 재구축해야 했습니다. Discourse 코어에서 섬네일 백엔드가 변경된다는 사실을 알고 있었고, 업그레이드 시 섬네일 문제가 발생할 수 있다는 점도 인지하고 있었습니다. 그럼에도 불구하고 진행해야만 했습니다. :slight_smile:

어쨌든, 재구축(포스트그레SQL 업그레이드 포함) 이후 원박스(oneboxes)에서 가져온 모든 섬네일이 사라졌습니다. 문제는 아니었습니다. 모든 게시물을 다시 생성(rebake)했고, 대부분의 섬네일이 다시 나타났습니다(좋았습니다) 하지만 모두는 아니었습니다(흥미롭지만 나쁜 상황). 혹시 모르니 몇 번 더 다시 생성해 보았지만, 주제 페이지에서는 원박스가 정상적으로 렌더링되더라도 메인 페이지에서 섬네일이 표시되지 않는 게시물이 여전히 남아 있습니다.

현재까지 발견된 두 가지 패턴:

  • Soundcloud 원박스는 정상적으로 렌더링되지만, 섬네일이 체계적으로 누락됩니다(„섬네일 선택

토의한 대로, 썸네일 생성 로직이 이제 코어에 내장되었습니다.

TLP가 이전에 수행해야 했던 작업은 대부분 더 이상 필요하지 않습니다.

참고로, 포함을 위한 코어의 기준은 다음과 같습니다:

  def extract_images_for_post
    # src 속성이 있는 모든 이미지
    @doc.css("img[src]") -
    # 이모지 제외
    @doc.css("img.emoji") -
    # 인용문 안의 이미지 제외
    @doc.css(".quote img") -
    # 원박스 사이트 아이콘 제외
    @doc.css("img.site-icon") -
    # 원박스 아바타 제외
    @doc.css("img.onebox-avatar") -
    # 작은 원박스 이미지 제외 (큰 이미지는 .aspect-image-full-size)
    @doc.css(".onebox .aspect-image img")
  end

출처: discourse/lib/cooked_post_processor.rb at main · discourse/discourse · GitHub

TLP는 이를 약간 수정하지만, 이는 단순히 기준을 완화하기 위한 것입니다. 가능하다면 이 오버라이드를 완전히 제거하고 싶습니다:

  def extract_images_for_post
    # src 속성이 있는 모든 이미지
    @doc.css("img[src]") -
    # 이모지 제외
    @doc.css("img.emoji") -
    # 인용문 안의 이미지 제외
    @doc.css(".quote img") -
    # 원박스 사이트 아이콘 제외
    @doc.css("img.site-icon") -
    # 원박스 아바타 제외
    @doc.css("img.onebox-avatar") # Discourse Core보다 더 넓은 기준
  end

출처: https://github.com/paviliondev/discourse-topic-previews/blob/master/lib/cooked_post_processor_edits.rb

보시다시피, 코어에서 정의한 작은 원박스 이미지를 허용함으로써 제외 항목의 수를 줄이고 있습니다.

이를 TLP에서 유지보수하는 대신, 사용 사례 전반에 걸쳐 합의와 일관성을 도출하는 것이 좋겠습니다. 그래야 플러그인에서 이를 유지보수할 필요가 전혀 없게 됩니다.

이 사항은 @Arkshine 님에게도 관련이 있습니다.

감사합니다 @merefield, 정말 유용한 정보네요.

이전 Soundcloud 원박스(Onebox) 섬네일 처리 방식이 훌륭한 결과를 제공했었는데, 음악에 초점을 맞춘 우리 사이트에는 이번 회귀 문제가 정말 신경 쓰입니다. :slight_smile:

여기저기 유튜브 섬네일이 누락되는 것은 괜찮습니다.

이 기능이 어떻게 발전할지 궁금합니다. 많은 요구사항과 기대치 사이에서 가장 좋은 공통점을 찾기 위해 Discourse 코어에서 섬네일 처리를 세밀하게 조정하는 것이 목표라는 점에 동의합니다. 이 작업에 참여해 주시는 모든 분들께 감사드립니다.

한눈에 봐도 그것은 YouTube 원박스가 아닌 것 같습니다. 누군가 게시글에 YouTube 임베딩(raw) 코드를 사용한 것으로 의심됩니다. 원박스로 변환하면 썸네일이 정상적으로 작동할 것입니다.

이 기능이 이전의 TLP 플러그인에서는 정상 작동했습니까? Soundcloud 원박스는 iframe이므로, 선택 기준을 업데이트하더라도 어떻게 썸네일 이미지를 가져올 수 있을지 이해하기 어렵습니다. @merefield TLP에 Soundcloud에 특화된 로직이 어딘가에 있었나요?

네, 원박스(oneboxes) 주위에 일부 커스텀 로직이 있었지만, 이것이 SoundCloud만을 위한 것은 아니었습니다:

    if @has_oneboxes
      cooked = PrettyText.cook(@post.raw)

      if img
        ## 이미지를 식별하기 위해 더 구체적인 것이 필요합니다
        img_id = img
        src = img.attribute("src").to_s
        img_id = src.split('/').last.split('.').first if src
      end

      prior_oneboxes = []
      Oneboxer.each_onebox_link(cooked) do |url, element|
        if !img || (img && cooked.index(element).to_i < cooked.index(img_id).to_i)
          html = Nokogiri::HTML::fragment(Oneboxer.cached_preview(url))
          prior_oneboxes = html.css('img')
        end
      end

      if prior_oneboxes.any?
        prior_oneboxes = prior_oneboxes.reject do |html|
          class_str = html.attribute('class').to_s
          class_str.include?('site-icon') || class_str.include?('avatar')
        end

        if prior_oneboxes.any? && validate_image_for_previews(prior_oneboxes.first)
          img = prior_oneboxes.first
        end
      end
   end

이 부분은 핵심 로직에 위임하도록 제거되었습니다.

아, 소스를 확인해 보라는 생각을 못 했네요. :slight_smile:

원박스였는데 URL에 추가 인자가 하나 더 있었습니다:

https://www.youtube.com/watch?v=4T6J-K8_yk4&list=PLluPQLh1xzlL2agiCCQFClcsutli90Qnz

단순한 URL로 변경했습니다:

https://www.youtube.com/watch?v=4T6J-K8_yk4

즉각적인 변화는 없었습니다. HTML을 다시 빌드해도 바로 바뀌지 않았지만, Sidekiq을 확인해 보니 관련 작업 하나가 예약되어 있었습니다. 4분간 인내심을 갖고 기다린 후, 이제 썸네일이 사용 가능해졌고 메인 페이지에 표시되고 있습니다. 일요일에 이렇게 빠르게 답장해 주셔서 감사합니다, @david님!

그렇습니다. 불행히도 스크린샷을 남겨 놓지 않았습니다. 메인 페이지에서는 원박스 왼쪽에 이미지가 표시되었습니다.

흥미롭네요. 다음 주에 이 부분을 확인해 볼게요. 추가 인자가 있어도 여전히 작동할 것 같아요.

아, 알겠네요. Onebox 미리보기 HTML을 가져와서 거기서 썸네일을 추출하는 거군요. 사운드클라우드의 경우 썸네일을 제공하네요 :+1:

네, 이건 @angus의 훌륭한 해킹 기법을 기반으로 한 것입니다 :smiley: 책임은 지지 않습니다! 그래도 잘 작동하긴 합니다.

업데이트: 사실 거짓말을 했네요. 제 손도 많이 댔습니다! 이 코드 중 일부를 2015년에 작성했는데, 너무 오래되어서 잊고 있었습니다!

https://github.com/paviliondev/discourse-topic-previews/commit/d2bdde786506acd4de9ccfde8bd4ef2dc68a1022

이 둘 다 까다로운 문제입니다. 당분간 현재 동작 방식을 그대로 유지할 것 같습니다. 추후 일부 개선 사항을 추가할 수 있을 것입니다. 진행 상황을 추적하기 위해 Contribute > Feature 토픽을 몇 개 생성했습니다.

YouTube 관련 차이에 대해서는 다음을 참고하세요:

Soundcloud 문제는 다음을 참고하세요:

저도 https://youtu.be/ 형식의 YouTube 링크에서 같은 문제가 있었습니다. https://www.youtube.com/watch?v= 형식으로 변경한 뒤 다시 잘 작동했습니다.

이상하네요. 해당 YouTube 링크를 여기에 공유해 주시겠어요? 어떤 형식이든 작동해야 합니다.

다시 렌더링만 했어도 같은 결과를 얻을 수 있었을지도 모릅니다.
하지만 버전에 따라 여전히 남아 있는 것 같습니다:

링크를 이전 것으로 되돌려 놓았더니, 이제 모든 것이 깔끔하게 렌더링됩니다. beta6 업데이트 이후에 발생한 렌더링 오류 때문이었을 것 같습니다.