@aochuang/client-sdk 1.0.278

package/components/wechat-chat-control/video/video.vue

@@ -0,0 +1,304 @@
+<template>
+  <div class="sdk-chat-control-video" :key="url">
+    <div class="sdk-chat-control-video__main" :style="{height: innerHeight + 'px', width: innerWidth + 'px'}">
+      <template v-if="!url && allowDownload && type === 'default'">
+        <div class="sdk-chat-control-video__download" :class="{'is-downloading': downloading}" @click="handleDownloadClick">
+          <template v-if="downloading">
+            <div class="sdk-chat-control-video__download-icon">
+              <ui-loading size="mini"></ui-loading>
+            </div>
+            <div class="sdk-chat-control-video__download-text">下载中...</div>
+          </template>
+          <template v-else>
+            <div class="sdk-chat-control-video__download-icon">
+              <ui-icon name="download-line"></ui-icon>
+            </div>
+            <div class="sdk-chat-control-video__download-text">下载</div>
+          </template>
+        </div>
+        <template v-if="innerCover">
+          <ui-video 
+            :height="innerHeight" 
+            :width="innerWidth" 
+            :poster="innerCover" 
+            :preload="innerCover ? 'none' : 'metadata'" 
+            class="sdk-chat-control-video__player"
+          ></ui-video>
+        </template>
+      </template>
+      <template v-else>
+        <template v-if="allowDefrost">
+          <template v-if="defrostMsg">
+            <div class="sdk-chat-control-video__defrost">
+              <div class="sdk-chat-control-video__defrost-icon">
+                <ui-icon name="information-line" :size="20"></ui-icon>
+              </div>
+              <div class="sdk-chat-control-video__defrost-text">
+                {{ defrostMsg }}
+              </div>
+              <div class="sdk-chat-control-video__error-action">
+                <ui-button type="primary" size="mini" :click="handleRefreshClick">重新请求</ui-button>
+              </div>
+            </div>
+          </template>
+          <template v-else-if="errorMsg">
+            <div class="sdk-chat-control-video__error">
+              <div class="sdk-chat-control-video__error-icon">
+                <ui-icon name="information-line" :size="20"></ui-icon>
+              </div>
+              <div class="sdk-chat-control-video__error-text">
+                {{ errorMsg }}
+              </div>
+              <div class="sdk-chat-control-video__error-action">
+                <ui-button type="primary" size="mini" :click="handleUnlockClick">尝试解档</ui-button>
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            <ui-video 
+              :src="url" 
+              :height="innerHeight" 
+              :width="innerWidth" 
+              :poster="innerCover" 
+              :preload="innerCover ? 'none' : 'metadata'" 
+              @error="handleError"
+              class="sdk-chat-control-video__player"
+            ></ui-video>
+          </template>
+        </template>
+        <template v-else>
+          <ui-video 
+            :src="url" 
+            :height="innerHeight" 
+            :width="innerWidth" 
+            :poster="innerCover" 
+            :preload="innerCover ? 'none' : 'metadata'" 
+            @error="handleError"
+            class="sdk-chat-control-video__player"
+          ></ui-video>
+        </template>
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+import { Video as UiVideo, Button as UiButton, Icon as UiIcon, Loading as UiLoading } from '@aochuang/common/components'
+import { parse } from '../../../utils/json'
+import { formatOssPath } from '@aochuang/common/utils/oss'
+
+export default {
+  name: 'SdkChatControlVideo',
+  components: {
+    UiIcon,
+    UiVideo,
+    UiButton,
+    UiLoading
+  },
+  props: {
+    id: {
+      type: String
+    },
+    content: {
+      type: [String, Object]
+    },
+    size: {
+      type: Number
+    },
+    width: {
+      type: String
+    },
+    height: {
+      type: String
+    },
+    duration: {
+      type: Number
+    },
+    allowDownload: {
+      type: Boolean
+    },
+    downloadMethod: {
+      type: Function
+    },
+    cancelDownloadMethod: {
+      type: Function
+    },
+    type: {
+      type: String,
+      default: 'default',
+      validator (value) {
+        return ['quote', 'default', 'thumb'].includes(value)
+      }
+    },
+    defrostMethod: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      downloading: false,
+      errorMsg: null,
+      defrostMsg: null,
+      nextContent: {}
+    }
+  },
+  computed: {
+    url () {
+      let url = null
+      if (typeof this.nextContent === 'string') {
+        url = this.nextContent
+      } else if (this.nextContent && typeof this.nextContent === 'object') {
+        if (this.nextContent.url) {
+          url = this.nextContent.url
+        } else {
+          url = this.nextContent.tencentUrl
+          // 如果tencentUrl不是一个有效的地址，就设置为null，后面好识别需要下载
+          if (!/^(http:\/\/|https:\/\/)/i.test(this.nextContent.tencentUrl)) {
+            url = null
+          }
+        }
+      }
+      return url
+    },
+    cover () {
+      if (!this.nextContent) {
+        return
+      }
+      return this.nextContent.previewImage
+    },
+    innerCover () {
+      return formatOssPath(this.cover)
+    },
+    innerWidth () {
+      if (this.type === 'quote') {
+        return '60'
+      } else if (this.type === 'thumb') {
+        return '150'
+      } else {
+        return this.width || '280'
+      }
+    },
+    innerHeight () {
+      if (this.type === 'quote') {
+        return '60'
+      } else if (this.type === 'thumb') {
+        return '84'
+      } else {
+        return this.height || '200'
+      }
+    },
+    allowDefrost () {
+      return !!this.defrostMethod
+    }
+  },
+  created () {
+    this.nextContent = parse(this.content) || {}
+  },
+  methods: {
+    handleDownloadClick () {
+      const rs = this.downloadMethod({
+        content: this.nextContent,
+        updateContentProp: (prop, value) => {
+          if (!['url'].includes(prop)) {
+            throw new Error('不支持的更新属性' + prop)
+          }
+          this.$set(this.nextContent, prop, value)
+        }
+      })
+      if (rs && rs.finally) {
+        this.downloading = true
+        rs.finally(() => {
+          this.downloading = false
+        })
+      }
+    },
+    handleError () {
+      if (!this.defrostMethod) {
+        return
+      }
+      this.errorMsg = '加载失败，可能资源被归档～'
+    },
+    handleUnlockClick () {
+      if (!this.defrostMethod) {
+        return
+      }
+      return this.defrostMethod({
+        content: this.content
+      }).then((res) => {
+        this.defrostMsg = res || '解冻已执行，请耐心等待～'
+      })
+    },
+    handleRefreshClick () {
+      this.errorMsg = null
+      this.defrostMsg = null
+    }
+  },
+  beforeDestroy () {
+    this.cancelDownloadMethod && this.cancelDownloadMethod()
+  }
+}
+</script>
+<style lang="less">
+.sdk-chat-control-video {
+  position: relative;
+}
+.sdk-chat-control-video__main{
+  position: relative;
+  border: 1px solid #ebebeb;
+  border-radius: 3px;
+  overflow: hidden;
+  display: inline-block;
+  vertical-align: top;
+}
+.sdk-chat-control-video__player{
+  max-width: 300px;
+  max-height: 350px;
+  vertical-align: top;
+}
+.sdk-chat-control-video__download{
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0,0,0,.5);
+  color: #ccc;
+  font-size: 12px;
+  line-height: 1em;
+  transition: all .25s;
+  &:not(.is-downloading) {
+    cursor: pointer;
+    &:hover {
+      color: #fff;
+    }
+  }
+}
+.sdk-chat-control-video__download-icon{
+  margin-bottom: 6px;
+}
+.sdk-chat-control-video__defrost,
+.sdk-chat-control-video__error{
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  background-color: #f2f2f2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  padding: 12px;
+  color: #999;
+  line-height: 1.7em;
+}
+.sdk-chat-control-video__error-action{
+  margin-top: 6px;
+}
+</style>

package/components/wechat-chat-control/voice/icons/voice.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1731930580090" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1903" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0h1024v1024H0z" fill="#6690FF" p-id="1904"></path><path d="M512 853.3248c-188.5184 0-341.3248-152.832-341.3248-341.3248 0-188.5184 152.832-341.3248 341.3248-341.3248 188.5184 0 341.3248 152.832 341.3248 341.3248 0 188.5184-152.832 341.3248-341.3248 341.3248z m-16-338.4832c0-21.3248-32-21.3248-32 0v130.8416c0 21.3504 32 21.3504 32 0v-130.816zM410.6752 384c0-21.3248-32-21.3248-32 0v261.6832c0 21.3504 32 21.3504 32 0V384z m170.6496 53.3248c0-21.3248-32-21.3248-32 0v208.384c0 21.3248 32 21.3248 32 0v-208.384z m85.3504 21.3504c0-21.3504-32-21.3504-32 0v187.008c0 21.3504 32 21.3504 32 0v-187.008z" fill="#FFFFFF" p-id="1905"></path></svg>