attempt to scaffold layout using exiting components

2026-11-05 17:58:55 +00:00 · 2024-01-16 16:42:42 -05:00
1 parent 0131355ab6
commit 42d273d7a6
@@ -7,7 +7,6 @@
  "infoPricing": "মূল্য নির্ধারণ",
  "logOutButton": "প্রস্থান",
  "loginButton": "প্রবেশ করুন",
-  "mocapNetGenerator": "MocapNet জেনারেটর",
  "profileButton": "প্রোফাইল",
  "queueFaceAnimator": "অ্যানিমেশন সারিবদ্ধ",
  "queueRvc": "RVC সারিবদ্ধ",
@@ -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",
@@ -7,7 +7,6 @@
  "infoPricing": "Pricing",
  "logOutButton": "Log Out",
  "loginButton": "Login",
-  "mocapNetGenerator": "MocapNet Generator",
  "profileButton": "Profile",
  "queueFaceAnimator": "Animations Queued",
  "queueRvc": "RVC Queued",
@@ -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",
@@ -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",
@@ -7,7 +7,6 @@
  "infoPricing": "मूल्य निर्धारण",
  "logOutButton": "लॉग आउट",
  "loginButton": "लॉग इन करें",
-  "mocapNetGenerator": "मोकैपनेट जेनरेटर",
  "profileButton": "प्रोफ़ाइल",
  "queueFaceAnimator": "एनिमेशन कतारबद्ध",
  "queueRvc": "आरवीसी कतारबद्ध",
@@ -7,7 +7,6 @@
  "infoPricing": "Harga",
  "logOutButton": "Keluar",
  "loginButton": "Gabung",
-  "mocapNetGenerator": "Generator MocapNet",
  "profileButton": "Profil",
  "queueFaceAnimator": "Animasi Antri",
  "queueRvc": "RVC Mengantri",
@@ -7,7 +7,6 @@
  "infoPricing": "Prezzi",
  "logOutButton": "Disconnettersi",
  "loginButton": "Login",
-  "mocapNetGenerator": "Generatore MocapNet",
  "profileButton": "Profilo",
  "queueFaceAnimator": "Animazioni in coda",
  "queueRvc": "RVC in coda",
@@ -7,7 +7,6 @@
  "infoPricing": "価格設定",
  "logOutButton": "ログアウト",
  "loginButton": "ログイン",
-  "mocapNetGenerator": "モーキャプネットジェネレーター",
  "profileButton": "プロフィール",
  "queueFaceAnimator": "キューに入れられたアニメーション",
  "queueRvc": "RVC がキューに登録されました",
@@ -7,7 +7,6 @@
  "infoPricing": "가격",
  "logOutButton": "로그 아웃",
  "loginButton": "로그인",
-  "mocapNetGenerator": "MocapNet 생성기",
  "profileButton": "프로필",
  "queueFaceAnimator": "대기 중인 애니메이션",
  "queueRvc": "RVC 대기 중",
@@ -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",
@@ -7,7 +7,6 @@
  "infoPricing": "Цены",
  "logOutButton": "Выйти",
  "loginButton": "Авторизоваться",
-  "mocapNetGenerator": "Генератор MocapNet",
  "profileButton": "Профиль",
  "queueFaceAnimator": "Анимации в очереди",
  "queueRvc": "RVC в очереди",
@@ -7,7 +7,6 @@
  "infoPricing": "ราคา",
  "logOutButton": "ออกจากระบบ",
  "loginButton": "เข้าสู่ระบบ",
-  "mocapNetGenerator": "เครื่องกำเนิดไฟฟ้า MocapNet",
  "profileButton": "ประวัติโดยย่อ",
  "queueFaceAnimator": "ภาพเคลื่อนไหวอยู่ในคิว",
  "queueRvc": "RVC อยู่ในคิว",
@@ -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ı",
@@ -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",
@@ -7,7 +7,6 @@
  "infoPricing": "价钱",
  "logOutButton": "登出",
  "loginButton": "登录",
-  "mocapNetGenerator": "MocapNet 生成器",
  "profileButton": "轮廓",
  "queueFaceAnimator": "动画排队",
  "queueRvc": "RVC 排队",
@@ -317,7 +317,7 @@ export default function SideNav(props: SideNavProps) {
              icon={faPersonRays}
              className="sidebar-heading-icon"
            />
-            {t("mocapNetGenerator")}
+            {t("videoMotionCapture")}
          </NavLink>
        </li>

@@ -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(){
        <div className="row g-5 mt-1">

          {/*Video Chooser Tabs*/}
-          <div className="col-12 col-lg-6 d-flex flex-column gap-4">
+          <div className="col-12 col-md-6">
            <ul className="nav nav-tabs nav-vc" id="vmcTab">
              <li className="nav-item w-100">
                <button
@@ -48,8 +49,13 @@ export default function VideoMotionCapture(){
              <TabContentUpload t={t}/>
              <TabContentLibrary t={t}/>
            </div>
-          </div> {/*Chooser Tabs*/}
-
+          </div>
+          {/*ENDS Video Chooser Tabs*/}
+          
+          <div className="col-12 col-md-6">
+            <BasicVideo />
+          </div>
+          
        </div>{/*2nd row*/}

      </div>{/*panel*/}
@@ -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(
    <div
-      className="tab-pane fade"
+      className="tab-content fade"
      id="vmcLibrary"
    >
      <div className="d-flex flex-column gap-4 h-100">
@@ -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(
    <div
-      className="tab-pane fade show active"
+      className="tab-content fade show active"
      id="vmcUpload"
    >
-      <div className="d-flex flex-column gap-4 h-100">
-          <div className="d-flex flex-column gap-3">
-            <p>{t("input.dropzoneDescription")}</p>
-            <p>{t("button.upload")}</p>
-            <p>{t("button.generate")}</p>
+        <div className="row">
+          <div className="col-12">
+            <VideoInput t={t}/>
          </div>
        </div>

+        <div className="row">
+          <div className="col-12">
+            <div className="d-flex justify-content-end">
+              <button className="btn btn-primary m-1">{t("button.upload")}</button>
+              <button className="btn btn-primary m-1" disabled>{t("button.generate")}</button>
+            </div>
+          </div>
+        </div>
    </div>
  )
 }
@@ -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<number>();
+  const onLoad = () => loadedSet(1);
+  const style = useSpring({
+    config: { mass: 1, tension: 120, friction: 14 },
+    onRest,
+    opacity: loaded ? 1 : 0
+  });
+
+  return <FileWrapper {...{ fileTypes, panelClass: "image-upload-frame", ...inputProps, ...rest }}>
+    <div {...{ className: "fy-image-uploader" }}>
+      { file ? <>
+        <a.img {...{ alt: "file preview", className: "file-preview", onLoad, src: blob, style }} />
+        <FileDetails {...{ clear, file, hideClearDetails, icon: faImagePortrait }}/>
+      </> : <>
+        <svg {...{ className: "image-placeholder", height: 400, viewBox: "0 0 300 300", width: 400 }}>
+          <path d="m152.42 226c41.8 0 69.49-43.57 73.21-90.87 3.78-47.97-26.06-87.13-75.69-87.13-49.64 0-79.28 39.15-75.69 87.13 3.72 49.79 36.37 90.87 78.17 90.87zm-29.19-50.93c1.62-1.51 4.15-1.42 5.65.2 4.1 4.41 15.31 6.97 21.88 6.97s17.77-2.56 21.88-6.97c1.5-1.62 4.04-1.71 5.65-.2 1.62 1.5 1.92 3.95.2 5.65-6.31 6.27-18.31 9.52-27.74 9.52s-22.16-3.54-27.74-9.52c-1.49-1.61-1.4-4.14.22-5.65zm115.25 112.93h-176.62c-37.67 0-38.24-17.41-27.56-26.36 21.49-18.01 57.18-23.64 114.81-23.64 60.01 0 96.24 4.84 117.41 24.06 10.09 9.16 7.67 25.94-28.04 25.94z"/>
+        </svg>
+        <div {...{ className: "image-upload-label" }}>
+          { !file && <FileLabel {...{ fileTypes }} /> }
+        </div>
+      </> }
+    </div>
+  </FileWrapper>;
+};
@@ -0,0 +1 @@
+export { default } from './UploadFieldVideo';
@@ -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;
+	}
+}
				`@@ -0,0 +1 @@`
				`export { default } from './UploadFieldVideo';`