feat(plugin): background music

Author: ly525

back-end/h5-api/extensions/documentation/documentation/1.0.0/full_documentation.json

@@ -14,7 +14,7 @@
       "name": "Apache 2.0",
       "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
     },
-    "x-generation-date": "12/16/2019 10:29:14 PM"
+    "x-generation-date": "01/04/2020 12:13:39 AM"
   },
   "x-strapi-config": {
     "path": "/documentation",

front-end/h5/src/components/core/editor/edit-panel/props.js

@@ -77,7 +77,7 @@ export default {
                 const item = obj.editor
                 // https://vuejs.org/v2/guide/render-function.html
                 const data = {
-                  style: { width: '100%' },
+                  // style: { width: '100%' },
                   props: {
                     ...item.prop || {},
                     // https://vuejs.org/v2/guide/render-function.html#v-model
@@ -86,7 +86,9 @@ export default {
                     // 比如表单 input，如果用户手动删除了 placeholder的内容，程序会用defaultPropValue填充，
                     // 表现在UI上就是：用户永远无法彻底删掉默认值（必须保留至少一个字符）
                     // value: editingElement.pluginProps[propKey] || item.defaultPropValue
-                    value: editingElement.pluginProps[propKey]
+
+                    // https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model
+                    [item.type === 'a-switch' ? 'checked' : 'value']: editingElement.pluginProps[propKey]
                   },
                   on: {
                   // https://vuejs.org/v2/guide/render-function.html#v-model

front-end/h5/src/components/core/editor/modals/preview.vue

@@ -101,12 +101,16 @@ export default {
                     <a-icon type="down" class="page-controller"  onClick={() => { this.postMessage2Iframe('next') }}/>
                     */}
                   </div>
-                  <iframe
-                    id="iframe-for-preview"
-                    src={this.releaseUrl}
-                    frameborder="0"
-                    style="height: 100%;width: 100%;"
-                  ></iframe>
+                  {
+                    // 类似 v-if="this.visible" 的目的：关闭预览弹框之后，销毁 iframe，避免继续播放音乐、视频
+                    // similar with v-if="this.visible": destory the iframe after close the preview dialog to avoid playing the music and video
+                    this.visible && <iframe
+                      id="iframe-for-preview"
+                      src={this.releaseUrl}
+                      frameborder="0"
+                      style="height: 100%;width: 100%;"
+                    ></iframe>
+                  }
                   {/** <engine :work="editingWork" :map-config="{}" /> */}
                 </div>
               </div>

front-end/h5/src/components/core/styles/shortcut-btn.scss

@@ -5,7 +5,7 @@
   justify-content: center;
   height: 60px !important;
   width: 100%;
-  margin-bottom: 15px;
+  margin-bottom: 5px;
 
   border: 1px dashed #fff !important;
   background-color: #f5f8fb !important;

front-end/h5/src/components/plugins/bg-music.svg

@@ -0,0 +1,69 @@
+/*
+ * @Author: ly525
+ * @Date: 2020-01-03 23:43:34
+ * @LastEditors  : ly525
+ * @LastEditTime : 2020-01-04 13:27:58
+ * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-bg-music.js
+ * @Github: https://github.com/ly525/luban-h5
+ * @Description: Do not edit
+ * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ */
+import './styles/bg-music.scss'
+
+export default {
+  name: 'lbp-bg-music',
+  props: {
+    disabled: {
+      type: Boolean,
+      default: true
+    },
+    autoplay: {
+      type: Boolean,
+      default: true,
+      editor: {
+        type: 'a-switch',
+        label: '自动播放'
+      }
+    },
+    src: {
+      type: String,
+      default: 'http://go.163.com/2018/0209/mengniu/audio/bgm.mp3',
+      editor: {
+        type: 'a-input',
+        label: '音乐URL',
+        prop: {
+          type: 'textarea'
+        }
+      }
+    }
+  },
+  data: () => ({
+    isPlaying: true
+  }),
+  methods: {
+    toggle () {
+      let bgAudio = this.$refs.bgAudio
+      if (!bgAudio) return
+
+      this.isPlaying ? bgAudio.pause() : bgAudio.play()
+      this.isPlaying = !this.isPlaying
+    }
+  },
+  render () {
+    const btnStyle = {
+      'animation-play-state': this.isPlaying ? 'running' : 'paused'
+    }
+    return (
+      <div class="bg-music-wrapper" style="display: block;">
+        <div class="bg-music-btn rotate" style={btnStyle} onClick={this.toggle} disabled={this.disabled}>
+          <audio src={this.src} autoplay={this.autoplay} preload loop ref='bgAudio'></audio>
+        </div>
+      </div>
+    )
+  },
+  created () {
+    // 在初始化的时候，autoplay 控制是否播放
+    // 后面是否播放，由用户的点击行为决定
+    this.isPlaying = this.autoplay
+  }
+}

front-end/h5/src/components/plugins/lbp-bg-music.js

@@ -0,0 +1,37 @@
+@keyframes rotating {
+  0% {
+    transform: rotate(0deg)
+  }
+
+  to {
+    transform: rotate(1turn)
+  }
+}
+
+@mixin bg-music-icon {
+  position: absolute;
+  z-index: 200;
+  width: 30px;
+  height: 30px
+}
+
+.bg-music-wrapper {
+  right: 0;
+  top: 0;
+  @include bg-music-icon;
+
+  .bg-music-btn {
+    @include bg-music-icon;
+
+    right: 0;
+    top: 0;
+    border-radius: 15px;
+    background-image: url(../bg-music.svg);
+    background-size: contain;
+    background-repeat: no-repeat;
+
+    &.rotate {
+      animation: rotating 1.2s linear infinite;
+    }
+  }
+}

front-end/h5/src/components/plugins/styles/bg-music.scss

@@ -10,6 +10,7 @@ import LbpFormRadioGroup from '../components/plugins/lbp-form-radio-group'
 import LbpFormCheckboxGroup from '../components/plugins/lbp-form-checkbox-group'
 import LbpBackground from '../components/plugins/lbp-background'
 import LbpSlide from '../components/plugins/lbp-slide'
+import LbpBgMusic from '../components/plugins/lbp-bg-music'
 
 export const pluginsList = [
   {
@@ -134,6 +135,17 @@ export const pluginsList = [
     component: LbpBackground,
     visible: false,
     name: LbpBackground.name
+  },
+  {
+    i18nTitle: {
+      'en-US': 'BgMusic',
+      'zh-CN': '背景音乐'
+    },
+    title: '背景音乐',
+    icon: 'music',
+    component: LbpBgMusic,
+    visible: true,
+    name: LbpBgMusic.name
   }
 ]