{"version":3,"file":"ChatImage-cf821989.js","sources":["../../../app/javascript/components/chat/ChatImage.vue"],"sourcesContent":["<template>\n  <div v-if=\"imageObject\" class=\"relative\" :class=\"[sizeClasses]\">\n    <img\n      v-if=\"imageObject.image\"\n      class=\"h-full w-full rounded-full shadow-inner\"\n      :src=\"imageObject.image\"\n      :class=\"imageObject.id == 'bot_user' ? 'border border-grid p-1' : 'bg-gray-700 object-cover'\"\n    />\n    <div\n      v-else\n      class=\"image-object flex h-full w-full items-center justify-center rounded-full bg-gray-700 font-semibold\"\n      :class=\"[style === '' ? 'text-gray-200' : 'text-gray-900', customClass]\"\n      :style=\"style\"\n    >\n      <span v-if=\"channelName\">{{ channelName[0].toUpperCase() }}</span>\n      <span v-else-if=\"imageObject.name && imageObject.name[0] == '+'\">{{ imageObject.name.toUpperCase() }}</span>\n      <span v-else-if=\"imageObject.name\">{{ imageObject.name[0].toUpperCase() }}</span>\n    </div>\n    <div\n      v-if=\"!imageObject.cid && showOnline && imageObject.id != 'bot_user'\"\n      class=\"absolute bottom-0 right-0\"\n      :class=\"positionClasses\"\n    >\n      <div\n        class=\"online-icon rounded-full border border-gray-900\"\n        :class=\"[imageObject.online ? 'bg-green-600' : 'bg-gray-600', statusClasses]\"\n      ></div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { onMounted, ref, watch, computed, onUnmounted } from 'vue';\nimport { getColor } from '@/composeables/chat';\nimport { useMapGetter } from '@/store/map-state';\nconst { client, streamUser } = useMapGetter();\nconst props = defineProps({\n  item: Object,\n  showOnline: {\n    type: Boolean,\n    default: false\n  },\n  channelName: String,\n  customClass: String,\n  textSize: {\n    type: String,\n    default: 'text-lg'\n  },\n  size: {\n    type: String,\n    default: 'sm'\n  },\n  isChannel: {\n    type: Boolean,\n    default: false\n  }\n});\n\n// IMAGE\nconst imageObject = ref(props.isChannel ? props.item.data : props.item);\nconst style = ref('');\nconst image = computed(() => {\n  return imageObject.value.image ? imageObject.value.image : imageObject.value.profile_image;\n});\n\nasync function getBgColor() {\n  if (imageObject.value.background_color) {\n    return imageObject.value.background_color;\n  } else if (props.isChannel && !imageObject.value.image && imageObject.value.cid) {\n    const streamChannel = client.value.channel('messaging', imageObject.value.id);\n    if (streamChannel) {\n      await streamChannel.updatePartial({\n        set: {\n          background_color: getColor()\n        }\n      });\n      return streamChannel.data.background_color;\n    }\n  }\n}\n\nfunction updateImageObject() {\n  if (props.isChannel) {\n    if (props.item.data.direct_messaging) {\n      let channelMembers = Object.values(props.item.state.members);\n      let member = channelMembers.filter(x => x.user_id !== streamUser.value.id);\n      if (member.length > 0) {\n        imageObject.value = member[0].user;\n      }\n    } else {\n      imageObject.value = props.item.data;\n    }\n  } else if (imageObject.value.id === client.value.user.id) {\n    imageObject.value = client.value.user;\n  } else {\n    imageObject.value = props.item;\n  }\n  getBgColor().then(color => {\n    if (color) {\n      style.value = 'background-color: ' + color;\n    }\n  });\n}\n\nwatch(\n  () => props.item,\n  (newVal, oldVal) => {\n    updateImageObject();\n  }\n);\n\nonMounted(() => {\n  updateImageObject();\n  if (props.isChannel) {\n    props.item.on('channel.updated', () => {\n      updateImageObject();\n    });\n    client.value.on('user.updated', async event => {\n      let members = Object.values(props.item.state.members).map(x => x.user_id);\n      if (members.includes(event.user.id)) {\n        updateImageObject();\n      }\n    });\n  }\n  stateListener.value = client.value.on('user.presence.changed', event => {\n    if (imageObject.value.id === event.user.id) {\n      imageObject.value.online = event.user.online;\n    }\n  });\n});\n\n// STATE LISTENER\nconst stateListener = ref(null);\nonUnmounted(() => {\n  if (stateListener.value) {\n    stateListener.value.unsubscribe();\n  }\n});\n\n// SIZE CLASSES\nconst sizeClasses = ref(\n  {\n    xxs: 'h-4 w-4 text-xxs',\n    xs: 'h-7 w-7 text-sm',\n    sm: 'h-9 w-9 text-lg',\n    md: 'h-10 w-10 text-xl',\n    mdl: 'h-14 w-14 text-xl',\n    lg: 'h-16 w-16 text-4xl',\n    xl: 'h-20 w-20 text-4xl',\n    xxl: 'h-36 w-36 text-7xl'\n  }[props.size]\n);\nconst statusClasses = ref(\n  {\n    xxs: 'h-1.5 w-1.5',\n    xs: 'h-2 w-2',\n    sm: 'h-2.5 w-2.5',\n    md: 'h-2.5 w-2.5',\n    mdl: 'h-3 w-3',\n    lg: 'h-3 w-3 ',\n    xl: 'h-4 w-4 border-2',\n    xxl: 'h-6 w-6 border-2'\n  }[props.size]\n);\nconst positionClasses = ref(\n  {\n    xxs: '',\n    xs: '',\n    sm: '',\n    md: '',\n    lg: 'mr-0.5 mb-1',\n    xl: 'mr-0.5 mb-1',\n    xxl: 'mr-3 mb-3'\n  }[props.size]\n);\n</script>\n"],"names":["client","streamUser","useMapGetter","imageObject","ref","props","style","computed","getBgColor","streamChannel","getColor","updateImageObject","member","x","color","watch","newVal","oldVal","onMounted","event","stateListener","onUnmounted","sizeClasses","statusClasses","positionClasses"],"mappings":"wlBAmCM,CAAE,OAAAA,EAAQ,WAAAC,GAAeC,IAwBzBC,EAAcC,EAAIC,EAAM,UAAYA,EAAM,KAAK,KAAOA,EAAM,IAAI,EAChEC,EAAQF,EAAI,EAAE,EACNG,EAAS,IACdJ,EAAY,MAAM,MAAQA,EAAY,MAAM,MAAQA,EAAY,MAAM,aAC9E,EAED,eAAeK,GAAa,CAC1B,GAAIL,EAAY,MAAM,iBACpB,OAAOA,EAAY,MAAM,iBACpB,GAAIE,EAAM,WAAa,CAACF,EAAY,MAAM,OAASA,EAAY,MAAM,IAAK,CAC/E,MAAMM,EAAgBT,EAAO,MAAM,QAAQ,YAAaG,EAAY,MAAM,EAAE,EAC5E,GAAIM,EACF,aAAMA,EAAc,cAAc,CAChC,IAAK,CACH,iBAAkBC,EAAU,CAC7B,CACT,CAAO,EACMD,EAAc,KAAK,gBAE7B,CACH,CAEA,SAASE,GAAoB,CAC3B,GAAIN,EAAM,UACR,GAAIA,EAAM,KAAK,KAAK,iBAAkB,CAEpC,IAAIO,EADiB,OAAO,OAAOP,EAAM,KAAK,MAAM,OAAO,EAC/B,OAAOQ,GAAKA,EAAE,UAAYZ,EAAW,MAAM,EAAE,EACrEW,EAAO,OAAS,IAClBT,EAAY,MAAQS,EAAO,CAAC,EAAE,KAEtC,MACMT,EAAY,MAAQE,EAAM,KAAK,UAExBF,EAAY,MAAM,KAAOH,EAAO,MAAM,KAAK,GACpDG,EAAY,MAAQH,EAAO,MAAM,KAEjCG,EAAY,MAAQE,EAAM,KAE5BG,EAAY,EAAC,KAAKM,GAAS,CACrBA,IACFR,EAAM,MAAQ,qBAAuBQ,EAE3C,CAAG,CACH,CAEAC,EACE,IAAMV,EAAM,KACZ,CAACW,EAAQC,IAAW,CAClBN,GACD,CACH,EAEAO,EAAU,IAAM,CACdP,IACIN,EAAM,YACRA,EAAM,KAAK,GAAG,kBAAmB,IAAM,CACrCM,GACN,CAAK,EACDX,EAAO,MAAM,GAAG,eAAgB,MAAMmB,GAAS,CAC/B,OAAO,OAAOd,EAAM,KAAK,MAAM,OAAO,EAAE,IAAIQ,GAAKA,EAAE,OAAO,EAC5D,SAASM,EAAM,KAAK,EAAE,GAChCR,GAER,CAAK,GAEHS,EAAc,MAAQpB,EAAO,MAAM,GAAG,wBAAyBmB,GAAS,CAClEhB,EAAY,MAAM,KAAOgB,EAAM,KAAK,KACtChB,EAAY,MAAM,OAASgB,EAAM,KAAK,OAE5C,CAAG,CACH,CAAC,EAGD,MAAMC,EAAgBhB,EAAI,IAAI,EAC9BiB,EAAY,IAAM,CACZD,EAAc,OAChBA,EAAc,MAAM,aAExB,CAAC,EAGD,MAAME,EAAclB,EAClB,CACE,IAAK,mBACL,GAAI,kBACJ,GAAI,kBACJ,GAAI,oBACJ,IAAK,oBACL,GAAI,qBACJ,GAAI,qBACJ,IAAK,oBACT,EAAIC,EAAM,IAAI,CACd,EACMkB,EAAgBnB,EACpB,CACE,IAAK,cACL,GAAI,UACJ,GAAI,cACJ,GAAI,cACJ,IAAK,UACL,GAAI,WACJ,GAAI,mBACJ,IAAK,kBACT,EAAIC,EAAM,IAAI,CACd,EACMmB,EAAkBpB,EACtB,CACE,IAAK,GACL,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,GAAI,cACJ,GAAI,cACJ,IAAK,WACT,EAAIC,EAAM,IAAI,CACd"}