styling

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

@@ -8,9 +8,16 @@ interface Props {
   file?: any;
   hideClearDetails?: boolean;
   icon?: any;
+  className?: string
 }
 
-export default function FileDetails({ clear = () => {}, file, hideClearDetails, icon }: Props) {
+export default function FileDetails({
+  clear = () => {}, 
+  file,
+  hideClearDetails,
+  icon,
+  className
+}: Props) {
   const fileSize =
     file && file.size >= 1024 * 1024
       ? (file.size / 1024 / 1024).toFixed(2) + " MB"
@@ -18,7 +25,7 @@ export default function FileDetails({ clear = () => {}, file, hideClearDetails,
       ? `${Math.floor(file.size / 1024)} KB`
       : null;
 
-  return <div {...{ className: "fy-uploader-layout upload-details" }}>
+  return <div className={"fy-uploader-layout upload-details " + className} >
     { icon && <Icon {...{ className: "fy-uploader-layout-icon", icon }}/> }
     <div>
       <div {...{ className: "filename" }}>

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

@@ -4,12 +4,13 @@ import { faFileArrowUp } from "@fortawesome/pro-solid-svg-icons";
 import "./FileLabel.scss";
 
 interface Props {
-  fileTypes?: string[];
+  fileTypes?: string[],
+  className?: string
 }
 
-export default function FileLabel({ fileTypes = [] }: Props) {
-  return <div {...{ className: "fy-uploader-layout fy-upload-label" }}>
-    <Icon {...{ className: "fy-uploader-layout-icon", icon: faFileArrowUp }}/>
+export default function FileLabel({ fileTypes = [], className }: Props) {
+  return <div className={"fy-uploader-layout fy-upload-label " + className}>
+    <Icon className="fy-uploader-layout-icon" icon={faFileArrowUp}/>
     <div className="pb-0">
       <u className="fw-medium">Upload a file</u> or drop it here...
       <p className="opacity-50">

packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/UploadFieldVideo.tsx

@@ -1,22 +1,22 @@
 import React, { useState } from "react";
 import { a, useSpring } from '@react-spring/web';
 import { FileDetails, FileWrapper, FileLabel } from "components/common";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFileVideo, faVideo } from "@fortawesome/pro-solid-svg-icons";
 import "./style.scss";
 
 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;
+  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,
 }
 
 export default function UploadFieldVideo({
@@ -41,22 +41,30 @@ export default function UploadFieldVideo({
   
   const fileTypes = ["MP4"];
 
-  return <FileWrapper {...{ fileTypes, panelClass: "video-upload-frame", ...inputProps, ...rest }}>
-    <div className="fy-image-uploader d-flex">
+  return <FileWrapper {...{ fileTypes, panelClass: "ratio-1x1", ...inputProps, ...rest }}>
+    <div className="d-flex justify-content-center align-items-center w-100 h-100 overflow-hidden">
       { file ?
         <>
+          <FileDetails
+            className="position-absolute"
+            {...{ clear, file, hideClearDetails, icon: faFileVideo }}
+          />
           <video
             controls
             src={blob}
             className="mh-100 mw-100 object-fit-cover"
             {...{onLoad, style}}
           />
-          <FileDetails {...{ clear, file, hideClearDetails, icon: faFileVideo }}/>
+          
         </> :
         <>
-          <div className="image-upload-label">
-            <FileLabel {...{ fileTypes }} />
-          </div>
+          <FileLabel className="
+              upload-details
+              position-absolute top-0
+              d-flex w-100 p-3
+            " 
+            {...{ fileTypes }}
+          />
           <svg className="fill-secondary" xmlns="http://www.w3.org/2000/svg" height="160" width="200" viewBox="0 0 576 512"><path d="M0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128zM559.1 99.8c10.4 5.6 16.9 16.4 16.9 28.2V384c0 11.8-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64L416 337.1V320 192 174.9l14.2-9.5 96-64c9.8-6.5 22.4-7.2 32.9-1.6z"/></svg>
         </>
       }

packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/style.scss

@@ -10,20 +10,11 @@
 .object-fit-cover{
 	object-fit: cover;
 }
-
-.video-upload-frame {
-	// aspect-ratio: 4/3;
-	@include breakpoint(min-width 992px) {
-		aspect-ratio: 1/1;
-	}
-}
-.image-upload-label, .upload-details {
-	background-color: rgba($panel, .85);
+.ratio-1x1 {
+	aspect-ratio: 1/1;
 }
+//-end--//
 
 .upload-details {
-	top: 0;
-	width: 100%;
-	padding: 1rem;
-	border-radius: 0;
+	background-color: rgba($panel, .85);
 }