> ## Documentation Index > Fetch the complete documentation index at: https://discord-markm-docs-lobby-membership-disconnect.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Discord Developer Platform > Build bots and integrations on Discord, or connect your game with rich presence, voice chat, and more. export const YouTubePlaylistCarousel = ({list, description = "", videos = null}) => { const playlistId = useMemo(() => { if (!list) return ""; const match = list.match(/[?&]list=([^&]+)/); return match ? match[1] : list; }, [list]); const playlistUrl = `https://www.youtube.com/playlist?list=${playlistId}`; const cacheKey = `yt-playlist-${playlistId}`; const cacheTtlMs = 60 * 60 * 1000; const pinnedVideos = useMemo(() => { if (Array.isArray(videos)) return videos; if (typeof videos === "string" && videos.trim()) return videos.trim().split(/[\s,]+/); return null; }, [videos]); const playerRef = useRef(null); const playingRefs = useRef({}); const trackRef = useRef(null); const [videoIds, setVideoIds] = useState(pinnedVideos || []); const [playing, setPlaying] = useState(new Set()); const [channel, setChannel] = useState(null); const [atStart, setAtStart] = useState(true); const [atEnd, setAtEnd] = useState(true); const readCache = () => { try { return JSON.parse(localStorage.getItem(cacheKey)); } catch { return null; } }; const writeCache = patch => { try { const previous = readCache() || ({}); localStorage.setItem(cacheKey, JSON.stringify({ ...previous, ...patch, fetchedAt: Date.now() })); } catch {} }; useEffect(() => { if (!playlistId) return; const cached = readCache(); if (cached?.channel) setChannel(cached.channel); if (!pinnedVideos && Array.isArray(cached?.videos) && cached.videos.length > 0) { setVideoIds(cached.videos); } if (cached?.fetchedAt && Date.now() - cached.fetchedAt < cacheTtlMs) return; fetch(`https://www.youtube.com/oembed?url=${encodeURIComponent(playlistUrl)}&format=json`).then(response => response.ok ? response.json() : null).then(data => { if (!data?.author_name) return; const url = (data.author_url || "").startsWith("http") ? data.author_url : `https://www.youtube.com${data.author_url || ""}`; const freshChannel = { name: data.author_name, url }; setChannel(freshChannel); writeCache({ channel: freshChannel }); }).catch(() => {}); }, [playlistId]); useEffect(() => { if (!playlistId) return; const onMessage = event => { if (event.origin !== "https://www.youtube.com") return; if (!playerRef.current || event.source !== playerRef.current.contentWindow) return; let data; try { data = JSON.parse(event.data); } catch { return; } const ids = data?.info?.playlist; if (Array.isArray(ids) && ids.length > 0 && ids.every(id => typeof id === "string")) { if (!pinnedVideos) setVideoIds(ids); writeCache({ videos: ids }); } }; window.addEventListener("message", onMessage); return () => window.removeEventListener("message", onMessage); }, [playlistId, pinnedVideos]); const pauseAll = exceptVideoId => { const pause = iframe => iframe?.contentWindow?.postMessage(JSON.stringify({ event: "command", func: "pauseVideo", args: [] }), "https://www.youtube.com"); Object.entries(playingRefs.current).forEach(([videoId, iframe]) => { if (videoId !== exceptVideoId) pause(iframe); }); pause(playerRef.current); }; useEffect(() => { const onVisibilityChange = () => { if (document.hidden) pauseAll(); }; document.addEventListener("visibilitychange", onVisibilityChange); return () => document.removeEventListener("visibilitychange", onVisibilityChange); }, []); const handlePlayerLoad = () => { playerRef.current?.contentWindow?.postMessage(JSON.stringify({ event: "listening", id: "ytplaylist", channel: "widget" }), "https://www.youtube.com"); }; const updateArrows = () => { const track = trackRef.current; if (!track) return; setAtStart(track.scrollLeft <= 4); setAtEnd(track.scrollLeft + track.clientWidth >= track.scrollWidth - 4); }; useEffect(() => { updateArrows(); window.addEventListener("resize", updateArrows); return () => window.removeEventListener("resize", updateArrows); }, [videoIds]); const scrollByPage = direction => { pauseAll(); const track = trackRef.current; track?.scrollBy({ left: direction * track.clientWidth, behavior: "smooth" }); }; const handleTrackScroll = () => { updateArrows(); pauseAll(); }; return
{description &&

{description}

}
{videoIds.length === 0 &&
} {videoIds.map(videoId => playing.has(videoId) ?
:
)}
{!(atStart && atEnd) && <> }
{channel &&
Subscribe to {channel.name}
}
; }; export const CircleQuestionIcon = props => ; export const BugIcon = props => ; export const ClydeIcon = props => ; export const WrenchIcon = props => ; export const GameControllerIcon = props => ; export const ShapesIcon = props => ; export const RobotIcon = props => ; Discord Developer Platform ## What do you want to build? }> Build automated apps, commands, and integrations that run inside Discord servers. }> Create multiplayer games and social experiences that launch directly inside Discord. }> Add rich presence, voice chat, and social features to your game across all platforms. ## New to Discord development? }> Understand what Discord apps are, the different types, and how to get started. }> Follow a step-by-step guide to build and run your first Discord bot. ## Resources }> Get support, API announcements, and participate in developer events. }> Report issues with the Discord API and SDKs. }> Find articles, FAQs, and reach out to Discord's developer support team. ## Featured Videos