- types.ts: LiveViewProps, LiveViewChatMessage; mockData: FEATURED_STREAM, CHAT_MESSAGES - useLiveView: stream, chatMessages, msgInput, handleSend, addToast - LiveViewPlayer, LiveViewStreamInfo, LiveViewRecommended, LiveViewChat, LiveViewSkeleton - Layout h-[calc(100vh-120px)] -> min-h-layout-main; text-[10px] -> text-xs - Stories: Default, Loading (Skeleton); decorator min-h-layout-page - Re-export from LiveView.tsx Co-authored-by: Cursor <cursoragent@cursor.com>
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { useState, useCallback } from 'react';
|
|
import { useToast } from '@/components/feedback/ToastProvider';
|
|
import { FEATURED_STREAM, CHAT_MESSAGES } from './mockData';
|
|
import type { LiveStream } from '@/types';
|
|
import type { LiveViewChatMessage } from './types';
|
|
|
|
export interface UseLiveViewOptions {
|
|
stream?: LiveStream | null;
|
|
chatMessages?: LiveViewChatMessage[];
|
|
onSendMessage?: (text: string) => void;
|
|
}
|
|
|
|
export function useLiveView(options: UseLiveViewOptions = {}) {
|
|
const { addToast } = useToast();
|
|
const stream = options.stream ?? FEATURED_STREAM;
|
|
const chatMessages = options.chatMessages ?? CHAT_MESSAGES;
|
|
const [msgInput, setMsgInput] = useState('');
|
|
|
|
const handleSend = useCallback(() => {
|
|
if (!msgInput.trim()) return;
|
|
if (options.onSendMessage) {
|
|
options.onSendMessage(msgInput);
|
|
} else {
|
|
addToast('Message sent to chat', 'success');
|
|
}
|
|
setMsgInput('');
|
|
}, [msgInput, options.onSendMessage, addToast]);
|
|
|
|
return {
|
|
stream,
|
|
chatMessages,
|
|
msgInput,
|
|
setMsgInput,
|
|
handleSend,
|
|
addToast,
|
|
};
|
|
}
|