feat: new reviews

src/app/tools/tankopedia/[id]/components/VideoSection.tsx

@@ -2,13 +2,15 @@ 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';
+import { reviews } from '../../../../../core/blitzkit/reviews';
 import * as Duel from '../../../../../stores/duel';
 
 export function VideoSection() {
   const tank = Duel.use((state) => state.protagonist.tank);
-  const awaitedVideoDefinitions = use(videoDefinitions);
-  const videos = awaitedVideoDefinitions[tank.id]?.videos ?? [];
+  const awaitedReviews = use(reviews);
+  const videos = awaitedReviews.reviews[tank.id]?.videos;
+
+  if (!videos) return null;
 
   return (
     <PageWrapper noFlex1>
@@ -29,13 +31,13 @@ export function VideoSection() {
         <Flex gap="3" wrap="wrap">
           {videos.map((video) => (
             <Link
-              key={video}
-              href={`https://www.youtube.com/watch?v=${video}`}
+              key={video.id}
+              href={`https://www.youtube.com/watch?v=${video.id}`}
               target="_blank"
             >
               <img
                 alt="Video thumbnail"
-                src={`https://i.ytimg.com/vi/${video}/hqdefault.jpg`}
+                src={`https://i.ytimg.com/vi/${video.id}/hqdefault.jpg`}
                 style={{
                   aspectRatio: '16 / 9',
                   objectFit: 'cover',

src/core/blitzkit/reviews.ts

@@ -0,0 +1,22 @@
+import { decode } from '../protobuf/decode';
+import { asset } from './asset';
+
+export interface Reviews {
+  reviews: Record<number, Review>;
+}
+
+interface Review {
+  last_updated: number;
+  videos?: Video[];
+}
+
+export interface Video {
+  id: string;
+  author: string;
+}
+
+export const reviews = fetch(asset('definitions/reviews.pb'))
+  .then((response) => response.arrayBuffer())
+  .then((buffer) =>
+    decode<Reviews>('reviews/blitzkit.Reviews', new Uint8Array(buffer)),
+  );

src/core/blitzkit/videos.ts

@@ -1,32 +0,0 @@
-import { asset } from './asset';
-
-export interface VideoDefinitions {
-  [id: number]: {
-    videos: string[];
-    lastUpdated: number;
-  };
-}
-
-export const videoDefinitions = fetch(asset('definitions/videos.csv'))
-  .then((response) => response.text())
-  .then((text) =>
-    text
-      .split('\n')
-      .map((line) => {
-        const [idString, lastUpdatedString, ...videos] = line
-          .split(',')
-          .filter(Boolean);
-        const id = Number(idString);
-        const lastUpdated = Number(lastUpdatedString);
-        return { id, videos, lastUpdated };
-      })
-      .filter(({ videos }) => videos.length > 0)
-      .reduce<VideoDefinitions>((accumulator, { id, videos, lastUpdated }) => {
-        accumulator[id] = {
-          videos,
-          lastUpdated,
-        };
-
-        return accumulator;
-      }, {}),
-  );

src/core/protobuf/encode.ts

@@ -2,5 +2,9 @@ import { lookup } from './lookup';
 
 export async function encode(proto: string, data: any) {
   const Message = await lookup(proto);
+  const verification = Message.verify(data);
+
+  if (verification !== null) throw new Error(verification);
+
   return Message.encode(Message.create(data)).finish();
 }

src/core/protobuf/lookup.ts

@@ -2,7 +2,7 @@ import { Root } from 'protobufjs';
 import { context } from '../blitzkit/context';
 
 export async function lookup(proto: string) {
-  const [file, message] = proto.split('/')[0];
+  const [file, message] = proto.split('/');
   const root = await new Root().load(
     context === 'server'
       ? `public/protos/${file}.proto`

src/test.ts

@@ -1,7 +0,0 @@
-import { youtubers } from './constants/youtubers';
-import { decodeYouTubeId } from './core/youtube/decodeYouTubeId';
-import { encodeYouTubeId } from './core/youtube/encodeYouTubeId';
-
-youtubers.forEach((yt) => {
-  console.log(yt.id, decodeYouTubeId(encodeYouTubeId(yt.id)));
-});