Refac use file_size_unit from user config in frontend #886

2025-03-15 15:15:22 +01:00 · 2025-03-15 15:15:22 +01:00 · c5f549967b
parent 87d4f16456
commit c5f549967b
10 changed files with 83 additions and 40 deletions
--- a/frontend/src/api/actions/updateUserConfig.ts
+++ b/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;
--- a/frontend/src/components/BiggestChannelsStats.tsx
+++ b/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>
                );
              })}
--- a/frontend/src/components/DownloadHistoryStats.tsx
+++ b/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>
    );
--- a/frontend/src/components/OverviewStats.tsx
+++ b/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',
      },
    },
--- a/frontend/src/components/VideoTypeStats.tsx
+++ b/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',
      },
    },
--- a/frontend/src/pages/ChannelVideo.tsx
+++ b/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
--- a/frontend/src/pages/SettingsDashboard.tsx
+++ b/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>
--- a/frontend/src/pages/SettingsUser.tsx
+++ b/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">
--- a/frontend/src/pages/Video.tsx
+++ b/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}
--- a/frontend/src/stores/UserConfigStore.ts
+++ b/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,