35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { useEditor } from '@tldraw/tldraw';
|
|
import { CC_SHAPE_CONFIGS } from '../../../cc-base/cc-configs';
|
|
import { createYoutubeShapeAtCenter } from '../../../cc-base/shape-helpers/youtube-helpers';
|
|
import './panel.css';
|
|
|
|
export const CCYoutubePanel: React.FC = () => {
|
|
const editor = useEditor();
|
|
const [videoUrl, setVideoUrl] = React.useState<string>(CC_SHAPE_CONFIGS['cc-youtube-embed'].defaultProps.video_url as string);
|
|
|
|
return (
|
|
<div className="panel-container">
|
|
<div className="panel-section">
|
|
<input
|
|
type="text"
|
|
value={videoUrl}
|
|
onChange={(e) => setVideoUrl(e.target.value)}
|
|
onPaste={(e) => {
|
|
e.preventDefault();
|
|
const pastedText = e.clipboardData.getData('text');
|
|
setVideoUrl(pastedText);
|
|
}}
|
|
placeholder="Enter YouTube URL"
|
|
className="panel-input"
|
|
/>
|
|
<button
|
|
onClick={() => editor && createYoutubeShapeAtCenter(editor, videoUrl)}
|
|
className="shape-button"
|
|
>
|
|
Add YouTube Video
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|