Add details modal

G-Ray · Jul 28, 2024 · 456963d · 456963d
1 parent 39f3bcf
commit 456963d
Show file tree

Hide file tree

Showing 7 changed files with 180 additions and 23 deletions.
diff --git a/apps/app/components/dialogs/DetailsDialog.tsx b/apps/app/components/dialogs/DetailsDialog.tsx
@@ -0,0 +1,85 @@
+import React from 'react'
+import { Info } from '@tamagui/lucide-icons'
+import { Button, Paragraph, XStack, YStack } from 'tamagui'
+import { format } from 'date-fns'
+import prettyBytes from 'pretty-bytes'
+import prettyMilliseconds from 'pretty-ms'
+
+import { Dialog } from '../reusable/Dialog'
+import { useI18n } from '../../hooks/use18n'
+import { getDateFnsLocale, Locale } from '../../i18n'
+
+export const DetailsDialog = ({ torrent }) => {
+  const i18n = useI18n()
+
+  const addedDate = new Date(torrent.addedDate * 1000)
+
+  return (
+    <Dialog
+      title={i18n.t('detailsDialog.title')}
+      snapPoints={[90]}
+      trigger={<Button icon={Info}>{i18n.t('torrentDialog.details')}</Button>}
+    >
+      <YStack gap="$4" pt="$8">
+        <XStack jc="space-between" gap="$16">
+          <Paragraph>{i18n.t('detailsDialog.torrentSize')}</Paragraph>
+          <Paragraph id="pieces">{`${prettyBytes(torrent.totalSize)} in ${torrent.files.length} ${i18n.t('detailsDialog.files')} (${torrent.pieceCount} pieces of ${prettyBytes(torrent.pieceSize)} each)`}</Paragraph>
+        </XStack>
+
+        <XStack jc="space-between" gap="$16">
+          <Paragraph>{i18n.t('detailsDialog.uploaded')}</Paragraph>
+          <Paragraph id="pieces">{`${prettyBytes(torrent.uploadedEver)} (Ratio: ${torrent.uploadRatio.toFixed(2)})`}</Paragraph>
+        </XStack>
+
+        <XStack jc="space-between" gap="$16">
+          <Paragraph>{i18n.t('detailsDialog.downloaded')}</Paragraph>
+          <Paragraph id="pieces">
+            {prettyBytes(torrent.downloadedEver)}
+          </Paragraph>
+        </XStack>
+
+        <XStack jc="space-between" gap="$16">
+          <Paragraph>{i18n.t('detailsDialog.addedDate')}</Paragraph>
+          <Paragraph id="pieces">
+            {format(addedDate, 'Pp', {
+              locale: getDateFnsLocale(i18n.locale as Locale),
+            })}
+          </Paragraph>
+        </XStack>
+
+        <XStack jc="space-between" gap="$16">
+          <Paragraph>{i18n.t('detailsDialog.remainingTime')}</Paragraph>
+          <Paragraph id="pieces">
+            {torrent.eta > 0 ? prettyMilliseconds(torrent.eta * 1000) : '-'}
+          </Paragraph>
+        </XStack>
+
+        <XStack jc="space-between" gap="$16">
+          <Paragraph>{i18n.t('detailsDialog.privacy')}</Paragraph>
+          <Paragraph id="pieces">
+            {torrent.isPrivate
+              ? i18n.t('detailsDialog.private')
+              : i18n.t('detailsDialog.public')}
+          </Paragraph>
+        </XStack>
+
+        <XStack jc="space-between" gap="$16">
+          <Paragraph>{i18n.t('detailsDialog.error')}</Paragraph>
+          <Paragraph id="pieces">
+            {torrent.errorString.length > 0 ? torrent.errorString : '-'}
+          </Paragraph>
+        </XStack>
+
+        <XStack jc="space-between" gap="$16">
+          <Paragraph>{i18n.t('detailsDialog.creator')}</Paragraph>
+          <Paragraph id="pieces">{torrent.creator}</Paragraph>
+        </XStack>
+
+        <XStack jc="space-between" gap="$16">
+          <Paragraph>{i18n.t('detailsDialog.comment')}</Paragraph>
+          <Paragraph id="pieces">{torrent.comment}</Paragraph>
+        </XStack>
+      </YStack>
+    </Dialog>
+  )
+}
diff --git a/apps/app/components/screens/torrents/TorrentCard/TorrentActions.tsx b/apps/app/components/screens/torrents/TorrentCard/TorrentActions.tsx
@@ -12,6 +12,7 @@ import { Dialog } from '../../../reusable/Dialog'
 import { useTorrents } from '../../../../hooks/useTorrents'
 import { PRIVATE_DOWNLOAD_DIR } from '../../../../lib/transmission'
 import { ShareButtons } from './ShareButtons'
+import { DetailsDialog } from '../../../dialogs/DetailsDialog'
 
 export const TorrentActions = ({
   torrent,
@@ -35,7 +36,7 @@ export const TorrentActions = ({
 
   return (
     <Dialog snapPointsMode="fit" open={open} onOpenChange={onOpenChange}>
-      <YStack gap="$4" py="$4" pt={media.gtXs ? '$8' : '$4'}>
+      <YStack gap="$4" py="$4" pt={'$8'}>
         <ShareButtons torrent={torrent} toast={toast} />
         {isElectron() && torrent.percentDone === 1 && (
           <Button icon={FolderOpen} onPress={handleOpenFolder}>
@@ -49,6 +50,7 @@ export const TorrentActions = ({
           torrent={torrent}
           torrentsFunctions={torrentsFunctions}
         />
+        <DetailsDialog torrent={torrent} />
         <RemoveTorrentDialog
           id={torrent.id}
           name={torrent.name}

diff --git a/apps/app/contexts/TorrentsContext.tsx b/apps/app/contexts/TorrentsContext.tsx
@@ -22,9 +22,37 @@ const defaultTorrentContext: TorrentContext = {
 }
 
 export const TorrentsContext = createContext<TorrentContext>(
-  defaultTorrentContext
+  defaultTorrentContext,
 )
 
+const TORRENT_FIELDS = [
+  'id',
+  'eta',
+  'errorString',
+  'peersConnected',
+  'name',
+  'files',
+  'status',
+  'percentDone',
+  'downloadDir',
+  'rateDownload',
+  'rateUpload',
+  'totalSize',
+  'labels',
+  'magnetLink',
+  'fileStats',
+  'availability',
+  'pieceSize',
+  'pieceCount',
+  'uploadedEver',
+  'downloadedEver',
+  'uploadRatio',
+  'creator',
+  'addedDate',
+  'comment',
+  'isPrivate',
+]
+
 const REFRESH_INTERVAL = 5_000
 
 export const TorrentsProvider = ({
@@ -43,23 +71,7 @@ export const TorrentsProvider = ({
       const response = await sendRPCMessage({
         method: 'torrent-get',
         arguments: {
-          fields: [
-            'id',
-            'eta',
-            'errorString',
-            'peersConnected',
-            'name',
-            'files',
-            'status',
-            'percentDone',
-            'downloadDir',
-            'rateDownload',
-            'rateUpload',
-            'totalSize',
-            'labels',
-            'magnetLink',
-            'fileStats',
-          ],
+          fields: TORRENT_FIELDS,
         },
       })
 
@@ -68,11 +80,11 @@ export const TorrentsProvider = ({
       setTorrents((prevTorrents) => {
         const torrentsDone = response.arguments.torrents.filter((t) =>
           prevTorrents.find(
-            (pt) => pt.id === t.id && pt.percentDone < 1 && t.percentDone === 1
-          )
+            (pt) => pt.id === t.id && pt.percentDone < 1 && t.percentDone === 1,
+          ),
         )
         torrentsDone.forEach((torrent) =>
-          toast.show(i18n.t('toasts.torrentDownloaded'), { native: true })
+          toast.show(i18n.t('toasts.torrentDownloaded'), { native: true }),
         )
         return response.arguments.torrents
       })

diff --git a/apps/app/i18n.ts b/apps/app/i18n.ts
@@ -1,4 +1,16 @@
 import { I18n } from 'i18n-js'
+import {
+  enUS,
+  fr,
+  ru,
+  de,
+  es,
+  ptBR,
+  Locale as DateFnsLocale,
+  pt,
+} from 'date-fns/locale'
+
+export type Locale = 'en' | 'fr' | 'ru' | 'de' | 'es' | 'pt_br'
 
 export const translations = {
   en: require('./locales/en.json'),
@@ -18,6 +30,19 @@ export const translationsLanguages = {
   pt_br: 'Português brasileiro',
 }
 
+export const getDateFnsLocale = (locale: Locale) => {
+  const localeToDateFnsLocale: Record<Locale, DateFnsLocale> = {
+    en: enUS,
+    fr: fr,
+    ru: ru,
+    de: de,
+    es: es,
+    pt_br: ptBR,
+  }
+
+  return localeToDateFnsLocale[locale] ?? enUS
+}
+
 const i18n = new I18n(translations)
 
 i18n.enableFallback = true

diff --git a/apps/app/locales/en.json b/apps/app/locales/en.json
@@ -112,6 +112,21 @@
     "title": "Unsupported browser",
     "description": "This browser is not supported. Please try pikatorrent in another browser."
   },
+  "detailsDialog": {
+    "title": "Details",
+    "torrentSize": "Torrent size",
+    "files": "files",
+    "uploaded": "Uploaded",
+    "downloaded": "Downloaded",
+    "creator": "Creator",
+    "addedDate": "Date added",
+    "remainingTime": "Remaining time",
+    "comment": "Comment",
+    "error": "Error",
+    "privacy": "Privacy",
+    "private": "Private",
+    "public": "Public"
+  },
   "torrentDialog": {
     "copyLink": "Copy Link",
     "share": "Share",
@@ -125,7 +140,8 @@
     "selectedLabels": "Selected labels",
     "allLabels": "All labels",
     "noLabels": "There is no labels yet.",
-    "addLabelInstruction": "Add labels by editing a torrent."
+    "addLabelInstruction": "Add labels by editing a torrent.",
+    "details": "Details"
   },
   "scanQRCodeDialog": {
     "title": "Scan QRCode",

diff --git a/apps/app/package.json b/apps/app/package.json
@@ -32,6 +32,7 @@
     "@tamagui/use-force-update": "1.100.5",
     "bowser": "^2.11.0",
     "burnt": "^0.10.0",
+    "date-fns": "^3.6.0",
     "expo": "~51.0.8",
     "expo-barcode-scanner": "~13.0.1",
     "expo-build-properties": "~0.12.1",

diff --git a/package-lock.json b/package-lock.json