@mpxjs/webpack-plugin 2.8.54 → 2.8.57

package/lib/runtime/components/web/mpx-video.vue

@@ -1,20 +1,14 @@
 <template>
   <video
     ref="_mpx_video_ref"
-    :class="classList"
-    :src="src"
-    :controls="showControlsTool"
-    :autoplay="autoplay"
-    :loop="loop"
-    :muted="mutedCopy"
-    :poster="poster"
+    class="video-js"
     v-bind="playsinlineAttr"
-  >
-  </video>
-</template>
-
-<script>
+   ></video>
+ </template>
+ <script>
   import { inheritEvent } from './getInnerListeners'
+  import videojs from 'video.js'
+  import 'video.js/dist/video-js.min.css'
 
   export default {
     name: 'mpx-video',
@@ -54,7 +48,7 @@
         type: Boolean,
         default: false
       },
-      initialTime: { // done
+      initialTime: {
         type: Number,
         default: 0
       },
@@ -63,6 +57,10 @@
         type: Boolean,
         default: true
       },
+      showBottomProgress: { // done
+        type: Boolean,
+        default: true
+      },
       showFullscreenBtn: { // done
         type: Boolean,
         default: true
@@ -125,135 +123,166 @@
         default: false
       },
       playsinline: {
-        type: Boolean,
-        default: true
-      }
-    },
-    computed: {
-      playsinlineAttr () {
-        if (!this.playsinline) return {}
-        return {
-          'webkit-playsinline': true,
-          'playsinline': true,
-          'x5-playsinline': true
-        }
-      }
+      type: Boolean,
+      default: true
+    }
     },
     data () {
       return {
-        showControlsTool: this.controls,
-        mutedCopy: this.muted,
-        classList: ''
       }
     },
+    computed: {
+    playsinlineAttr () {
+      if (!this.playsinline) return {}
+      return {
+        'webkit-playsinline': true,
+        'playsinline': true,
+        'x5-playsinline': true,
+        'x5-video-orientation': 'landscape|portrait'
+      }
+    }
+  },
     watch: {
-      muted (val) {
-        this.mutedCopy = val
+      muted: function (val) {
+        this._player?.muted(val)
+      },
+      controls: function (show) {
+        this.$emit('controlstoggle', inheritEvent('controlstoggle', {}, { show }))
       }
     },
     mounted () {
+      const videoNode = this.$refs['_mpx_video_ref']
+      this._player = videojs(videoNode, {
+        controls: true,
+        sources:[
+          {
+            src: this.src
+          }
+        ],
+        autoplay: this.autoplay,
+        loop: this.loop,
+         /**
+          log 若 controls 属性值为 false 则设置 poster 无效
+        */
+        poster: this.controls ? this.poster : ''
+      }, function () {
+      })
+      this.initPlayer()
       this.initStyle()
       this.initEvent()
     },
     methods: {
-      initStyle () {
-        const videoNode = this.$refs['_mpx_video_ref']
+      initPlayer () {
+        this._player.muted(this.muted)
         if (this.initialTime) {
-          videoNode.currentTime = this.initialTime
+          this._player.currentTime(this.initialTime)
         }
-        if (this.autoplay) { // log 解决autoplay无法自动播放问题
-          this.mutedCopy = true
-        }
-        if (!this.showProgress) this.classList += ' mpx-no-show_progress'
-        if (!this.showFullscreenBtn) this.classList += ' mpx-no-show_fullscreen_btn'
-        if (!this.showPlayBtn) this.classList += ' mpx-no-show_play_btn'
-        if (!this.showCenterPlayBtn) this.classList += ' mpx-no-show_center_play_btn'
-        if (!this.showMuteBtn) this.classList += ' mpx-no-show_mute_btn'
       },
-      initEvent () {
-        const videoNode = this.$refs['_mpx_video_ref']
+      initStyle () {
+        if (!this.controls) this._player.el_.classList.add('mpx-no-show_controls')
+
+        if (!this.showBottomProgress) this._player.el_.classList.add('mpx-no-show_progress')
+
+        /**
+          showProgress若不设置，宽度大于240时才会显示
+        */
+        if (!this.showProgress || (this._player.el_.offsetWidth < 240 && this.showProgress)) this._player.el_.classList.add('mpx-no-show_progress')
 
-        videoNode.addEventListener('play', (e) => {
+        if (!this.showFullscreenBtn) this._player.el_.classList.add('mpx-no-show_fullscreen_btn')
+
+        if (!this.showPlayBtn) this._player.el_.classList.add('mpx-no-show_play_btn')
+
+        if (!this.showCenterPlayBtn) this._player.el_.classList.add('mpx-no-show_center_play_btn')
+
+        if (!this.showMuteBtn) this._player.el_.classList.add('mpx-no-show_mute_btn')
+      },
+      initEvent () {
+        this._player.on('play', (e) => {
           this.$emit('play', inheritEvent('play', e, {}))
         })
 
-        videoNode.addEventListener('pause', (e) => {
+        this._player.on('pause', (e) => {
           this.$emit('pause', inheritEvent('pause', e, {}))
         })
 
-        videoNode.addEventListener('ended', (e) => {
+        this._player.on('ended', (e) => {
           this.$emit('ended', inheritEvent('ended', e, {}))
         })
 
-        videoNode.addEventListener('timeupdate', (e) => {
-          const eNode = e.target
-          this.$emit('timeupdate', inheritEvent('timeupdate', e, { currentTime: eNode.currentTime, duration: eNode.duration }))
+        this._player.on('timeupdate', (e) => {
+          this.$emit('timeupdate', inheritEvent('timeupdate', e, {}))
         })
 
-        videoNode.addEventListener('error', (e) => {
+        this._player.on('error', (e) => {
           this.$emit('error', inheritEvent('error', e, {}))
         })
 
-        videoNode.addEventListener('waiting', (e) => {
+        this._player.on('waiting', (e) => {
           this.$emit('waiting', inheritEvent('waiting', e, {}))
         })
-
-        videoNode.addEventListener('loadedmetadata', (e) => {
-          const eNode = e.target
-          this.$emit('loadedmetadata', inheritEvent('loadedmetadata', e, { width: eNode.videoWidth, height: eNode.videoHeight, duration: eNode.duration }))
+        this._player.on('loadedmetadata', (e) => {
+          this.$emit('loadedmetadata', inheritEvent('loadedmetadata', e, {}))
         })
 
-        videoNode.addEventListener('progress', (e) => {
+        this._player.on('progress', (e) => {
           const eNode = e.target
           const buffered = (eNode?.buffered?.end(0)) / (eNode?.duration)
           this.$emit('progress', inheritEvent('progress', e, { buffered: buffered * 100 }))
         })
 
-        videoNode.addEventListener('seeked', (e) => {
+        this._player.on('seeked', (e) => {
           const eNode = e.target
-          this.$emit('seekcomplete', inheritEvent('seekcomplete', e, { position: eNode.currentTime }))
+          this.$emit('seekcomplete', inheritEvent('seekcomplete', e, { position: eNode.currentTime  }))
         })
-
-        videoNode.addEventListener('fullscreenchange', (e) => {
-          //  TODO direction
-          if (document.isFullScreen) {
-            this.$emit('fullscreenchange', inheritEvent('fullscreenchange', e, { fullScreen: true }))
-          } else {
-            this.$emit('fullscreenchange', inheritEvent('fullscreenchange', e, { fullScreen: false }))
+        this._player.on('fullscreenchange', (e) => {
+          if (!this._player.paused()) {
+            // hack: 解决退出全屏自动暂停
+            setTimeout(() => {
+              this._player.play()
+            }, 500)
           }
+          this.$emit('fullscreenchange', inheritEvent('fullscreenchange', e, { fullScreen: this._player.isFullscreen() }))
         })
 
-        videoNode.addEventListener('enterpictureinpicture', (e) => {
+        this._player.on('enterpictureinpicture', (e) => {
           this.$emit('enterpictureinpicture', inheritEvent('enterpictureinpicture', e, {}))
         })
 
-        videoNode.addEventListener('leavepictureinpicture', (e) => {
+        this._player.on('leavepictureinpicture', (e) => {
           this.$emit('leavepictureinpicture', inheritEvent('leavepictureinpicture', e, {}))
         })
+
       }
     }
   }
-</script>
+ </script>
+
+ <style lang="stylus">
+
+    .vjs-chapters-button
+      display: none !important
+
+   .mpx-no-show_controls
+     .vjs-control-bar
+       display none !important
 
-<style lang="stylus">
-  .mpx-video-container
-    .mpx-no-show_progress
-      &::-webkit-media-controls-timeline
-        display none !important
+   .mpx-no-show_progress
+     .vjs-progress-control
+       display none !important
 
-    .mpx-no-show_fullscreen_btn
-      &::-webkit-media-controls-fullscreen-button
-        display none !important
+   .mpx-no-show_fullscreen_btn
+     .vjs-fullscreen-control
+       display none !important
 
-    .mpx-no-show_play_btn
-      &::-webkit-media-controls-play-button
-        display none !important
+   .mpx-no-show_play_btn
+     .vjs-play-control
+       display none !important
 
-    .mpx-no-show_center_play_btn
-      &::-webkit-media-controls-start-playback-button
-        display none !important
+   .mpx-no-show_center_play_btn
+     .vjs-big-play-button
+       display none !important
 
-    .mpx-no-show_mute_btn
-      &::-webkit-media-controls-mute-button
-        display none !important
-</style>
+   .mpx-no-show_mute_btn
+     .vjs-mute-control
+       display none !important
+ </style>

package/lib/runtime/components/web/mpx-web-view.vue

@@ -1,5 +1,5 @@
 <template>
-  <iframe ref="mpxIframe" class="mpx-iframe" :src="currentUrl"></iframe>
+  <iframe ref="mpxIframe" class="mpx-iframe" :src="currentUrl" :key="currentUrl"></iframe>
 </template>
 
 <script>
@@ -11,91 +11,115 @@
   const eventMessage = 'message'
   const mpx = global.__mpx
   export default {
-    data: function () {
-      return {
-        origin: '',
-        messageList: [],
-        Loaded: false,
-        isActived: false,
-        mpxIframe: null,
-        isPostMessage: false,
-        currentUrl: ''
-      }
-    },
     props: {
       src: {
         type: String
       }
     },
-    watch: {
-      src (value) {
-        let host
-        host = value.split('/')
+    computed: {
+      host () {
+        let host = this.src.split('/')
         if (host[2]) {
           host = host[0] + '//' + host[2]
         } else {
           host = ''
         }
-        const hostValidate = this.hostValidate(host)
+        return host
+      },
+      currentUrl () {
+        if (!this.src) return ''
+        const hostValidate = this.hostValidate(this.host)
         if (!hostValidate) {
           console.error('访问页面域名不符合domainWhiteLists白名单配置，请确认是否正确配置该域名白名单')
-          return
+          return ''
         }
-        this.currentUrl = value
-        this.mpxIframe = this.$refs.mpxIframe
-        this.mpxIframe.addEventListener('load', (event) => {
-          this.Loaded = true
-          const loadData = {
-            src: this.src
+        return this.src
+      },
+      loadData () {
+        return {
+          src: this.host,
+          fullUrl: this.src
+        }
+      }
+    },
+    watch: {
+      currentUrl: {
+        handler (value) {
+          if (!value) {
+            this.$emit(eventError, getCustomEvent(eventError, {
+              ...this.loadData,
+              errMsg: 'web-view load failed due to not in domain list'
+            }, this))
+          } else {
+            this.$nextTick(() => {
+              if (this.$refs.mpxIframe && this.mpxIframe != this.$refs.mpxIframe) {
+                this.mpxIframe = this.$refs.mpxIframe
+                this.mpxIframe.addEventListener('load', (event) => {
+                  this.$emit(eventLoad, getCustomEvent(eventLoad, this.loadData, this))
+                })
+              }
+            })
           }
-          this.$emit(eventLoad, getCustomEvent(eventLoad, loadData, this))
-        })
+        },
+        immediate: true
       }
     },
+    beforeCreate () {
+      this.messageList = []
+    },
     mounted () {
-      setTimeout(() => {
-        if (!this.Loaded) {
-          const loadData = {
-            src: this.src
-          }
-          this.$emit(eventError, getCustomEvent(eventError, loadData, this))
-        }
-      }, 1000)
-      window.addEventListener('message', (event) => {
+      window.addEventListener('message', this.messageCallback)
+    },
+    deactivated () {
+      if (!this.messageList.length) {
+        return
+      }
+      let data = {
+        type: 'message',
+        data: this.messageList
+      }
+      this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
+    },
+    destroyed () {
+      window.removeEventListener('message', this.messageCallback)
+      if (!this.messageList.length) {
+        return
+      }
+      let data = {
+        type: 'message',
+        data: this.messageList
+      }
+      this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
+    },
+    methods: {
+      messageCallback (event) {
         const hostValidate = this.hostValidate(event.origin)
-        const hasPostMessage = this.mpxIframe.contentWindow && this.mpxIframe.contentWindow.postMessage
         const data = event.data
         const value = data.payload
-        if (!this.isActived || !hostValidate) {
+        if (!hostValidate) {
           return
         }
         let asyncCallback = null
         switch (data.type) {
           case 'postMessage':
-            this.isPostMessage = true
-            this.messageList.push(value.data)
+            this.messageList.push(value)
             asyncCallback = Promise.resolve({
               errMsg: 'invokeWebappApi:ok'
             })
             break
           case 'navigateTo':
-            this.isActived = false
             asyncCallback = navigateTo(value)
             break
           case 'navigateBack':
-            this.isActived = false
             asyncCallback = value ? navigateBack(value) : navigateBack()
             break
           case 'redirectTo':
-            this.isActived = false
             asyncCallback = redirectTo(value)
             break
           case 'switchTab':
-            this.isActived = false
             asyncCallback = switchTab(value)
             break
           case 'reLaunch':
-            this.isActived = false
             asyncCallback = reLaunch(value)
             break
           case 'getLocation':
@@ -110,45 +134,19 @@
             break
         }
         asyncCallback && asyncCallback.then((res) => {
-          hasPostMessage && this.mpxIframe.contentWindow.postMessage({
+          this.mpxIframe && this.mpxIframe.contentWindow && this.mpxIframe.contentWindow.postMessage && this.mpxIframe.contentWindow.postMessage({
             type: data.type,
             callbackId: data.callbackId,
             result: res
           }, event.origin)
         }).catch((error) => {
-          hasPostMessage && this.mpxIframe.contentWindow.postMessage({
+          this.mpxIframe && this.mpxIframe.contentWindow && this.mpxIframe.contentWindow.postMessage && this.mpxIframe.contentWindow.postMessage({
             type: data.type,
             callbackId: data.callbackId,
             error
           }, event.origin)
         })
-      })
-    },
-    activated () {
-      this.isActived = true
-      this.isPostMessage = false
-    },
-    deactivated () {
-      if (!this.isPostMessage) {
-        return
-      }
-      let data = {
-        type: 'message',
-        data: this.messageList
-      }
-      this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
-    },
-    destroyed () {
-      if (!this.isPostMessage) {
-        return
-      }
-      let data = {
-        type: 'message',
-        data: this.messageList
-      }
-      this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
-    },
-    methods: {
+      },
       hostValidate (host) {
         const hostWhitelists = mpx.config.webviewConfig && mpx.config.webviewConfig.hostWhitelists || []
         if (hostWhitelists.length) {

package/lib/style-compiler/index.js

@@ -89,7 +89,7 @@ module.exports = function (css, map) {
       .process(css, options)
       .then(result => {
         // ali环境添加全局样式抹平root差异
-        if (mode === 'ali' && isApp) {
+        if ((mode === 'ali' || mode === 'web') && isApp) {
           result.css += `\n.${MPX_ROOT_VIEW} { display: initial }\n.${MPX_APP_MODULE_ID} { line-height: normal }`
         }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.8.54",
+  "version": "2.8.57",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -54,7 +54,8 @@
     "postcss-modules-values": "^4.0.0",
     "postcss-selector-parser": "^6.0.8",
     "postcss-value-parser": "^4.0.2",
-    "source-list-map": "^2.0.0"
+    "source-list-map": "^2.0.0",
+    "video.js": "^8.6.0"
   },
   "peerDependencies": {
     "webpack": "^5.48.0"
@@ -81,5 +82,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "e39ad9b35cdb336f271f424dbfae9cf7688c8d0d"
+  "gitHead": "f533e8035850c01d5e98fc748ee4d57f60ba9dba"
 }