From 022199b8a28bbab4daa32eed2bd155c7f232c316 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=98=D0=B3=D0=BE=D1=80=D1=8C=20=D0=9D=D0=B0=D0=B4=D0=B5?=
 =?UTF-8?q?=D0=B8=D0=BD?= <igor_26reg@mail.ru>
Date: Fri, 28 Nov 2025 08:19:15 +0300
Subject: [PATCH] =?UTF-8?q?Fix:=20=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B0=20=D0=B7=D0=B0=D0=B3=D1=80=D1=83=D0=B7?=
 =?UTF-8?q?=D0=BA=D0=B0=20=D0=B2=D0=B8=D0=B4=D0=B5=D0=BE=20=D0=B8=20=D1=81?=
 =?UTF-8?q?=D1=82=D0=B8=D0=BB=D0=B8=D0=B7=D0=B0=D1=86=D0=B8=D1=8F=20=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=BE=D0=B6=D0=B5=D0=BD=D0=B8=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Исправление видео:
- Видео элементы создаются с уникальными ID
- src устанавливается после добавления в DOM через requestAnimationFrame
- Используется preload='auto' вместо 'metadata' для немедленной загрузки
- video.load() вызывается после установки src

Стилизация вложений:
- Убран bg-light у ссылок на файлы
- Добавлены стили .message-attachments для прозрачного фона
- Для bubble-me используется rgba(255,255,255,0.15) фон
- Для обычных сообщений используется rgba(0,0,0,0.05) фон
- Добавлены hover эффекты
- Файлы теперь соответствуют цвету сообщения
---
 backend/static/css/components/chat-detail.css | 37 ++++++++++++
 .../js/components/chatMessageTemplates.js     | 58 +++++++------------
 .../templates/communications/chat_detail.html |  2 +-
 3 files changed, 58 insertions(+), 39 deletions(-)

diff --git a/backend/static/css/components/chat-detail.css b/backend/static/css/components/chat-detail.css
index d2f67482..878432c3 100644
--- a/backend/static/css/components/chat-detail.css
+++ b/backend/static/css/components/chat-detail.css
@@ -231,6 +231,43 @@ main.main {
   opacity: 1;
 }
 
+/* Вложения в сообщениях */
+.message-attachments {
+  margin-top: 8px;
+}
+
+.message-attachments .attachment-item {
+  background: transparent !important;
+  padding: 0;
+  margin-bottom: 8px;
+}
+
+.message-attachments a {
+  background: rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  transition: all 0.2s ease;
+}
+
+.bubble-me .message-attachments a {
+  background: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.message-attachments a:hover {
+  background: rgba(0, 0, 0, 0.08);
+}
+
+.bubble-me .message-attachments a:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.message-attachments video,
+.message-attachments img,
+.message-attachments audio {
+  max-width: 100%;
+  border-radius: 8px;
+}
+
 /* Выпадающее меню вложений */
 .dropdown-menu {
   min-width: 200px;
diff --git a/backend/static/js/components/chatMessageTemplates.js b/backend/static/js/components/chatMessageTemplates.js
index 3c5b508c..3417e77b 100644
--- a/backend/static/js/components/chatMessageTemplates.js
+++ b/backend/static/js/components/chatMessageTemplates.js
@@ -155,9 +155,10 @@ export function createMessageElement(msg, options = {}) {
   
   // Формирование вложений
   let attachmentsHTML = '';
+  let videoIds = [];
   if (msg.has_attachments && msg.attachments && msg.attachments.length > 0) {
     attachmentsHTML = '<div class="message-attachments mt-2">';
-    msg.attachments.forEach(att => {
+    msg.attachments.forEach((att, index) => {
       attachmentsHTML += '<div class="attachment-item mb-2">';
       
       if (att.file_type === 'image') {
@@ -175,9 +176,11 @@ export function createMessageElement(msg, options = {}) {
           </audio>
           <div class="small text-secondary">${esc(att.file_name)}</div>`;
       } else if (att.file_type === 'video') {
+        const videoId = `video_${Date.now()}_${index}`;
+        videoIds.push({ id: videoId, url: att.file_url, mime: att.mime_type });
         attachmentsHTML += `
-          <video controls preload="metadata" class="w-100" style="max-width: 400px;">
-            <source src="${att.file_url}" type="${att.mime_type}">
+          <video id="${videoId}" controls preload="auto" class="w-100" style="max-width: 400px;">
+            <source type="${att.mime_type}">
             Ваш браузер не поддерживает видео.
           </video>
           <div class="small text-secondary">${esc(att.file_name)}</div>`;
@@ -185,7 +188,7 @@ export function createMessageElement(msg, options = {}) {
         const fileSize = att.file_size ? formatFileSize(att.file_size) : '';
         attachmentsHTML += `
           <a href="${att.file_url}" 
-             class="d-flex align-items-center text-decoration-none p-2 border rounded bg-light"
+             class="d-flex align-items-center text-decoration-none p-2 border rounded"
              download="${esc(att.file_name)}">
             <i class="bi-file-earmark fs-3 text-primary me-2"></i>
             <div>
@@ -223,41 +226,20 @@ export function createMessageElement(msg, options = {}) {
     wrap.innerHTML = `${bubble}<a class="ms-2 text-decoration-none" href="${profileUrl}">${ava}</a>`;
   }
 
-  // Принудительно создаём и загружаем видео элементы после добавления в DOM
-  if (msg.has_attachments && msg.attachments && msg.attachments.length > 0) {
-    // Находим все video placeholder'ы и заменяем их реальными элементами
-    const videoContainers = wrap.querySelectorAll('.attachment-item');
-    msg.attachments.forEach((att, index) => {
-      if (att.file_type === 'video') {
-        const container = videoContainers[index];
-        if (container) {
-          // Очищаем контейнер
-          container.innerHTML = '';
-          
-          // Создаём video элемент программно
-          const video = document.createElement('video');
-          video.controls = true;
-          video.preload = 'metadata';
-          video.className = 'w-100';
-          video.style.maxWidth = '400px';
-          
-          const source = document.createElement('source');
-          source.src = att.file_url;
-          source.type = att.mime_type;
-          
-          video.appendChild(source);
-          
-          const textDiv = document.createElement('div');
-          textDiv.className = 'small text-secondary';
-          textDiv.textContent = att.file_name;
-          
-          container.appendChild(video);
-          container.appendChild(textDiv);
-          
-          // Загружаем видео
-          video.load();
+  // Устанавливаем src для видео после добавления в DOM
+  if (videoIds.length > 0) {
+    // Используем requestAnimationFrame чтобы убедиться что элементы в DOM
+    requestAnimationFrame(() => {
+      videoIds.forEach(videoData => {
+        const video = wrap.querySelector(`#${videoData.id}`);
+        if (video) {
+          const source = video.querySelector('source');
+          if (source) {
+            source.src = videoData.url;
+            video.load();
+          }
         }
-      }
+      });
     });
   }
 
diff --git a/backend/templates/communications/chat_detail.html b/backend/templates/communications/chat_detail.html
index 379feeac..57f1eed6 100644
--- a/backend/templates/communications/chat_detail.html
+++ b/backend/templates/communications/chat_detail.html
@@ -114,7 +114,7 @@
                               <div class="small text-secondary">{{ attachment.file_name }}</div>
                             {% else %}
                               <a href="{{ attachment.file.url }}" 
-                                 class="d-flex align-items-center text-decoration-none p-2 border rounded bg-light"
+                                 class="d-flex align-items-center text-decoration-none p-2 border rounded"
                                  download="{{ attachment.file_name }}">
                                 <i class="bi-file-earmark fs-3 text-primary me-2"></i>
                                 <div>