DRAFT: Add Tubearchivist Frontend React dev docker setup (#768)

* Add development docker-compose file * Add /new/ path in nginx conf * Add frontend production setup * Fix lint * Refac move prod docker compose into non suffixed file * Fix run.sh fileendings on windows * Fix docker file naming consistancies * Add frontend dev setup * Add docker compose dev command * Refac remove docker network * Fix potential error causes * Chore update react-router-dom * Add redirect to login after logout * Refac allow basic auth for session login in api * Fix loginresponsetype optional property * Refac move isAdmin check into page Base * Refac use node lts for dev container * Refac remove old setup in readme * Refac move getisAdmin into loader and rename * Refac remove manual csrf cookie handing from actions and loader * Fix post requiring csrf header & cookie * Fix remove empty files * Refac revert dockerfile changes * Refac revert gitatrributes changes * Refac revert docker changes * Refac revert nginx changes * Refac revert docker change * Refac move frontend into frontend folder * Add production steps to dockerfile * Refac implement endpoint renaming * Refac remove frontend dockerfile * Add credentials include for dev env * Fix allow cors with credentials for dev environment * Fix images in dev mode * Add credentials for dev mode to all loader and actions, except signin * Revert cors config * Revert cors config * Fix nginx not serving /youtube/ * Fix video url missing api * Fix media url missing api * Add application settings page * Add continue vids * Add csrf to delete requests * Refac use api/video endpoint with filter to home, channel, playlist pages * Add channel nav request * Add channel playlists * Fix filterbar for playlist in channel * Add playlist_nav to video page * Add downloads aggs * Refac remove basic auth * Fix credentials include in signin * Refac user config to user me config * Add ApiToken get
2026-08-08 02:59:28 +00:00 · 2024-08-10 19:53:50 +02:00
parent 4dd7ac496a
commit 83bb7f678b
221 changed files with 16165 additions and 2 deletions
--- a/frontend/src/components/OverviewStats.tsx
+++ b/frontend/src/components/OverviewStats.tsx
@@ -0,0 +1,53 @@
+import { Fragment } from 'react';
+import humanFileSize from '../functions/humanFileSize';
+import StatsInfoBoxItem from './StatsInfoBoxItem';
+import formatNumbers from '../functions/formatNumbers';
+import { VideoStatsType } from '../pages/SettingsDashboard';
+
+type OverviewStatsProps = {
+  videoStats?: VideoStatsType;
+  useSI: boolean;
+};
+
+const OverviewStats = ({ videoStats, useSI }: OverviewStatsProps) => {
+  if (!videoStats) {
+    return <p id="loading">Loading...</p>;
+  }
+
+  const cards = [
+    {
+      title: 'All: ',
+      data: {
+        Videos: formatNumbers(videoStats?.doc_count || 0),
+        ['Media Size']: humanFileSize(videoStats?.media_size || 0, useSI),
+        Duration: videoStats?.duration_str,
+      },
+    },
+    {
+      title: 'Active: ',
+      data: {
+        Videos: formatNumbers(videoStats?.active_true?.doc_count || 0),
+        ['Media Size']: humanFileSize(videoStats?.active_true?.media_size || 0, useSI),
+        Duration: videoStats?.active_true?.duration_str || 'NA',
+      },
+    },
+    {
+      title: 'Inactive: ',
+      data: {
+        Videos: formatNumbers(videoStats?.active_false?.doc_count || 0),
+        ['Media Size']: humanFileSize(videoStats?.active_false?.media_size || 0, useSI),
+        Duration: videoStats?.active_false?.duration_str || 'NA',
+      },
+    },
+  ];
+
+  return cards.map(card => {
+    return (
+      <Fragment key={card.title}>
+        <StatsInfoBoxItem title={card.title} card={card.data} />
+      </Fragment>
+    );
+  });
+};
+
+export default OverviewStats;