v2v model view page update

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

@@ -1,17 +1,21 @@
 import React from "react";
+import Panel from "./Panel";
 
 interface PageHeaderModelViewProps {
   titleIcon?: React.ReactNode;
   title: string;
   subText: React.ReactNode;
   tags?: string[];
+  ratingBtn?: React.ReactNode;
+  ratingStats?: React.ReactNode;
+  extras?: React.ReactNode;
 }
 
 export default function PageHeaderModelView(props: PageHeaderModelViewProps) {
   return (
-    <div className="container-panel hero-section pt-3 pb-4">
-      <div className="panel p-3 py-4 p-md-4">
-        <div className="row g-3">
+    <div className="pt-3 pb-4">
+      <Panel padding>
+        <div className="row gy-3">
           <div className="col-12 col-lg-8">
             <h2 className="fw-bold">
               {props.titleIcon}
@@ -19,16 +23,27 @@ export default function PageHeaderModelView(props: PageHeaderModelViewProps) {
             </h2>
             <p>{props.subText}</p>
           </div>
-          <div className="col-12 col-lg-4 d-flex flex-wrap justify-content-lg-end gap-2">
-            {props.tags &&
-              props.tags.map((tag, index) => (
-                <div key={index}>
-                  <span className="badge badge-tag">{tag}</span>
-                </div>
-              ))}
+          <div className="col-12 col-lg-4">
+            <div className="d-flex gap-2 flex-wrap justify-content-lg-end">
+              {props.tags &&
+                props.tags.map((tag, index) => (
+                  <div key={index}>
+                    <span className="badge badge-tag">{tag}</span>
+                  </div>
+                ))}
+            </div>
           </div>
         </div>
-      </div>
+        <hr className="my-4" />
+
+        <div className="d-flex flex-column flex-lg-row flex-column-reverse gap-3">
+          <div className="d-flex gap-3">
+            {props.ratingBtn}
+            {props.extras}
+          </div>
+          {props.ratingStats}
+        </div>
+      </Panel>
     </div>
   );
 }

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

@@ -12,7 +12,7 @@ export default function Panel(props: PanelProps) {
   return (
     <motion.div className="container-panel" variants={panel}>
       <div
-        className={`panel ${props.padding ? "p-3 py-4 p-md-4" : ""} ${
+        className={`panel ${props.padding ? "p-3 py-lg-4 p-md-4" : ""} ${
           props.mb ? "mb-4" : ""
         }`}
       >

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

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import Tippy from "@tippyjs/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLink } from "@fortawesome/pro-solid-svg-icons";
+
+interface ShareButtonProps {
+  url: string;
+}
+
+export default function ShareButton(props: ShareButtonProps) {
+  const [tippyContent, setTippyContent] = useState("Share");
+
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(props.url);
+      setTippyContent("Link Copied");
+      setTimeout(() => {
+        setTippyContent("Share");
+      }, 800);
+    } catch (error) {
+      console.error("Failed to copy link to clipboard:", error);
+    }
+  };
+
+  return (
+    <div className="d-flex">
+      <Tippy
+        content={tippyContent}
+        hideOnClick={false}
+        placement="bottom"
+        theme="fakeyou"
+        arrow={false}
+      >
+        <button className="btn-share" onClick={copyToClipboard} type="button">
+          <span>
+            <FontAwesomeIcon icon={faLink} className="me-2" />
+          </span>
+          Share Link
+        </button>
+      </Tippy>
+    </div>
+  );
+}

packages/fakeyou.com/src/scss/site-refresh.scss

@@ -870,6 +870,7 @@ styles with important tags:
     font-size: 17px;
     background-color: lighten($secondary, 4%);
     border-radius: 0.5rem;
+    border-radius: 0.5rem;
     border: none;
     padding: 6px 20px;
     color: rgba($white, 0.5);
@@ -877,10 +878,12 @@ styles with important tags:
 
     &.left {
       border-radius: 0.5rem 0px 0px 0.5rem;
+      border-radius: 0.5rem 0px 0px 0.5rem;
     }
 
     &.right {
       border-radius: 0px 0.5rem 0.5rem 0px;
+      border-radius: 0px 0.5rem 0.5rem 0px;
     }
 
     &.rated {

packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx

@@ -23,6 +23,7 @@ import ShareButton from "components/common/ShareButton/ShareButton";
 import PageContainer from "components/common/PageContainer/PageContainer";
 
 interface VcModelViewPageProps {
+  sessionWrapper: SessionWrapper;
   sessionWrapper: SessionWrapper;
   sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
   inferenceJobsByCategory: any;
@@ -39,6 +40,7 @@ export default function VcModelViewPage(props: VcModelViewPageProps) {
       </div>
       <p>
         V2V model by <Link to="/">Vegito1089</Link>
+        V2V model by <Link to="/">Vegito1089</Link>
       </p>
     </div>
   );
@@ -81,8 +83,45 @@ export default function VcModelViewPage(props: VcModelViewPageProps) {
   const shareUrl = window.location.href;
   const shareButton = <ShareButton url={shareUrl} />;
 
+  let modelCreatorLink = <Link to="">Creator Name</Link>;
+  let modelTitle = title;
+  let modelUseCount = 10000;
+  let modelLanguage = "English";
+  let modelType = "RVCv2";
+  let modelUploadDate = "2021-09-10T06:15:04Z";
+  let modelVisibility = (
+    <div>
+      <FontAwesomeIcon icon={faEye} className="me-2" />
+      Public
+    </div>
+  );
+
+  const voiceDetails = [
+    { label: "Creator", value: modelCreatorLink },
+    { label: "Title", value: modelTitle },
+    { label: "Use count", value: modelUseCount },
+    { label: "Spoken language", value: modelLanguage },
+    { label: "Model type", value: modelType },
+    { label: "Upload date (UTC)", value: modelUploadDate },
+    { label: "Visibility", value: modelVisibility },
+  ];
+
+  let ratingButtons = <></>;
+  if (props.sessionWrapper.isLoggedIn()) {
+    ratingButtons = (
+      <RatingButtons entity_type="v2v_model" entity_token="test" />
+    );
+  }
+
+  let ratingStats = (
+    <RatingStats positive_votes={100} negative_votes={0} total_votes={100} />
+  );
+
+  const shareUrl = window.location.href;
+  const shareButton = <ShareButton url={shareUrl} />;
+
   return (
-    <PageContainer>
+    <div>
       <PageHeaderModelView
         title={title}
         subText={subText}