getInternalPlayer return any

[harokki]

trafficstars

When I use getInternalPlayer, it return any. Therefore, I need to install @types/youtube-player after installing react-youtube.

I think @types/youtube-player should be in dependencies in package.json.

import { MutableRefObject, useRef } from 'react';
import YouTube from 'react-youtube';

type ReturnType = readonly [
  MutableRefObject<YouTube | null>,
  () => void,
];

export const useYoutubePlayer = (): ReturnType => {
  const playerRef = useRef<YouTube | null>(null);

  // getPlayer returns any
  const getPlayer = () => {
    if (playerRef && playerRef.current) {
      return playerRef.current.getInternalPlayer();
    }

    return null;
  };

  const startVideo = () => {
    const player = getPlayer();
    if (player) {
      player.playVideo();
    }
  };

  return [playerRef, startVideo] as const;
};

[SigSov]

@harokki I faced the same issue, but in my case getInteralPlayer actually returns undefined. There's a property internalPlayer that seems to be correct player ref, but TS complains that there's no such type on 'YouTube' (exists in runtime ofc). Does in your case getInternalPlayer return correct object? I ended with ts-ignore and using property internalPlayer

[vincerubinetti]

FYI you can specify the type of the player instance like:

import YouTube from "react-youtube";
let player: ReturnType<YouTube["getInternalPlayer"]>`;

or (after dev-installing @types/youtube-player):

import type { YouTubePlayer } from "youtube-player/dist/types";
let player: YouTubePlayer;