Raycast: YouTube Count Command

search.tsx

import { Action, ActionPanel, Grid, List, getPreferenceValues } from "@raycast/api";
import { useFetch } from "@raycast/utils";
import { htmlUnescape } from "escape-goat";

const YOUTUBE_API_KEY = "";
const CHANNEL_ID = "";

type Snippet = {
  title: string;
  thumbnails: {
    default: {
      url: string;
    };
    medium: {
      url: string;
    };
  };
};

type Item = {
  id: {
    videoId: string;
  };
  snippet: Snippet;
};

type Data = {
  items: Item[];
};

const baseURL = `https://youtu.be`;

export default function Command() {
  const { data } = useFetch<Data>(
    `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${CHANNEL_ID}&maxResults=50&order=date&type=video&key=${YOUTUBE_API_KEY}`
  );

  const preferences = getPreferenceValues<Preferences.Search>();

  if (preferences.layout === "grid") {
    return (
      <Grid aspectRatio="16/9" fit={Grid.Fit.Fill} inset={Grid.Inset.Zero}>
        {data &&
          data.items.map((item) => (
            <Grid.Item
              key={item.id.videoId}
              title={htmlUnescape(item.snippet.title)}
              content={{ source: item.snippet.thumbnails.medium.url }}
              actions={
                <ActionPanel>
                  <Action.CopyToClipboard content={`${baseURL}/${item.id.videoId}`} />
                  <Action.OpenInBrowser url={`${baseURL}/${item.id.videoId}`} />
                </ActionPanel>
              }
            />
          ))}
      </Grid>
    );
  }

  return (
    <List>
      {data &&
        data.items.map((item) => (
          <List.Item
            key={item.id.videoId}
            title={htmlUnescape(item.snippet.title)}
            icon={{ source: item.snippet.thumbnails.default.url }}
            actions={
              <ActionPanel>
                <Action.CopyToClipboard content={`${baseURL}/${item.id.videoId}`} />
                <Action.OpenInBrowser url={`${baseURL}/${item.id.videoId}`} />
              </ActionPanel>
            }
          />
        ))}
    </List>
  );
}

subscriber-count.tsx

import { MenuBarExtra, Icon, open, launchCommand, LaunchType } from "@raycast/api";
import { useFetch } from "@raycast/utils";

const YOUTUBE_API_KEY = "";
const CHANNEL_ID = "";

type Item = {
  statistics: {
    subscriberCount: string;
  };
};

type Data = {
  items: Item[];
};

export default function Command() {
  const { data, isLoading } = useFetch<Data>(
    `https://www.googleapis.com/youtube/v3/channels?part=statistics&id=${CHANNEL_ID}&key=${YOUTUBE_API_KEY}`
  );

  if (!data || data.items.length === 0) {
    return <MenuBarExtra isLoading={isLoading} />;
  }

  const count = Number(data.items[0].statistics.subscriberCount).toLocaleString();

  return (
    <MenuBarExtra icon={Icon.TwoPeople} title={count} isLoading={isLoading}>
      <MenuBarExtra.Item
        title="Open YouTube Studio"
        onAction={() => open("https://studio.youtube.com/channel/UCPvOHaaP9E6FqSqG1NMV_Hw")}
        shortcut={{ modifiers: ["cmd"], key: "o" }}
      />
      <MenuBarExtra.Item
        title="Open YouTube Channel"
        onAction={() => open("https://youtube.com/channel/UCPvOHaaP9E6FqSqG1NMV_Hw")}
      />
      <MenuBarExtra.Section>
        <MenuBarExtra.Item
          title="Open Search Videos Command"
          onAction={() => launchCommand({ name: "search", type: LaunchType.UserInitiated })}
        />
      </MenuBarExtra.Section>
    </MenuBarExtra>
  );
}