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