@aochuang/common 1.0.138 → 1.0.141

package/common/voice/voice.vue

@@ -81,25 +81,14 @@ export default {
     }
   },
   created () {
-    const resolvePendingStart = () => {
-      if (this._pendingStartResolve) {
-        this._pendingStartResolve()
-        this._pendingStartResolve = null
-      }
-    }
-    const releasePlayEndPromise = () => {
-      if (this.playEndPromise && this.playEndPromise.resolve) {
-        this.playEndPromise.resolve()
-      }
-    }
     const newFactory = (Factory, options) => {
       return new Factory(Object.assign({
         playRate: this.playRate,
         onError: (e) => {
           this.starting = false
           this.playStatus = 'stop'
-          resolvePendingStart()
-          releasePlayEndPromise()
+          this._resolvePendingStart()
+          this._releasePlayEndPromise()
           this.$set(this.errorMsgMap, this.playId, e.message || '未知错误')
           this.$emit('error', Object.assign({
             playId:  this.playId
@@ -178,9 +167,15 @@ export default {
     start (id, val, total, cb) {
       return new Promise((resolve) => {
         this.stop()
+        const startToken = (this._startToken || 0) + 1
+        this._startToken = startToken
         this._pendingStartResolve = resolve
         const playEndPromise = this.playEndPromise || Promise.resolve()
         playEndPromise.finally(() => {
+          if (this._startToken !== startToken) {
+            resolve()
+            return
+          }
           this.playEndPromise = createPromise()
           val = formatOssPath(val)
           this.starting = true
@@ -189,12 +184,16 @@ export default {
           this.$delete(this.errorMsgMap, id)
           this.$nextTick(() => {
             this.player.setUrl(val, (ctx) => {
+              if (this._startToken !== startToken) {
+                resolve()
+                return
+              }
               cb && cb(ctx)
               if (!ctx || ctx.status !== 'success') {
                 this.starting = false
                 this.playStatus = 'stop'
-                resolvePendingStart()
-                releasePlayEndPromise()
+                this._resolvePendingStart()
+                this._releasePlayEndPromise()
                 resolve()
                 return
               }
@@ -203,7 +202,11 @@ export default {
               Promise.all([
                 this.player.start()
               ]).finally(() => {
-                resolvePendingStart()
+                if (this._startToken !== startToken) {
+                  resolve()
+                  return
+                }
+                this._resolvePendingStart()
                 resolve()
               })
             })
@@ -225,14 +228,12 @@ export default {
       this.player.resume()
     },
     stop () {
+      this._startToken = (this._startToken || 0) + 1
       this.starting = false
       this.playId = null
       this.playStatus = 'stop'
-      if (this._pendingStartResolve) {
-        this._pendingStartResolve()
-        this._pendingStartResolve = null
-      }
-      this.player.stop()
+      this._resolvePendingStart()
+      this.player && this.player.stop()
     },
     isPlaying (id) {
       return this.playStatus === 'play' && this.playId === id
@@ -288,6 +289,17 @@ export default {
         this.stop()
       }
       this.$delete(this.errorMsgMap, id)
+    },
+    _resolvePendingStart () {
+      if (this._pendingStartResolve) {
+        this._pendingStartResolve()
+        this._pendingStartResolve = null
+      }
+    },
+    _releasePlayEndPromise () {
+      if (this.playEndPromise && this.playEndPromise.resolve) {
+        this.playEndPromise.resolve()
+      }
     }
   },
   render () {

package/common/voice-player/voice-player.vue

@@ -287,6 +287,7 @@ export default {
     },
     playCurrPosition (val) {
       this.controlPlayPosition = val
+      this.$emit('progress-change', val)
     },
     url () {
       this.innerUrl = this.url
@@ -396,6 +397,69 @@ export default {
       }
       window.open(formatOssPath(this.voiceSrc), '_blank')
     },
+    setPlayPosition (position) {
+      let targetValue = parseFloat(position)
+      if (!Number.isFinite(targetValue)) {
+        return
+      }
+      const rawTargetValue = targetValue
+      if (this.voiceSeconds) {
+        targetValue = Math.max(0, Math.min(targetValue, Number(this.voiceSeconds)))
+      }
+      console.log('[vtt-sync] ac voice setPlayPosition', {
+        position,
+        rawTargetValue,
+        targetValue,
+        voiceSeconds: this.voiceSeconds,
+        controlPlayPosition: this.controlPlayPosition,
+        isPlaying: this.isPlaying,
+        isPause: this.isPause,
+        playUrl: this.AcVoice && this.AcVoice.playUrl,
+        innerUrl: this.innerUrl
+      })
+      clearTimeout(this._controlChangeTimer)
+      this.controlPlayPosition = targetValue
+      if (this.AcVoice.playUrl !== this.innerUrl) {
+        return Promise.all([
+          this.play()
+        ]).then(() => {
+          if (!this.AcVoice.isSuperChangeProgress(this.innerUrl)) {
+            !this._notTips && this.$warn('AAC格式音频不支持更改播放进度，可以下载本地播放', () => {
+              this._notTips = false
+            })
+            this._notTips = true
+            return
+          }
+          this._controlChangeTimer = setTimeout(() => {
+            this.AcVoice.setPosition(targetValue)
+          }, 100)
+        })
+      } else {
+        if (!this.isPlaying) {
+          return this.play().then(() => {
+            if (!this.AcVoice.isSuperChangeProgress(this.innerUrl)) {
+              !this._notTips && this.$warn('AAC格式音频不支持更改播放进度，可以下载本地播放', () => {
+                this._notTips = false
+              })
+              this._notTips = true
+              return
+            }
+            this._controlChangeTimer = setTimeout(() => {
+              this.AcVoice.setPosition(targetValue)
+            }, 100)
+          })
+        } else {
+          if (!this.AcVoice.isSuperChangeProgress(this.innerUrl)) {
+            !this._notTips && this.$warn('AAC格式音频不支持更改播放进度，可以下载本地播放', () => {
+              this._notTips = false
+            })
+            this._notTips = true
+            return
+          }
+          this.AcVoice.setPosition(targetValue)
+        }
+      }
+    },
     handleControlChange (evt) {
       const targetValue = evt.target.value
       clearTimeout(this._controlChangeTimer)

package/components/video/video.vue

@@ -1,23 +1,76 @@
 <template>
-  <video 
-    class="ui-video" 
-    :autoplay="autoplay" 
-    :width="width" 
-    :poster="poster" 
-    :preload="preload" 
-    :height="height" 
-    :controls="controls" 
-    @error="handleError"
+  <div
+    class="ui-video"
+    :class="{'is-poster-play-mode': posterPlayMode}"
+    :style="wrapperStyle"
   >
-    <source :src="innerSrc">
-    您的浏览器不支持 video 标签。
-  </video>
+    <template v-if="posterPlayMode">
+      <div
+        v-if="innerSrc"
+        class="ui-video__cover"
+        :class="{'is-empty': !innerPoster}"
+        :style="coverStyle"
+        @click="handlePlayClick"
+      >
+        <div class="ui-video__cover-mask"></div>
+        <div class="ui-video__cover-play">
+          <ui-icon name="play-line1" :size="24"></ui-icon>
+        </div>
+      </div>
+      <div v-else class="ui-video__poster-only" :style="coverStyle"></div>
+      <div v-if="showFloatingPlayer" ref="floatingLayer" class="ui-video__floating-layer" @click.self="handleCloseClick">
+        <div class="ui-video__floating-panel">
+          <div class="ui-video__floating-head">
+            <ui-icon class="ui-video__floating-close" name="close-circle-line" :size="28" @click="handleCloseClick"></ui-icon>
+          </div>
+          <div class="ui-video__floating-body">
+            <video
+              ref="floatingVideo"
+              class="ui-video__native"
+              :autoplay="autoplay"
+              :poster="poster"
+              :preload="preload"
+              :controls="controls"
+              playsinline
+              webkit-playsinline
+              @error="handleError"
+            >
+              <source :src="innerSrc">
+              您的浏览器不支持 video 标签。
+            </video>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <video
+        ref="nativeVideo"
+        class="ui-video__native"
+        :autoplay="autoplay"
+        :width="width"
+        :poster="poster"
+        :preload="preload"
+        :height="height"
+        :controls="controls"
+        playsinline
+        webkit-playsinline
+        @error="handleError"
+      >
+        <source :src="innerSrc">
+        您的浏览器不支持 video 标签。
+      </video>
+    </template>
+  </div>
 </template>
 <script>
+import UiIcon from '../icon'
 import { formatOssPath } from '../../utils/oss'
 
 export default {
   name: 'UiVideo',
+  components: {
+    UiIcon
+  },
   props: {
     width: {
       type: String
@@ -39,6 +92,10 @@ export default {
       type: Boolean,
       default: false
     },
+    posterPlayMode: {
+      type: Boolean,
+      default: false
+    },
     src: {
       type: String
     }
@@ -46,36 +103,92 @@ export default {
   computed: {
     style () {
       return {
-        width: this.width,
-        height: this.height
+        width: this.formatSize(this.width),
+        height: this.formatSize(this.height)
       }
     },
+    wrapperStyle () {
+      if (!this.posterPlayMode) {
+        return null
+      }
+      return {
+        width: this.formatSize(this.width),
+        height: this.formatSize(this.height)
+      }
+    },
+    innerPoster () {
+      return formatOssPath(this.poster)
+    },
+    coverStyle () {
+      const style = {
+        width: this.formatSize(this.width),
+        height: this.formatSize(this.height)
+      }
+      if (this.innerPoster) {
+        style.backgroundImage = `url(${this.innerPoster})`
+      }
+      return style
+    },
     innerSrc () {
       return formatOssPath(this.src)
     }
   },
   data () {
     return {
-      isError: false
+      isError: false,
+      showFloatingPlayer: false
     }
   },
   watch: {
     src () {
+      clearTimeout(this._checkErrorTimer)
+      this._checkErrorTimer = null
       this.isError = false
+      this.showFloatingPlayer = false
+      if (!this.posterPlayMode) {
+        this.$nextTick(() => {
+          this.loopCheckError()
+        })
+      }
     }
   },
   mounted () {
-    this.loopCheckError()
+    if (!this.posterPlayMode) {
+      this.loopCheckError()
+    }
   },
   methods: {
+    formatSize (value) {
+      if (!value && value !== 0) {
+        return null
+      }
+      if (typeof value === 'number') {
+        return `${value}px`
+      }
+      if (/^\d+$/.test(String(value))) {
+        return `${value}px`
+      }
+      return value
+    },
+    getVideoElement () {
+      if (this.posterPlayMode) {
+        return this.$refs.floatingVideo
+      }
+      return this.$refs.nativeVideo
+    },
     loopCheckError () {
       if (this.isError) {
         return
       }
       this._checkErrorTimer = setTimeout(() => {
+        const videoEl = this.getVideoElement()
+        if (!videoEl) {
+          this.loopCheckError()
+          return
+        }
         // 0:没有关于媒体资源的可用信息，或者媒体资源尚未加载。
         // 3: 媒体元素尝试加载资源，但没有找到有效的媒体源（可能是资源 URL 错误、403/404 等网络错误，或所有<source>标签指定的资源都无法加载）。
-        if (this.$el.readyState === 0 && this.$el.networkState === 3) {
+        if (videoEl.readyState === 0 && videoEl.networkState === 3) {
           this.isError = true
           this.$emit('error')
         } else {
@@ -86,10 +199,48 @@ export default {
     handleError () {
       this.isError = true
       this.$emit('error')
+    },
+    appendFloatingLayer () {
+      const layerEl = this.$refs.floatingLayer
+      if (!layerEl || !document.body || layerEl.parentNode === document.body) {
+        return
+      }
+      document.body.appendChild(layerEl)
+    },
+    removeFloatingLayer () {
+      const layerEl = this.$refs.floatingLayer
+      if (!layerEl || layerEl.parentNode !== document.body) {
+        return
+      }
+      document.body.removeChild(layerEl)
+    },
+    handlePlayClick () {
+      this.showFloatingPlayer = true
+      this.$nextTick(() => {
+        this.appendFloatingLayer()
+        const videoEl = this.$refs.floatingVideo
+        if (!videoEl) {
+          return
+        }
+        if (!this._checkErrorTimer && !this.isError) {
+          this.loopCheckError()
+        }
+        if (videoEl.play) {
+          videoEl.play().catch(() => {})
+        }
+      })
+    },
+    handleCloseClick () {
+      clearTimeout(this._checkErrorTimer)
+      this._checkErrorTimer = null
+      this.removeFloatingLayer()
+      this.showFloatingPlayer = false
     }
   },
   beforeDestroy () {
     clearTimeout(this._checkErrorTimer)
+    this._checkErrorTimer = null
+    this.removeFloatingLayer()
   }
 }
 </script>
@@ -97,5 +248,95 @@ export default {
 .ui-video {
   background-color: #000;
   object-fit: contain;
+  position: relative;
+  z-index: 0;
+  display: block;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+}
+.ui-video__native{
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  background-color: #000;
+  object-fit: contain;
+}
+.ui-video.is-poster-play-mode{
+  overflow: hidden;
+  display: block;
+}
+.ui-video__cover{
+  position: relative;
+  background-color: #000;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  cursor: pointer;
+  display: block;
+}
+.ui-video__cover.is-empty{
+  background-image: none;
+}
+.ui-video__poster-only{
+  background-color: #000;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  display: block;
+}
+.ui-video__floating-layer{
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background-color: rgba(0,0,0,.72);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 0;
+  box-sizing: border-box;
+}
+.ui-video__floating-panel{
+  width: 100%;
+  max-width: 960px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.ui-video__floating-head{
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px 8px 0;
+  color: #fff;
+}
+.ui-video__floating-close{
+  cursor: pointer;
+}
+.ui-video__floating-body{
+  padding: 8px 0 12px;
+}
+.ui-video__floating-body .ui-video__native{
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  max-height: calc(100vh - 120px);
+}
+.ui-video__cover-mask{
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0,0,0,.2);
+}
+.ui-video__cover-play{
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 44px;
+  height: 44px;
+  margin-left: -22px;
+  margin-top: -22px;
+  border-radius: 50%;
+  background-color: rgba(0,0,0,.55);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aochuang/common",
-  "version": "1.0.138",
+  "version": "1.0.141",
   "description": "",
   "main": "index.js",
   "publishConfig": {