-
);
}
diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss
index 75fd08fe6a..8f76bad0fb 100644
--- a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss
+++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss
@@ -16,12 +16,17 @@
padding-top: 7.25px !important;
padding-bottom: 7.25px !important;
border-radius: 0.5rem 0 0 0.5rem !important;
+ background-color: $input-dark !important;
position: relative;
z-index: 3;
&::placeholder {
color: rgba($white, 0.3) !important;
}
+
+ &.landing-search {
+ background-color: rgba($input-dark, 0.5) !important;
+ }
}
}
diff --git a/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx b/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx
index 242482cd51..c8358787ae 100644
--- a/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx
+++ b/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx
@@ -32,11 +32,18 @@ export default memo(function SelectModalWrapper({
inputLabel: string;
onSelect: (data:SelectModalData) => void;
}) {
+ const [onSelectTimeStamp, setOnSelectTimeStamp] = useState
-
+ {
+ onSelect(data)
+ setOnSelectTimeStamp(new Date());
+ }}
+ />
)
}]
@@ -45,6 +52,7 @@ export default memo(function SelectModalWrapper({
modalTitle={modalTitle}
label={inputLabel}
value={value}
+ forcedClose={onSelectTimeStamp}
onClear={()=>{onSelect({title:"",token:""})}}
>
+ {showLeftGradient && mobileSideScroll && (
+
+ );
+}
diff --git a/packages/fakeyou.com/src/components/common/SelectionBubblesV2/index.tsx b/packages/fakeyou.com/src/components/common/SelectionBubblesV2/index.tsx
new file mode 100644
index 0000000000..86aea134e3
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/SelectionBubblesV2/index.tsx
@@ -0,0 +1 @@
+export { default } from "./SelectionBubblesV2";
diff --git a/packages/fakeyou.com/src/components/common/TypeformButton/TypeformButton.tsx b/packages/fakeyou.com/src/components/common/TypeformButton/TypeformButton.tsx
new file mode 100644
index 0000000000..5958852c99
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/TypeformButton/TypeformButton.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { PopupButton } from "@typeform/embed-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRight, faPartyHorn } from "@fortawesome/pro-solid-svg-icons";
+import { get, set } from "local-storage";
+import Button from "../Button";
+
+interface TypeformButtonProps {
+ formId: string;
+ label: string;
+ labelSubmitted: string;
+}
+
+export default function TypeformButton({
+ formId,
+ label,
+ labelSubmitted,
+}: TypeformButtonProps) {
+ return (
+ <>
+ {!get
+ {variant === "default" ? (
+ <>
+ {options.map(({ label }) => (
+
+ ))}
+
+ ) : (
+
+ {showGradient && mobileSideScroll && (
+
+
+ )}
+
+ {options.map(({ label, imageUrl }) => (
+
+
+
+
+ ))}
+
+ {
+ set("isSubmit", true);
+ console.log("Form submitted!");
+ }}
+ hideHeaders
+ enableSandbox={false}
+ />
+
+ ) : null}
+
+ );
+}
diff --git a/packages/fakeyou.com/src/components/common/TypeformWidget/index.tsx b/packages/fakeyou.com/src/components/common/TypeformWidget/index.tsx
new file mode 100644
index 0000000000..a4e97e97d5
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/TypeformWidget/index.tsx
@@ -0,0 +1 @@
+export { default } from "./TypeformWidget";
diff --git a/packages/fakeyou.com/src/components/common/VideoFakeyou/VideoFakeyou.tsx b/packages/fakeyou.com/src/components/common/VideoFakeyou/VideoFakeyou.tsx
index cca28d79f5..0ff353666f 100644
--- a/packages/fakeyou.com/src/components/common/VideoFakeyou/VideoFakeyou.tsx
+++ b/packages/fakeyou.com/src/components/common/VideoFakeyou/VideoFakeyou.tsx
@@ -1,14 +1,22 @@
-import React, { useState, forwardRef } from "react";
+import React, {
+ useState,
+ forwardRef,
+ memo,
+ useEffect,
+} from "react";
import { useMedia } from "hooks";
import { MediaFileType } from "@storyteller/components/src/api";
import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
import makeClass from "resources/makeClass";
-import { Label } from "components/common";
+import { Label, Spinner } from "components/common";
import './styles.scss';
export interface VideoFakeyouProps{
+ width?: number|string;
+ height?: number|string;
+ hideIfNoMedia?: boolean;
wrapperClassName?: string;
controls?:boolean;
muted?:boolean;
@@ -21,9 +29,12 @@ export interface VideoFakeyouProps{
type Ref = HTMLVideoElement;
-const VideoFakeyou = forwardRef
+ (null);
+ const [{
+ left,
+ leftOffset,
+ pointerStart
+ }, setState] = useState<{
+ left: number,
+ leftOffset:number
+ pointerStart:number
+ }>({
+ left: trimStart/duration*boundingWidth,
+ leftOffset: trimStart/duration*boundingWidth,
+ pointerStart: -1
+ });
+ const ref = useRef(null);
+
+ if(ref.current){
+ ref.current.style.cursor = pointerStart >= 0
+ ? 'grabbing' : 'grab';
+ }
+
+ function handleScrubStart(e: PointerEvent){
+ e.persist();
+ // console.log(`start: ${pointerStart}` );
+ setState((curr)=>({
+ ...curr,
+ pointerStart: e.clientX
+ }));
+ }
+ function handleScrubEnd(e: PointerEvent){
+ e.persist();
+ // console.log(`end` );
+ setState((curr)=>({
+ ...curr,
+ pointerStart: -1,
+ leftOffset: left,
+ }));
+ //console.log(`${duration} * ${left} / ${boundingWidth} = ${duration * left / boundingWidth}`)
+ onChange(({
+ trimStartSeconds: duration * left / boundingWidth,
+ trimEndSeconds: duration * left / boundingWidth + trimDuration,
+ }))
+ }
+ function handleScrubMove(e: PointerEvent){
+ e.persist();
+ if(pointerStart >= 0 && pointerStart!==null && ref.current){
+ // console.log(`${e.clientX} - ${pointerStart} = ${e.clientX-pointerStart}`)
+ let newLeft = leftOffset + e.clientX - pointerStart;
+ // console.log(`${newLeft} + ${boundingWidth * widthPercent/100} > ${boundingWidth}`)
+ if (newLeft + width > boundingWidth) {
+ newLeft = boundingWidth - width;
+ }else if(newLeft < 0) {
+ newLeft = 0;
+ }
+ setState((curr)=>({
+ ...curr,
+ left: newLeft
+ }));
+ }
+ }
return(
(true);
const [{
canNotTrim,
+ trimReset,
trimStart,
trimEnd,
trimDuration,
- // isScrubbingTrim,
+ maxDuration
}, setTrimState] = useState(initialTrimState);
const videoRefCallback = useCallback(node => {
- console.log("videoRefCallback");
+ //console.log("videoRefCallback");
if (node !== null) {
// DOM node referenced by ref has changed and exists
videoRef.current = node;
@@ -98,8 +98,10 @@ export default memo(function VideoQuickTrim({
};
node.ontimeupdate = ()=>{
- if(isRepeatOn && node.currentTime >= trimEnd){
- node.currentTime = 0;
+ if(isRepeatOn &&
+ (node.currentTime >= trimEnd || node.currentTime <= trimStart)
+ ){
+ node.currentTime = trimStart;
}
setPlaybarState((curr)=>({
...curr,
@@ -113,7 +115,7 @@ export default memo(function VideoQuickTrim({
node.onended = ()=>{setPlaypause("ended");};
} // else{} DOM node referenced by ref has been unmounted
- }, [playbarWidth, onSelect, isRepeatOn, trimEnd]); //END videoRefCallback
+ }, [playbarWidth, onSelect, isRepeatOn, trimStart, trimEnd]); //END videoRefCallback
function handleWindowResize() {
if (playbarRef.current !== null) {
@@ -142,22 +144,29 @@ export default memo(function VideoQuickTrim({
}, []);
const handleChangeTrimDuration = (selected: string) =>{
- if(!canNotTrim){
- const newTrimEnd = trimStart+ trimOptions[selected];
+ if(!canNotTrim && maxDuration > 0 && trimOptions[selected] <= maxDuration){
+ let newTrimStart = trimStart;
+ let newTrimEnd = trimStart+ trimOptions[selected];
+ if (newTrimEnd > maxDuration){
+ newTrimEnd = maxDuration;
+ newTrimStart = maxDuration - trimOptions[selected];
+ }
setTrimState((curr)=>({
...curr,
+ trimReset: new Date(),
trimDuration: trimOptions[selected],
+ trimStart: newTrimStart,
trimEnd: newTrimEnd,
}))
onSelect({
- trimStartSeconds: trimStart,
+ trimStartSeconds: newTrimStart,
trimEndSeconds: newTrimEnd,
});
if (isRepeatOn
&& videoRef.current
&& videoRef.current.currentTime > newTrimEnd
){
- videoRef.current.currentTime = trimStart;
+ videoRef.current.currentTime = newTrimStart;
}
}
}
@@ -170,16 +179,17 @@ export default memo(function VideoQuickTrim({
}
};
- const trimScrubberWidth = videoRef.current
+ const trimScrubberWidth = videoRef.current && playbarWidth > 0
? trimDuration > 0 && trimDuration < videoRef.current.duration
- ? (trimDuration / videoRef.current.duration * 100)
- : 100
+ ? (trimDuration / videoRef.current.duration * playbarWidth)
+ : playbarWidth
: 0;
return (
- {
+ //console.log(val);
+ setTrimState((curr)=>({
+ ...curr,
+ trimStart: val.trimStartSeconds,
+ trimEnd: val.trimEndSeconds
+ }))
+ onSelect({
+ trimStartSeconds: val.trimStartSeconds,
+ trimEndSeconds: val.trimEndSeconds,
+ });
+ }}
+ />
+ }
{/* END of Playbar */}
diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss b/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss
index 7f0055d918..d45ce34e48 100644
--- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss
+++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss
@@ -15,6 +15,8 @@ $playbar-height: 2rem;
max-height: 500px;
width: 100%;
margin-bottom: -7px;
+ border-radius: 0.5rem 0.5rem 0 0;
+ border: none;
video {
border-radius: 0.5rem 0.5rem 0 0;
@@ -88,7 +90,7 @@ $playbar-height: 2rem;
outline: 0.125rem $white solid;
border-top: 1rem $white solid;
border-radius: 0.25rem 0.25rem 0.125rem 0.125rem;
- // cursor: grab;
+ cursor: grab;
display: flex;
justify-content: center;
diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/types.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/types.tsx
index 34ac28e0f6..4e3dd0db0d 100644
--- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/types.tsx
+++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/types.tsx
@@ -7,7 +7,7 @@ export type QuickTrimData = {
// INTERNALS
export type TrimStates = {
canNotTrim: boolean;
- isScrubbingTrim: boolean;
+ trimReset: Date;
trimDuration: number;
trimStart: number;
trimEnd: number;
diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
index 817dc103d4..a96377a081 100644
--- a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
+++ b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
@@ -53,9 +53,8 @@ export default function SideNav({
const isMenuOpen = wrapper?.classList.contains("toggled");
const isLoggedIn = sessionWrapper.isLoggedIn();
const isOnLandingPage = window.location.pathname === "/";
- const isOnLoginOrSignUpPage = window.location.pathname.includes(
- "/login" || "/signup"
- );
+ const isOnLoginPage = window.location.pathname.includes("/login");
+ const isOnSignUpPage = window.location.pathname.includes("/signup");
const isOnStudioPage = window.location.pathname.includes("/studio");
let history = useHistory();
@@ -107,7 +106,7 @@ export default function SideNav({
}, []);
const shouldNotShowSidebar =
- (!isLoggedIn && (isOnLandingPage || isOnLoginOrSignUpPage)) ||
+ (!isLoggedIn && (isOnLandingPage || isOnLoginPage || isOnSignUpPage)) ||
isOnStudioPage;
const shouldShowSidebar = windowWidth >= 992 && !shouldNotShowSidebar;
const sidebarClassName = `sidebar ${
diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.scss b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.scss
index 3ff22966dd..c9033d7f82 100644
--- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.scss
+++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.scss
@@ -1,5 +1,9 @@
@import "scss/colours.scss";
+.topbar-bg-transparent {
+ background-color: transparent;
+}
+
.topbar-bg-dark {
background-color: $bg !important;
border-bottom: 1px solid transparent !important;
diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
index d7980aa8b4..1396cb1600 100644
--- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
+++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
@@ -45,16 +45,16 @@ export default function TopNav({
const [menuButtonIcon, setMenuButtonIcon] = useState(faBars);
// const { t } = useLocalize("TopNav");
const isOnLandingPage = window.location.pathname === "/";
- const isOnLoginOrSignUpPage = window.location.pathname.includes(
- "/login" || "/signup"
- );
+ const isOnLoginPage = window.location.pathname.includes("/login");
+ const isOnSignUpPage = window.location.pathname.includes("/signup");
const isOnStudioPage = window.location.pathname.includes("/studio");
const { open } = useModal();
const openModal = () => open({ component: InferenceJobsModal });
const [isScrolled, setIsScrolled] = useState(false);
const loggedIn = sessionWrapper.isLoggedIn();
- const showNavItem = !loggedIn && (isOnLandingPage || isOnLoginOrSignUpPage);
+ const showNavItem =
+ !loggedIn && (isOnLandingPage || isOnLoginPage || isOnSignUpPage);
const handleMenuButtonClick = () => {
if (window.innerWidth < 1200) {
@@ -95,8 +95,15 @@ export default function TopNav({
};
useEffect(() => {
+ const topBarWrapper = document.getElementById("topbar-wrapper");
+
const handleMenuToggle = (event: any) => {
setMenuButtonIcon(event.detail.isOpen ? faXmark : faBars);
+ if (event.detail.isOpen) {
+ topBarWrapper?.classList.remove("topbar-wrapper-transparent");
+ } else {
+ topBarWrapper?.classList.add("topbar-wrapper-transparent");
+ }
};
window.addEventListener("menuToggle", handleMenuToggle);
@@ -185,8 +192,12 @@ export default function TopNav({
{label &&
- )
- }
- return null;
-});
+ );
+ }else if (!hideIfNoMedia){
+ return(
+
+
+ );
+ } return null;
+}));
export default VideoFakeyou;
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/VideoFakeyou/styles.scss b/packages/fakeyou.com/src/components/common/VideoFakeyou/styles.scss
index 0015270314..322c99da9d 100644
--- a/packages/fakeyou.com/src/components/common/VideoFakeyou/styles.scss
+++ b/packages/fakeyou.com/src/components/common/VideoFakeyou/styles.scss
@@ -5,7 +5,15 @@
width: 100%;
margin: 0;
position: relative;
-
+ background-color: $bg;
+ border-radius: 0.5rem;
+ border: $panel-inner-border 1px solid;
+ .fy-spinner{
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
&.fit-content {
height: fit-content;
}
diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx
index dc900305eb..3b30dad77d 100644
--- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx
+++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx
@@ -1,47 +1,99 @@
import React, {
useRef,
- // useState
+ useState,
+ PointerEvent
} from 'react';
import {
faGripDots
} from "@fortawesome/pro-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { QuickTrimData } from './types';
export default function TrimScrubber({
- width
+ trimStart,
+ trimDuration,
+ duration,
+ width,
+ boundingWidth,
+ onChange
}:{
- width:number
+ trimStart:number;
+ trimDuration: number;
+ duration: number;
+ boundingWidth: number;
+ width:number;
+ onChange:(val:QuickTrimData)=>void
}){
- const ref = useRef{
- // if(trimZoneRef.current){
- // trimZoneRef.current.style.cursor = 'grabbing';
- // setTrimState((curr)=>({
- // ...curr,
- // isScrubbingTrim: true,
- // }))
- // }
- // }}
- // onPointerUp={()=>{
- // if(trimZoneRef.current) {
- // trimZoneRef.current.style.cursor = 'grab';
- // setTrimState((curr)=>({
- // ...curr,
- // isScrubbingTrim: false,
- // }));
- // }
- // }}
- // onPointerMove={(e: PointerEvent)=>{
- // if(trimZoneRef.current && playbarRef.current && isScrubbingTrim){
- // // console.log(fractionToPercentage(
- // // (e.clientX - trimZoneRef.current.getBoundingClientRect().left) / (playbarRef.current.getBoundingClientRect().width)
- // // ) + "%");
- // }
- // }}
+ style={{
+ width: width + "px",
+ left: left,
+ }}
+ onPointerDown={handleScrubStart}
+ onPointerUp={handleScrubEnd}
+ onPointerLeave={handleScrubEnd}
+ onPointerMove={handleScrubMove}
>
diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx
index 2ebbd27fab..55503dbbcd 100644
--- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx
+++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx
@@ -4,7 +4,6 @@ import React, {
useLayoutEffect,
useState,
useRef,
- // PointerEvent,
} from "react";
import {
faArrowsRepeat,
@@ -35,8 +34,8 @@ const trimOptions: { [key: string]: number } = {
const initialTrimState: TrimStates = {
canNotTrim: true,
- isScrubbingTrim: false,
trimDuration: 0,
+ trimReset: new Date(),
trimStart: 0,
trimEnd: 0,
maxDuration: 0,
@@ -65,16 +64,17 @@ export default memo(function VideoQuickTrim({
const [isRepeatOn, setIsRepatOn] = useState
@@ -230,11 +241,18 @@ export default function TopNav({
{/* Search Bar */}
- {(!isOnLandingPage && !isOnLoginOrSignUpPage && !isOnStudioPage) ||
- (loggedIn && !isOnLoginOrSignUpPage && !isOnStudioPage) ||
+ {(!isOnLandingPage &&
+ !isOnLoginPage &&
+ !isOnSignUpPage &&
+ !isOnStudioPage) ||
+ (loggedIn &&
+ !isOnLoginPage &&
+ !isOnSignUpPage &&
+ !isOnStudioPage) ||
(isOnLandingPage &&
isScrolled &&
- !isOnLoginOrSignUpPage &&
+ !isOnLoginPage &&
+ !isOnSignUpPage &&
!isOnStudioPage) ? (
user?.canEditOtherUsersTtsModels || userTokenMatch(userToken);
const canBanUsers = () => user?.can_ban_users || false;
- const studioAccessCheck = (content: React.ElementType) => !user?.can_access_studio ? ;
+export enum Website {
+ FakeYou,
+ StorytellerAi,
+}
+
+export interface DomainConfig {
+ website: Website,
+ logo: string,
+ title: string,
+ link: string,
+}
const domainConfigs: Record = {
- "storyteller.ai": {
- logo: "/fakeyou/Storyteller-Logo-5.png",
+ "storyteller": {
+ website: Website.StorytellerAi,
+ logo: "/fakeyou/Storyteller-Logo-1.png",
title: "Storyteller AI",
link: "https://storyteller.ai",
},
- "fakeyou.com": {
- logo: "/fakeyou/FakeYou-Logo-2.png",
- title: "FakeYou",
- link: "https://fakeyou.com",
- },
- // Default to FakeYou.com
- default: {
+ "fakeyou": {
+ website: Website.FakeYou,
logo: "/fakeyou/FakeYou-Logo-2.png",
title: "FakeYou",
link: "https://fakeyou.com",
@@ -20,16 +26,18 @@ const domainConfigs: Record = {
};
export const getCurrentDomainConfig = (): DomainConfig => {
- const currentHostname = window.location.hostname;
+ // Fast resolve without leaking domain details
+ switch (window.location.hostname) {
+ case "fakeyou.com":
+ return domainConfigs.fakeyou;
+ case "storyteller.ai":
+ return domainConfigs.storyteller;
+ }
- const matchingConfigKey = Object.keys(domainConfigs).find(
- key => currentHostname === key || currentHostname.endsWith(`.${key}`)
- );
+ if (window.location.hostname.includes("storyteller")) {
+ return domainConfigs.storyteller;
+ }
- const domainConfig =
- matchingConfigKey !== undefined
- ? domainConfigs[matchingConfigKey]
- : domainConfigs["default"];
-
- return domainConfig;
+ // Default fallback
+ return domainConfigs.fakeyou;
};
diff --git a/packages/fakeyou.com/src/v2/view/_common/VideoStyleTransferNotAvailable.tsx b/packages/fakeyou.com/src/v2/view/_common/VideoStyleTransferNotAvailable.tsx
new file mode 100644
index 0000000000..1f37135d2f
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/_common/VideoStyleTransferNotAvailable.tsx
@@ -0,0 +1,19 @@
+import { DiscordLink2 } from "@storyteller/components/src/elements/DiscordLink2";
+import { Container } from "components/common";
+import PageHeader from "components/layout/PageHeader";
+import React from "react";
+
+export function VideoStyleTransferNotAvailable() {
+ const subText = (
+ <> Please visit our
+
+ );
+}
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/Dashboard.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/Dashboard.tsx
index 1622d746ca..6eb8a04953 100644
--- a/packages/fakeyou.com/src/v2/view/pages/landing/Dashboard.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/Dashboard.tsx
@@ -127,7 +127,7 @@ export default function Dashboard(props: DashboardProps) {
];
return (
-
+
- {domain.title === "FakeYou" ? (
+ {domain.website === Website.FakeYou ? (
<>
{/* FAKEYOU.COM */}
{!isLoggedIn && (
- ([]);
+ const [loadedVideos, setLoadedVideos] = useState(0);
+
+ useEffect(() => {
+ const checkAllVideosLoaded = () => {
+ setLoadedVideos(prevLoaded => prevLoaded + 1);
+ };
+
+ videosRef.current.forEach(video => {
+ video.addEventListener("canplaythrough", checkAllVideosLoaded);
+ });
+
+ return () => {
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ videosRef.current.forEach(video => {
+ video.removeEventListener("canplaythrough", checkAllVideosLoaded);
+ });
+ };
+ }, []);
+
+ useEffect(() => {
+ if (loadedVideos === columns.length) {
+ videosRef.current.forEach(video => video.play());
+ }
+ }, [loadedVideos]);
+
+ return (
+
+
+ );
+}
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV1/index.ts b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV1/index.ts
new file mode 100644
index 0000000000..c3a0b98577
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV1/index.ts
@@ -0,0 +1 @@
+export { default } from "./VstSectionV1";
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.scss b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.scss
new file mode 100644
index 0000000000..744650702c
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.scss
@@ -0,0 +1,169 @@
+@import "scss/colours.scss";
+
+.vst-section {
+ padding-top: 5rem;
+ padding-bottom: 5rem;
+}
+
+.vst-carousel-panel {
+ background-color: $panel;
+ overflow: hidden;
+ border: lighten($panel, 8%) solid 2px;
+ border-radius: 0.5rem;
+ overflow: hidden;
+ position: relative;
+
+ video {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+}
+
+.vst-styled-videos-panel {
+ width: 100%;
+ height: 100%;
+ background-color: $panel;
+ overflow: hidden;
+ border: lighten($panel, 8%) solid 2px;
+ border-radius: 0.5rem;
+ overflow: hidden;
+ position: relative;
+ display: flex;
+ flex-wrap: wrap;
+
+ > div {
+ border-left: lighten($panel, 8%) solid 2px;
+ border-top: lighten($panel, 8%) solid 2px;
+ box-sizing: border-box;
+ }
+
+ > div:nth-child(-n + 2) {
+ border-top: none;
+ }
+
+ > div:nth-child(2n + 1) {
+ border-left: none;
+ }
+
+ video {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+}
+
+.vst-styled-videos-panel-overlay-text {
+ position: absolute;
+ z-index: 3;
+ top: 0;
+ left: 0;
+ color: white;
+ padding: 0.5rem;
+ display: flex;
+ height: auto;
+}
+
+.vst-styled-videos-panel-overlay-cta {
+ position: absolute;
+ z-index: 3;
+ bottom: 0;
+ right: 0;
+ color: $primary;
+ padding: 0.5rem;
+ display: flex;
+ height: auto;
+ align-items: flex-end;
+ justify-content: flex-end;
+ margin: 0;
+
+ .fy-badge {
+ background-color: rgba(
+ darken(desaturate($primary, 25%), 10%),
+ 40%
+ ) !important;
+ border: 2px solid rgba($primary, 60%) !important;
+ font-size: 12px;
+ padding: 0.12rem 0.36rem;
+
+ &:hover {
+ background-color: darken(desaturate($primary, 25%), 10%) !important;
+ border-color: darken(desaturate($primary, 25%), 10%) !important;
+ }
+ }
+}
+
+.swiper {
+ width: 100%;
+ margin: 0;
+ margin-left: auto;
+ margin-right: auto;
+ user-select: none;
+ -moz-user-select: none;
+ -khtml-user-select: none;
+ -webkit-user-select: none;
+
+ &.vst-swiper-main {
+ height: auto !important;
+ border-radius: 0.5rem;
+ overflow: hidden;
+ }
+
+ &.vst-swiper-thumbs {
+ height: auto !important;
+
+ .swiper-slide {
+ opacity: 0.4;
+ cursor: pointer;
+ transition: 0.2s;
+
+ .vst-carousel-panel {
+ border: lighten($panel, 15%) solid 2px;
+ }
+
+ &:hover {
+ opacity: 0.75;
+ }
+ }
+
+ .swiper-slide-thumb-active {
+ opacity: 1 !important;
+
+ .vst-carousel-panel {
+ border: $primary solid 2px;
+ }
+ }
+ }
+}
+
+.swiper-slide {
+ background-size: contain;
+ background-position: center;
+}
+
+.vst-swiper-main-overlay-text {
+ position: absolute;
+ z-index: 3;
+ top: 0;
+ left: 0;
+ color: white;
+ padding: 0.75rem;
+}
+
+@media (max-width: 992px) {
+ .vst-styled-videos-panel-overlay-cta {
+ padding: 0.25rem;
+
+ .fy-badge {
+ border-radius: 0.3rem;
+ border: 1px solid rgba($primary, 60%) !important;
+ font-size: 9px;
+ }
+ }
+
+ .vst-styled-videos-panel-overlay-text {
+ .fy-badge {
+ font-size: 11px;
+ }
+ }
+}
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.tsx
new file mode 100644
index 0000000000..708da7a754
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.tsx
@@ -0,0 +1,246 @@
+import { Badge, Panel } from "components/common";
+import React, { useEffect, useRef, useState } from "react";
+import "./VstSectionV2.scss";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/free-mode";
+import "swiper/css/navigation";
+import "swiper/css/thumbs";
+import { Navigation, Thumbs } from "swiper/modules";
+import { Swiper as SwiperType } from "swiper/types";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+ faArrowDownLong,
+ faArrowRightLong,
+} from "@fortawesome/pro-solid-svg-icons";
+import TypeformButton from "components/common/TypeformButton";
+// import { Link } from "react-router-dom";
+
+interface VstSectionV2Props {}
+
+export default function VstSectionV2(props: VstSectionV2Props) {
+ const [thumbsSwiper, setThumbsSwiper] = useState(null);
+ const [activeIndex, setActiveIndex] = useState(0);
+ const [isPlaying, setIsPlaying] = useState(true);
+
+ // const togglePlayback = () => {
+ // setIsPlaying(!isPlaying);
+ // };
+
+ const handleVideoPlay = () => {
+ if (!isPlaying) {
+ setIsPlaying(true);
+ }
+ };
+
+ const handleVideoPause = () => {
+ if (isPlaying) {
+ setIsPlaying(false);
+ }
+ };
+
+ const videoRef = useRef(null);
+
+ useEffect(() => {
+ if (videoRef.current) {
+ if (isPlaying) {
+ videoRef.current.play();
+ } else {
+ videoRef.current.pause();
+ }
+ }
+ }, [isPlaying]);
+
+ const videoSet = [
+ {
+ src: "/videos/landing/vst/1-original.mp4",
+ styledVideos: [
+ {
+ src: "/videos/landing/vst/1-2d_flat_anime.mp4",
+ label: "2D Flat Anime",
+ ctaLink: "/video-styletransfer",
+ },
+ {
+ src: "/videos/landing/vst/1-3d_cartoon.mp4",
+ label: "3D Cartoon",
+ ctaLink: "/video-styletransfer",
+ },
+ {
+ src: "/videos/landing/vst/1-ink_bw.mp4",
+ label: "Ink B&W",
+ ctaLink: "/video-styletransfer",
+ },
+ {
+ src: "/videos/landing/vst/1-origami.mp4",
+ label: "Origami",
+ ctaLink: "/video-styletransfer",
+ },
+ ],
+ },
+ {
+ src: "/videos/landing/vst/2-original.mp4",
+ styledVideos: [
+ {
+ src: "/videos/landing/vst/2-2d_flat_anime.mp4",
+ label: "2D Flat Anime",
+ ctaLink: "/video-styletransfer",
+ },
+ {
+ src: "/videos/landing/vst/2-pop_art.mp4",
+ label: "Pop Art",
+ ctaLink: "/video-styletransfer",
+ },
+ {
+ src: "/videos/landing/vst/2-ink_splash.mp4",
+ label: "Ink Splash",
+ ctaLink: "/video-styletransfer",
+ },
+ {
+ src: "/videos/landing/vst/2-origami.mp4",
+ label: "Origami",
+ ctaLink: "/video-styletransfer",
+ },
+ ],
+ },
+ ];
+
+ const [currentStyledVideos, setCurrentStyledVideos] = useState(
+ videoSet[0].styledVideos
+ );
+
+ return (
+
+
+ );
+}
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/index.ts b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/index.ts
new file mode 100644
index 0000000000..a1e3f724e7
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/index.ts
@@ -0,0 +1 @@
+export { default } from "./VstSectionV2";
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/FakeYouLandingBody.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/FakeYouLandingBody.tsx
index 88ee7c3dea..ea5ddf0a1e 100644
--- a/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/FakeYouLandingBody.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/FakeYouLandingBody.tsx
@@ -1,9 +1,9 @@
import { faDiscord, faTwitter } from "@fortawesome/free-brands-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Panel } from "components/common";
+// import { Panel } from "components/common";
import { useLocalize } from "hooks";
import React from "react";
-import { Link } from "react-router-dom";
+// import { Link } from "react-router-dom";
interface FakeYouLandingBodyProps {}
@@ -12,7 +12,7 @@ export default function FakeYouLandingBody(props: FakeYouLandingBodyProps) {
return (
<>
-
+ {/*
-
+ */}
-
{t("productsTitle")}
+
+
+
+ );
+}
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV1/VstSectionV1.scss b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV1/VstSectionV1.scss
new file mode 100644
index 0000000000..269573d50b
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV1/VstSectionV1.scss
@@ -0,0 +1,84 @@
+@import "scss/colours.scss";
+
+.vst-section {
+ padding-top: 5rem;
+ padding-bottom: 5rem;
+}
+
+.vst-sbs-panel {
+ background-color: $panel;
+ height: 400px;
+ overflow: hidden;
+ border: lighten($panel, 8%) solid 2px;
+ border-radius: 0.5rem;
+ overflow: hidden;
+}
+
+.vst-sbs-video-cover {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ z-index: 1;
+}
+
+.vst-sbs-video-overlay-container {
+ position: relative;
+ height: 100%;
+}
+
+.vst-sbs-video-overlay-text {
+ position: absolute;
+ z-index: 3;
+ top: 0;
+ left: 0;
+ color: white;
+ padding: 0.5rem;
+}
+
+.vst-sbs-video-overlay-cta {
+ position: absolute;
+ z-index: 3;
+ bottom: 0;
+ right: 0;
+ color: $white;
+ font-weight: 500;
+ padding: 0.5rem;
+
+ .fy-badge {
+ background-color: rgba(
+ darken(desaturate($primary, 25%), 10%),
+ 60%
+ ) !important;
+ border: 2px solid rgba($primary, 60%) !important;
+ font-size: 12px;
+ padding: 0.12rem 0.36rem;
+
+ &:hover {
+ background-color: darken(desaturate($primary, 25%), 10%) !important;
+ border-color: darken(desaturate($primary, 25%), 10%) !important;
+ }
+ }
+}
+
+@media (max-width: 992px) {
+ .vst-sbs-panel {
+ height: 400px;
+ }
+
+ .vst-sbs-video-overlay-cta {
+ padding: 0.25rem;
+
+ .fy-badge {
+ border-radius: 0.3rem;
+ border: 1px solid rgba($primary, 60%) !important;
+ font-size: 10px;
+ }
+ }
+}
+
+@media (max-width: 768px) {
+ .vst-sbs-panel {
+ height: 240px;
+ }
+}
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV1/VstSectionV1.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV1/VstSectionV1.tsx
new file mode 100644
index 0000000000..b73ab91cb6
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV1/VstSectionV1.tsx
@@ -0,0 +1,102 @@
+import { Badge, Button, Panel } from "components/common";
+import React, { useEffect, useRef, useState } from "react";
+import "./VstSectionV1.scss";
+import { faArrowRight } from "@fortawesome/pro-solid-svg-icons";
+// import { Link } from "react-router-dom";
+
+interface VstSectionV1Props {}
+
+const columns = [
+ {
+ title: "Original Video",
+ videoSrc: "/videos/landing/vst/1-original.mp4",
+ ctaLink: "/video-styletransfer",
+ },
+ {
+ title: "2D Flat Anime",
+ videoSrc: "/videos/landing/vst/1-2d_flat_anime.mp4",
+ ctaLink: "/video-styletransfer",
+ },
+ {
+ title: "Ink B&W",
+ videoSrc: "/videos/landing/vst/1-ink_bw.mp4",
+ ctaLink: "/video-styletransfer",
+ },
+ {
+ title: "Origami",
+ videoSrc: "/videos/landing/vst/1-origami.mp4",
+ ctaLink: "/video-styletransfer",
+ },
+];
+
+export default function VstSectionV1(props: VstSectionV1Props) {
+ const videosRef = useRef
+
+ Enabling Anyone to Make Professional Film, Animation, and Music
++ StorytellerAI's powerful new engine combines Generative AI and + User Generated Content to radically democratize both audio and video production. +
+ +
+
+
+ Video Style Transfer
++ Transform your videos effortlessly with video style transfer. Apply + unique styles and effects to create visually captivating content. +
+
+
+
+
+ {columns.map((column, index) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+ {/*
+
+
*/}
+
+
+ Video Style Transfer
++ Transform your videos effortlessly with video style transfer. Apply + unique styles and effects to create visually captivating content. +
+
+ {/* */}
+
+
+
+
+ {
+ setCurrentStyledVideos(videoSet[swiper.activeIndex].styledVideos);
+ setActiveIndex(swiper.activeIndex);
+ }}
+ >
+
+
+ ))}
+
+ setThumbsSwiper(swiper)}
+ loop={false}
+ spaceBetween={10}
+ slidesPerView={3}
+ modules={[Navigation, Thumbs]}
+ className="vst-swiper-thumbs"
+ >
+ {videoSet.map((video, index) => (
+
+
+ ))}
+
+
+
+
+ {videoSet.map((video, index) => (
+
+
+
+
+
+
+
+
+
+
+
+ {currentStyledVideos.map((styledVideo, index) => (
+
+
+
+
+ ))}
+
+
+ {/*
+
+
*/}
+
@@ -48,9 +48,9 @@ export default function FakeYouLandingBody(props: FakeYouLandingBodyProps) {
+
;
+ ttsInferenceJobs: Array;
+ enqueueInferenceJob: (
+ jobToken: string,
+ frontendInferenceJobType: FrontendInferenceJobType
+ ) => void;
+ inferenceJobsByCategory: Map>;
+ enqueueTtsJob: (jobToken: string) => void;
+}
-export default function StorytellerLanding(props: StorytellerLandingProps) {
- const { t } = useLocalize("LandingPage");
+export default function StorytellerLanding({
+ sessionWrapper,
+ sessionSubscriptionsWrapper,
+ inferenceJobs,
+ ttsInferenceJobs,
+ enqueueInferenceJob,
+ inferenceJobsByCategory,
+ enqueueTtsJob,
+}: StorytellerLandingProps) {
+ // const { t } = useLocalize("LandingPage");
return (
<>
-
+ {/*
+
-
+ */}
-
+ {/*
);
-}
+});
+
+export default MediaAudioPlayer;
diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx
index 258e40b70a..bb49601133 100644
--- a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx
@@ -1,6 +1,6 @@
import React, { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
-import MediaAudioComponent from "./MediaAudioComponent";
+import MediaAudioPlayer from "./MediaAudioPlayer";
import MediaVideoComponent from "./MediaVideoComponent";
import { MediaFile } from "@storyteller/components/src/api/media_files/GetMediaFile";
import Container from "components/common/Container";
@@ -64,23 +64,27 @@ export default function MediaPage() {
},
});
const batchToken = mediaFile?.maybe_batch_token;
- const [images, setImages] = useState([]);
+ const [images, setImages] = useState<{ url: string; token: string }[]>([]);
const bucketConfig = new BucketConfig();
const timeCreated = moment(mediaFile?.created_at || "").fromNow();
const dateCreated = moment(mediaFile?.created_at || "").format("LLL");
const [buttonLabel, setButtonLabel] = useState("Copy");
const [copyPositiveButtonText, setCopyPositiveButtonText] = useState("Copy");
const [copyNegativeButtonText, setCopyNegativeButtonText] = useState("Copy");
+ const [activeSlide, setActiveSlide] = useState({ url: "", token: "" });
+
+ // Inside MediaPage.tsx
useEffect(() => {
if (batchToken) {
GetMediaBatchImages(batchToken, {}, {})
.then(response => {
if (response.success) {
- const imageUrls = response.results.map(result =>
- bucketConfig.getGcsUrl(result.public_bucket_path)
- );
- setImages(imageUrls);
+ const mediaItems = response.results.map(result => ({
+ url: bucketConfig.getGcsUrl(result.public_bucket_path),
+ token: result.token,
+ }));
+ setImages(mediaItems);
} else {
console.error("Failed to fetch batch images");
}
@@ -111,6 +115,10 @@ export default function MediaPage() {
}
};
+ const handleActiveSlideChange = (image: any) => {
+ setActiveSlide(image);
+ };
+
const promptSection = (
<>
{prompt?.maybe_positive_prompt && (
@@ -171,7 +179,9 @@ export default function MediaPage() {
{/* Voice model name that is used to generate the audio */}
{/*(null);
const [forceUpdateKey, setForceUpdateKey] = useState(0);
const [isPortrait, setIsPortrait] = useState(false);
+ const [initialSlide, setInitialSlide] = useState(0);
+ const [isFirstLoad, setIsFirstLoad] = useState(true);
useEffect(() => {
- images.forEach(imgSrc => {
+ const currentUrl = new URL(window.location.href);
+ const currentToken = currentUrl.pathname.split("/media/")[1].split("?")[0];
+ const initialSlideIndex = images.findIndex(
+ image => image.token === currentToken
+ );
+ if (initialSlideIndex !== -1) {
+ setInitialSlide(initialSlideIndex);
+ }
+ setIsFirstLoad(false);
+ }, [images]);
+
+ useEffect(() => {
+ images.forEach(image => {
const img = new Image();
img.onload = () => {
- // If any image is portrait, update isPortrait to true
if (img.height > img.width && !isPortrait) {
setIsPortrait(true);
}
};
- img.src = imgSrc;
+ img.src = image.url;
});
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [images]);
+ }, [images, isPortrait]);
useEffect(() => {
if (images.length > 0) {
- // Force re-render of the Swiper component by updating a key
setForceUpdateKey(prevKey => prevKey + 1);
}
}, [images]);
@@ -43,6 +63,20 @@ export default function SdBatchMediaPanel({ images }: SdCoverImagePanelProps) {
setThumbsSwiper(swiper);
};
+ const handleSlideChange = (swiper: SwiperType) => {
+ if (!isFirstLoad) {
+ // Only update URL if it's not the first load
+ const currentSlideIndex = swiper.realIndex;
+ const currentImage = images[currentSlideIndex];
+ const currentImageToken = images[currentSlideIndex].token;
+ const baseUrl = window.location.href.split("/media/")[0]; // Get the base URL before the token
+ const queryParams = window.location.search; // Get query parameters if any
+ const newUrl = `${baseUrl}/media/${currentImageToken}${queryParams}`; // Construct the new URL
+ window.history.replaceState(null, "", newUrl); // Replace the current history state
+ onActiveSlideChange(currentImage);
+ }
+ };
+
const secondSwiperClass = `secondSwiper ${
isPortrait ? "portrait" : "landscape"
}`;
@@ -58,29 +92,30 @@ export default function SdBatchMediaPanel({ images }: SdCoverImagePanelProps) {
modules={[FreeMode, Navigation, Thumbs]}
className={secondSwiperClass}
slidesPerView={1}
- initialSlide={0}
+ initialSlide={initialSlide}
+ onSlideChange={handleSlideChange}
>
- {images.map((imgSrc, index) => (
+ {images.map((image, index) => (
- 
+ 
))}
{images.length > 1 && (
- {images.map((imgSrc, index) => (
+ {images.map((image, index) => (
-
+
))}
diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioVST/StudioVSTPage.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioVST/StudioVSTPage.tsx
index 8b9f9712f1..c0dc897d5f 100644
--- a/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioVST/StudioVSTPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioVST/StudioVSTPage.tsx
@@ -1,12 +1,6 @@
import React, { useRef, useState } from "react";
import { NavLink, useParams, useHistory } from "react-router-dom";
-import {
- Button,
- Container,
- Panel,
- SelectionBubbles,
- TextArea,
-} from "components/common";
+import { Button, Container, Panel, TextArea } from "components/common";
import VideoQuickTrim, {
QuickTrimData,
} from "components/common/VideoQuickTrim";
@@ -15,7 +9,7 @@ import EnqueueVideoStyleTransfer from "@storyteller/components/src/api/video_sty
import { initialValues } from "./defaultValues";
import { mapRequest, VSTType } from "./helpers";
import LoadingSpinner from "components/common/LoadingSpinner";
-// import SectionAdvanceOptions from "./sectionAdvanceOptions";
+import SelectionBubblesV2 from "components/common/SelectionBubblesV2";
export default function PageVSTApp() {
const { jobToken } = useParams<{ jobToken: string }>();
@@ -29,15 +23,14 @@ export default function PageVSTApp() {
// fileToken: job?.maybe_result?.entity_token || "",
});
- console.log(job);
- console.log(job?.maybe_result);
- console.log(job?.maybe_result?.entity_token);
+ // console.log(job);
+ // console.log(job?.maybe_result);
+ // console.log(job?.maybe_result?.entity_token);
const handleOnChange = (val: {
[key: string]: number | string | boolean | undefined;
}) => {
setVstValues(curr => ({ ...curr, ...val }));
- console.log("VST Values", vstValues);
};
const handleGenerate = () => {
@@ -54,7 +47,7 @@ export default function PageVSTApp() {
EnqueueVideoStyleTransfer(request).then(res => {
if (res.success && res.inference_job_token) {
- console.log("Job enqueued successfully", res.inference_job_token);
+ // console.log("Job enqueued successfully", res.inference_job_token);
history.push(`/studio-intro/result/${res.inference_job_token}`);
} else {
console.log("Failed to enqueue job", res);
@@ -80,19 +73,39 @@ export default function PageVSTApp() {
};
}
- const styleMap: { [key: string]: string } = {
- Anime: "weight_yqexh77ntqyawzgh9fzash798", // set SD Model Weight Tokens, currently hardcoded all to Anime style
- Pixel: "weight_yqexh77ntqyawzgh9fzash798",
- Painting: "weight_yqexh77ntqyawzgh9fzash798",
- };
+ const styleOptions = [
+ {
+ label: "Anime",
+ imageUrl: "/images/dummy-image.jpg",
+ token: "weight_yqexh77ntqyawzgh9fzash798",
+ },
+ {
+ label: "Pixel",
+ imageUrl: "/images/dummy-image-2.jpg",
+ token: "weight_yqexh77ntqyawzgh9fzash798",
+ },
+ {
+ label: "Painting",
+ imageUrl: "/images/dummy-image-3.jpg",
+ token: "weight_yqexh77ntqyawzgh9fzash798",
+ },
+ {
+ label: "Ink",
+ imageUrl: "/images/dummy-image-4.jpg",
+ token: "weight_yqexh77ntqyawzgh9fzash798",
+ },
+ ];
- const handleStyleSelection = (selected: string) => {
- const selectedSdModelToken = styleMap[selected];
- setVstValues(curr => ({ ...curr, sdModelToken: selectedSdModelToken }));
+ const handleStyleSelection = (selectedLabel: any) => {
+ const selectedOption = styleOptions.find(
+ option => option.label === selectedLabel
+ );
+ const selectedSdModelToken = selectedOption ? selectedOption.token : null;
+ if (selectedSdModelToken) {
+ setVstValues(curr => ({ ...curr, sdModelToken: selectedSdModelToken }));
+ }
};
- const styleOptions = Object.keys(styleMap);
-
if (!jobToken) {
history.push("/");
}
@@ -130,10 +143,12 @@ export default function PageVSTApp() {
Debug of a certain Key-Values set {title} {`${key}`} {`${val}`} (exampleJSON);
+ const handleSendRequest = ()=>{
+ EnqueueVideoStyleTransfer(JSON.parse(jsonRequest)).then(res => {
+ if (res.success && res.inference_job_token) {
+ dispatchPageState({
+ type: "enqueueJobSuccess",
+ payload: {
+ inferenceJobToken: res.inference_job_token,
+ },
+ });
+ } else {
+ alert("Error, Check Console Log");
+ console.log(res);
+ }
+ });
+ dispatchPageState({ type: "enqueueJob" });
+ history.push(`${parentPath}/jobs`);
+ }
+
+ return (
+
+
+
{t("communityTitle")}
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/StorytellerLanding.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/StorytellerLanding.tsx index 0814566a11..f388851c2c 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/StorytellerLanding.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/StorytellerLanding.tsx @@ -1,24 +1,50 @@ -import { faDiscord, faTwitter } from "@fortawesome/free-brands-svg-icons"; -import { - faArrowRight, - faCompass, - faMessageDots, - faWaveformLines, -} from "@fortawesome/pro-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Button, Container, Input, Panel, Select } from "components/common"; -import { useLocalize } from "hooks"; import React from "react"; -import { Link } from "react-router-dom"; +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; +import { + FrontendInferenceJobType, + InferenceJob, +} from "@storyteller/components/src/jobs/InferenceJob"; +import { TtsInferenceJob } from "@storyteller/components/src/jobs/TtsInferenceJobs"; -interface StorytellerLandingProps {} +interface StorytellerLandingProps { + sessionWrapper: SessionWrapper; + sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; + inferenceJobs: Array
@@ -65,9 +91,9 @@ export default function StorytellerLanding(props: StorytellerLandingProps) {
+ {/*
-
+
*/}
-
@@ -184,9 +210,9 @@ export default function StorytellerLanding(props: StorytellerLandingProps) {
{t("communityTitle")}
@@ -218,7 +244,7 @@ export default function StorytellerLanding(props: StorytellerLandingProps) { className="dots-left-bottom me-3" /> - + */} ); } diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaAudioPlayer.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaAudioPlayer.tsx index 283b7dbdee..90f3ec07a1 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaAudioPlayer.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaAudioPlayer.tsx @@ -1,6 +1,5 @@ -import React from "react"; +import React, { useEffect, useState, memo } from "react"; import WaveSurfer from "wavesurfer.js"; -import { useEffect, useState } from "react"; import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; import { faPlay, @@ -21,7 +20,7 @@ interface MediaAudioPlayerProps { mediaFile: MediaFile; } -export default function MediaAudioPlayer({ mediaFile }: MediaAudioPlayerProps) { +const MediaAudioPlayer = memo(({ mediaFile }: MediaAudioPlayerProps) => { let [isPlaying, setIsPlaying] = useState(false); let [isRepeating, setIsRepeating] = useState(false); let [playbackSpeed, setPlaybackSpeed] = useState(PlaybackSpeed.NORMAL); @@ -29,7 +28,7 @@ export default function MediaAudioPlayer({ mediaFile }: MediaAudioPlayerProps) { useEffect(() => { const wavesurferInstance = WaveSurfer.create({ - container: "#waveform", // Previousy I used 'this.ref.current' and React.createRef() + container: "#waveform", height: 200, responsive: true, waveColor: "#cbcbcb", @@ -49,11 +48,12 @@ export default function MediaAudioPlayer({ mediaFile }: MediaAudioPlayerProps) { if (waveSurfer) { waveSurfer.load(audioLink); } - }, [waveSurfer, mediaFile]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [waveSurfer, mediaFile.public_bucket_path, BucketConfig]); useEffect(() => { if (waveSurfer) { - waveSurfer.unAll(); // NB: Otherwise we keep reinstalling the hooks and cause chaos + waveSurfer.unAll(); waveSurfer.on("pause", () => { setIsPlaying(waveSurfer!.isPlaying()); }); @@ -83,7 +83,7 @@ export default function MediaAudioPlayer({ mediaFile }: MediaAudioPlayerProps) { switch (playbackSpeed) { case PlaybackSpeed.NORMAL: nextSpeed = PlaybackSpeed.DOUBLE; - waveSurfer!.setPlaybackRate(1.5); // Okay, so a lie... + waveSurfer!.setPlaybackRate(1.5); break; case PlaybackSpeed.DOUBLE: nextSpeed = PlaybackSpeed.HALF; @@ -97,51 +97,36 @@ export default function MediaAudioPlayer({ mediaFile }: MediaAudioPlayerProps) { setPlaybackSpeed(nextSpeed); }; - let playButtonIcon = faPlay; - if (isPlaying) { - playButtonIcon = faPause; - } - + let playButtonIcon = isPlaying ? faPause : faPlay; let repeatButtonIcon = isRepeating ? faRepeat : faArrowRight; - - let speedButtonText = "1x"; - switch (playbackSpeed) { - case PlaybackSpeed.NORMAL: - speedButtonText = "1x"; - break; - case PlaybackSpeed.DOUBLE: - speedButtonText = "2x"; - break; - case PlaybackSpeed.HALF: - speedButtonText = "0.5x"; - break; - } + let speedButtonText = + playbackSpeed === PlaybackSpeed.NORMAL + ? "1x" + : playbackSpeed === PlaybackSpeed.DOUBLE + ? "2x" + : "0.5x"; return (
-
[Voice Model Name]
*/} -
+
{/* Show TTS text input if it is a TTS result */}
{mediaFile.maybe_text_transcript && (
@@ -198,9 +208,16 @@ export default function MediaPage() {
);
case MediaFileType.Image:
- let sdMediaImage = ["/images/avatars/default-pfp.png"];
+ let sdMediaImage = [
+ { url: "/images/avatars/default-pfp.png", token: "default" },
+ ];
if (mediaFile.public_bucket_path) {
- sdMediaImage = [bucketConfig.getGcsUrl(mediaFile.public_bucket_path)];
+ sdMediaImage = [
+ {
+ url: bucketConfig.getGcsUrl(mediaFile.public_bucket_path),
+ token: mediaFile?.token,
+ },
+ ];
}
return (
@@ -208,6 +225,7 @@ export default function MediaPage() {
-
diff --git a/packages/fakeyou.com/src/v2/view/pages/text_to_image/TextToImagePage.tsx b/packages/fakeyou.com/src/v2/view/pages/text_to_image/TextToImagePage.tsx
index 5bfcaaef06..a55221cb27 100644
--- a/packages/fakeyou.com/src/v2/view/pages/text_to_image/TextToImagePage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/text_to_image/TextToImagePage.tsx
@@ -9,6 +9,7 @@ import {
import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
import { faMessageImage } from "@fortawesome/pro-solid-svg-icons";
import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
//import { StudioNotAvailable } from "v2/view/_common/StudioNotAvailable";
interface TextToImagePageProps {
@@ -31,6 +32,8 @@ export default function TextToImagePage({
// return
+
+