master
lgf 3 years ago
parent eb5b02f4c2
commit 2abb5e7095
  1. 1
      src/appComponent.tsx
  2. 6
      src/components/switch/index.module.scss
  3. 15
      src/components/switch/index.tsx
  4. 16
      src/core/controls/set.tsx
  5. 4
      src/core/progress/index.scss
  6. 2
      src/core/progress/index.tsx

@ -39,6 +39,7 @@ const AppComponent = memo(function AppComponent(props) {
'https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/test/file/2021/07/01/haiwang.mp4', 'https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/test/file/2021/07/01/haiwang.mp4',
width: 750, width: 750,
height: 420, height: 420,
theme: '#00D3FF',
}} }}
onProgressMouseDown={onProgressMouseDown} onProgressMouseDown={onProgressMouseDown}
onPlay={onPlay} onPlay={onPlay}

@ -1,3 +1,6 @@
body {
--JoL-theme: red;
}
.container { .container {
display: flex; display: flex;
align-items: center; align-items: center;
@ -35,9 +38,8 @@
// checked状态时背景颜色改变 // checked状态时背景颜色改变
.switch:checked { .switch:checked {
background-color: red; background-color: var(--JoL-theme);
} }
// checked状态时按钮位置改变 // checked状态时按钮位置改变
.switch:checked::after { .switch:checked::after {
left: 50%; left: 50%;

@ -1,19 +1,27 @@
import React, { memo, FC, useMemo, useState } from 'react'; import React, { useEffect, FC, useMemo, useState, useRef } from 'react';
import style from './index.module.scss'; import style from './index.module.scss';
import { defaultTheme } from '@/core/config';
export interface switchType { export interface switchType {
sole: string; sole: string;
label: string; label: string;
onChange?: Function; onChange?: Function;
theme?: string;
} }
const Index: FC<switchType> = function Index({ sole, label, onChange }) { const Index: FC<switchType> = function Index({ sole, label, onChange, theme }) {
const [on, setOn] = useState('no'); const [on, setOn] = useState('no');
const refs = useRef<HTMLInputElement>(null!);
const switchChange: React.ChangeEventHandler<HTMLInputElement> = (e) => { const switchChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
const status = e.target.value === 'yes' ? 'no' : 'yes'; const status = e.target.value === 'yes' ? 'no' : 'yes';
setOn(status); setOn(status);
onChange && onChange(status); onChange && onChange(status);
}; };
useEffect(() => {
refs.current.style.setProperty('--JoL-theme', theme ? theme : defaultTheme);
}, [theme]);
const render = useMemo( const render = useMemo(
() => ( () => (
<div className={style.container}> <div className={style.container}>
@ -21,6 +29,7 @@ const Index: FC<switchType> = function Index({ sole, label, onChange }) {
{label} {label}
</label> </label>
<input <input
ref={refs}
className={style.switch} className={style.switch}
type="checkbox" type="checkbox"
id={sole} id={sole}

@ -1,6 +1,8 @@
import React, { memo, FC, useState } from 'react'; import React, { memo, FC, useState, useContext } from 'react';
import Broadcast from '@/components/svgIcon'; import Broadcast from '@/components/svgIcon';
import Switch from '@/components/switch'; import Switch from '@/components/switch';
import { FlowContext } from '@/core/context';
import './index.scss'; import './index.scss';
export interface SetType { export interface SetType {
@ -8,6 +10,10 @@ export interface SetType {
} }
const Set: FC<SetType> = memo(function Set({ switchChange }) { const Set: FC<SetType> = memo(function Set({ switchChange }) {
const reviceProps = useContext(FlowContext);
const { theme } = reviceProps.propsAttributes!;
const [isShow, setIsShow] = useState<boolean>(false); const [isShow, setIsShow] = useState<boolean>(false);
return ( return (
<div <div
@ -23,10 +29,16 @@ const Set: FC<SetType> = memo(function Set({ switchChange }) {
sole="lights" sole="lights"
label="关灯" label="关灯"
onChange={(e: string) => switchChange(e, 'lights')} onChange={(e: string) => switchChange(e, 'lights')}
theme={theme}
/> />
</li> </li>
<li> <li>
<Switch sole="loop" label="循环" onChange={(e: string) => switchChange(e, 'loop')} /> <Switch
sole="loop"
label="循环"
theme={theme}
onChange={(e: string) => switchChange(e, 'loop')}
/>
</li> </li>
</ul> </ul>
</div> </div>

@ -53,8 +53,8 @@
right: -5px; right: -5px;
top: -50%; top: -50%;
margin-top: -1px; margin-top: -1px;
width: 10px; width: 12px;
height: 10px; height: 12px;
border-radius: 50%; border-radius: 50%;
// background-color: #fbc100; // background-color: #fbc100;
} }

@ -172,7 +172,7 @@ const Index = memo(function Index(props) {
return ( return (
<div <div
className="progress-container" className="progress-container"
style={{ opacity: reviceProps.videoFlow!.isControl ? '1' : '0' }} // style={{ opacity: reviceProps.videoFlow!.isControl ? '1' : '0' }}
> >
<div className="progress-bg" ref={progressBgRef}> <div className="progress-bg" ref={progressBgRef}>
<div className="progress-buffered" style={{ width: `${calculateBufferedPercent}%` }}></div> <div className="progress-buffered" style={{ width: `${calculateBufferedPercent}%` }}></div>

Loading…
Cancel
Save