Update channels -> news

2026-11-03 00:47:53 +00:00 · 2023-02-19 04:12:54 -05:00
1 parent 416dd52a44
commit ec2db833b0
@@ -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

@@ -8,6 +8,7 @@
    "ttsQueued": "TTS Queued"
  },
  "main": {
+    "newsLink": "AI News",
    "pricingLink": "Pricing",
    "voiceCloneLink": "Voice Clone",
    "createDropdown": "Create",
@@ -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) {
@@ -55,6 +55,10 @@ class WebUrl {
    return '/clone';
  }

+  static newsPage(): string {
+    return '/news';
+  }
+
  // Other domains

  static developerDocs(): string {
@@ -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<Props, State> {
              />
            </Route>

-            <Route path="/channels">
-              <ChannelsPage sessionWrapper={this.props.sessionWrapper} />
+            <Route path="/news">
+              <NewsPage 
+                sessionWrapper={this.props.sessionWrapper} 
+                sessionSubscriptionsWrapper={
+                  this.props.sessionSubscriptionsWrapper
+                }
+                />
            </Route>

            <Route path="/leaderboard">
@@ -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) {

                <li data-bs-toggle="offcanvas" className="nav-item">
                  <Link
-                    to={WebUrl.cloneRequestPage()}
+                    to={WebUrl.newsPage()}
                    onClick={() => {
-                      Analytics.topbarClickVoiceClone();
+                      Analytics.topbarClickNews();
                    }}
                    className="nav-link"
                  >
-                    <FontAwesomeIcon icon={faMicrophone} className="me-2" />
-                    {t("nav.TopNav.main.voiceCloneLink")}
+                    <FontAwesomeIcon icon={faTvRetro} className="me-2" />
+                    {t("nav.TopNav.main.newsLink")}
                  </Link>
                </li>

@@ -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<StreamInfo>({
-    broadcaster_name: "",
-    title: "",
-  });
-
-  const [channel, setChannel] = useState<ChannelInfo>({
-    profile_image_url: "",
-    description: "",
-    login: "",
-  });
-
-  const [viewerCount, setViewerCount] = useState<ViewerCount>({
-    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 (
-    <motion.div initial="hidden" animate="visible" variants={container}>
-      <div className="container-panel py-1 py-lg-4 px-md-4 px-lg-5 px-xl-3">
-        <div className="row gx-3 gy-3">
-          <div className="col-12 col-lg-8 d-flex flex-column gap-3">
-            {/* <div className="d-flex flex-column ms-3 ms-lg-0">
-              <motion.h1 className="fw-bold" variants={item}>
-                Media Feed
-              </motion.h1>
-            </div> */}
-
-            {/* Feed Content */}
-            <motion.div variants={item} className="d-flex flex-column gap-3">
-              <TwitchPlayer
-                channel="testytest512"
-                width="100%"
-                height="100%"
-                autoplay
-                muted
-                className="twitch-video-container"
-              />
-              <div className="row align-items-center px-3 px-md-0">
-                <div className="col-12 col-lg-9 d-flex gap-3">
-                  <a href={twitchChannelLink}>
-                    <img
-                      src={channel.profile_image_url}
-                      alt="profile"
-                      width="60"
-                      height="60"
-                      className="channel-image rounded-circle"
-                    />
-                  </a>
-
-                  <div className="d-flex flex-column">
-                    <p className="fw-medium channel-title">
-                      {stream.broadcaster_name}
-                    </p>
-                    <p className="fw-medium opacity-75 stream-title">
-                      {stream.title}
-                    </p>
-                  </div>
-                </div>
-                <div className="col-12 col-lg-3 d-flex justify-content-lg-end h-100">
-                  <p className="fw-medium view-count pe-3 d-none d-lg-block">
-                    <FontAwesomeIcon icon={faEye} className="me-2" />
-                    {viewCountNumber}
-                  </p>
-                </div>
-              </div>
-              <div className="panel d-flex align-items-center gap-3 p-3 channel-description">
-                <p>{channel.description}</p>
-              </div>
-            </motion.div>
-          </div>
-
-          {/* Side column */}
-          <div className="col-12 col-lg-4 flex-column gap-3">
-            <TwitchChat
-              channel="testytest512"
-              darkMode
-              width="100%"
-              className="twitch-chat-container"
-            />
-          </div>
-        </div>
-      </div>
-    </motion.div>
-  );
-}
-
-export { ChannelsPage };
@@ -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<StreamInfo>({
+  //  broadcaster_name: "",
+  //  title: "",
+  //});
+
+  //const [channel, setChannel] = useState<ChannelInfo>({
+  //  profile_image_url: "",
+  //  description: "",
+  //  login: "",
+  //});
+
+  //const [viewerCount, setViewerCount] = useState<ViewerCount>({
+  //  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, <Link to={WebUrl.pricingPage()}>please subscribe</Link>!
+        <br />
+        <br />
+      </>
+    );
+  }
+
+  return (
+    <motion.div initial="hidden" animate="visible" variants={container}>
+      <div className="container-panel py-1 py-lg-4 px-md-4 px-lg-5 px-xl-3">
+        <div className="row gx-3 gy-3">
+          <div className="col-12 col-lg-8 d-flex flex-column gap-3">
+            {/* <div className="d-flex flex-column ms-3 ms-lg-0">
+              <motion.h1 className="fw-bold" variants={item}>
+                Media Feed
+              </motion.h1>
+            </div> */}
+
+            {/* Feed Content */}
+            <motion.div variants={item} className="d-flex flex-column gap-3">
+              <TwitchPlayer
+                channel={TWITCH_CHANNEL}
+                width="100%"
+                height="100%"
+                autoplay
+                muted={false}
+                className="twitch-video-container"
+              />
+                {/*
+              <div className="row align-items-center px-3 px-md-0">
+                <div className="col-12 col-lg-9 d-flex gap-3">
+                  <a href={twitchChannelLink}>
+                    <img
+                      src={channel.profile_image_url}
+                      alt="profile"
+                      width="60"
+                      height="60"
+                      className="channel-image rounded-circle"
+                    />
+                  </a>
+
+                  <div className="d-flex flex-column">
+                    <p className="fw-medium channel-title">
+                      {stream.broadcaster_name}
+                    </p>
+                    <p className="fw-medium opacity-75 stream-title">
+                      {stream.title}
+                    </p>
+                  </div>
+                </div>
+                <div className="col-12 col-lg-3 d-flex justify-content-lg-end h-100">
+                  <p className="fw-medium view-count pe-3 d-none d-lg-block">
+                    <FontAwesomeIcon icon={faEye} className="me-2" />
+                    {viewCountNumber}
+                  </p>
+                </div>
+              </div>
+             */}
+              <div className="panel d-flex align-items-center gap-3 p-3 channel-description">
+                <p>
+                  {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.
+                  <br />
+                  <br />
+                  Want to give us feedback? Please join our <DiscordLink2 />.
+                </p>
+                <p>
+                </p>
+              </div>
+            </motion.div>
+          </div>
+
+          {/* Side column */}
+          <div className="col-12 col-lg-4 flex-column gap-3">
+            <TwitchChat
+              channel={TWITCH_CHANNEL}
+              darkMode
+              width="100%"
+              className="twitch-chat-container"
+            />
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+export { NewsPage };
@@ -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)];