50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import { useState } from 'react';
|
|
import { CreateView } from '@toeverything/framework/virgo';
|
|
import { Upload } from '../../components/upload/upload';
|
|
import { SourceView } from '../../components/source-view';
|
|
import { LinkContainer } from '../../components/style-container';
|
|
import { useOnSelect } from '@toeverything/components/editor-core';
|
|
|
|
const _messages = {
|
|
addYoutubeLink: 'Add youtube link',
|
|
};
|
|
|
|
type YoutubeView = CreateView;
|
|
export const YoutubeView = ({ block }: YoutubeView) => {
|
|
const [youtubeUrl, setYoutubeUrl] = useState<string>(
|
|
block.getProperty('embedLink')?.value
|
|
);
|
|
|
|
const onYoutubeUrlChange = async (link: string) => {
|
|
setYoutubeUrl(link);
|
|
block.setProperty('embedLink', { value: link, name: 'youtube' });
|
|
};
|
|
const [isSelect, setIsSelect] = useState<boolean>();
|
|
useOnSelect(block.id, (isSelect: boolean) => {
|
|
setIsSelect(isSelect);
|
|
});
|
|
return (
|
|
<LinkContainer>
|
|
{youtubeUrl ? (
|
|
<SourceView
|
|
block={block}
|
|
isSelected={isSelect}
|
|
viewType="youtube"
|
|
link={youtubeUrl}
|
|
/>
|
|
) : (
|
|
<Upload
|
|
firstCreate={block.firstCreateFlag}
|
|
uploadType={'youtube'}
|
|
savaLink={onYoutubeUrlChange}
|
|
deleteFile={() => {
|
|
block.remove();
|
|
}}
|
|
defaultAddBtnText={_messages.addYoutubeLink}
|
|
isSelected={isSelect}
|
|
/>
|
|
)}
|
|
</LinkContainer>
|
|
);
|
|
};
|