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',
width: 750,
height: 420,
theme: '#00D3FF',
}}
onProgressMouseDown={onProgressMouseDown}
onPlay={onPlay}

@ -1,3 +1,6 @@
body {
--JoL-theme: red;
}
.container {
display: flex;
align-items: center;
@ -35,9 +38,8 @@
// checked状态时背景颜色改变
.switch:checked {
background-color: red;
background-color: var(--JoL-theme);
}
// checked状态时按钮位置改变
.switch:checked::after {
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 { defaultTheme } from '@/core/config';
export interface switchType {
sole: string;
label: string;
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 refs = useRef<HTMLInputElement>(null!);
const switchChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
const status = e.target.value === 'yes' ? 'no' : 'yes';
setOn(status);
onChange && onChange(status);
};
useEffect(() => {
refs.current.style.setProperty('--JoL-theme', theme ? theme : defaultTheme);
}, [theme]);
const render = useMemo(
() => (
<div className={style.container}>
@ -21,6 +29,7 @@ const Index: FC<switchType> = function Index({ sole, label, onChange }) {
{label}
</label>
<input
ref={refs}
className={style.switch}
type="checkbox"
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 Switch from '@/components/switch';
import { FlowContext } from '@/core/context';
import './index.scss';
export interface SetType {
@ -8,6 +10,10 @@ export interface SetType {
}
const Set: FC<SetType> = memo(function Set({ switchChange }) {
const reviceProps = useContext(FlowContext);
const { theme } = reviceProps.propsAttributes!;
const [isShow, setIsShow] = useState<boolean>(false);
return (
<div
@ -23,10 +29,16 @@ const Set: FC<SetType> = memo(function Set({ switchChange }) {
sole="lights"
label="关灯"
onChange={(e: string) => switchChange(e, 'lights')}
theme={theme}
/>
</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>
</ul>
</div>

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

@ -172,7 +172,7 @@ const Index = memo(function Index(props) {
return (
<div
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-buffered" style={{ width: `${calculateBufferedPercent}%` }}></div>

Loading…
Cancel
Save