@aochuang/common 1.0.138 → 1.0.139

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.139",
   "description": "",
   "main": "index.js",
   "publishConfig": {