function Radio1({ autoPlay = true }) { const [isPlaying, setIsPlaying] = useState(false); const [error, setError] = useState(null); const [volume, setVolume] = useState(0.5); const audioRef = useRef(null); const [userInteracted, setUserInteracted] = useState(false); const [showTip, setShowTip] = useState(true); const radioStation = { name: "P4", url: "https://p4.p4groupaudio.com/P04_MM" }; useEffect(()=>{ if (audioRef.current) { audioRef.current.volume = volume; } }, [ volume ]); useEffect(()=>{ if (autoPlay && userInteracted) { const playAudio = async ()=>{ try { await audioRef.current?.play(); setIsPlaying(true); setError(null); } catch (err) { console.error("Feil ved autoplay:", err); setError("Klikk play-knappen for å starte radioen"); setIsPlaying(false); } }; playAudio(); } }, [ userInteracted, autoPlay ]); useEffect(()=>{ if (showTip) { const timer = setTimeout(()=>{ setShowTip(false); }, 5000); return ()=>clearTimeout(timer); } }, [ showTip ]); useEffect(()=>{ return ()=>{ if (audioRef.current) { audioRef.current.pause(); audioRef.current.src = ""; audioRef.current.load(); } }; }, []); const togglePlay = async ()=>{ setUserInteracted(true); setShowTip(false); if (isPlaying) { audioRef.current?.pause(); setIsPlaying(false); } else { setError(null); try { const playPromise = audioRef.current?.play(); if (playPromise) { await playPromise; setIsPlaying(true); } } catch (err) { console.error("Feil ved avspilling:", err); setError("Kunne ikke spille av radio. Prøv igjen."); } } }; return /*#__PURE__*/ React.createElement("div", { className: "relative inline-block", __source: { fileName: "", lineNumber: 78, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-flex items-center gap-3 bg-[#1a1b2e]/80 backdrop-blur-xl rounded-xl px-4 py-3 border border-white/10", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/c35c4577-a8ad-4d5f-bfa7-352cde7f48aa/-/format/auto/", alt: "SingelCam Radio", className: "w-8 h-8 rounded-lg", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-white text-sm font-medium", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, radioStation.name)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: togglePlay, className: "w-8 h-8 flex items-center justify-center bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg text-white hover:opacity-90 transition-all", title: isPlaying ? "Pause" : "Start radio", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isPlaying ? "fa-pause" : "fa-play"}`, __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-down text-white/60 text-sm", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "1", step: "0.1", value: volume, onChange: (e)=>setVolume(Number(e.target.value)), className: "w-20 h-1 bg-white/10 rounded-lg appearance-none cursor-pointer accent-purple-500", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-up text-white/60 text-sm", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("audio", { ref: audioRef, src: radioStation.url, preload: "auto", onError: ()=>setError("Feil ved avspilling"), __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }), error && /*#__PURE__*/ React.createElement("div", { className: "text-white/70 text-sm flex items-center gap-1", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle text-purple-400", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }), error)), showTip && !isPlaying && /*#__PURE__*/ React.createElement("div", { className: "absolute -top-12 left-1/2 transform -translate-x-1/2 bg-purple-600/90 backdrop-blur-sm px-4 py-2 rounded-lg text-white text-sm whitespace-nowrap animate-bounce", __source: { fileName: "", lineNumber: 131, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }, "Klikk for å starte radioen!", /*#__PURE__*/ React.createElement("div", { className: "absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-2 h-2 bg-purple-600/90 rotate-45", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this })))); } function Radio1Story() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0A0118] p-8 flex items-center justify-center", __source: { fileName: "", lineNumber: 144, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Radio1, { autoPlay: true, __source: { fileName: "", lineNumber: 145, columnNumber: 7 }, __self: this })); } function MainComponent() { const [isFullScreen, setIsFullScreen] = useState(false); const toggleFullScreen = ()=>{ if (!document.fullscreenElement) { document.documentElement.requestFullscreen().catch((err)=>{ console.error(`Error attempting to enable fullscreen: ${err.message}`); }); } else { document.exitFullscreen(); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen w-full overflow-hidden relative", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("link", { rel: "icon", type: "image/png", href: "https://ucarecdn.com/d360f092-2976-418d-a0b3-b77e7eac88b7/-/format/auto/", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("header", { className: "h-[72px] bg-gradient-to-b from-[#300032] via-[#1a0020] to-black flex flex-col justify-start px-6 flex-shrink-0", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between w-full pt-3", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-5", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/80e02495-8f34-4482-b64b-50d45d530d78/-/format/auto/", alt: "Company logo", className: "h-8 object-contain", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-3", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.singelcam.no/profile/my/profile", target: "_blank", rel: "noopener noreferrer", className: "bg-[#cc0033] hover:bg-[#990026] text-white/90 px-3 py-0.5 rounded-lg transition-colors duration-300 text-sm flex items-center", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, "Min Profil"), /*#__PURE__*/ React.createElement("a", { href: "https://www.singelcam.no/account-settings", target: "_blank", rel: "noopener noreferrer", className: "bg-[#cc0033] hover:bg-[#990026] text-white/90 px-3 py-0.5 rounded-lg transition-colors duration-300 text-sm flex items-center", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "Min Konto"), /*#__PURE__*/ React.createElement("a", { href: "https://www.singelcam.no/minegrupper", target: "_blank", rel: "noopener noreferrer", className: "bg-[#cc0033] hover:bg-[#990026] text-white/90 px-3 py-0.5 rounded-lg transition-colors duration-300 text-sm flex items-center", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, "Mine Grupper"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-5", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.singelcam.no/nyheter/nyheter-fra-singelcam/discussion", target: "_blank", rel: "noopener noreferrer", className: "bg-[#1a4c2f] hover:bg-[#143d26] text-white/90 px-3 py-0.5 rounded-lg transition-colors duration-300 text-sm flex items-center", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Nyheter"), /*#__PURE__*/ React.createElement("a", { href: "https://www.singelcam.no/pricing-plans/list", target: "_blank", rel: "noopener noreferrer", className: "bg-[#6c3483] hover:bg-[#5a2a6e] text-white/90 px-3 py-0.5 rounded-lg transition-colors duration-300 text-sm flex items-center", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Kjøp Abonnement"), /*#__PURE__*/ React.createElement("a", { href: "https://www.singelcam.no/my-subscriptions", target: "_blank", rel: "noopener noreferrer", className: "bg-[#1a2530] hover:bg-[#131b24] text-white/90 px-3 py-0.5 rounded-lg transition-colors duration-300 text-sm flex items-center", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Bli Medlem"), /*#__PURE__*/ React.createElement("a", { href: "https://www.singelcam.no/premiumprofil", target: "_blank", rel: "noopener noreferrer", className: "bg-[#1a1a1a] hover:bg-black text-white/90 px-3 py-0.5 rounded-lg transition-colors duration-300 text-sm flex items-center", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Premium Profil"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#cc0033]", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, "Fullskjerm"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right text-white/75 animate-bounce mx-4", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: toggleFullScreen, className: "bg-[#cc0033] hover:bg-[#990026] text-white p-2 rounded-lg flex items-center justify-center transition-colors duration-300", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-expand", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center w-full mt-2", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("main", { className: "flex-1 w-full relative", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: "https://html5-chat.com/chat/50957/66fc9574ec37b", className: "w-full h-full border-0", title: "Chat interface", allow: "camera *;microphone *;display-capture;fullscreen;clipboard-write", allowFullScreen: true, allowusermedia: "true", allowtransparency: "true", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 right-4 z-50", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(Radio1, { __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this })))); }