You've already forked bilibili-subtitle
fix
This commit is contained in:
IndieKKY
415
src/components/Body.tsx
Normal file
415
src/components/Body.tsx
Normal file
@@ -0,0 +1,415 @@
|
||||
import React, {useCallback, useEffect, useMemo, useRef} from 'react'
|
||||
import {
|
||||
addAskInfo,
|
||||
mergeAskInfo,
|
||||
setAutoScroll,
|
||||
setAutoTranslate,
|
||||
setCheckAutoScroll,
|
||||
setFoldAll,
|
||||
setNeedScroll,
|
||||
setSearchText,
|
||||
setSegmentFold,
|
||||
setTempData
|
||||
} from '../redux/envReducer'
|
||||
import {useAppDispatch, useAppSelector} from '../hooks/redux'
|
||||
import {
|
||||
AiOutlineAim,
|
||||
AiOutlineCloseCircle,
|
||||
FaRegArrowAltCircleDown,
|
||||
IoWarning,
|
||||
MdExpand,
|
||||
RiTranslate
|
||||
} from 'react-icons/all'
|
||||
import classNames from 'classnames'
|
||||
import toast from 'react-hot-toast'
|
||||
import SegmentCard from './SegmentCard'
|
||||
import {
|
||||
ASK_ENABLED_DEFAULT,
|
||||
HEADER_HEIGHT,
|
||||
PAGE_SETTINGS,
|
||||
SEARCH_BAR_HEIGHT,
|
||||
SUMMARIZE_ALL_THRESHOLD,
|
||||
TITLE_HEIGHT
|
||||
} from '../consts/const'
|
||||
import {FaClipboardList} from 'react-icons/fa'
|
||||
import useTranslate from '../hooks/useTranslate'
|
||||
import {openUrl} from '@kky002/kky-util'
|
||||
import useKeyService from '../hooks/useKeyService'
|
||||
import Ask from './Ask'
|
||||
import {v4} from 'uuid'
|
||||
import RateExtension from '../components/RateExtension'
|
||||
|
||||
const Body = () => {
|
||||
const dispatch = useAppDispatch()
|
||||
const inputting = useAppSelector(state => state.env.inputting)
|
||||
const noVideo = useAppSelector(state => state.env.noVideo)
|
||||
const autoTranslate = useAppSelector(state => state.env.autoTranslate)
|
||||
const autoScroll = useAppSelector(state => state.env.autoScroll)
|
||||
const segments = useAppSelector(state => state.env.segments)
|
||||
const foldAll = useAppSelector(state => state.env.foldAll)
|
||||
const envData = useAppSelector(state => state.env.envData)
|
||||
const compact = useAppSelector(state => state.env.tempData.compact)
|
||||
const floatKeyPointsSegIdx = useAppSelector(state => state.env.floatKeyPointsSegIdx)
|
||||
const translateEnable = useAppSelector(state => state.env.envData.translateEnable)
|
||||
const summarizeEnable = useAppSelector(state => state.env.envData.summarizeEnable)
|
||||
const {addSummarizeTask, addAskTask} = useTranslate()
|
||||
// const infos = useAppSelector(state => state.env.infos)
|
||||
const bodyRef = useRef<any>()
|
||||
const curOffsetTop = useAppSelector(state => state.env.curOffsetTop)
|
||||
const checkAutoScroll = useAppSelector(state => state.env.checkAutoScroll)
|
||||
const needScroll = useAppSelector(state => state.env.needScroll)
|
||||
const totalHeight = useAppSelector(state => state.env.totalHeight)
|
||||
const curSummaryType = useAppSelector(state => state.env.tempData.curSummaryType)
|
||||
// const title = useAppSelector(state => state.env.title)
|
||||
// const fontSize = useAppSelector(state => state.env.envData.fontSize)
|
||||
const searchText = useAppSelector(state => state.env.searchText)
|
||||
const asks = useAppSelector(state => state.env.asks)
|
||||
// const recommendIdx = useMemo(() => random(0, 3), [])
|
||||
const showSearchInput = useMemo(() => {
|
||||
return (segments != null && segments.length > 0) && (envData.searchEnabled ? envData.searchEnabled : (envData.askEnabled ?? ASK_ENABLED_DEFAULT))
|
||||
}, [envData.askEnabled, envData.searchEnabled, segments])
|
||||
const searchPlaceholder = useMemo(() => {
|
||||
let placeholder = ''
|
||||
if (envData.searchEnabled) {
|
||||
if (envData.askEnabled??ASK_ENABLED_DEFAULT) {
|
||||
placeholder = '搜索或提问字幕内容(按Enter提问)'
|
||||
} else {
|
||||
placeholder = '搜索字幕内容'
|
||||
}
|
||||
} else {
|
||||
if (envData.askEnabled??ASK_ENABLED_DEFAULT) {
|
||||
placeholder = '提问字幕内容'
|
||||
}
|
||||
}
|
||||
return placeholder
|
||||
}, [envData.askEnabled, envData.searchEnabled])
|
||||
|
||||
const normalCallback = useCallback(() => {
|
||||
dispatch(setTempData({
|
||||
compact: false
|
||||
}))
|
||||
}, [dispatch])
|
||||
|
||||
const compactCallback = useCallback(() => {
|
||||
dispatch(setTempData({
|
||||
compact: true
|
||||
}))
|
||||
}, [dispatch])
|
||||
|
||||
const posCallback = useCallback(() => {
|
||||
dispatch(setNeedScroll(true))
|
||||
}, [dispatch])
|
||||
|
||||
const onSummarizeAll = useCallback(() => {
|
||||
const apiKey = envData.aiType === 'gemini'?envData.geminiApiKey:envData.apiKey
|
||||
if (!apiKey) {
|
||||
toast.error('请先在选项页面设置ApiKey!')
|
||||
return
|
||||
}
|
||||
const segments_ = []
|
||||
for (const segment of segments ?? []) {
|
||||
const summary = segment.summaries[curSummaryType]
|
||||
if (!summary || summary.status === 'init' || (summary.status === 'done' && summary.error)) {
|
||||
segments_.push(segment)
|
||||
}
|
||||
}
|
||||
if (segments_.length === 0) {
|
||||
toast.error('没有可总结的段落!')
|
||||
return
|
||||
}
|
||||
if (segments_.length < SUMMARIZE_ALL_THRESHOLD || confirm(`确定总结${segments_.length}个段落?`)) {
|
||||
for (const segment of segments_) {
|
||||
addSummarizeTask(curSummaryType, segment).catch(console.error)
|
||||
}
|
||||
toast.success(`已添加${segments_.length}个总结任务!`)
|
||||
}
|
||||
}, [addSummarizeTask, curSummaryType, dispatch, envData.aiType, envData.apiKey, envData.geminiApiKey, segments])
|
||||
|
||||
const onFoldAll = useCallback(() => {
|
||||
dispatch(setFoldAll(!foldAll))
|
||||
for (const ask of asks) {
|
||||
dispatch(mergeAskInfo({
|
||||
id: ask.id,
|
||||
fold: !foldAll
|
||||
}))
|
||||
}
|
||||
for (const segment of segments ?? []) {
|
||||
dispatch(setSegmentFold({
|
||||
segmentStartIdx: segment.startIdx,
|
||||
fold: !foldAll
|
||||
}))
|
||||
}
|
||||
}, [asks, dispatch, foldAll, segments])
|
||||
|
||||
const toggleAutoTranslateCallback = useCallback(() => {
|
||||
const apiKey = envData.aiType === 'gemini'?envData.geminiApiKey:envData.apiKey
|
||||
if (apiKey) {
|
||||
dispatch(setAutoTranslate(!autoTranslate))
|
||||
} else {
|
||||
toast.error('请先在选项页面设置ApiKey!')
|
||||
}
|
||||
}, [autoTranslate, dispatch, envData.aiType, envData.apiKey, envData.geminiApiKey])
|
||||
|
||||
const onEnableAutoScroll = useCallback(() => {
|
||||
dispatch(setAutoScroll(true))
|
||||
dispatch(setNeedScroll(true))
|
||||
}, [dispatch])
|
||||
|
||||
const onWheel = useCallback(() => {
|
||||
if (autoScroll) {
|
||||
dispatch(setAutoScroll(false))
|
||||
}
|
||||
}, [autoScroll, dispatch])
|
||||
|
||||
// const onCopy = useCallback(() => {
|
||||
// const [success, content] = getSummarize(title, segments, curSummaryType)
|
||||
// if (success) {
|
||||
// navigator.clipboard.writeText(content).then(() => {
|
||||
// toast.success('复制成功')
|
||||
// }).catch(console.error)
|
||||
// }
|
||||
// }, [curSummaryType, segments, title])
|
||||
|
||||
const onSearchTextChange = useCallback((e: any) => {
|
||||
const searchText = e.target.value
|
||||
dispatch(setSearchText(searchText))
|
||||
}, [dispatch])
|
||||
|
||||
const onClearSearchText = useCallback(() => {
|
||||
dispatch(setSearchText(''))
|
||||
}, [dispatch])
|
||||
|
||||
const onAsk = useCallback(() => {
|
||||
if ((envData.askEnabled??ASK_ENABLED_DEFAULT) && searchText) {
|
||||
const apiKey = envData.aiType === 'gemini'?envData.geminiApiKey:envData.apiKey
|
||||
if (apiKey) {
|
||||
if (segments != null && segments.length > 0) {
|
||||
const id = v4()
|
||||
addAskTask(id, segments[0], searchText).catch(console.error)
|
||||
// 添加ask
|
||||
dispatch(addAskInfo({
|
||||
id,
|
||||
question: searchText,
|
||||
status: 'pending',
|
||||
}))
|
||||
}
|
||||
} else {
|
||||
toast.error('请先在选项页面设置ApiKey!')
|
||||
}
|
||||
}
|
||||
}, [addAskTask, dispatch, envData.aiType, envData.apiKey, envData.askEnabled, envData.geminiApiKey, searchText, segments])
|
||||
|
||||
// service
|
||||
useKeyService()
|
||||
|
||||
// 自动滚动
|
||||
useEffect(() => {
|
||||
if (checkAutoScroll && curOffsetTop && autoScroll && !needScroll) {
|
||||
if (bodyRef.current.scrollTop <= curOffsetTop - bodyRef.current.offsetTop - (totalHeight-160) + (floatKeyPointsSegIdx != null ? 100 : 0) ||
|
||||
bodyRef.current.scrollTop >= curOffsetTop - bodyRef.current.offsetTop - 40 - 10
|
||||
) {
|
||||
dispatch(setNeedScroll(true))
|
||||
dispatch(setCheckAutoScroll(false))
|
||||
console.debug('need scroll')
|
||||
}
|
||||
}
|
||||
}, [autoScroll, checkAutoScroll, curOffsetTop, dispatch, floatKeyPointsSegIdx, needScroll, totalHeight])
|
||||
|
||||
return <div className='relative'>
|
||||
{/* title */}
|
||||
<div className='absolute top-1 left-6 flex-center gap-1'>
|
||||
<AiOutlineAim className='cursor-pointer' onClick={posCallback} title='滚动到视频位置'/>
|
||||
{segments != null && segments.length > 0 &&
|
||||
<MdExpand className={classNames('cursor-pointer', foldAll ? 'text-accent' : '')} onClick={onFoldAll}
|
||||
title='展开/折叠全部'/>}
|
||||
</div>
|
||||
<div className='flex justify-center'>
|
||||
<div className='tabs'>
|
||||
<a className={classNames('tab tab-sm tab-bordered', !compact && 'tab-active')}
|
||||
onClick={normalCallback}>列表视图</a>
|
||||
<a className={classNames('tab tab-sm tab-bordered', compact && 'tab-active')}
|
||||
onClick={compactCallback}>文章视图</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className='absolute top-1 right-6'>
|
||||
{translateEnable && <div className='tooltip tooltip-left cursor-pointer' data-tip='点击切换自动翻译'
|
||||
onClick={toggleAutoTranslateCallback}>
|
||||
<RiTranslate className={autoTranslate ? 'text-accent' : ''}/>
|
||||
</div>}
|
||||
{summarizeEnable &&
|
||||
<div className='tooltip tooltip-left cursor-pointer z-[100] ml-2' data-tip='总结全部' onClick={onSummarizeAll}>
|
||||
<FaClipboardList/>
|
||||
</div>}
|
||||
{noVideo && <div className='tooltip tooltip-left ml-2' data-tip='当前浏览器不支持视频跳转'>
|
||||
<IoWarning className='text-warning'/>
|
||||
</div>}
|
||||
</div>
|
||||
|
||||
{/* search */}
|
||||
{showSearchInput && <div className='px-2 py-1 flex flex-col relative'>
|
||||
<input type='text' className='input input-xs bg-base-200' placeholder={searchPlaceholder} value={searchText} onChange={onSearchTextChange} onKeyDown={e => {
|
||||
// enter
|
||||
if (e.key === 'Enter') {
|
||||
if (!inputting) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
onAsk()
|
||||
dispatch(setSearchText(''))
|
||||
}
|
||||
}
|
||||
}}/>
|
||||
{searchText && <button className='absolute top-1 right-2 btn btn-ghost btn-xs btn-circle text-base-content/75' onClick={onClearSearchText}><AiOutlineCloseCircle/></button>}
|
||||
</div>}
|
||||
|
||||
{/* auto scroll btn */}
|
||||
{!autoScroll && <div
|
||||
className='absolute z-[999] top-[96px] right-6 tooltip tooltip-left cursor-pointer rounded-full bg-primary/25 hover:bg-primary/75 text-primary-content p-1.5 text-xl'
|
||||
data-tip='开启自动滚动'
|
||||
onClick={onEnableAutoScroll}>
|
||||
<FaRegArrowAltCircleDown className={autoScroll ? 'text-accent' : ''}/>
|
||||
</div>}
|
||||
|
||||
{/* body */}
|
||||
<div ref={bodyRef} onWheel={onWheel}
|
||||
className={classNames('flex flex-col gap-1.5 overflow-y-auto select-text scroll-smooth', floatKeyPointsSegIdx != null && 'pb-[100px]')}
|
||||
style={{
|
||||
height: `${totalHeight - HEADER_HEIGHT - TITLE_HEIGHT - (showSearchInput ? SEARCH_BAR_HEIGHT : 0)}px`
|
||||
}}
|
||||
>
|
||||
{/* asks */}
|
||||
{asks.map(ask => <Ask key={ask.id} ask={ask}/>)}
|
||||
|
||||
{/* segments */}
|
||||
{segments?.map((segment, segmentIdx) => <SegmentCard key={segment.startIdx} segment={segment}
|
||||
segmentIdx={segmentIdx} bodyRef={bodyRef}/>)}
|
||||
|
||||
{/* tip */}
|
||||
<div className='text-sm font-semibold text-center'>快捷键提示</div>
|
||||
<ul className='list-disc text-sm desc pl-5'>
|
||||
<li>单击字幕跳转，双击字幕跳转+切换暂停。</li>
|
||||
<li>alt+单击字幕复制单条字幕。</li>
|
||||
<li>上下方向键来移动当前字幕(可先点击字幕使焦点在字幕列表内)。</li>
|
||||
</ul>
|
||||
|
||||
{/* <div className='flex flex-col items-center text-center pt-1 pb-2'> */}
|
||||
{/* <div className='font-semibold text-accent'>💡<span className='underline underline-offset-4'>提示</span>💡</div> */}
|
||||
{/* <div className='text-sm desc px-2'>可以尝试将<span className='text-amber-600 font-semibold'>概览</span>生成的内容粘贴到<span */}
|
||||
{/* className='text-secondary/75 font-semibold'>视频评论</span>里，发布后看看有什么效果🥳 */}
|
||||
{/* </div> */}
|
||||
{/* {(segments?.length ?? 0) > 0 && <button className='mt-1.5 btn btn-xs btn-info' */}
|
||||
{/* onClick={onCopy}>点击复制生成的{SUMMARIZE_TYPES[curSummaryType].name}<RiFileCopy2Line/> */}
|
||||
{/* </button>} */}
|
||||
{/* </div> */}
|
||||
<div className='flex flex-col'>
|
||||
{/* <div className='flex flex-col items-center text-center py-2 mx-4 border-t border-t-base-300'> */}
|
||||
{/* <div className='font-semibold text-accent flex items-center gap-1'><img src='/bibigpt.png' */}
|
||||
{/* alt='BibiGPT logo' */}
|
||||
{/* className='w-8 h-8'/>BibiGPT */}
|
||||
{/* </div> */}
|
||||
{/* <div className='text-sm px-2 desc'>这是<span className='text-amber-600 font-semibold text-base'>网页</span>版的字幕列表，支持<span */}
|
||||
{/* className='font-semibold'>任意</span>视频提取字幕总结（包括没有字幕的视频） */}
|
||||
{/* </div> */}
|
||||
{/* <div className='flex gap-2'> */}
|
||||
{/* <a title='BibiGPT' href='https://bibigpt.co/r/bilibili' */}
|
||||
{/* onClick={(e) => { */}
|
||||
{/* e.preventDefault() */}
|
||||
{/* openUrl('https://bibigpt.co/r/bilibili') */}
|
||||
{/* }} className='link text-sm text-accent'>✨ BibiGPT ✨</a> */}
|
||||
{/* </div> */}
|
||||
{/* </div> */}
|
||||
<div className='flex flex-col items-center text-center py-2 mx-4 border-t border-t-base-300'>
|
||||
<div className='font-semibold text-accent flex items-center gap-1'><img src='/youtube-caption.png'
|
||||
alt='youtube caption logo'
|
||||
className='w-8 h-8'/>YouTube Caption
|
||||
</div>
|
||||
<div className='text-sm px-2 desc'>这是<span className='text-amber-600 font-semibold text-base'>YouTube</span>版的字幕列表
|
||||
</div>
|
||||
<div className='flex gap-2'>
|
||||
<a title='Chrome商店' href='https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf'
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
openUrl('https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf')
|
||||
}} className='link text-sm text-accent'>Chrome商店</a>
|
||||
<a title='Edge商店'
|
||||
href='https://microsoftedge.microsoft.com/addons/detail/galeejdehabppfgooagmkclpppnbccpc'
|
||||
onClick={e => {
|
||||
e.preventDefault()
|
||||
openUrl('https://microsoftedge.microsoft.com/addons/detail/galeejdehabppfgooagmkclpppnbccpc')
|
||||
}} className='link text-sm text-accent'>Edge商店</a>
|
||||
<a title='Crx搜搜(国内可访问)'
|
||||
href='https://www.crxsoso.com/webstore/detail/fiaeclpicddpifeflpmlgmbjgaedladf'
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
openUrl('https://www.crxsoso.com/webstore/detail/fiaeclpicddpifeflpmlgmbjgaedladf')
|
||||
}} className='link text-sm text-accent'>Crx搜搜(国内可访问)</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className='flex flex-col items-center text-center py-2 mx-4 border-t border-t-base-300'> */}
|
||||
{/* <div className='font-semibold text-accent flex items-center gap-1'><img src='/my-article-summarizer.png' */}
|
||||
{/* alt='My Article Summarizer logo' */}
|
||||
{/* className='w-8 h-8'/>My Article Summarizer */}
|
||||
{/* </div> */}
|
||||
{/* <div className='text-sm px-2 desc'>网页文章总结（有每日免费额度，无需apikey）。</div> */}
|
||||
{/* <div className='flex gap-2'> */}
|
||||
{/* <a title='Chrome商店' href='https://chromewebstore.google.com/detail/my-article-summarizer/nanlpakfialleijdidafldapoifndngn' */}
|
||||
{/* onClick={(e) => { */}
|
||||
{/* e.preventDefault() */}
|
||||
{/* openUrl('https://chromewebstore.google.com/detail/my-article-summarizer/nanlpakfialleijdidafldapoifndngn') */}
|
||||
{/* }} className='link text-sm text-accent'>Chrome商店</a> */}
|
||||
{/* <a title='Crx搜搜(国内可访问)' */}
|
||||
{/* href='https://www.crxsoso.com/webstore/detail/nanlpakfialleijdidafldapoifndngn' */}
|
||||
{/* onClick={(e) => { */}
|
||||
{/* e.preventDefault() */}
|
||||
{/* openUrl('https://www.crxsoso.com/webstore/detail/nanlpakfialleijdidafldapoifndngn') */}
|
||||
{/* }} className='link text-sm text-accent'>Crx搜搜(国内可访问)</a> */}
|
||||
{/* </div> */}
|
||||
{/* </div> */}
|
||||
</div>
|
||||
<div className='p-2'><RateExtension/></div>
|
||||
</div>
|
||||
{/* recommend */}
|
||||
{/* <div className='p-0.5' style={{ */}
|
||||
{/* height: `${RECOMMEND_HEIGHT}px` */}
|
||||
{/* }}> */}
|
||||
{/* {recommendIdx === 0 && <div className='flex items-center gap-1.5 rounded shadow-sm bg-base-200/10'> */}
|
||||
{/* <a className='link link-accent link-hover font-semibold text-sm flex items-center' onClick={(e) => { */}
|
||||
{/* e.preventDefault() */}
|
||||
{/* openUrl('https://bibigpt.co/r/bilibili') */}
|
||||
{/* }}><img src='/bibigpt.png' */}
|
||||
{/* alt='BibiGPT logo' */}
|
||||
{/* className='w-8 h-8'/>✨ BibiGPT ✨</a> */}
|
||||
{/* <span className='text-sm desc'>支持任意视频的网页版总结。</span> */}
|
||||
{/* </div>} */}
|
||||
{/* {recommendIdx === 1 && <div className='flex items-center gap-1 rounded shadow-sm bg-base-200/10'> */}
|
||||
{/* <a className='link link-accent link-hover font-semibold text-sm flex items-center' onClick={(e) => { */}
|
||||
{/* e.preventDefault() */}
|
||||
{/* openUrl('https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf') */}
|
||||
{/* }}><img src='/youtube-caption.png' */}
|
||||
{/* alt='youtube caption logo' */}
|
||||
{/* className='w-8 h-8'/>YouTube Caption</a> */}
|
||||
{/* <span className='text-sm desc'>YouTube版的字幕列表。</span> */}
|
||||
{/* </div>} */}
|
||||
{/* {recommendIdx === 2 && <div className='flex items-center gap-1 rounded shadow-sm bg-base-200/10'> */}
|
||||
{/* <a className='link link-accent link-hover font-semibold text-sm flex items-center' onClick={(e) => { */}
|
||||
{/* e.preventDefault() */}
|
||||
{/* openUrl('https://chromewebstore.google.com/detail/nanlpakfialleijdidafldapoifndngn') */}
|
||||
{/* }}><img src='/my-article-summarizer.png' */}
|
||||
{/* alt='My Article Summarizer logo' */}
|
||||
{/* className='w-8 h-8'/>My Article Summarizer</a> */}
|
||||
{/* <span className='text-sm desc'>网页文章总结。</span> */}
|
||||
{/* </div>} */}
|
||||
{/* {recommendIdx === 3 && <div className='flex items-center gap-1 rounded shadow-sm bg-base-200/10'> */}
|
||||
{/* <a className='link link-accent link-hover font-semibold text-sm flex items-center' onClick={(e) => { */}
|
||||
{/* e.preventDefault() */}
|
||||
{/* openUrl('https://api.openai-up.com/register?aff=varM') */}
|
||||
{/* }}><img src='/openai-up.ico' */}
|
||||
{/* alt='Openai Up logo' */}
|
||||
{/* className='w-8 h-8'/>Openai代理</a> */}
|
||||
{/* <span className='text-sm desc flex items-center'>目前价格不到官方的6折<FaGripfire */}
|
||||
{/* className='text-amber-600'/></span> */}
|
||||
{/* </div>} */}
|
||||
{/* </div> */}
|
||||
</div>
|
||||
}
|
||||
|
||||
export default Body
|
||||
Reference in New Issue
Block a user