Add deletion control for attached videos

0fa1b26fa44de4c4f1182cd9182426f8580e7d6b

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

public/index.html+10 -0 Viewed

                 <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$('#message_video_template .mes_blockmes_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_videomes_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/video */
 .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: 10px5px;
     max-width: 100%;
     max-height: 40vh;
     image-rendering: -webkit-optimize-contrast;

+}
 .mes_img_swipes,
 .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_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_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_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_video_container:hover .mes_video_controls {
     opacity: 1;
+}

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