45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { VideoPlayer } from './video-player';
|
|
import { ImageViewer } from './image-viewer';
|
|
import { MarkdownViewer } from './markdown-viewer';
|
|
import { useChat } from '../../providers/chat-provider';
|
|
import '../../styles/projector.css';
|
|
|
|
export function ProjectorView() {
|
|
const { line } = useChat();
|
|
const [content, setContent] = React.useState<any>(null);
|
|
|
|
React.useEffect(() => {
|
|
if (!line) return;
|
|
|
|
const subscription = line.activity$
|
|
.subscribe((activity: any) => {
|
|
if (activity.type === 'event' && activity.name === 'project') {
|
|
setContent(activity.value);
|
|
}
|
|
});
|
|
|
|
return () => subscription.unsubscribe();
|
|
}, [line]);
|
|
|
|
const renderContent = () => {
|
|
if (!content) return null;
|
|
|
|
switch (content.type) {
|
|
case 'video':
|
|
return <VideoPlayer url={content.url} />;
|
|
case 'image':
|
|
return <ImageViewer url={content.url} />;
|
|
case 'markdown':
|
|
return <MarkdownViewer content={content.text} />;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="projector-container">
|
|
{renderContent()}
|
|
</div>
|
|
);
|
|
}
|