@webitel/ui-chats 0.1.10 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-chats",
-	"version": "0.1.10",
+	"version": "0.1.12",
 	"description": "Reusable Webitel Frontend Code for Chats UI",
 	"workspaces": [
 		"../../",

package/src/ui/media-viewer/media-viewer.vue

@@ -0,0 +1,69 @@
+<template>
+  <aside
+    v-if="media"
+    class="media-viewer"
+    @click="close"
+  >
+    <div class="media-viewer__shadow" />
+    <div class="media-viewer__content-wrapper">
+      <img
+        class="media-viewer__content-img"
+        :src="media.url"
+        :alt="media.name"
+      >
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import type { ChatMessageFile } from '../messaging/types/ChatMessage.types';
+
+defineProps<{
+	media: ChatMessageFile | null;
+}>();
+
+const emit = defineEmits<{
+	close: [];
+}>();
+
+function close() {
+	emit('close');
+}
+</script>
+
+<style scoped>
+.media-viewer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--popup-wrapper-z-index);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.media-viewer__shadow {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: var(--wt-popup-shadow-color);
+}
+
+.media-viewer__content-wrapper {
+  position: relative;
+  z-index: 1;
+}
+
+.media-viewer__content-img {
+  /* like on web telegram preview */
+  display: block;
+  max-width: 100vw;
+  max-height: 90vh;
+  object-fit: contain;
+  margin: auto;
+}
+</style>

package/src/ui/messaging/modules/message/components/details/chat-message-player.vue

@@ -3,13 +3,21 @@
     class="chat-message-player"
     @click="emit('open', props.file)"
   >
+    <wt-vidstack-player
+      v-if="isVideo"
+      static
+      hide-expand
+      stretch
+      :size="ComponentSize.SM"
+      :src="mediaSrc"
+    />
     <wt-player
-      :src="mediaUrl"
-      :mime="props.type"
+      v-else
+      :src="mediaSrc"
       :autoplay="false"
-      :hide-duration="type.includes('video')"
-      reset-on-end
-      reset-volume
+      :closable="false"
+      hide-volume-slider
+      class="chat-message-player__player"
       @initialized="handlePlayerInitialize"
     />
   </div>
@@ -17,6 +25,8 @@
 
 <script setup lang="ts">
 import { computed, defineEmits, defineProps } from 'vue';
+import { WtVidstackPlayer, WtPlayer } from '@webitel/ui-sdk/components';
+import { ComponentSize } from '@webitel/ui-sdk/enums';
 
 import type { ChatMessageFile } from '../../../../types/ChatMessage.types';
 
@@ -24,6 +34,7 @@ const props = defineProps<{
 	file: ChatMessageFile;
 	type: string;
 }>();
+
 const emit = defineEmits<{
 	open: [
 		ChatMessageFile,
@@ -33,7 +44,15 @@ const emit = defineEmits<{
 	];
 }>();
 
-const mediaUrl = computed(() => props.file.streamUrl || props.file.url);
+const isVideo = computed(() => {
+	return mediaSrc.value?.type?.includes('video');
+});
+const mediaSrc = computed(() => {
+	return {
+		src: props.file.streamUrl || props.file.url,
+		type: props.type,
+	};
+});
 
 function handlePlayerInitialize(player) {
 	emit('initialized', player);

package/src/ui/messaging/modules/message/composables/useChatMessageFile.ts

@@ -1,31 +1,39 @@
-import { computed, type Ref, toRef } from "vue";
+import { computed, type Ref, toRef } from 'vue';
 
-import type { ChatMessageFile } from "../../../types/ChatMessage.types";
+import type { ChatMessageFile } from '../../../types/ChatMessage.types';
 
 export function useChatMessageFile(
 	file: ChatMessageFile | Ref<ChatMessageFile>,
 ) {
 	const fileRef = toRef(file);
 
-	const type = computed(() => {
+	const fileType = computed(() => {
 		return fileRef.value?.mime;
 	});
 
+	const fileSrc = computed(() => {
+		return fileRef.value?.streamUrl || fileRef.value?.url;
+	});
+
 	const image = computed(() => {
-		const isImage = type.value?.includes("image");
-		const isHEIC = type.value?.includes("heic");
+		const isImage = fileType.value?.includes('image');
+		const isHEIC = fileType.value?.includes('heic');
 
 		if (isHEIC) return null;
 
 		return isImage && fileRef.value; //https://webitel.atlassian.net/browse/WTEL-6268
 	});
-
 	const media = computed(() => {
-		const isMedia =
-			type.value?.includes("audio") || type.value?.includes("video");
-		return isMedia && fileRef.value;
+		return (
+			fileRef.value &&
+			(isMediaType(fileType.value) || isMediaType(fileSrc.value))
+		);
 	});
 
+	const isMediaType = (value: string) => {
+		return !!(value?.includes('audio') || value?.includes('video'));
+	};
+
 	const document = computed(() => {
 		return !media.value && !image.value && fileRef.value;
 	});

package/src/ui/the-chat-container.vue

@@ -1,5 +1,9 @@
 <template>
   <section class="the-chat-container">
+    <media-viewer
+      :media="mediaView"
+      @close="closeMedia"
+    />
     <slot name="main">
       <dropzone
         v-if="!isDropzoneDisabled && isDropzoneVisible"
@@ -45,23 +49,26 @@
 </template>
 
 <script setup lang="ts">
-import { ComponentSize } from "@webitel/ui-sdk/enums";
-import { computed, provide, ref } from "vue";
+import { ComponentSize } from '@webitel/ui-sdk/enums';
+import { computed, provide, ref } from 'vue';
 
-import ChatFooterWrapper from "./chat-footer/components/chat-footer-wrapper.vue";
-import ChatInputActionsBar from "./chat-footer/modules/user-input/components/chat-input-actions-bar.vue";
-import ChatTextField from "./chat-footer/modules/user-input/components/chat-text-field.vue";
+import ChatFooterWrapper from './chat-footer/components/chat-footer-wrapper.vue';
+import ChatInputActionsBar from './chat-footer/modules/user-input/components/chat-input-actions-bar.vue';
+import ChatTextField from './chat-footer/modules/user-input/components/chat-text-field.vue';
 import {
 	ChatAction,
 	type SharedActionSlots,
-} from "./chat-footer/modules/user-input/enums/ChatAction.enum";
-import Dropzone from "./messaging/components/dropzone.vue";
-import MessagesContainer from "./messaging/components/the-messages-container.vue";
-import { useDropzoneHandlers } from "./messaging/composables/useDropzoneHandlers";
-import { MessageAction } from "./messaging/modules/message/enums/MessageAction.enum";
-import type { ChatMessageType } from "./messaging/types/ChatMessage.types";
-import { createUiChatsEmitter } from "./utils/emitter";
-import type { ResultCallbacks } from "./utils/ResultCallbacks.types";
+} from './chat-footer/modules/user-input/enums/ChatAction.enum';
+import MediaViewer from './media-viewer/media-viewer.vue';
+import Dropzone from './messaging/components/dropzone.vue';
+import MessagesContainer from './messaging/components/the-messages-container.vue';
+import { useDropzoneHandlers } from './messaging/composables/useDropzoneHandlers';
+import type {
+	ChatMessageFile,
+	ChatMessageType,
+} from './messaging/types/ChatMessage.types';
+import { createUiChatsEmitter } from './utils/emitter';
+import type { ResultCallbacks } from './utils/ResultCallbacks.types';
 
 const props = withDefaults(
 	defineProps<{
@@ -71,7 +78,7 @@ const props = withDefaults(
 		canLoadNextMessages?: boolean; // 'next'
 		isNextMessagesLoading?: boolean;
 		withoutAvatars?: boolean;
-    readonly?: boolean; // hide chat footer with textarea and action-buttons
+		readonly?: boolean; // hide chat footer with textarea and action-buttons
 	}>(),
 	{
 		size: ComponentSize.MD,
@@ -79,7 +86,7 @@ const props = withDefaults(
 		chatActions: () => [],
 		canLoadNextMessages: false,
 		isNextMessagesLoading: false,
-    readonly: false,
+		readonly: false,
 	},
 );
 
@@ -95,7 +102,6 @@ const emit = defineEmits<{
 		options: ResultCallbacks,
 	): void;
 	(e: typeof ChatAction.LoadNextMessages): void;
-	(e: typeof MessageAction.ClickOnImage, message: ChatMessageType): void;
 }>();
 
 const slots = defineSlots<
@@ -107,20 +113,30 @@ const slots = defineSlots<
 
 const uiChatsEmitter = createUiChatsEmitter();
 
-provide("size", props.size);
-provide("uiChatsEmitter", uiChatsEmitter);
+provide('size', props.size);
+provide('uiChatsEmitter', uiChatsEmitter);
 
-uiChatsEmitter?.on("clickChatMessageImage", (message) => {
-	emit(MessageAction.ClickOnImage, message);
+const mediaView = ref<ChatMessageFile | null>(null);
+
+uiChatsEmitter?.on('clickChatMessageImage', (message) => {
+	openMedia(message);
 });
 const { isDropzoneVisible, handleDragLeave } = useDropzoneHandlers();
 
-const draft = ref<string>("");
+function openMedia(message: ChatMessageType) {
+	mediaView.value = message.file ?? null;
+}
+
+function closeMedia() {
+	mediaView.value = null;
+}
+
+const draft = ref<string>('');
 
 const slottedChatActions = computed(() => {
 	return Object.keys(slots)
-		.filter((key) => key.startsWith("action:"))
-		.map((key) => key.replace("action:", ""));
+		.filter((key) => key.startsWith('action:'))
+		.map((key) => key.replace('action:', ''));
 });
 const isDropzoneDisabled = computed(
 	() => !props.chatActions.includes(ChatAction.AttachFiles),
@@ -128,7 +144,7 @@ const isDropzoneDisabled = computed(
 
 function sendMessage() {
 	emit(`action:${ChatAction.SendMessage}`, draft.value, {
-		onSuccess: () => (draft.value = ""),
+		onSuccess: () => (draft.value = ''),
 	});
 }
 

package/types/ui/media-viewer/media-viewer.vue.d.ts

@@ -0,0 +1,11 @@
+import type { ChatMessageFile } from '../messaging/types/ChatMessage.types';
+type __VLS_Props = {
+    media: ChatMessageFile | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: () => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/types/ui/messaging/modules/message/composables/useChatMessageFile.d.ts

@@ -1,15 +1,8 @@
-import { type Ref } from "vue";
-import type { ChatMessageFile } from "../../../types/ChatMessage.types";
+import { type Ref } from 'vue';
+import type { ChatMessageFile } from '../../../types/ChatMessage.types';
 export declare function useChatMessageFile(file: ChatMessageFile | Ref<ChatMessageFile>): {
     image: import("vue").ComputedRef<ChatMessageFile>;
-    media: import("vue").ComputedRef<ChatMessageFile | {
-        id?: string;
-        name?: string;
-        size?: string;
-        mime?: string;
-        url?: string;
-        streamUrl?: string;
-    }>;
+    media: import("vue").ComputedRef<boolean>;
     document: import("vue").ComputedRef<ChatMessageFile | {
         id?: string;
         name?: string;