diff --git a/frontend/src/api/actions/updateUserConfig.ts b/frontend/src/api/actions/updateUserConfig.ts index 675d80d9..a4261034 100644 --- 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; diff --git a/frontend/src/components/BiggestChannelsStats.tsx b/frontend/src/components/BiggestChannelsStats.tsx index 6358ede5..7ccf32f5 100644 --- 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 = ({
Loading...
; } @@ -31,7 +31,7 @@ const DownloadHistoryStats = ({ downloadHistoryStats, useSI }: DownloadHistorySt
+{formatNumbers(count)} {videoText}
- {humanFileSize(media_size, useSI)}
+ {humanFileSize(media_size, useSIUnits)}
Loading...
; } @@ -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', }, }, diff --git a/frontend/src/components/VideoTypeStats.tsx b/frontend/src/components/VideoTypeStats.tsx index 1aacfecf..a63a1276 100644 --- 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) { returnLoading...
; } @@ -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', }, }, diff --git a/frontend/src/pages/ChannelVideo.tsx b/frontend/src/pages/ChannelVideo.tsx index 2533bebe..7a2cc5c4 100644 --- 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) => { |{' '} {videoAggsResponse.total_duration.value_str} playback{' '} | Total size{' '} - {humanFileSize(videoAggsResponse.total_size.value, true)} + {humanFileSize(videoAggsResponse.total_size.value, useSiUnits)}Archive view page size
@@ -113,18 +129,40 @@ const SettingsUser = () => {Show help text
File size units:
+File size: {humanFileSize(video.media_size)}
} + {video.media_size &&File size: {humanFileSize(video.media_size, useSiUnits)}
} {video.streams && video.streams.map(stream => { return (
{capitalizeFirstLetter(stream.type)}: {stream.codec}{' '}
- {humanFileSize(stream.bitrate)}/s
+ {humanFileSize(stream.bitrate, useSiUnits)}/s
{stream.width && (
<>
| {stream.width}x{stream.height}
diff --git a/frontend/src/stores/UserConfigStore.ts b/frontend/src/stores/UserConfigStore.ts
index 609f4b7b..20b2a417 100644
--- a/frontend/src/stores/UserConfigStore.ts
+++ b/frontend/src/stores/UserConfigStore.ts
@@ -18,6 +18,7 @@ export const useUserConfigStore = create