From ca7c01bbc80efc53592d896b3458dbb539b09419 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 16 Aug 2024 21:17:50 -0500
Subject: [PATCH] feat: better history and video sections

---
 scripts/buildAssets/videos.ts                   |  9 ++-------
 .../[id]/components/HistorySection.tsx          |  2 +-
 .../tankopedia/[id]/components/VideoSection.tsx | 17 +++++++++++++----
 src/app/tools/tankopedia/[id]/page.tsx          |  2 +-
 src/constants/youtubers.ts                      |  5 +++++
 5 files changed, 22 insertions(+), 13 deletions(-)
 create mode 100644 src/constants/youtubers.ts

diff --git a/scripts/buildAssets/videos.ts b/scripts/buildAssets/videos.ts
index 2bf5734c5..6f4ab1fd2 100644
--- a/scripts/buildAssets/videos.ts
+++ b/scripts/buildAssets/videos.ts
@@ -2,6 +2,7 @@ import { readdir } from 'fs/promises';
 import { google } from 'googleapis';
 import { cloneDeep, uniqBy } from 'lodash';
 import { parse as parseYaml } from 'yaml';
+import { youtubers } from '../../src/constants/youtubers';
 import { readXMLDVPL } from '../../src/core/blitz/readXMLDVPL';
 import { readYAMLDVPL } from '../../src/core/blitz/readYAMLDVPL';
 import { toUniqueId } from '../../src/core/blitz/toUniqueId';
@@ -10,12 +11,6 @@ import { VideoDefinitions } from '../../src/core/blitzkit/videos';
 import { DATA } from './constants';
 import { BlitzStrings, botPattern, VehicleDefinitionList } from './definitions';
 
-const youtubers = [
-  'UCKBYXp4Xn2I2tL1UL4fpbhw', // droodles
-  'UCrQ-Dy8lVsm11u8pCJ8W7Tw', // fatness
-  'UCxRpZqMElssTdPYDK3x7wyg', // n90
-];
-
 export async function videos(production: boolean) {
   console.log('Building videos...');
 
@@ -108,7 +103,7 @@ export async function videos(production: boolean) {
           (item) =>
             item.snippet?.channelId &&
             item.id?.videoId &&
-            youtubers.includes(item.snippet.channelId),
+            youtubers.some(({ id }) => id === item.snippet?.channelId),
         ),
         (item) => item.snippet!.channelId,
       );
diff --git a/src/app/tools/tankopedia/[id]/components/HistorySection.tsx b/src/app/tools/tankopedia/[id]/components/HistorySection.tsx
index 56ac43ba3..c37b9c2f1 100644
--- a/src/app/tools/tankopedia/[id]/components/HistorySection.tsx
+++ b/src/app/tools/tankopedia/[id]/components/HistorySection.tsx
@@ -8,7 +8,7 @@ export function HistorySection() {
   if (!tank.description) return null;
 
   return (
-    <PageWrapper noFlex1>
+    <PageWrapper noFlex1 align="center">
       <Heading>History of the {tank.name}</Heading>
       <Text>{tank.description}</Text>
     </PageWrapper>
diff --git a/src/app/tools/tankopedia/[id]/components/VideoSection.tsx b/src/app/tools/tankopedia/[id]/components/VideoSection.tsx
index 59edbfb3e..ac826ae28 100644
--- a/src/app/tools/tankopedia/[id]/components/VideoSection.tsx
+++ b/src/app/tools/tankopedia/[id]/components/VideoSection.tsx
@@ -1,4 +1,5 @@
-import { Flex, Heading, Link, Text } from '@radix-ui/themes';
+import { InfoCircledIcon } from '@radix-ui/react-icons';
+import { Callout, Flex, Heading, Link } from '@radix-ui/themes';
 import { use } from 'react';
 import PageWrapper from '../../../../../components/PageWrapper';
 import { videoDefinitions } from '../../../../../core/blitzkit/videos';
@@ -11,10 +12,18 @@ export function VideoSection() {
 
   return (
     <PageWrapper noFlex1>
-      <Flex direction="column" gap="4" align="start">
-        <Flex direction="column">
+      <Flex direction="column" gap="6" align="center">
+        <Flex direction="column" gap="2" align="center">
           <Heading size="6">Review videos</Heading>
-          <Text color="gray">BlitzKit does not endorse any review videos.</Text>
+
+          <Callout.Root size="1">
+            <Callout.Icon>
+              <InfoCircledIcon />
+            </Callout.Icon>
+            <Callout.Text>
+              BlitzKit does not endorse any review videos.
+            </Callout.Text>
+          </Callout.Root>
         </Flex>
 
         <Flex gap="3" wrap="wrap">
diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx
index caf960c75..a5a06d49e 100644
--- a/src/app/tools/tankopedia/[id]/page.tsx
+++ b/src/app/tools/tankopedia/[id]/page.tsx
@@ -84,7 +84,7 @@ export default function Page({ params }: { params: { id: string } }) {
       <TechTreeSection />
       <VideoSection />
       <HistorySection />
-      {!exempt && <AdMidSectionResponsive />}
+      {!exempt && <AdMidSectionResponsive mb="6" />}
     </PageWrapper>
   );
 }
diff --git a/src/constants/youtubers.ts b/src/constants/youtubers.ts
new file mode 100644
index 000000000..65d19d8dd
--- /dev/null
+++ b/src/constants/youtubers.ts
@@ -0,0 +1,5 @@
+export const youtubers = [
+  { id: 'UCKBYXp4Xn2I2tL1UL4fpbhw', name: 'Droodles' },
+  { id: 'UCrQ-Dy8lVsm11u8pCJ8W7Tw', name: 'HisRoyalFatness' },
+  { id: 'UCxRpZqMElssTdPYDK3x7wyg', name: 'N90' },
+];