Merge branch 'main' into patch-2

JustMarkov · Dec 5, 2023 · 42901c1 · 42901c1
2 parents 80fe679 + 43cab1a
commit 42901c1
Show file tree

Hide file tree

Showing 15 changed files with 1,857 additions and 1,597 deletions.
diff --git a/.github/workflows/build-apps.yaml b/.github/workflows/build-apps.yaml
@@ -53,6 +53,8 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
   android:
+    # EAS will not be able to use expo token in pull request
+    if: ${{ github.event_name != 'pull_request' }}
     name: android
     runs-on: ubuntu-latest
     steps:

diff --git a/apps/app/app/_layout.tsx b/apps/app/app/_layout.tsx
@@ -5,6 +5,7 @@ import {
   TamaguiProvider,
   Theme,
   useMedia,
+  useThemeName,
   XStack,
   YStack,
 } from 'tamagui'
@@ -125,6 +126,17 @@ const NativeURLHandlers = () => {
   return null
 }
 
+const ToastContainer = ({ children }) => {
+  const theme = useThemeName()
+  return Platform.OS === 'web' ? (
+    <Portal>
+      <Theme name={theme}>{children}</Theme>
+    </Portal>
+  ) : (
+    <>{children}</>
+  )
+}
+
 const ThemedLayout = () => {
   const { settings } = useContext(SettingsContext)
   const colorSheme = useColorScheme()
@@ -133,6 +145,10 @@ const ThemedLayout = () => {
 
   // Update colorScheme (for scrollbar)
   useEffect(() => {
+    if (Platform.OS !== 'web') {
+      return
+    }
+
     const rootElem = document.getElementById('root')
     if (rootElem) {
       rootElem.style.colorScheme = theme
@@ -150,14 +166,14 @@ const ThemedLayout = () => {
       <TermsOfUseDialog />
       <NodeProvider>
         <ToastProvider>
-          <Portal>
+          <ToastContainer>
             <ToastViewport
               flexDirection="column"
               top={'$4'}
               left={0}
               right={0}
             />
-          </Portal>
+          </ToastContainer>
           <ToastController />
 
           <Stack

diff --git a/apps/app/app/about.tsx b/apps/app/app/about.tsx
@@ -17,6 +17,7 @@ import { SettingLayout } from '../components/SettingLayout'
 import { ExternalLink, Github, MessageSquare } from '@tamagui/lucide-icons'
 import { openExternalLink } from '../lib/links'
 import i18n from '../i18n'
+import { StatsDialog } from '../dialogs/StatsDialogs'
 
 export default function About() {
   const { session } = useSession()
@@ -47,6 +48,9 @@ export default function About() {
       <XStack ml="auto">
         <SessionsInfoDialog session={session} />
       </XStack>
+      <XStack ml="auto">
+        <StatsDialog />
+      </XStack>
       <XStack mx="auto" mt="$8" gap="$2">
         <Paragraph>{i18n.t('about.reportBugOrFeature')}</Paragraph>
       </XStack>

diff --git a/apps/app/app/stats.tsx b/apps/app/app/stats.tsx
diff --git a/apps/app/components/Navigation/buttons.ts b/apps/app/components/Navigation/buttons.ts
@@ -1,4 +1,4 @@
-import { Zap, Settings, HelpCircle, Activity } from '@tamagui/lucide-icons'
+import { Zap, Settings, HelpCircle } from '@tamagui/lucide-icons'
 
 import i18n from '../../i18n'
 
@@ -9,12 +9,6 @@ export const buttons = [
     href: '/',
     segment: '(torrents)',
   },
-  {
-    icon: Activity,
-    title: i18n.t('menu.statistics'),
-    href: '/stats',
-    segment: 'stats',
-  },
   {
     icon: Settings,
     title: i18n.t('menu.settings'),

diff --git a/apps/app/components/SpeedCharts.tsx b/apps/app/components/SpeedCharts.tsx
@@ -3,16 +3,13 @@ import { VictoryArea, VictoryChart, VictoryAxis } from '../lib/victory'
 import { Defs, LinearGradient, Stop } from 'react-native-svg'
 import prettyBytes from 'pretty-bytes'
 import { XStack, YStack, useMedia, useThemeName } from 'tamagui'
-import { useSessionStats } from '../hooks/useSessionStats'
 import { TorrentFieldFormatter } from './TorrentFieldFormatter'
 
-const measuredPoints = 60 // We keep 60 seconds of data
-const refreshInterval = 1000
-const numberOfPoints = measuredPoints / (refreshInterval / 1000) + 1 // + 1 for zero
+const measuredPoints = 60 // We keep 60 points of data
 
-export const SpeedCharts = () => {
+export const SpeedCharts = ({ sessionStats, refreshInterval }) => {
+  const numberOfPoints = measuredPoints / (refreshInterval / 1000) + 1 // + 1 for zero
   const media = useMedia()
-  const { sessionStats } = useSessionStats({ interval: refreshInterval })
   const [speedPoints, setSpeedPoints] = useState({
     download: Array(numberOfPoints)
       .fill({})
@@ -51,6 +48,7 @@ export const SpeedCharts = () => {
           name="downloadSpeed"
           data={speedPoints.download}
           color={'#0081f1'}
+          refreshInterva={refreshInterval}
         />
         <TorrentFieldFormatter
           fontSize={'$6'}
@@ -64,6 +62,7 @@ export const SpeedCharts = () => {
           name="uploadSpeed"
           data={speedPoints.upload}
           color={'#299764'}
+          refreshInterval={refreshInterval}
         />
         <TorrentFieldFormatter
           fontSize={'$6'}
@@ -76,7 +75,7 @@ export const SpeedCharts = () => {
   )
 }
 
-const SpeedChart = ({ name, data, color }) => {
+const SpeedChart = ({ name, data, color, refreshInterval }) => {
   const theme = useThemeName()
 
   return (

diff --git a/apps/app/dialogs/StatsDialogs.tsx b/apps/app/dialogs/StatsDialogs.tsx
@@ -0,0 +1,130 @@
+import React from 'react'
+
+import { Button, H2, Paragraph, XStack, YStack, useThemeName } from 'tamagui'
+import { ScrollView } from 'react-native'
+import prettyBytes from 'pretty-bytes'
+import prettyMilliseconds from 'pretty-ms'
+import { SpeedCharts } from '../components/SpeedCharts'
+import { Dialog } from '../components/reusable/Dialog'
+import i18n from '../i18n'
+import { useSessionStats } from '../hooks/useSessionStats'
+
+const refreshInterval = 1000
+
+export const StatsDialog = () => {
+  const theme = useThemeName()
+  const { sessionStats } = useSessionStats({ interval: refreshInterval })
+
+  if (!sessionStats || Object.keys(sessionStats).length === 0) return null
+
+  return (
+    <Dialog
+      title={i18n.t('statsDialog.title')}
+      trigger={
+        <Button
+          bc={theme.startsWith('light') ? 'white' : 'black'}
+          theme="yellow"
+          hoverTheme
+          borderColor={'$yellow7'}
+        >
+          {i18n.t('statsDialog.title')}
+        </Button>
+      }
+      snapPoints={[90]}
+    >
+      <ScrollView>
+        <YStack w="100%" alignSelf="center" flexShrink={1} gap="$8" pb="$4">
+          <SpeedCharts
+            sessionStats={sessionStats}
+            refreshInterval={refreshInterval}
+          />
+          <YStack>
+            <H2>{i18n.t('statsDialog.torrentsCount')}</H2>
+            <XStack jc="space-between" w="100%">
+              <Paragraph>{i18n.t('statsDialog.allTorrents')}</Paragraph>
+              <Paragraph>{sessionStats.torrentCount}</Paragraph>
+            </XStack>
+            <XStack jc="space-between" w="100%">
+              <Paragraph>{i18n.t('statsDialog.activeTorrents')}</Paragraph>
+              <Paragraph>{sessionStats.activeTorrentCount}</Paragraph>
+            </XStack>
+            <XStack jc="space-between" w="100%">
+              <Paragraph>{i18n.t('statsDialog.pauseTorrents')}</Paragraph>
+              <Paragraph>{sessionStats.pausedTorrentCount}</Paragraph>
+            </XStack>
+          </YStack>
+
+          <YStack>
+            <H2>{i18n.t('statsDialog.sinceAppStart')}</H2>
+            <XStack jc="space-between" w="100%">
+              <Paragraph>{i18n.t('statsDialog.downloaded')}</Paragraph>
+              <Paragraph>
+                {prettyBytes(
+                  sessionStats['current-stats'].downloadedBytes || 0
+                )}
+              </Paragraph>
+            </XStack>
+
+            <XStack jc="space-between" w="100%">
+              <Paragraph>{i18n.t('statsDialog.uploaded')}</Paragraph>
+              <Paragraph>
+                {prettyBytes(sessionStats['current-stats'].uploadedBytes || 0)}
+              </Paragraph>
+            </XStack>
+
+            <XStack jc="space-between" w="100%">
+              <Paragraph>{i18n.t('statsDialog.filesAdded')}</Paragraph>
+              <Paragraph>{sessionStats['current-stats'].filesAdded}</Paragraph>
+            </XStack>
+            <XStack jc="space-between" w="100%">
+              <Paragraph>{i18n.t('statsDialog.timeActive')}</Paragraph>
+              <Paragraph>
+                {prettyMilliseconds(
+                  sessionStats['current-stats'].secondsActive * 1000,
+                  { secondsDecimalDigits: 0 }
+                )}
+              </Paragraph>
+            </XStack>
+          </YStack>
+
+          <YStack>
+            <H2>{i18n.t('statsDialog.sinceBeginning')}</H2>
+            <XStack jc="space-between" w="100%">
+              <Paragraph>{i18n.t('statsDialog.downloaded')}</Paragraph>
+              <Paragraph>
+                {prettyBytes(
+                  sessionStats['cumulative-stats'].downloadedBytes || 0
+                )}
+              </Paragraph>
+            </XStack>
+
+            <XStack jc="space-between" w="100%">
+              <Paragraph>{i18n.t('statsDialog.uploaded')}</Paragraph>
+              <Paragraph>
+                {prettyBytes(
+                  sessionStats['cumulative-stats'].uploadedBytes || 0
+                )}
+              </Paragraph>
+            </XStack>
+
+            <XStack jc="space-between" w="100%">
+              <Paragraph>{i18n.t('statsDialog.filesAdded')}</Paragraph>
+              <Paragraph>
+                {sessionStats['cumulative-stats'].filesAdded}
+              </Paragraph>
+            </XStack>
+            <XStack jc="space-between" w="100%">
+              <Paragraph>{i18n.t('statsDialog.timeActive')}</Paragraph>
+              <Paragraph>
+                {prettyMilliseconds(
+                  sessionStats['cumulative-stats'].secondsActive * 1000,
+                  { secondsDecimalDigits: 0 }
+                )}
+              </Paragraph>
+            </XStack>
+          </YStack>
+        </YStack>
+      </ScrollView>
+    </Dialog>
+  )
+}