chat/_src/util/util.js

import { MessageBox } from 'element-ui'
import TWEEN from '@tweenjs/tween.js'
import twemoji from 'twemoji'
import dayjs from 'dayjs'

const timestampInterval = 1e3 * 60 * 3 // 3分钟的间隔时间
const cryptoKey = 'dqWt6twz6JyEy3EZ'

// 错误弹窗
export function showError (msg, title = 'Error') {
  MessageBox.confirm(msg, title, {
    center: true,
    showCancelButton: false,
    showConfirmButton: false,
    callback () {}
  })
}

// 确认操作弹窗
export function confirmPopup (msg, title = '提示') {
  return new Promise((resolve, reject) => {
    MessageBox.confirm(msg, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        resolve()
      })
      .catch(() => {})
  })
}

/**
 * 判断系统||浏览器中英文
 * 对于不支持的浏览器 一律默认为 中文
 */
export function getLanguage () {
  var language = (navigator.language || navigator.browserLanguage).toLowerCase()
  var locale = 'zh'
  if (language.indexOf('en') > -1) {
    locale = 'en'
  } else {
    locale = 'zh'
  }
  return locale
}

/**
 * 获取Url上指定参数
 * @param {String} name 参数名
 */
export function getUrlParam (name) {
  var reg = new RegExp('[?&]' + name + '=([^&#?]*)(&|#|$)')
  var r = window.location.href.match(reg)
  return r ? r[1] : null
}

export var Cookie = {
  setCookie (name, value) {
    var Days = 7
    var exp = new Date()
    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000)
    exp.setTime(exp.getTime() + 60 * 1000)
    if (
      window.location.port === '8080' ||
      /^test-|\.webdev2\./.test(window.location.host)
    ) {
      document.cookie =
        name + '=' + escape(value) + ';expires=' + exp.toGMTString()
    } else {
      document.cookie =
        name +
        '=' +
        escape(value) +
        ';domain=.mee.chat;path=/;expires=' +
        exp.toGMTString()
    }
  },
  getCookie (name) {
    var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
    var arr = document.cookie.match(reg)
    if (arr) {
      return unescape(arr[2])
    } else {
      return null
    }
  },
  delCookie (name) {
    var str1 = name + '=;domain=.mee.chat;path=/'
    str1 += ';expires=' + new Date(0).toGMTString()
    document.cookie = str1

    var str2 = name + '=;path=/'
    str2 += ';expires=' + new Date(0).toGMTString()
    document.cookie = str2
  }
}
/**
 * 获取聊天区域高度
 * @param {String} msg
 */
export function getResizeHeight () {
  let clientHeight = document.documentElement.clientHeight
  let clientWidth = document.documentElement.clientWidth
  let topHeight = 61
  let botHeight = 181
  var chatBoxHeight
  if (clientHeight < 600) {
    chatBoxHeight = 600 - topHeight - botHeight
  }
  if (clientHeight < 800 || clientWidth < 1000) {
    chatBoxHeight = clientHeight - topHeight - botHeight
  } else {
    chatBoxHeight = clientHeight * 0.8 - topHeight - botHeight
  }
  return chatBoxHeight
}

function rc4 (str, key) {
  var s = []
  var j = 0
  var x
  var res = ''
  for (var i = 0; i < 256; i++) {
    s[i] = i
  }
  for (i = 0; i < 256; i++) {
    j = (j + s[i] + key.charCodeAt(i % key.length)) % 256
    x = s[i]
    s[i] = s[j]
    s[j] = x
  }
  i = 0
  j = 0
  for (var y = 0; y < str.length; y++) {
    i = (i + 1) % 256
    j = (j + s[i]) % 256
    x = s[i]
    s[i] = s[j]
    s[j] = x
    res += String.fromCharCode(str.charCodeAt(y) ^ s[(s[i] + s[j]) % 256])
  }
  return res
}

/**
 * 加密信息
 * @param {String} msg
 */
export function cryptoMsg (msg) {
  let result
  try {
    result = btoa(rc4(encodeURIComponent(msg), cryptoKey))
  } catch {
    return msg
  }
  return result
}

/**
 * 解密信息
 * @param {String} msg
 */
export function decryptoMsg (msg) {
  let result
  try {
    result = decodeURIComponent(rc4(atob(msg), cryptoKey))
  } catch {
    return msg
  }
  return result
}

const linkRule = new RegExp(
  '(https?|ftp|file)://[-a-zA-Z0-9/-_.?#!+%]+'
)

/**
 * 向数组添加数据
 * @param {Array} data
 */
export function addSomeInArray (data) {
  let lastTime = null
  data.forEach(item => {
    // 添加timeMsg tag
    if (lastTime === null) {
      item.timeMsg = false
    } else {
      item.timeMsg = parseInt(item.timestamp) - lastTime > timestampInterval
    }
    lastTime = parseInt(item.timestamp)

    addLinkItem(item)
  })
}

/**
 * 单个添加timeMsg tag
 * @param {Array} data
 */
export function addTimeMsgInItem (item, arr) {
  if (arr.length === 0) {
    item.timeMsg = true
  } else {
    let lastTime = parseInt(arr[arr.length - 1].timestamp)
    item.timeMsg = parseInt(item.timestamp) - lastTime > timestampInterval
  }
}

/**
 * 判断是否是移动端
 */
export function isMobile () {
  return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
}

function convertEntity (str) {
  // &colon;&rpar;
  const entityMap = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&apos;'
  }

  return str.replace(/[&<>'"]/g, function (matched) {
    return entityMap[matched]
  })
}

/*
 * 单个添加链接 msg_type = 10
 * @param {Array} data
 */
export function addLinkItem (item) {
  // 先用实体处理
  if (item.msg_type == 0) {
    item.content = convertEntity(item.content)
    if (item.content.match(linkRule)) {
      item.content = item.content.replace(linkRule, a => {
        return `<a href="${a}" class="link text" target="_blank">${a}</a>`
      })
    }

    item.content = twemoji.parse(item.content, {
      callback: function (icon, options) {
        return 'https://w2.meechat.me/emoji/' + icon + '.svg'
      }
    })
  }
}

/**
 * 移除arr2中满足callback的arr1数组元素
 * @param {Array} arr1 [{hash:1}]
 * @param {Array} arr2 [{hash:1},{hash:2}]
 * @result             arr1 => []
 */
export function removeItemIfEixt (arr1, arr2, callback) {
  arr1.forEach((item, index) => {
    if (arr2.some(item2 => callback(item2) == callback(item))) {
      arr1.splice(index, 1)
    }
  })
}

/**
 * 格式化置顶消息
 */
export function formatPinMsg (pinMsg, userId) {
  pinMsg.name = pinMsg.nick_name
  pinMsg.content = decryptoMsg(pinMsg.msg)
  pinMsg.type = pinMsg.from == userId ? 'me' : 'you'
  pinMsg.avatar = pinMsg.cover_photo || ''
  pinMsg.userId = userId
}

/**
 * 格式化最后的消息
 * @param lastMsg
 * @param isGroup
 * @returns {*}
 */
export function formatLastMsg (lastMsg, isGroup) {
  let cont = null
  if (lastMsg) {
    if (lastMsg.msg_type == 0 && lastMsg['content']) {
      cont = decryptoMsg(lastMsg['content'])
    } else if (lastMsg.msg_type == 1) {
      cont = '[图片]'
    } else if (lastMsg.msg_type == 2) {
      cont = '[视频]'
    } else if (lastMsg.msg_type == 3) {
      cont = '[音频]'
    } else if (lastMsg.msg_type == 4) {
      cont = '[红包]'
    }

    if (isGroup) {
      cont = lastMsg.nick_name + ': ' + cont
    }
  }

  return cont
}

/**
 * @param {store} state
 * @param {Number} createTime
 */
export function dealErrorMsg (state, createTime) {
  state.chatList.forEach(item => {
    if (item.createTime == createTime) {
      item.fail = true
      item.loading = false
    }
  })
}

/**
 * 如果含有at他人的信息，格式化
 * @param {String} msg @heitan@aben 123
 * @param {Array} members
 * @result => {@start[10,9]end}@heitan@aben 123
 */
export function encryptAtMsg (msg, members) {
  let ats = []

  members.forEach(user => {
    let reg = new RegExp(`@${user.nick_name}`)
    if (reg.test(msg)) {
      ats.push(user.user_id)
    }
  })

  if (ats.length) {
    msg = `{@start[${ats.toString()}]end}${msg}`
  }

  return msg
}

/**
 *
 * @param {String} msg
 * @return {Array|Null}
 */
export function decryptAtMsg (msg) {
  let reg = /^{@start\[(.*)\]end}/
  let ret = reg.exec(msg)
  if (ret) {
    return ret[0].split(',')
  }
}
/**
 *判断是否是at我的信息
 */
export function checkAtMe (msg, username) {
  if (!username) return false
  let reg = new RegExp(`@${username}`)
  return reg.test(msg)
}

export function scrollIntoView (node, offsetTop) {
  let distance = Math.abs(offsetTop - node.scrollTop)
  let time = distance > 500 ? 1000 : distance * 2
  let tw = new TWEEN.Tween(node)
    .to({ scrollTop: offsetTop }, time)
    .easing(TWEEN.Easing.Quadratic.Out)
  return tw.start()
}

export function scrollMsgIntoView (node, offsetTop, targetNode) {
  scrollIntoView(node, offsetTop)
    .onComplete(() => {
      targetNode.classList.toggle('active')
    })

  setTimeout(() => {
    targetNode.classList.toggle('active')
  }, 3000)
}

export var noticeManager = {
  tabTimer: null, // tab切换定时器
  askPermission () {
    return new Promise((resolve, reject) => {
      if (!('Notification' in window)) {
        reject(new Error('This browser does not support desktop notification'))
      } else if (Notification.permission === 'granted') {
        resolve()
      } else if (Notification.permission === 'default ') {
        Notification.requestPermission(function (permission) {
          // 如果用户同意，就可以向他们发送通知
          if (permission === 'granted') {
            resolve()
          } else {
            reject(new Error())
          }
        })
      }
    })
  },
  showNotification (data) {
    // 开启全局消息免扰
    if (this.getGlobalNotice() == 1) return

    // 已经打开页面了，就不需要额外通知
    if (!document.hidden) return

    this.askPermission().then(() => {
      let notification = new Notification(data.name, {
        body: '你收到了一条消息',
        icon: `/dist/icons/meechat.png`
      })

      // 打开页面
      let path
      if (data.group_id) {
        path = `/group/${data.group_id}`
      } else {
        let sessionId = +data.to > +data.from ? `${data.from}-${data.to}` : `${data.to}-${data.from}`
        path = `/pm/${sessionId}`
      }
      notification.onclick = () => {
        window.$router.push({ path })
        notification.close()
        window.focus()
      }

      setTimeout(() => {
        notification.close()
      }, 3500)
    })
  },
  changeTitle (num) {
    // 开启全局消息免扰
    if (this.getGlobalNotice() == 1) return
    if (document.hidden) {
      let title = num ? `MeeChat (你有${num}新消息)` : `MeeChat`

      document.title = title

      if (num) {
        if (this.tabTimer) clearTimeout(this.tabTimer)
        this.tabTimer = setTimeout(() => {
          document.title = `MeeChat`
        }, 1000)
      }
    }
  },
  getGlobalNotice () {
    let systemConfig = JSON.parse(localStorage.getItem('systemConfig') || '{}')

    return systemConfig.mute || 0
  },
  /**
   * @des 设置通知提醒
   * @param type {1:开启,2:关闭}
   * */
  setGlobalNotice (type) {
    let systemConfig = JSON.parse(localStorage.getItem('systemConfig') || '{}')

    systemConfig.mute = type

    localStorage.setItem('systemConfig', JSON.stringify(systemConfig))
  }
}

/**
 * @des 转换消息时间
 * @param {timeStamp} 时间戳
 * @param {type} 类型{1:会话列表,2:信息段}
*/
export function formatMsgTime (timeStamp, type = 1) {
  if (!timeStamp) return ''

  let lastDate = dayjs().subtract(1, 'days').format('YYYY-MM-DD') // 昨天
  let inputDay = dayjs(timeStamp * 1)
  let inputDate = inputDay.format('YYYY-MM-DD')

  switch (type) {
    // 会话列表
    case 1:
      if (inputDate < lastDate) {
        return inputDay.format('YY/MM/DD')
      } else if (lastDate == inputDate) {
        return `昨天`
      } else {
        return inputDay.format('HH:mm')
      }
    // 信息段
    case 2:
      if (inputDate < lastDate) {
        return inputDay.format('MM月DD日 HH:mm')
      } else if (lastDate == inputDate) {
        return `昨天 ${inputDay.format('HH:mm')}`
      } else {
        return inputDay.format('HH:mm')
      }
  }
}