(() => {
+ return(
+
+
+
+ );
+ });
+
+ return (
+
+ );
+});
diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/withScrubbing.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/withScrubbing.tsx
new file mode 100644
index 0000000000..972864bf5c
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/withScrubbing.tsx
@@ -0,0 +1,150 @@
+import React,{
+ memo,
+ useEffect,
+ useRef,
+ useState,
+ useLayoutEffect,
+} from 'react';
+
+export interface withScrubbingPropsI {
+ debug?: boolean
+ boundingWidth: number;
+ scrubberWidth: number;
+ scrubPosition?: number; // scrubber location as px
+ styleOverride?: {[key: string]: string|number };
+ onScrubChanged?: (newPos: number)=>void;
+ //return scrubber location as px
+}
+
+type withSrcubbingStates = {
+ currLeftOffset: number,
+ prevLeftOffset: number;
+ pointerStartPos: number;
+}
+
+export const withScrubbing = (Component: React.ComponentType
) => memo(({
+ debug: propsDebug = false,
+ boundingWidth,
+ scrubberWidth,
+ scrubPosition: propsLeftOffset = 0,
+ styleOverride = {},
+ onScrubChanged,
+ ...rest
+}: withScrubbingPropsI) => {
+ const debug = false ;//|| propsDebug;
+ if (debug) console.log(`withSCRUBBING reRENDERING!! `);
+
+ const refEl = useRef(null);
+ const refListener = useRef(Date.now());
+
+ const [{
+ currLeftOffset, pointerStartPos,
+ prevLeftOffset
+ }, setStates] = useState({
+ currLeftOffset: propsLeftOffset,
+ prevLeftOffset: propsLeftOffset,
+ pointerStartPos: -1 // negative denotes pointer not engaged
+ });
+
+ useLayoutEffect(() => {
+ // if (debug) console.log(`withSCRUBBING useLAYOUTeffect!! `);
+ function handleScrubStart (e: MouseEvent) {
+ if(refEl.current){
+ if(refEl.current.contains(e.target as Node)){
+ setStates((curr)=>({
+ ...curr,
+ pointerStartPos: e.clientX
+ }));
+ return true;
+ }
+ }
+ };
+ function handleScrubEnd (e: MouseEvent){
+ e.preventDefault();
+ e.stopPropagation();
+ setStates((curr)=>({
+ ...curr,
+ pointerStartPos: -1,
+ prevLeftOffset: curr.currLeftOffset,
+ setBySelf: Date.now(),
+ }));
+ };
+ function handleScrubMove (e: MouseEvent){
+ e.preventDefault();
+ e.stopPropagation();
+ setStates((curr)=>{
+ if(curr.pointerStartPos >= 0 && curr.pointerStartPos!==null){
+ let newLeftOffset = curr.prevLeftOffset + e.clientX - curr.pointerStartPos;
+ if (newLeftOffset + scrubberWidth > boundingWidth) {
+ newLeftOffset = boundingWidth - scrubberWidth;
+ }else if(newLeftOffset < 0) {
+ newLeftOffset = 0;
+ }
+ if(newLeftOffset !== curr.currLeftOffset){
+ return{
+ ...curr,
+ currLeftOffset: newLeftOffset,
+ }
+ }
+ }
+ return curr;
+ });
+ };
+ if(!(window as any)[`listener-id-${refListener}`]){
+ (window as any)[`listender-id-${refListener}`] = true;
+ window.addEventListener("mousedown", handleScrubStart);
+ window.addEventListener("mouseup", handleScrubEnd);
+ window.addEventListener("mousemove", handleScrubMove);
+ return () => {
+ (window as any)[`listener-id-${refListener}`] = false;
+ window.removeEventListener("mousedown", handleScrubStart);
+ window.removeEventListener("mouseup", handleScrubEnd);
+ window.removeEventListener("mousemove", handleScrubMove);
+ };
+ }
+ }, [scrubberWidth, boundingWidth]);
+
+ useEffect(()=>{
+ // if (debug) console.log(`withSCRUBBING useEFFECT!! `);
+ if(onScrubChanged && boundingWidth > 0 && prevLeftOffset >= 0 && propsLeftOffset !== prevLeftOffset){
+ onScrubChanged(prevLeftOffset);
+ }
+ },[propsLeftOffset, prevLeftOffset, boundingWidth, onScrubChanged]);
+
+ useEffect(()=>{
+ // this takes a forced reset on leftoffset
+ setStates((curr)=>{
+ if(curr.prevLeftOffset === curr.currLeftOffset
+ && propsLeftOffset !== curr.prevLeftOffset
+ && propsLeftOffset !== curr.prevLeftOffset
+ ){
+ return {
+ ...curr,
+ currLeftOffset: propsLeftOffset, // in pixels
+ prevLeftOffset: propsLeftOffset, //in pixels
+ }
+ }else{
+ return curr
+ }
+ });
+ }, [propsLeftOffset])
+
+ return(
+ =0 ? 'grabbing': 'grab',
+ ...styleOverride
+ }}
+ >
+
+
+ );
+});
diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/helpers.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/helpers.tsx
deleted file mode 100644
index cbe19a389a..0000000000
--- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/helpers.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-export function roundTo2Dec(floaty:number){
- return Math.round(floaty*100)/100;
-}
-export function fractionToPercentage(fraction:number){
- return roundTo2Dec(fraction * 100);
-}
-export function formatSecondsToHHMMSSCS(seconds:number){
- //example of the ISO String: 1970-01-01T00:01:40.774Z
- const isoString = new Date(seconds * 1000).toISOString();
- if(seconds > 3600)
- return isoString.substring(11, 19) + "." + isoString.substring(20, 22)
- else
- return isoString.substring(14, 19) + "." + isoString.substring(20, 22);
-}
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/index.ts b/packages/fakeyou.com/src/components/common/VideoQuickTrim/index.ts
index 7e49b01a6f..8f25d05b73 100644
--- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/index.ts
+++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/index.ts
@@ -1,5 +1,5 @@
-import VideoQuickTrim from './VideoQuickTrim'
-import { QuickTrimData } from './types';
+import {VideoQuickTrim} from './VideoQuickTrim'
+import { QuickTrimData } from './utilities';
export type { QuickTrimData };
export default VideoQuickTrim;
diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/reducer.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/reducer.tsx
new file mode 100644
index 0000000000..18bb54f6a3
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/reducer.tsx
@@ -0,0 +1,223 @@
+import {
+ MIN_VID_DURATION,
+ TIME_CURSOR_WIDTH,
+ TRIM_OPTIONS,
+ roundToMilliseconds
+} from "./utilities";
+
+export enum STATE_STATUSES {
+ INIT = "init",
+ VIDEO_METADATA_LOADED = "video_metadata_loaded",
+ LOAD_ORDER_ERROR = "load_order_error",
+ ACTION_TYPE_ERROR = "no_such_action_type"
+};
+
+export enum PLAYPUASE_STATES{
+ NOT_READY = "not_ready",
+ READY = "ready",
+ PLAYING = "playing",
+ PAUSED = "paused",
+ ENDED = "ended",
+}
+
+export type State = {
+ status: string;
+ errorMessage: string[];
+
+ playpause: string;
+
+ canNotTrim: boolean | undefined;
+ trimReset: number;
+ trimDuration: number | undefined;
+ trimStartSeconds: number | undefined;
+ trimEndSeconds: number | undefined;
+ videoLoadProgress: TimeRanges | undefined;
+ videoDuration: number | undefined;
+
+
+ playbarWidth: number | undefined;
+ scrubberWidth: number | undefined;
+ timeCursorOffset: number | undefined;
+
+ isMuted: boolean;
+ isRepeatOn: boolean;
+};
+
+export const initialState = {
+ status: STATE_STATUSES.INIT,
+ errorMessage : [],
+ playpause: PLAYPUASE_STATES.NOT_READY,
+ canNotTrim: undefined,
+ trimReset: Date.now(),
+ trimDuration: undefined,
+ trimStartSeconds: undefined,
+ trimEndSeconds: undefined,
+ videoLoadProgress: undefined,
+ videoDuration: undefined,
+ playbarWidth: undefined,
+ scrubberWidth: undefined,
+ timeCursorOffset: undefined,
+ isMuted: false,
+ isRepeatOn: true,
+}
+
+export enum ACTION_TYPES {
+ RESET = "reset",
+ TOGGLE_REPEAT = "toggle_repeat",
+ TOGGLE_MUTE = "toggle_mute",
+ ON_LOADED_METADATA = "on_loaded_metadata",
+ MOVE_TIMECURSOR = "move_timecursor",
+ SET_PLAYPUASE = "set_playpause",
+ SET_PLAYBAR_LAYOUT = "set_playbar_layout",
+ SET_TRIM_DURATION = "set_trim_duration",
+ SET_VIDEO_LOAD_PROGRESS = "set_video_load_progress",
+ MOVE_TRIM = "move_trim"
+}
+
+export type Action =
+ | {type: ACTION_TYPES.RESET}
+ | {type: ACTION_TYPES.TOGGLE_REPEAT, payload?:{isRepeatOn: boolean}}
+ | {type: ACTION_TYPES.TOGGLE_MUTE}
+ | {type: ACTION_TYPES.ON_LOADED_METADATA, payload: {videoDuration: number}}
+ | {type: ACTION_TYPES.MOVE_TIMECURSOR, payload:{ timeCursorOffset: number}}
+ | {type: ACTION_TYPES.SET_PLAYPUASE, payload:{ playpause: string}}
+ | {type: ACTION_TYPES.SET_PLAYBAR_LAYOUT, payload:{ playbarWidth: number}}
+ | {type: ACTION_TYPES.SET_TRIM_DURATION, payload:{ trimDurationString: string}}
+ | {type: ACTION_TYPES.SET_VIDEO_LOAD_PROGRESS, payload: {
+ videoLoadProgress: TimeRanges
+ }}
+ | {type: ACTION_TYPES.MOVE_TRIM, payload:{
+ trimStartSeconds: number,
+ trimEndSeconds: number,
+ }}
+;
+
+export function reducer(state: State, action: Action): State {
+ console.log("VideoQuickTrim State Dispatch");
+ console.log(action);
+
+ switch(action.type){
+ case ACTION_TYPES.SET_PLAYPUASE:{
+ return {...state, ...action.payload};
+ }
+ case ACTION_TYPES.TOGGLE_REPEAT:{
+ if(action.payload){
+ return {...state, isRepeatOn: action.payload.isRepeatOn}
+ }
+ return {...state, isRepeatOn: !state.isRepeatOn}
+ }
+ case ACTION_TYPES.TOGGLE_MUTE:{
+ return {...state, isMuted: !state.isMuted}
+ }
+ case ACTION_TYPES.ON_LOADED_METADATA:{
+ if(action.payload.videoDuration >= MIN_VID_DURATION){
+ return{
+ ...state,
+ status: STATE_STATUSES.VIDEO_METADATA_LOADED,
+ videoDuration: action.payload.videoDuration,
+ canNotTrim: false,
+ trimDuration: 3,
+ trimStartSeconds: 0,
+ trimEndSeconds: 3,
+ }
+ }else{
+ return {
+ ...state,
+ videoDuration: action.payload.videoDuration,
+ canNotTrim: true
+ }
+ }
+ }
+ case ACTION_TYPES.SET_VIDEO_LOAD_PROGRESS:{
+ return{
+ ...state,
+ videoLoadProgress: action.payload.videoLoadProgress
+ };
+ }
+ case ACTION_TYPES.SET_PLAYBAR_LAYOUT:{
+ const newWidth = action.payload.playbarWidth;
+ const prevOffset = state.timeCursorOffset || 0;
+ if(state.trimDuration && state.videoDuration){
+ return {
+ ...state,
+ playpause: PLAYPUASE_STATES.READY,
+ playbarWidth: newWidth,
+ scrubberWidth: newWidth * (state.trimDuration / state.videoDuration),
+ timeCursorOffset: (newWidth-TIME_CURSOR_WIDTH)*(prevOffset/ state.videoDuration)
+ };
+ }else{
+ return{
+ ...state,
+ status: STATE_STATUSES.LOAD_ORDER_ERROR,
+ errorMessage: [...state.errorMessage, 'Setting playbar layout before video and trim are loaded']
+ }
+ }
+ }
+ case ACTION_TYPES.SET_TRIM_DURATION:{
+ const selected = action.payload.trimDurationString;
+ if( state.canNotTrim !== undefined
+ && state.canNotTrim === false
+ && state.playbarWidth !==undefined
+ && state.videoDuration !== undefined
+ && TRIM_OPTIONS[selected] <= state.videoDuration
+ && state.trimStartSeconds !== undefined
+ ){
+ let newTrimStart = state.trimStartSeconds;
+ let newTrimEnd = state.trimStartSeconds + TRIM_OPTIONS[selected];
+ if (newTrimEnd > state.videoDuration){
+ newTrimEnd = state.videoDuration;
+ if (state.videoDuration - TRIM_OPTIONS[selected] >=0) {
+ newTrimStart = roundToMilliseconds(state.videoDuration - TRIM_OPTIONS[selected]);
+ }else{
+ newTrimStart = 0;
+ }
+ }
+ return{
+ ...state,
+ trimDuration: newTrimEnd-newTrimStart,
+ trimStartSeconds: newTrimStart,
+ trimEndSeconds: newTrimEnd,
+ scrubberWidth: (newTrimEnd-newTrimStart)/state.videoDuration * state.playbarWidth,
+ }
+ }else{
+ return {
+ ...state,
+ status: STATE_STATUSES.LOAD_ORDER_ERROR,
+ errorMessage: [...state.errorMessage, 'Setting trim duration before video and trim are loaded']
+ }
+ }
+ }
+ case ACTION_TYPES.MOVE_TRIM:{
+ return{
+ ...state,
+ trimStartSeconds: roundToMilliseconds(action.payload.trimStartSeconds),
+ trimEndSeconds: roundToMilliseconds(action.payload.trimEndSeconds),
+ }
+ }
+ case ACTION_TYPES.MOVE_TIMECURSOR:{
+ return {
+ ...state,
+ timeCursorOffset: action.payload.timeCursorOffset
+ }
+ }
+ case ACTION_TYPES.RESET:{
+ return initialState
+ }
+ default:{
+ return {
+ ...state,
+ status: STATE_STATUSES.ACTION_TYPE_ERROR,
+ errorMessage: [...state.errorMessage, "Reducer Action switch's default case is reached"]
+ }
+ }
+ }
+};
+
+/*
+ const trimScrubberWidth = videoRef.current && playbarWidth > 0
+ ? trimDuration > 0 && trimDuration < videoRef.current.duration
+ ? (trimDuration / videoRef.current.duration * playbarWidth)
+ : playbarWidth
+ : 0;
+*/
+
diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss b/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss
index d45ce34e48..0dc6db8a49 100644
--- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss
+++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss
@@ -60,11 +60,11 @@ $playbar-height: 2rem;
background-color: #e66462;
opacity: 70%;
}
- p {
+ h1 {
position: absolute;
- margin-top: 230px;
- width: 100%;
- top: 0;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
}
}
.playbar {
@@ -80,17 +80,34 @@ $playbar-height: 2rem;
left: 0;
background-color: $panel-inner-border;
border-radius: 0 0 0.5rem 0.5rem;
+ overflow: hidden;
+
+ .played, .loaded{
+ position: absolute;
+ height: 100%;
+ top: 0;
+ left: 0;
+ opacity: 0.5;
+ }
+ .played{
+ background-color: $primary-dark;
+ }
+ .loaded{
+ background-color: $gray-600;
+ }
+ }
+
+ .scrubber-wrapper{
+ box-shadow: 1px 1px 4px 0px rgba(0,0,0,1);
}
.trim-scrubber{
- position: absolute;
- top: -1rem;
height: 3rem;
background-color: #e66462;
opacity: 0.8;
outline: 0.125rem $white solid;
border-top: 1rem $white solid;
border-radius: 0.25rem 0.25rem 0.125rem 0.125rem;
- cursor: grab;
+
display: flex;
justify-content: center;
@@ -103,9 +120,12 @@ $playbar-height: 2rem;
.playcursor {
position: absolute;
top: 0;
- width: 0.5rem;
+ width: 0.5rem; //=8px
+ transform: translate(-3px, 0px);
height: $playbar-height;
background-color: $white;
+ border-radius: 1px;
+ box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.2);
}
.playpause-external {
diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/types.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/types.tsx
deleted file mode 100644
index 4e3dd0db0d..0000000000
--- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/types.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-//For integration into other components
-export type QuickTrimData = {
- trimStartSeconds: number;
- trimEndSeconds: number;
-}
-
-// INTERNALS
-export type TrimStates = {
- canNotTrim: boolean;
- trimReset: Date;
- trimDuration: number;
- trimStart: number;
- trimEnd: number;
- maxDuration: number;
-}
-
-export type PlaybarStates = {
- playbarWidth: number;
- timeCursorOffset: number;
-}
diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/utilities.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/utilities.tsx
new file mode 100644
index 0000000000..0d8c907333
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/utilities.tsx
@@ -0,0 +1,29 @@
+//For integration into other components
+export const TIME_CURSOR_WIDTH = 8;
+export const MIN_VID_DURATION = 3;
+export const ONE_MS = 0.001;
+
+export type QuickTrimData = {
+ trimStartSeconds: number;
+ trimEndSeconds: number;
+}
+
+export function roundToMilliseconds(floaty:number){
+ return Math.round(floaty*1000)/1000;
+}
+
+export function formatSecondsToHHMMSSCS(seconds:number){
+ //example of the ISO String: 1970-01-01T00:01:40.774Z
+ const isoString = new Date(seconds * 1000).toISOString();
+ if(seconds > 3600)
+ return isoString.substring(11, 19) + "." + isoString.substring(20, 22)
+ else
+ return isoString.substring(14, 19) + "." + isoString.substring(20, 22);
+}
+
+export const TRIM_OPTIONS:{[key: string]: number } = {
+ "3s": 3,
+ "5s": 5,
+ "10s":10,
+ "15s":15
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/utils/domainConfig.ts b/packages/fakeyou.com/src/utils/domainConfig.ts
index a37eade057..feb07676ab 100644
--- a/packages/fakeyou.com/src/utils/domainConfig.ts
+++ b/packages/fakeyou.com/src/utils/domainConfig.ts
@@ -4,20 +4,20 @@ export enum Website {
}
export interface DomainConfig {
- website: Website,
- logo: string,
- title: string,
- link: string,
+ website: Website;
+ logo: string;
+ title: string;
+ link: string;
}
const domainConfigs: Record = {
- "storyteller": {
+ storyteller: {
website: Website.StorytellerAi,
logo: "/fakeyou/Storyteller-Logo-1.png",
title: "Storyteller AI",
link: "https://storyteller.ai",
},
- "fakeyou": {
+ fakeyou: {
website: Website.FakeYou,
logo: "/fakeyou/FakeYou-Logo-2.png",
title: "FakeYou",
@@ -35,7 +35,7 @@ export const getCurrentDomainConfig = (): DomainConfig => {
}
if (window.location.hostname.includes("storyteller")) {
- return domainConfigs.storyteller;
+ return domainConfigs.storyteller;
}
// Default fallback
diff --git a/packages/fakeyou.com/src/v2/view/pages/components_library/sandbox.tsx b/packages/fakeyou.com/src/v2/view/pages/components_library/sandbox.tsx
index f979b431bb..6b5ea067f6 100644
--- a/packages/fakeyou.com/src/v2/view/pages/components_library/sandbox.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/components_library/sandbox.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
import VideoQuickTrim from 'components/common/VideoQuickTrim';
import { NavLink } from 'react-router-dom';
@@ -7,9 +7,13 @@ import {Container, Panel} from 'components/common';
export default function ComponentSandbox(
{parentPath}:{parentPath:string}
){
+ const [state1, setState1] = useState(undefined);
+ const [state2, setState2] = useState(undefined);
const handleCallback = (val:any)=>{
console.log('onChange is triggered')
console.log(val);
+ setState1(val.trimStartSeconds);
+ setState2(val.trimEndSeconds);
}
return (
← Back
@@ -18,18 +22,22 @@ export default function ComponentSandbox(
-
+ {`Start Seconds: ${state1}`}
+ {`Start Seconds: ${state2}`}
+ {/*
-
+ */}
);
}
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
index 5f684760d6..eafc84f8f3 100644
--- a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
@@ -2,14 +2,12 @@ import React from "react";
import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle";
import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
-import {} from "@fortawesome/pro-solid-svg-icons";
import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
import { Container } from "components/common";
import FakeYouLandingHeader from "./fakeyou/FakeYouLandingHeader";
import Dashboard from "./Dashboard";
import { useDomainConfig } from "context/DomainConfigContext";
-import StorytellerLanding from "./storyteller/StorytellerLanding";
-import LandingVideoReel from "./components/LandingVideoReel";
+import LandingVideoReel from "./components/LandingVideoReel/LandingVideoReel";
import {
FrontendInferenceJobType,
InferenceJob,
@@ -20,6 +18,8 @@ import "./LandingPage.scss";
import VstSectionV2 from "./components/VstSectionV2";
import FakeYouLandingBody from "./fakeyou/FakeYouLandingBody";
import { DomainConfig, Website } from "utils/domainConfig";
+import OnboardingSelection from "./storyteller/OnboardingSelection";
+import TtsDemoSection from "./components/TtsDemoSection/TtsDemoSection";
interface Props {
sessionWrapper: SessionWrapper;
@@ -39,13 +39,15 @@ function LandingPage(props: Props) {
PosthogClient.recordPageview();
- const domain : DomainConfig = useDomainConfig();
+ const domain: DomainConfig = useDomainConfig();
const isLoggedIn = props.sessionWrapper.isLoggedIn();
return (
<>
- {domain.website === Website.StorytellerAi && !isLoggedIn && }
+ {domain.website === Website.StorytellerAi && !isLoggedIn && (
+
+ )}
{domain.website === Website.FakeYou ? (
<>
@@ -76,15 +78,23 @@ function LandingPage(props: Props) {
<>
{/* STORYTELLER,AI */}
{!isLoggedIn ? (
-
+ <>
+
+
+
+
+
+
) : (
)}
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.scss b/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.scss
new file mode 100644
index 0000000000..dcabb0bdc4
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.scss
@@ -0,0 +1,72 @@
+@import "scss/colours.scss";
+
+.storyteller-landing-reel {
+ display: flex;
+ height: 74vh;
+ justify-content: center;
+ position: relative;
+
+ video {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ video::-webkit-media-controls {
+ display: none;
+ }
+
+ video::-webkit-media-controls-start-playback-button {
+ display: none;
+ }
+
+ .reel-overlay {
+ z-index: 0;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(20, 20, 27, 0.6);
+
+ &:after {
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: 20%;
+ background: linear-gradient(transparent, $bg);
+ z-index: 1;
+ }
+ }
+
+ .storyteller-landing-heading {
+ font-size: 52px;
+ }
+
+ .storyteller-landing-sub-text {
+ max-width: 900px;
+ font-size: 18px;
+ }
+
+ @media screen and (max-width: 992px) {
+ .storyteller-landing-heading {
+ font-size: 44px;
+ }
+
+ .storyteller-landing-sub-text {
+ max-width: 100%;
+ font-size: 16px;
+ }
+ }
+
+ @media screen and (max-width: 768px) {
+ .storyteller-landing-heading {
+ font-size: 32px;
+ }
+
+ .storyteller-landing-sub-text {
+ font-size: 16px;
+ }
+ }
+}
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.tsx
similarity index 61%
rename from packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel.tsx
rename to packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.tsx
index a9da927bf2..e526023967 100644
--- a/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.tsx
@@ -1,5 +1,7 @@
+import { faArrowRight } from "@fortawesome/pro-solid-svg-icons";
import { Button } from "components/common";
import React, { useEffect } from "react";
+import "./LandingVideoReel.scss";
interface LandingVideoReelProps {}
@@ -42,27 +44,30 @@ export default function LandingVideoReel(props: LandingVideoReelProps) {
}, [isOnLandingPage]);
return (
-
-