Merge pull request #174 from storytold/bflat-fy-channels

channels page twitch api

packages/fakeyou.com/src/scss/site-refresh.scss

@@ -856,6 +856,56 @@ styles with important tags:
   wave {
     overflow: hidden !important;
   }
+
+  .twitch-video-container {
+    border: 1px solid #ffffff12 !important;
+    border-radius: 0px;
+    overflow: hidden;
+    background-color: $panel !important;
+    min-height: 220px;
+    height: 100%;
+    box-shadow: 0 0 0 1px rgba(0 0 0 / 30%), 0 70px 65px rgb(0 0 0 / 10%),
+      0 30px 30px rgb(0 0 0 / 8%), 0 15px 15px rgb(0 0 0 / 6%),
+      0 10px 8px rgb(0 0 0 / 4%), 0 4px 4px rgb(0 0 0 / 2%),
+      0 2px 2px rgb(0 0 0 / 1%) !important;
+  }
+
+  .twitch-chat-container {
+    border: 1px solid #ffffff12 !important;
+    border-radius: 8px;
+    background-color: $panel !important;
+    min-height: 650px;
+    box-shadow: 0 0 0 1px rgba(0 0 0 / 30%), 0 70px 65px rgb(0 0 0 / 10%),
+      0 30px 30px rgb(0 0 0 / 8%), 0 15px 15px rgb(0 0 0 / 6%),
+      0 10px 8px rgb(0 0 0 / 4%), 0 4px 4px rgb(0 0 0 / 2%),
+      0 2px 2px rgb(0 0 0 / 1%) !important;
+  }
+
+  .channel-title {
+    font-size: 16px;
+  }
+
+  .stream-title {
+    font-size: 14px;
+  }
+
+  .channel-description {
+    font-size: 14px;
+  }
+
+  .channel-image {
+    border: 2px solid $white;
+    min-width: 60px;
+    min-height: 60px;
+    height: 60px;
+    width: 60px;
+    object-fit: cover;
+  }
+
+  .view-count {
+    font-size: 14px;
+    color: #fc6b68;
+  }
 }
 
 select {
@@ -1056,5 +1106,11 @@ textarea {
         max-height: 300px;
       }
     }
+
+    .twitch-video-container {
+      min-height: 391px;
+      height: 100%;
+      border-radius: 8px;
+    }
   }
 }

packages/fakeyou.com/src/v2/view/pages/channels/ChannelsPage.tsx

@@ -1,23 +1,91 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
-import {} from "@fortawesome/free-solid-svg-icons";
-import {} from "@fortawesome/free-brands-svg-icons";
 import { motion } from "framer-motion";
 import { container, item } from "../../../../data/animation";
 import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle";
-import { TwitchPlayerNonInteractive, TwitchChat } from "react-twitch-embed";
+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");
 
+  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(() => {
+    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-5 px-md-4 px-lg-5 px-xl-3">
-        <div className="row gx-3">
+      <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}>
@@ -27,18 +95,56 @@ function ChannelsPage(props: Props) {
 
             {/* Feed Content */}
             <motion.div variants={item} className="d-flex flex-column gap-3">
-              <TwitchPlayerNonInteractive
+              <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-4 d-none d-lg-flex flex-column gap-3">
-            <TwitchChat channel="moonstar_x" darkMode width="100%" />
+          <div className="col-12 col-lg-4 flex-column gap-3">
+            <TwitchChat
+              channel="testytest512"
+              darkMode
+              width="100%"
+              className="twitch-chat-container"
+            />
           </div>
         </div>
       </div>

yarn.lock

@@ -3795,6 +3795,7 @@ __metadata:
     react-scripts: 5.0.0
     react-select: ^5.7.0
     react-share: ^4.4.1
+    react-twitch-embed: ^3.0.1
     react-wavesurfer.js: ^0.0.8
     sass: ^1.57.1
     typescript: ^3.7.5
@@ -3900,8 +3901,6 @@ __metadata:
   dependencies:
     craco: ^0.0.3
     lerna: ^4.0.0
-    react-select: ^5.7.0
-    react-twitch-embed: ^3.0.1
     yarn: ^1.22.19
   languageName: unknown
   linkType: soft