From 826dde2dfa2870d419e03c8f06b0ea78a099073f Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Fri, 12 May 2023 02:27:15 +0700
Subject: [PATCH] pitch shhift slider ui

---
 .../fakeyou.com/src/scss/site-refresh.scss    |  28 +++++
 .../vc/vc_model_list/VcModelListPage.tsx      |  33 ++++-
 .../components/PitchShiftComponent.tsx        | 116 ++++++++++++++++++
 3 files changed, 176 insertions(+), 1 deletion(-)
 create mode 100644 packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchShiftComponent.tsx

diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss
index 39869d3a4d..23e543f77b 100644
--- a/packages/fakeyou.com/src/scss/site-refresh.scss
+++ b/packages/fakeyou.com/src/scss/site-refresh.scss
@@ -724,6 +724,10 @@ styles with important tags:
     box-shadow: none;
     cursor: pointer;
 
+    &.no-padding {
+      padding-left: 0.5rem;
+    }
+
     &:hover {
       background-color: lighten($input-dark, 5%);
       border-color: lighten($input-dark, 5%) !important;
@@ -866,6 +870,13 @@ styles with important tags:
     fill: lighten($secondary, 5%);
   }
 
+  .tippy-box[data-theme~="range-slider"] {
+    margin-top: -5px;
+    background-color: lighten($panel, 10%);
+    color: $white;
+    font-size: 13px !important;
+  }
+
   .sliding-content {
     overflow: hidden;
     opacity: 0;
@@ -1269,6 +1280,19 @@ styles with important tags:
   .alert-info {
     font-size: 14px;
   }
+
+  .range-slider-value {
+    text-align: center;
+    max-width: 50px;
+    padding: 6px;
+    border-radius: 8px;
+    pointer-events: none;
+    background-color: lighten($panel, 5%) !important;
+    border-width: 1px;
+    border-color: rgba(255, 255, 255, 0.12) !important;
+    color: rgba($white, 0.85) !important;
+    font-weight: 500 !important;
+  }
 }
 
 select {
@@ -1404,6 +1428,10 @@ textarea {
       height: 450px;
     }
 
+    .session-vc-section {
+      height: 565px;
+    }
+
     .session-tts-section::-webkit-scrollbar {
       width: 10px;
     }
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx
index bf7bc57f25..134d151ec4 100644
--- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx
@@ -34,6 +34,7 @@ import {
 } from "@storyteller/components/src/jobs/InferenceJob";
 import { SessionVoiceConversionResultsList } from "../../../_common/SessionVoiceConversionResultsList";
 import { Link } from "react-router-dom";
+import PitchShiftComponent from "./components/PitchShiftComponent";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -62,6 +63,7 @@ function VcModelListPage(props: Props) {
 
   const [convertLoading, setConvertLoading] = useState(false);
   const [canConvert, setCanConvert] = useState(false);
+  const [semitones, setSemitones] = useState(0);
 
   const [mediaUploadToken, setMediaUploadToken] = useState<string | undefined>(
     undefined
@@ -174,6 +176,10 @@ function VcModelListPage(props: Props) {
     ev.preventDefault();
   };
 
+  const handlePitchChange = (value: any) => {
+    setSemitones(value);
+  };
+
   const speakButtonClass = convertLoading
     ? "btn btn-primary w-100 disabled"
     : "btn btn-primary w-100";
@@ -287,6 +293,18 @@ function VcModelListPage(props: Props) {
                           </div>
                         </div>
 
+                        <div>
+                          <label className="sub-title">Pitch Shift</label>
+                          <div className="d-flex flex-column gap-3">
+                            <PitchShiftComponent
+                              min={-36}
+                              max={36}
+                              step={1}
+                              value={semitones}
+                              onChange={handlePitchChange}
+                            />
+                          </div>
+                        </div>
                         {/*<div>
                           <label className="sub-title">
                             Or pick from your audio collection (5 files)
@@ -356,6 +374,19 @@ function VcModelListPage(props: Props) {
                           </div>
                         </div>
 
+                        <div>
+                          <label className="sub-title">Pitch Shift</label>
+                          <div className="d-flex flex-column gap-3">
+                            <PitchShiftComponent
+                              min={-36}
+                              max={36}
+                              step={1}
+                              value={semitones}
+                              onChange={handlePitchChange}
+                            />
+                          </div>
+                        </div>
+
                         <div>
                           <label className="sub-title">Convert Audio</label>
 
@@ -388,7 +419,7 @@ function VcModelListPage(props: Props) {
                       />
                       Session V2V Results
                     </h4>
-                    <div className="d-flex flex-column gap-3 session-tts-section">
+                    <div className="d-flex flex-column gap-3 session-tts-section session-vc-section">
                       <SessionVoiceConversionResultsList
                         inferenceJobs={
                           props.inferenceJobsByCategory.get(
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchShiftComponent.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchShiftComponent.tsx
new file mode 100644
index 0000000000..b9072271b3
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchShiftComponent.tsx
@@ -0,0 +1,116 @@
+import React from "react";
+import { Range } from "react-range";
+import Select from "react-select";
+import Tippy from "@tippyjs/react";
+
+interface PitchShiftProps {
+  min: number;
+  max: number;
+  step: number;
+  value: number;
+  onChange: (value: number) => void;
+}
+
+const dropdownFieldClass = {
+  control: (state: any) =>
+    state.isFocused
+      ? "select-search no-padding focused rounded"
+      : "select-search no-padding rounded",
+  option: (state: any) => (state.isFocused ? "select-option" : "select-option"),
+  input: (state: any) => (state.isFocused ? "select-input" : "select-input"),
+  placeholder: (state: any) =>
+    state.isFocused ? "select-placeholder" : "select-placeholder",
+  singleValue: (state: any) =>
+    state.isFocused ? "select-value" : "select-value",
+  menu: (state: any) =>
+    state.isFocused ? "select-container" : "select-container",
+  indicatorSeparator: (state: any) =>
+    state.isFocused ? "select-separator" : "select-separator",
+};
+
+const options = ["CREPE", "Harvest", "DIO"];
+
+function PitchShiftComponent({
+  min,
+  max,
+  step,
+  value,
+  onChange,
+}: PitchShiftProps) {
+  const handleChange = (newValue: number[]) => {
+    onChange(newValue[0]);
+  };
+
+  const renderTrack = ({ props, children }: any) => (
+    <div
+      {...props}
+      style={{
+        ...props.style,
+        height: "6px",
+        width: "100%",
+        backgroundColor: "#ddd",
+        borderRadius: "4px",
+      }}
+    >
+      {children}
+    </div>
+  );
+
+  const renderThumb = ({ props, isDragged }: any) => (
+    <Tippy
+      content="Semitones"
+      placement="bottom"
+      theme="range-slider"
+      arrow={false}
+    >
+      <div
+        {...props}
+        style={{
+          ...props.style,
+          height: "24px",
+          width: "24px",
+          borderRadius: "50%",
+          backgroundColor: "#62627f",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          outline: "none",
+        }}
+      ></div>
+    </Tippy>
+  );
+
+  return (
+    <>
+      <div>
+        <Select
+          value={options[0]} // Controlled components use "value" instead of "defaultValue".
+          options={options}
+          classNames={dropdownFieldClass}
+          placeholder={options[0]}
+          isSearchable={false}
+        />
+      </div>
+      <div className="d-flex gap-3 align-items-center">
+        <div className="flex-grow-1">
+          <Range
+            step={step}
+            min={min}
+            max={max}
+            values={[value]} // Changed from `values` to `[value]`
+            onChange={handleChange}
+            renderTrack={renderTrack}
+            renderThumb={renderThumb}
+          />
+        </div>
+        <input
+          className="form-control range-slider-value"
+          value={value.toFixed(0)}
+          disabled
+        ></input>
+      </div>
+    </>
+  );
+}
+
+export default PitchShiftComponent;