From 7433d1ff050caad7b7f1adc4009b1e3ba622790c Mon Sep 17 00:00:00 2001 From: BFlat Date: Sat, 4 Feb 2023 20:25:42 +0700 Subject: [PATCH 1/3] twitch api --- .../fakeyou.com/src/scss/site-refresh.scss | 56 ++++++++ .../v2/view/pages/channels/ChannelsPage.tsx | 126 ++++++++++++++++-- yarn.lock | 3 +- 3 files changed, 174 insertions(+), 11 deletions(-) diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss index 72a540b01..2139cc208 100644 --- a/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/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; + } } } diff --git a/packages/fakeyou.com/src/v2/view/pages/channels/ChannelsPage.tsx b/packages/fakeyou.com/src/v2/view/pages/channels/ChannelsPage.tsx index 9207764d0..42f463acb 100644 --- a/packages/fakeyou.com/src/v2/view/pages/channels/ChannelsPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/channels/ChannelsPage.tsx @@ -1,23 +1,93 @@ -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; + // viewer_count: 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({ + broadcaster_name: "", + title: "", + // viewer_count: "", + }); + + const [channel, setChannel] = useState({ + profile_image_url: "", + description: "", + login: "", + }); + + const [viewerCount, setViewerCount] = useState({ + 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 ( -
-
+
+
{/*
@@ -27,18 +97,56 @@ function ChannelsPage(props: Props) { {/* Feed Content */} - +
+
+ + profile + + +
+

+ {stream.broadcaster_name} +

+

+ {stream.title} +

+
+
+
+

+ + {viewCountNumber} +

+
+
+
+

{channel.description}

+
{/* Side column */} -
- +
+
diff --git a/yarn.lock b/yarn.lock index ba580f1c9..83ee8e73d 100644 --- a/yarn.lock +++ b/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 From dd7595b036487e540dfb77e66c9b3694c7486a44 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sat, 4 Feb 2023 20:26:28 +0700 Subject: [PATCH 2/3] update --- packages/fakeyou.com/src/v2/view/pages/channels/ChannelsPage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/channels/ChannelsPage.tsx b/packages/fakeyou.com/src/v2/view/pages/channels/ChannelsPage.tsx index 42f463acb..9b0c3fe4e 100644 --- a/packages/fakeyou.com/src/v2/view/pages/channels/ChannelsPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/channels/ChannelsPage.tsx @@ -15,7 +15,6 @@ interface Props { interface StreamInfo { broadcaster_name: string; title: string; - // viewer_count: string; } interface ChannelInfo { From 22bfd947fe34863c11b70a9a9a1f5eaba8990d9b Mon Sep 17 00:00:00 2001 From: BFlat Date: Sat, 4 Feb 2023 20:26:50 +0700 Subject: [PATCH 3/3] remove comments --- packages/fakeyou.com/src/v2/view/pages/channels/ChannelsPage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/channels/ChannelsPage.tsx b/packages/fakeyou.com/src/v2/view/pages/channels/ChannelsPage.tsx index 9b0c3fe4e..836137f02 100644 --- a/packages/fakeyou.com/src/v2/view/pages/channels/ChannelsPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/channels/ChannelsPage.tsx @@ -40,7 +40,6 @@ function ChannelsPage(props: Props) { const [stream, setStream] = useState({ broadcaster_name: "", title: "", - // viewer_count: "", }); const [channel, setChannel] = useState({