fixed 直播间因为字体大小问题导致无法对齐
This commit is contained in:
parent
aa456d2b18
commit
eecd7b766f
@ -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,
|
||||
|
@ -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, {
|
||||
|
@ -1,6 +1,9 @@
|
||||
import {create} from "zustand"
|
||||
|
||||
|
||||
export const PlayerInstance: HTMLVideoElement[] = [];
|
||||
export const defaultCache:{
|
||||
firstLoadPath?: string
|
||||
} = {};
|
||||
type StoreInstance<T> = {
|
||||
cache: T[];
|
||||
clear: () => void;
|
||||
|
@ -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>)
|
||||
}
|
@ -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,
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user