lgf
3 years ago
parent
4d81bc138e
commit
6a8566374d
16 changed files with 311 additions and 52 deletions
@ -0,0 +1,102 @@ |
||||
import React, { memo, FC, useState, useContext, useMemo } from 'react'; |
||||
import { defaultTheme, qualityList, qualityListType } from '@/core/config'; |
||||
import { FlowContext } from '@/core/context'; |
||||
import { qualityKey } from '@/interface'; |
||||
import './index.scss'; |
||||
|
||||
export type qualityToggleType = (par: string, key: qualityKey) => void; |
||||
|
||||
export interface QualityType { |
||||
style?: React.CSSProperties; |
||||
videoSrc?: string; |
||||
qualityToggle: qualityToggleType; |
||||
} |
||||
|
||||
export type qualityMerge = qualityListType & { url: string }; |
||||
|
||||
const Quality: FC<QualityType> = memo(function Quality({ style, videoSrc, qualityToggle }) { |
||||
const reviceProps = useContext(FlowContext); |
||||
|
||||
const { theme, quality, language } = reviceProps.propsAttributes!; |
||||
|
||||
const [isShow, setIsShow] = useState<boolean>(false); |
||||
|
||||
const qualitySelectList = useMemo(() => { |
||||
if (quality) { |
||||
return quality |
||||
.map( |
||||
(item) => |
||||
qualityList |
||||
.map((items) => { |
||||
return item.name === items.enName && Object.assign({}, items, { url: item.url }); |
||||
}) |
||||
.filter((item) => item)[0], |
||||
) |
||||
.sort((a, b) => (b && b.id ? b.id : 1) - (a && a.id ? a.id : 1)); |
||||
} |
||||
return []; |
||||
}, [quality]); |
||||
|
||||
const qualityText = useMemo<Partial<qualityMerge>>(() => { |
||||
let text: qualityMerge[] = []; |
||||
if (videoSrc && qualitySelectList) { |
||||
text = (qualitySelectList as qualityMerge[]).filter((item) => item.url === videoSrc); |
||||
} |
||||
return text.length ? text[0] : { key: '360P', enName: 'SD', name: '标清', id: 1 }; |
||||
}, [videoSrc, qualitySelectList]); |
||||
|
||||
const toggle = (url: string, key: qualityKey) => { |
||||
qualityToggle(url, key); |
||||
}; |
||||
return ( |
||||
<div |
||||
className="JoL-multifunction-multiple" |
||||
onClick={(e) => setIsShow((pre) => !pre)} |
||||
onMouseLeave={(e) => [setIsShow(false)]} |
||||
style={style} |
||||
> |
||||
<p> |
||||
{qualityText |
||||
? language && language === 'en' |
||||
? qualityText.enName |
||||
: qualityText.name |
||||
: null} |
||||
</p> |
||||
<div |
||||
className="JoL-multifunction-multiple-container" |
||||
style={{ display: isShow ? 'block' : 'none' }} |
||||
> |
||||
{qualitySelectList && qualitySelectList.length ? ( |
||||
<ul className="JoL-multifunction-multiple-layer"> |
||||
{qualitySelectList.map((item, index) => ( |
||||
<li |
||||
key={index} |
||||
onClick={() => |
||||
toggle(item && item.url ? item.url : '', item && item.key ? item.key : '360P') |
||||
} |
||||
style={{ |
||||
color: |
||||
qualityText.key === (item && item.key ? item.key : null) |
||||
? theme |
||||
? theme |
||||
: defaultTheme |
||||
: '#fff', |
||||
}} |
||||
> |
||||
<p> |
||||
{item && item.name |
||||
? language && language === 'en' |
||||
? item.enName |
||||
: item.name |
||||
: null} |
||||
</p> |
||||
<p>{item && item.key ? item.key : null}</p> |
||||
</li> |
||||
))} |
||||
</ul> |
||||
) : null} |
||||
</div> |
||||
</div> |
||||
); |
||||
}); |
||||
export default Quality; |
||||
Loading…
Reference in new issue