Add deletion control for attached videos

0fa1b26fa44de4c4f1182cd9182426f8580e7d6b

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: b357e5d25e54bc9985d55d0cbe4d889365a6f42b

public/index.html+23 -13 Viewed

                         <div class="mes_reasoning"></div>
                     </details>
                     <div class="mes_text"></div>
-                    <div class="mes_img_container">
+            <div class="mes_img_container">
-                        <div class="mes_img_controls">
+                <div class="mes_img_controls">
-                            <div title="Expand and zoom" class="right_menu_button fa-lg fa-solid fa-magnifying-glass mes_img_enlarge" data-i18n="[title]Expand and zoom"></div>
+                    <div title="Expand and zoom" class="right_menu_button fa-lg fa-solid fa-magnifying-glass mes_img_enlarge" data-i18n="[title]Expand and zoom"></div>
-                            <div title="Caption" class="right_menu_button fa-lg fa-solid fa-envelope-open-text mes_img_caption" data-i18n="[title]Caption"></div>
+                    <div title="Caption" class="right_menu_button fa-lg fa-solid fa-envelope-open-text mes_img_caption" data-i18n="[title]Caption"></div>
-                            <div title="Delete" class="right_menu_button fa-lg fa-solid fa-trash-can mes_img_delete" data-i18n="[title]Delete"></div>
+                    <div title="Delete" class="right_menu_button fa-lg fa-solid fa-trash-can mes_img_delete" data-i18n="[title]Delete"></div>
-                        </div>
+                </div>
-                        <div class="mes_img_swipes">
+                <div class="mes_img_swipes">
-                            <div title="Swipe left" class="right_menu_button fa-lg fa-solid fa-chevron-left mes_img_swipe_left" data-i18n="[title]Swipe left"></div>
+                    <div title="Swipe left" class="right_menu_button fa-lg fa-solid fa-chevron-left mes_img_swipe_left" data-i18n="[title]Swipe left"></div>
-                            <div class="mes_img_swipe_counter">1/1</div>
+                    <div class="mes_img_swipe_counter">1/1</div>
-                            <div title="Swipe right" class="right_menu_button fa-lg fa-solid fa-chevron-right mes_img_swipe_right" data-i18n="[title]Swipe right"></div>
+                    <div title="Swipe right" class="right_menu_button fa-lg fa-solid fa-chevron-right mes_img_swipe_right" data-i18n="[title]Swipe right"></div>
-                        </div>
+                </div>
-                        <img class="mes_img" src="" />
+                <img class="mes_img" src="" />
-                    </div>
+            </div>
                     <div class="mes_bias"></div>
                 </div>
                 <div class="flex-container swipeRightBlock flexFlowColumn flexNoGap">

                 <div class="right_menu_button mes_file_delete fa-solid fa-trash-can" title="Remove the file" data-i18n="[title]Remove the file"></div>
             </div>
         </div>
+        <div id="message_video_template" class="template_element">
+            <div class="mes_video_container">
+                <div class="mes_video_controls">
+                    <div><!-- Placeholder --></div>
+                    <div title="Delete" class="right_menu_button fa-lg fa-solid fa-trash-can mes_video_delete" data-i18n="[title]Delete"></div>
+                </div>
+                <video class="mes_video" controls preload="metadata"></video>
+            </div>
+        </div>
     </div>
     <div id="movingDivs">
         <div id="floatingPrompt" class="drawer-content flexGap5">

public/script.js+5 -10 Viewed

     // Add video to message
     if (mes.extra?.video) {
-        const container = messageElement.find('.mes_block');
+        const container = $('#message_video_template .mes_video_container').clone();
+        messageElement.find('.mes_video_container').remove();
+        messageElement.find('.mes_block').append(container);
         const chatHeight = $('#chat').prop('scrollHeight');
+        const video = container.find('.mes_video');
-        // Create video element if it doesn't exist
-        let video = messageElement.find('.mes_video');
-        if (video.length === 0) {
-            video = $('<video class="mes_video" controls preload="metadata"></video>');
-            container.append(video);
-        }
         video.off('loadedmetadata').on('loadedmetadata', function () {
             if (!adjustScroll) {
                 return;

         video.attr('src', mes.extra?.video);
     } else {
-        messageElement.find('.mes_video').remove();
+        messageElement.find('.mes_video_container').remove();
+    }
     // Add file to message

public/scripts/chats.js+22 -0 Viewed

     await saveChatConditional();
+}
+async function deleteMessageVideo() {
+    const confirm = await Popup.show.confirm(t`Delete video from message?`, t`This action can't be undone.`);
+    if (!confirm) {
+        return;
+    }
+    const mesBlock = $(this).closest('.mes');
+    const mesId = mesBlock.attr('mesid');
+    const message = chat[mesId];
+    if (!message?.extra?.video) {
+        console.warn('Message has no video or it is empty');
+        return;
+    }
+    delete message.extra.video;
+    mesBlock.find('.mes_video_container').remove();
+    await saveChatConditional();
+}
 /**
  * Deletes file from the server.
  * @param {string} url Path to the file on the server

     $(document).on('click', '.mes_img', expandMessageImage);
     $(document).on('click', '.mes_img_enlarge', expandAndZoomMessageImage);
     $(document).on('click', '.mes_img_delete', deleteMessageImage);
+    $(document).on('click', '.mes_video_delete', deleteMessageVideo);
     $('#file_form_input').on('change', async () => {
         const fileInput = document.getElementById('file_form_input');

public/style.css+24 -10 Viewed

     display: none;
+}
-/* Message images */
+/* Message images/video */
-.mes .mes_img_container {
+.mes .mes_img_container,
+.mes .mes_video_container {
     max-width: 100%;
     /*to fit inside single window height of mobile landscape*/
     display: none;

     padding: 0.5rem;
+}
+.mes .mes_video_container:has(.mes_video[src]) {
+    display: flex;
+}
 .mes_img {
-    border-radius: 10px;
+    border-radius: 5px;
     max-width: 100%;
     max-height: 40vh;
     image-rendering: -webkit-optimize-contrast;

+}
 .mes_img_swipes,
-.mes_img_controls {
+.mes_img_controls,
+.mes_video_controls {
     position: absolute;
     top: 0.1em;
     left: 0;

     justify-content: space-between;
     align-items: center;
     padding: 1em;
+    z-index: 1;
+    transition: opacity var(--animation-duration) ease-in-out;
+}
 .mes_img_swipes {

+}
 .mes_img_swipes .right_menu_button,
-.mes_img_controls .right_menu_button {
+.mes_img_controls .right_menu_button,
+.mes_video_controls .right_menu_button {
     filter: brightness(90%);
     text-shadow: 1px 1px var(--SmartThemeShadowColor) !important;
     padding: 1px;

+}
 .mes_img_swipes .right_menu_button::before,
-.mes_img_controls .right_menu_button::before {
+.mes_img_controls .right_menu_button::before,
+.mes_video_controls .right_menu_button::before {
     /* Fix weird alignment with this font-awesome icons on focus */
     position: relative;
     top: 0.6125em;
+}
 .mes_img_swipes .right_menu_button:hover,
-.mes_img_controls .right_menu_button:hover {
+.mes_img_controls .right_menu_button:hover,
+.mes_video_controls .right_menu_button:hover {
     filter: brightness(150%);
+}
+/* It's better to show controls only when the video is not playing */
+/* but :playing pseudo-class is not supported in all browsers */
+/* .mes_video_container:focus-within .mes_video_controls:not(:has(.mes_video:playing)), */
 .mes_img_container:has(.mes_img.error) .mes_img_swipes,
 .mes_img_container:has(.mes_img.error) .mes_img_controls,
 .mes_img_container:hover .mes_img_swipes,
 .mes_img_container:focus-within .mes_img_swipes,
 .mes_img_container:hover .mes_img_controls,
-.mes_img_container:focus-within .mes_img_controls {
+.mes_img_container:focus-within .mes_img_controls,
+.mes_video_container:hover .mes_video_controls {
     opacity: 1;
+}

 .mes_video {
     max-width: 100%;
     max-height: 400px;
-    border-radius: 8px;
+    border-radius: 5px;
     background: #000;
-    margin: 0.5rem;
+}
 /* Ensure video controls are visible */