Adding YT Video to JANA

A while ago I created a tech/biz/gaming/entertainment news aggregator named JANA which stands for just another news aggregator created in Ionic and React. Video seems just right for an addition so here's how I made it.

npm i yt-player

First, we need to install yt-player npm package. This does not have typings as I'm creating this with TypeScript so I generated one using this instruction. After generating, copy your *.ts files to the root of the yt-player folder.

This code below will be the main YT Frame API Component.

export const YTAPi = ({props, vid}:any) =>{
    let o:any = null
    const [player, setPlayer] = useState(o)
    const [time, setTime] = useState(0)

    useEffect( () =>{

            let p:any = document.querySelector('#playerMain')
            if(p == null) return

            if(player == null){
                setPlayer(new YouTubePlayer('#playerMain',{autoplay:true}))

            }else{
                player.load(vid ? vid : 'GKSRyLdjsPA')

                    player.on('cued', ()=>{
                        player.play()
                    })
            }

    }, [player])


    useEffect( () =>{

            if(player == null) return
            player.load(vid)
                    //player.setVolume(100)


                    player.on('playing', () => {
                        setTime(player.getDuration()) // => 351.521
                    })

                    player.on('ended', ()=>{
                        //alert('ended')
                    })
                    player.on('cued', ()=>{
                      player.play()
                  })

    }, [vid])

    return (
        <>
        <div id="playerMain" className="mainPlayer"></div>
        </>
    )
}

The "{props,vid}" arguments take object and a video ID string so we can play other videos as well.