fixed 直播间因为字体大小问题导致无法对齐

This commit is contained in:
LittleBoy 2024-12-24 18:47:53 +08:00
parent aa456d2b18
commit eecd7b766f
7 changed files with 48 additions and 22 deletions

View File

@ -3,6 +3,7 @@ import {Modal} from "antd";
import {ButtonType} from "antd/es/button";
import {showErrorToast, showToast} from "@/components/message.ts";
import {BizError} from "@/service/types.ts";
import {IconWarningCircle} from "@/components/icons";
type Props = {
selected: any[],
@ -47,7 +48,8 @@ export default function ButtonBatch(
return;
}
Modal.confirm({
rootClassName:'root-modal-confirm',
wrapClassName:'root-modal-confirm',
icon: <IconWarningCircle/>,
title: title || '操作提示',
centered: true,
content: confirmMessage,

View File

@ -2,6 +2,7 @@
// import {PauseOutlined, PlayCircleOutlined, FullscreenOutlined, FullscreenExitOutlined} from "@ant-design/icons"
// import {Progress} from "antd";
import React, {useEffect, useState} from "react";
import {PlayerInstance} from "@/hooks/useCache.ts";
import TCPlayer from 'tcplayer.js';
import 'tcplayer.js/dist/tcplayer.min.css';
@ -58,6 +59,10 @@ export const Player = React.forwardRef<PlayerInstance, Props>((props, ref) => {
},[props.url, tcPlayer])
useEffect(() => {
if(PlayerInstance.length != 0){
PlayerInstance.forEach(player => player.pause())
PlayerInstance.length = 0
}
const playerVideo = document.createElement('video');
const playerId = `player-container-${Date.now().toString(16)}`;
playerVideo.setAttribute('id', playerId)
@ -65,6 +70,8 @@ export const Player = React.forwardRef<PlayerInstance, Props>((props, ref) => {
playerVideo.setAttribute('playsInline', 'true')
playerVideo.setAttribute('webkit-playsinline', 'true')
if(props.className) playerVideo.setAttribute('className', props.className)
playerVideo.classList.add('digital-video-player')
PlayerInstance.push(playerVideo)
document.querySelector('.video-player-container-inner')!.appendChild(playerVideo)
const player = TCPlayer(playerId, {

View File

@ -1,6 +1,9 @@
import {create} from "zustand"
export const PlayerInstance: HTMLVideoElement[] = [];
export const defaultCache:{
firstLoadPath?: string
} = {};
type StoreInstance<T> = {
cache: T[];
clear: () => void;

View File

@ -1,5 +1,5 @@
import React, {useEffect, useMemo, useRef, useState} from "react";
import {Checkbox, Modal} from "antd";
import {Checkbox, Empty, Modal} from "antd";
import {SortableContext, arrayMove} from '@dnd-kit/sortable';
import {DndContext} from "@dnd-kit/core";
@ -130,11 +130,14 @@ export default function LiveIndex() {
loadList()
return ()=>{
clearAllTimer();
try{
Array.from(document.querySelectorAll('video')).forEach(v => v.pause())
}catch (e){
console.log(e)
}
setTimeout(()=>{
console.log('pause all video')
try{
Array.from(document.querySelectorAll('video')).forEach(v => v.pause())
}catch (e){
console.log(e)
}
},20)
}
}, [])
@ -203,7 +206,6 @@ export default function LiveIndex() {
}, [checkedIdArray, state.activeIndex])
return (<div className="container py-5 page-live">
{contextHolder}
<div className="h-[36px]"></div>
<div className="flex">
<div className="video-player-container mr-16 flex items-center">
@ -226,26 +228,27 @@ export default function LiveIndex() {
</div>
</div>
</div>
<div className="video-list-container video-list-sort-container flex-1 mt-1">
<div className="video-list-container video-list-sort-container flex flex-col flex-1 mt-2">
<div className="live-control flex justify-between mb-1">
<div className="text-sm">
<span>{state.activeIndex == -1 ? '暂未播放' : `播放到${state.activeIndex}`},</span>
<span>{videoData.length}</span>
<div>
<div className="text-sm">
<span>{state.activeIndex == -1 ? '暂未播放' : `播放到${state.activeIndex}`},</span>
<span>{videoData.length}</span>
</div>
</div>
<div className="flex gap-2 items-center text-sm">
<div className="flex items-center">
<div className={'flex items-center text-gray-400 cursor-pointer select-none'}
onClick={handleConfirm}>
<span>{editable ? '已解锁' : '锁定状态不可排序'}</span>
<span className="ml-2">
<span className="ml-2 text-sm">
{editable ? <IconUnlock/> : <IconLocked/>}
</span>
</div>
<div className="check-all ml-10">
<button className="hover:text-blue-300 text-gray-400 text-lg"
<button className="hover:text-blue-300 text-gray-400"
onClick={handleAllCheckedChange}>
<span className="text-sm mr-2"></span>
<span className="text-sm mr-2 whitespace-nowrap"></span>
{/*<CheckCircleFilled className={clsx({'text-blue-500': state.checkedAll})}/>*/}
</button>
<Checkbox checked={state.checkedAll} onChange={() => handleAllCheckedChange()}/>
@ -270,6 +273,7 @@ export default function LiveIndex() {
onCallback={() => {
}}
>
{videoData.length == 0 && <div className="m-auto py-16"><Empty/></div>}
<div className="sort-list-container flex-1">
<DndContext onDragEnd={(e) => {
const {active, over} = e;
@ -327,5 +331,6 @@ export default function LiveIndex() {
<IconDelete/>
</ButtonBatch>}
</div>
{contextHolder}
</div>)
}

View File

@ -26,7 +26,6 @@ export default function ButtonDeleteBatch(props: { ids: Id[];onSuccess?: () => v
}
modal.confirm({
wrapClassName:'root-modal-confirm',
className:'modal-confirm',
title: `你确定要删除选择的 ${props.ids.length} 条新闻吗?`,
content: '删除后需从新闻素材中重新选择',
onOk: handlePush,

View File

@ -180,7 +180,7 @@ export default function VideoIndex() {
</div>
<InfiniteScroller loading={state.loading} ref={scrollerRef} onScroll={top => setState({showToTop: top > 30})}>
{
videoData.length == 0 ? <div className="m-auto"><Empty/></div> :
videoData.length == 0 ? <div className="m-auto py-16"><Empty/></div> :
<div className="sort-list-container flex-1">
<DndContext onDragEnd={(e) => {
const {active, over} = e;

View File

@ -1,6 +1,6 @@
import {Outlet, useNavigate} from "react-router-dom";
import {Outlet, useLocation, useNavigate} from "react-router-dom";
import {Dropdown, MenuProps} from "antd";
import React from "react";
import React, {useEffect} from "react";
import AuthGuard from "@/routes/layout/auth-guard.tsx";
import {LogoText} from "@/components/icons/logo.tsx";
@ -10,6 +10,7 @@ import {DashboardNavigation} from "@/routes/layout/dashboard-navigation.tsx";
import useAuth from "@/hooks/useAuth.ts";
import {hidePhone} from "@/util/strings.ts";
import {defaultCache} from "@/hooks/useCache.ts";
type LayoutProps = {
@ -70,7 +71,16 @@ export const BaseLayout: React.FC<LayoutProps> = ({children}) => {
const DashboardLayout: React.FC<{ children?: React.ReactNode }> = ({children}) => {
const loc = useLocation()
const navigate = useNavigate()
useEffect(()=>{
if(!defaultCache.firstLoadPath && loc.pathname == '/live'){
defaultCache.firstLoadPath = loc.pathname;
navigate('/')
}
},[])
return <AuthGuard>
<div className="fixed">first path:{defaultCache.firstLoadPath}</div>
<BaseLayout>
{children ? children : <Outlet/>}
</BaseLayout>