askbot-dragon 1.7.41-beta → 1.7.44-beta

package/src/components/askVideo.vue

@@ -1,139 +1,162 @@
-<template>
-    <div
-            v-loading="loading"
-            :element-loading-text="showProgress"
-            id="dragon-video"
-    >
-        <!-- <video-player
-          class="video-player vjs-custom-skin"
-          x5-video-player-type="h5"
-          :options="videoOptions(msg.content,msg.type)"
-          @pause="statechanged"
-        /> -->
-        <video
-                controls="controls"
-                :controlslist="nodownload&&'nodownload'"
-                :raw-controls="true"
-                x5-video-player-type="h5-page"
-                style="object-fit: contain;width: calc(100vw - 139px);height: 160px;background-color: black;border-radius: 10px;max-width: 230px;padding-left: 10px"
-                preload
-                :poster="videoSrc+'?spm=qipa250&x-oss-process=video/snapshot,t_1000,f_jpg,w_0,h_0,m_fast'"
-                class="video-player vjs-custom-skin"
-                :id="msg.id+'key'">
-          <source :src="videoSrc"/>
-        </video>
-      <div id="output"></div>
-    </div>
-</template>
-<script>
-    import {uploadImageByBase64} from "../assets/js/AliyunlssUtil";
-
-    export default {
-        name: "ask_video",
-        props: ["msg", "url", "localUrl", "progress", "nodownload"],
-        data() {
-            return {
-              videoSrc:'',
-              poster:''
-            }
-        },
-        watch: {
-        },
-        computed: {
-            showProgress() {
-                return parseInt(this.progress * 100);
-            },
-            loading() {
-                return this.url == null || this.url === "";
-            },
-            src() {
-                return this.url ? this.url : this.localUrl;
-            }
-        },
-      mounted() {
-          this.$nextTick(()=>{
-            let videoSrc = this.url ? this.url : this.localUrl
-            let newVideoSrc = videoSrc.replace("https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com","https://static.guoranbot.com")
-            this.videoSrc = newVideoSrc
-            console.debug('newVideoSrc',this.videoSrc,videoSrc)
-            this.poster = this.videoSrc+'?spm=qipa250&x-oss-process=video/snapshot,t_1000,f_jpg,w_0,h_0,m_fast'
-            console.debug('poster',this.poster)
-          })
-
-      },
-      methods:{
-        getImage(){
-          let that = this
-          var video,output;
-          var scale = 0.8;
-
-          var initialize = function() {
-            let id = that.msg.keyId+'key'
-            output = document.getElementById("output");
-            video = document.getElementById(id);
-            video.addEventListener('loadeddata',captureImage);
-          };
-
-          var captureImage = function() {
-            var canvas = document.createElement("canvas");
-            canvas.width = video.videoWidth * scale;
-            canvas.height = video.videoHeight * scale;
-            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
-            /*var img = document.createElement("img");
-            img.crossOrigin = 'anonymous'
-            img.src = canvas.toDataURL("image/png");*/
-            let reg = /\.(png|jpg|gif)$/
-            console.debug('img.src',output)
-            let base64 = canvas.toDataURL("image/png")
-            let blob = that.dataURLtoFile(base64,'name')
-            let promise = uploadImageByBase64(blob);
-            promise.then((res)=>{
-              console.debug("upload base64 reslut",res);
-              if (res&&res.url){
-                that.poster = res.url
-                if (!reg.test(that.poster)){
-                  that.poster +='.png'
-                }
-              }
-              console.debug('poster',that.poster)
-            });
-          };
-
-          initialize();
-        },
-        dataURLtoFile(dataurl, filename) {
-          var arr = dataurl.split(',');
-          var mime = arr[0].match(/:(.*?);/)[1];
-          var bstr = atob(arr[1]);
-          var n = bstr.length;
-          var u8arr = new Uint8Array(n);
-          while(n--){
-            u8arr[n] = bstr.charCodeAt(n);
-          }
-          //转换成file对象
-          return new File([u8arr], filename, {type:mime});
-          //转换成成blob对象
-          /*return new Blob([u8arr],{type:'image/png'});*/
-        }
-      }
-
-    }
-</script>
-<style scoped lang="less">
-video::-webkit-media-controls-mute-button { display: none !important;}
-#dragon-video{
-  position: relative;
-  #outputVideo{
-    position: absolute;
-    top: 0px;
-    /deep/img{
-      width: calc(100vw - 139px);
-      border-radius: 25px;
-      max-width: 230px;
-      height: 160px;
-    }
-
-  }
-}
-
-</style>
+<template>
+    <div
+            v-loading="loading"
+            :element-loading-text="showProgress"
+            id="dragon-video"
+    >
+        <!-- <video-player
+          class="video-player vjs-custom-skin"
+          x5-video-player-type="h5"
+          :options="videoOptions(msg.content,msg.type)"
+          @pause="statechanged"
+        /> -->
+        <video
+                controls="controls"
+                :controlslist="nodownload&&'nodownload'"
+                :raw-controls="true"
+                x5-video-player-type="h5-page"
+                style="object-fit: contain;width: calc(100vw - 139px);height: 160px;background-color: black;border-radius: 10px;max-width: 230px;padding-left: 10px"
+                preload
+                :poster="videoSrc+'?spm=qipa250&x-oss-process=video/snapshot,t_1000,f_jpg,w_0,h_0,m_fast'"
+                class="video-player vjs-custom-skin"
+                :id="msg.id+'key'">
+          <source :src="videoSrc"/>
+        </video>
+        <div v-show="!nodownload" class="dragon-video-download">
+          <a :href="msg.content.url" download><span class="el-icon-download"></span></a>
+        </div>
+      <div id="output"></div>
+    </div>
+</template>
+<script>
+    import {uploadImageByBase64} from "../assets/js/AliyunlssUtil";
+
+    export default {
+        name: "ask_video",
+        props: ["msg", "url", "localUrl", "progress", "nodownload"],
+        data() {
+            return {
+              videoSrc:'',
+              poster:''
+            }
+        },
+        watch: {
+        },
+        computed: {
+            showProgress() {
+                return parseInt(this.progress * 100);
+            },
+            loading() {
+                return this.url == null || this.url === "";
+            },
+            src() {
+                return this.url ? this.url : this.localUrl;
+            }
+        },
+      mounted() {
+          this.$nextTick(()=>{
+            let videoSrc = this.url ? this.url : this.localUrl
+            let newVideoSrc = videoSrc.replace("https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com","https://static.guoranbot.com")
+            this.videoSrc = newVideoSrc
+            console.debug('newVideoSrc',this.videoSrc,videoSrc)
+            this.poster = this.videoSrc+'?spm=qipa250&x-oss-process=video/snapshot,t_1000,f_jpg,w_0,h_0,m_fast'
+            console.debug('poster',this.poster)
+          })
+
+      },
+      methods:{
+        getImage(){
+          let that = this
+          var video,output;
+          var scale = 0.8;
+
+          var initialize = function() {
+            let id = that.msg.keyId+'key'
+            output = document.getElementById("output");
+            video = document.getElementById(id);
+            video.addEventListener('loadeddata',captureImage);
+          };
+
+          var captureImage = function() {
+            var canvas = document.createElement("canvas");
+            canvas.width = video.videoWidth * scale;
+            canvas.height = video.videoHeight * scale;
+            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
+            /*var img = document.createElement("img");
+            img.crossOrigin = 'anonymous'
+            img.src = canvas.toDataURL("image/png");*/
+            let reg = /\.(png|jpg|gif)$/
+            console.debug('img.src',output)
+            let base64 = canvas.toDataURL("image/png")
+            let blob = that.dataURLtoFile(base64,'name')
+            let promise = uploadImageByBase64(blob);
+            promise.then((res)=>{
+              console.debug("upload base64 reslut",res);
+              if (res&&res.url){
+                that.poster = res.url
+                if (!reg.test(that.poster)){
+                  that.poster +='.png'
+                }
+              }
+              console.debug('poster',that.poster)
+            });
+          };
+
+          initialize();
+        },
+        dataURLtoFile(dataurl, filename) {
+          var arr = dataurl.split(',');
+          var mime = arr[0].match(/:(.*?);/)[1];
+          var bstr = atob(arr[1]);
+          var n = bstr.length;
+          var u8arr = new Uint8Array(n);
+          while(n--){
+            u8arr[n] = bstr.charCodeAt(n);
+          }
+          //转换成file对象
+          return new File([u8arr], filename, {type:mime});
+          //转换成成blob对象
+          /*return new Blob([u8arr],{type:'image/png'});*/
+        }
+      }
+
+    }
+</script>
+<style scoped lang="less">
+video::-webkit-media-controls-mute-button { display: none !important;}
+#dragon-video{
+  position: relative;
+  width: calc(100vw - 109px);
+  max-width: 260px;
+  #outputVideo{
+    position: absolute;
+    top: 0px;
+    /deep/img{
+      width: calc(100vw - 139px);
+      border-radius: 25px;
+      max-width: 230px;
+      height: 160px;
+    }
+
+  }
+  .dragon-video-download{
+    position: absolute;
+    width: 40px;
+    height: 26px;
+    background-color: rgba(54, 106, 255, 0.5);
+    border-radius: 13px;
+    text-align: center;
+    bottom: 2px;
+    right: 6px;
+    a {
+      span {
+        height: 26px;
+        line-height: 26px;
+        display: block;
+        color: white;
+      }
+    }
+  }
+}
+
+</style>