fix

src/components/Histories.tsx

@@ -9,7 +9,9 @@ import { videos } from "../consts/videos";
 
 function Histories() {
   const [selectedVideoIndex, setSelectedVideoIndex] = useState(0);
-  const videoRefs = videos.map(() => createRef<HTMLVideoElement>());
+  const videoRefs = videos
+    .sort((a, b) => b.id - a.id)
+    .map(() => createRef<HTMLVideoElement>());
   const [videoWidth, setVideoWidth] = useState<number>(0);
   const [videoHeigth, setVideoHeigth] = useState<number>(0);
   const [videoProgesses, setVideoProgresses] = useState<number[]>([]);

src/consts/videos.ts

@@ -2,29 +2,30 @@ import { Video } from "../types/Video";
 
 export const videos: Video[] = [
   {
-    id: "1",
+    id: 1,
     value: "/videos/histories/1.mp4",
-    title: "Интерактивный комплекс GRAFF.estate для ЖК Upside Towers, Москва",
+    title:
+      "Интерактивная инсталляция GRAFF.estate для ЖК DNS City в г. Владивосток",
     desc: "",
     poster: "/images/posters/histories/1.jpg",
   },
   {
-    id: "2",
+    id: 2,
     value: "/videos/histories/2.mp4",
-    title: "Graff.estate на выставке 100+ TechnoBuild",
+    title: "GRAFF.estate на выставке 100+ TechnoBuild",
     desc: "",
     poster: "/images/posters/histories/2.jpg",
   },
   {
-    id: "3",
+    id: 3,
     value: "/videos/histories/3.mp4",
-    title:
-      "Интерактивная инсталляция graff.estate для ЖК DNS City в г. Владивосток",
+    title: "Интерактивный комплекс GRAFF.estate для ЖК Upside Towers, Москва",
     desc: "",
     poster: "/images/posters/histories/3.jpg",
   },
+
   {
-    id: "4",
+    id: 4,
     value: "/videos/histories/4.mp4",
     title: "GRAFF.estate на Всероссийском Жилищном конгрессе в Сочи",
     desc: "",

src/types/Video.ts

@@ -1,7 +1,7 @@
 type Video = {
+  id: number;
   value: string;
   poster: string;
-  id: string;
   title: string;
   desc: string;
 };