fix #85

ly525
1 parent 9eb1bab3
Showing 5 changed files with 48 additions and 6 deletions
front-end/h5/src/components/core/editor/edit-panel/props.js
front-end/h5/src/components/core/models/element.js
front-end/h5/src/components/plugins/lbp-video.js
front-end/h5/src/components/plugins/play.svg
front-end/h5/src/components/plugins/styles/video.scss
@@ -58,6 +58,7 @@ export default {
               }
               return (
                 <a-form-item label={item.label} labelCol={{ span: 8 }} wrapperCol={{ span: 14, offset: 2 }}>
+                  { item.extra && <div slot="extra">{typeof item.extra === 'function' ? item.extra(h) : item.extra}</div>}
                   { h(item.type, data) }
                 </a-form-item>
               )
 import { parsePx } from '../../../utils/element.js'
  
 // #! 编辑状态，不可以点击的按钮，因为点击按钮会触发一些默认行为，比如表单提交等
-const disabledPluginsForEditMode = ['lbp-form-input', 'lbp-form-button']
+const disabledPluginsForEditMode = ['lbp-form-input', 'lbp-form-button', 'lbp-video']
 const cloneObj = (value) => JSON.parse(JSON.stringify(value))
  
 const defaultStyle = {
+import playIcon from './play.svg'
+import './styles/video.scss'
+// 这里有个动画演示，可以用来学习 CSS：《CSS制作播放、暂停按钮》https://codepen.io/chriscoyier/full/lotjh
+
 export default {
   name: 'lbp-video',
   props: {
@@ -12,17 +16,29 @@ export default {
   },
   watch: {
     src () {
-      this.$el.innerHTML = this.src
+      this.appendIframe()
     }
   },
   mounted () {
-    this.$el.innerHTML = this.src
+    this.appendIframe()
+  },
+  methods: {
+    appendIframe () {
+      if (this.src) {
+        this.$el.innerHTML = this.src
+      }
+    }
   },
-
   render (h) {
-    const style = this.disabled ? { 'pointer-events': 'none' } : {}
+    const style = this.disabled ? { 'pointer-events': 'none' } : { }
     return (
-      <div style={style}></div>
+      <div class="lbc-video" style={style}>
+        {
+          this.disabled
+            ? <video playsinline="true" webkit-playsinline="" width="100%" height="100%" poster={playIcon}><source type="video/mp4" /></video>
+            : <div></div>
+        }
+      </div>
     )
   },
   editorConfig: {
@@ -33,6 +49,9 @@ export default {
         prop: {
           type: 'textarea'
         },
+        extra: (h) => {
+          return <a href='https://github.com/ly525/luban-h5/issues/85' target='_blank'>教程(Tutorial)</a>
+        },
         defaultPropValue: ''
       }
     },
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
+    <title>Rectangle 3</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="play" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-29" fill-rule="nonzero">
+            <rect id="Rectangle-3" fill="#D8D8D8" opacity="0" x="0" y="0" width="320" height="180"></rect>
+            <g id="Group-2" transform="translate(124.000000, 54.000000)">
+                <circle id="Combined-Shape" fill="#FFFFFF" opacity="0.400000006" cx="36" cy="36" r="36"></circle>
+                <path d="M52.5014571,38.4687039 L29.5125474,53.0910406 C28.4252016,53.7826583 26.9830667,53.4618573 26.291449,52.3745114 C26.0533764,52.000219 25.9269295,51.5658183 25.9269295,51.1222268 L25.9269295,21.8775534 C25.9269295,20.588889 26.9715984,19.5442201 28.2602628,19.5442201 C28.7038543,19.5442201 29.138255,19.6706671 29.5125474,19.9087397 L52.5014571,34.5310764 C53.5888029,35.2226941 53.909604,36.6648289 53.2179863,37.7521747 C53.0345158,38.0406229 52.7899052,38.2852335 52.5014571,38.4687039 Z" id="Triangle-2" fill="#000000" opacity="0.5"></path>
+            </g>
+        </g>
+    </g>
+</svg>
 \ No newline at end of file
+.lbc-video {
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+}
 \ No newline at end of file