vue-intergrall-plugins 0.0.187 → 0.0.190

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-intergrall-plugins",
-  "version": "0.0.187",
+  "version": "0.0.190",
   "description": "",
   "main": "dist/vue-intergrall-plugins.ssr.js",
   "browser": "dist/vue-intergrall-plugins.esm.js",
@@ -61,7 +61,6 @@
   },
   "dependencies": {
     "axios": "^0.26.0",
-    "kind-of": "^6.0.3",
-    "link-prevue": "^1.2.0"
+    "kind-of": "^6.0.3"
   }
 }

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"/>
@@ -29,7 +30,6 @@
           </li>
         </ul>
       </div>
-      <!-- <LinkPrevue v-if="linkPreview && link" :url="linkPreview" /> -->
       <p v-html="validateInterativity() ? '' : formatMsg(message)"></p>
       <InteratividadeBotoes 
         v-if="interatividade"
@@ -71,10 +71,10 @@ import AnexoMensagem from "./AnexoMensagem"
 import InteratividadeBotoes from "./InteratividadeBotoes"
 import InteratividadeFormulario from "./InteratividadeFormulario"
 import { formataTimezoneData } from "../../services/textFormatting"
-import LinkPrevue from "link-prevue"
+import LinkPreview from './LinkPreview'
 
 export default {
-  components: { AnexoMensagem, InteratividadeBotoes, InteratividadeFormulario, LinkPrevue },
+  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{
@@ -95,8 +95,7 @@ export default {
         rotateControl: false,
         fullscreenControl: false,
         disableDefaultUI: false
-      },
-      linkPreview: ""
+      }
     }
   },
   computed: {
@@ -171,7 +170,7 @@ export default {
           this.message = this.removeUrlStickerByString(this.urlSticker)
         }
       } catch (error) {
-        
+        console.error("Error validating url to msg: ", error)
       }
     },
     getUrlFileName(){
@@ -189,10 +188,8 @@ export default {
       return url;
     },
     validadeIfExistsSticker(){
-      if(this.message && this.message.indexOf("KSTICKERK https://smarters") === 0){
-        return true;
-      }
-      return false;
+      if(this.message && this.message.indexOf("KSTICKERK https://") === 0) return true
+      return false
     },
     setCorMsg() {
       try {
@@ -231,7 +228,6 @@ export default {
     formatMsg(msg) {
       const regex = /(\n|&nbsp;)/g
       if(regex.test(msg)) msg = msg.replace(regex, "<br>")
-      // if(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/gi.test(msg) && this.link) this.setLinkPreview(msg)
       return msg
     },
   }

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>