의뢰/마켓서드파티 소식

미디어 임베드 애드온 0.4.0

윤삼
조회 수 659 추천 수 1 댓글 26
크게 작게 댓글로 가기
크게 작게 위로 아래로 댓글로 가기

오랜만에 업데이트합니다.

한동안 바빠서 작업을 못하고 있었고, 앞으로도 해야 할 게 더 있긴 한데, 기다리시는 분들도 있고 해서 일단 자료 정리해서 올렸습니다.

https://xetown.com/point_contents/1564278

 

자세한 업데이트 내용은 다음과 같습니다.

 

+ 업데이트 내용

 

  1. 주의
    - 0.4.0부터는 프로알라 에디터에 대한 지원이 포함되지 않습니다. 업로드된 파일에 프로알라 에디터 부분이 있기는 하지만, 그 기능은 0.3 버전과 다르지 않습니다.
     
  2. 설정
    - 링크 텍스트 옵션 지원 : 애드온 설정에서 디스플레이돼서 나오지만, 실제 기능은 이 다음 버전부터 활성화될 예정입니다.
    - 커스터마이징 CSS와 JS 지원 : 마찬가지로, 애드온 설정에서 디스플레이돼서 나오지만, 실제 기능은 이 다음 버전부터 활성화될 예정입니다.
     
  3. 전체적 개선
    - 몇몇 사이트의 임베딩 내용들은 (기존처럼 외부 프록시를 사용하지 않고) 애드온 내부의 php을 통해 가져오게 됩니다.
    - 코드 정리 : js의 스타일 중 비교적 고정적인 인라인 스타일은 css로 이관
    - 임베드 요소의 코드에 contendeditable="false" 속성과 속성값을 사용합니다. (라이믹스 2.0.12 버전부터 비관리자도 적용 가능)
    - 0.3의 임베드 서비스에서 썸네일 확충: AfreecaTV(vod), AudioClip, CodePen, IMDb, KakaoTV, NaverTV, Prezi(슬라이드), Twitch
    - 썸네일 이미지 로드시 (부정적 피드백이 많아) blur 필터 처리를 삭제
     
  4. 주요 서비스별 개선
    - 아프리카TV : 기존 모바일용 임베드 코드를 PC버전으로 임베드 (afreecaTV 측의 SSL 이슈 개선)

    - 페이스북 : 정규식 수정 (video 관련), 로딩 방식 변경으로 속도 절감, 본문 입력 화면 인터페이스 수정 (생략된 내용은 본문에서 확인 가능 메시지 출력)

    - 인스타그램 : 최소 넓이 제한 삭제, 동작 개선

    - 틱톡 : data 속성 제거, 짧은 주소 지원(짧은 주소 사용시 콘텐츠 획득 속도 살짝 지연), 입력 화면에서 iframe 하단에 border-radius 적용

    - 트위터 : 정규식 수정 (쿼리스트링 버림, moments 형식 url 제외), 비관리자 data 속성 사라지는 문제 보완 (default.js에서 강제 삽입), 에디터에 트위트 삽입할 때 높이를 더 단축, 트위트 로딩시 속도 경감, 본문 입력 화면 인터페이스 수정 (생략된 내용은 본문에서 확인 가능 메시지 출력)

    - 유튜브 : 16:9 및 4:3 등 화면비율 최적화, shorts 형식 영상 지원 (3:4 화면으로 출력)
     

  5. 신규서비스
    - Airbnb (숙소, 체험), Bandcamp, Code Sandbox, Ellentube, Flickr, Giphy, Gfycat, Imgru, 짤봇, MLB.com, Niconico(ニコニコ; 비디오, 라이브), Pinterest (핀, 보드, 프로필), Relive, Streamable, Tenor, Tumblr(포스트)
     

  6. 추가해야 할 보안 설정

    - iframe :

    vod.afreecatv.com
www.airbnb.co.kr
www.airbnb.com
bandcamp.com
codesandbox.io
share.ellentube.com
giphy.com
gfycat.com
imgur.com
jjalbot.com
www.relive.cc
streamable.com
tenor.com
embed.tumblr.com

    - class : 
    airbnb-embed
audioclip-embed
bandcamp-embed
codepen-embed
codesandbox-embed
fb_iframe_widget
flickr-embed
flickr-embed-video
giphy-embed
giphy-embed-photo
giphy-embed-video
gfycat-embed
gfycat-embed-group
gfycat-embed-single
imgur-embed
imgur-embed-iframe-pub
instagram-embed
jjalbot-embed
jsfiddle-embed
nico-embed-live
nico-embed-video
pinterest-embed
pinterest-pin
pinterest-board
pinterest-profile
reddit-embed
relive-embed
soundcloud-embed
spotify-embed
tenor-video-embed
tumblr-post
tumblr-embed
tumblr-embed-loaded
twitter-list
twitter-profile
twitter-tweet
youtube-shorts

 

 

위의 업데이트 내용을 꼭 확인해주세요!

윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
위로 아래로
댓글 26
  • profile
    바쁘신 와중에도 이렇게 업데이트를 해주시니 항상 감사할 따름입니다. ^^*
  • ?
    항상 감사합니다! :-)
  • ?

    미디어 임베드 애드온 잘 사용중입니다.

    감사합니다.

    근데 V 0.4.0로 업하고 나니 글작성이나 수정시 작성란이 나오질 않습니다.

    V 0.3 으로 내려가면 잘 나옵니다.

    1.jpg

     

    호스팅환경이며

    rhymix_version : 2.0.12 

    php : 7.4.12 (64-bit)

    server : Apache

  • ? profile
    서버 문제보다는 서드파티 충돌이 아닐까요?
  • profile profile

    안녕하세요 윤삼님 저도 같은 오류를 겪고있어 문의드립니다.

     

    캡처.PNG

     

    업데이트후 위와같은 스크립트 문제가 발생하며 에디터가 로드되지 않으며

     

    최상위 unexpected class 코드는

     

                    url = 'https:e.data.dataValue='<div class="'+iframe_wrapper+' airbnb-embed" contenteditable="false" style="'+style+'">'+'

     

    '+'</div>'+'<p>&nbsp;</p>'}

     

    에서 오류가 발생하는것으로 확인됩니다.

     

    그래서 js 파일에서 에어비엔비 코드 부분을 다음과 같이 주석처리했더니 정상작동합니다.

     

    // AIRBNB
/*
matches = paste.match(airbnbRegExp);
if ( matches && $.isNumeric(matches[2]) ) {
id = matches[2];
type = (matches[1] === 'rooms') ? 'home' : 'experience';
if ( type === 'home' ) {
style = 'width: 450px; height: 480px;';
} else if ( type === 'experience' ) {
style = 'width: 400px; height: 560px;';
}
url = 'https://www.airbnb.co.kr/embeddable/'+ type +'?id=' + id;

e.data.dataValue =
'<div class="'+ iframe_wrapper +' airbnb-embed" contenteditable="false" style="'+ style +'">' +
'<iframe src="'+ url +'" frameborder="0" scrolling="no" style="'+ style +'"></iframe>' +
'</div>' +
'<p> </p>';
}
*/

     

  • profile profile

    또한 틱톡 짧은주소 혹은 긴주소를 붙여넣으면 잠시만 기다려 주세요 메세지는 표시는 되나, 아래와 같은 메세지가 표시됩니다

     

    Uncaught TypeError: Cannot read property '1' of null
        at Object.success (a5c25750c5a155d65842f240282922b49734bf5f.js?20210626194437:370)
        at i (a5c25750c5a155d65842f240282922b49734bf5f.js?20210626194437:4)
        at Object.fireWith [as resolveWith] (a5c25750c5a155d65842f240282922b49734bf5f.js?20210626194437:4)
        at z (a5c25750c5a155d65842f240282922b49734bf5f.js?20210626194437:6)
        at XMLHttpRequest.<anonymous> (a5c25750c5a155d65842f240282922b49734bf5f.js?20210626194437:6)

     

     

  • profile profile

    혹시 문제를 해결하실때 도움이 될까봐 해당 코드도 같이 첨부해 드립니다!

     

    // TIKTOK
matches = paste.match(tiktokRegExp);
if ( matches && matches[1] ) {
e.stop();
if ( $.isNumeric(matches[1]) ) {
setTiktok(e, matches);
} else {
waitMediaEmbed();
$.get(cors + matches[0], {format: 'short'}, function(data) {
matches = data.match(tiktokRegExp);
if ( $.isNumeric(matches[1]) ) {
setTiktok(e, matches);
}
completeMediaEmbed();
});
}
}

     

    $.isNumeric(matches[1])  코드가 오류를 발생시켰습니다

  • profile ?
    저도 주석처리하니 잘 작동됩니다.
    감사합니다.
  • ? profile
    미이라님 혹시 틱톡 영상이 잘 삽입이 되시나요?
    저는 틱톡 오류가 나서 해당 부분을 해결을 못 하고있습니다 ㅠㅠ

    혹시
    https://vt.tiktok.com/ZSJDPD466/

    해당 주소를 에디터에 삽입시 무한 로딩 및 콘솔에 어떤 오류가 발생하시는지 알려주실 수 있으실까요? ㅠㅠ
  • profile profile

    연휴 때 짬을 내서 작업을 좀 해봤는데, 그동안 쌓인 이슈를 다 해결할 수 있을지 모르겠습니다ㅜㅜ

    틱톡에서 외부 접근 제한(cors)을 더욱 엄격하게 바꿨던 모양이더라구요.

    애드온 폴더에서 cors 우회하는 프록시 설정 php 파일이 있는데, 첨부파일로 바꿔보시겠어요?

    확장자를 phps에서 php로 바꿔서 덮어씌우고 사용해보시면 될 것 같습니다.

    Atachment
    첨부
  • profile

    위에서 보고드린 버그는

     

    var cors = './addons/'+ iframe_wrapper +'/'+ iframe_wrapper +'.cors.php?url=';

    에서

    var cors = 'https://홈페이지 주소/addons/media_embed/media_embed.cors.php?url=';

     

    으로 코드를 수정하니까 모두 해결되었습니다.

    혹시 서버 환경에 따라 문제가 있는걸까요..? ㅠ_ㅠ

  • profile profile

    틱톡의 경우 말씀이신 거죠...?

    var cors = request_uri +'addons/'+ iframe_wrapper +'/'+ iframe_wrapper +'.cors.php?url=';

    로 가는 게 낫지 않을까 싶습니다.

    혹시 라이믹스 설치를 루트가 아니라 별도의 폴더에 하신 건가요?
    저는 서버알못이라 자세한 건 잘 모르겠어요ㅜ

  • profile profile
    에어비앤비 JS코드로 인하여 에디터 전체 먹통현상, 그리고 틱톡 등 일부 서비스 로딩 불가 문제가 모두 해결되었습니다!

    var cors = './addons/'+ iframe_wrapper +'/'+ iframe_wrapper +'.cors.php?url=';

    에서

    var cors = 'https://홈페이지 주소/addons/media_embed/media_embed.cors.php?url=';
    요렇게 수정하면 모두 해결되는것 보니까 php파일을 로드하지 못해서 발생하는 문제 같습니다.

    현재 저희는 루트에 라이믹스가 설치되어 있긴 합니다!
  • profile profile
    그럼
    var cors = request_uri +'addons/'+ iframe_wrapper +'/'+ iframe_wrapper +'.cors.php?url=';
    으로 테스트 부탁드릴게요.

    범용이어야 하다보니 홈페이지 주소 넣을 때 request_uri 같은 전역변수를 사용하는 게 좋을 것 같거든요.
  • profile profile
    네 방금 request_url 으로 변경후 다시 테스트를 했고, 정상 작동 확인했습니다!

    (+) 또한 서버에 JS캐싱이 설정되어 있을 경우에는 이전 0.3버전의 _ckeditor.js (캐싱되어있는 버전)을 불러오는 문제로인하여
    회원들이 일일히 캐시삭제를 해주지 않으면 정상 작동하지 않는 문제가 있어서

    저는 일단 addon.php 의 JS 로드 코드 부분에 타임플래그를 줌으로서 해결하였는데요

    Context::loadFile(__DIR__ . '/js/_' . $editor_config->comment_editor_skin . '.js?21062608');

    이문제도 혹시 참고하시면 좋을것 같아 보고드립니다!

    항상 감사드립니다
  • profile ?
    저 같은 경우는 AIRBNB 주석 처리하지 않고는 정상작동을 하지 않네요.
    request_uri 은 있어도 없어도 잘 작동합니다.
    그리고 틱톡은 해당주소를 삽입시 그냥 주소만 출력되고 임베드되지 않네요.
    링크복사 삽입시는 잘 작동합니다.(당연한 건가^.^)
  • ? profile
    넵 그 AIRBNB문제가 php로드 문제때문에 발생하는 오류라서요...!

    var cors = './addons/'+ iframe_wrapper +'/'+ iframe_wrapper +'.cors.php?url=';

    코드를

    var cors = request_uri +'addons/'+ iframe_wrapper +'/'+ iframe_wrapper +'.cors.php?url=';

    으로 변경하시면 에어비앤비 코드부분 주석을 하지 않아도 모두 정상 작동 하실거에요!
  • profile profile
    js 파일 불러오는 곳마다 타임플래그 처리를 해야겠네요.
    꿀 정보 감사합니다!!!
  • profile ?
    var cors = request_uri +'addons/'+ iframe_wrapper +'/'+ iframe_wrapper +'.cors.php?url=';
    으로 수정해도 에어비앤비 코드부분 주석처리 하지 않으면 정상 작동하지 않습니다.
  • profile
    안녕하세요 윤삼님! 추가적으로 궁금한 점이 있어서 문의드립니다.

    윤삼님의 샘플 사이트에서도 해당 증상 확인하였는데요, 틱톡의 경우 PC에서는 동영상 재생이 되지만 모바일 디바이스에서는 동영상 재생이 안되는 문제가 확인됩니다(네트워크 상태가 원활할때도 재생 안됨)

    혹시 저만 그런건지요? ㅠㅠ
  • profile profile
    진짜 그러네요ㅜ
    틱톡 iframe 서비스가 모바일에선 다른 방식으로 작동하는 모양인데, 제가 로딩을 최적화하는 과정에서 PC기준으로 작업을 하다보니 뭔가 빼먹었던 모양입니다.
    빠르면 이번주 후반부나 다음주쯤에 버그 수정을 시도해볼 수 있을 것 같습니다ㅠ
  • profile profile
    아 ㅠㅠ 확인해주셔서 감사합니다!!
    아무래도 모바일 디바이스는 네트워크때문에 저만 로딩이 안되는줄 알고 열심히 또 수정해보고 있었네요

    항상 감사드립니다!
  • profile profile
    페이스북과 아프리카가 이런 식으로 모바일 접속 방식이 달라서 구현에 애로가 좀 있었는데, 틱톡도 그런 식인가봐요. 암튼 체크해보도록 하겠습니다.
  • profile
    항상 감사드립니다 여유로울때 업데이트하겠습니다!
  • profile

    미디어 임베드 애드온을 깔았는데 적용이 안돼서 확인해보니까 [본문내 이미지 조절 애드온]과 충돌하는 듯 합니다. 이 애드온을 끄니까 잘 나오네요 만들어주셔서 감사합니다 ^^

  • profile
    최고이십니다.