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

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`}>