forked from 77media/video-flow
区分 Edge 浏览器
This commit is contained in:
parent
18890956e6
commit
01e2514650
@ -226,6 +226,7 @@ export function H5MediaViewer({
|
||||
const [activeIndex, setActiveIndex] = useState<number>(0);
|
||||
const [isPlaying, setIsPlaying] = useState<boolean>(false);
|
||||
const [isCatalogOpen, setIsCatalogOpen] = useState<boolean>(false);
|
||||
const [isEdgeBrowser, setIsEdgeBrowser] = useState<boolean>(false);
|
||||
|
||||
/** 解析形如 "16:9" 的比例字符串 */
|
||||
const parseAspect = (input?: string): { w: number; h: number } => {
|
||||
@ -238,18 +239,28 @@ export function H5MediaViewer({
|
||||
};
|
||||
};
|
||||
|
||||
/** 检测是否为 Edge 浏览器(客户端挂载后执行) */
|
||||
useEffect(() => {
|
||||
const isEdge = navigator.userAgent.indexOf('Edg') !== -1;
|
||||
setIsEdgeBrowser(isEdge);
|
||||
}, []);
|
||||
|
||||
/** 根据浏览器类型获取最大高度值 */
|
||||
const maxHeight = useMemo(() => {
|
||||
return isEdgeBrowser ? 'calc(100vh - 10.5rem)' : 'calc(100vh - 15rem)';
|
||||
}, [isEdgeBrowser]);
|
||||
|
||||
/** 视频轮播容器高度:按 aspectRatio 计算(基于视口宽度) */
|
||||
const videoWrapperHeight = useMemo(() => {
|
||||
const { w, h } = parseAspect(aspectRatio);
|
||||
return `min(calc(100vw * ${h} / ${w}), calc(100vh - 15rem))`;
|
||||
}, [aspectRatio]);
|
||||
return `min(calc(100vw * ${h} / ${w}), ${maxHeight})`;
|
||||
}, [aspectRatio, maxHeight]);
|
||||
|
||||
/** 图片轮播容器高度:默认 16:9 */
|
||||
const imageWrapperHeight = useMemo(() => {
|
||||
// return 'calc(100vw * 9 / 16)';
|
||||
const { w, h } = parseAspect(aspectRatio);
|
||||
return `min(calc(100vw * ${h} / ${w}), calc(100vh - 15rem))`;
|
||||
}, [aspectRatio]);
|
||||
return `min(calc(100vw * ${h} / ${w}), ${maxHeight})`;
|
||||
}, [aspectRatio, maxHeight]);
|
||||
|
||||
// 计算当前阶段类型
|
||||
const stage = (selectedView === 'final' && taskObject.final?.url)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user