From 2abb5e7095ba8e369d50781b46aae48b8379a547 Mon Sep 17 00:00:00 2001
From: lgf <18827634408@163.com>
Date: Mon, 9 Aug 2021 23:53:21 +0800
Subject: [PATCH] edit style

---
 src/appComponent.tsx                    |  1 +
 src/components/switch/index.module.scss |  6 ++++--
 src/components/switch/index.tsx         | 15 ++++++++++++---
 src/core/controls/set.tsx               | 16 ++++++++++++++--
 src/core/progress/index.scss            |  4 ++--
 src/core/progress/index.tsx             |  2 +-
 6 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/appComponent.tsx b/src/appComponent.tsx
index 32504e2..e59e466 100644
--- a/src/appComponent.tsx
+++ b/src/appComponent.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}
diff --git a/src/components/switch/index.module.scss b/src/components/switch/index.module.scss
index 4766380..45f2672 100644
--- a/src/components/switch/index.module.scss
+++ b/src/components/switch/index.module.scss
@@ -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%;
diff --git a/src/components/switch/index.tsx b/src/components/switch/index.tsx
index a4f5b00..3573313 100644
--- a/src/components/switch/index.tsx
+++ b/src/components/switch/index.tsx
@@ -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}
diff --git a/src/core/controls/set.tsx b/src/core/controls/set.tsx
index 861e280..0d928de 100644
--- a/src/core/controls/set.tsx
+++ b/src/core/controls/set.tsx
@@ -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>
diff --git a/src/core/progress/index.scss b/src/core/progress/index.scss
index c406009..f3f8370 100644
--- a/src/core/progress/index.scss
+++ b/src/core/progress/index.scss
@@ -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;
       }
diff --git a/src/core/progress/index.tsx b/src/core/progress/index.tsx
index fc6c181..b6db17c 100644
--- a/src/core/progress/index.tsx
+++ b/src/core/progress/index.tsx
@@ -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>