From 5ba1c02f1f912e96cb47749f32f26ab2114cbeb4 Mon Sep 17 00:00:00 2001
From: Hufe921 <huangyunfeihufe@hotmail.com>
Date: Mon, 28 Nov 2022 21:23:35 +0800
Subject: [PATCH] feat:add video block core

---
 .../draw/particle/block/modules/BaseBlock.ts  |  6 ++++-
 .../draw/particle/block/modules/VideoBlock.ts | 23 +++++++++++++++++++
 src/editor/dataset/enum/Block.ts              |  3 ++-
 src/editor/interface/Block.ts                 |  5 ++++
 4 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 src/editor/core/draw/particle/block/modules/VideoBlock.ts

diff --git a/src/editor/core/draw/particle/block/modules/BaseBlock.ts b/src/editor/core/draw/particle/block/modules/BaseBlock.ts
index c5ae750..cfa70d7 100644
--- a/src/editor/core/draw/particle/block/modules/BaseBlock.ts
+++ b/src/editor/core/draw/particle/block/modules/BaseBlock.ts
@@ -3,12 +3,13 @@ import { IRowElement } from '../../../../../interface/Row'
 import { Draw } from '../../../Draw'
 import { BlockParticle } from '../BlockParticle'
 import { IFrameBlock } from './IFrameBlock'
+import { VideoBlock } from './VideoBlock'
 
 export class BaseBlock {
 
   private draw: Draw
   private element: IRowElement
-  private block: IFrameBlock | null
+  private block: IFrameBlock | VideoBlock | null
   private blockContainer: HTMLDivElement
   private blockItem: HTMLDivElement
 
@@ -36,6 +37,9 @@ export class BaseBlock {
     if (block.type === BlockType.IFRAME) {
       this.block = new IFrameBlock(this.element)
       this.block.render(this.blockItem)
+    } else if (block.type === BlockType.VIDEO) {
+      this.block = new VideoBlock(this.element)
+      this.block.render(this.blockItem)
     }
   }
 
diff --git a/src/editor/core/draw/particle/block/modules/VideoBlock.ts b/src/editor/core/draw/particle/block/modules/VideoBlock.ts
new file mode 100644
index 0000000..eb0a30c
--- /dev/null
+++ b/src/editor/core/draw/particle/block/modules/VideoBlock.ts
@@ -0,0 +1,23 @@
+import { IRowElement } from '../../../../../interface/Row'
+
+export class VideoBlock {
+
+  private element: IRowElement
+
+  constructor(element: IRowElement) {
+    this.element = element
+  }
+
+  public render(blockItemContainer: HTMLDivElement) {
+    const block = this.element.block!
+    const video = document.createElement('video')
+    video.style.width = '100%'
+    video.style.height = '100%'
+    video.style.objectFit = 'contain'
+    video.src = block.videoBlock?.src || ''
+    video.controls = true
+    video.crossOrigin = 'anonymous'
+    blockItemContainer.append(video)
+  }
+
+}
\ No newline at end of file
diff --git a/src/editor/dataset/enum/Block.ts b/src/editor/dataset/enum/Block.ts
index c89ecbf..125c6b5 100644
--- a/src/editor/dataset/enum/Block.ts
+++ b/src/editor/dataset/enum/Block.ts
@@ -1,3 +1,4 @@
 export enum BlockType {
-  IFRAME = 'iframe'
+  IFRAME = 'iframe',
+  VIDEO = 'video'
 }
\ No newline at end of file
diff --git a/src/editor/interface/Block.ts b/src/editor/interface/Block.ts
index c6f7064..75ebb1e 100644
--- a/src/editor/interface/Block.ts
+++ b/src/editor/interface/Block.ts
@@ -4,7 +4,12 @@ export interface IIFrameBlock {
   src: string;
 }
 
+export interface IVideoBlock {
+  src: string;
+}
+
 export interface IBlock {
   type: BlockType;
   iframeBlock?: IIFrameBlock;
+  videoBlock?: IVideoBlock;
 }
\ No newline at end of file