Add download speed indicators

Leapward-Koex · Apr 23, 2022 · 875c821 · 875c821
1 parent d204686
commit 875c821
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 25 deletions.
diff --git a/HelperFunctions/index.tsx b/HelperFunctions/index.tsx
@@ -1,12 +1,47 @@
-export async function promiseEach<T>(promiseArray: Promise<T>[], thenCallback: (item: T) => any) {
-    for (const item of promiseArray) {
-        item.then(data => thenCallback(data))
-    }
+export async function promiseEach<T>(
+  promiseArray: Promise<T>[],
+  thenCallback: (item: T) => any,
+) {
+  for (const item of promiseArray) {
+    item.then(data => thenCallback(data));
+  }
 }
 
-export const weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
+export const weekday = [
+  'Sunday',
+  'Monday',
+  'Tuesday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday',
+];
 
 export function getDayOfWeek(dateString: string) {
-    const date = new Date(dateString);
-    return weekday[date.getDay()];
+  const date = new Date(dateString);
+  return weekday[date.getDay()];
+}
+
+export function humanFileSize(bytes: number, si = false, dp = 1) {
+  const thresh = si ? 1000 : 1024;
+
+  if (Math.abs(bytes) < thresh) {
+    return bytes + ' B';
+  }
+
+  const units = si
+    ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+    : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+  let u = -1;
+  const r = 10 ** dp;
+
+  do {
+    bytes /= thresh;
+    ++u;
+  } while (
+    Math.round(Math.abs(bytes) * r) / r >= thresh &&
+    u < units.length - 1
+  );
+
+  return bytes.toFixed(dp) + ' ' + units[u];
 }
diff --git a/components/ReleaseShow.tsx b/components/ReleaseShow.tsx
@@ -3,7 +3,6 @@ import * as React from 'react';
 import {
   Image,
   StyleSheet,
-  Text,
   View,
   Linking,
   ImageBackground,
@@ -20,10 +19,11 @@ import {
   Title,
   Paragraph,
   useTheme,
+  Text,
 } from 'react-native-paper';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import {StorageKeys} from '../enums/enum';
-import {getDayOfWeek} from '../HelperFunctions';
+import {getDayOfWeek, humanFileSize} from '../HelperFunctions';
 import {ShowInfo, ShowResolution, WatchList} from '../models/models';
 import {SubsPleaseApi} from '../SubsPleaseApi';
 import {NativeModules} from 'react-native';
@@ -32,6 +32,14 @@ import nodejs from 'nodejs-mobile-react-native';
 import {DownloadDirectoryPath} from 'react-native-fs';
 import * as Progress from 'react-native-progress';
 
+enum DownloadingStatus {
+  NotDownloading,
+  DownloadStarting,
+  Downloading,
+  Seeding,
+  Completed,
+}
+
 type releaseShowProps = {
   showInfo: ShowInfo;
   watchList: WatchList;
@@ -46,13 +54,18 @@ export const ReleaseShow = ({
   const {colors} = useTheme();
   const [modalVisible, setModalVisible] = React.useState(false);
   const [showDescription, setShowDescription] = React.useState('Loading...');
+  const [downloadingStatus, setDownloadingStatus] = React.useState(
+    DownloadingStatus.NotDownloading,
+  );
   const [fileSize, setFileSize] = React.useState(0);
   const [downloadProgress, setDownloadProgress] = React.useState(0);
   const [downloadSpeed, setDownloadSpeed] = React.useState(0);
   const [uploadSpeed, setUploadSpeed] = React.useState(0);
   const [downloaded, setDownloaded] = React.useState(0);
+  const [torrentPaused, setTorrentPaused] = React.useState(false);
   const [callbackId] = React.useState(
-    (Math.random() + 1).toString(36).substring(7),
+    showInfo.show + showInfo.release_date + showInfo.episode,
+    //(Math.random() + 1).toString(36).substring(7),
   );
 
   const styles = StyleSheet.create({
@@ -114,15 +127,19 @@ export const ReleaseShow = ({
         Linking.openURL(desiredResoltion.magnet);
       };
       const downloadTorrent = () => {
+        setDownloadingStatus(DownloadingStatus.DownloadStarting);
         nodejs.channel.addListener('message', msg => {
           if (msg.callbackId === callbackId) {
             if (msg.name === 'torrent-metadata') {
+              setDownloadingStatus(DownloadingStatus.Downloading);
               setFileSize(msg.size);
             } else if (msg.name === 'torrent-progress') {
               setDownloadProgress(msg.progress);
               setDownloaded(msg.downloaded);
               setDownloadSpeed(msg.downloadSpeed);
               setUploadSpeed(msg.uploadSpeed);
+            } else if (msg.name === 'torrent-done') {
+              setDownloadingStatus(DownloadingStatus.Seeding);
             }
           }
         });
@@ -192,6 +209,14 @@ export const ReleaseShow = ({
     }
   };
 
+  const setTorrentState = (state: 'resume' | 'pause') => {
+    setTorrentPaused(state !== 'resume');
+    nodejs.channel.send({
+      name: state,
+      callbackId,
+    });
+  };
+
   const getWatchlistActionButton = () => {
     if (
       watchList.shows.filter(show => show.showName === showInfo.show).length > 0
@@ -232,6 +257,80 @@ export const ReleaseShow = ({
     );
   };
 
+  const getActionInfoSection = () => {
+    if (downloadingStatus === DownloadingStatus.NotDownloading) {
+      return (
+        <View style={{flexDirection: 'row'}}>
+          {getMagnetButton('720')}
+          {getMagnetButton('1080')}
+        </View>
+      );
+    }
+    return (
+      <View>
+        <View style={{flexDirection: 'row'}}>
+          <Icon
+            name="arrow-up"
+            style={{marginRight: 5, marginTop: 2}}
+            size={13}
+            color={colors.subsPleaseLight3}
+          />
+          <Text style={{color: colors.subsPleaseLight3}}>
+            {humanFileSize(uploadSpeed)}/S
+          </Text>
+        </View>
+        <View style={{flexDirection: 'row'}}>
+          <Icon
+            name="arrow-down"
+            style={{marginRight: 5, marginTop: 2}}
+            size={13}
+            color={colors.subsPleaseLight3}
+          />
+          <Text style={{color: colors.subsPleaseLight3}}>
+            {humanFileSize(downloadSpeed)}/S
+          </Text>
+        </View>
+      </View>
+    );
+  };
+
+  const getProgressOverlay = () => {
+    if (downloadingStatus === DownloadingStatus.NotDownloading) {
+      return <></>;
+    } else if (
+      downloadingStatus === DownloadingStatus.DownloadStarting ||
+      downloadingStatus === DownloadingStatus.Downloading
+    ) {
+      return (
+        <Progress.Pie
+          style={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: [{translateX: -35}, {translateY: -35}],
+          }}
+          color={'rgba(203,43,120,0.7)'}
+          progress={downloadProgress}
+          size={70}
+        />
+      );
+    } else if (downloadingStatus === DownloadingStatus.Seeding) {
+      return (
+        <Icon
+          name="arrow-up"
+          style={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: [{translateX: -32}, {translateY: -35}],
+          }}
+          size={70}
+          color={colors.primary}
+        />
+      );
+    }
+  };
+
   return (
     <Card style={cardStyle}>
       <View style={{flexDirection: 'row', height: 130}}>
@@ -254,16 +353,7 @@ export const ReleaseShow = ({
               uri: new URL(showInfo.image_url, SubsPleaseApi.apiBaseUrl).href,
             }}
           />
-          <Progress.Pie
-            style={{
-              position: 'absolute',
-              top: '50%',
-              left: '50%',
-              transform: [{translateX: -35}, {translateY: -35}],
-            }}
-            progress={downloadProgress}
-            size={70}
-          />
+          {getProgressOverlay()}
         </View>
         <View style={{flex: 0.8, padding: 5}}>
           <Title
@@ -282,10 +372,8 @@ export const ReleaseShow = ({
             {showInfo.show}
           </Title>
           <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
-            <View style={{flexDirection: 'row'}}>
-              {getMagnetButton('720')}
-              {getMagnetButton('1080')}
-            </View>
+            {getActionInfoSection()}
+
             {getWatchlistActionButton()}
           </View>
         </View>

diff --git a/nodejs-assets/nodejs-project/main.js b/nodejs-assets/nodejs-project/main.js
@@ -22,6 +22,7 @@ class TorrentClient {
   }
 
   downloadTorrent(magnetUri, location) {
+    console.log('Starting torrent', this.callbackId);
     this.client.add(magnetUri, {path: location}, torrent => {
       // Got torrent metadata!
       rn_bridge.channel.send({
@@ -41,11 +42,12 @@ class TorrentClient {
           uploadSpeed: torrent.uploadSpeed,
           progress: torrent.progress,
         });
-      }, 100);
+      }, 1000);
       torrent.on('download', bytes => {
         throttledDownloadHandler();
       });
       torrent.on('done', () => {
+        console.log('Torrent downloaded');
         rn_bridge.channel.send({
           name: 'torrent-done',
           callbackId: this.callbackId,
@@ -56,12 +58,14 @@ class TorrentClient {
 
   pause() {
     if (this.torrent && !this.torrent.paused) {
+      console.log('Pausing', this.callbackId);
       this.torrent.pause();
     }
   }
 
   resume() {
     if (this.torrent && this.torrent.paused) {
+      console.log('Resuming', this.callbackId);
       this.torrent.resume();
     }
   }
@@ -77,6 +81,7 @@ rn_bridge.channel.on('message', msg => {
     torrentObjects[msg.callbackId] = torrentClient;
   } else if (msg.name === 'pause') {
     if (torrentObjects[msg.callbackId]) {
+      console.log('Pasuing', msg.callbackId);
       torrentObjects[msg.callbackId].pause();
     }
   } else if (msg.name === 'resume') {