Framer YouTube Live Badge

FramerLiveBadge.tsx

import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";

const getLiveStatus = async (channelId) => {
  const response = await fetch(
    `https://www.googleapis.com/youtube/v3/search?part=snippet&eventType=live&type=video&channelId=${"channelId"}&key=YOUR_API_KEY`
  );
  const data = await response.json();

  // Check if any items were returned
  if (data.items && data.items.length > 0) {
    return data.items[0].snippet.liveBroadcastDetails.isLive;
  } else {
    // If no items were returned, the channel is not live
    return false;
  }
};

const Badge = () => {
  const [isLive, setIsLive] = useState(false);

  useEffect(() => {
    const checkLiveStatus = async () => {
      const liveStatus = await getLiveStatus("channelId");
      setIsLive(liveStatus);
    };

    const interval = setInterval(() => {
      checkLiveStatus();
    }, 10000); // Check if the user is live every 10 seconds

    return () => clearInterval(interval); // Clean up on unmount
  }, []);

  return (
    <div style={{ display: "flex", alignItems: "center" }}>
      <motion.div
        style={{
          width: "10px",
          height: "10px",
          borderRadius: "5px",
          backgroundColor: isLive ? "red" : "grey",
          marginRight: "6px"
        }}
        animate={{ scale: isLive ? 1.5 : 1 }}
        transition={{ duration: 0.5 }}
      />
      <p>{isLive ? "Currently Live on YouTube" : "Not on YouTube"}</p>
    </div>
  );
};

export default Badge;

This is a React component named Badge which uses the YouTube API to check if a specified YouTube channel is currently live or not. It displays a small badge that changes color and size based on the live status of the channel.

Here's a breakdown of the component:

getLiveStatus is an asynchronous function that takes a YouTube channel ID as a parameter, sends a request to the YouTube API to check if there are any live videos from this channel, and returns true if the channel is live, false otherwise.

useState is a React hook that creates a state variable isLive and a function setIsLive to update it. The initial value of isLive is false.

useEffect is a React hook that runs the code in its body after every render. In this case, it checks the live status of the channel every 10 seconds and updates isLive accordingly. The interval is cleared when the component is unmounted.

Inside the return statement, a div is returned that contains a motion.div (from the Framer Motion library) and a p element. The motion.div is a small dot that changes color and size based on the live status of the channel. The p element displays a message that changes based on the live status of the channel.

To use this component, you need to:

• Replace "channelId" with your actual YouTube channel ID in the getLiveStatus function and in the useEffect hook.
• Replace 'YOUR_API_KEY' with your actual YouTube API key in the getLiveStatus function.
• Import and use this component in your React application.

In Framer here's an example on how to use it in a parent component:

import Badge from "./badge.tsx"

function App() {
    return (
        <div>
            <Badge />
        </div>
    )
}

export default App

This will render the Badge component inside the App component.

Contact: @_jshmllr