学习项目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.0VITE 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:732 |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:4933 | const selectedLanguagePretty = selectedCaptionLanguage34 | ? 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:12185 | 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:9534 | 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:9215 | 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:82104 | <div105 | className={classNames({> 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:87160 | <div161 | className={classNames({> 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_here
VITE_TMDB_API_KEY需要去网站申请
注册 TMDB 账号
- 访问 TMDB 官网。
- 点击右上角 "Join TMDB" 注册新账号，或使用现有账号登录。
申请 API 密钥
- 登录后，点击右上角头像，选择 "Settings"（设置）。
- 在左侧导航栏中，选择 "API"。
- 点击 "Request an API Key" 下的 "click here" 链接。
- 选择 API 类型：Developer（个人项目通常选此项）。
填写申请信息
- 应用名称：填写项目名称（如
movie-web）。 - 应用描述：简要说明用途（例如：“用于电影数据查询”）。
- 网站 URL：可填写个人网站或占位符（如
http://localhost）。 - 提交申请后，系统会向注册邮箱发送验证链接，点击邮件中的链接完成验证。
没再弄，先搁置。