From 42d273d7a649d8dcb7340bcb65a6b86aefd5432b Mon Sep 17 00:00:00 2001 From: dev Date: Tue, 16 Jan 2024 16:42:42 -0500 Subject: [PATCH] attempt to scaffold layout using exiting components --- .../public/locales/bn/SideNav.json | 1 - .../public/locales/de/SideNav.json | 1 - .../public/locales/en/SideNav.json | 1 - .../public/locales/es/SideNav.json | 1 - .../public/locales/fr/SideNav.json | 1 - .../public/locales/hi/SideNav.json | 1 - .../public/locales/id/SideNav.json | 1 - .../public/locales/it/SideNav.json | 1 - .../public/locales/ja/SideNav.json | 1 - .../public/locales/ko/SideNav.json | 1 - .../public/locales/pt/SideNav.json | 1 - .../public/locales/ru/SideNav.json | 1 - .../public/locales/th/SideNav.json | 1 - .../public/locales/tr/SideNav.json | 1 - .../public/locales/vi/SideNav.json | 1 - .../public/locales/zh-Hans/SideNav.json | 1 - .../src/components/layout/SideNav/SideNav.tsx | 2 +- .../v2/view/pages/video_mocap/VideoMocap.tsx | 12 +++-- .../components/tabContentLibrary.tsx | 8 ++- .../components/tabContentUpload.tsx | 26 +++++----- .../uploadFieldVideo/UploadFieldVideo.tsx | 49 +++++++++++++++++++ .../components/uploadFieldVideo/index.tsx | 1 + .../components/uploadFieldVideo/style.scss | 49 +++++++++++++++++++ 23 files changed, 127 insertions(+), 36 deletions(-) create mode 100644 packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/UploadFieldVideo.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/index.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/style.scss diff --git a/packages/fakeyou.com/public/locales/bn/SideNav.json b/packages/fakeyou.com/public/locales/bn/SideNav.json index edb9fd1663..931c70db28 100644 --- a/packages/fakeyou.com/public/locales/bn/SideNav.json +++ b/packages/fakeyou.com/public/locales/bn/SideNav.json @@ -7,7 +7,6 @@ "infoPricing": "মূল্য নির্ধারণ", "logOutButton": "প্রস্থান", "loginButton": "প্রবেশ করুন", - "mocapNetGenerator": "MocapNet জেনারেটর", "profileButton": "প্রোফাইল", "queueFaceAnimator": "অ্যানিমেশন সারিবদ্ধ", "queueRvc": "RVC সারিবদ্ধ", diff --git a/packages/fakeyou.com/public/locales/de/SideNav.json b/packages/fakeyou.com/public/locales/de/SideNav.json index 0a71f629ed..856514e377 100644 --- a/packages/fakeyou.com/public/locales/de/SideNav.json +++ b/packages/fakeyou.com/public/locales/de/SideNav.json @@ -7,7 +7,6 @@ "infoPricing": "Preisgestaltung", "logOutButton": "Ausloggen", "loginButton": "Anmeldung", - "mocapNetGenerator": "MocapNet-Generator", "profileButton": "Profil", "queueFaceAnimator": "Animationen in der Warteschlange", "queueRvc": "RVC in der Warteschlange", diff --git a/packages/fakeyou.com/public/locales/en/SideNav.json b/packages/fakeyou.com/public/locales/en/SideNav.json index 579ef155ea..a2aed1861e 100644 --- a/packages/fakeyou.com/public/locales/en/SideNav.json +++ b/packages/fakeyou.com/public/locales/en/SideNav.json @@ -7,7 +7,6 @@ "infoPricing": "Pricing", "logOutButton": "Log Out", "loginButton": "Login", - "mocapNetGenerator": "MocapNet Generator", "profileButton": "Profile", "queueFaceAnimator": "Animations Queued", "queueRvc": "RVC Queued", diff --git a/packages/fakeyou.com/public/locales/es/SideNav.json b/packages/fakeyou.com/public/locales/es/SideNav.json index 7e9b70a2de..c27f36b03b 100644 --- a/packages/fakeyou.com/public/locales/es/SideNav.json +++ b/packages/fakeyou.com/public/locales/es/SideNav.json @@ -7,7 +7,6 @@ "infoPricing": "Precios", "logOutButton": "Cerrar sesión", "loginButton": "Acceso", - "mocapNetGenerator": "Generador MocapNet", "profileButton": "Perfil", "queueFaceAnimator": "Animaciones en cola", "queueRvc": "RVC en cola", diff --git a/packages/fakeyou.com/public/locales/fr/SideNav.json b/packages/fakeyou.com/public/locales/fr/SideNav.json index 4887bb6073..69c80b70fc 100644 --- a/packages/fakeyou.com/public/locales/fr/SideNav.json +++ b/packages/fakeyou.com/public/locales/fr/SideNav.json @@ -7,7 +7,6 @@ "infoPricing": "Tarifs", "logOutButton": "Se déconnecter", "loginButton": "Se connecter", - "mocapNetGenerator": "Générateur MocapNet", "profileButton": "Profil", "queueFaceAnimator": "Animations en file d'attente", "queueRvc": "RVC en file d'attente", diff --git a/packages/fakeyou.com/public/locales/hi/SideNav.json b/packages/fakeyou.com/public/locales/hi/SideNav.json index c269c6f3bc..baba657bc8 100644 --- a/packages/fakeyou.com/public/locales/hi/SideNav.json +++ b/packages/fakeyou.com/public/locales/hi/SideNav.json @@ -7,7 +7,6 @@ "infoPricing": "मूल्य निर्धारण", "logOutButton": "लॉग आउट", "loginButton": "लॉग इन करें", - "mocapNetGenerator": "मोकैपनेट जेनरेटर", "profileButton": "प्रोफ़ाइल", "queueFaceAnimator": "एनिमेशन कतारबद्ध", "queueRvc": "आरवीसी कतारबद्ध", diff --git a/packages/fakeyou.com/public/locales/id/SideNav.json b/packages/fakeyou.com/public/locales/id/SideNav.json index 8d2696a1a8..b35c070ccd 100644 --- a/packages/fakeyou.com/public/locales/id/SideNav.json +++ b/packages/fakeyou.com/public/locales/id/SideNav.json @@ -7,7 +7,6 @@ "infoPricing": "Harga", "logOutButton": "Keluar", "loginButton": "Gabung", - "mocapNetGenerator": "Generator MocapNet", "profileButton": "Profil", "queueFaceAnimator": "Animasi Antri", "queueRvc": "RVC Mengantri", diff --git a/packages/fakeyou.com/public/locales/it/SideNav.json b/packages/fakeyou.com/public/locales/it/SideNav.json index e1cb15bfaa..a5ce323f30 100644 --- a/packages/fakeyou.com/public/locales/it/SideNav.json +++ b/packages/fakeyou.com/public/locales/it/SideNav.json @@ -7,7 +7,6 @@ "infoPricing": "Prezzi", "logOutButton": "Disconnettersi", "loginButton": "Login", - "mocapNetGenerator": "Generatore MocapNet", "profileButton": "Profilo", "queueFaceAnimator": "Animazioni in coda", "queueRvc": "RVC in coda", diff --git a/packages/fakeyou.com/public/locales/ja/SideNav.json b/packages/fakeyou.com/public/locales/ja/SideNav.json index e3aac10c28..03d6d2be6a 100644 --- a/packages/fakeyou.com/public/locales/ja/SideNav.json +++ b/packages/fakeyou.com/public/locales/ja/SideNav.json @@ -7,7 +7,6 @@ "infoPricing": "価格設定", "logOutButton": "ログアウト", "loginButton": "ログイン", - "mocapNetGenerator": "モーキャプネットジェネレーター", "profileButton": "プロフィール", "queueFaceAnimator": "キューに入れられたアニメーション", "queueRvc": "RVC がキューに登録されました", diff --git a/packages/fakeyou.com/public/locales/ko/SideNav.json b/packages/fakeyou.com/public/locales/ko/SideNav.json index 55d27c909f..11114457c0 100644 --- a/packages/fakeyou.com/public/locales/ko/SideNav.json +++ b/packages/fakeyou.com/public/locales/ko/SideNav.json @@ -7,7 +7,6 @@ "infoPricing": "가격", "logOutButton": "로그 아웃", "loginButton": "로그인", - "mocapNetGenerator": "MocapNet 생성기", "profileButton": "프로필", "queueFaceAnimator": "대기 중인 애니메이션", "queueRvc": "RVC 대기 중", diff --git a/packages/fakeyou.com/public/locales/pt/SideNav.json b/packages/fakeyou.com/public/locales/pt/SideNav.json index 1ab94abf80..8b997f944c 100644 --- a/packages/fakeyou.com/public/locales/pt/SideNav.json +++ b/packages/fakeyou.com/public/locales/pt/SideNav.json @@ -7,7 +7,6 @@ "infoPricing": "Preços", "logOutButton": "Sair", "loginButton": "Conecte-se", - "mocapNetGenerator": "Gerador MocapNet", "profileButton": "Perfil", "queueFaceAnimator": "Animações na fila", "queueRvc": "RVC na fila", diff --git a/packages/fakeyou.com/public/locales/ru/SideNav.json b/packages/fakeyou.com/public/locales/ru/SideNav.json index 93dec2060e..aa47c7f54e 100644 --- a/packages/fakeyou.com/public/locales/ru/SideNav.json +++ b/packages/fakeyou.com/public/locales/ru/SideNav.json @@ -7,7 +7,6 @@ "infoPricing": "Цены", "logOutButton": "Выйти", "loginButton": "Авторизоваться", - "mocapNetGenerator": "Генератор MocapNet", "profileButton": "Профиль", "queueFaceAnimator": "Анимации в очереди", "queueRvc": "RVC в очереди", diff --git a/packages/fakeyou.com/public/locales/th/SideNav.json b/packages/fakeyou.com/public/locales/th/SideNav.json index d57b16ac4b..2015fd7771 100644 --- a/packages/fakeyou.com/public/locales/th/SideNav.json +++ b/packages/fakeyou.com/public/locales/th/SideNav.json @@ -7,7 +7,6 @@ "infoPricing": "ราคา", "logOutButton": "ออกจากระบบ", "loginButton": "เข้าสู่ระบบ", - "mocapNetGenerator": "เครื่องกำเนิดไฟฟ้า MocapNet", "profileButton": "ประวัติโดยย่อ", "queueFaceAnimator": "ภาพเคลื่อนไหวอยู่ในคิว", "queueRvc": "RVC อยู่ในคิว", diff --git a/packages/fakeyou.com/public/locales/tr/SideNav.json b/packages/fakeyou.com/public/locales/tr/SideNav.json index 00913ece2a..7a4f3dc9bc 100644 --- a/packages/fakeyou.com/public/locales/tr/SideNav.json +++ b/packages/fakeyou.com/public/locales/tr/SideNav.json @@ -7,7 +7,6 @@ "infoPricing": "Fiyatlandırma", "logOutButton": "Çıkış Yap", "loginButton": "Giriş yapmak", - "mocapNetGenerator": "MocapNet Jeneratörü", "profileButton": "Profil", "queueFaceAnimator": "Animasyonlar Sıraya Alındı", "queueRvc": "RVC Kuyruğa Alındı", diff --git a/packages/fakeyou.com/public/locales/vi/SideNav.json b/packages/fakeyou.com/public/locales/vi/SideNav.json index 7de719fa4a..b91e43ef04 100644 --- a/packages/fakeyou.com/public/locales/vi/SideNav.json +++ b/packages/fakeyou.com/public/locales/vi/SideNav.json @@ -7,7 +7,6 @@ "infoPricing": "Định giá", "logOutButton": "Đăng xuất", "loginButton": "Đăng nhập", - "mocapNetGenerator": "Trình tạo MocapNet", "profileButton": "Hồ sơ", "queueFaceAnimator": "Hoạt ảnh được xếp hàng đợi", "queueRvc": "RVC xếp hàng", diff --git a/packages/fakeyou.com/public/locales/zh-Hans/SideNav.json b/packages/fakeyou.com/public/locales/zh-Hans/SideNav.json index bf7ac6c591..be66673610 100644 --- a/packages/fakeyou.com/public/locales/zh-Hans/SideNav.json +++ b/packages/fakeyou.com/public/locales/zh-Hans/SideNav.json @@ -7,7 +7,6 @@ "infoPricing": "价钱", "logOutButton": "登出", "loginButton": "登录", - "mocapNetGenerator": "MocapNet 生成器", "profileButton": "轮廓", "queueFaceAnimator": "动画排队", "queueRvc": "RVC 排队", diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx index 91ddaebe03..2f145182a4 100644 --- a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx +++ b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx @@ -317,7 +317,7 @@ export default function SideNav(props: SideNavProps) { icon={faPersonRays} className="sidebar-heading-icon" /> - {t("mocapNetGenerator")} + {t("videoMotionCapture")} diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/VideoMocap.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/VideoMocap.tsx index a9915dc7c2..878582129b 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/VideoMocap.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/VideoMocap.tsx @@ -3,6 +3,7 @@ import { useLocalize } from "hooks"; import TabContentUpload from "./components/tabContentUpload"; import TabContentLibrary from "./components/tabContentLibrary"; +import { BasicVideo } from "components/common"; export default function VideoMotionCapture(){ const { t } = useLocalize("VideoMotionCapture"); @@ -21,7 +22,7 @@ export default function VideoMotionCapture(){
{/*Video Chooser Tabs*/} -
+
-
{/*Chooser Tabs*/} - +
+ {/*ENDS Video Chooser Tabs*/} + +
+ +
+ {/*2nd row*/} {/*panel*/} diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx index a2f15ed752..42fc97755b 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx @@ -1,14 +1,12 @@ import React from "react"; -interface Props{ +export default function TabContentLibrary(props: { t: Function -} -export default function TabContentLibrary(props: Props){ +}){ const { t } = props - return(
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentUpload.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentUpload.tsx index fa862f4843..f75daca67f 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentUpload.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentUpload.tsx @@ -1,25 +1,29 @@ import React from "react"; +import VideoInput from "v2/view/pages/video_mocap/components/uploadFieldVideo"; -interface Props{ +export default function TabContentUpload(props:{ t: Function -} - -export default function TabContentUpload(props:Props){ +}){ const { t } = props - return(
-
-
-

{t("input.dropzoneDescription")}

-

{t("button.upload")}

-

{t("button.generate")}

+
+
+
+
+
+
+ + +
+
+
) } \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/UploadFieldVideo.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/UploadFieldVideo.tsx new file mode 100644 index 0000000000..3ca644f538 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/UploadFieldVideo.tsx @@ -0,0 +1,49 @@ +import React, { useState } from "react"; +import { a, useSpring } from '@react-spring/web'; +import { FileDetails, FileWrapper, FileLabel } from "components/common"; +import { faImagePortrait } from "@fortawesome/pro-solid-svg-icons"; +import "./style.scss"; + +const fileTypes = ["JPG", "GIF", "PNG"]; + +interface Props { + blob?: string; + clear?: (file?: any) => void; + file?: any; + hideActions?: boolean; + hideClearDetails?: boolean; + inputProps?: any; + onRest?: () => void; + success?: boolean; + submit?: () => void; + working?: boolean; + [x:string]: any; +} + +const n = () => {}; + +export default function UploadFieldVideo({ blob = "", clear = n, file, hideActions, hideClearDetails, inputProps, onRest = n, success = false, submit = n, working = false, ...rest }: Props) { + const [loaded,loadedSet] = useState(); + const onLoad = () => loadedSet(1); + const style = useSpring({ + config: { mass: 1, tension: 120, friction: 14 }, + onRest, + opacity: loaded ? 1 : 0 + }); + + return +
+ { file ? <> + + + : <> + + + +
+ { !file && } +
+ } +
+ ; +}; \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/index.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/index.tsx new file mode 100644 index 0000000000..6fc6485cc2 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/index.tsx @@ -0,0 +1 @@ +export { default } from './UploadFieldVideo'; \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/style.scss b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/style.scss new file mode 100644 index 0000000000..c6a2169d5d --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/style.scss @@ -0,0 +1,49 @@ +@import "scss/colours.scss"; +@import "scss/_breakpoint.scss"; + + +.image-upload-frame { + // aspect-ratio: 4/3; + @include breakpoint(min-width 992px) { + aspect-ratio: 1/1; + } +} + +.fy-image-uploader { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + height: 100%; + width: 100%; + + .file-preview { + height: 100%; + width: 100%; + border-radius: .5rem; + object-fit: cover; + } + .image-upload-label, .upload-details { + background-color: rgba($panel, .85); + position: absolute; + } + .image-upload-label { + border-radius: .5rem .5rem 0 0; + display: flex; + width: 100%; + top: 0; + padding: 1rem; + } + + .upload-details { + top: 0; + width: 100%; + padding: 1rem; + border-radius: 0; + } + + .image-placeholder { + // background-color: red; + fill: $secondary; + } +} \ No newline at end of file