perf: video component implement code

@@ -14604,9 +14604,10 @@ class HandleDynamicEffect {
      * @description 播放视频
      */
     videoPlay() {
-        const basicAttr = Sidebar.prototype.enumCellBasicAttribute
         const enumAccessMode = HandleDynamicEffect.enumVideoAccessMode
         const reg = /(?:.*)(?<=\.)/
+        const graph = this.graph
+        const createVideoTemplate = this.createVideoTemplate
         const videoPlayConfig = {
             controls: true,
             autoPlay: true,
@@ -14620,58 +14621,38 @@ class HandleDynamicEffect {
             const { accessMode, videoUrl, id } = additional
             const cell = this.getCellByCellId(nodeId)
             if (!cell) continue
-            const { geometry = {} } = cell
-            const { width, height } = geometry
-            const idEl = getIdEl()
             if (Number(accessMode) === enumAccessMode.MANUAL_ENTER) {
-                this.graph.getModel().beginUpdate()
-                try {
-                    let type
-                    if (videoUrl.replace(reg, '') === 'm3u8') type = 'application/x-mpegURL'
-                    const template = this.createVideoTemplate(idEl, width, height, videoUrl, type)
-                    cell.setAttribute('label', template)
-                    this.graph.refresh(cell);
-                } finally {
-                    this.graph.getModel().endUpdate()
-                    videojs(idEl,
-                        {
-                            ...videoPlayConfig
-                        },
-                        function () {
-                            this.play()
-                        })
-                }
+                handleVideoPlay(videoPlayConfig, cell, videoUrl)
             } else {
-                getStreamingVideoPlayUrl.call(this, id, nodeId)
+                getStreamingVideoPlayUrl(id, nodeId)
             }
         }
 
-        async function getStreamingVideoPlayUrl(id, nodeId) {
+        async function getStreamingVideoPlayUrl(id, cell) {
             const [err, res = {}] = await to(ConfigurationNodeApi.getStreamingVideoPlayUrl(id))
             const { url } = res?.data || {}
             if (!url) return
-            const cell = this.getCellByCellId(nodeId)
+            handleVideoPlay({ ...videoPlayConfig, hls: { withCredentials: true } }, cell, url)
+        }
+
+        function handleVideoPlay(videoPlayConfig, cell, videoUrl) {
             if (!cell) return
             const { geometry = {} } = cell
             const { width, height } = geometry
             const idEl = getIdEl()
-            this.graph.getModel().beginUpdate()
+            console.log({ idEl })
+            graph.getModel().beginUpdate()
             try {
-                const template = this.createVideoTemplate(idEl, width, height, url, 'application/x-mpegURL')
+                let type
+                if (videoUrl.replace(reg, '') === 'm3u8') type = 'application/x-mpegURL'
+                const template = createVideoTemplate(idEl, width, height, videoUrl, type)
                 cell.setAttribute('label', template)
-                this.graph.refresh(cell);
+                graph.refresh(cell);
             } finally {
-                this.graph.getModel().endUpdate()
-                videojs(idEl,
-                    {
-                        ...videoPlayConfig,
-                        hls: {
-                            withCredentials: true
-                        }
-                    },
-                    function () {
-                        this.play()
-                    })
+                graph.getModel().endUpdate()
+                videojs(idEl, videoPlayConfig, function () {
+                    this.play()
+                })
             }
         }