xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

H5底部栏适配

Browse Source
This commit is contained in:
北枳 2025-10-09 19:08:08 +08:00
parent f2050530e7
commit f9311b5bd8
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/pages/work-flow/H5MediaViewer.tsx
View File

@ -240,14 +240,14 @@ export function H5MediaViewer({
/** 视频轮播容器高度：按 aspectRatio 计算（基于视口宽度） */ /** 视频轮播容器高度：按 aspectRatio 计算（基于视口宽度） */
const videoWrapperHeight = useMemo(() => { const videoWrapperHeight = useMemo(() => {
const { w, h } = parseAspect(aspectRatio); const { w, h } = parseAspect(aspectRatio);
return `min(calc(100vw * ${h} / ${w}), calc(100vh - 10.5rem))`; return `min(calc(100vw * ${h} / ${w}), calc(100vh - 15rem))`;
}, [aspectRatio]); }, [aspectRatio]);
/** 图片轮播容器高度：默认 16:9 */ /** 图片轮播容器高度：默认 16:9 */
const imageWrapperHeight = useMemo(() => { const imageWrapperHeight = useMemo(() => {
// return 'calc(100vw * 9 / 16)'; // return 'calc(100vw * 9 / 16)';
const { w, h } = parseAspect(aspectRatio); const { w, h } = parseAspect(aspectRatio);
return `min(calc(100vw * ${h} / ${w}), calc(100vh - 10.5rem))`; return `min(calc(100vw * ${h} / ${w}), calc(100vh - 15rem))`;
}, [aspectRatio]); }, [aspectRatio]);
// 计算当前阶段类型 // 计算当前阶段类型
@ -572,8 +572,8 @@ export function H5MediaViewer({
{stage === 'final_video' && videoUrls.length > 0 && renderVideoSlides()} {stage === 'final_video' && videoUrls.length > 0 && renderVideoSlides()}
{stage === 'video' && videoUrls.length > 0 && renderVideoSlides()} {stage === 'video' && videoUrls.length > 0 && renderVideoSlides()}
{(stage === 'scene' || stage === 'character') && imageItems.length > 0 && renderImageSlides()} {(stage === 'scene' || stage === 'character') && imageItems.length > 0 && renderImageSlides()}
{/* 全局固定操作区（右下角）视频暂停时展示 */} {/* 全局固定操作区 */}
{(stage === 'video' || stage === 'final_video') && !isPlaying && ( {(stage === 'video' || stage === 'final_video') && (
<div data-alt="global-video-actions" className="absolute top-0 right-4 z-[60] flex flex-col items-center gap-2"> <div data-alt="global-video-actions" className="absolute top-0 right-4 z-[60] flex flex-col items-center gap-2">
{stage === 'video' && ( {stage === 'video' && (
<> <>