Merge pull request #166 from dotabod/develop

src/components/Dashboard/DisableToggle.tsx

@@ -92,6 +92,11 @@ export function DisableToggle() {
     }
   }, [isDotabodDisabled, notification])
 
+  const botuser =
+    process.env.NEXT_PUBLIC_VERCEL_ENV === 'production'
+      ? 'dotabod'
+      : 'dotabod_test'
+
   useEffect(() => {
     if (data?.banned) {
       notification.open({
@@ -106,7 +111,7 @@ export function DisableToggle() {
               type="link"
               onClick={() => {
                 window.open(
-                  `https://www.twitch.tv/popout/${user?.name}/viewercard/dotabod?popout=`,
+                  `https://www.twitch.tv/popout/${user?.name}/viewercard/${botuser}?popout=`,
                   'mywindow',
                   'menubar=1,resizable=1,width=350,height=250'
                 )

src/components/Overlay/index.tsx

@@ -29,7 +29,7 @@ import Head from 'next/head'
 import Image from 'next/image'
 import { useEffect, useState } from 'react'
 
-const OverlayPage = (props) => {
+const OverlayPage = () => {
   const [delayPassed, setDelayPassed] = useState(true)
   const { notification } = App.useApp()
 
@@ -71,6 +71,15 @@ const OverlayPage = (props) => {
 
   const [isInIframe, setIsInIframe] = useState(false)
 
+  // Refresh the page every 5 minutes if the socket is disconnected
+  useEffect(() => {
+    if (!connected) {
+      setTimeout(() => {
+        window.location.reload()
+      }, 300000)
+    }
+  }, [connected])
+
   useEffect(() => {
     if (!original) return
 
@@ -106,6 +115,11 @@ const OverlayPage = (props) => {
         description:
           'Dotabod is disabled until you go live on Twitch. Not streaming on Twitch? Type !online in your Twitch chat to enable Dotabod.',
       })
+
+      // Refresh page every 5 minutes to check if stream is online
+      setTimeout(() => {
+        window.location.reload()
+      }, 300000)
     } else {
       notification.destroy('stream-offline')
     }

src/lib/hooks/useSocket.tsx

@@ -14,9 +14,8 @@ import {
   EventSubChannelPredictionLockEvent,
   EventSubChannelPredictionProgressEvent,
 } from '@twurple/eventsub-base'
-import { App } from 'antd'
 import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { useDispatch } from 'react-redux'
 import io, { type Socket } from 'socket.io-client'
 import {
@@ -54,7 +53,6 @@ export const useSocket = ({
   setWL,
   setRadiantWinChance,
 }) => {
-  const { notification } = App.useApp()
   const router = useRouter()
   const { userId } = router.query
   const dispatch = useDispatch()