学习项目movie-web：构建本地电影、电视视频中心 - 教程
官网：https://github.com/movie-web/movie-web
但是这个官网需要github账号才能访问（存疑，因为没测试）
国内镜像：https://gitcode.com/GitHub_Trending/mo/movie-web
这个国内镜像可以访问，不过代码有些老了，是一年前的。
国内镜像：movieWeb: movie-web react+vite
这个镜像代码最新了。
安装
下载源代码
git clone https://gitcode.com/GitHub_Trending/mo/movie-web进入源代码目录，cd movie-web ,安装
pnpm install
pnpm run dev启动绑定到0.0.0.0
pnpm dev --host 0.0.0.0如果pnpm没有安装，那么可以先安装pnpm
npm install pnpm -g如果npm没有安装，那么可以参考这里：https://skywalk.blog.csdn.net/article/details/149314275
使用
启动后显示
pnpm dev --host 0.0.0.0
> app@0.0.0 dev /home/skywalk/work/movie-web
> vite --mode dev --host 0.0.0.0
VITE v4.5.14 ready in 397 ms
➜ Local: http://localhost:5173/
➜ Network: http://192.168.0.16:5173/
➜ Network: http://192.168.0.100:5173/
➜ press h to show help浏览器打开5173端口网页
http://192.168.0.16:5173/显示如图：
但是没法登录和注册，显示Network error
先搁置，就先弄到这里吧。
调试
pnpm run dev启动后报错
ERROR(ESLint) Insert `(` (prettier/prettier) FILE /home/skywalk/github/movie-web/src/components/player/atoms/settings/SettingsMenu.tsx:34:7 32 | 33 | const selectedLanguagePretty = selectedCaptionLanguage > 34 | ? getPrettyLanguageNameFromLocale(selectedCaptionLanguage) ?? | ^ 35 | t("player.menus.subtitles.unknownLanguage") 36 | : undefined; 37 | ERROR(ESLint) Insert `)` (prettier/prettier) FILE /home/skywalk/github/movie-web/src/components/player/atoms/settings/SettingsMenu.tsx:35:49 33 | const selectedLanguagePretty = selectedCaptionLanguage 34 | ? getPrettyLanguageNameFromLocale(selectedCaptionLanguage) ?? > 35 | t("player.menus.subtitles.unknownLanguage") | ^ 36 | : undefined; 37 | 38 | const source = usePlayerStore((s) => s.source); ERROR(ESLint) Replace `"volumechange",·videoElement?.muted·?·0·:·videoElement?.volume·??·0` with `⏎········"volumechange",⏎········videoElement?.muted·?·0·:·(videoElement?.volume·??·0),⏎······` (prettier/prettier) FILE /home/skywalk/github/movie-web/src/components/player/display/base.ts:187:12 185 | videoElement.addEventListener("waiting", () => emit("loading", true)); 186 | videoElement.addEventListener("volumechange", () => > 187 | emit("volumechange", videoElement?.muted ? 0 : videoElement?.volume ?? 0), | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 188 | ); 189 | videoElement.addEventListener("timeupdate", () => 190 | emit("time", videoElement?.currentTime ?? 0), ERROR(ESLint) Delete `⏎···········` (prettier/prettier) FILE /home/skywalk/github/movie-web/src/components/player/internals/StatusCircle.tsx:36:95 34 | className={classNames( 35 | { > 36 | "p-0.5 border-current border-[3px] rounded-full h-6 w-6 relative transition-colors": | ^ > 37 | true, | ^^^^^^^^^^^^ 38 | "text-video-scraping-loading": props.type === "loading", 39 | "text-video-scraping-noresult text-opacity-50": 40 | props.type === "waiting", ERROR(ESLint) Delete `⏎···········` (prettier/prettier) FILE /home/skywalk/github/movie-web/src/pages/onboarding/utils.tsx:17:92 15 | className={classNames( 16 | { > 17 | "bg-onboarding-card duration-300 border border-onboarding-border rounded-lg p-7": | ^ > 18 | true, | ^^^^^^^^^^^^ 19 | "hover:bg-onboarding-cardHover transition-colors cursor-pointer": 20 | !!props.onClick, 21 | }, ERROR(ESLint) Delete `⏎···········` (prettier/prettier) FILE /home/skywalk/github/movie-web/src/pages/parts/player/ScrapingPart.tsx:106:82 104 |106 | "absolute transition-[transform,opacity] opacity-0 dir-neutral:left-0": | ^ > 107 | true, | ^^^^^^^^^^^^ 108 | "!opacity-100": renderedOnce, 109 | })} 110 | ref={listRef} ERROR(ESLint) Delete `⏎···············` (prettier/prettier) FILE /home/skywalk/github/movie-web/src/pages/parts/settings/SetupPart.tsx:162:87 160 |162 | "rounded-full h-12 w-12 flex bg-opacity-15 justify-center items-center": | ^ > 163 | true, | ^^^^^^^^^^^^^^^^ 164 | "text-type-success bg-type-success": globalState === "success", 165 | "text-type-danger bg-type-danger": 166 | globalState === "error" || globalState === "unset", [ESLint] Found 12 errors and 0 warning
这是用的gitcode的代码，可能是版本太老的缘故，换gitee的代码试试。
报错Ignored build scripts: esbuild.
╭ Warning ───────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Ignored build scripts: esbuild. │
│ Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts. │
│ │
╰────────────────────────────────────────────────────────────────────────────────────────────╯
先不管它。
报错Error: The following dependencies are imported but could not be resolved:
Error: The following dependencies are imported but could not be resolved:
react-photo-view (imported by /home/skywalk/work/movie-web/src/pages/Photo.jsx)
react-photo-view/dist/react-photo-view.css (imported by /home/skywalk/work/movie-web/src/pages/Icon.jsx)
Are they installed?
at file:///home/skywalk/work/movie-web/node_modules/.pnpm/vite@4.5.14/node_modules/vite/dist/node/chunks/dep-827b23df.js:45783:23
at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
at async file:///home/skywalk/work/movie-web/node_modules/.pnpm/vite@4.5.14/node_modules/vite/dist/node/chunks/dep-827b23df.js:45191:38
安装所需的包react-photo-view
pnpm add react-photo-view问题解决
网站启动后，同局域网无法登录
原来默认是本地登录，用--host来加上0.0.0.0的绑定
pnpm dev --host 0.0.0.0网站启动后，无法注册、登录，显示Network error
这怎么办呢？是不是需要配置啥的，大约需要配置.env文件，
VITE_API_BASE_URL=https://api.example.com
VITE_TMDB_API_KEY=your_tmdb_key_hereVITE_TMDB_API_KEY需要去网站申请
注册 TMDB 账号
- 访问 TMDB 官网。
- 点击右上角 "Join TMDB" 注册新账号，或使用现有账号登录。
申请 API 密钥
- 登录后，点击右上角头像，选择 "Settings"（设置）。
- 在左侧导航栏中，选择 "API"。
- 点击 "Request an API Key" 下的 "click here" 链接。
- 选择 API 类型：Developer（个人项目通常选此项）。
填写申请信息
- 应用名称：填写项目名称（如
movie-web）。 - 应用描述：简要说明用途（例如：“用于电影数据查询”）。
- 网站 URL：可填写个人网站或占位符（如
http://localhost）。 - 提交申请后，系统会向注册邮箱发送验证链接，点击邮件中的链接完成验证。
没再弄，先搁置。
浙公网安备 33010602011771号