@aochuang/common 1.0.137 → 1.0.139

package/components/icon/icon.vue

@@ -9,11 +9,11 @@ export default {
     name: {
       type: String,
       required: true
-    },
+    }, 
     size: {
       type: Number
     },
-    color: { 
+    color: {  
       type: String
     }
   },

package/components/image/index.js

@@ -1,5 +1,9 @@
 import Image from './image'
-import { setImageClickFn, getThumbnailSrc as _getThumbnailSrc, removeThumbnailSrc as _removeThumbnailSrc } from './util'
+import {
+  setImageClickFn,
+  getThumbnailSrc as _getThumbnailSrc,
+  removeThumbnailSrc as _removeThumbnailSrc
+} from './util'
 
 Image.install = (Vue, options) => {
   options = Object.assign({

package/components/image/util.js

@@ -106,6 +106,39 @@ export function getThumbnailSrc (url, width) {
   }
 }
 
+function decodeUrlParam (value) {
+  try {
+    return decodeURIComponent(value.replace(/\+/g, ' '))
+  } catch (e) {
+    return value
+  }
+}
+
+function removeThumbnailQuery (url) {
+  const hashIndex = url.indexOf('#')
+  const hash = hashIndex > -1 ? url.substr(hashIndex) : ''
+  const urlWithoutHash = hashIndex > -1 ? url.substr(0, hashIndex) : url
+  const queryIndex = urlWithoutHash.indexOf('?')
+
+  if (queryIndex < 0) {
+    return url
+  }
+
+  const baseUrl = urlWithoutHash.substr(0, queryIndex)
+  const query = urlWithoutHash.substr(queryIndex + 1)
+  const nextQuery = query.split('&').filter(param => {
+    const equalIndex = param.indexOf('=')
+    const key = decodeUrlParam(equalIndex > -1 ? param.substr(0, equalIndex) : param)
+    const value = decodeUrlParam(equalIndex > -1 ? param.substr(equalIndex + 1) : '')
+    const isAliyunThumbnail = key === 'x-oss-process' && /^image\/resize,w_[^/]+$/.test(value)
+    const isTencentThumbnail = /^imageMogr2\/thumbnail\/[^/]+$/.test(key) && !value
+
+    return !isAliyunThumbnail && !isTencentThumbnail
+  }).join('&')
+
+  return baseUrl + (nextQuery ? '?' + nextQuery : '') + hash
+}
+
 /**
  * 移除图片缩略图裁剪参数，保留其他查询参数及 hash
  */
@@ -115,27 +148,29 @@ export function removeThumbnailSrc (url) {
   }
 
   const hashIndex = url.indexOf('#')
-  const hash = hashIndex >= 0 ? url.substr(hashIndex) : ''
-  let source = hashIndex >= 0 ? url.substr(0, hashIndex) : url
-
-  // /oss/view 和 /oss/ 地址的真实图片在 url 参数中，递归处理后再重新编码
-  if (source.indexOf('/oss/view') > -1 || source.indexOf('/oss/') > -1) {
-    const marker = source.indexOf('/oss/view') > -1 ? '/oss/view' : '/oss/'
-    const markerIndex = source.indexOf(marker)
-    const prefix = source.substr(0, markerIndex + marker.length)
-    const params = getUrlParams(source)
-    if (params.url) {
-      params.url = removeThumbnailSrc(params.url)
-      source = buildUrl(prefix, params)
-      return source + hash
-    }
+  const hash = hashIndex > -1 ? url.substr(hashIndex) : ''
+  const urlWithoutHash = hashIndex > -1 ? url.substr(0, hashIndex) : url
+  let proxyPath = ''
+
+  if (urlWithoutHash.indexOf('/oss/view') > -1) {
+    proxyPath = '/oss/view'
+  } else if (urlWithoutHash.indexOf('/oss/') > -1) {
+    proxyPath = '/oss/'
+  }
+
+  if (!proxyPath) {
+    return removeThumbnailQuery(url)
+  }
+
+  const urlParams = getUrlParams(urlWithoutHash)
+  if (!urlParams.url) {
+    return url
   }
 
-  // 阿里云参数是普通 query 参数；腾讯云参数是无等号的 query path
-  source = source
-    .replace(/([?&])x-oss-process=image\/resize(?:,[^&#]*)?(?=&|$)/ig, '$1')
-    .replace(/([?&])imageMogr2\/thumbnail\/[^&#]*(?=&|$)/ig, '$1')
-    .replace('?&', '?')
-    .replace(/[?&]$/, '')
-  return source + hash
+  return buildUrl(
+    urlWithoutHash.substr(0, urlWithoutHash.indexOf(proxyPath) + proxyPath.length),
+    Object.assign({}, urlParams, {
+      url: removeThumbnailSrc(urlParams.url)
+    })
+  ) + hash
 }

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.137",
+  "version": "1.0.139",
   "description": "",
   "main": "index.js",
   "publishConfig": {