46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { View } from 'react-native';
|
||
|
|
import { VideoPlayer } from './video-player';
|
||
|
|
import { ImageViewer } from './image-viewer';
|
||
|
|
import { MarkdownViewer } from './markdown-viewer';
|
||
|
|
import { useChat } from '../../providers/chat-provider';
|
||
|
|
import { projectorStyles } from '../../styles/projector.styles';
|
||
|
|
|
||
|
|
export function ProjectorView() {
|
||
|
|
const { line } = useChat();
|
||
|
|
const [content, setContent] = React.useState<any>(null);
|
||
|
|
|
||
|
|
React.useEffect(() => {
|
||
|
|
if (!line) return;
|
||
|
|
|
||
|
|
const subscription = line.activity$
|
||
|
|
.filter(activity => activity.type === 'event' && activity.name === 'project')
|
||
|
|
.subscribe(activity => {
|
||
|
|
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 (
|
||
|
|
<View style={projectorStyles.container}>
|
||
|
|
{renderContent()}
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
}
|