diff --git a/_redirects b/_redirects index b706cced20..3633d7f316 100644 --- a/_redirects +++ b/_redirects @@ -16,6 +16,7 @@ /leaderboard* /index.html 200 /login* /index.html 200 /moderation* /index.html 200 +/news* /index.html 200 /obs_configs* /index.html 200 /old* /index.html 200 /patrons* /index.html 200 @@ -38,12 +39,12 @@ # This is the *OLD* video for Summer 2022. We'll re-edit. # PLEASE DO NOT ACECSS THIS URL OR WATCH. IT WILL CHANGE THE # VIEW STATISTICS AND WE WON'T BE ABLE TO TELL IF THEY SAW IT -/demo https://www.youtube.com/watch?v=wfFpi-Mv3fY 302 +#/demo https://www.youtube.com/watch?v=wfFpi-Mv3fY 302 # This is for AI Grant. # This is the *OLD* video for Summer 2022. We'll re-edit. # PLEASE DO NOT ACECSS THIS URL OR WATCH. IT WILL CHANGE THE # VIEW STATISTICS AND WE WON'T BE ABLE TO TELL IF THEY SAW IT -/ai-grant-founder-video https://www.youtube.com/watch?v=Cj7rchSSuLg 302 -/ai-grant-demo https://www.youtube.com/watch?v=0EOZsrH7jxI 302 +#/ai-grant-founder-video https://www.youtube.com/watch?v=Cj7rchSSuLg 302 +#/ai-grant-demo https://www.youtube.com/watch?v=0EOZsrH7jxI 302 diff --git a/packages/fakeyou.com/src/_i18n/locales/en/nav/TopNav.json b/packages/fakeyou.com/src/_i18n/locales/en/nav/TopNav.json index 3995f4c800..5a33cf7d9d 100644 --- a/packages/fakeyou.com/src/_i18n/locales/en/nav/TopNav.json +++ b/packages/fakeyou.com/src/_i18n/locales/en/nav/TopNav.json @@ -8,6 +8,7 @@ "ttsQueued": "TTS Queued" }, "main": { + "newsLink": "AI News", "pricingLink": "Pricing", "voiceCloneLink": "Voice Clone", "createDropdown": "Create", diff --git a/packages/fakeyou.com/src/common/Analytics.ts b/packages/fakeyou.com/src/common/Analytics.ts index fb91e0ffe9..7839ee7dd4 100644 --- a/packages/fakeyou.com/src/common/Analytics.ts +++ b/packages/fakeyou.com/src/common/Analytics.ts @@ -248,6 +248,14 @@ class Analytics { Analytics.sendCategorizedEvent(this.TOPBAR, 'click_terms'); } + static topbarClickChannels() { + Analytics.sendCategorizedEvent(this.TOPBAR, 'click_channels'); + } + + static topbarClickNews() { + Analytics.sendCategorizedEvent(this.TOPBAR, 'click_news'); + } + // ========== (impl) ========== private static sendEvent(actionName: string, eventLabel?: string, value?: number) { diff --git a/packages/fakeyou.com/src/common/WebUrl.ts b/packages/fakeyou.com/src/common/WebUrl.ts index a813c73f95..99464a93fd 100644 --- a/packages/fakeyou.com/src/common/WebUrl.ts +++ b/packages/fakeyou.com/src/common/WebUrl.ts @@ -55,6 +55,10 @@ class WebUrl { return '/clone'; } + static newsPage(): string { + return '/news'; + } + // Other domains static developerDocs(): string { diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index 9cca69d0bc..ff714a3bb5 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -63,7 +63,7 @@ import { CheckoutCancelPage } from "./pages/premium/CheckoutCancelPage"; import { PortalSuccessPage } from "./pages/premium/PortalSuccessPage"; import { PrivacyPage } from "./pages/about/privacy_page/PrivacyPage"; import { GetComputedTtsCategoryAssignmentsSuccessResponse } from "@storyteller/components/src/api/category/GetComputedTtsCategoryAssignments"; -import { ChannelsPage } from "./pages/channels/ChannelsPage"; +import { NewsPage } from "./pages/news/NewsPage"; import { LandingPage } from "./pages/landing/LandingPage"; //import { LandingPage } from "./pages/landing/LandingPage"; //import { VcModelListPage } from "./pages/vc/vc_model_list/VcModelListPage"; @@ -171,8 +171,13 @@ class PageContainer extends React.Component { /> - - + + diff --git a/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx b/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx index 92e96a6f0b..3890150d1b 100644 --- a/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx +++ b/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx @@ -5,7 +5,6 @@ import { Link, useHistory } from "react-router-dom"; import { WebUrl } from "../../../common/WebUrl"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { - faMicrophone, faPlus, faUsers, faVideo, @@ -40,6 +39,7 @@ import "tippy.js/animations/shift-away.css"; import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks"; import { Analytics } from "../../../common/Analytics"; import { faWaveformLines } from "@fortawesome/pro-solid-svg-icons"; +import { faTvRetro } from "@fortawesome/pro-regular-svg-icons"; interface Props { sessionWrapper: SessionWrapper; @@ -346,14 +346,14 @@ function TopNav(props: Props) {
  • { - Analytics.topbarClickVoiceClone(); + Analytics.topbarClickNews(); }} className="nav-link" > - - {t("nav.TopNav.main.voiceCloneLink")} + + {t("nav.TopNav.main.newsLink")}
    • diff --git a/packages/fakeyou.com/src/v2/view/pages/channels/ChannelsPage.tsx b/packages/fakeyou.com/src/v2/view/pages/channels/ChannelsPage.tsx deleted file mode 100644 index 29080b0ca6..0000000000 --- a/packages/fakeyou.com/src/v2/view/pages/channels/ChannelsPage.tsx +++ /dev/null @@ -1,157 +0,0 @@ -import React, { useState, useEffect } from "react"; -import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; -import { motion } from "framer-motion"; -import { container, item } from "../../../../data/animation"; -import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle"; -import { TwitchPlayer, TwitchChat } from "react-twitch-embed"; -import axios from "axios"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faEye } from "@fortawesome/pro-solid-svg-icons"; - -interface Props { - sessionWrapper: SessionWrapper; -} - -interface StreamInfo { - broadcaster_name: string; - title: string; -} - -interface ChannelInfo { - profile_image_url: string; - description: string; - login: string; -} - -interface ViewerCount { - viewer_count: number; -} - -let twitchApi = axios.create({ - headers: { - "Client-ID": "8s2gjp7ora3zswgjabz1svoi24ting", - Authorization: "Bearer 10uyyp7l6n21zlezht8vvv25uvenu3", - }, -}); - -function ChannelsPage(props: Props) { - usePrefixedDocumentTitle("Channels"); - console.log('Channels page regenerated'); - - const [stream, setStream] = useState({ - broadcaster_name: "", - title: "", - }); - - const [channel, setChannel] = useState({ - profile_image_url: "", - description: "", - login: "", - }); - - const [viewerCount, setViewerCount] = useState({ - viewer_count: 0, - }); - - useEffect(() => { - console.log('useEffect() triggered'); - const fetchData = async () => { - const streamInfo = await twitchApi.get( - "https://api.twitch.tv/helix/channels?broadcaster_id=650154491" - ); - setStream(streamInfo.data.data[0]); - const channelInfo = await twitchApi.get( - "https://api.twitch.tv/helix/users?login=testytest512" - ); - setChannel(channelInfo.data.data[0]); - const viewerCountInfo = await twitchApi.get( - "https://api.twitch.tv/helix/streams?user_login=testytest512" - ); - setViewerCount(viewerCountInfo.data.data[0]); - }; - fetchData(); - }); - - let twitchChannelLink = "https://twitch.tv/" + channel.login; - - // if (viewerCount !== undefined) { - // console.log("helllooo"); - // } else { - // let viewerCountNumber = viewerCount.viewer_count.toString(); - // } - let viewCountNumber = "Offline"; - if (viewerCount !== undefined) { - viewCountNumber = viewerCount.viewer_count.toString(); - } - - return ( - -
    -
    -
    - {/*
    - - Media Feed - -
    */} - - {/* Feed Content */} - - -
    -
    - - profile - - -
    -

    - {stream.broadcaster_name} -

    -

    - {stream.title} -

    -
    -
    -
    -

    - - {viewCountNumber} -

    -
    -
    -
    -

    {channel.description}

    -
    -     -
    - - {/* Side column */} -
    - -
    -
    -
    -     - ); -} - -export { ChannelsPage }; diff --git a/packages/fakeyou.com/src/v2/view/pages/news/NewsPage.tsx b/packages/fakeyou.com/src/v2/view/pages/news/NewsPage.tsx new file mode 100644 index 0000000000..3dbfbb0b18 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/news/NewsPage.tsx @@ -0,0 +1,185 @@ +import React, { useEffect } from "react"; +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import { motion } from "framer-motion"; +import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; +import { container, item } from "../../../../data/animation"; +import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle"; +import { TwitchPlayer, TwitchChat } from "react-twitch-embed"; +//import axios from "axios"; +import { Link } from "react-router-dom"; +import { WebUrl } from "../../../../common/WebUrl"; +import { DiscordLink2 } from "@storyteller/components/src/elements/DiscordLink2"; + +interface Props { + sessionWrapper: SessionWrapper; + sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; +} + +//interface StreamInfo { +// broadcaster_name: string; +// title: string; +//} +// +//interface ChannelInfo { +// profile_image_url: string; +// description: string; +// login: string; +//} +// +//interface ViewerCount { +// viewer_count: number; +//} + +//let twitchApi = axios.create({ +// headers: { +// "Client-ID": "8s2gjp7ora3zswgjabz1svoi24ting", +// Authorization: "Bearer 10uyyp7l6n21zlezht8vvv25uvenu3", +// }, +//}); + +const TWITCH_CHANNEL = "FakeYouLabs"; + +function NewsPage(props: Props) { + usePrefixedDocumentTitle("AI News"); + console.log('Channels page regenerated'); + + //const [stream, setStream] = useState({ + // broadcaster_name: "", + // title: "", + //}); + + //const [channel, setChannel] = useState({ + // profile_image_url: "", + // description: "", + // login: "", + //}); + + //const [viewerCount, setViewerCount] = useState({ + // viewer_count: 0, + //}); + + useEffect(() => { + console.log('useEffect() triggered'); + const fetchData = async () => { + //const streamInfo = await twitchApi.get( + // "https://api.twitch.tv/helix/channels?broadcaster_id=650154491" + //); + //setStream(streamInfo.data.data[0]); + //const channelInfo = await twitchApi.get( + // "https://api.twitch.tv/helix/users?login=testytest512" + //); + //setChannel(channelInfo.data.data[0]); + //const viewerCountInfo = await twitchApi.get( + // "https://api.twitch.tv/helix/streams?user_login=testytest512" + //); + //setViewerCount(viewerCountInfo.data.data[0]); + }; + fetchData(); + }); + + //let twitchChannelLink = "https://twitch.tv/" + channel.login; + + //// if (viewerCount !== undefined) { + //// console.log("helllooo"); + //// } else { + //// let viewerCountNumber = viewerCount.viewer_count.toString(); + //// } + //let viewCountNumber = "Offline"; + //if (viewerCount !== undefined) { + // viewCountNumber = viewerCount.viewer_count.toString(); + //} + + let subscriberPart = <>; + if (!props.sessionSubscriptionsWrapper.hasPaidFeatures()) { + subscriberPart = ( + <> + If you'd like an ad-free experience, please subscribe! +
    +
    + + ); + } + + return ( + +
    +
    +
    + {/*
    + + Media Feed + +
    */} + + {/* Feed Content */} + + + {/* +
    +
    + + profile + + +
    +

    + {stream.broadcaster_name} +

    +

    + {stream.title} +

    +
    +
    +
    +

    + + {viewCountNumber} +

    +
    +
    + */} +
    +

    + {subscriberPart} + + We've built a powerful new AI animation system that we're nearly ready to unveil. + For now, enjoy this teaser tech demo of a 24/7 streaming news channel. +
    +
    + Want to give us feedback? Please join our . +

    +

    +

    +
    +     +
    + + {/* Side column */} +
    + +
    +
    +
    +     + ); +} + +export { NewsPage }; diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx index 3fcd6e91d6..9c4413b78a 100644 --- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx @@ -24,8 +24,8 @@ export function TtsPageHero(props: Props) { const randomImage = useMemo(() => { const images = [ // Main Images: - //"mascot/kitsune_pose2.webp", - //"mascot/kitsune_wizard.webp", + "mascot/kitsune_pose2.webp", + "mascot/kitsune_wizard.webp", // Seasonal Images: // "mascot/halloween_1.webp", @@ -38,7 +38,7 @@ export function TtsPageHero(props: Props) { // "mascot/chinese_new_year.webp", //"mascot/superbowl-KCC.webp", //"mascot/superbowl-PE.webp", - "mascot/valentines.webp", + //"mascot/valentines.webp", ]; return images[Math.floor(Math.random() * images.length)];