当前位置: 首页 > news >正文

学习项目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 |       
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 |
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)。
  • 提交申请后,系统会向注册邮箱发送验证链接,点击邮件中的链接完成验证。

没再弄,先搁置。

http://www.zskr.cn/news/15143.html

相关文章:

  • AT_abc205_e [ABC205E] White and Black Balls
  • Rust Slint库达成桌面萌宠源码分享(包含拖动、右键菜单效果)
  • Redis 持久化机制 - 教程
  • glazewm_windows平铺窗口管理器使用方法
  • 树莓派搭建NAS之三:使用OpenList挂载网盘
  • 数哈多应用授权系统如何为Go语言编程开发者给予知识产权保护?
  • 完整教程:华为eNSP环境安装和命令使用教程
  • 分布式架构初识:为什么需要分布式 - 教程
  • [IOI 1998 / USACO2.2] 派对灯 Party Lamps 题解 + bitset浅谈
  • 2025 --【J+S 二十连测】-- 第一套 总结
  • 【实验报告】华东理工大学随机信号处理实验报告 - 详解
  • Docker部署配置全流程(超详细——Windows和Linux) - 指南
  • AT_abc309_g [ABC309G] Ban Permutation
  • 在Mac上运行Windows 365的完整指南
  • 完整教程:华为海思正式进入Wi-Fi FEM赛道?
  • 摩刻S10 动感单车 速度传感器故障及更换!
  • 2025硫酸优质厂家权威推荐榜:高品质与强供应口碑之选
  • 2025冰乙酸供应厂家权威推荐榜:品质卓越与市场口碑双重保障
  • 工业氨水优质厂家推荐:实力制造商深度解析与选购指南
  • 2025液碱厂家权威推荐榜:实力供应商深度解析与选择指南
  • 2025硫铵厂家权威推荐榜:实力生产与优质供应口碑之选
  • 2025年硫化钠厂家权威推荐榜:优质供应商与实力制造商精选
  • 2025 年热压机厂家 TOP 企业品牌推荐排行榜,深度剖析河北热压机,廊坊热压机,霸州热压机推荐这十家公司!
  • 【Anthropic好文】AI 代理的高效上下文工程
  • 2025防撞护栏厂家 TOP 企业品牌推荐排行榜,铝合金,Q235 桥梁,Q355B 桥梁,景观桥梁,灯光桥梁,河道桥梁,公路桥梁,喷塑桥梁,道路桥梁防撞护栏公司推荐!
  • 摩尔线程之后,看燧原科技,相关公司梳理
  • Java形式化验证实战:TLA+模型检测保障分布式事务最终一致性 - 教程
  • 2025折弯机厂家TOP企业品牌推荐排行榜,数控折弯机,电液伺服折弯机,电液折弯机,小型折弯机,液压折弯机推荐这十家公司!
  • 关于践行「AI元人文」理念、迈向审慎智慧的倡议书
  • 详细介绍:在 Ubuntu 24.04 LTS 上安装 SSH 并启用服务端实现远程连接