@@ -1,41 +1,86 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Swiper as SwiperCore } from 'swiper'
 
 export const useLibrarySwiper = (onSlideFalse: ((...args: any) => any) | undefined, reverse: boolean) => {
 	const [swiper, setSwiper] = useState<SwiperCore | null>(null)
+	const swiperRef = useRef<SwiperCore | null>(null)
+	const onSlideFalseRef = useRef(onSlideFalse)
+	const reverseRef = useRef(reverse)
 
+	swiperRef.current = swiper
+	onSlideFalseRef.current = onSlideFalse
+	reverseRef.current = reverse
 
-	const keydown = (e: KeyboardEvent) => {
-		if (e.key === 'ArrowRight') {
-			slideNext()
-		}
-		if (e.key === 'ArrowLeft') {
-			slidePrev()
+	const requestMoreIfNeeded = (direction: 'prev' | 'next') => {
+		const shouldPaginate =
+			(direction === 'prev' && !reverseRef.current) || (direction === 'next' && reverseRef.current)
+
+		if (shouldPaginate && onSlideFalseRef.current) {
+			void onSlideFalseRef.current()
 		}
 	}
 
-	const slidePrev = function () {
-		const result = swiper?.slidePrev()
+	const slidePrev = () => {
+		const instance = swiperRef.current
+		if (!instance) {
+			return
+		}
 
-		if (!result && onSlideFalse && !reverse) {
-			onSlideFalse()
+		const atBeginning = instance.isBeginning || instance.activeIndex <= 0
+		if (atBeginning) {
+			requestMoreIfNeeded('prev')
+			return
+		}
+
+		const prevIndex = instance.activeIndex
+		instance.slidePrev()
+
+		if (instance.activeIndex === prevIndex) {
+			requestMoreIfNeeded('prev')
 		}
 	}
 
-	const slideNext = function () {
-		const result = swiper?.slideNext()
+	const slideNext = () => {
+		const instance = swiperRef.current
+		if (!instance) {
+			return
+		}
 
-		if (!result && onSlideFalse && reverse) {
-			onSlideFalse()
+		const lastIndex = Math.max(instance.slides.length - 1, 0)
+		const atEnd = instance.isEnd || instance.activeIndex >= lastIndex
+		if (atEnd) {
+			requestMoreIfNeeded('next')
+			return
+		}
+
+		const prevIndex = instance.activeIndex
+		instance.slideNext()
+
+		if (instance.activeIndex === prevIndex) {
+			requestMoreIfNeeded('next')
 		}
 	}
 
+	const slidePrevRef = useRef(slidePrev)
+	const slideNextRef = useRef(slideNext)
+	slidePrevRef.current = slidePrev
+	slideNextRef.current = slideNext
+
 	useEffect(() => {
+		const keydown = (e: KeyboardEvent) => {
+			if (e.key === 'ArrowRight') {
+				slideNextRef.current()
+			}
+			if (e.key === 'ArrowLeft') {
+				slidePrevRef.current()
+			}
+		}
+
 		document.addEventListener('keydown', keydown, true)
 		return () => {
 			document.removeEventListener('keydown', keydown, true)
 		}
-	}, [swiper])
+	}, [])
 
 	return {
 		swiper,
@@ -69,9 +69,14 @@ export default function FullScreenModal({
 		const delta = len - prevLen
 
 		const id = window.setTimeout(() => {
+			swiper.update()
+
 			if (reverse) {
-				swiper.update()
+				// Desktop: older items are appended at the end — jump to the first newly loaded slide
+				const firstNewIndex = Math.min(prevLen, len - 1)
+				swiper.slideTo(firstNewIndex, 0)
 			} else {
+				// Mobile: older items are prepended — keep the same visual position
 				const nextIndex = swiper.activeIndex + delta
 				const clamped = Math.max(0, Math.min(nextIndex, len - 1))
 				swiper.slideTo(clamped, 0)
@@ -0,0 +1,116 @@
+.overlay {
+	position: fixed;
+	z-index: 1201;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	display: none;
+}
+
+.overlayVisible {
+	display: block;
+}
+
+.backdrop {
+	position: absolute;
+	z-index: 101;
+	width: 100%;
+	height: 100%;
+	background-color: #000000;
+	opacity: 0.9;
+}
+
+.actions {
+	position: absolute;
+	z-index: 105;
+	cursor: pointer;
+	right: 25px;
+	top: 25px;
+	display: flex;
+	align-items: center;
+	gap: 15px;
+}
+
+.videoBlock {
+	position: absolute;
+	padding: 0 20px;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 105;
+	margin: auto;
+	width: fit-content;
+	height: fit-content;
+}
+
+.arrow {
+	position: absolute;
+	z-index: 1205;
+	cursor: pointer;
+	top: 50%;
+	width: 50px;
+	height: 50px;
+	background: transparent;
+	border: none;
+	outline: none;
+
+	svg {
+		fill: white;
+		width: 50px;
+		height: 50px;
+	}
+
+	&_left {
+		transform: translateY(-50%) rotate(90deg);
+		left: -40px;
+
+		@media screen and (max-width: 768px) {
+			left: -3px;
+		}
+	}
+
+	&_right {
+		transform: translateY(-50%) rotate(-90deg);
+		right: -50px;
+
+		@media screen and (max-width: 768px) {
+			right: -10px;
+		}
+	}
+}
+
+.swiper {
+	position: relative;
+	width: 100%;
+	max-width: 80vw;
+	max-height: 1000px;
+	height: 80vh;
+}
+
+.slide {
+	width: 80vw !important;
+	display: flex !important;
+	align-items: center;
+	justify-content: center;
+	height: 100% !important;
+	max-height: unset;
+}
+
+.slideInner {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.video {
+	width: 100%;
+	height: 100%;
+	max-width: 80vw;
+	max-height: 80vh;
+	object-fit: contain;
+	background: #000;
+}
@@ -1,199 +1,298 @@
-import React, { useEffect, useRef } from 'react';
-import { Close } from '@mui/icons-material';
-import {
-  Box,
-  Dialog,
-  DialogContent,
-  IconButton,
-} from '@mui/material';
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { ArrowDropDown } from '@mui/icons-material'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import 'swiper/css'
+
+import { Message } from '#/entities/message'
+import { useLibrarySwiper } from '#/features/image-modal/model/use-swiper'
+import { c } from '#/shared'
+import { useImageIcons } from '#/widgets/messages'
+
+import styles from './video-player-modal.module.scss'
 
 export interface VideoPlayerModalProps {
-    open: boolean;
-    onClose: () => void;
-    videoUrl: string;
-    title?: string;
-    autoPlay?: boolean;
-  }
+	open: boolean
+	onClose: () => void
+	videos: Message<string>[]
+	current: string | null
+	onSlideFalse?: () => void | Promise<void>
+	reverse?: boolean
+	autoPlay?: boolean
+	/** @deprecated use videos + current */
+	videoUrl?: string
+	/** @deprecated unused */
+	title?: string
+}
+
+function VideoSlide({
+	file,
+	isActive,
+	autoPlay,
+}: {
+	file: string
+	isActive: boolean
+	autoPlay: boolean
+}) {
+	const videoRef = useRef<HTMLVideoElement>(null)
+
+	useEffect(() => {
+		const video = videoRef.current
+		if (!video) {
+			return
+		}
+
+		if (isActive && autoPlay) {
+			video.currentTime = 0
+			void video.play().catch(() => undefined)
+			return
+		}
+
+		video.pause()
+	}, [isActive, autoPlay, file])
+
+	return (
+		<div className={styles.slideInner} onClick={(e) => e.stopPropagation()}>
+			<video
+				ref={videoRef}
+				className={styles.video}
+				src={file}
+				controls
+				playsInline
+				preload={isActive ? 'auto' : 'metadata'}
+				muted={autoPlay && isActive}
+			>
+				<source src={file} type='video/mp4' />
+				<source src={file} type='video/webm' />
+				<source src={file} type='video/ogg' />
+				Ваш браузер не поддерживает видео.
+			</video>
+		</div>
+	)
+}
 
 const VideoPlayerModal: React.FC<VideoPlayerModalProps> = ({
-  open,
-  onClose,
-  videoUrl,
-  title = 'Видео',
-  autoPlay = true,
+	open,
+	onClose,
+	videos,
+	current,
+	onSlideFalse,
+	reverse = false,
+	autoPlay = true,
+	videoUrl,
 }) => {
-  const videoRef = useRef<HTMLVideoElement>(null);
-
-  useEffect(() => {
-    if (videoRef.current && open) {
-      const video = videoRef.current;
-      
-      // Принудительно останавливаем автовоспроизведение при паузе
-      const handlePause = () => {
-        if (!video.paused) {
-          video.pause();
-        }
-      };
-
-      const handlePlay = () => {
-        // Убеждаемся, что видео действительно воспроизводится
-        if (video.paused) {
-          video.play().catch(() => {
-            // Игнорируем ошибки воспроизведения
-          });
-        }
-      };
-
-      // Дополнительная обработка для предотвращения автоматического воспроизведения после паузы
-      const handleTimeUpdate = () => {
-        // Если видео приостановлено, но время продолжает обновляться, принудительно останавливаем
-        if (video.paused && video.currentTime !== video.currentTime) {
-          video.pause();
-        }
-      };
-
-      // Обработка изменения состояния загрузки
-      const handleLoadStart = () => {
-        video.pause();
-      };
-
-      // Обработка видимости страницы (для мобильных устройств)
-      const handleVisibilityChange = () => {
-        if (document.hidden && !video.paused) {
-          video.pause();
-        }
-      };
-
-      // Обработка потери фокуса (для мобильных устройств)
-      const handleBlur = () => {
-        if (!video.paused) {
-          video.pause();
-        }
-      };
-
-      video.addEventListener('pause', handlePause);
-      video.addEventListener('play', handlePlay);
-      video.addEventListener('timeupdate', handleTimeUpdate);
-      video.addEventListener('loadstart', handleLoadStart);
-      document.addEventListener('visibilitychange', handleVisibilityChange);
-      window.addEventListener('blur', handleBlur);
-
-      // Настройка для мобильных устройств
-      video.setAttribute('playsinline', 'true');
-      video.setAttribute('webkit-playsinline', 'true');
-      
-      // Устанавливаем preload для лучшего контроля
-      video.preload = 'metadata';
-
-      return () => {
-        video.removeEventListener('pause', handlePause);
-        video.removeEventListener('play', handlePlay);
-        video.removeEventListener('timeupdate', handleTimeUpdate);
-        video.removeEventListener('loadstart', handleLoadStart);
-        document.removeEventListener('visibilitychange', handleVisibilityChange);
-        window.removeEventListener('blur', handleBlur);
-      };
-    }
-  }, [open, videoUrl]);
-
-  // Приостанавливаем видео при закрытии модального окна
-  const handleClose = () => {
-    if (videoRef.current && !videoRef.current.paused) {
-      videoRef.current.pause();
-    }
-    onClose();
-  };
-
-  return (
-    <Dialog
-      open={open}
-      onClose={handleClose}
-      maxWidth={false}
-      fullWidth
-      PaperProps={{
-        style: {
-          backgroundColor: 'transparent',
-          boxShadow: 'none',
-          margin: 0,
-          maxHeight: 'none',
-        },
-      }}
-      sx={{
-        '& .MuiDialog-paper': {
-          margin: 0,
-          maxHeight: 'none',
-          borderRadius: { xs: 0, sm: 4 },
-          width: { xs: '100vw', sm: '70vw' },
-          height: { xs: '100vh', sm: 'auto' },
-          maxWidth: { xs: '100vw', sm: '70vw' },
-        },
-      }}
-    >
-      {/* Контент с видео */}
-      <DialogContent 
-        sx={{ 
-          p: 0, 
-          backgroundColor: 'black',
-          position: 'relative',
-          minHeight: { xs: '100vh', sm: 'auto' },
-        }}
-      >
-        {/* Кнопка закрытия */}
-        <IconButton
-          onClick={handleClose}
-          sx={{
-            position: 'absolute',
-            top: { xs: 16, sm: 8 },
-            right: { xs: 16, sm: 8 },
-            zIndex: 10,
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
-            color: 'white',
-            '&:hover': {
-              backgroundColor: 'rgba(0, 0, 0, 0.7)',
-            },
-            width: { xs: 48, sm: 40 },
-            height: { xs: 48, sm: 40 },
-          }}
-          aria-label='close'
-        >
-          <Close sx={{ fontSize: { xs: 28, sm: 24 } }} />
-        </IconButton>
-
-        <Box
-          sx={{
-            position: 'relative',
-            width: '100%',
-            height: { xs: '100vh', sm: 0 },
-            paddingBottom: { xs: 0, sm: '56.25%' }, // 16:9 aspect ratio для десктопа
-          }}
-        >
-          <Box
-            component='video'
-            ref={videoRef}
-            src={videoUrl}
-            controls
-            autoPlay={autoPlay}
-            muted={autoPlay}
-            playsInline
-            preload='metadata'
-            sx={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              width: '100%',
-              height: '100%',
-              objectFit: 'contain',
-            }}
-          >
-            <source src={videoUrl} type='video/mp4' />
-            <source src={videoUrl} type='video/webm' />
-            <source src={videoUrl} type='video/ogg' />
-            Ваш браузер не поддерживает видео.
-          </Box>
-        </Box>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default VideoPlayerModal;
\ No newline at end of file
+	const libraryVideos = useMemo(() => {
+		if (videos?.length) {
+			return videos
+		}
+
+		if (videoUrl) {
+			return [
+				{
+					uid: 'legacy-video',
+					file: videoUrl,
+					content: '',
+					created_at: '',
+					elapsed_time: '',
+					from_model: true,
+					info: null,
+					is_favourite: false,
+					is_sent: true,
+					model: '',
+				} satisfies Message<string>,
+			]
+		}
+
+		return []
+	}, [videos, videoUrl])
+
+	const currentIndex = useMemo(() => {
+		const index = libraryVideos.findIndex((item) => item.file === current || item.file === videoUrl)
+		return index >= 0 ? index : 0
+	}, [libraryVideos, current, videoUrl])
+
+	const prevVideosLengthRef = useRef(0)
+	const [activeIndex, setActiveIndex] = useState(currentIndex)
+
+	const { swiper, setSwiper, slideNext, slidePrev } = useLibrarySwiper(onSlideFalse, reverse)
+	const { downloadFile } = useImageIcons()
+
+	useEffect(() => {
+		if (open) {
+			setActiveIndex(currentIndex)
+		}
+	}, [open, currentIndex])
+
+	useEffect(() => {
+		if (!open) {
+			prevVideosLengthRef.current = 0
+			return
+		}
+		if (!swiper) {
+			return
+		}
+
+		const len = libraryVideos.length
+		const prevLen = prevVideosLengthRef.current
+
+		if (prevLen === 0) {
+			prevVideosLengthRef.current = len
+			return
+		}
+
+		if (len === prevLen) {
+			return
+		}
+
+		if (len < prevLen) {
+			prevVideosLengthRef.current = len
+			return
+		}
+
+		const delta = len - prevLen
+
+		const id = window.setTimeout(() => {
+			swiper.update()
+
+			if (reverse) {
+				const firstNewIndex = Math.min(prevLen, len - 1)
+				swiper.slideTo(firstNewIndex, 0)
+				setActiveIndex(firstNewIndex)
+			} else {
+				const nextIndex = swiper.activeIndex + delta
+				const clamped = Math.max(0, Math.min(nextIndex, len - 1))
+				swiper.slideTo(clamped, 0)
+				setActiveIndex(clamped)
+			}
+
+			prevVideosLengthRef.current = len
+		}, 0)
+
+		return () => clearTimeout(id)
+	}, [open, libraryVideos.length, reverse, swiper])
+
+	useEffect(() => {
+		if (!open) {
+			return
+		}
+
+		const onEsc = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') {
+				e.preventDefault()
+				onClose()
+			}
+		}
+
+		window.addEventListener('keydown', onEsc)
+		return () => window.removeEventListener('keydown', onEsc)
+	}, [open, onClose])
+
+	return (
+		<div className={c(styles.overlay, open && styles.overlayVisible)} onClick={onClose}>
+			<div className={styles.backdrop} />
+			<div className={styles.actions}>
+				<div>
+					<svg
+						onClick={(e) => {
+							e.stopPropagation()
+							if (!swiper) return
+							const item = libraryVideos[swiper.activeIndex]
+							if (!item?.file) return
+							downloadFile(item.file, item.content)
+						}}
+						width='24'
+						height='24'
+						viewBox='0 0 15 15'
+						fill='none'
+						xmlns='http://www.w3.org/2000/svg'
+					>
+						<path
+							d='M1 10.75V11.5625C1 12.209 1.25681 12.829 1.71393 13.2861C2.17105 13.7432 2.79103 14 3.4375 14H11.5625C12.209 14 12.829 13.7432 13.2861 13.2861C13.7432 12.829 14 12.209 14 11.5625V10.75M10.75 7.5L7.5 10.75M7.5 10.75L4.25 7.5M7.5 10.75V1'
+							stroke='#767676'
+							strokeWidth='2'
+							strokeLinecap='round'
+							strokeLinejoin='round'
+						/>
+					</svg>
+				</div>
+				<div>
+					<svg
+						onClick={(e) => {
+							e.stopPropagation()
+							if (!swiper) return
+							const item = libraryVideos[swiper.activeIndex]
+							if (!item?.file) return
+							window.open(item.file, '_blank')
+						}}
+						width='24'
+						height='24'
+						viewBox='0 0 15 15'
+						fill='none'
+						xmlns='http://www.w3.org/2000/svg'
+					>
+						<path
+							d='M5.875 2.625H2.625C2.19402 2.625 1.7807 2.7962 1.47595 3.10095C1.1712 3.4057 1 3.81902 1 4.25V12.375C1 12.806 1.1712 13.2193 1.47595 13.524C1.7807 13.8288 2.19402 14 2.625 14H10.75C11.181 14 11.5943 13.8288 11.899 13.524C12.2038 13.2193 12.375 12.806 12.375 12.375V9.125M9.125 1H14M14 1V5.875M14 1L5.875 9.125'
+							stroke='#767676'
+							strokeWidth='2'
+							strokeLinecap='round'
+							strokeLinejoin='round'
+						/>
+					</svg>
+				</div>
+				<div onClick={onClose}>
+					<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+						<path
+							fillRule='evenodd'
+							clipRule='evenodd'
+							d='M0.487487 0.508814C0.799719 0.196362 1.22314 0.0208363 1.66464 0.0208363C2.10613 0.0208363 2.52955 0.196362 2.84178 0.508814L9.98959 7.66381L17.1374 0.508814C17.291 0.34963 17.4747 0.22266 17.6778 0.135311C17.881 0.0479631 18.0995 0.00198596 18.3205 6.29284e-05C18.5416 -0.0018601 18.7609 0.0403091 18.9655 0.124111C19.1701 0.207912 19.356 0.331667 19.5123 0.488155C19.6687 0.644643 19.7923 0.83073 19.876 1.03556C19.9597 1.24038 20.0019 1.45985 19.9999 1.68115C19.998 1.90245 19.9521 2.12115 19.8648 2.32449C19.7776 2.52783 19.6507 2.71174 19.4917 2.86548L12.3439 10.0205L19.4917 17.1755C19.795 17.4898 19.9628 17.9108 19.959 18.3478C19.9552 18.7848 19.7801 19.2028 19.4714 19.5118C19.1627 19.8209 18.7451 19.9961 18.3086 19.9999C17.872 20.0037 17.4514 19.8357 17.1374 19.5321L9.98959 12.3771L2.84178 19.5321C2.52776 19.8357 2.10718 20.0037 1.67063 19.9999C1.23407 19.9961 0.816472 19.8209 0.507769 19.5118C0.199066 19.2028 0.0239602 18.7848 0.0201666 18.3478C0.0163731 17.9108 0.184196 17.4898 0.487487 17.1755L7.63529 10.0205L0.487487 2.86548C0.175349 2.55293 0 2.12909 0 1.68715C0 1.24521 0.175349 0.82136 0.487487 0.508814Z'
+							fill='#767676'
+						/>
+					</svg>
+				</div>
+			</div>
+
+			<div className={styles.videoBlock}>
+				<button
+					className={c(styles.arrow, styles.arrow_left)}
+					onClick={(e) => {
+						e.stopPropagation()
+						slidePrev()
+					}}
+				>
+					<ArrowDropDown />
+				</button>
+
+				{open && libraryVideos.length > 0 && (
+					<Swiper
+						slidesPerView={'auto'}
+						spaceBetween={0}
+						className={styles.swiper}
+						simulateTouch={false}
+						initialSlide={currentIndex}
+						onSwiper={(instance) => setSwiper(instance)}
+						onSlideChange={(instance) => {
+							setActiveIndex(instance.activeIndex)
+						}}
+					>
+						{libraryVideos.map((video, index) => (
+							<SwiperSlide key={video.uid} className={styles.slide}>
+								<VideoSlide file={video.file} isActive={open && index === activeIndex} autoPlay={autoPlay} />
+							</SwiperSlide>
+						))}
+					</Swiper>
+				)}
+
+				<button
+					className={c(styles.arrow, styles.arrow_right)}
+					onClick={(e) => {
+						e.stopPropagation()
+						slideNext()
+					}}
+				>
+					<ArrowDropDown />
+				</button>
+			</div>
+		</div>
+	)
+}
+
+export default VideoPlayerModal
@@ -1,41 +1,86 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Swiper as SwiperCore } from 'swiper'
 
 export const useLibrarySwiper = (onSlideFalse: ((...args: any) => any) | undefined, reverse: boolean) => {
 	const [swiper, setSwiper] = useState<SwiperCore | null>(null)
+	const swiperRef = useRef<SwiperCore | null>(null)
+	const onSlideFalseRef = useRef(onSlideFalse)
+	const reverseRef = useRef(reverse)
 
+	swiperRef.current = swiper
+	onSlideFalseRef.current = onSlideFalse
+	reverseRef.current = reverse
 
-	const keydown = (e: KeyboardEvent) => {
-		if (e.key === 'ArrowRight') {
-			slideNext()
-		}
-		if (e.key === 'ArrowLeft') {
-			slidePrev()
+	const requestMoreIfNeeded = (direction: 'prev' | 'next') => {
+		const shouldPaginate =
+			(direction === 'prev' && !reverseRef.current) || (direction === 'next' && reverseRef.current)
+
+		if (shouldPaginate && onSlideFalseRef.current) {
+			void onSlideFalseRef.current()
 		}
 	}
 
-	const slidePrev = function () {
-		const result = swiper?.slidePrev()
+	const slidePrev = () => {
+		const instance = swiperRef.current
+		if (!instance) {
+			return
+		}
 
-		if (!result && onSlideFalse && !reverse) {
-			onSlideFalse()
+		const atBeginning = instance.isBeginning || instance.activeIndex <= 0
+		if (atBeginning) {
+			requestMoreIfNeeded('prev')
+			return
+		}
+
+		const prevIndex = instance.activeIndex
+		instance.slidePrev()
+
+		if (instance.activeIndex === prevIndex) {
+			requestMoreIfNeeded('prev')
 		}
 	}
 
-	const slideNext = function () {
-		const result = swiper?.slideNext()
+	const slideNext = () => {
+		const instance = swiperRef.current
+		if (!instance) {
+			return
+		}
 
-		if (!result && onSlideFalse && reverse) {
-			onSlideFalse()
+		const lastIndex = Math.max(instance.slides.length - 1, 0)
+		const atEnd = instance.isEnd || instance.activeIndex >= lastIndex
+		if (atEnd) {
+			requestMoreIfNeeded('next')
+			return
+		}
+
+		const prevIndex = instance.activeIndex
+		instance.slideNext()
+
+		if (instance.activeIndex === prevIndex) {
+			requestMoreIfNeeded('next')
 		}
 	}
 
+	const slidePrevRef = useRef(slidePrev)
+	const slideNextRef = useRef(slideNext)
+	slidePrevRef.current = slidePrev
+	slideNextRef.current = slideNext
+
 	useEffect(() => {
+		const keydown = (e: KeyboardEvent) => {
+			if (e.key === 'ArrowRight') {
+				slideNextRef.current()
+			}
+			if (e.key === 'ArrowLeft') {
+				slidePrevRef.current()
+			}
+		}
+
 		document.addEventListener('keydown', keydown, true)
 		return () => {
 			document.removeEventListener('keydown', keydown, true)
 		}
-	}, [swiper])
+	}, [])
 
 	return {
 		swiper,
@@ -69,9 +69,14 @@ export default function FullScreenModal({
 		const delta = len - prevLen
 
 		const id = window.setTimeout(() => {
+			swiper.update()
+
 			if (reverse) {
-				swiper.update()
+				// Desktop: older items are appended at the end — jump to the first newly loaded slide
+				const firstNewIndex = Math.min(prevLen, len - 1)
+				swiper.slideTo(firstNewIndex, 0)
 			} else {
+				// Mobile: older items are prepended — keep the same visual position
 				const nextIndex = swiper.activeIndex + delta
 				const clamped = Math.max(0, Math.min(nextIndex, len - 1))
 				swiper.slideTo(clamped, 0)
@@ -236,7 +236,11 @@ export const ImageMessagesList: React.FC<MessagesList> = memo(
 						<ImageModal
 							images={computedLibraryImages}
 							modal={modal}
-							onSlideFalse={() => getMessagesPagination && getMessagesPagination()}
+							onSlideFalse={() => {
+								if (hasMore && getMessagesPagination) {
+									void getMessagesPagination()
+								}
+							}}
 							setModal={setModal}
 							reverse={device === 'desktop'}
 							current={chosenImage}
@@ -1,13 +1,14 @@
-import React, { memo, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import React, { memo, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
 import { Box, CircularProgress, Skeleton, Typography } from '@mui/material'
 
 import { ImageIcons } from './image-icons'
 
 import styles from './image-messages-list.module.scss'
 
-import { VideoMessage } from '#/entities/message'
+import { Message, VideoMessage } from '#/entities/message'
 import VideoPlayerModal from '#/features/video-player/video-player-modal'
-import { TooltipCustom } from '#/shared'
+import { ClientOnly, TooltipCustom } from '#/shared'
 
 interface MessagesList {
 	device: 'mobile' | 'desktop'
@@ -32,8 +33,18 @@ export const VideoMessagesList: React.FC<MessagesList> = memo(
 		const [loadedVideos, setLoadedVideos] = useState<Set<string>>(new Set())
 		const videoRefs = useRef<{ [key: string]: HTMLVideoElement | null }>({})
 		const [isModalOpen, setIsModalOpen] = useState(false)
-		const [selectedVideoUrl, setSelectedVideoUrl] = useState('')
-		const [selectedVideoTitle, setSelectedVideoTitle] = useState('')
+		const [selectedVideoUrl, setSelectedVideoUrl] = useState<string | null>(null)
+
+		const libraryVideos = useMemo<Message<string>[]>(() => {
+			if (!videos?.length) {
+				return []
+			}
+
+			return videos.filter(
+				(message): message is VideoMessage<string> =>
+					typeof message.file === 'string' && message.file.trim() !== ''
+			) as Message<string>[]
+		}, [videos])
 
 		const paginationSentinelRef = useRef<HTMLDivElement | null>(null)
 		const intersectionObserverRef = useRef<IntersectionObserver | null>(null)
@@ -121,16 +132,14 @@ export const VideoMessagesList: React.FC<MessagesList> = memo(
 			setLoadedVideos((prev) => new Set([...prev, uid]))
 		}
 
-		const handleVideoClick = (uid: string, videoUrl: string, content: string) => {
+		const handleVideoClick = (_uid: string, videoUrl: string) => {
 			setSelectedVideoUrl(videoUrl)
-			setSelectedVideoTitle(content || 'Видео')
 			setIsModalOpen(true)
 		}
 
 		const handleCloseModal = () => {
 			setIsModalOpen(false)
-			setSelectedVideoUrl('')
-			setSelectedVideoTitle('')
+			setSelectedVideoUrl(null)
 		}
 
 		useEffect(() => {
@@ -239,13 +248,24 @@ export const VideoMessagesList: React.FC<MessagesList> = memo(
 
 		return (
 			<>
-				<VideoPlayerModal
-					open={isModalOpen}
-					onClose={handleCloseModal}
-					videoUrl={selectedVideoUrl}
-					title={selectedVideoTitle}
-					autoPlay={true}
-				/>
+				<ClientOnly>
+					{createPortal(
+						<VideoPlayerModal
+							open={isModalOpen}
+							onClose={handleCloseModal}
+							videos={libraryVideos}
+							current={selectedVideoUrl}
+							reverse={device === 'desktop'}
+							autoPlay={true}
+							onSlideFalse={() => {
+								if (hasMore && getMessagesPagination) {
+									void getMessagesPagination()
+								}
+							}}
+						/>,
+						document.getElementById('modal-container')!
+					)}
+				</ClientOnly>
 
 				<Box className={'mt-15'} sx={{ position: 'relative' }}>
 					{device === 'mobile' && paginationLoading && (
@@ -311,7 +331,7 @@ export const VideoMessagesList: React.FC<MessagesList> = memo(
 														videoRefs.current[message.uid] = el
 													}}
 													className={styles.background_video}
-													onClick={() => handleVideoClick(message.uid, fileUrl, message.content)}
+													onClick={() => handleVideoClick(message.uid, fileUrl)}
 													onLoadedData={() => handleVideoLoad(message.uid)}
 													preload='auto'
 													muted