movie web app
1.0.0
แอปพลิเคชันภาพยนตร์แบบ all-in-one พร้อมประสบการณ์ผู้เล่นที่มีลักษณะคล้าย YouTube
โครงการนี้เป็นเว็บแอปพลิเคชันที่ให้คุณดูภาพยนตร์รายการทีวีอนิเมะในที่เดียว มันถูกออกแบบมาให้เป็นแพลตฟอร์มที่เรียบง่ายและใช้งานง่ายที่ให้ประสบการณ์ผู้เล่นที่เหมือน YouTube แอพทำงานโดยการแสดงไฟล์วิดีโอจากผู้ให้บริการบุคคลที่สามภายในส่วนต่อประสานผู้ใช้ที่ใช้งานง่ายและสวยงาม เนื้อหาถูกดึงมาจากบุคคลที่สามและการขูดจะเสร็จสิ้นอย่างสมบูรณ์บนไคลเอนต์ ซึ่งหมายความว่า Hoster ไม่มีไฟล์หรือสื่อบนเซิร์ฟเวอร์ ไฟล์ทั้งหมดจะถูกสตรีมโดยตรงจากบุคคลที่สาม
คุณสามารถค้นหาแอปพลิเคชันเวอร์ชันสดได้ที่ tv.kurr.dev
ประสบการณ์ผู้เล่นที่มีลักษณะคล้าย YouTube- แป้นพิมพ์ลัดบนเดสก์ท็อป, การควบคุมตามท่าทางบนมือถือ, รูปภาพในภาพ, โหมดเต็มหน้าจอ, โหมดโรงละคร, การค้นหาไทม์ไลน์, การควบคุมระดับเสียง, ภาพตัวอย่างภาพย่อ, คำบรรยาย
ความคืบหน้า - แอพติดตามความคืบหน้าของคุณในซีรีส์และภาพยนตร์ที่คุณดู คุณสามารถดูต่อจากที่ที่คุณทิ้งไว้ได้ตลอดเวลา
การเล่นอย่างต่อเนื่อง - แอพเล่นตอนต่อไป / ภาพยนตร์เรื่องต่อไปใน Cinematic Universe โดยอัตโนมัติในซีรีส์
สำรวจ - ค้นพบชื่อใหม่ตามประเภทปีการจัดอันดับคอลเลกชันจักรวาลภาพยนตร์ ฯลฯ
แบ่งปัน - ส่งเวลาที่แน่นอนของวิดีโอให้เพื่อนของคุณ
โปรไฟล์ - บันทึกชื่อเรื่องที่คุณชื่นชอบดูดูรายการจัดอันดับ
โครงการถูกสร้างขึ้นด้วย: TypeScript, React, RTK, Firebase (Auth, Firestore, ฐานข้อมูลเรียลไทม์), Shadcn/UI, React-Player, Dexie, Cors Proxy และอีกมากมาย
เป้าหมายหลักที่อยู่เบื้องหลังการตัดสินใจเหล่านี้คือการสร้างแอพภาพยนตร์โดยไม่มีค่าใช้จ่ายใด ๆ
สำหรับจุดประสงค์ของฉัน Firebase มีระดับฟรีที่เพียงพอสำหรับความต้องการของฉัน แต่คุณอาจถาม ว่า "ทำไมฐานข้อมูล Firestore และเรียลไทม์" คำถามที่ยุติธรรม
รูปแบบการกำหนดราคา ฐานข้อมูลแบบเรียลไทม์ ขึ้นอยู่กับจำนวนข้อมูลที่เก็บไว้และจำนวนข้อมูลที่ดาวน์โหลด เป็นตัวเลือกที่ดีสำหรับเอนทิตีที่ได้รับการปรับปรุงบ่อยครั้งและไม่ใหญ่เกินไป ด้วยเหตุนี้ฉันจึงใช้มันเพื่อจัดเก็บการตั้งค่าการเล่นของผู้ใช้เช่นชื่อเรื่องล่าสุดที่ผู้ใช้ทิ้งไว้ ฯลฯ
รูปแบบการกำหนดราคา Firestore ขึ้นอยู่กับจำนวนการอ่านเขียนและลบ เป็นตัวเลือกที่ดีสำหรับเอนทิตีที่ไม่ได้รับการปรับปรุงบ่อยครั้ง ด้วยเหตุนี้ฉันจึงใช้มันเพื่อจัดเก็บข้อมูลหลักเช่นผู้ใช้ที่บันทึกดูการจัดอันดับชื่อที่ชื่นชอบ ฯลฯ
ฉันยังใช้ Dexie เพื่อจัดเก็บข้อมูลใน indexedDB ของเบราว์เซอร์ สิ่งนี้ทำให้ฉันสามารถแคชการตอบกลับทางฝั่งไคลเอ็นต์เพื่อลดการโหลดบนพร็อกซีเซิร์ฟเวอร์ของฉันและเร่งเวลาโหลดแอปพลิเคชันโดยทั่วไป ฉันทำให้แคชเป็นโมฆะทุก 24 ชั่วโมง สิ่งนี้ทำเพื่อหลีกเลี่ยงสถานการณ์เมื่อข้อมูลล้าสมัย (ในกรณีที่ตอนใหม่ถูกปล่อยออกมา ฯลฯ )
ฉันใช้พร็อกซีเซิร์ฟเวอร์ 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 ของเว็บไซต์ที่ให้ข้อมูล โครงการนี้ออกแบบมาเพื่อทำงานกับเว็บไซต์เฉพาะหนึ่งเว็บไซต์ที่ฉันจะไม่เปิดเผยด้วยเหตุผลด้านความปลอดภัย คุณสามารถใช้ไซต์อื่น ๆ ที่ให้ข้อมูลที่คล้ายกัน (มิฉะนั้นคุณต้องเปลี่ยนการพิมพ์ทั้งหมดและปรับด้วยตัวคุณเอง) โปรดทราบว่าคุณต้องเปลี่ยนรหัสที่ขูดข้อมูลจากเว็บไซต์ในไฟล์ต่อไปนี้: api/ajax.ts , api/parser.ts
VITE_PROXY_URL - URL ของพร็อกซีเซิร์ฟเวอร์ เซิร์ฟเวอร์นี้ใช้เพื่อข้ามข้อ จำกัด ของเบราว์เซอร์ สำหรับวัตถุประสงค์นั้นคุณสามารถใช้โครงการของฉัน - Cors Proxy
ฉันสร้างแอปพลิเคชันนี้อย่างเด็ดขาดเพื่อจุดประสงค์ในการฝึกอบรมและแสดงให้เห็นถึงทักษะของฉันในฐานะมืออาชีพในสาขาของฉัน ฉันไม่ได้ติดตามวัตถุประสงค์ของการจัดจำหน่ายหรือการขายเนื้อหาวิดีโอที่มีลิขสิทธิ์ ฉันไม่ได้โฮสต์ไฟล์ใด ๆ แต่เพียงลิงก์ไปยังบริการของบุคคลที่สาม ปัญหาทางกฎหมายควรดำเนินการกับโฮสต์ไฟล์และผู้ให้บริการ ฉันไม่รับผิดชอบต่อไฟล์สื่อใด ๆ ที่แสดงโดยผู้ให้บริการวิดีโอ
การเข้าถึงแอปพลิเคชันของฉันถูก จำกัด อย่างมากและมีเฉพาะใน โหมดอ่านอย่างเดียวเท่านั้น ไม่มีใครสามารถเข้าถึงเนื้อหาวิดีโอที่มีลิขสิทธิ์โดยไม่ได้รับอนุญาตจากฉัน แม้ว่าจะได้รับการเข้าถึงเว็บไซต์ แต่ก็มีวัตถุประสงค์เพื่อการสาธิตอย่างหมดจดและการเข้าถึงจะถูกเพิกถอนหลังจากนั้นไม่นาน ฉันไม่เก็บข้อมูลที่มีลิขสิทธิ์ใด ๆ บนเซิร์ฟเวอร์ของฉันและไม่ได้ให้ลิงก์ดาวน์โหลด/สตรีมมิ่งใด ๆ กับเนื้อหา
วัสดุและข้อมูลทั้งหมดที่ฉันนำมาจากแหล่งสาธารณะโดยใช้การขูดเว็บ หากคุณเป็นผู้ถือลิขสิทธิ์และต้องการลบเนื้อหาออกจากแอพคุณต้องทำบนเว็บไซต์ที่ให้ข้อมูล (ลิงก์สำหรับผู้ให้บริการที่คุณสามารถหาได้ที่นี่) ฉันเคารพทรัพย์สินทางปัญญาของผู้อื่น หากคุณเชื่อว่างานของคุณได้รับการคัดลอกในลักษณะที่ถือว่าเป็นการละเมิดลิขสิทธิ์โปรดติดต่อฉันในแบบที่สะดวกสำหรับคุณโดยใช้ลิงก์ในเว็บไซต์ของฉัน
ใบอนุญาต MIT
ลิขสิทธิ์ (c) 2024 kurbanali ruslan [email protected]
ได้รับอนุญาตโดยไม่เสียค่าใช้จ่ายสำหรับบุคคลใด ๆ ที่ได้รับสำเนาซอฟต์แวร์นี้และไฟล์เอกสารที่เกี่ยวข้อง ("ซอฟต์แวร์") เพื่อจัดการในซอฟต์แวร์โดยไม่มีการ จำกัด รวมถึง แต่ไม่ จำกัด เฉพาะสิทธิ์ในการใช้คัดลอกแก้ไขผสาน เผยแพร่แจกจ่าย sublicense และ/หรือขายสำเนาของซอฟต์แวร์และอนุญาตให้บุคคลที่ซอฟต์แวร์ได้รับการตกแต่งให้ทำเช่นนั้นภายใต้เงื่อนไขดังต่อไปนี้:
ประกาศลิขสิทธิ์ข้างต้นและประกาศการอนุญาตนี้จะรวมอยู่ในสำเนาทั้งหมดหรือส่วนสำคัญของซอฟต์แวร์
ซอฟต์แวร์มีให้ "ตามสภาพ" โดยไม่มีการรับประกันใด ๆ ไม่ว่าโดยชัดแจ้งหรือโดยนัยรวมถึง แต่ไม่ จำกัด เฉพาะการรับประกันความสามารถในการค้าการออกกำลังกายสำหรับวัตถุประสงค์เฉพาะและการไม่เข้าร่วม ไม่ว่าในกรณีใดผู้เขียนหรือผู้ถือลิขสิทธิ์จะต้องรับผิดชอบต่อการเรียกร้องความเสียหายหรือความรับผิดอื่น ๆ ไม่ว่าจะเป็นการกระทำของสัญญาการละเมิดหรืออื่น ๆ ซอฟต์แวร์.
