movie web app

tv.kurr.dev

带有YouTube的播放器体验的多合一电影网络应用

概述

该项目是一个Web应用程序，可让您在一个地方观看电影，电视节目和动漫。它旨在成为一个简单易用的平台，可提供类似YouTube的玩家体验。 App通过在直观和美学用户界面中显示来自第三方提供商的视频文件来起作用。内容是从第三方获取的，并且在客户端上完全完成了刮擦。这意味着寄养者在其服务器上没有文件或媒体。所有文件均直接从第三方流式传输。

您可以在tv.kurr.dev上找到该应用程序的实时版本。

特征

• 类似YouTube的播放器体验- 台式机上的键盘快捷键，基于手势的移动性控件，图片中的图片，全屏模式，剧院模式，时间表寻求时间表，音量控制，缩略图预览，字幕，字幕，本地化的音轨等。

• 进度- 该应用程序跟踪您在观看的系列和电影中的进度。您可以随时继续观察您离开的地方。

• 连续播放- 该应用程序会在该系列的Cinematic Universe中自动播放下一集 /下一部电影。

• 探索- 通过类型，年级，评级，收藏，电影宇宙等发现新标题。

• 分享- 将视频的确切时间发送给您的朋友。

• 个人资料- 将标题保存到您喜欢的，观看，观看，评分的列表中。

技术堆栈

创建了项目：Typescript，React，RTK，Firebase（auth，Firestore，实时数据库），ShadCN/UI，React-Player，Dexie，Cors Proxy等。

这些决策背后的主要目标是创建电影网络应用程序，而无需任何费用。

火基

出于我的目的，Firebase提供了一个免费的层，足以满足我的需求。但是您可能会问“为什么Firestore和实时数据库？”公平的问题。

实时数据库定价模型基于存储的数据量和下载的数据量。对于经常更新且不太大的实体来说，这是一个不错的选择。因此，我使用它来存储用户的播放设置，例如最后观看的标题，用户关闭的位置，等等。

Firestore定价模型基于读取，写入和删除的数量。对于不经常更新的实体来说，这是一个不错的选择。因此，我使用它来存储主要数据，例如用户保存，观看，评分，喜欢的标题等。

德西

我还使用Dexie将数据存储在浏览器的索引中。这使我可以在客户端缓存响应，以减少我的代理服务器上的负载并一般加快应用程序加载时间。我每24小时使缓存无效。这样做是为了避免数据过时（如果发布新剧集等）的情况。

CORS代理

我使用自己的CORS代理服务器绕过浏览器的CORS限制。这是必要的，因为我从不提供API且没有设置CORS标题的网站上刮擦数据。您可以在CORS代理存储库中找到有关服务器的更多信息。

入门

安装

 # Clone git repository
git clone https://github.com/kurrx/tv.kurr.dev.git
cd tv.kurr.dev

# Install dependencies
npm install

# Create development .env from example, and edit it
cp .env.example .env.development.local

# Start development server
npm run start

配置

首先，您需要在项目根部创建一个.env.development.local文件。该文件将包含应用程序工作所需的所有环境变量。您可以将.env.example文件用作模板。

 ...

VITE_PROVIDER_URL=https://example.com
VITE_PROXY_URL=https://example.com

VITE_FIREBASE_API_KEY=YOUR_API_KEY
VITE_FIREBASE_AUTH_DOMAIN=AUTH_DOMAIN_HOST
VITE_FIREBASE_PROJECT_ID=YOUR_PROJECT_ID
VITE_FIREBASE_STORAGE_BUCKET=STORAGE_BUCKET_HOST
VITE_FIREBASE_MESSAGING_SENDER_ID=SENDER_ID
VITE_FIREBASE_APP_ID=APP_ID
VITE_FIREBASE_DB_URL=DB_URL

...

• VITE_FIREBASE_* - 要配置这些设置，您需要熟悉Firebase及其服务。您可以在官方文档中找到有关火箱的更多信息。所有变量均可在您的项目设置中的Firebase控制台中找到。

• VITE_PROVIDER_URL提供数据的网站的URL。该项目旨在与一个特定网站合作，出于安全原因，我不会透露该网站。您可以使用其他提供类似数据的网站（否则您需要更改所有打字并自己调整）。请记住，您还需要在以下文件中更改从网站刮擦数据的代码： api/ajax.ts ， api/parser.ts 。

• VITE_PROXY_URL代理服务器的URL。该服务器用于绕过浏览器的CORS限制。为此，您可以使用我的项目-CORS代理。

版权侵权

我明确地创建了此应用程序，目的是培训和证明自己作为专业人员的技能。我不追求版权视频内容的分发或销售的目的。我没有托管任何文件，它仅链接到第三方服务。文件主机和提供商应解决法律问题。我对视频提供商显示的任何媒体文件概不负责。

访问我的应用程序受到高度限制，仅在仅阅读模式下可用。未经我的允许，没有人可以访问受版权保护的视频内容。即使授予对网站的访问，也纯粹是出于示范目的，此后不久将撤销访问。我没有在服务器上存储任何受版权保护的数据，也不会公开提供对内容的任何下载/流链接。

我使用Web刮擦从公共资源中获取的所有材料和数据。如果您是版权持有人，并且想从应用程序中删除内容，则必须在网站上提供数据（提供商的链接您可以在此处找到）。我尊重他人的知识产权。如果您认为您的作品已被构成侵犯版权的方式复制，请与我联系我网站上的链接，以方便您的方式与我联系。

执照

麻省理工学院许可证

版权（C）2024 Kurbanali Ruslan [email protected]

特此免费授予任何获得此软件副本和相关文档文件副本（“软件”）的人，以无限制处理该软件，包括无限制，使用，复制，修改，合并的权利，发布，分发，分布和/或出售该软件的副本，并允许提供该软件的人，但要遵守以下条件：

上述版权通知和此许可通知应包含在软件的所有副本或大量部分中。

该软件是“原样”提供的，没有任何形式的明示或暗示保证，包括但不限于适销性，特定目的的适用性和非侵权的保证。在任何情况下，作者或版权持有人均不应对任何索赔，损害赔偿或其他责任责任，无论是在合同，侵权或其他方面的诉讼中，与软件，使用或与该软件或使用或其他交易有关的诉讼或其他责任软件。