movie web app

tv.kurr.dev

YouTubeのようなプレーヤーエクスペリエンスを備えたオールインワンの映画Webアプリ

概要

このプロジェクトは、映画、テレビ番組、アニメを1か所で視聴できるWebアプリケーションです。 YouTubeのようなプレイヤーエクスペリエンスを提供するシンプルで使いやすいプラットフォームになるように設計されています。 APPは、直感的で審美的なユーザーインターフェイス内にサードパーティプロバイダーからビデオファイルを表示することで機能します。コンテンツは第三者から取得され、クライアントではスクレイピングが完全に行われます。これは、Hosterにサーバー上にファイルやメディアがないことを意味します。すべてのファイルは、第三者から直接ストリーミングされます。

TV.kurr.devでアプリケーションのライブバージョンを見つけることができます。

特徴

• YouTubeのようなプレーヤーエクスペリエンス- デスクトップ上のキーボードショートカット、モバイル、ピクチャーインピクチャ、フルスクリーンモード、シアターモード、タイムラインシーク、ボリュームコントロール、サムネイルプレビュー、字幕、ローカライズされたオーディオトラックなど。

• 進捗状況- このアプリは、視聴しているシリーズや映画の進捗状況を追跡します。あなたはいつでもあなたが中断したところから見続けることができます。

• 連続プレイ- このアプリは、シリーズの映画宇宙で次のエピソード /次の映画を自動的に再生します。

• 探索- ジャンル、年、評価、コレクション、映画宇宙などの新しいタイトルを発見してください。

• 共有- ビデオの正確な時間を友達に送信します。

• プロフィール- お気に入り、監視、視聴、評価のリストにタイトルを保存します。

技術スタック

プロジェクトは、TypeScript、React、RTK、FireBase（Auth、Firestore、RealTime Database）、Shadcn/UI、React-Player、Dexie、Cors Proxyなどで作成されます。

これらの決定の背後にある主な目標は、費用なしで映画Webアプリを作成することです。

ファイアーベース

私の目的のために、Firebaseは私のニーズに十分な無料の層を提供します。しかし、 「なぜファイヤーストアとリアルタイムのデータベースがあるのか​​」と尋ねるかもしれません。公正な質問。

リアルタイムデータベース価格設定モデルは、保存されたデータの量とダウンロードされたデータの量に基づいています。頻繁に更新され、大きすぎないエンティティにとっては良い選択です。そのため、私はそれを使用して、最終的な視聴タイトル、ユーザーが中断したなどのユーザーの再生設定を保存します。

Firestoreの価格設定モデルは、読み取り、書き込み、削除の数に基づいています。頻繁に更新されないエンティティにとっては良い選択です。そのため、保存、監視、評価、お気に入りのタイトルなどのメインデータを保存するために使用します。

デキシー

また、Dexieを使用して、ブラウザのIndexEdDBにデータを保存します。これにより、プロキシサーバーの負荷を削減し、一般的にアプリケーションの負荷時間を高速化するために、クライアント側の応答をキャッシュできます。 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の詳細については、公式の文書をご覧ください。すべての変数は、プロジェクト設定のFireBaseコンソールにあります。

• VITE_PROVIDER_URLデータを提供するサイトのURL。このプロジェクトは、安全上の理由で開示しない特定のWebサイトで動作するように設計されています。同様のデータを提供する他のサイトを使用できます（それ以外の場合は、すべてのタイピングを変更して自分で調整する必要があります）。また、次のファイルでサイトからデータを削除するコードを変更する必要があることに注意してください： api/ajax.ts 、 api/parser.ts 。

• VITE_PROXY_URLプロキシサーバーのURL。このサーバーは、ブラウザのCORS制限をバイパスするために使用されます。その目的のために、あなたは私のプロジェクト-CORSプロキシを使用することができます。

著作権侵害

私は、私の分野で専門家としての自分のスキルをトレーニングし、実証する目的で、このアプリケーションをカテゴリー的に作成しました。著作権で保護されたビデオコンテンツの配布または販売の目的を追求していません。私はファイルをホストしていません。それは単にサードパーティサービスにリンクしています。ファイルホストとプロバイダーでは、法的問題を取り上げる必要があります。ビデオプロバイダーが示すメディアファイルについては責任を負いません。

アプリケーションへのアクセスは非常に制限されており、読み取り専用モードでのみ利用できます。誰も私の許可なしに著作権で保護されたビデオコンテンツにアクセスできません。サイトへのアクセスが許可された場合でも、それは純粋に実証的な目的のためであり、その後すぐにアクセスが取り消されます。著作権で保護されたデータはサーバーに保存せず、コンテンツへのダウンロード/ストリーミングリンクを公開していません。

Webスクレイピングを使用して、公開ソースから取得したすべての素材とデータ。あなたが著作権所有者であり、アプリからコンテンツを削除したい場合は、データを提供するサイトでそれを行う必要があります（ここで見つけることができるプロバイダーのリンク）。私は他人の知的財産を尊重します。著作権侵害を構成する方法で作品がコピーされていると思われる場合は、私のウェブサイトのリンクを使用して便利な方法で私に連絡してください。

ライセンス

MITライセンス

Copyright（c）2024 Kurbanali ruslan [email protected]

このソフトウェアおよび関連するドキュメントファイル（「ソフトウェア」）のコピーを取得している人に、これにより許可が無料で許可され、制限なしにソフトウェアを扱うことができます。 、ソフトウェアのコピーを公開、配布、サブライセンス、および/または販売し、次の条件を条件として、ソフトウェアが提供される人を許可します。

上記の著作権通知とこの許可通知は、ソフトウェアのすべてのコピーまたはかなりの部分に含まれるものとします。

このソフトウェアは、商品性、特定の目的への適合性、および非侵害の保証を含むがこれらに限定されない、明示的または黙示的なものを保証することなく、「現状のまま」提供されます。いかなる場合でも、著者または著作権所有者は、契約、不法行為、またはその他の訴訟、ソフトウェアまたは使用またはその他の取引に関連する、またはその他の契約、またはその他の請求、またはその他の責任について責任を負いません。ソフトウェア。