mirror of
https://github.com/truewhile/MeBox.git
synced 2026-10-10 23:36:37 +08:00
添加全屏功能
This commit is contained in:
@@ -103,6 +103,7 @@
|
||||
- 漫画图片显示尺寸(`utils/comicImageFit.ts`,仅上下滚动模式):legado 的漫画阅读有「缩放」,Web 版原先只有一种写死的宽度(正文列封顶 900px),桌面端放不大也缩不小,所以补上一组档位,在界面面板的「图片尺寸」一行切换。`default` 就是老样子(900px 居中),`width` 适应宽度(正文列不再封顶、铺满窗口),`height` 适应高度(一屏一页),`long` 适应长边(整页完整可见),`original` 原图(原始像素 1:1,超出部分横向滚动)。`default`/`width` 由外层列宽决定,其余三个由 `<img>` 自身约束,**所以后三种必须放开 900px 列宽上限**,否则会被列再压回去。`height`/`long` 要按「一屏多高」换算,所以量的是滚动容器本身而不是 `window.innerHeight`(正文区是 root 里的 `flex-1`,另挂上下条之后就不等于窗口高度了),并用 `ResizeObserver` 跟随;只在启用了自尺寸档位时才挂观察器,默认档位不白白重渲染整章。`settings.comicImageFit` 是设备级偏好(不同屏幕和源分辨率合适的尺寸不同),和 `comicDoublePage` 一样只存本机、不参与账号同步。翻页模式是整页缩放进视口,本来就不存在「太大/太小」,档位对它不生效、也不显示入口。`ctrl/cmd+滚轮` 依然留给浏览器缩放,本功能只用档位做粗调。
|
||||
- **文本型漫画源按图片下发**(`internal/service/reader` 的 `imageMarkersOnly`):拷贝漫画这类书源 `bookSourceType=0`(文本),正文规则直接给 `<img>`,服务端把整行标签转成 `[img]<签名地址>` 标记行后类型仍是 `text`,前端就会走文本阅读器——分页把每张图当成一列,一屏只看得到一张,桌面端也谈不上双页铺开。现在 `GetContentForBook` / `LocalChapterContent` 在标记化之后判断「非空行全部是 `[img]` 标记」,是则把 `type` 改成 `image` 并给出 `images`,交由漫画阅读器渲染(整页缩放、双页铺开、进度按图片序号)。判定只认「全是标记」:混了正文的章节一律保持 `text`,孤立的 HTML 标签行(`<div>`/`</div>`)与空行当作无内容忽略,绝不吞掉可读文字。
|
||||
- 鼠标滚轮翻页(仅翻页模式):向上滚=上一页,向下滚=下一页;菜单打开时也不翻页。鼠标滚轮一格一页(间隔至少 220ms,与翻页动画对齐),触控板小步长累计到阈值翻一页且一次手势只翻一页(避免惯性连翻)。`ctrl/cmd+滚轮` 保留浏览器缩放。
|
||||
- **浏览器全屏(沉浸式)**:阅读页本身已经是 `fixed inset-0` 的独立布局(`/reader/*` 不套影视 Layout),所以屏幕上的留白只剩浏览器自带的地址栏/工具栏。底部动作行加「全屏 / 还原」,对 `readerRef` 调标准 Fullscreen API(`requestFullscreen` / `exitFullscreen`),进全屏前先收起菜单。按钮只在 `document.fullscreenEnabled === true` 时出现——**iOS 上的 Safari 至今不支持元素全屏**(只有 `<video>` 能全屏),所以那里不显示按钮,而不是显示一个点了没反应的死按钮;iPhone 想彻底去掉浏览器界面只能「添加到主屏幕」。离开阅读页时卸载 effect 主动 `exitFullscreen`,否则返回书架后浏览器仍停在全屏、整站都被罩住。全屏状态由 `fullscreenchange` 事件回写,不做乐观更新(用户按 Esc / 系统手势退出时也要跟着变)。
|
||||
- 目录:整屏面板(顶部返回 + 书名 + 章数,Virtuoso 虚拟列表,定位并高亮当前章,点章跳转)。**必须渲染在底部菜单之外**:菜单带 `backdrop-blur`,会成为 `fixed` 后代的包含块,放里面 `h-full` 只能拿到菜单高度;历史上它写的是 `top-0 + bottom-full`,两者同时存在时高度被算成 0,整块目录完全看不见。
|
||||
|
||||
**本地书籍(对应 legado 本地 TXT / EPUB)**
|
||||
|
||||
@@ -9,7 +9,9 @@ import {
|
||||
LayoutList,
|
||||
ListEnd,
|
||||
Loader2,
|
||||
Maximize,
|
||||
MessageSquare,
|
||||
Minimize,
|
||||
Minus,
|
||||
Moon,
|
||||
Plus,
|
||||
@@ -269,6 +271,9 @@ export default function ReaderViewPage() {
|
||||
|
||||
const [menuOpen, setMenuOpen] = useState(false)
|
||||
const [panel, setPanel] = useState<'none' | 'toc' | 'style'>('none')
|
||||
// 浏览器全屏(沉浸式):把阅读层整个铺满屏幕,连浏览器的地址栏/状态栏一起让出来。
|
||||
// 页面本身是 fixed inset-0,所以这里要解决的是浏览器自身的界面,而不是页面内的留白。
|
||||
const [fullscreen, setFullscreen] = useState(false)
|
||||
/** 目录面板顶部「区间下拉」选中的组号,随列表滚动同步。 */
|
||||
const [tocGroupIndex, setTocGroupIndex] = useState(0)
|
||||
// 换源:候选源来自按书名重新搜索的结果;reloadKey 变化时整本书重新加载
|
||||
@@ -346,6 +351,39 @@ export default function ReaderViewPage() {
|
||||
return () => window.removeEventListener('resize', onResize)
|
||||
}, [])
|
||||
|
||||
// ── 浏览器全屏(沉浸式) ──
|
||||
// 只认标准 API:iOS 上的 Safari 至今不支持元素全屏(只有 <video> 能全屏),
|
||||
// 所以那里不显示按钮(不是灰掉——按钮点了没反应会被当成坏了)。
|
||||
const fullscreenSupported = useMemo(
|
||||
() => typeof document !== 'undefined' && document.fullscreenEnabled === true,
|
||||
[],
|
||||
)
|
||||
useEffect(() => {
|
||||
const onFullscreenChange = () => setFullscreen(Boolean(document.fullscreenElement))
|
||||
document.addEventListener('fullscreenchange', onFullscreenChange)
|
||||
return () => document.removeEventListener('fullscreenchange', onFullscreenChange)
|
||||
}, [])
|
||||
// 离开阅读页时退出全屏:否则返回书架后浏览器仍停在全屏,整站都被罩住。
|
||||
useEffect(
|
||||
() => () => {
|
||||
if (document.fullscreenElement) void document.exitFullscreen()
|
||||
},
|
||||
[],
|
||||
)
|
||||
const toggleFullscreen = useCallback(() => {
|
||||
const el = readerRef.current
|
||||
if (!el) return
|
||||
if (document.fullscreenElement) {
|
||||
void document.exitFullscreen()
|
||||
return
|
||||
}
|
||||
// 进全屏是为了看正文,菜单还压在上面就没意义了,先收起来。
|
||||
setMenuOpen(false)
|
||||
setPanel('none')
|
||||
// 浏览器可能以权限策略等理由拒绝,静默忽略即可(按钮状态由 fullscreenchange 回写)。
|
||||
void el.requestFullscreen?.().catch(() => {})
|
||||
}, [])
|
||||
|
||||
const comicImages = contentType === 'image' && media?.images ? media.images : NO_IMAGES
|
||||
const comicDoublePage =
|
||||
contentType === 'image' &&
|
||||
@@ -1659,6 +1697,16 @@ export default function ReaderViewPage() {
|
||||
},
|
||||
]
|
||||
: []),
|
||||
// 全屏:只在浏览器支持元素全屏时出现(iOS Safari 不支持,见上方注释)。
|
||||
...(fullscreenSupported
|
||||
? [
|
||||
{
|
||||
icon: fullscreen ? <Minimize size={18} /> : <Maximize size={18} />,
|
||||
label: fullscreen ? '还原' : '全屏',
|
||||
action: toggleFullscreen,
|
||||
},
|
||||
]
|
||||
: []),
|
||||
...(canSwitchSource
|
||||
? [
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user