new feature flag checks

packages/components/src/api/session/GetSessionInfo.ts

@@ -20,6 +20,7 @@ export interface UserInfo {
 
   // Rollout feature flags
   can_access_studio: boolean,
+  maybe_feature_flags: string[],
 
   // Usage
   can_use_tts: boolean,

packages/components/src/session/SessionWrapper.ts

@@ -56,10 +56,17 @@ export class SessionWrapper {
   public canAccessStudio(): boolean {
     const hostnameAllowed = StudioRolloutHostnameAllowed();
     const userAllowed =
-      this.sessionStateResponse?.user?.can_access_studio || false;
+      this.sessionStateResponse?.user?.can_access_studio || 
+      this.sessionStateResponse?.user?.maybe_feature_flags.includes("studio") ||
+      false;
     return hostnameAllowed && userAllowed;
   }
 
+  // Feature flag rollout for Video Style Transfer
+  public canAccessVideoStyleTransfer(): boolean {
+    return this.sessionStateResponse?.user?.maybe_feature_flags.includes("video_style_transfer") || false;
+  }
+
   // Username is all lowercase
   public getUsername(): string | undefined {
     return this.sessionStateResponse?.user?.username;

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 <DiscordLink2 /> to join the wait list. </>
+  );
+
+  return (
+    <Container type="panel" className="mb-5">
+      <PageHeader
+        title={"Video Style Transfer Features Not Available"}
+        subText={subText}
+      />
+    </Container>
+  );
+}

packages/fakeyou.com/src/v2/view/pages/video_styletransfer/VideoStyleTransfer.tsx

@@ -1,7 +1,6 @@
 import React, { useReducer, useEffect } from "react";
 
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
-import { StudioNotAvailable } from "v2/view/_common/StudioNotAvailable";
 import { useInferenceJobs, useLocalize } from "hooks";
 import {
   FrontendInferenceJobType,
@@ -13,6 +12,7 @@ import { states, reducer } from "./reducer";
 import SubRoutes from "./routes";
 import PageHeaderWithImage from "components/layout/PageHeaderWithImage";
 import { faFilms } from "@fortawesome/pro-solid-svg-icons";
+import { VideoStyleTransferNotAvailable } from "v2/view/_common/VideoStyleTransferNotAvailable";
 
 export default function VideoStyleTransfer(props: {
   enqueueInferenceJob: (
@@ -48,8 +48,8 @@ export default function VideoStyleTransfer(props: {
     }
   }, [pageState, enqueueInferenceJob]);
 
-  if (!props.sessionWrapper.canAccessStudio()) {
-    return <StudioNotAvailable />;
+  if (!props.sessionWrapper.canAccessVideoStyleTransfer()) {
+    return <VideoStyleTransferNotAvailable />;
   }
 
   return (

packages/fakeyou.com/src/v2/view/pages/video_workflow/VideoWorkflow.tsx

@@ -48,6 +48,7 @@ export default function VideoWorkflow(props:{
   }, [pageState, enqueueInferenceJob]);
 
   if (!props.sessionWrapper.canAccessStudio()) {
+    //return <VideoStyleTransferNotAvailable />
     return <StudioNotAvailable />
   }