fix(electron): missing video (#4451)

apps/core/.webpack/config.ts

@@ -291,7 +291,7 @@ export const createConfiguration: (
               exclude: [/node_modules/],
             },
             {
-              test: /\.(png|jpg|gif|svg|webp)$/,
+              test: /\.(png|jpg|gif|svg|webp|mp4)$/,
               type: 'asset/resource',
             },
             {

apps/storybook/src/stories/notification-center.stories.tsx

@@ -17,8 +17,10 @@ export default {
 let id = 0;
 const image = (
   <video autoPlay muted loop>
-    <source src="/editingVideo.mp4" type="video/mp4" />
-    <source src="/editingVideo.webm" type="video/webm" />
+    <source
+      src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+      type="video/mp4"
+    />
   </video>
 );
 export const Basic = () => {

packages/component/src/components/tour-modal/tour-modal.tsx

@@ -1,9 +1,11 @@
+/// <reference types="../../type.d.ts" />
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ArrowLeftSmallIcon, ArrowRightSmallIcon } from '@blocksuite/icons';
 import { Modal, type ModalProps } from '@toeverything/components/modal';
 import clsx from 'clsx';
 import { useState } from 'react';
 
+import editingVideo from './editingVideo.mp4';
 import {
   arrowStyle,
   buttonDisableStyle,
@@ -24,6 +26,7 @@ import {
   videoSlideStyle,
   videoStyle,
 } from './index.css';
+import switchVideo from './switchVideo.mp4';
 
 export const TourModal = (props: ModalProps) => {
   const t = useAFFiNEI18N();
@@ -92,8 +95,7 @@ export const TourModal = (props: ModalProps) => {
                   })}
                   data-testid="onboarding-modal-editing-video"
                 >
-                  <source src="/editingVideo.mp4" type="video/mp4" />
-                  <source src="/editingVideo.webm" type="video/webm" />
+                  <source src={editingVideo} type="video/mp4" />
                 </video>
               )}
               <video
@@ -106,8 +108,7 @@ export const TourModal = (props: ModalProps) => {
                 })}
                 data-testid="onboarding-modal-switch-video"
               >
-                <source src="/switchVideo.mp4" type="video/mp4" />
-                <source src="/switchVideo.webm" type="video/webm" />
+                <source src={switchVideo} type="video/mp4" />
               </video>
             </div>
           </div>

packages/component/src/type.d.ts

@@ -0,0 +1,4 @@
+declare module '*.mp4' {
+  const src: string;
+  export default src;
+}

packages/component/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "exclude": ["lib"],
-  "include": ["./src/**/*", "./src/**/*.json"],
+  "include": ["./src/**/*", "./src/**/*.json", "./src/type.d.ts"],
   "compilerOptions": {
     "composite": true,
     "noEmit": false,