shaw/SillyTavern
1
0
Fork 0
Code Issues Pull Requests Actions 7 Packages Projects Releases Wiki Activity

Add deletion control for attached videos

Browse Source
This commit is contained in:
Cohee
2025-06-23 01:01:44 +03:00
parent b357e5d25e
commit 0fa1b26fa4
4 changed files with 74 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+23 -13
View File
@@ -6844,19 +6844,19 @@
<div class="mes_reasoning"></div>
</details>
<div class="mes_text"></div>
<div class="mes_img_container">
<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="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>
<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 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>
<img class="mes_img" src="" />
</div>
<div class="mes_img_container">
<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="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>
<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 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>
<img class="mes_img" src="" />
</div>
<div class="mes_bias"></div>
</div>
<div class="flex-container swipeRightBlock flexFlowColumn flexNoGap">
@@ -7066,6 +7066,16 @@
<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
View File
@@ -2505,16 +2505,11 @@ export function appendMediaToMessage(mes, messageElement, adjustScroll = true) {
// 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');
// 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);
}
const video = container.find('.mes_video');
video.off('loadedmetadata').on('loadedmetadata', function () {
if (!adjustScroll) {
return;
@@ -2527,7 +2522,7 @@ export function appendMediaToMessage(mes, messageElement, adjustScroll = true) {
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
View File
@@ -893,6 +893,27 @@ async function deleteMessageImage() {
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
@@ -1856,6 +1877,7 @@ export function initChatUtilities() {
$(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
View File
@@ -5033,8 +5033,9 @@ a:hover {
display: none;
}
/* Message images */
.mes .mes_img_container {
/* 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;
@@ -5044,8 +5045,12 @@ a:hover {
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;
@@ -5059,7 +5064,8 @@ a:hover {
}
.mes_img_swipes,
.mes_img_controls {
.mes_img_controls,
.mes_video_controls {
position: absolute;
top: 0.1em;
left: 0;
@@ -5070,6 +5076,8 @@ a:hover {
justify-content: space-between;
align-items: center;
padding: 1em;
z-index: 1;
transition: opacity var(--animation-duration) ease-in-out;
}
.mes_img_swipes {
@@ -5078,7 +5086,8 @@ a:hover {
}
.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;
@@ -5087,23 +5096,29 @@ a:hover {
}
.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;
}
@@ -5203,9 +5218,8 @@ body:not(.sd) .mes_img_swipes {
.mes_video {
max-width: 100%;
max-height: 400px;
border-radius: 8px;
border-radius: 5px;
background: #000;
margin: 0.5rem;
}
/* Ensure video controls are visible */