feat: implement video play m3u8 type

ww
1 parent 92abb1c7
Showing 3 changed files with 90 additions and 10 deletions
src/main/webapp/index.html
src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Basic-Components.js
src/main/webapp/js/grapheditor/Format.js
--- a/src/main/webapp/index.html
View file @6a7d8a2
+++ b/src/main/webapp/index.html
View file @6a7d8a2
@@ -31,6 +31,11 @@
 	<script src="./js/plugin/echarts/echarts.js"></script>
 	<script src="./plugins/axios.min.js"></script>
+
+	<link href="https://vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
+	<script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
+
+	<!-- <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script> -->
 	<!--	<script src="./js/jquery/jquery-3.3.1.min.js"></script>-->
 	<link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/layui/2.6.8/css/layui.min.css"
 		integrity="sha512-iQBJbsNHXUcgEIgWThd2dr8tOdKPvICwqjPEZYY81z3eMya44A5MiAqfWSCh+Ee1YzNYkdrI982Qhwgr8LEYOQ=="
@@ -419,6 +424,7 @@
 			cursor: pointer;
 			margin: 5px;
 		}
+
 	</style>
 	<!-- Workaround for binary XHR in IE 9/10, see App.loadUrl -->
 	<!--[if (IE 9)|(IE 10)]><!-->
@@ -559,6 +565,7 @@
 				opacity: 0;
 			}
 		}
+
 	</style>
 </head>
--- a/src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Basic-Components.js
View file @6a7d8a2
+++ b/src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Basic-Components.js
View file @6a7d8a2
@@ -3,7 +3,7 @@
 	Sidebar.prototype.addBasicComponentsPalette = function () {
 		this.setCurrentSearchEntryLibrary('component');
 		const dt = 'basic'
-		const gn = `mxgraph.${ dt }`
+		const gn = `mxgraph.${dt}`
 		const currentDate = getCurrentDate();
 		const basicAttr = this.enumCellBasicAttribute
 		const componentType = this.enumComponentType
@@ -14,14 +14,14 @@
 				const cell = new mxCell('Title', new mxGeometry(0, 0, 100, 40), transparentBg);
 				cell.setVertex(true)
 				this.setCellAttributes(cell, { [basicAttr.COMPONENT_TYPE]: componentType.TITLE })
-				return this.createVertexTemplateFromCells([ cell ], cell.geometry.width, cell.geometry.height, 'Title');
+				return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'Title');
 			})),
 			this.addEntry(this.getTagsForStencil(gn, 'variable', dt).join(' '), mxUtils.bind(this, function () {
 				const cell = new mxCell('变量', new mxGeometry(0, 0, 100, 40), transparentBg);
 				cell.setVertex(true)
 				this.setCellAttributes(cell, { [basicAttr.COMPONENT_TYPE]: componentType.VARIABLE })
-				return this.createVertexTemplateFromCells([ cell ], cell.geometry.width, cell.geometry.height, '变量');
+				return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '变量');
 			})),
 			this.addEntry(this.getTagsForStencil(gn, 'line', dt).join(' '), mxUtils.bind(this, function () {
@@ -33,7 +33,7 @@
 				cell.edge = true;
 				cell.setVertex(true)
 				this.setCellAttributes(cell, { [basicAttr.COMPONENT_TYPE]: componentType.LINE })
-				return this.createEdgeTemplateFromCells([ cell ], 60, 40, '线条');
+				return this.createEdgeTemplateFromCells([cell], 60, 40, '线条');
 			})),
 			this.addEntry('real time', mxUtils.bind(this, function () {
 				const template = `<div class="thingKit-component__real-time"><div class="real-time__date">%currentDate%</div> <div style="font-size:30px" class="real-time__now">HH:mm:ss</div></div>`
@@ -44,19 +44,43 @@
 					placeholders: '1',
 					currentDate: currentDate,
 				})
-				return this.createVertexTemplateFromCells([ cell ], cell.geometry.width, cell.geometry.height, '实时时间');
+				return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '实时时间');
 			})),
 			this.addEntry(this.getTagsForStencil('mxgraph.basic', '变量图片', 'basic').join(' '), mxUtils.bind(this, function () {
 				const cell = new mxCell('', new mxGeometry(0, 0, 194, 95), 'image;image=images/thingskit/img-placeholder.png;imageAspect=0;');
 				cell.setVertex(true)
 				this.setCellAttributes(cell, { [basicAttr.COMPONENT_TYPE]: componentType.VAR_IMAGE })
-				return this.createVertexTemplateFromCells([ cell ], cell.geometry.width, cell.geometry.height, '变量图片');
+				return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '变量图片');
 			})),
 			this.addEntry(this.getTagsForStencil('mxgraph.basic', '视频', 'basic').join(' '), mxUtils.bind(this, function () {
-				const cell = new mxCell('', new mxGeometry(0, 0, 100, 95), 'image;image=images/thingskit/video.svg;imageAspect=0;');
+				const m3u8 = 'http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8'
+				const mp4 = 'http://vjs.zencdn.net/v/oceans.mp4'
+				const m3u8Type = 'application/x-mpegURL'
+				const mp4Type = 'video/mp4'
+				// const cell = new mxCell('<video></video>', new mxGeometry(0, 0, 100, 95), 'image;image=images/thingskit/video.svg;imageAspect=0;');
+				const template = `
+				<video
+				id="my-player"
+				class="video-js"
+				controls
+				preload="auto"
+				muted="muted"
+				poster="/thingskit-drawio/images/youtube.png"
+				data-setup='{}'>
+				<source src="${mp4}" type="${mp4Type}">
+					<p class="vjs-no-js">
+						To view this video please enable JavaScript, and consider upgrading to a
+						web browser that 
+						<a href="https://videojs.com/html5-video-support/" target="_blank">
+							supports HTML5 video
+						</a>
+					</p>
+				</video>
+				`
+				const cell = new mxCell(template, new mxGeometry(0, 0, 100, 95), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
 				cell.setVertex(true)
 				this.setCellAttributes(cell, { [basicAttr.COMPONENT_TYPE]: componentType.VIDEO })
-				return this.createVertexTemplateFromCells([ cell ], cell.geometry.width, cell.geometry.height, '视频');
+				return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '视频');
 			})),
 		];
@@ -70,7 +94,7 @@
 		var year = date.getFullYear();
 		var month = date.getMonth() + 1;
 		var dates = date.getDate();
-		arr = [ '星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六' ]
+		arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
 		var day = date.getDay();
 		return year + '年' + month + '月' + dates + '日 ' + arr[day];
 	}
@@ -83,7 +107,7 @@
 			const allTimeNode = document.querySelectorAll('.thingKit-component__real-time .real-time__now')
 			for (const time of allTimeNode) {
 				const date = new Date()
-				time.innerHTML = `${ date.getHours() < 10 ? '0' : '' }${ date.getHours() }:${ date.getMinutes() < 10 ? '0' : '' }${ date.getMinutes() }:${ date.getSeconds() < 10 ? '0' : '' }${ date.getSeconds() }`
+				time.innerHTML = `${date.getHours() < 10 ? '0' : ''}${date.getHours()}:${date.getMinutes() < 10 ? '0' : ''}${date.getMinutes()}:${date.getSeconds() < 10 ? '0' : ''}${date.getSeconds()}`
 			}
 		}, 1000)
 	}
--- a/src/main/webapp/js/grapheditor/Format.js
View file @6a7d8a2
+++ b/src/main/webapp/js/grapheditor/Format.js
View file @6a7d8a2
@@ -13339,6 +13339,7 @@ class HandleDynamicEffect {
      * @description 生成映射关系 && 初始化推送消息
      */
     generatorMappingRelation() {
+        this.videoPlay()
         const tsSubCmds = []
         this.enableActList.forEach(each => {
             const { id, type, attr, deviceId, slaveDeviceId } = each
@@ -13533,6 +13534,54 @@ class HandleDynamicEffect {
         }
     }
+
+    videoPlay() {
+        const basicAttr = Sidebar.prototype.enumCellBasicAttribute
+        const videoCell = this.DispatchInstance.contentAllCell.filter(cell => cell.getAttribute(basicAttr.COMPONENT_TYPE) === 'video')
+        const options = {
+            hls: {
+                withCredentials: true
+            }
+        }
+        var player = videojs('my-player', options, function onPlayerReady() {
+            videojs.log('Your player is ready!');
+
+            // In this context, `this` is the player that was created by Video.js.
+            this.play();
+
+            // How about an event listener?
+            this.on('ended', function () {
+                videojs.log('Awww...over so soon?!');
+            });
+        });
+
+        console.log(player)
+        // for (const cell of videoCell) {
+        //     this.graph.getModel().beginUpdate()
+        //     try {
+        //         const options = {
+        //             hls: {
+        //                 withCredentials: true
+        //             }
+        //         }
+        //         var player = videojs('my-player', options, function onPlayerReady() {
+        //             videojs.log('Your player is ready!');
+
+        //             // In this context, `this` is the player that was created by Video.js.
+        //             this.play();
+
+        //             // How about an event listener?
+        //             this.on('ended', function () {
+        //                 videojs.log('Awww...over so soon?!');
+        //             });
+        //         });
+        //         this.graph.refresh(cell);
+        //     } finally {
+        //         this.graph.getModel().endUpdate()
+        //     }
+        // }
+    }
+
     /**
      * @description 验证是否满足条件列表中的任意一条
      * @param subscriptionId