IFrame Player API 적용기(2)

오늘은 IFrame Api로 만들어둔 플레이어 개체를 기본적으로 제공해주는 플레이어 기능 대신 커스텀한 플레이어를 사용하기 때문에 커스텀 플레이어 조작에 대해 플레이어 개체의 상태와 통일화하는 작업을 하려고 한다.

그래서 기존의 Youtube 컴포넌트에서 추가적인 코드를 작성해줘야하는데 라이브러리를 사용했을 때, 재생시간 및 구간이동은 만들어둔 코드가 있어 재생 할 videoId, 재생/정지, 음소거 및 볼륨조절에 대해서만 통일화를 해주면 되었다.

일단 사용하고자 하는 컴포넌트에서 다음과 같이 customProps라는 prop를 전달해주었다.

// components/common/Player.tsx
const customProps = {
  videoId: selectedMusic.videoId,
  volume,
  muted,
  paused,
};

<Youtube
  ref={ref}
  customProps={customProps}
  stateChangeHandler={handleStateChange}
  autoplay
/>

그리고 Youtube 컴포넌트에서는 위에서 전달받은 prop가 변경되었을 때 componentDidUpdate() 시점에서 이전 값과 비교하여 업데이트 해야 할 prop를 updateVideo() 메서드로 전달해주었다.

componentDidUpdate(prevProps: Props) {
  const { customProps: prevCustomProps } = prevProps;
  const { customProps: nextCustomProps } = this.props;

  if (this.shouldUpdateVideo(prevCustomProps, nextCustomProps)) {
    const needUpdateProps = (Object.keys(prevCustomProps) as Array<keyof typeof prevCustomProps>).filter((key) => prevCustomProps[key] !== nextCustomProps[key]);

    this.updateVideo(needUpdateProps);
  }
}

이제 updateVideo()메서드에서는 업데이트 해야할 props를 순회하면서 플레이어 개체를 업데이트 해주면 커스텀 플레이어의 동작에 대해 플레이어 개체 상태가 변하게 됨으로써 원하는대로 잘 작동할 수 있게 된다.

updateVideo(needUpdateProps: string[]) {
  const {
    customProps: { videoId, volume, muted, paused },
  } = this.props;

  for (let i = 0; i < needUpdateProps.length; i += 1) {
    const propName = needUpdateProps[i];

    switch (propName) {
      case 'paused':
        this.setPaused(paused);
        break;
      case 'muted':
        this.setMute(muted);
        break;
      case 'volume':
        this.setVolume(volume);
        break;
      case 'videoId':
        this.player?.loadVideoById({ videoId });
        break;
      default:
    }
  }
}

(타입은 @types/youtube을 참고하였다.)

Reference

• https://www.npmjs.com/package/@types/youtube