templates/messages.html

{% extends "base.html" %}

{% block title %}{{ user.username }} - الرسائل{% endblock %}

{% block content %}

<style>

    /* تصميم الحاوية */

.messages-container {

    max-width: 600px;

    margin: 20px auto;

    padding: 10px;

    border: 1px solid #ddd;

    border-radius: 10px;

    background-color: #f9f9f9;

    font-family: Arial, sans-serif;

}



/* معلومات المستخدم */

.user-info {

    display: flex;

    align-items: center;

    margin-bottom: 15px;

    padding: 10px;

    background-color: #ffffff;

    border-bottom: 1px solid #ddd;

}



.profile-photo {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    margin-right: 10px;

}



.username {

    font-size: 18px;

    font-weight: bold;

}



/* قائمة الرسائل */

.messages-list {

    display: flex;

    flex-direction: column;

    max-height: 400px;

    overflow-y: auto;

    padding: 10px;

    background-color: #ffffff;

    border-radius: 5px;

    margin-bottom: 15px;

}



/* الرسائل */

.message-item {

    margin: 5px 0;

    padding: 10px;

    border-radius: 15px;

    max-width: 75%;

    word-wrap: break-word;

    font-size: 14px;

}



/* الرسائل المرسلة */

.message-item.sent {

    background-color: #0078ff;

    color: #ffffff;

    align-self: flex-end;

    text-align: right;

}



/* الرسائل المستلمة */

.message-item.received {

    background-color: #f1f0f0;

    color: #000000;

    align-self: flex-start;

    text-align: left;

}



/* الطابع الزمني */

.message-timestamp {

    font-size: 10px;

    color: #666;

    margin-top: 5px;

    display: block;

}



/* إدخال الرسائل */

.message-input {

    /* display: flex; */

    align-items: center;

    gap: 10px;

}



textarea#message-input {

    width: 100%;

    height: 50px;

    padding: 10px;

    border: 1px solid #ddd;

    border-radius: 5px;

    resize: none;

    font-size: 14px;

}



button#send-message-btn {

    background-color: #0078ff;

    color: #ffffff;

    border: none;

    padding: 10px 15px;

    border-radius: 5px;

    font-size: 14px;

    cursor: pointer;

    transition: background-color 0.3s;

}



button#send-message-btn:hover {

    background-color: #005bb5;

}



 .received .seen-status{

    display: none;

}

img{

    max-width: 100%;

}



video{

    max-width: 100%;

}



.input-group{

    display: flex;

    flex-direction: row-reverse;

    align-items: center;

    position: fixed;

    bottom: 10px;

    width: calc(100vw - 16.8px);

}





.file-upload-btn{

    font-size: 25px;

    margin-top: 5px;

}



/* دائرة التحميل */

.loading-circle {

    display: inline-block;

    width: 40px;  /* زيادة الحجم ليكون أكثر وضوحًا */

    height: 40px;

    border: 4px solid #0078ff;  /* اللون الأزرق الزاهي */

    border-top: 4px solid transparent;  /* الجزء العلوي شفاف لإعطاء التأثير الدوار */

    border-radius: 50%;  /* جعلها دائرية */

    animation: spin 0.8s linear infinite;  /* سرعة التدوير أصبحت أسرع (0.8 ثانية) */

    margin: 10px auto;  /* ضبط المسافة بين الدائرة والرسائل */

    box-shadow: 0px 0px 10px rgba(0, 120, 255, 0.5);  /* إضافة ظل خفيف لإعطاء تأثير العمق */

}



/* التأثير الذي يجعل الدائرة تدور */

@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}







/* تنسيق نافذة المعاينة المنبثقة */

.modal {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.8);

    justify-content: center;

    align-items: center;

    z-index: 1000;

}



.modal-content {

    background: white;

    padding: 20px;

    border-radius: 10px;

    text-align: center;

    position: relative;

    max-width: 90%;

    max-height: 90%;

    margin-left: auto;

    top: 50%;

    margin-right: auto;

    transform: translate(0, -50%);

}



#closeModal {

    position: absolute;

    top: 10px;

    right: 10px;

    background: red;

    color: white;

    border: none;

    border-radius: 50%;

    width: 30px;

    height: 30px;

    cursor: pointer;

}



.send-button {

    background: #007bff;

    color: white;

    border: none;

    padding: 10px 20px;

    border-radius: 5px;

    cursor: pointer;

    margin-top: 10px;

}



.send-button:hover {

    background: #0056b3;

}



#file-preview img,

#file-preview video {

    max-width: 100px;

    max-height: 100px;

    border-radius: 5px;

    margin-top: 10px;

}





/* تنسيق دائرة التحميل */

.loading-spinner {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 10px;

    font-size: 14px;

    color: #007bff;

    background-color: #f1f1f1;

    border-radius: 5px;

    margin: 10px auto;

    width: fit-content;

}



.loading-spinner::before {

    content: "";

    border: 3px solid #f3f3f3;

    border-top: 3px solid #007bff;

    border-radius: 50%;

    width: 20px;

    height: 20px;

    animation: spin 1s linear infinite;

    margin-right: 10px;

}



@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}



/* تنسيق دائرة التحميل */

.loading-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 10px;

    background-color: #f1f1f1;

    border-radius: 5px;

    margin: 10px auto;

    width: fit-content;

}



.loading-spinner {

    font-size: 14px;

    color: #007bff;

    margin-bottom: 10px;

}



/* تنسيق شريط التقدم */

.progress-bar {

    width: 200px;

    height: 10px;

    background-color: #e0e0e0;

    border-radius: 5px;

    overflow: hidden;

}



.progress {

    height: 100%;

    background-color: #007bff;

    width: 0%;

    transition: width 0.3s ease;

}

</style>
<div class="messages-container">
    <!-- معلومات المستخدم -->
    <div class="user-info">
        <img src="{{ url_for('static', filename=user.profile_photo) }}" alt="صورة المستخدم" class="profile-photo">
        <span class="username">{{ user.username }}</span>
    </div>

    <!-- قائمة الرسائل -->
    <div class="messages-list" id="messages-list">
        <div id="loading-container" style="display: none;">
            <div class="loading-circle"></div>
        </div>
    </div>

    <!-- إدخال الرسائل -->
    <div class="message-input">
        <form id="messageForm" enctype="multipart/form-data">
            <div class="input-group">
                <label for="file-input" class="file-upload-btn">
                    📎
                    <input type="file" id="file-input" name="file" accept="image/*, video/*" hidden>
                </label>
                <textarea id="message-input" placeholder="اكتب رسالتك هنا..."></textarea>
               
                <button type="submit" id="send-message-btn">ارسال</button>
            </div>
            <div id="file-preview"></div>
        </form>
    </div>
</div>

<!-- نافذة المعاينة المنبثقة -->
<div id="previewModal" class="modal">
    <div class="modal-content">
        <button id="closeModal">&times;</button>
        <div id="modalPreview"></div>
        <button id="sendFromModal" class="send-button">إرسال</button>
    </div>
</div>

<script>

$(document).ready(async function () {

    const messageList = $('#messages-list');

    const receiverId = {{ user.id }};

    let selectedFile = null;



    // إرسال طلب لتحديث حالة المستخدم إلى "داخل المحادثة"

    await fetch('/join_chat', {

        method: 'POST',

        headers: {

            'Content-Type': 'application/json',

        },

    });



    // تحديث جميع الرسائل إلى "مقروءة" عند فتح المحادثة

    await fetch('/mark_all_as_seen', {

        method: 'POST',

        headers: {

            'Content-Type': 'application/json',

        },

        body: JSON.stringify({ receiver_id: receiverId }),

    });



    // معالجة اختيار الملف

    $('#file-input').change(function(e) {

        const file = e.target.files[0];

        if (file) {

            selectedFile = file;

            showFilePreview(file);

        }

    });



    function showFilePreview(file) {

        const preview = $('#file-preview');

        preview.empty();



        if (file.type.startsWith('image/')) {

            preview.append(`<img src="${URL.createObjectURL(file)}" class="preview-image">`);

        } else if (file.type.startsWith('video/')) {

            preview.append(`

                <video controls class="preview-video">

                    <source src="${URL.createObjectURL(file)}" type="${file.type}">

                </video>

            `);

        }



        preview.append(`

            <div class="file-info">

                <span>${file.name}</span>

                <button type="button" class="remove-file-btn">×</button>

            </div>

        `);



        $('.remove-file-btn').click(() => {

            selectedFile = null;

            preview.empty();

            $('#file-input').val('');

        });

    }

    async function loadMessages() {

    try {

        const response = await fetch(`/get_messages/${receiverId}`);

        const messages = await response.json();



        if (!Array.isArray(messages)) {

            console.error('الرد ليس مصفوفة:', messages);

            return;

        }



        messageList.empty();

        messages.forEach(message => {

            const messageItem = $('<div>')

                .addClass('message-item')

                .attr('data-message-id', message.id);



            // تحديد إذا كانت الرسالة مرسلة أو مستقبلة

            if (message.sender_id === {{ current_user.id }}) {

                messageItem.addClass('sent');



                // إضافة حالة المشاهدة للمرسل

                if (message.watched_by_receiver) {

                    messageItem.append('<span class="seen-status">✓✓</span>');  // المستقبل شاهد الرسالة

                } else {

                    messageItem.append('<span class="seen-status">✓</span>');   // الرسالة مرسلة، ولكن المستقبل لم يشاهدها بعد

                }

            } else {

                messageItem.addClass('received');

                // لا تظهر أي علامة للمستقبل

            }



            const contentContainer = $('<div>').addClass('message-content');



            // عرض الوسائط (صور أو فيديوهات) إذا كانت موجودة

            if (message.file_url) {

                if (message.file_type.startsWith('image/')) {

                    // إذا كانت صورة

                    contentContainer.append(`<img src="/${message.file_url}" class="message-media">`);

                } else if (message.file_type.startsWith('video/')) {

                    // إذا كان فيديو

                    contentContainer.append(`

                        <video controls class="message-media">

                            <source src="/${message.file_url}" type="${message.file_type}">

                        </video>

                    `);

                }

            }



            // إضافة النصوص إذا كانت موجودة

            if (message.content) {

                contentContainer.append(`<span>${message.content}</span>`);

            }



            // إضافة الطابع الزمني

            const timestamp = $('<span>')

                .addClass('message-timestamp')

                .text(message.created_at);



            // إضافة جميع العناصر إلى الرسالة

            messageItem.append(contentContainer).append(timestamp);

            messageList.append(messageItem);

        });



        // تمرير التمرير لأسفل لرؤية آخر الرسائل

        messageList.scrollTop(messageList.prop('scrollHeight'));

    } catch (error) {

        console.error('حدث خطأ أثناء تحميل الرسائل:', error);

    }

}







    // SSE لتحديث حالة المشاهدة

    const updateEventSource = new EventSource(`/stream_message_updates/${receiverId}`);

    updateEventSource.onmessage = function (event) {

        const data = JSON.parse(event.data);

        const messageId = data.message_id;

        const isSender = data.sender_id === {{ current_user.id }};



        // إذا كان المستخدم الحالي هو المرسل

        if (isSender) {

            const seenStatus = $(`.message-item[data-message-id="${messageId}"] .seen-status`);

            if (data.watched_by_receiver) {

                seenStatus.text('✓✓'); // المستقبل شاهد الرسالة

            } else {

                seenStatus.text('✓'); // الرسالة مرسلة، ولكن المستقبل لم يشاهدها بعد

            }

        }

    };



    updateEventSource.onerror = function () {

        console.log('SSE error. Reconnecting...');

        setTimeout(() => {

            new EventSource(`/stream_message_updates/${receiverId}`);

        }, 3000);

    };



    // SSE للرسائل الجديدة

    const eventSource = new EventSource(`/stream_messages/${receiverId}`);

    eventSource.onmessage = function (event) {

        loadMessages();

    };



    // إرسال الرسالة





// عند اختيار ملف



// عند اختيار ملف

$('#file-input').change(function(e) {

    const file = e.target.files[0];

    if (file) {

        selectedFile = file;

        showFilePreview(file); // عرض معاينة الملف

    }

});



// عرض معاينة الملف في نافذة منبثقة

function showFilePreview(file) {

    const previewModal = $('#previewModal');

    const modalPreview = $('#modalPreview');



    // تنظيف المحتوى السابق

    modalPreview.empty();



    if (file.type.startsWith('image')) {

        // عرض الصورة

        const img = $('<img>').attr('src', URL.createObjectURL(file)).css({ maxWidth: '100%', maxHeight: '80vh' });

        modalPreview.append(img);

    } else if (file.type.startsWith('video')) {

        // عرض الفيديو

        const video = $('<video>').attr('src', URL.createObjectURL(file)).attr('controls', true).css({ maxWidth: '100%', maxHeight: '80vh' });

        modalPreview.append(video);

    }



    // إظهار نافذة المعاينة

    previewModal.show();

}



// إغلاق نافذة المعاينة

$('#closeModal').click(function() {

    $('#previewModal').hide();

});



// إرسال الملف من نافذة المعاينة

$('#sendFromModal').click(function() {

    $('#previewModal').hide();

    $('#messageForm').submit();

});



// إرسال النموذج

$('#messageForm').submit(async function(e) {

    e.preventDefault();

    const messageContent = $('#message-input').val().trim();

    const formData = new FormData();

    formData.append('content', messageContent);

    formData.append('receiver_id', receiverId);



    if (selectedFile) {

        formData.append('file', selectedFile);



        // إظهار دائرة التحميل وشريط التقدم في مكان الرسائل

        $('#messages-list').append(`

            <div class="loading-container">

                <div class="loading-spinner">جاري التحميل...</div>

                <div class="progress-bar">

                    <div class="progress"></div>

                </div>

            </div>

        `);

    }



    if (!messageContent && !selectedFile) return;



    try {

        const isReceiverActive = await fetch(`/is_user_active/${receiverId}`).then(res => res.json());



        // استخدام XMLHttpRequest لتتبع تقدم الرفع

        const xhr = new XMLHttpRequest();

        xhr.open('POST', '/send_message', true);



        // تحديث شريط التقدم أثناء الرفع

        xhr.upload.onprogress = function(event) {

            if (event.lengthComputable) {

                const percentComplete = (event.loaded / event.total) * 100;

                $('.progress').css('width', percentComplete + '%');

            }

        };



        xhr.onload = function() {

            if (xhr.status === 200) {

                $('#message-input').val('');

                $('#file-preview').empty();

                selectedFile = null;

                $('#file-input').val('');



                if (isReceiverActive.active) {

                    const messageId = JSON.parse(xhr.responseText).message_id;

                    fetch(`/mark_message_as_seen/${messageId}`, {

                        method: 'POST',

                        headers: {

                            'Content-Type': 'application/json',

                        },

                    });

                }



                // إخفاء دائرة التحميل وشريط التقدم بعد اكتمال الإرسال

                $('.loading-container').remove();

                loadMessages();

            } else {

                console.error('حدث خطأ أثناء إرسال الرسالة:', xhr.statusText);

                $('.loading-container').remove();

            }

        };



        xhr.onerror = function() {

            console.error('حدث خطأ أثناء إرسال الرسالة:', xhr.statusText);

            $('.loading-container').remove();

        };



        xhr.send(formData);

    } catch (error) {

        console.error('حدث خطأ أثناء إرسال الرسالة:', error);

        // إخفاء دائرة التحميل وشريط التقدم في حالة حدوث خطأ

        $('.loading-container').remove();

    }

});





    await loadMessages();

});



window.addEventListener('beforeunload', async function () {

    await fetch('/leave_chat', {

        method: 'POST',

        headers: {

            'Content-Type': 'application/json',

        },

    });



    if (updateEventSource) updateEventSource.close();

    if (eventSource) eventSource.close();

});

</script>


{% endblock %}