#1428 Timeline video export

package.json

@@ -11,6 +11,9 @@
         "@chakra-ui/react": "^2.10.9",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
+        "@ffmpeg/core": "^0.12.10",
+        "@ffmpeg/ffmpeg": "^0.12.15",
+        "@ffmpeg/util": "^0.12.2",
         "@railmapgen/rmg-components": "^10.1.19",
         "@railmapgen/rmg-palette-resources": "^3.0.0",
         "@railmapgen/rmg-runtime": "^12.0.3",
@@ -33,7 +36,8 @@
         "react-router-dom": "^7.12.0",
         "react-use-event-hook": "^0.9.6",
         "rollup": "^4.62.5",
-        "vite-plugin-svgr": "^4.5.0"
+        "vite-plugin-svgr": "^4.5.0",
+        "webm-writer": "^1.0.0"
     },
     "devDependencies": {
         "@babel/preset-env": "^7.28.3",

src/components/page-header/download-actions.test.tsx

@@ -1,6 +1,7 @@
 import { RmgThemeProvider } from '@railmapgen/rmg-components';
 import { MultiDirectedGraph } from 'graphology';
 import { fireEvent, screen, waitFor, within } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { createStore } from '../../redux';
 import { render } from '../../test-utils';
@@ -64,7 +65,9 @@ describe('DownloadActions', () => {
 
         render(
             <RmgThemeProvider>
-                <DownloadActions />
+                <MemoryRouter>
+                    <DownloadActions />
+                </MemoryRouter>
             </RmgThemeProvider>,
             { store: testStore }
         );
@@ -83,7 +86,9 @@ describe('DownloadActions', () => {
 
         render(
             <RmgThemeProvider>
-                <DownloadActions />
+                <MemoryRouter>
+                    <DownloadActions />
+                </MemoryRouter>
             </RmgThemeProvider>,
             { store: createStore() }
         );

src/components/page-header/download-actions.tsx

@@ -28,7 +28,7 @@ import { RmgFields, RmgFieldsField } from '@railmapgen/rmg-components';
 import rmgRuntime from '@railmapgen/rmg-runtime';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { MdDownload, MdImage, MdOpenInNew, MdSave, MdSaveAs } from 'react-icons/md';
+import { MdDownload, MdImage, MdOpenInNew, MdSave, MdSaveAs, MdVideoLibrary } from 'react-icons/md';
 import { Events } from '../../constants/constants';
 import { GlobalAlertId } from '../../constants/global-alerts';
 import { isTauri } from '../../constants/server';
@@ -42,6 +42,7 @@ import { imageStoreIndexedDB } from '../../util/image-store-indexed-db';
 import { stringifyParam } from '../../util/save';
 import { ToRmgModal } from './rmp-to-rmg';
 import TermsAndConditionsModal from './terms-and-conditions';
+import VideoExportModal from './video-export-modal';
 
 const PNG_EXPORT_SCALES = [25, 50, 100, 150, 200, 250, 300, 400, 500, 750, 1000, 1500, 2000];
 
@@ -117,7 +118,7 @@ export default function DownloadActions() {
             value: scale,
             options: scaleOptions,
             onChange: value => {
-                setScale(value as number);
+                setScale(Number(value));
                 setIsCanvasSizeSupported(undefined);
             },
         },
@@ -129,6 +130,7 @@ export default function DownloadActions() {
         },
     ];
     const [isDownloadModalOpen, setIsDownloadModalOpen] = React.useState(false);
+    const [isVideoExportModalOpen, setIsVideoExportModalOpen] = React.useState(false);
     const [isTermsAndConditionsModalOpen, setIsTermsAndConditionsModalOpen] = React.useState(false);
     const [isSystemFontsOnly, setIsSystemFontsOnly] = React.useState(false);
     const [isAttachSelected, setIsAttachSelected] = React.useState(false);
@@ -337,6 +339,12 @@ export default function DownloadActions() {
                 >
                     {t('header.download.image')}
                 </MenuItem>
+                <MenuItem icon={<MdVideoLibrary />} onClick={() => setIsVideoExportModalOpen(true)}>
+                    {t('header.download.video')}
+                    <Badge ml="1" colorScheme="blue">
+                        New
+                    </Badge>
+                </MenuItem>
             </MenuList>
 
             <Modal size="2xl" isOpen={isDownloadModalOpen} onClose={() => setIsDownloadModalOpen(false)}>
@@ -474,6 +482,8 @@ export default function DownloadActions() {
                 </ModalContent>
             </Modal>
 
+            <VideoExportModal isOpen={isVideoExportModalOpen} onClose={() => setIsVideoExportModalOpen(false)} />
+
             <ToRmgModal isOpen={isToRmgOpen} onClose={() => setIsToRmgOpen(false)} />
         </Menu>
     );