Merge pull request #492 from storytold/feature/revertDefault_wrapper_component

Feature/revert default button component

packages/fakeyou.com/public/locales/bn/General.json

@@ -0,0 +1,18 @@
+{
+  "button": {
+    "tooltip": {
+      "revert": "ডিফল্ট মান প্রত্যাবর্তন করুন"
+    }
+  },
+  "input": {
+    "placeholder": {
+      "randomSeed": "স্বয়ংক্রিয়ভাবে উত্পন্ন"
+    }
+  },
+  "segButton": {
+    "label": {
+      "customSeed": "কাস্টম",
+      "randomSeed": "এলোমেলো"
+    }
+  }
+}

packages/fakeyou.com/public/locales/de/General.json

@@ -0,0 +1,18 @@
+{
+  "button": {
+    "tooltip": {
+      "revert": "Auf den Standardwert zurücksetzen"
+    }
+  },
+  "input": {
+    "placeholder": {
+      "randomSeed": "Automatisch erzeugt"
+    }
+  },
+  "segButton": {
+    "label": {
+      "customSeed": "Brauch",
+      "randomSeed": "Zufällig"
+    }
+  }
+}

packages/fakeyou.com/public/locales/en/General.json

@@ -0,0 +1,18 @@
+{
+  "button": {
+    "tooltip": {
+      "revert": "Revert to Default Value"
+    }
+  },
+  "input": {
+    "placeholder": {
+      "randomSeed": "Auto Generated"
+    }
+  },
+  "segButton": {
+    "label": {
+      "customSeed": "Custom",
+      "randomSeed": "Random"
+    }
+  }
+}

packages/fakeyou.com/public/locales/es/General.json

@@ -0,0 +1,18 @@
+{
+  "button": {
+    "tooltip": {
+      "revert": "Volver al valor predeterminado"
+    }
+  },
+  "input": {
+    "placeholder": {
+      "randomSeed": "Generada automáticamente"
+    }
+  },
+  "segButton": {
+    "label": {
+      "customSeed": "Costumbre",
+      "randomSeed": "Aleatorio"
+    }
+  }
+}

packages/fakeyou.com/public/locales/fr/General.json

@@ -0,0 +1,18 @@
+{
+  "button": {
+    "tooltip": {
+      "revert": "Revenir à la valeur par défaut"
+    }
+  },
+  "input": {
+    "placeholder": {
+      "randomSeed": "Généré automatiquement"
+    }
+  },
+  "segButton": {
+    "label": {
+      "customSeed": "Coutume",
+      "randomSeed": "Aléatoire"
+    }
+  }
+}

packages/fakeyou.com/public/locales/hi/General.json

@@ -0,0 +1,18 @@
+{
+  "button": {
+    "tooltip": {
+      "revert": "डिफ़ॉल्ट मान पर वापस लौटें"
+    }
+  },
+  "input": {
+    "placeholder": {
+      "randomSeed": "खुद से पैदा हुआ"
+    }
+  },
+  "segButton": {
+    "label": {
+      "customSeed": "रिवाज़",
+      "randomSeed": "यादृच्छिक"
+    }
+  }
+}

packages/fakeyou.com/public/locales/id/General.json

@@ -0,0 +1,18 @@
+{
+  "button": {
+    "tooltip": {
+      "revert": "Kembalikan ke Nilai Default"
+    }
+  },
+  "input": {
+    "placeholder": {
+      "randomSeed": "Dihasilkan Secara Otomatis"
+    }
+  },
+  "segButton": {
+    "label": {
+      "customSeed": "Kebiasaan",
+      "randomSeed": "Acak"
+    }
+  }
+}

packages/fakeyou.com/public/locales/it/General.json

@@ -0,0 +1,18 @@
+{
+  "button": {
+    "tooltip": {
+      "revert": "Ripristina il valore predefinito"
+    }
+  },
+  "input": {
+    "placeholder": {
+      "randomSeed": "Generato automaticamente"
+    }
+  },
+  "segButton": {
+    "label": {
+      "customSeed": "Costume",
+      "randomSeed": "Casuale"
+    }
+  }
+}

packages/fakeyou.com/public/locales/ja/General.json

@@ -0,0 +1,18 @@
+{
+  "button": {
+    "tooltip": {
+      "revert": "デフォルト値に戻す"
+    }
+  },
+  "input": {
+    "placeholder": {
+      "randomSeed": "自動生成"
+    }
+  },
+  "segButton": {
+    "label": {
+      "customSeed": "カスタム",
+      "randomSeed": "ランダム"
+    }
+  }
+}

packages/fakeyou.com/public/locales/ko/General.json

@@ -0,0 +1,18 @@
+{
+  "button": {
+    "tooltip": {
+      "revert": "기본값으로 되돌리기"
+    }
+  },
+  "input": {
+    "placeholder": {
+      "randomSeed": "자동으로 생성됨"
+    }
+  },
+  "segButton": {
+    "label": {
+      "customSeed": "관습",
+      "randomSeed": "무작위의"
+    }
+  }
+}

packages/fakeyou.com/public/locales/pt/General.json

@@ -0,0 +1,18 @@
+{
+  "button": {
+    "tooltip": {
+      "revert": "Reverter para o valor padrão"
+    }
+  },
+  "input": {
+    "placeholder": {
+      "randomSeed": "Gerado automaticamente"
+    }
+  },
+  "segButton": {
+    "label": {
+      "customSeed": "Personalizado",
+      "randomSeed": "Aleatório"
+    }
+  }
+}

packages/fakeyou.com/public/locales/ru/General.json

@@ -0,0 +1,18 @@
+{
+  "button": {
+    "tooltip": {
+      "revert": "Вернуться к значению по умолчанию"
+    }
+  },
+  "input": {
+    "placeholder": {
+      "randomSeed": "Автоматически генерируется"
+    }
+  },
+  "segButton": {
+    "label": {
+      "customSeed": "Обычай",
+      "randomSeed": "Случайный"
+    }
+  }
+}

packages/fakeyou.com/public/locales/th/General.json

@@ -0,0 +1,18 @@
+{
+  "button": {
+    "tooltip": {
+      "revert": "เปลี่ยนกลับเป็นค่าเริ่มต้น"
+    }
+  },
+  "input": {
+    "placeholder": {
+      "randomSeed": "สร้างโดยอัตโนมัติ"
+    }
+  },
+  "segButton": {
+    "label": {
+      "customSeed": "กำหนดเอง",
+      "randomSeed": "สุ่ม"
+    }
+  }
+}

packages/fakeyou.com/public/locales/tr/General.json

@@ -0,0 +1,18 @@
+{
+  "button": {
+    "tooltip": {
+      "revert": "Varsayılan Değere Dön"
+    }
+  },
+  "input": {
+    "placeholder": {
+      "randomSeed": "Otomatik Olarak Oluşturuldu"
+    }
+  },
+  "segButton": {
+    "label": {
+      "customSeed": "Gelenek",
+      "randomSeed": "Rastgele"
+    }
+  }
+}

packages/fakeyou.com/public/locales/vi/General.json

@@ -0,0 +1,18 @@
+{
+  "button": {
+    "tooltip": {
+      "revert": "Hoàn nguyên về giá trị mặc định"
+    }
+  },
+  "input": {
+    "placeholder": {
+      "randomSeed": "Tự động tạo ra"
+    }
+  },
+  "segButton": {
+    "label": {
+      "customSeed": "Phong tục",
+      "randomSeed": "Ngẫu nhiên"
+    }
+  }
+}

packages/fakeyou.com/public/locales/zh-Hans/General.json

@@ -0,0 +1,18 @@
+{
+  "button": {
+    "tooltip": {
+      "revert": "恢复默认值"
+    }
+  },
+  "input": {
+    "placeholder": {
+      "randomSeed": "自动生成"
+    }
+  },
+  "segButton": {
+    "label": {
+      "customSeed": "风俗",
+      "randomSeed": "随机的"
+    }
+  }
+}

packages/fakeyou.com/src/components/common/ButtonRevertToDefault/ButtonRevertToDefault.tsx

@@ -0,0 +1,44 @@
+import React, { useRef } from 'react';
+
+import { useLocalize } from 'hooks';
+import { Button } from  "components/common";
+import { faRotateLeft } from '@fortawesome/pro-solid-svg-icons';
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+
+export type ButtonRevertToDefaultProps = {
+  t?: Function;
+  initialValue: number | string
+  icon?: IconDefinition
+  tooltip?: string;
+  onRevert: (iv: any) => void
+}
+
+export default function ButtonRevertToDefault({
+  t:tProps,
+  initialValue: ivProps,
+  icon,
+  tooltip,
+  onRevert
+}: ButtonRevertToDefaultProps){
+  const initialValue = useRef(ivProps);
+  const {t:tHook} = useLocalize("General");
+  const t = tProps? tProps: tHook;
+
+  return(
+      <Button
+        tooltip={tooltip || t("button.tooltip.revert")}
+        icon={icon || faRotateLeft}
+        onClick={()=>{
+          onRevert(initialValue.current);
+        }}
+        style={{
+          width:"1.5rem",
+          height:"1.5rem",
+          padding: "10px",
+          marginLeft: "10px",
+        }}
+      />
+  );
+
+};

packages/fakeyou.com/src/components/common/ButtonRevertToDefault/index.tsx

@@ -0,0 +1 @@
+export { default } from "./ButtonRevertToDefault";

packages/fakeyou.com/src/components/common/InputSeed/inputSeed.tsx

@@ -1,4 +1,5 @@
 import React, {useState, useEffect, useCallback, memo} from 'react';
+
 import { useLocalize } from 'hooks';
 import {
   Input,
@@ -18,7 +19,7 @@ export default memo (function InputSeed({
   initialValue?: string;
   onChange: (newSeed: string)=>void;
 }){
-  const {t:tHook} = useLocalize("SeedInput");
+  const {t:tHook} = useLocalize("General");
   const t = tProps ? tProps : tHook;
   const[{firstLoad, inputType, seedValue}, setState] = useState<{
     firstLoad: boolean;
@@ -67,8 +68,8 @@ export default memo (function InputSeed({
       setNewRandomSeed(inputType);
   }
   const seedOpts = [
-    { label: t("random"), value: "random" },
-    { label: t("custom"), value: "custom" },
+    { label: t("segButton.label.randomSeed"), value: "random" },
+    { label: t("segButton.label.customSeed"), value: "custom" },
   ];
 
   return(
@@ -85,7 +86,7 @@ export default memo (function InputSeed({
         />
         <Input
           className="numberInputNoArrows"
-          placeholder={t("randomPlaceholder")}
+          placeholder={t("input.placeholder.randomSeed")}
           value={inputType === "custom" ? seedValue : ""}
           onChange={handleSeedChange}
           onBlur={handleOnBlur}

packages/fakeyou.com/src/components/common/NumberSliderV2/NumberSliderV2.scss

@@ -1,9 +1,6 @@
 @import "scss/colours.scss";
 
 .fy-number-slider {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
 
   .fy-number-slider-range {
     flex-grow: 1;

packages/fakeyou.com/src/components/common/NumberSliderV2/NumberSliderV2.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { Range } from "react-range";
 import Tippy from "@tippyjs/react";
-import { Label } from "components/common";
+import { ButtonRevertToDefault, Label } from "components/common";
+import { ButtonRevertToDefaultProps } from "../ButtonRevertToDefault/ButtonRevertToDefault";
 import "./NumberSliderV2.scss";
 
-interface Props {
+interface Props{
   label?: string;
   thumbTip?: string;
   min: number;
@@ -13,6 +14,8 @@ interface Props {
   initialValue?: number;
   onChange?: (x:number) => void;
   required?: boolean;
+  withRevert?: boolean;
+  propsButtonRevertToDefault?: ButtonRevertToDefaultProps;
 }
 
 function roundToStep(x:number, step:number){
@@ -53,7 +56,10 @@ export default function NumberSlider({
   onChange: onChangeCallback,
   required,
   initialValue: initialValueProps,
+  withRevert = false,
+  propsButtonRevertToDefault,
 }: Props) {
+
   const step = stepProps && stepProps <= max-min ? stepProps 
     : max-min >= 1 ? 1 : (max-min) / 10;
   const initialValue = initialValueProps !== undefined && initialValueProps <= max && initialValueProps >= min ? initialValueProps
@@ -65,11 +71,13 @@ export default function NumberSlider({
   function handleRangeOnChange(rangeValue: number[]){
     if(onChangeCallback)onChangeCallback(rangeValue[0])
   }
-
+  function handleRevert(iv:number){
+    if(onChangeCallback)onChangeCallback(iv) 
+  }
   return (
     <div>
       <Label {...{ label, required }} />
-      <div className="fy-number-slider">
+      <div className="d-flex g-2 align-items-center fy-number-slider">
         <input 
           className="fy-number-slider-value"
           type="number"
@@ -87,6 +95,14 @@ export default function NumberSlider({
             }}
           />
         </div>
+        {withRevert && 
+          <ButtonRevertToDefault
+            {...propsButtonRevertToDefault}
+            initialValue={initialValue}
+            onRevert={handleRevert}
+          />
+        }
+        
       </div>
     </div>
   );

packages/fakeyou.com/src/components/common/index.tsx

@@ -3,6 +3,7 @@ import AudioBlobPreview from "./AudioBlobPreview";
 import AudioInput from "./AudioInput";
 import Badge from "./Badge";
 import Button from "./Button";
+import ButtonRevertToDefault from "./ButtonRevertToDefault";
 import Checkbox from "./Checkbox";
 import Container from "./Container";
 import CoverImageInput from "./CoverImageInput";
@@ -46,6 +47,7 @@ export {
   AudioInput,
   Badge,
   Button,
+  ButtonRevertToDefault,
   Checkbox,
   Container,
   CoverImageInput,

packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionAdvanceOptions.tsx

@@ -1,5 +1,8 @@
 import React, { memo } from 'react'
-import { NumberSliderV2, Checkbox } from 'components/common'
+import {
+  Checkbox,
+  NumberSliderV2,
+} from 'components/common'
 import { WorkflowValuesType } from './helpers';
 
 export const AdvanceOptionsInitialValues = {
@@ -107,6 +110,7 @@ export default memo( function SectionAdvanceOptions({
           <NumberSliderV2 {...{
             min: 1, max: 10, step: 1,
             initialValue: wfVal.lcmCFG,
+            withRevert: true,
             label: "LCM CFG",
             thumbTip: "LCM CFG",
             onChange: (val)=>{handleOnChange("lcmCFG", val)}