// Social — teleprompter & small helpers (split from social.jsx). // SfTeleprompter, PromControl, SfLoading, SfEmpty. Owns window.SocialView export. // ── Teleprompter (auto-scroll, mirror, fullscreen, touch-friendly) ── const SF_PROMPT_KEY = 'sf_prompter_text'; function SfTeleprompter({ text, onText, onToast }) { const [draft, setDraft] = useState(text || (() => { try { return localStorage.getItem(SF_PROMPT_KEY) || ''; } catch { return ''; } })()); const [playing, setPlaying] = useState(false); const [speed, setSpeed] = useState(40); // px per second const [fontSize, setFontSize] = useState(44); const [mirror, setMirror] = useState(false); // flip horizontally (for glass rigs) const [align, setAlign] = useState('center'); const [countdown, setCountdown] = useState(0); const [running, setRunning] = useState(false); // teleprompter open (vs editor) const scrollRef = React.useRef(null); const rafRef = React.useRef(0); const lastTsRef = React.useRef(0); // Camera + recording const [camOn, setCamOn] = useState(false); const [facing, setFacing] = useState('user'); // 'user' (front) | 'environment' (back) const [recording, setRecording] = useState(false); const [recSec, setRecSec] = useState(0); const [videoUrl, setVideoUrl] = useState(''); const videoRef = React.useRef(null); const streamRef = React.useRef(null); const recRef = React.useRef(null); const chunksRef = React.useRef([]); const recTimerRef = React.useRef(0); const recBlobRef = React.useRef(null); // Reel export kit (subtitles + caption) built from the recorded clip const [kit, setKit] = useState(null); // { srt, caption, hashtags } const [kitBusy, setKitBusy] = useState(''); // When a script is pushed from the AI Studio, load it into the editor. useEffect(() => { if (text) { setDraft(text); setRunning(false); setPlaying(false); } }, [text]); useEffect(() => { try { localStorage.setItem(SF_PROMPT_KEY, draft); } catch {} }, [draft]); const stopStream = () => { if (streamRef.current) { streamRef.current.getTracks().forEach(t => t.stop()); streamRef.current = null; } }; const startCam = async (face = facing) => { if (!navigator.mediaDevices?.getUserMedia) { onToast('อุปกรณ์นี้ไม่รองรับกล้อง'); return; } try { stopStream(); const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: face, width: { ideal: 1280 }, height: { ideal: 720 } }, audio: true, }); streamRef.current = stream; if (videoRef.current) { videoRef.current.srcObject = stream; videoRef.current.play().catch(() => {}); } setCamOn(true); } catch (e) { onToast('เปิดกล้องไม่ได้: ' + (e.message || 'ปฏิเสธสิทธิ์')); } }; const stopCam = () => { stopStream(); setCamOn(false); if (videoRef.current) videoRef.current.srcObject = null; }; const flipCam = async () => { const next = facing === 'user' ? 'environment' : 'user'; setFacing(next); if (camOn) await startCam(next); }; const startRec = () => { const stream = streamRef.current; if (!stream) { onToast('เปิดกล้องก่อนเริ่มอัด'); return; } chunksRef.current = []; const mime = ['video/mp4;codecs=h264,aac', 'video/webm;codecs=vp9,opus', 'video/webm'].find(m => window.MediaRecorder && MediaRecorder.isTypeSupported(m)) || ''; let rec; try { rec = new MediaRecorder(stream, mime ? { mimeType: mime } : undefined); } catch { onToast('อุปกรณ์นี้อัดวิดีโอไม่ได้'); return; } rec.ondataavailable = e => { if (e.data.size) chunksRef.current.push(e.data); }; rec.onstop = () => { const blob = new Blob(chunksRef.current, { type: chunksRef.current[0]?.type || 'video/webm' }); recBlobRef.current = blob; setKit(null); setVideoUrl(u => { if (u) URL.revokeObjectURL(u); return URL.createObjectURL(blob); }); }; rec.start(); recRef.current = rec; setRecording(true); setRecSec(0); recTimerRef.current = setInterval(() => setRecSec(s => s + 1), 1000); // also auto-start the scroll if (scrollRef.current) scrollRef.current.scrollTop = 0; setPlaying(true); }; const stopRec = () => { if (recRef.current && recRef.current.state !== 'inactive') recRef.current.stop(); clearInterval(recTimerRef.current); setRecording(false); setPlaying(false); }; // cleanup on leaving the stage / unmount useEffect(() => () => { stopStream(); clearInterval(recTimerRef.current); }, []); useEffect(() => { if (!running) { stopCam(); if (recording) stopRec(); } }, [running]); const _dl = (blob, name) => { const u = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = u; a.download = name; a.click(); setTimeout(() => URL.revokeObjectURL(u), 4000); }; // Build the Reel export kit: SRT subtitles (Whisper) + caption/hashtags (Claude). const buildKit = async () => { const blob = recBlobRef.current; if (!blob) { onToast('อัดคลิปก่อน'); return; } setKitBusy('sub'); let srt = ''; try { const fd = new FormData(); fd.append('file', blob, 'reel.webm'); const d = await _sfTranscribe(fd); srt = d?.srt || ''; if (!srt && d?.transcript) srt = '1\n00:00:00,000 --> 00:00:30,000\n' + d.transcript + '\n'; } catch (e) { onToast('ถอดซับไม่ได้: ' + (e.message || '')); } // caption + hashtags from the script we just read setKitBusy('cap'); let caption = '', hashtags = []; try { const d = await _sfAskJSON(`จากสคริปต์รีลนี้:\n"""${draft.slice(0, 1500)}"""\nเขียนแคปชัน IG/TikTok ที่ดึงดูด 2-3 บรรทัด + แฮชแท็กที่เกี่ยวข้อง 6-10 อัน. JSON {"caption":"","hashtags":[""]}`); caption = d.caption || ''; hashtags = d.hashtags || []; } catch { caption = (draft.split('\n').filter(Boolean)[0] || '').slice(0, 90) + '\n\n💬 คอมเมนต์ "สนใจ" รับรายละเอียด'; hashtags = ['#รีล', '#คอนเทนต์', '#ธุรกิจ', '#การตลาด']; } setKit({ srt, caption, hashtags }); setKitBusy(''); onToast('สร้างชุดเตรียมลง Reel แล้ว'); }; const dlVideo = () => { if (recBlobRef.current) _dl(recBlobRef.current, `reel-${Date.now()}.webm`); }; const dlSrt = () => { if (kit?.srt) _dl(new Blob([kit.srt], { type: 'text/plain' }), `reel-subtitles-${Date.now()}.srt`); }; const copyCaption = () => { const t = (kit?.caption || '') + '\n\n' + (kit?.hashtags || []).join(' '); try { navigator.clipboard.writeText(t); } catch {} onToast('คัดลอกแคปชันแล้ว'); }; // Auto-scroll loop (rAF, framerate-independent via timestamp delta). useEffect(() => { if (!playing || !running) { cancelAnimationFrame(rafRef.current); lastTsRef.current = 0; return; } const step = (ts) => { const el = scrollRef.current; if (el) { if (lastTsRef.current) { el.scrollTop += (speed * (ts - lastTsRef.current)) / 1000; } lastTsRef.current = ts; if (el.scrollTop + el.clientHeight >= el.scrollHeight - 2) { setPlaying(false); return; } } rafRef.current = requestAnimationFrame(step); }; rafRef.current = requestAnimationFrame(step); return () => cancelAnimationFrame(rafRef.current); }, [playing, running, speed]); const start = () => { if (!draft.trim()) { onToast('ใส่สคริปต์ก่อน'); return; } setRunning(true); setPlaying(false); if (scrollRef.current) scrollRef.current.scrollTop = 0; // 3-2-1 countdown then play let n = 3; setCountdown(n); const tick = () => { n -= 1; setCountdown(n); if (n > 0) setTimeout(tick, 800); else { setCountdown(0); setPlaying(true); } }; setTimeout(tick, 800); }; const resetScroll = () => { if (scrollRef.current) scrollRef.current.scrollTop = 0; setPlaying(false); }; const enterFullscreen = () => { const el = document.getElementById('sf-prompter-stage'); if (el?.requestFullscreen) el.requestFullscreen().catch(() => {}); }; const wordCount = draft.trim() ? draft.trim().split(/\s+/).length : 0; const estSec = Math.round((wordCount / 130) * 60); // ~130 wpm reading pace // ── Editor view ── if (!running) { return (
สคริปต์
{wordCount} คำ · อ่านประมาณ {estSec >= 60 ? Math.floor(estSec / 60) + ' นาที ' : ''}{estSec % 60} วิ
} action={}>