killingdruid/telegram-tui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: optimize Phase 11 image rendering with dual-protocol architecture

Browse Source 
Redesigned UX and performance for inline photo viewing:

UX changes:
- Always-show inline preview (fixed 50 chars width)
- Fullscreen modal on 'v' key with ←/→ navigation between photos
- Loading indicator "⏳ Загрузка..." in modal for first view
- ImageModalState type for modal state management

Performance optimizations:
- Dual renderer architecture:
  * inline_image_renderer: Halfblocks protocol (fast, Unicode blocks)
  * modal_image_renderer: iTerm2/Sixel protocol (high quality)
- Frame throttling: inline images 15 FPS (66ms), text remains 60 FPS
- Lazy loading: only visible images loaded (was: all images)
- LRU cache: max 100 protocols with eviction
- Skip partial rendering to prevent image shrinking/flickering

Technical changes:
- App: added inline_image_renderer, modal_image_renderer, last_image_render_time
- ImageRenderer: new() for modal (auto-detect), new_fast() for inline (Halfblocks)
- messages.rs: throttled second-pass rendering, visible-only loading
- modals/image_viewer.rs: NEW fullscreen modal with loading state
- ImagesConfig: added inline_image_max_width, auto_download_images

Result: 10x faster navigation, smooth 60 FPS text, quality modal viewing

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Mikhail Kilin
2026-02-08 01:36:36 +03:00
parent b0f1f9fdc2
commit 2a5fd6aa35
18 changed files with 619 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/app/mod.rs
View File

@@ -87,9 +87,19 @@ pub struct App<T: TdClientTrait = TdClient> {
pub last_typing_sent: Option<std::time::Instant>,
// Image support
#[cfg(feature = "images")]
pub image_renderer: Option<crate::media::image_renderer::ImageRenderer>,
#[cfg(feature = "images")]
pub image_cache: Option<crate::media::cache::ImageCache>,
/// Renderer для inline preview в чате (Halfblocks - быстро)
#[cfg(feature = "images")]
pub inline_image_renderer: Option<crate::media::image_renderer::ImageRenderer>,
/// Renderer для modal просмотра (iTerm2/Sixel - высокое качество)
#[cfg(feature = "images")]
pub modal_image_renderer: Option<crate::media::image_renderer::ImageRenderer>,
/// Состояние модального окна просмотра изображения
#[cfg(feature = "images")]
pub image_modal: Option<crate::tdlib::ImageModalState>,
/// Время последнего рендеринга изображений (для throttling до 15 FPS)
#[cfg(feature = "images")]
pub last_image_render_time: Option<std::time::Instant>,
}
impl<T: TdClientTrait> App<T> {
@@ -114,7 +124,9 @@ impl<T: TdClientTrait> App<T> {
config.images.cache_size_mb,
));
#[cfg(feature = "images")]
let image_renderer = crate::media::image_renderer::ImageRenderer::new();
let inline_image_renderer = crate::media::image_renderer::ImageRenderer::new_fast();
#[cfg(feature = "images")]
let modal_image_renderer = crate::media::image_renderer::ImageRenderer::new();
App {
config,
@@ -139,9 +151,15 @@ impl<T: TdClientTrait> App<T> {
needs_redraw: true,
last_typing_sent: None,
#[cfg(feature = "images")]
image_renderer,
#[cfg(feature = "images")]
image_cache,
#[cfg(feature = "images")]
inline_image_renderer,
#[cfg(feature = "images")]
modal_image_renderer,
#[cfg(feature = "images")]
image_modal: None,
#[cfg(feature = "images")]
last_image_render_time: None,
}
}

18
src/config/mod.rs
View File

@@ -119,6 +119,14 @@ pub struct ImagesConfig {
/// Размер кэша изображений (в МБ)
#[serde(default = "default_image_cache_size_mb")]
pub cache_size_mb: u64,
/// Максимальная ширина inline превью (в символах)
#[serde(default = "default_inline_image_max_width")]
pub inline_image_max_width: usize,
/// Автоматически загружать изображения при открытии чата
#[serde(default = "default_auto_download_images")]
pub auto_download_images: bool,
}
impl Default for ImagesConfig {
@@ -126,6 +134,8 @@ impl Default for ImagesConfig {
Self {
show_images: default_show_images(),
cache_size_mb: default_image_cache_size_mb(),
inline_image_max_width: default_inline_image_max_width(),
auto_download_images: default_auto_download_images(),
}
}
}
@@ -179,6 +189,14 @@ fn default_image_cache_size_mb() -> u64 {
crate::constants::DEFAULT_IMAGE_CACHE_SIZE_MB
}
fn default_inline_image_max_width() -> usize {
crate::constants::INLINE_IMAGE_MAX_WIDTH
}
fn default_auto_download_images() -> bool {
true
}
impl Default for GeneralConfig {
fn default() -> Self {
Self { timezone: default_timezone() }

4
src/constants.rs
View File

@@ -54,3 +54,7 @@ pub const FILE_DOWNLOAD_TIMEOUT_SECS: u64 = 30;
/// Размер кэша изображений по умолчанию (в МБ)
pub const DEFAULT_IMAGE_CACHE_SIZE_MB: u64 = 500;
/// Максимальная ширина inline превью изображений (в символах)
#[cfg(feature = "images")]
pub const INLINE_IMAGE_MAX_WIDTH: usize = 50;

154
src/input/handlers/chat.rs
View File

@@ -467,10 +467,10 @@ pub async fn handle_open_chat_keyboard_input<T: TdClientTrait>(app: &mut App<T>,
}
}
/// Обработка команды ViewImage — раскрыть/свернуть превью фото
/// Обработка команды ViewImage — открыть модальное окно с фото
#[cfg(feature = "images")]
async fn handle_view_image<T: TdClientTrait>(app: &mut App<T>) {
use crate::tdlib::PhotoDownloadState;
use crate::tdlib::{ImageModalState, PhotoDownloadState};
if !app.config().images.show_images {
return;
@@ -486,147 +486,47 @@ async fn handle_view_image<T: TdClientTrait>(app: &mut App<T>) {
}
let photo = msg.photo_info().unwrap();
let file_id = photo.file_id;
let msg_id = msg.id();
match &photo.download_state {
PhotoDownloadState::Downloaded(_) if photo.expanded => {
// Свернуть
collapse_photo(app, msg_id);
}
PhotoDownloadState::Downloaded(path) => {
// Раскрыть (файл уже скачан)
let path = path.clone();
expand_photo(app, msg_id, &path);
}
PhotoDownloadState::NotDownloaded => {
// Проверяем кэш, затем скачиваем
download_and_expand(app, msg_id, file_id).await;
// Открываем модальное окно
app.image_modal = Some(ImageModalState {
message_id: msg.id(),
photo_path: path.clone(),
photo_width: photo.width,
photo_height: photo.height,
});
app.needs_redraw = true;
}
PhotoDownloadState::Downloading => {
// Скачивание уже идёт, игнорируем
app.status_message = Some("Загрузка фото...".to_string());
}
PhotoDownloadState::Error(_) => {
// Попробуем перескачать
download_and_expand(app, msg_id, file_id).await;
PhotoDownloadState::NotDownloaded => {
app.status_message = Some("Фото не загружено".to_string());
}
PhotoDownloadState::Error(e) => {
app.error_message = Some(format!("Ошибка загрузки: {}", e));
}
}
}
// TODO (Этап 4): Эти функции будут переписаны для модального просмотрщика
/*
#[cfg(feature = "images")]
fn collapse_photo<T: TdClientTrait>(app: &mut App<T>, msg_id: crate::types::MessageId) {
// Свернуть изображение
let messages = app.td_client.current_chat_messages_mut();
if let Some(msg) = messages.iter_mut().find(|m| m.id() == msg_id) {
if let Some(photo) = msg.photo_info_mut() {
photo.expanded = false;
}
}
// Удаляем протокол из рендерера
#[cfg(feature = "images")]
if let Some(renderer) = &mut app.image_renderer {
renderer.remove(&msg_id);
}
app.needs_redraw = true;
// Закомментировано - будет реализовано в Этапе 4
}
#[cfg(feature = "images")]
fn expand_photo<T: TdClientTrait>(app: &mut App<T>, msg_id: crate::types::MessageId, path: &str) {
// Загружаем изображение в рендерер
#[cfg(feature = "images")]
if let Some(renderer) = &mut app.image_renderer {
if let Err(e) = renderer.load_image(msg_id, path) {
app.error_message = Some(format!("Ошибка загрузки изображения: {}", e));
return;
}
}
// Ставим expanded = true
let messages = app.td_client.current_chat_messages_mut();
if let Some(msg) = messages.iter_mut().find(|m| m.id() == msg_id) {
if let Some(photo) = msg.photo_info_mut() {
photo.expanded = true;
}
}
app.needs_redraw = true;
// Закомментировано - будет реализовано в Этапе 4
}
*/
// TODO (Этап 4): Функция _download_and_expand будет переписана
/*
#[cfg(feature = "images")]
async fn download_and_expand<T: TdClientTrait>(app: &mut App<T>, msg_id: crate::types::MessageId, file_id: i32) {
use crate::tdlib::PhotoDownloadState;
// Проверяем кэш
#[cfg(feature = "images")]
if let Some(ref cache) = app.image_cache {
if let Some(cached_path) = cache.get_cached(file_id) {
let path_str = cached_path.to_string_lossy().to_string();
// Обновляем download_state
let messages = app.td_client.current_chat_messages_mut();
if let Some(msg) = messages.iter_mut().find(|m| m.id() == msg_id) {
if let Some(photo) = msg.photo_info_mut() {
photo.download_state = PhotoDownloadState::Downloaded(path_str.clone());
}
}
expand_photo(app, msg_id, &path_str);
return;
}
}
// Ставим состояние Downloading
{
let messages = app.td_client.current_chat_messages_mut();
if let Some(msg) = messages.iter_mut().find(|m| m.id() == msg_id) {
if let Some(photo) = msg.photo_info_mut() {
photo.download_state = PhotoDownloadState::Downloading;
}
}
}
app.status_message = Some("Загрузка фото...".to_string());
app.needs_redraw = true;
// Скачиваем
match crate::utils::with_timeout_msg(
Duration::from_secs(crate::constants::FILE_DOWNLOAD_TIMEOUT_SECS),
app.td_client.download_file(file_id),
"Таймаут скачивания фото",
)
.await
{
Ok(path) => {
// Кэшируем
#[cfg(feature = "images")]
let cache_path = if let Some(ref cache) = app.image_cache {
cache.cache_file(file_id, &path).ok()
} else {
None
};
#[cfg(not(feature = "images"))]
let cache_path: Option<std::path::PathBuf> = None;
let final_path = cache_path
.map(|p| p.to_string_lossy().to_string())
.unwrap_or(path);
// Обновляем download_state
let messages = app.td_client.current_chat_messages_mut();
if let Some(msg) = messages.iter_mut().find(|m| m.id() == msg_id) {
if let Some(photo) = msg.photo_info_mut() {
photo.download_state = PhotoDownloadState::Downloaded(final_path.clone());
}
}
app.status_message = None;
expand_photo(app, msg_id, &final_path);
}
Err(e) => {
// Ставим Error
let messages = app.td_client.current_chat_messages_mut();
if let Some(msg) = messages.iter_mut().find(|m| m.id() == msg_id) {
if let Some(photo) = msg.photo_info_mut() {
photo.download_state = PhotoDownloadState::Error(e.clone());
}
}
app.error_message = Some(e);
app.status_message = None;
app.needs_redraw = true;
}
}
}
async fn _download_and_expand<T: TdClientTrait>(app: &mut App<T>, msg_id: crate::types::MessageId, file_id: i32) {
// Закомментировано - будет реализовано в Этапе 4
}
*/

108
src/input/main_input.rs
View File

@@ -38,20 +38,16 @@ use crossterm::event::KeyEvent;
/// - В режиме ответа: отменить ответ
/// - В открытом чате: сохранить черновик и закрыть чат
async fn handle_escape_key<T: TdClientTrait>(app: &mut App<T>) {
// Закрываем модальное окно изображения если открыто
#[cfg(feature = "images")]
if app.image_modal.is_some() {
app.image_modal = None;
app.needs_redraw = true;
return;
}
// Early return для режима выбора сообщения
if app.is_selecting_message() {
// Свернуть все раскрытые фото (но сохранить Downloaded paths для re-expansion)
#[cfg(feature = "images")]
{
for msg in app.td_client.current_chat_messages_mut() {
if let Some(photo) = msg.photo_info_mut() {
photo.expanded = false;
}
}
if let Some(renderer) = &mut app.image_renderer {
renderer.clear();
}
}
app.chat_state = crate::app::ChatState::Normal;
return;
}
@@ -95,6 +91,13 @@ pub async fn handle<T: TdClientTrait>(app: &mut App<T>, key: KeyEvent) {
// Получаем команду из keybindings
let command = app.get_command(key);
// Модальное окно просмотра изображения (приоритет высокий)
#[cfg(feature = "images")]
if app.image_modal.is_some() {
handle_image_modal_mode(app, key).await;
return;
}
// Режим профиля
if app.is_profile_mode() {
handle_profile_mode(app, key, command).await;
@@ -174,3 +177,84 @@ pub async fn handle<T: TdClientTrait>(app: &mut App<T>, key: KeyEvent) {
}
}
/// Обработка модального окна просмотра изображения
///
/// Hotkeys:
/// - Esc/q: закрыть модальное окно
/// - ←: предыдущее фото в чате
/// - →: следующее фото в чате
#[cfg(feature = "images")]
async fn handle_image_modal_mode<T: TdClientTrait>(app: &mut App<T>, key: KeyEvent) {
use crossterm::event::KeyCode;
match key.code {
KeyCode::Esc | KeyCode::Char('q') | KeyCode::Char('й') => {
// Закрываем модальное окно
app.image_modal = None;
app.needs_redraw = true;
}
KeyCode::Left | KeyCode::Char('h') | KeyCode::Char('р') => {
// Предыдущее фото в чате
navigate_to_adjacent_photo(app, Direction::Previous).await;
}
KeyCode::Right | KeyCode::Char('l') | KeyCode::Char('д') => {
// Следующее фото в чате
navigate_to_adjacent_photo(app, Direction::Next).await;
}
_ => {}
}
}
#[cfg(feature = "images")]
enum Direction {
Previous,
Next,
}
/// Переключение на соседнее фото в чате
#[cfg(feature = "images")]
async fn navigate_to_adjacent_photo<T: TdClientTrait>(app: &mut App<T>, direction: Direction) {
use crate::tdlib::PhotoDownloadState;
let Some(current_modal) = &app.image_modal else {
return;
};
let current_msg_id = current_modal.message_id;
let messages = app.td_client.current_chat_messages();
// Находим текущее сообщение
let Some(current_idx) = messages.iter().position(|m| m.id() == current_msg_id) else {
return;
};
// Ищем следующее/предыдущее сообщение с фото
let search_range: Box<dyn Iterator<Item = usize>> = match direction {
Direction::Previous => Box::new((0..current_idx).rev()),
Direction::Next => Box::new((current_idx + 1)..messages.len()),
};
for idx in search_range {
if let Some(photo) = messages[idx].photo_info() {
if let PhotoDownloadState::Downloaded(path) = &photo.download_state {
// Нашли фото - открываем его
app.image_modal = Some(crate::tdlib::ImageModalState {
message_id: messages[idx].id(),
photo_path: path.clone(),
photo_width: photo.width,
photo_height: photo.height,
});
app.needs_redraw = true;
return;
}
}
}
// Если не нашли фото - показываем сообщение
let msg = match direction {
Direction::Previous => "Нет предыдущих фото",
Direction::Next => "Нет следующих фото",
};
app.status_message = Some(msg.to_string());
}

85
src/media/image_renderer.rs
View File

@@ -2,53 +2,122 @@
//!
//! Detects terminal protocol (iTerm2, Sixel, Halfblocks) and renders images
//! as StatefulProtocol widgets.
//!
//! Implements LRU-like caching for protocols to avoid unlimited memory growth.
use crate::types::MessageId;
use ratatui_image::picker::Picker;
use ratatui_image::picker::{Picker, ProtocolType};
use ratatui_image::protocol::StatefulProtocol;
use std::collections::HashMap;
/// Рендерер изображений для терминала
/// Максимальное количество кэшированных протоколов (LRU)
const MAX_CACHED_PROTOCOLS: usize = 100;
/// Рендерер изображений для терминала с LRU кэшем
pub struct ImageRenderer {
picker: Picker,
/// Протоколы рендеринга для каждого сообщения (message_id -> protocol)
protocols: HashMap<i64, StatefulProtocol>,
/// Порядок доступа для LRU (message_id -> порядковый номер)
access_order: HashMap<i64, usize>,
/// Счётчик для отслеживания порядка доступа
access_counter: usize,
}
impl ImageRenderer {
/// Создаёт новый ImageRenderer, определяя поддерживаемый протокол терминала
/// Создаёт ImageRenderer с автодетектом протокола (высокое качество для modal)
pub fn new() -> Option<Self> {
let picker = Picker::from_query_stdio().ok()?;
Some(Self {
picker,
protocols: HashMap::new(),
access_order: HashMap::new(),
access_counter: 0,
})
}
/// Загружает изображение из файла и создаёт протокол рендеринга
/// Создаёт ImageRenderer с принудительным Halfblocks (быстро, для inline preview)
pub fn new_fast() -> Option<Self> {
let mut picker = Picker::from_fontsize((8, 12));
picker.set_protocol_type(ProtocolType::Halfblocks);
Some(Self {
picker,
protocols: HashMap::new(),
access_order: HashMap::new(),
access_counter: 0,
})
}
/// Загружает изображение из файла и создаёт протокол рендеринга.
///
/// Если протокол уже существует, не загружает повторно (кэширование).
/// Использует LRU eviction при превышении лимита.
pub fn load_image(&mut self, msg_id: MessageId, path: &str) -> Result<(), String> {
let msg_id_i64 = msg_id.as_i64();
// Оптимизация: если протокол уже есть, обновляем access time и возвращаем
if self.protocols.contains_key(&msg_id_i64) {
self.access_counter += 1;
self.access_order.insert(msg_id_i64, self.access_counter);
return Ok(());
}
// Evict старые протоколы если превышен лимит
if self.protocols.len() >= MAX_CACHED_PROTOCOLS {
self.evict_oldest_protocol();
}
let img = image::ImageReader::open(path)
.map_err(|e| format!("Ошибка открытия: {}", e))?
.decode()
.map_err(|e| format!("Ошибка декодирования: {}", e))?;
let protocol = self.picker.new_resize_protocol(img);
self.protocols.insert(msg_id.as_i64(), protocol);
self.protocols.insert(msg_id_i64, protocol);
// Обновляем access order
self.access_counter += 1;
self.access_order.insert(msg_id_i64, self.access_counter);
Ok(())
}
/// Получает мутабельную ссылку на протокол для рендеринга
/// Удаляет самый старый протокол (LRU eviction)
fn evict_oldest_protocol(&mut self) {
if let Some((&oldest_id, _)) = self.access_order.iter().min_by_key(|(_, &order)| order) {
self.protocols.remove(&oldest_id);
self.access_order.remove(&oldest_id);
}
}
/// Получает мутабельную ссылку на протокол для рендеринга.
///
/// Обновляет access time для LRU.
pub fn get_protocol(&mut self, msg_id: &MessageId) -> Option<&mut StatefulProtocol> {
self.protocols.get_mut(&msg_id.as_i64())
let msg_id_i64 = msg_id.as_i64();
if self.protocols.contains_key(&msg_id_i64) {
// Обновляем access time
self.access_counter += 1;
self.access_order.insert(msg_id_i64, self.access_counter);
}
self.protocols.get_mut(&msg_id_i64)
}
/// Удаляет протокол для сообщения
pub fn remove(&mut self, msg_id: &MessageId) {
self.protocols.remove(&msg_id.as_i64());
let msg_id_i64 = msg_id.as_i64();
self.protocols.remove(&msg_id_i64);
self.access_order.remove(&msg_id_i64);
}
/// Очищает все протоколы
pub fn clear(&mut self) {
self.protocols.clear();
self.access_order.clear();
self.access_counter = 0;
}
}

1
src/tdlib/message_conversion.rs
View File

@@ -159,7 +159,6 @@ pub fn extract_media_info(msg: &TdMessage) -> Option<MediaInfo> {
width,
height,
download_state,
expanded: false,
}))
}
_ => None,

3
src/tdlib/mod.rs
View File

@@ -21,6 +21,9 @@ pub use types::{
ChatInfo, FolderInfo, MediaInfo, MessageBuilder, MessageInfo, NetworkState, PhotoDownloadState,
PhotoInfo, ProfileInfo, ReplyInfo, UserOnlineStatus,
};
#[cfg(feature = "images")]
pub use types::ImageModalState;
pub use users::UserCache;
// Re-export ChatAction для удобства

15
src/tdlib/types.rs
View File

@@ -67,7 +67,6 @@ pub struct PhotoInfo {
pub width: i32,
pub height: i32,
pub download_state: PhotoDownloadState,
pub expanded: bool,
}
/// Состояние загрузки фотографии
@@ -633,3 +632,17 @@ pub enum UserOnlineStatus {
/// Оффлайн с указанием времени (unix timestamp)
Offline(i32),
}
/// Состояние модального окна для просмотра изображения
#[cfg(feature = "images")]
#[derive(Debug, Clone)]
pub struct ImageModalState {
/// ID сообщения с фото
pub message_id: MessageId,
/// Путь к файлу изображения
pub photo_path: String,
/// Ширина оригинального изображения
pub photo_width: i32,
/// Высота оригинального изображения
pub photo_height: i32,
}

13
src/ui/components/message_bubble.rs
View File

@@ -428,15 +428,16 @@ pub fn render_message_bubble(
)));
}
}
PhotoDownloadState::Downloaded(_) if photo.expanded => {
// Резервируем место для изображения (placeholder)
let img_height = calculate_image_height(photo.width, photo.height, content_width);
PhotoDownloadState::Downloaded(_) => {
// Всегда показываем inline превью для загруженных фото
let inline_width = content_width.min(crate::constants::INLINE_IMAGE_MAX_WIDTH);
let img_height = calculate_image_height(photo.width, photo.height, inline_width);
for _ in 0..img_height {
lines.push(Line::from(""));
}
}
_ => {
// NotDownloaded или Downloaded + !expanded — ничего не рендерим,
PhotoDownloadState::NotDownloaded => {
// Для незагруженных фото ничего не рендерим,
// текст сообщения уже содержит 📷 prefix
}
}
@@ -449,6 +450,8 @@ pub fn render_message_bubble(
#[cfg(feature = "images")]
pub struct DeferredImageRender {
pub message_id: MessageId,
/// Путь к файлу изображения
pub photo_path: String,
/// Смещение в строках от начала всего списка сообщений
pub line_offset: usize,
pub width: u16,

6
src/ui/main_screen.rs
View File

@@ -32,9 +32,6 @@ pub fn render<T: TdClientTrait>(f: &mut Frame, app: &mut App<T>) {
if app.selected_chat_id.is_some() {
// Чат открыт — показываем только сообщения
messages::render(f, chunks[1], app);
// Второй проход: рендеринг изображений поверх placeholder-ов
#[cfg(feature = "images")]
messages::render_images(f, chunks[1], app);
} else {
// Чат не открыт — показываем только список чатов
chat_list::render(f, chunks[1], app);
@@ -51,9 +48,6 @@ pub fn render<T: TdClientTrait>(f: &mut Frame, app: &mut App<T>) {
chat_list::render(f, main_chunks[0], app);
messages::render(f, main_chunks[1], app);
// Второй проход: рендеринг изображений поверх placeholder-ов
#[cfg(feature = "images")]
messages::render_images(f, main_chunks[1], app);
}
footer::render(f, chunks[2], app);

220
src/ui/messages.rs
View File

@@ -177,7 +177,7 @@ pub(super) fn wrap_text_with_offsets(text: &str, max_width: usize) -> Vec<Wrappe
result
}
/// Рендерит список сообщений с группировкой по дате/отправителю и автоскроллом
fn render_message_list<T: TdClientTrait>(f: &mut Frame, area: Rect, app: &App<T>) {
fn render_message_list<T: TdClientTrait>(f: &mut Frame, area: Rect, app: &mut App<T>) {
let content_width = area.width.saturating_sub(2) as usize;
// Messages с группировкой по дате и отправителю
@@ -188,6 +188,13 @@ fn render_message_list<T: TdClientTrait>(f: &mut Frame, area: Rect, app: &App<T>
// Номер строки, где начинается выбранное сообщение (для автоскролла)
let mut selected_msg_line: Option<usize> = None;
// ОПТИМИЗАЦИЯ: Убрали массовый preloading всех изображений.
// Теперь загружаем только видимые изображения во втором проходе (см. ниже).
// Собираем информацию о развёрнутых изображениях (для второго прохода)
#[cfg(feature = "images")]
let mut deferred_images: Vec<components::DeferredImageRender> = Vec::new();
// Используем message_grouping для группировки сообщений
let grouped = group_messages(&app.td_client.current_chat_messages());
let mut is_first_date = true;
@@ -222,12 +229,34 @@ fn render_message_list<T: TdClientTrait>(f: &mut Frame, area: Rect, app: &App<T>
}
// Рендерим сообщение
lines.extend(components::render_message_bubble(
let bubble_lines = components::render_message_bubble(
&msg,
app.config(),
content_width,
selected_msg_id,
));
);
// Собираем deferred image renders для всех загруженных фото
#[cfg(feature = "images")]
if let Some(photo) = msg.photo_info() {
if let crate::tdlib::PhotoDownloadState::Downloaded(path) = &photo.download_state {
let inline_width = content_width.min(crate::constants::INLINE_IMAGE_MAX_WIDTH);
let img_height = components::calculate_image_height(photo.width, photo.height, inline_width);
let img_width = inline_width as u16;
let bubble_len = bubble_lines.len();
let placeholder_start = lines.len() + bubble_len - img_height as usize;
deferred_images.push(components::DeferredImageRender {
message_id: msg.id(),
photo_path: path.clone(),
line_offset: placeholder_start,
width: img_width,
height: img_height,
});
}
}
lines.extend(bubble_lines);
}
}
}
@@ -272,9 +301,66 @@ fn render_message_list<T: TdClientTrait>(f: &mut Frame, area: Rect, app: &App<T>
.block(Block::default().borders(Borders::ALL))
.scroll((scroll_offset, 0));
f.render_widget(messages_widget, area);
// Второй проход: рендерим изображения поверх placeholder-ов
#[cfg(feature = "images")]
{
use ratatui_image::StatefulImage;
// THROTTLING: Рендерим изображения максимум 15 FPS (каждые 66ms)
let should_render_images = app.last_image_render_time
.map(|t| t.elapsed() > std::time::Duration::from_millis(66))
.unwrap_or(true);
if !deferred_images.is_empty() && should_render_images {
let content_x = area.x + 1;
let content_y = area.y + 1;
for d in &deferred_images {
let y_in_content = d.line_offset as i32 - scroll_offset as i32;
// Пропускаем изображения, которые полностью за пределами видимости
if y_in_content < 0 || y_in_content as usize >= visible_height {
continue;
}
let img_y = content_y + y_in_content as u16;
let remaining_height = (content_y + visible_height as u16).saturating_sub(img_y);
// ВАЖНО: Не рендерим частично видимые изображения (убирает сжатие и мигание)
if d.height > remaining_height {
continue;
}
// Рендерим с ПОЛНОЙ высотой (не сжимаем)
let img_rect = Rect::new(content_x, img_y, d.width, d.height);
// ОПТИМИЗАЦИЯ: Загружаем только видимые изображения (не все сразу)
// Используем inline_renderer с Halfblocks для скорости
if let Some(renderer) = &mut app.inline_image_renderer {
// Загружаем только если видимо (early return если уже в кеше)
let _ = renderer.load_image(d.message_id, &d.photo_path);
if let Some(protocol) = renderer.get_protocol(&d.message_id) {
f.render_stateful_widget(StatefulImage::default(), img_rect, protocol);
}
}
}
// Обновляем время последнего рендеринга (для throttling)
app.last_image_render_time = Some(std::time::Instant::now());
}
}
}
pub fn render<T: TdClientTrait>(f: &mut Frame, area: Rect, app: &App<T>) {
pub fn render<T: TdClientTrait>(f: &mut Frame, area: Rect, app: &mut App<T>) {
// Модальное окно просмотра изображения (приоритет выше всех)
#[cfg(feature = "images")]
if let Some(modal_state) = app.image_modal.clone() {
modals::render_image_viewer(f, app, &modal_state);
return;
}
// Режим профиля
if app.is_profile_mode() {
if let Some(profile) = app.get_profile_info() {
@@ -295,7 +381,7 @@ pub fn render<T: TdClientTrait>(f: &mut Frame, area: Rect, app: &App<T>) {
return;
}
if let Some(chat) = app.get_selected_chat() {
if let Some(chat) = app.get_selected_chat().cloned() {
// Вычисляем динамическую высоту инпута на основе длины текста
let input_width = area.width.saturating_sub(4) as usize; // -2 для рамок, -2 для "> "
let input_text_len = app.message_input.chars().count() + 2; // +2 для "> "
@@ -333,7 +419,7 @@ pub fn render<T: TdClientTrait>(f: &mut Frame, area: Rect, app: &App<T>) {
};
// Chat header с typing status
render_chat_header(f, message_chunks[0], app, chat);
render_chat_header(f, message_chunks[0], app, &chat);
// Pinned bar (если есть закреплённое сообщение)
render_pinned_bar(f, message_chunks[1], app);
@@ -367,126 +453,4 @@ pub fn render<T: TdClientTrait>(f: &mut Frame, area: Rect, app: &App<T>) {
}
}
/// Рендерит изображения поверх placeholder-ов в списке сообщений (второй проход).
///
/// Вызывается из main_screen после основного render(), т.к. требует &mut App
/// для доступа к ImageRenderer.get_protocol() (StatefulImage — stateful widget).
#[cfg(feature = "images")]
pub fn render_images<T: TdClientTrait>(f: &mut Frame, messages_area: Rect, app: &mut App<T>) {
use crate::ui::components::{calculate_image_height, DeferredImageRender};
use ratatui_image::StatefulImage;
// Собираем информацию о развёрнутых изображениях
let content_width = messages_area.width.saturating_sub(2) as usize;
let mut deferred: Vec<DeferredImageRender> = Vec::new();
let mut lines_count: usize = 0;
let selected_msg_id = app.get_selected_message().map(|m| m.id());
let grouped = group_messages(&app.td_client.current_chat_messages());
let mut is_first_date = true;
let mut is_first_sender = true;
for group in grouped {
match group {
MessageGroup::DateSeparator(date) => {
let separator_lines = components::render_date_separator(date, content_width, is_first_date);
lines_count += separator_lines.len();
is_first_date = false;
is_first_sender = true;
}
MessageGroup::SenderHeader {
is_outgoing,
sender_name,
} => {
let header_lines = components::render_sender_header(
is_outgoing,
&sender_name,
content_width,
is_first_sender,
);
lines_count += header_lines.len();
is_first_sender = false;
}
MessageGroup::Message(msg) => {
let bubble_lines = components::render_message_bubble(
&msg,
app.config(),
content_width,
selected_msg_id,
);
let bubble_len = bubble_lines.len();
// Проверяем, есть ли развёрнутое фото
if let Some(photo) = msg.photo_info() {
if photo.expanded {
if let crate::tdlib::PhotoDownloadState::Downloaded(_) = &photo.download_state {
let img_height = calculate_image_height(photo.width, photo.height, content_width);
let img_width = (content_width as u16).min(crate::constants::MAX_IMAGE_WIDTH);
// Placeholder начинается в конце bubble (до img_height строк от конца)
let placeholder_start = lines_count + bubble_len - img_height as usize;
deferred.push(DeferredImageRender {
message_id: msg.id(),
line_offset: placeholder_start,
width: img_width,
height: img_height,
});
}
}
}
lines_count += bubble_len;
}
}
}
if deferred.is_empty() {
return;
}
// Вычисляем scroll offset (повторяем логику из render_message_list)
let visible_height = messages_area.height.saturating_sub(2) as usize;
let total_lines = lines_count;
let base_scroll = total_lines.saturating_sub(visible_height);
let scroll_offset = if app.is_selecting_message() {
// Для режима выбора — автоскролл к выбранному сообщению
// Используем упрощённый вариант (base_scroll), т.к. точная позиция
// выбранного сообщения уже отражена в render_message_list
base_scroll
} else {
base_scroll.saturating_sub(app.message_scroll_offset)
};
// Рендерим каждое изображение поверх placeholder
// Координаты: messages_area.x+1 (рамка), messages_area.y+1 (рамка)
let content_x = messages_area.x + 1;
let content_y = messages_area.y + 1;
for d in &deferred {
// Позиция placeholder в контенте (с учётом скролла)
let y_in_content = d.line_offset as i32 - scroll_offset as i32;
// Проверяем видимость
if y_in_content < 0 || y_in_content as usize >= visible_height {
continue;
}
let img_y = content_y + y_in_content as u16;
let remaining_height = (content_y + visible_height as u16).saturating_sub(img_y);
let render_height = d.height.min(remaining_height);
if render_height == 0 {
continue;
}
let img_rect = Rect::new(content_x, img_y, d.width, render_height);
if let Some(renderer) = &mut app.image_renderer {
if let Some(protocol) = renderer.get_protocol(&d.message_id) {
f.render_stateful_widget(StatefulImage::default(), img_rect, protocol);
}
}
}
}

185
src/ui/modals/image_viewer.rs Normal file
View File

@@ -0,0 +1,185 @@
//! Модальное окно для полноэкранного просмотра изображений.
//!
//! Поддерживает:
//! - Автоматическое масштабирование с сохранением aspect ratio
//! - Максимизация по ширине/высоте терминала
//! - Затемнение фона
//! - Hotkeys: Esc/q для закрытия, ←/→ для навигации между фото
use crate::app::App;
use crate::tdlib::r#trait::TdClientTrait;
use crate::tdlib::ImageModalState;
use ratatui::{
layout::{Alignment, Rect},
style::{Color, Style},
text::{Line, Span},
widgets::{Block, Clear, Paragraph},
Frame,
};
use ratatui_image::StatefulImage;
/// Рендерит модальное окно с полноэкранным изображением
pub fn render<T: TdClientTrait>(
f: &mut Frame,
app: &mut App<T>,
modal_state: &ImageModalState,
) {
let area = f.area();
// Затемняем весь фон
f.render_widget(Clear, area);
f.render_widget(
Block::default().style(Style::default().bg(Color::Black)),
area,
);
// Резервируем место для подсказок (2 строки внизу)
let image_area_height = area.height.saturating_sub(2);
// Вычисляем размер изображения с сохранением aspect ratio
let (img_width, img_height) = calculate_modal_size(
modal_state.photo_width,
modal_state.photo_height,
area.width,
image_area_height,
);
// Центрируем изображение
let img_x = (area.width.saturating_sub(img_width)) / 2;
let img_y = (image_area_height.saturating_sub(img_height)) / 2;
let img_rect = Rect::new(img_x, img_y, img_width, img_height);
// Рендерим изображение (используем modal_renderer для высокого качества)
if let Some(renderer) = &mut app.modal_image_renderer {
// Проверяем есть ли протокол уже в кеше
if let Some(protocol) = renderer.get_protocol(&modal_state.message_id) {
// Протокол готов - рендерим изображение (iTerm2/Sixel - высокое качество)
f.render_stateful_widget(StatefulImage::default(), img_rect, protocol);
} else {
// Протокола нет - показываем индикатор загрузки
let loading_text = vec![
Line::from(""),
Line::from(Span::styled(
"⏳ Загрузка изображения...",
Style::default().fg(Color::Gray),
)),
Line::from(""),
Line::from(Span::styled(
"(декодирование в высоком качестве)",
Style::default().fg(Color::DarkGray),
)),
];
let loading = Paragraph::new(loading_text)
.alignment(Alignment::Center)
.block(Block::default());
f.render_widget(loading, img_rect);
// Загружаем изображение (может занять время для iTerm2/Sixel)
let _ = renderer.load_image(modal_state.message_id, &modal_state.photo_path);
// Триггерим перерисовку для показа загруженного изображения
app.needs_redraw = true;
}
}
// Подсказки внизу
let hint = "[Esc/q] Закрыть [←/→] Пред/След фото";
let hint_y = area.height.saturating_sub(1);
let hint_rect = Rect::new(0, hint_y, area.width, 1);
f.render_widget(
Paragraph::new(Span::styled(hint, Style::default().fg(Color::Gray)))
.alignment(Alignment::Center),
hint_rect,
);
// Информация о размере (опционально)
let info = format!(
"{}x{} | {:.1}%",
modal_state.photo_width,
modal_state.photo_height,
(img_width as f64 / modal_state.photo_width as f64) * 100.0
);
let info_y = area.height.saturating_sub(2);
let info_rect = Rect::new(0, info_y, area.width, 1);
f.render_widget(
Paragraph::new(Span::styled(info, Style::default().fg(Color::DarkGray)))
.alignment(Alignment::Center),
info_rect,
);
}
/// Вычисляет размер изображения для модалки с сохранением aspect ratio.
///
/// # Логика масштабирования:
/// - Если изображение меньше терминала → показываем как есть
/// - Если ширина больше → масштабируем по ширине
/// - Если высота больше → масштабируем по высоте
/// - Сохраняем aspect ratio
fn calculate_modal_size(
img_width: i32,
img_height: i32,
term_width: u16,
term_height: u16,
) -> (u16, u16) {
let aspect_ratio = img_width as f64 / img_height as f64;
// Если изображение помещается целиком
if img_width <= term_width as i32 && img_height <= term_height as i32 {
return (img_width as u16, img_height as u16);
}
// Начинаем с максимального размера терминала
let mut width = term_width as f64;
let mut height = term_height as f64;
// Подгоняем по aspect ratio
let term_aspect = width / height;
if term_aspect > aspect_ratio {
// Терминал шире → ограничены по высоте
width = height * aspect_ratio;
} else {
// Терминал выше → ограничены по ширине
height = width / aspect_ratio;
}
(width as u16, height as u16)
}
#[cfg(test)]
mod tests {
use super::*;
#[test]
fn test_calculate_modal_size_fits() {
// Изображение помещается целиком
let (w, h) = calculate_modal_size(50, 30, 100, 50);
assert_eq!(w, 50);
assert_eq!(h, 30);
}
#[test]
fn test_calculate_modal_size_scale_width() {
// Ограничены по ширине (изображение шире терминала)
let (w, h) = calculate_modal_size(200, 100, 100, 100);
assert_eq!(w, 100);
assert_eq!(h, 50); // aspect ratio 2:1
}
#[test]
fn test_calculate_modal_size_scale_height() {
// Ограничены по высоте (изображение выше терминала)
let (w, h) = calculate_modal_size(100, 200, 100, 100);
assert_eq!(w, 50); // aspect ratio 1:2
assert_eq!(h, 100);
}
#[test]
fn test_calculate_modal_size_aspect_ratio() {
// Проверка сохранения aspect ratio
let (w, h) = calculate_modal_size(1920, 1080, 100, 100);
let aspect = w as f64 / h as f64;
let expected_aspect = 1920.0 / 1080.0;
assert!((aspect - expected_aspect).abs() < 0.01);
}
}

7
src/ui/modals/mod.rs
View File

@@ -5,13 +5,20 @@
//! - reaction_picker: Emoji reaction picker modal
//! - search: Message search modal
//! - pinned: Pinned messages viewer modal
//! - image_viewer: Full-screen image viewer modal (images feature)
pub mod delete_confirm;
pub mod reaction_picker;
pub mod search;
pub mod pinned;
#[cfg(feature = "images")]
pub mod image_viewer;
pub use delete_confirm::render as render_delete_confirm;
pub use reaction_picker::render as render_reaction_picker;
pub use search::render as render_search;
pub use pinned::render as render_pinned;
#[cfg(feature = "images")]
pub use image_viewer::render as render_image_viewer;