Refac use file_size_unit from user config in frontend #886

frontend/src/api/actions/updateUserConfig.ts

@@ -3,6 +3,11 @@ import APIClient from '../../functions/APIClient';
 
 export type ColourVariants = 'dark.css' | 'light.css' | 'matrix.css' | 'midnight.css';
 
+export const FileSizeUnits = {
+  Binary: 'binary',
+  Metric: 'metric',
+};
+
 export type UserConfigType = {
   stylesheet: ColourVariants;
   page_size: number;
@@ -14,6 +19,7 @@ export type UserConfigType = {
   view_style_playlist: ViewLayoutType;
   grid_items: number;
   hide_watched: boolean;
+  file_size_unit: 'binary' | 'metric';
   show_ignored_only: boolean;
   show_subed_only: boolean;
   show_help_text: boolean;

frontend/src/components/BiggestChannelsStats.tsx

@@ -8,14 +8,14 @@ type BiggestChannelsStatsProps = {
   biggestChannelsStatsByCount?: BiggestChannelsStatsType;
   biggestChannelsStatsByDuration?: BiggestChannelsStatsType;
   biggestChannelsStatsByMediaSize?: BiggestChannelsStatsType;
-  useSI: boolean;
+  useSIUnits: boolean;
 };
 
 const BiggestChannelsStats = ({
   biggestChannelsStatsByCount,
   biggestChannelsStatsByDuration,
   biggestChannelsStatsByMediaSize,
-  useSI,
+  useSIUnits,
 }: BiggestChannelsStatsProps) => {
   if (
     !biggestChannelsStatsByCount &&
@@ -94,7 +94,9 @@ const BiggestChannelsStats = ({
                     <td className="agg-channel-name">
                       <Link to={Routes.Channel(id)}>{name}</Link>
                     </td>
-                    <td className="agg-channel-right-align">{humanFileSize(media_size, useSI)}</td>
+                    <td className="agg-channel-right-align">
+                      {humanFileSize(media_size, useSIUnits)}
+                    </td>
                   </tr>
                 );
               })}

frontend/src/components/DownloadHistoryStats.tsx

@@ -5,10 +5,10 @@ import { DownloadHistoryStatsType } from '../pages/SettingsDashboard';
 
 type DownloadHistoryStatsProps = {
   downloadHistoryStats?: DownloadHistoryStatsType;
-  useSI: boolean;
+  useSIUnits: boolean;
 };
 
-const DownloadHistoryStats = ({ downloadHistoryStats, useSI }: DownloadHistoryStatsProps) => {
+const DownloadHistoryStats = ({ downloadHistoryStats, useSIUnits }: DownloadHistoryStatsProps) => {
   if (!downloadHistoryStats) {
     return <p id="loading">Loading...</p>;
   }
@@ -31,7 +31,7 @@ const DownloadHistoryStats = ({ downloadHistoryStats, useSI }: DownloadHistorySt
         <p>
           +{formatNumbers(count)} {videoText}
           <br />
-          {humanFileSize(media_size, useSI)}
+          {humanFileSize(media_size, useSIUnits)}
         </p>
       </div>
     );

frontend/src/components/OverviewStats.tsx

@@ -6,10 +6,10 @@ import { VideoStatsType } from '../pages/SettingsDashboard';
 
 type OverviewStatsProps = {
   videoStats?: VideoStatsType;
-  useSI: boolean;
+  useSIUnits: boolean;
 };
 
-const OverviewStats = ({ videoStats, useSI }: OverviewStatsProps) => {
+const OverviewStats = ({ videoStats, useSIUnits }: OverviewStatsProps) => {
   if (!videoStats) {
     return <p id="loading">Loading...</p>;
   }
@@ -19,7 +19,7 @@ const OverviewStats = ({ videoStats, useSI }: OverviewStatsProps) => {
       title: 'All: ',
       data: {
         Videos: formatNumbers(videoStats?.doc_count || 0),
-        ['Media Size']: humanFileSize(videoStats?.media_size || 0, useSI),
+        ['Media Size']: humanFileSize(videoStats?.media_size || 0, useSIUnits),
         Duration: videoStats?.duration_str,
       },
     },
@@ -27,7 +27,7 @@ const OverviewStats = ({ videoStats, useSI }: OverviewStatsProps) => {
       title: 'Active: ',
       data: {
         Videos: formatNumbers(videoStats?.active_true?.doc_count || 0),
-        ['Media Size']: humanFileSize(videoStats?.active_true?.media_size || 0, useSI),
+        ['Media Size']: humanFileSize(videoStats?.active_true?.media_size || 0, useSIUnits),
         Duration: videoStats?.active_true?.duration_str || 'NA',
       },
     },
@@ -35,7 +35,7 @@ const OverviewStats = ({ videoStats, useSI }: OverviewStatsProps) => {
       title: 'Inactive: ',
       data: {
         Videos: formatNumbers(videoStats?.active_false?.doc_count || 0),
-        ['Media Size']: humanFileSize(videoStats?.active_false?.media_size || 0, useSI),
+        ['Media Size']: humanFileSize(videoStats?.active_false?.media_size || 0, useSIUnits),
         Duration: videoStats?.active_false?.duration_str || 'NA',
       },
     },

frontend/src/components/VideoTypeStats.tsx

@@ -6,10 +6,10 @@ import { VideoStatsType } from '../pages/SettingsDashboard';
 
 type VideoTypeStatsProps = {
   videoStats?: VideoStatsType;
-  useSI: boolean;
+  useSIUnits: boolean;
 };
 
-const VideoTypeStats = ({ videoStats, useSI }: VideoTypeStatsProps) => {
+const VideoTypeStats = ({ videoStats, useSIUnits }: VideoTypeStatsProps) => {
   if (!videoStats) {
     return <p id="loading">Loading...</p>;
   }
@@ -19,7 +19,7 @@ const VideoTypeStats = ({ videoStats, useSI }: VideoTypeStatsProps) => {
       title: 'Regular Videos: ',
       data: {
         Videos: formatNumbers(videoStats?.type_videos?.doc_count || 0),
-        ['Media Size']: humanFileSize(videoStats?.type_videos?.media_size || 0, useSI),
+        ['Media Size']: humanFileSize(videoStats?.type_videos?.media_size || 0, useSIUnits),
         Duration: videoStats?.type_videos?.duration_str || 'NA',
       },
     },
@@ -27,7 +27,7 @@ const VideoTypeStats = ({ videoStats, useSI }: VideoTypeStatsProps) => {
       title: 'Shorts: ',
       data: {
         Videos: formatNumbers(videoStats?.type_shorts?.doc_count || 0),
-        ['Media Size']: humanFileSize(videoStats?.type_shorts?.media_size || 0, useSI),
+        ['Media Size']: humanFileSize(videoStats?.type_shorts?.media_size || 0, useSIUnits),
         Duration: videoStats?.type_shorts?.duration_str || 'NA',
       },
     },
@@ -35,7 +35,7 @@ const VideoTypeStats = ({ videoStats, useSI }: VideoTypeStatsProps) => {
       title: 'Streams: ',
       data: {
         Videos: formatNumbers(videoStats?.type_streams?.doc_count || 0),
-        ['Media Size']: humanFileSize(videoStats?.type_streams?.media_size || 0, useSI),
+        ['Media Size']: humanFileSize(videoStats?.type_streams?.media_size || 0, useSIUnits),
         Duration: videoStats?.type_streams?.duration_str || 'NA',
       },
     },

frontend/src/pages/ChannelVideo.tsx

@@ -20,6 +20,7 @@ import loadVideoListByFilter, {
 import loadChannelAggs, { ChannelAggsType } from '../api/loader/loadChannelAggs';
 import humanFileSize from '../functions/humanFileSize';
 import { useUserConfigStore } from '../stores/UserConfigStore';
+import { FileSizeUnits } from '../api/actions/updateUserConfig';
 
 type ChannelParams = {
   channelId: string;
@@ -47,6 +48,7 @@ const ChannelVideo = ({ videoType }: ChannelVideoProps) => {
   const pagination = videoResponse?.paginate;
 
   const hasVideos = videoResponse?.data?.length !== 0;
+  const useSiUnits = userConfig.file_size_unit === FileSizeUnits.Metric;
 
   const view = userConfig.view_style_home;
   const isGridView = view === ViewStyles.grid;
@@ -114,7 +116,7 @@ const ChannelVideo = ({ videoType }: ChannelVideoProps) => {
                   <span className="space-carrot">|</span>{' '}
                   {videoAggsResponse.total_duration.value_str} playback{' '}
                   <span className="space-carrot">|</span> Total size{' '}
-                  {humanFileSize(videoAggsResponse.total_size.value, true)}
+                  {humanFileSize(videoAggsResponse.total_size.value, useSiUnits)}
                 </p>
                 <div className="button-box">
                   <Button

frontend/src/pages/SettingsDashboard.tsx

@@ -15,6 +15,8 @@ import DownloadHistoryStats from '../components/DownloadHistoryStats';
 import BiggestChannelsStats from '../components/BiggestChannelsStats';
 import Notifications from '../components/Notifications';
 import PaginationDummy from '../components/PaginationDummy';
+import { useUserConfigStore } from '../stores/UserConfigStore';
+import { FileSizeUnits } from '../api/actions/updateUserConfig';
 
 export type VideoStatsType = {
   doc_count: number;
@@ -125,7 +127,7 @@ type DashboardStatsReponses = {
 };
 
 const SettingsDashboard = () => {
-  const [useSi, setUseSi] = useState(false);
+  const { userConfig } = useUserConfigStore();
 
   const [response, setResponse] = useState<DashboardStatsReponses>({
     videoStats: undefined,
@@ -181,6 +183,8 @@ const SettingsDashboard = () => {
     })();
   }, []);
 
+  const useSiUnits = userConfig.file_size_unit === FileSizeUnits.Metric;
+
   return (
     <>
       <title>TA | Settings Dashboard</title>
@@ -190,31 +194,17 @@ const SettingsDashboard = () => {
         <div className="title-bar">
           <h1>Your Archive</h1>
         </div>
-        <p>
-          File Sizes in:
-          <select
-            value={useSi ? 'true' : 'false'}
-            onChange={event => {
-              const value = event.target.value;
-              console.log(value);
-              setUseSi(value === 'true');
-            }}
-          >
-            <option value="true">SI units</option>
-            <option value="false">Binary units</option>
-          </select>
-        </p>
 
         <div className="settings-item">
           <h2>Overview</h2>
           <div className="info-box info-box-3">
-            <OverviewStats videoStats={videoStats} useSI={useSi} />
+            <OverviewStats videoStats={videoStats} useSIUnits={useSiUnits} />
           </div>
         </div>
         <div className="settings-item">
           <h2>Video Type</h2>
           <div className="info-box info-box-3">
-            <VideoTypeStats videoStats={videoStats} useSI={useSi} />
+            <VideoTypeStats videoStats={videoStats} useSIUnits={useSiUnits} />
           </div>
         </div>
         <div className="settings-item">
@@ -236,7 +226,7 @@ const SettingsDashboard = () => {
         <div className="settings-item">
           <h2>Download History</h2>
           <div className="info-box info-box-4">
-            <DownloadHistoryStats downloadHistoryStats={downloadHistoryStats} useSI={false} />
+            <DownloadHistoryStats downloadHistoryStats={downloadHistoryStats} useSIUnits={false} />
           </div>
         </div>
         <div className="settings-item">
@@ -246,7 +236,7 @@ const SettingsDashboard = () => {
               biggestChannelsStatsByCount={biggestChannelsStatsByCount}
               biggestChannelsStatsByDuration={biggestChannelsStatsByDuration}
               biggestChannelsStatsByMediaSize={biggestChannelsStatsByMediaSize}
-              useSI={useSi}
+              useSIUnits={useSiUnits}
             />
           </div>
         </div>

frontend/src/pages/SettingsUser.tsx

@@ -1,5 +1,9 @@
 import { useNavigate } from 'react-router-dom';
-import updateUserConfig, { ColourVariants, UserConfigType } from '../api/actions/updateUserConfig';
+import updateUserConfig, {
+  ColourVariants,
+  FileSizeUnits,
+  UserConfigType,
+} from '../api/actions/updateUserConfig';
 import { ColourConstant } from '../configuration/colours/useColours';
 import SettingsNavigation from '../components/SettingsNavigation';
 import Notifications from '../components/Notifications';
@@ -18,14 +22,21 @@ const SettingsUser = () => {
   const [styleSheetRefresh, setStyleSheetRefresh] = useState(false);
   const [pageSize, setPageSize] = useState<number>(userConfig.page_size);
   const [showHelpText, setShowHelpText] = useState(userConfig.show_help_text);
+  const [selectedFileSizeUnit, setSelectedFileSizeUnit] = useState(FileSizeUnits.Binary);
 
   useEffect(() => {
     (async () => {
       setStyleSheet(userConfig.stylesheet);
       setPageSize(userConfig.page_size);
       setShowHelpText(userConfig.show_help_text);
+      setSelectedFileSizeUnit(userConfig.file_size_unit);
     })();
-  }, [userConfig.page_size, userConfig.stylesheet, userConfig.show_help_text]);
+  }, [
+    userConfig.page_size,
+    userConfig.stylesheet,
+    userConfig.show_help_text,
+    userConfig.file_size_unit,
+  ]);
 
   const handleStyleSheetChange = async (selectedStyleSheet: ColourVariants) => {
     handleUserConfigUpdate({ stylesheet: selectedStyleSheet });
@@ -41,6 +52,10 @@ const SettingsUser = () => {
     handleUserConfigUpdate({ [configKey]: configValue });
   };
 
+  const handleFileSizeUnitChange = async (configKey: string, configValue: string) => {
+    handleUserConfigUpdate({ [configKey]: configValue });
+  };
+
   const handleUserConfigUpdate = async (config: Partial<UserConfigType>) => {
     const updatedUserConfig = await updateUserConfig(config);
     setUserConfig(updatedUserConfig);
@@ -88,6 +103,7 @@ const SettingsUser = () => {
                 {styleSheetRefresh && <button onClick={handlePageRefresh}>Refresh</button>}
               </div>
             </div>
+
             <div className="settings-box-wrapper">
               <div>
                 <p>Archive view page size</p>
@@ -113,18 +129,40 @@ const SettingsUser = () => {
                 </div>
               </div>
             </div>
+
             <div className="settings-box-wrapper">
               <div>
                 <p>Show help text</p>
               </div>
+
               <ToggleConfig
                 name="show_help_text"
                 value={showHelpText}
                 updateCallback={handleShowHelpTextChange}
               />
             </div>
+
+            <div
+              className="settings-box-wrapper"
+              title="Metric (SI) units, aka powers of 1000. Binary (IEC), aka powers of 1024."
+            >
+              <div>
+                <p>File size units:</p>
+              </div>
+
+              <select
+                value={selectedFileSizeUnit}
+                onChange={event => {
+                  handleFileSizeUnitChange('file_size_unit', event.currentTarget.value);
+                }}
+              >
+                <option value={FileSizeUnits.Metric}>SI units</option>
+                <option value={FileSizeUnits.Binary}>Binary units</option>
+              </select>
             </div>
           </div>
+        </div>
+
         {isAdmin && (
           <>
             <div className="settings-group">

frontend/src/pages/Video.tsx

@@ -41,6 +41,8 @@ import ToggleConfig from '../components/ToggleConfig';
 import { PlaylistType } from '../api/loader/loadPlaylistById';
 import { useAppSettingsStore } from '../stores/AppSettingsStore';
 import updateDownloadQueueStatusById from '../api/actions/updateDownloadQueueStatusById';
+import { FileSizeUnits } from '../api/actions/updateUserConfig';
+import { useUserConfigStore } from '../stores/UserConfigStore';
 
 const isInPlaylist = (videoId: string, playlist: PlaylistType) => {
   return playlist.playlist_entries.some(entry => {
@@ -112,6 +114,7 @@ const Video = () => {
   const navigate = useNavigate();
   const isAdmin = useIsAdmin();
   const { appSettingsConfig } = useAppSettingsStore();
+  const { userConfig } = useUserConfigStore();
 
   const [videoEnded, setVideoEnded] = useState(false);
   const [playlistAutoplay, setPlaylistAutoplay] = useState(
@@ -199,6 +202,7 @@ const Video = () => {
   const customPlaylists = customPlaylistsResponse?.data;
   const starRating = convertStarRating(video?.stats?.average_rating);
   const comments = commentsResponse;
+  const useSiUnits = userConfig.file_size_unit === FileSizeUnits.Metric;
 
   console.log('playlistNav', playlistNav);
 
@@ -439,14 +443,14 @@ const Video = () => {
             </div>
           </div>
           <div className="info-box-item">
-            {video.media_size && <p>File size: {humanFileSize(video.media_size)}</p>}
+            {video.media_size && <p>File size: {humanFileSize(video.media_size, useSiUnits)}</p>}
 
             {video.streams &&
               video.streams.map(stream => {
                 return (
                   <p key={stream.index}>
                     {capitalizeFirstLetter(stream.type)}: {stream.codec}{' '}
-                    {humanFileSize(stream.bitrate)}/s
+                    {humanFileSize(stream.bitrate, useSiUnits)}/s
                     {stream.width && (
                       <>
                         <span className="space-carrot">|</span> {stream.width}x{stream.height}

frontend/src/stores/UserConfigStore.ts

@@ -18,6 +18,7 @@ export const useUserConfigStore = create<UserConfigState>(set => ({
     view_style_playlist: 'grid',
     grid_items: 3,
     hide_watched: false,
+    file_size_unit: 'binary',
     show_ignored_only: false,
     show_subed_only: false,
     show_help_text: true,