movie web app

tv.kurr.dev

Aplikasi web film all-in-one dengan pengalaman pemain seperti YouTube

Ringkasan

Proyek ini adalah aplikasi web yang memungkinkan Anda menonton film, acara TV, anime di satu tempat. Ini dirancang untuk menjadi platform sederhana dan mudah digunakan yang memberikan pengalaman pemain seperti YouTube. Aplikasi berfungsi dengan menampilkan file video dari penyedia pihak ketiga di dalam antarmuka pengguna yang intuitif dan estetika. Konten diambil dari pihak ketiga dan pengikisan sepenuhnya dilakukan pada klien. Ini berarti bahwa Hoster tidak memiliki file atau media di server mereka. Semua file dialirkan langsung dari pihak ketiga.

Anda dapat menemukan versi langsung aplikasi di tv.kurr.dev.

Fitur

• Pengalaman Pemain Seperti YouTube- Pintasan keyboard di desktop, kontrol berbasis gesture pada ponsel, gambar-in-picture, mode layar penuh, mode teater, pencarian garis waktu, kontrol volume, pratinjau thumbnail, subtitle, trek audio yang terlokalisasi, dll.

• Kemajuan - Aplikasi ini melacak kemajuan Anda dalam seri dan film yang Anda tonton. Anda selalu dapat terus menonton dari tempat Anda tinggalkan.

• Continuous Play - Aplikasi secara otomatis memainkan episode berikutnya / film berikutnya di Cinematic Universe dalam seri.

• Jelajahi - Temukan judul baru berdasarkan genre, tahun, peringkat, koleksi, alam semesta sinematik, dll.

• Bagikan - Kirim waktu yang tepat dari video ke teman -teman Anda.

• Profil - Simpan judul untuk daftar favorit Anda, tonton, ditonton, dinilai.

Tumpukan teknologi

Proyek dibuat dengan: naskah, reaksi, rtk, firebase (auth, firestore, realtime database), shadcn/ui, react-player, dexie, proxy cors dan banyak lagi.

Tujuan utama di balik keputusan ini adalah untuk membuat aplikasi web film tanpa biaya.

Firebase

Untuk tujuan saya, Firebase menyediakan tingkat gratis yang cukup untuk kebutuhan saya. Tetapi Anda mungkin bertanya "Mengapa Firestore dan Realtime Database?" Pertanyaan yang adil.

Model penetapan harga database realtime didasarkan pada jumlah data yang disimpan dan jumlah data yang diunduh. Ini adalah pilihan yang baik untuk entitas yang sering diperbarui dan tidak terlalu besar. Untuk alasan itu saya menggunakannya untuk menyimpan pengaturan pemutaran pengguna seperti judul yang ditonton terakhir, di mana pengguna terlepas, dll.

Model harga Firestore didasarkan pada jumlah bacaan, menulis, dan dihapus. Ini adalah pilihan yang baik untuk entitas yang tidak sering diperbarui. Untuk alasan itu saya menggunakannya untuk menyimpan data utama seperti pengguna yang disimpan, ditonton, dinilai, judul favorit, dll.

Dexie

Saya juga menggunakan Dexie untuk menyimpan data di indexedDB browser. Ini memungkinkan saya untuk cache respons di sisi klien untuk mengurangi beban pada server proxy saya dan mempercepat waktu pemuatan aplikasi secara umum. Saya membatalkan cache setiap 24 jam. Ini dilakukan untuk menghindari situasi ketika data sudah ketinggalan zaman (jika episode baru dirilis, dll).

Proxy CORS

Saya menggunakan server proxy CORS saya sendiri untuk memotong pembatasan CORS dari browser. Ini diperlukan karena saya mengikis data dari situs yang tidak menyediakan API dan tidak memiliki header CORS yang diatur. Anda dapat menemukan informasi lebih lanjut tentang server di repositori proxy CORS.

Memulai

Instalasi

 # 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

Konfigurasi

Pertama, Anda perlu membuat file .env.development.local di akar proyek. File ini akan berisi semua variabel lingkungan yang diperlukan agar aplikasi berfungsi. Anda dapat menggunakan file .env.example sebagai templat.

 ...

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_* - Untuk mengonfigurasi pengaturan ini, Anda harus terbiasa dengan Firebase dan layanannya. Anda dapat menemukan informasi lebih lanjut tentang Firebase dalam dokumentasi resmi. Semua variabel dapat ditemukan di konsol Firebase di pengaturan proyek Anda.

• VITE_PROVIDER_URL - URL situs yang menyediakan data. Proyek ini dirancang untuk bekerja dengan satu situs web tertentu yang tidak akan saya ungkapkan untuk alasan keamanan. Anda dapat menggunakan situs lain yang menyediakan data serupa (jika tidak, Anda perlu mengubah semua pengetikan dan menyesuaikannya sendiri). Ingatlah bahwa Anda juga perlu mengubah kode yang mengikis data dari situs dalam file berikut: api/ajax.ts , api/parser.ts .

• VITE_PROXY_URL - URL dari server proxy. Server ini digunakan untuk memotong pembatasan CORS browser. Untuk tujuan itu Anda dapat menggunakan proyek saya - CORS proxy.

Pelanggaran hak cipta

Saya membuat aplikasi ini dengan tegas untuk tujuan pelatihan dan menunjukkan keterampilan saya sebagai seorang profesional di bidang saya. Saya tidak mengejar tujuan distribusi atau penjualan konten video yang dilindungi hak cipta. Saya tidak meng -host file apa pun, itu hanya menautkan ke layanan pihak ke -3. Masalah hukum harus diambil dengan host file dan penyedia. Saya tidak bertanggung jawab atas file media yang ditunjukkan oleh penyedia video.

Akses ke aplikasi saya sangat terbatas dan hanya tersedia pada mode baca-saja . Tidak ada yang dapat mengakses konten video yang dilindungi hak cipta tanpa izin saya. Bahkan ketika akses ke situs diberikan, itu untuk tujuan demonstratif murni, dan akses akan dicabut segera setelah itu. Saya tidak menyimpan data yang dilindungi hak cipta di server saya dan tidak secara terbuka menyediakan tautan unduhan/streaming ke konten.

Semua materi dan data yang saya ambil dari sumber publik menggunakan pengikisan web. Jika Anda adalah pemegang hak cipta dan ingin menghapus konten dari aplikasi, Anda harus melakukannya di situs yang menyediakan data (tautan untuk penyedia yang dapat Anda temukan di sini). Saya menghormati kekayaan intelektual orang lain. Jika Anda yakin bahwa pekerjaan Anda telah disalin dengan cara yang merupakan pelanggaran hak cipta, silakan hubungi saya dengan cara yang nyaman bagi Anda menggunakan tautan di situs web saya.

Lisensi

Lisensi MIT

Hak Cipta (C) 2024 Kurbanali Ruslan [email protected]

Izin dengan ini diberikan, gratis, kepada siapa pun yang mendapatkan salinan perangkat lunak ini dan file dokumentasi terkait ("Perangkat Lunak"), untuk menangani perangkat lunak tanpa pembatasan, termasuk tanpa batasan hak untuk menggunakan, menyalin, memodifikasi, menggabungkan , menerbitkan, mendistribusikan, sublisense, dan/atau menjual salinan perangkat lunak, dan untuk mengizinkan orang -orang yang dilengkapi dengan perangkat lunak untuk melakukannya, tunduk pada kondisi berikut:

Pemberitahuan hak cipta di atas dan pemberitahuan izin ini harus dimasukkan dalam semua salinan atau bagian substansial dari perangkat lunak.

Perangkat lunak ini disediakan "sebagaimana adanya", tanpa jaminan apa pun, tersurat maupun tersirat, termasuk tetapi tidak terbatas pada jaminan dapat diperjualbelikan, kebugaran untuk tujuan tertentu dan nonpringement. Dalam hal apa pun penulis atau pemegang hak cipta tidak akan bertanggung jawab atas klaim, kerusakan atau tanggung jawab lainnya, baik dalam tindakan kontrak, gugatan atau sebaliknya, timbul dari, di luar atau sehubungan dengan perangkat lunak atau penggunaan atau transaksi lain dalam PERANGKAT LUNAK.