Перепиливание под чистый DDD

client-web/src/core/infrastructure/i18n.ts

@@ -285,6 +285,7 @@ const translations = {
     loadChatsError: 'Ошибка загрузки чатов',
     loadMessagesError: 'Ошибка загрузки сообщений',
     unreadMessages: 'Непрочитанные сообщения',
+    attachmentDiscardConfirm: 'У вас есть прикрепленные вложения. Если вы перейдете в другой чат, они будут потеряны. Продолжить?',
   },
   en: {
     myProfile: 'My Profile',
@@ -540,6 +541,7 @@ const translations = {
     loadChatsError: 'Error loading chats',
     loadMessagesError: 'Error loading messages',
     unreadMessages: 'Unread messages',
+    attachmentDiscardConfirm: 'You have attached files. If you switch to another chat, they will be lost. Continue?',
   },
 } as const;
 

client-web/src/core/presentation/components/ui/ImageLightbox.tsx

@@ -13,8 +13,14 @@ interface ImageLightboxProps {
 export default function ImageLightbox({ url, images, initialIndex = 0, onClose }: ImageLightboxProps) {
   const gallery = images && images.length > 0;
   const [index, setIndex] = useState(initialIndex);
-  const currentUrl = gallery ? images![index].url : url!;
+  
+  useEffect(() => {
+    setIndex(initialIndex);
+  }, [initialIndex]);
+
+  const rawUrl = gallery ? images![index].url : url!;
   const currentType = gallery ? images![index].type : undefined;
+  const currentUrl = currentType === 'video' ? rawUrl + (rawUrl.includes('?') ? '&lb=' + index : '?lb=' + index) : rawUrl;
   const total = gallery ? images!.length : 1;
 
   const goPrev = useCallback(() => {
@@ -101,6 +107,7 @@ export default function ImageLightbox({ url, images, initialIndex = 0, onClose }
               src={currentUrl}
               controls
               autoPlay
+              playsInline
               preload="metadata"
               className="w-full h-full object-contain outline-none bg-black/50"
             />

client-web/src/modules/chats/presentation/components/GroupSettings.tsx

@@ -703,9 +703,7 @@ export default function GroupSettings({ chat, onClose, onGoToMessage }: GroupSet
                                 {m.thumbnail ? (
                                   <img src={getMediaUrl(m.thumbnail)} alt="" className="w-full h-full object-cover" />
                                 ) : (
-                                  <div className="w-full h-full bg-gradient-to-br from-zinc-800 to-zinc-900 flex items-center justify-center">
-                                    <Video size={32} className="text-white/20" />
-                                  </div>
+                                  <video src={getMediaUrl(m.url)} preload="metadata" className="w-full h-full object-cover bg-zinc-900" />
                                 )}
                                 <div className="absolute inset-0 flex items-center justify-center bg-black/20 group-hover:bg-black/40 transition-colors">
                                   <Play size={24} className="text-white fill-white" />

client-web/src/modules/chats/presentation/components/MessageBubble.tsx

@@ -582,7 +582,7 @@ function MessageBubble({
                       return (
                         <div
                           key={m.id}
-                          className={`relative cursor-pointer group/video overflow-hidden transition-all hover:brightness-90 bg-black/20 ${cellClass}`}
+                          className={`relative cursor-pointer group/video overflow-hidden transition-all hover:brightness-90 bg-zinc-900 ${cellClass}`}
                           onClick={() => setLightboxData({ index: idx })}
                         >
                           {gif && m.url?.toLowerCase().endsWith('.mp4') ? (
@@ -599,7 +599,7 @@ function MessageBubble({
                                 <video
                                   src={getMediaUrl(m.url)}
                                   preload="metadata"
-                                  className={`w-full h-full object-cover bg-black/20 ${galleryMedia.length === 1 ? 'relative h-auto' : 'absolute inset-0'}`}
+                                  className={`w-full h-full object-cover bg-zinc-900 ${galleryMedia.length === 1 ? 'relative h-auto min-h-[160px]' : 'absolute inset-0'}`}
                                 />
                               )}
                               <div className={`absolute inset-0 flex items-center justify-center bg-black/20 group-hover/video:bg-black/40 transition-colors`}>