vue-intergrall-plugins 0.0.189 → 0.0.190

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-intergrall-plugins",
-  "version": "0.0.189",
+  "version": "0.0.190",
   "description": "",
   "main": "dist/vue-intergrall-plugins.ssr.js",
   "browser": "dist/vue-intergrall-plugins.esm.js",

package/src/lib-components/Messages/ChatMessages.vue

@@ -6,6 +6,7 @@
         :dictionary="dictionary"
       />
     <div v-else class="mensagem" :class="{mapa, 'hist-msg' : histMsg}">
+      <LinkPreview v-if="link && !mapa" :message="message" />
       <template v-if="anexos && anexos.length">
         <div class="mensagem-anexo" v-for="(anexo, index) in anexos" :key="index">
           <AnexoMensagem :dictionary="dictionary" :anexo="anexo" :origemExterna="origemExterna" :dominio="dominio" @abrir-imagem="abrirImagem"/>
@@ -60,7 +61,7 @@
         <span class="check vermelho" v-else-if="status == 'T'" :content="contentTooltip" v-tippy key="hourglass"> <fa-icon :icon="['fas', 'hourglass']" /> </span> <!-- Status finalizador -->
       </transition>
 
-      <span class="autor-mensagem" v-html="autor"></span>
+      <span class="autor-mensagem" v-text="autor"></span>
     </div>
   </div>
 </template>
@@ -70,9 +71,10 @@ import AnexoMensagem from "./AnexoMensagem"
 import InteratividadeBotoes from "./InteratividadeBotoes"
 import InteratividadeFormulario from "./InteratividadeFormulario"
 import { formataTimezoneData } from "../../services/textFormatting"
+import LinkPreview from './LinkPreview'
 
 export default {
-  components: { AnexoMensagem, InteratividadeBotoes, InteratividadeFormulario },
+  components: { AnexoMensagem, InteratividadeBotoes, InteratividadeFormulario, LinkPreview },
   props: ["smartchannel", "messageIndex", "dictionary", "autor", "origem", "msg", "link", "anexo", "imgAnexo", "tipoDoc", "docAnexo", "nomeArquivo", "audio", "video", "horario", "status", "logo", "msgTooltip", "seq", "mapa", "histMsg", "erro", "msgErro", "origemExterna", "anexos", "dominio", "corMsg", "interatividade", "msgReply", "hasReply", "iniDialogo", "dialogoId", "dialogoOrigem", "expSessao"],
   data(){
     return{
@@ -409,9 +411,9 @@ export default {
     left: -10px;
     transform: rotate(90deg);
   }
-  /* .mensagem__outros .check{
+  .mensagem__outros .check{
     display: none
-  } */
+  }
   .mensagem__outros > .autor-mensagem{
     left: 5px;
     color: #333;

package/src/lib-components/Messages/LinkPreview.vue

@@ -0,0 +1,99 @@
+<template>
+  <div v-if="linkPreview.isValid" class="link-preview">
+    <div 
+      v-if="linkPreview.imageSource" 
+      :style="linkPreview.colorTheme ? `background-color: ${linkPreview.colorTheme}` : ''"
+      class="link-preview-image"
+    >
+      <img :src="linkPreview.imageSource" alt="Imagem referente ao link" />
+    </div>
+    <div v-if="linkPreview.description" class="link-preview-infos">
+      <p v-if="linkPreview.description" v-text="linkPreview.description"></p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { dev, baseURL } from '@/services/smartChannelAxios'
+
+export default {
+  props: {
+    message: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      linkPreview: {
+        description: "",
+        imageSource: "",
+        colorTheme: "",
+        isValid: false
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => { this.gerarPreview() })
+  },
+  methods: {
+    async gerarPreview() {
+      try {
+        if(!this.message) return
+        const isSticker = this.message.indexOf("KSTICKERK") < 0 ? false : true
+        if(isSticker) return 
+        const regex = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/g
+        const url = regex.exec(this.message)
+        if(!url[0]) return console.warn("URL invalida para gerar preview")
+        const encodedURL = Buffer(url[0]).toString("base64")
+        const response = await this.$httpRequest(
+        {
+          method: 'get',
+          url: `${baseURL}/preview?url=${encodedURL}${dev}`,
+          // headers: {
+          //   Authorization: "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdGQiOiJNS1VuNENMdFVlYTVZeDA4VmltQmgwQWN6Rkp0Y3pIUjZBTXd3eGI0NGF3d1ZTTTh2ZFhPS1pnIiwibWFuYWdlciI6Ik1LVVZkRm8zWmFreGJOUHd6bjNBRjVmVnF1MmVReFEyTUh2ZVloZ3V3SzJMbzU1IiwiaGFzX2luZm9zIjp0cnVlLCJucm9zIjpbIjEwIiwiMjYzIl0sImF1dGgiOiJNS1U3YzZNQnBJWTkyamFKbFZJTXQxd3dpbTRsNXd3Mjc4SU0wdkpRT0JnV3lTeHZZM3k0dmRYIiwiaWF0IjoxNjQ4MTQ2MzEwLCJleHAiOjE2NDgyMzI3MTB9.JSgv4e0DY0gkWaz6u9yBSH2P507zBZoTRKf9ki7TP_M"
+          // }
+        })
+        if(typeof response != "object" || typeof response.data != "object") throw "Retorno incorreto"
+        const { data } = response
+        const { st_ret, msg_ret, raspagem } = data
+        if(st_ret != "OK") throw `${st_ret} - ${msg_ret}`
+        if(!raspagem) throw `${st_ret} - ${msg_ret} | (Raspagem nao encontrada no retorno)`
+        const { description, og, theme_color } = raspagem
+        if(description) this.linkPreview.description = description
+        if(og && og.image) this.linkPreview.imageSource = og.image
+        if(theme_color) this.linkPreview.colorTheme = theme_color
+
+        if(this.linkPreview.description || this.linkPreview.imageSource) this.linkPreview.isValid = true
+      }catch(e) {
+        console.error("Erro ao gerar o preview do link: ", e)
+      }
+    },
+    
+  }
+}
+</script>
+
+<style scoped>
+  .link-preview {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .link-preview-image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+  }
+
+  .link-preview-image img {
+    max-width: 250px;
+  }
+
+  .link-preview-infos {
+    background-color: rgba(0, 0, 0, .1);
+    padding: 10px;
+    font-size: .8rem;
+  }
+</style>