askbot-dragon 1.6.76-beta → 1.6.76

package/src/components/ask-components/DissatisfactionOptions.vue

@@ -1,58 +1,59 @@
-<template>
-      <view class="media-body-ps">
-                    <view class="other" v-html="message.content.replyText"></view>
-                    <view
-                    v-for="(reply_option, index) in message.content.replyOptions"
-                    v-bind:class="[index == message.content.replyOptions.length - 1 ? 'end' : '', 'ps']"
-                    :key="index"
-                    :data-name="reply_option.name"
-                    :data-answer="reply_option.answer"
-                    @click="onClick(reply_option)" >
-                    <view  :data-name="reply_option.name"
-                        :data-answer="reply_option.answer">{{ reply_option.name }}
-                    </view>
-                    </view>
-            </view>
-</template>
-<script>
-export default {
-    name:"DissatisfactionOptions",
-    props:["message"],
-    methods:{
-        onClick(option){
-            this.$emit('onOption',option);
-        }
-    }
-
-}
-</script>
-<style lang='less'>
-.other {
-    font-size: 14px;
-    word-wrap: break-word;
-    word-break: break-all;
-    overflow: hidden;
-    padding: 8px 20px 8px 15px;
-    height: auto;
-}
-.ps {
-    padding: 8px 20px 8px 15px;
-    height: auto;
-    border-top: 1px solid #F4F8FC;
-    background-color: #ffffff;
-    color: var(--color);
-    cursor: pointer;
-    font-size: 14px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    i{
-        margin-left: 20px;
-    }
-}
-.end {
-    border: 1px solid #F4F8FC;
-    border-bottom-left-radius: 32px !important;
-    border-bottom-right-radius: 32px !important;
-}
+<template>
+      <view class="media-body-ps">
+                    <view class="other" v-html="message.content.replyText"></view>
+                    <view
+                    v-for="(reply_option, index) in message.content.replyOptions"
+                    v-bind:class="[index == message.content.replyOptions.length - 1 ? 'end' : '', 'ps']"
+                    :key="index"
+                    :data-name="reply_option.name"
+                    :data-answer="reply_option.answer"
+                    @click="onClick(reply_option)" >
+                    <view  :data-name="reply_option.name"
+                        :data-answer="reply_option.answer">{{ reply_option.name }}
+                    </view>
+                    </view>
+            </view>
+</template>
+<script>
+export default {
+    name:"DissatisfactionOptions",
+    props:["message"],
+    methods:{
+        onClick(option){
+            this.$emit('onOption',option);
+        }
+    }
+
+}
+</script>
+<style lang='less'>
+@import "../../assets/less/variables.less";
+.other {
+    font-size: 14px;
+    word-wrap: break-word;
+    word-break: break-all;
+    overflow: hidden;
+    padding: 8px 20px 8px 15px;
+    height: auto;
+}
+.ps {
+    padding: 8px 20px 8px 15px;
+    height: auto;
+    border-top: 1px solid @border-color-r2;
+    background-color: @background-color-light;
+    color: var(--color);
+    cursor: pointer;
+    font-size: 14px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    i{
+        margin-left: 20px;
+    }
+}
+.end {
+    border: 1px solid @border-color-r2;
+    border-bottom-left-radius: 32px !important;
+    border-bottom-right-radius: 32px !important;
+}
 </style>

package/src/components/ask-components/Msgloading.vue

@@ -1,37 +1,38 @@
-<template>
-	<view class="media-body-loading">
-		<view class="bot_loading">
-			<span></span>
-			<span></span>
-			<span></span>
-			<span></span>
-		</view>
-	</view>
-</template>
-
-<script>
-export default {
-	data() {
-		return {
-			name: ''
-		};
-	}
-};
-</script>
-
-<style lang="less">
-.media-body-loading {
-	background-color: #f4f8fc;
-	border: 1px solid #f4f8fc;
-	word-break: break-word;
-	box-shadow: 0px 0px 5px 0px rgba(76, 97, 255, 0.38);
-	flex: 1;
-	min-height: 30px;
-	line-height: 30px;
-	border-radius: 32px;
-	border-top-left-radius: 0px;
-	padding: 8px 15px;
-	text-align: left;
-	margin-left: 5px;
-}
-</style>
+<template>
+	<view class="media-body-loading">
+		<view class="bot_loading">
+			<span></span>
+			<span></span>
+			<span></span>
+			<span></span>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			name: ''
+		};
+	}
+};
+</script>
+
+<style lang="less">
+@import "../../assets/less/variables.less";
+.media-body-loading {
+	background-color: @border-color-r2;
+	border: 1px solid @border-color-r2;
+	word-break: break-word;
+	box-shadow: 0px 0px 5px 0px rgba(76, 97, 255, 0.38);
+	flex: 1;
+	min-height: 30px;
+	line-height: 30px;
+	border-radius: 32px;
+	border-top-left-radius: 0px;
+	padding: 8px 15px;
+	text-align: left;
+	margin-left: 5px;
+}
+</style>

package/src/components/ask-components/SatisfactionV2.vue

@@ -1,15 +1,15 @@
-<template>
-    <view>
-         <view v-html="message.content.input"></view>
-    </view>
-</template>
-<script>
-
-
-export default {
-    name:"SatisfactionV2",
-    props:["message"],
-    methods:{
-    }
-}
-</script>
+<template>
+    <view>
+         <view v-html="message.content.input"></view>
+    </view>
+</template>
+<script>
+
+
+export default {
+    name:"SatisfactionV2",
+    props:["message"],
+    methods:{
+    }
+}
+</script>

package/src/components/askVideo.vue

@@ -1,162 +1,214 @@
-<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 - 169px);height: 160px;background-color: black;border-radius: 25px;max-width: 200px;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 {ossConfig,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(ossConfig,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>
+<template>
+    <div
+            v-loading="loading"
+            :element-loading-text="showProgress"
+            class="dragon-video"
+            :id="'dragon-video' + msg.msgId"
+    >
+        <!-- <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="controlAttributes"
+                :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.msgId+'key'">
+          <source :src="videoSrc"/>
+        </video>
+      <div v-if="isFullscreen" class="close-fullscreen" @click="closeFullScreen">
+        <i class="iconfont guoran-tongyichicun-guanbi2"></i>
+      </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:'',
+              isFullscreen:false,
+              isAndroid:false
+            }
+        },
+        watch: {
+        },
+        computed: {
+            showProgress() {
+                return parseInt(this.progress * 100);
+            },
+            loading() {
+                return this.url == null || this.url === "";
+            },
+            src() {
+                return this.url ? this.url : this.localUrl;
+            },
+            controlAttributes(){
+              /* 安卓手机自定义了全屏样式，所以禁掉原生的全屏 */
+              const attributes = []
+              if (this.isAndroid) attributes.push('nofullscreen')
+              if (this.nodownload&&'nodownload') attributes.push('nodownload')
+              return attributes.join(' ')
+            }
+        },
+      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)
+            /* 安卓手机播放视频默认全屏设置  ios默认就是全屏 */
+            let id = this.msg.msgId + 'key'
+            const video = document.getElementById(id);
+            let containerId = 'dragon-video' + this.msg.msgId
+            const videoContainer = document.getElementById(containerId);
+            // 仅在 Android 设备尝试自动全屏
+            const isAndroid = /Android/i.test(navigator.userAgent);
+            this.isAndroid = isAndroid;
+            if (isAndroid){
+              video.addEventListener('play', () => {
+                // 仅在全屏请求由用户触发时有效（如点击播放按钮后）
+                videoContainer.classList.add('force-fullscreen'); // 降级方案
+                this.isFullscreen = true;
+              });
+              // 点击关闭按钮或按 ESC 退出
+              document.addEventListener('fullscreenchange', () => {
+                if (!document.fullscreenElement) {
+                  videoContainer.classList.remove('force-fullscreen');
+                  this.isFullscreen = false;
+                }
+              });
+            }
+
+          })
+
+      },
+      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'});*/
+        },
+        closeFullScreen(){
+          this.isFullscreen = false;
+          let containerId = 'dragon-video' + this.msg.msgId
+          const videoContainer = document.getElementById(containerId);
+          videoContainer.classList.remove('force-fullscreen');
+        }
+      }
+
+    }
+</script>
+<style scoped lang="less">
+@import "../assets/less/variables.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;
+    }
+
+  }
+}
+/* 强制竖屏全屏样式 */
+.force-fullscreen {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  object-fit: contain !important;
+  background: @background-color-black !important;
+  z-index: 9999 !important;
+  max-width: 100vw!important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  video{
+    max-width: 100% !important;
+    width: 100% !important;
+    height: 100% !important;
+  }
+  .close-fullscreen{
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    i{
+      color: @font-primary-light-color;
+      font-size: 20px;
+    }
+  }
+}
+
+</style>