function MainComponent() { const generateRandomVideoId = ()=>{ const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_'; return Array.from({ length: 11 }, ()=>characters.charAt(Math.floor(Math.random() * characters.length))).join(''); }; const [videoId, setVideoId] = React.useState(''); const [history, setHistory] = React.useState([]); const [currentIndex, setCurrentIndex] = React.useState(-1); const [loading, setLoading] = React.useState(true); const playerRef = React.useRef(null); const containerRef = React.useRef(null); const startY = React.useRef(0); React.useEffect(()=>{ const tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; const firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); window.onYouTubeIframeAPIReady = initializePlayer; return ()=>{ window.onYouTubeIframeAPIReady = null; }; }, []); const initializePlayer = ()=>{ playerRef.current = new window.YT.Player('player', { height: '450', width: '800', videoId: '', events: { 'onReady': onPlayerReady, 'onError': onPlayerError, 'onStateChange': onPlayerStateChange } }); }; const onPlayerReady = ()=>{ loadNextVideo(); }; const onPlayerError = ()=>{ loadNextVideo(); }; const onPlayerStateChange = (event)=>{ if (event.data === window.YT.PlayerState.PLAYING) { setLoading(false); } }; const loadNextVideo = async ()=>{ setLoading(true); let validVideoFound = false; while(!validVideoFound){ const newVideoId = generateRandomVideoId(); try { const response = await fetch(`https://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=${newVideoId}&format=json`); if (response.ok) { setVideoId(newVideoId); setHistory((prev)=>[ ...prev.slice(0, currentIndex + 1), newVideoId ]); setCurrentIndex((prev)=>prev + 1); playerRef.current.loadVideoById(newVideoId); validVideoFound = true; } } catch (error) { console.error("Error checking video:", error); } } }; const loadPreviousVideo = ()=>{ if (currentIndex > 0) { setLoading(true); const previousVideoId = history[currentIndex - 1]; setVideoId(previousVideoId); setCurrentIndex((prev)=>prev - 1); playerRef.current.loadVideoById(previousVideoId); } }; const handleTouchStart = (e)=>{ startY.current = e.touches[0].clientY; }; const handleTouchEnd = (e)=>{ const endY = e.changedTouches[0].clientY; const diffY = startY.current - endY; if (Math.abs(diffY) > 50) { if (diffY > 0) { loadNextVideo(); } else { loadPreviousVideo(); } } }; React.useEffect(()=>{ const container = containerRef.current; container.addEventListener('touchstart', handleTouchStart); container.addEventListener('touchend', handleTouchEnd); return ()=>{ container.removeEventListener('touchstart', handleTouchStart); container.removeEventListener('touchend', handleTouchEnd); }; }, []); return /*#__PURE__*/ React.createElement("div", { ref: containerRef, className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 relative", __source: { fileName: "", lineNumber: 114, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { id: "player", className: "w-[800px] h-[450px] mb-4", __source: { fileName: "", lineNumber: 118, columnNumber: 7 }, __self: this }), loading && /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 119, columnNumber: 19 }, __self: this }, "動画を読み込み中..."), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-gray-600", __source: { fileName: "", lineNumber: 120, columnNumber: 7 }, __self: this }, "現在の動画ID: ", videoId), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mt-4", __source: { fileName: "", lineNumber: 121, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: loadPreviousVideo, className: "p-2 mb-2 text-white bg-blue-500 rounded-full hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 disabled:opacity-50", disabled: currentIndex <= 0 || loading, __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-up", __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: loadNextVideo, className: "p-2 text-white bg-blue-500 rounded-full hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 disabled:opacity-50", disabled: loading, __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down", __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this })))); }