music_player.tsx

gistfile1.tsx

import YouTube, { YouTubeProps } from "react-youtube"
import { useRef, useState } from "react"
import { Play, Pause } from "phosphor-react"
import { motion } from "framer-motion"
import { addPropertyControls, ControlType } from "framer"

export default function MusicPlayer(props) {
    const [isPlaying, setIsPlaying] = useState(false)
    const player = useRef()

    const onPlayerReady: YouTubeProps["onReady"] = (event) => {
        player.current = event.target
    }

    const opts: YouTubeProps["opts"] = {
        height: "0",
        width: "0",
    }

    function togglePlaying() {
        setIsPlaying((isPlaying) => {
            if (isPlaying) {
                player.current.pauseVideo()
            } else {
                player.current.playVideo()
            }

            return !isPlaying
        })
    }

    return (
        <div>
            <motion.div
                onClick={togglePlaying}
                style={containerStyles}
                whileTap={{ scale: 0.8 }}
            >
                <div style={{ ...buttonStyles }}>
                    {!isPlaying && <Play weight="fill" />}
                    {isPlaying && <Pause weight="fill" />}
                </div>
            </motion.div>

            <div style={iframeStyles}>
                <YouTube
                    videoId={props.youtubeId}
                    opts={opts}
                    onReady={onPlayerReady}
                />
            </div>
        </div>
    )
}

MusicPlayer.defaultProps = {
    youtubeId: "iN3KsbnQZxU",
}

addPropertyControls(MusicPlayer, {
    youtubeId: {
        type: ControlType.String,
        title: "Youtube ID",
    },
})

const iframeStyles = {
    visibility: "hidden",
    position: "absolute",
}

const containerStyles = {
    width: 24,
    height: 24,
    display: "flex",
    alignItems: "center",
    borderRadius: "100px",
    justifyContent: "center",
    background: "white",
    cursor: "pointer",
    boxShadow: "0 0 0 2px rgba(0,0,0,0.2)",
}

const buttonStyles = {
    display: "flex",
    alignItems: "center",
    border: "none",
    background: "none",
    appearance: "none",
    position: "absolute",
    cursor: "pointer",
}