occidere/improved-naver-video-plugin

네이버 카페 / 블로그 동영상을 위한 추가 기능 플러그인

improved-naver-video-plugin

네이버 카페 / 블로그 동영상을 위한 추가 기능들을 모아놓은 확장 플러그인입니다.

Disclaimer: 기능은 언제든 추가 / 수정될 수 있습니다.

1. 설치

• Chrome 웹 스토어: https://chrome.google.com/webstore/detail/improved-naver-video-plug/baoedklaoahloonjpncnhkjhcefldheb

2. 기능

2.1. 동영상의 기본 화질을 최대 해상도로 적용

• 동영상 재생 시 기존 480p / 720p 로 설정되어 있는 기본 재생 해상도를 최대 화질로 자동으로 변경해줍니다.
  • ex) 1080p, 720p, 480p, 270p 가 있는 경우 1080p 를 자동으로 사용
• 현재 재상중인 화질을 우측 하단에 보여줍니다.
• 체크박스를 체크하여 활성화 한 뒤 새로고침 하면 적용됩니다.
• 체크박스를 해제하여 비활성화 한 뒤 새로고침을 하면 다시 기본 (480/720) 화질로 재생됩니다.

2.2. 동영상 배속 표시

• 현재 동영상의 배속을 표시합니다.
  • ex) 0.5x, 1.0x, 1.5x, 2.0x

2.3. 첫번째 영상 자동재생

• 첫번째 동영상을 자동으로 재생합니다.

2.4. 기본 음량 설정

• 모든 네이버 동영상의 기본 음량을 고정할 수 있습니다

2.5. 쉬운 동영상 재생 클릭

• 동영상을 처음 재생할 때 플레이어 내 아무 곳이나 눌러도 재생이 시작됩니다.

적용 결과

3. 사용 방법 및 기능 추가 등 문의

• GitHub Issues: https://github.com/occidere/improved-naver-video-plugin/issues/new/choose

4. Contribute

• 오타 수정이나 버그 픽스, 신규 기능 추가 등 컨트리뷰션에 대해선 항상 환영입니다 😄

improved-naver-video-plugin's Issues

[bug] 네이버 카페에서 화질 적용이 안 되는 문제

버그 내용

• 네이버 카페에서 화질 적용 기능이 간헐적으로 작동하지 않는 문제가 있습니다.
• 특히 매우 빠른 인터넷 환경에서 이러한 문제가 나타나는 것 같습니다.

상세

• main.js 스크립트 실행보다 iframe 로딩이 빠를 경우 eventListener가 등록되기 전에 load event가 발생하여 decorateAll() 함수가 실행되지 않는 것으로 보입니다.
  

  improved-naver-video-plugin/js/main.js

  Lines 8 to 10 in 8a424a1

  	async function init() {
  	if (isCafe()) {
  	getIframe().addEventListener('load', () => decorateAll());

재연

• 여러 번 테스트 결과 init() 시점에서 getIframeDocument().readyState[1] 값이 compelete일 때 작동하지 않는 것을 확인했습니다.
• 빠른 인터넷 환경은 재연하기 어려워 반대로 다음과 같이 eventListener 등록이 iframe 로딩 이후에 이루어지도록 테스트해 보니 해당 문제가 발생하는 것을 확인했습니다.

  async function init() {
      await sleep(5000); // delay 추가
      if (isCafe()) {
          getIframe().addEventListener('load', () => decorateAll());
      ...

해결 방안

• 다음과 같이 조치하여 race condition 없이[2] 문제를 해결할 수 있을 것 같습니다.

  async function init() {
      if (isCafe()) {
          if (getIframeDocument().readyState === "complete") {
              // iframe 로딩이 이미 완료됐을 경우 즉시 실행
              await decorateAll();
          } else {
              // iframe 로딩이 완료되지 않았을 경우 eventListener를 등록하여 로딩 완료 후 실행
              getIframe().addEventListener('load', () => decorateAll());
          }
      ...

• 테스트 결과 각각의 경우가 발생했으며 기능이 정상 작동하는 것을 확인했습니다.

[features] Add volume fix function

필요한 기능 설명

• 볼륨 고정 기능 추가

해당 기능이 필요한 이유

• 동영상 재생 시 마다 항상 최대 음량으로 재생되어 청각적 고통을 유발

체크리스트

• TBD

[Refactoring] Change structure as decorator pattern

Change structure as decorator pattern

Add current resolution indicator

Related links

• X

Contents

• 플레이어 우하단 설정 아이콘 좌측에 현재 해상도를 표시해주는 컴포넌트 추가

Example

Player - normal

Player - small

Checklist

• 화질 선택 li 의 class 값 참조해서 현재 화질 정보 가져오기
  • 현재 선택된 화질: class="pzp-pc-ui-setting-quality-item pzp-pc-ui-setting-item pzp-pc-ui-setting-item--clicked pzp-pc-ui-setting-item--checked"
  • 선택되지 않은 화질: class="pzp-pc-ui-setting-quality-item pzp-pc-ui-setting-item"
• 화질 자동/수동 변경 시 마다 맞춰서 갱신 필요
  • click event 등록 or 주기적으로 체크

[features] Add resolution change UI/UX on additional resolution component

Add resolution change UI/UX on additional resolution component

[features] Add video download function with various resolutions

Add video download function with various resolutions

[bug] Support mobile web page

모바일 웹 페이지의 경우 정상 동작이 안됨 (example)