미디어 임베드
2021.04.25 00:42

작업 노트 - 0.1.1 작업 중

조회 수 203 추천 수 0 댓글 0

 

0.1.1 작업 내역

  • [전체] 에디터 로드를 비동기식으로 처리하여 붙여넣기 동작의 실효 타이밍을 앞당기고 프리뷰 카드나 미디어 임베드 출력이 누락되는 일이 없도록 함

  • [전체] 모바일에서 input 이벤트(paste의 대체)시 커서 위치를 찾을 때 requestAnimationFrame 함수를 써서 브라우저 렌더링 타이밍에 맞춤

  • [전체] 영어 이외 문자열이 포함된 url 때문에 적용했던 decodeURIComponent 함수를 decodeURI로 바꾸고 그 시점을 '링크 텍스트 꾸미기' 적용 시점으로 앞당김. 종종 url의 쿼리스트링에 포함되어야 할 %20 등등이 공백 문자로 변환되지 않도록 조치하기 위함

  • [프리뷰 카드] input 이벤트(모바일 붙여넣기)에서 에디터의 커서 위치를 늦게 찾는 문제를 setTimeout 함수를 통해 개선

  • [미디어 임베드] Airbnb : 썸네일 추출 및 생성 지원

  • [미디어 임베드] AZ Quotes : 이미지 바로 첨부 방식으로 변경

  • [미디어 임베드] Bilibili
    : 이미지 파일 외부 로드 차단 때문에 문서에 바로 첨부하는 방식을 적용
    : 라이브 영상 추가 지원
    : 모바일 주소 지원
    -> www.bilibili.com 보안 예외

  • [미디어 임베드] Codepen : JSON을 가져오는 대신 URL을 파싱해서 썸네일과 아이프레임 주소에 직접 반영

  • [미디어 임베드] Codesandbox : 주소 체계 보완

  • [미디어 임베드] e-history (e영상역사관)
    : 대한뉴스 등 VOD 및 AOD 지원
    : 사진 기록은 프리뷰 카드로 출력 지원
    -> www.ehistory.go.kr 보안 예외
    -> ehistory-embed 클래스 추가

  • [미디어 임베드] Facebook
    : 페이지 플러그인(타임라인 형식만 지원) 추가
    : 비디오에 reel 형식 추가 지원
    : 썸네일 추출 및 바로 첨부 기능 도입
    : 주소 체계 정비

  • [미디어 임베드] Figma
    : 신규 지원
    -> embed.figma.com 보안 예외

  • [미디어 임베드] Goolge Drive (구글 드라이브)
    : 신규 지원. 기존의 구글 임베드 컴포넌트를 링크 프리뷰 모듈로 포팅
    : 구글 드라이브 폴더, 파일, 드로잉, 슬라이드(프리젠테이션), 스프레드시트 등을 임베드
    -> drive.google.com, doc.google.com 보안 예외
    -> google-drive-embed 클래스 추가

  • [미디어 임베드] Google Forms (구글 폼)
    : 신규 지원. 기존의 구글 임베드 컴포넌트를 링크 프리뷰 모듈로 포팅
    -> doc.google.com 보안 예외
    -> google-forms-embed 클래스 추가

  • [미디어 임베드] Google Maps (구글 맵)
    : 신규 지원. 일반 지도, 위성 지도, 파노라마(=로드뷰) 지원
    : 장소 프리뷰 사진, 일반지도, 파노라마 사진 등으로 썸네일 지원
    -> maps.google.com 보안 예외
    -> google-maps-embed 클래스 추가

  • [미디어 임베드] Imgur : 썸네일 이미지를 제공하지 않는 video/mp4 형식은 썸네일 추출 제외

  • [미디어 임베드] Instagram (인스타그램) : 썸네일 지원. 단, 외부 프록시 서버를 통해 대표이미지를 가져와서 게시물 내에 바로 파일 첨부 방식

  • [미디어 임베드] Internet Archive
    : 신규 지원. 비디오, 오디오, 책, 소프트웨어 소개, 이미지 모두 지원
    -> archive.org 보안 예외

  • [미디어 임베드] Kakao Map (카카오맵)
    : 신규 지원. 일반 지도, 키워드 검색 결과, 로드뷰 등 지원
    -> kakao-map-embed 클래스 추가

  • [미디어 임베드] NAVER TV : 짧은 주소일 때 숏폼 영상을 식별할 수 있도록 수정

  • [미디어 임베드] Soop
    : 라이브 영상의 썸네일의 가변성을 감안해 이미지 파일 바로 첨부
    : 유형이 채널일 경우에는 프리뷰 카드 출력

  • [미디어 임베드] Threads (스레드)
    : 신규 지원. 포스트
    : 썸네일 지원. 단, 외부 프록시 서버를 통해 대표이미지를 가져와서 게시물 내에 바로 파일 첨부 방식
    -> threads.net 보안 예외
    -> threads-embed 클래스 추가

  • [미디어 임베드] TVSohu : 추출된 이미지 url에서 역슬래시 문자를 제거

  • [미디어 임베드] Twitter/X
    : 썸네일 추출 및 바로 첨부 기능 도입
    : 단, X.com 본사의 서비스 불안으로 인해 프로필 타임라인의 트윗 개수 제한이 이뤄지지 않고 있으며, 리스트 타임라인은 아예 로드되지 않고 있음

  • [미디어 임베드] Typeform (설문조사)
    : 신규 지원
    -> form.typeform.com 보안 예외
    -> typeform-embed 클래스 추가

  • [미디어 임베드] Youtube : 라이브 영상 url 형식 지원

 

 

0.1.0 작업 내역

  • [프리뷰 카드] 설정에서 '허용/제외할 도메인' 목록의 저장 오류를 수정 (톰캣님)

  • [프리뷰 카드] 이미지 파일이 업로드되지 않던 문제를 수정

  • [프리뷰 카드] 설정에서 '허용/제외할 도메인' 및 '파일 첨부 예외 도메인' 목록에 *.xetown.com 형태의 도메인을 활용할 수 있게 함 (에카님)

  • [미디어 임베드] AfreecaTV (아프리카TV) : 지원 종료 (숲(SOOP)으로 변경)

  • [미디어 임베드] Airbnb (에어비앤비) : 체험 예약 페이지 지원 종료

  • [미디어 임베드] Amazon Book : 지원 종료

  • [미디어 임베드] Amazon Music (아마존 뮤직)
    : 트랙 관련 코드 수정
    : 썸네일 추출 방식 수정

  • [미디어 임베드] Audio Clip (오디오 클립) : 큐레이션과 라이브의 프리뷰 카드 보완

  • [미디어 임베드] Chzzk (치지직) : 채널, 라이브, 비디오 등은 프리뷰 카드 출력

  • [미디어 임베드] Code Sandbox : CORS 적용

  • [미디어 임베드] Dailymotion (데일리모션)
    : 별도의 공개된 API 활용
    : 주소 체계 변경 사항 반영

  • [미디어 임베드] Ellentube : 서비스 폐지에 따라 지원 종료

  • [미디어 임베드] Getty Images
    : 짧은 주소 지원 중단
    : 동영상 임베드 지원 중단

  • [미디어 임베드] Gfycat : 사업 종료에 따라 지원 종료

  • [미디어 임베드] Giphy : 비디오의 iframe 삽입 주소 수정

  • [미디어 임베드] IMDb
    : 반응형 iframe 지원
    : 썸네일 추출 방식 간소화

  • [미디어 임베드] Jjalbot (짤봇) : iframe 대신 이미지를 직접 로드

  • [미디어 임베드] JSFiddle : 다크모드 대신 라이트모드로 임베드

  • [미디어 임베드] Kakao (다음카카오) : 영화 섹션 제거

  • [미디어 임베드] KTV : 다시보기 서비스 신규 지원

  • [미디어 임베드] Mixcloud : api endpoint url을 encode 처리

  • [미디어 임베드] Naver (네이버)
    : 전반적인 재검토. 쇼핑라이브 제거
    : 짧은 주소 보완
    : 숏폼 영상 지원

  • [미디어 임베드] Pinterest
    : 짧은 주소 해제 api 사용
    : 일부 수정된 주소 체계 반영

  • [미디어 임베드] Podbbang (팟빵) : iframe 삽입 페이지의 https 보안 이슈를 우회

  • [미디어 임베드] Podcasts (팟캐스트) : 신규 지원

  • [미디어 임베드] Prezi : 정규식 및 정보 추출 방식 수정

  • [미디어 임베드] QQ : 아이프레임 및 썸네일 추출 방식 간소화

  • [미디어 임베드] SBS : 라이브, 다시보기, 클립 모든 영상 콘텐츠 지원

  • [미디어 임베드] Slideshare : 추가된 새로운 주소 체계에도 대응

  • [미디어 임베드] SOOP (숲)
    : 라이브, vod, catch 등 미디어 콘텐츠 임베딩 제공
    : vod.sooplive.co.kr
    : play.sooplive.co.kr

  • [미디어 임베드] Spotify (스포티파이) : 팟캐스트 오디오 및 비디오 지원 추가

  • [미디어 임베드] Streamable : 정보 추출을 위한 정규식 수정

  • [미디어 임베드] Tiktok (틱톡) : 정규식 보완

  • [미디어 임베드] Tumblr
    : 주소 체계 변경 사항 반영
    : message 이벤트에서 반환되는 데이터 형식 변경 사항 반영

  • [미디어 임베드] TV Sohu : 주소 변경에 대응하여 재귀함수 적용

  • [미디어 임베드] Twitch (트위치) : 한국 내 사업 종료에 따라 지원 종료

  • [미디어 임베드] Vlive : 위버스로 통합 후 회원제 운영으로 지원 중단

  • [미디어 임베트] X.com
    : 트위터 대신 X로 이름 변경 -> 관리자 페이지에서 X 임베딩을 새로 체크해야 함
    : 위젯 js를 불러와서 에디터에 iframe 요소를 바로 삽입하도록 수정

 

 

0.0.7 작업 내역

  • [전체] PHP 8.x에 대응하도록 문법 일부 수정
  • [프리뷰 카드] 프리뷰 카드 실패시 동작 개선

    : 전역 변수값이 불충분하게 전달됐을 경우 현재까지의 정보만으로 프리뷰 카드 출력

  •  [미디어 임베드] APPLE MUSIC : 애플 뮤직에서 제공하는 oembed api 활용. 뮤직 비디오 자동 삽입 서비스 추가. 라디오 스테이션은 서비스 제외

  • [미디어 임베드] 치지직(CHZZK) : 신규 추가. 단, 클립 영상만 임베드

  • [미디어 임베드] 텔레그램(TELEGRAM) : 신규 추가. 단, 채널 메시지만 임베드

  • [미디어 임베드] UDIO : 신규 추가. 개별 음악만 임베드

 

 

0.0.6 작업 내역

  • [전체] 모듈 첫 설치시 선택 모듈srl을 식별하지 않는 문제 수정 (SimpleCode님) ... /modules/preview/preview.controller.php
  • [전체] 링크 텍스트 위치 설정 옵션 제공 (SimpleCode님) . 모두 위로, 프리뷰 카드에서만 아래로, 미디어 임베드에서만 아래로, 모두 아래로 등
    ... /modules/preview/preview.admin.view.php
    ... /modules/preview/lang/ko.php
    ... /modules/preview/preview.controller.php
    ... /modules/preview/tpl/js/_ckeditor.js
  • [프리뷰 카드] amazon.com의 상품 링크가 아마존북의 미디어 임베드로 인식되지 않도록 수정 ... /modules/preview/tpl/js/_ckeditor.js

 

 

0.0.5 작업 내역

  • [전체] 프리뷰 카드의 도메인 허용/제외 옵션이 미디어 임베드에도 영향을 주는 문제 수정 (블리스세븐님)
  • [전체] 관리자 페이지의 휴지통에서도 프리뷰 카드 출력 적용
  • [프리뷰 카드] 클립보드 텍스트 안에 url이 포함됐을 경우 자기 사이트의 프리뷰 카드가 함께 출력되는 문제 수정 (karius님)
  • [미디어 임베드] AFREECATV : 추가된 숏폼 형식(catch) 지원 ... /modules/preview/tpl/js/_ckeditor.js

  • [미디어 임베드] REDDIT : 컨텐츠의 세로사이즈 자동 맞춤 -> event.origin이 https://embed.reddit.com 으로 변경됨 ... /modules/preview/tpl/js/media_embed.js

  • [미디어 임베드] TUMBLR : 추가된 주소 체계, 앱링크 주소 체계에 대응 + 공개된 api를 이용하여 포스트의 type을 식별하고 그에 따라 썸네일을 가져옴

  • [미디어 임베드] TWITTER : x.com 주소 반영(블랙그라운님)
    ... /modules/preview/tpl/js/_ckeditor.js

  • [미디어 임베드] VIMEO : 추가된 주소 체계 대응
    ... /modules/preview/tpl/js/_ckeditor.js

  • [미디어 임베드] YOUTUBE : 글 제목이 비어 있을 때 영상 제목을 자동으로 입력 옵션 추가
    ... /modules/preview/preview.admin.view.php
    ... /modules/preview/preview.controller.php
    ... /modules/preview/lang/ko.php
    ... /modules/preview/tpl/js/_ckeditor.js

 

 

0.0.4 작업 내역

  • [프리뷰 카드]  자기 사이트의 url 링크에 대해서는 라이믹스 내장 함수를 이용하여 프리뷰 정보 수집 (마트몬님)

 

 

0.0.3 작업 내역

  • [전체] 배포 파일에서 custom.css 파일을 제외. 필요시 사용자가 해당 파일을 생성하면 자동 인식되게끔 했음
  • [프리뷰 카드] 타임아웃(외부 서버 접속 제한 시간) 설정 제공
  • [프리뷰 카드] 이미지 파일 첨부 예외 도메인 설정 (자기 사이트의 CDN 서버 예외 처리 등에 유용함)
  • [미디어 임베드] KAKAOTV : 재변경된 아이프레임 주소에 대응
  • [미디어 임베드] NAVER SHORTS : 뉴스/스포츠의 숏폼 영상 임베드
  • [미디어 임베드] NAVER SPORTS : 스포츠/비디오 주소 체계에 대응

 

 

0.0.2 작업 내역

  • 불필요한 파일 삭제 : class_list.txt (람보님)
  • act가 없는 경우에 대비 (오민호님, 토마토님)