movie web app
1.0.0
YouTube와 같은 플레이어 경험이있는 올인원 영화 웹 앱
이 프로젝트는 영화, TV 쇼, 애니메이션을 한 곳에서 볼 수있는 웹 응용 프로그램입니다. YouTube와 같은 플레이어 경험을 제공하는 간단하고 사용하기 쉬운 플랫폼으로 설계되었습니다. 앱은 직관적이고 미적 사용자 인터페이스 내부에 타사 제공 업체의 비디오 파일을 표시하여 작동합니다. 콘텐츠는 제 3 자로부터 가져오고 스크래핑은 고객에게 완전히 이루어집니다. 이는 Hoster가 서버에 파일이나 미디어가 없음을 의미합니다. 모든 파일은 타사에서 직접 스트리밍됩니다.
TV.kurr.dev에서 라이브 버전의 응용 프로그램을 찾을 수 있습니다.
YouTube와 같은 플레이어 경험 -데스크톱의 키보드 단축키, 모바일, 사진, 사진, 전체 화면 모드, 극장 모드, 타임 라인 찾기, 볼륨 컨트롤, 썸네일 미리보기, 자막, 현지화 된 오디오 트랙 등의 제스처 기반 컨트롤.
진행 - 앱은 시리즈와 영화에서 진행 상황을 추적합니다. 당신은 항상 당신이 멈춘 곳에서 계속 볼 수 있습니다.
Continuous Play- 앱은 시리즈의 Cinematic Universe에서 다음 에피소드 / 다음 영화를 자동으로 재생합니다.
탐색 - 장르, 연도, 등급, 컬렉션, 영화 우주 등으로 새로운 타이틀을 발견하십시오.
공유 - 비디오의 정확한 시간을 친구에게 보내십시오.
프로필 - 좋아하는, 시계, 시청, 등급 목록에 제목을 저장하십시오.
프로젝트는 TypeScript, React, RTK, Firebase (Auth, Firestore, Realtime Database), Shadcn/UI, React-Player, Dexie, Cors Proxy 등으로 작성되었습니다.
이러한 결정의 주요 목표는 비용없이 영화 웹 앱을 만드는 것입니다.
내 목적을 위해 Firebase는 내 필요에 충분한 무료 계층을 제공합니다. 그러나 "왜 Firestore 및 Realtime Database?" 공정한 질문.
실시간 데이터베이스 가격 책정 모델은 저장된 데이터 양과 다운로드 된 데이터 양을 기반으로합니다. 자주 업데이트되고 너무 크지 않은 엔터티에게는 좋은 선택입니다. 이런 이유로 나는이를 사용하여 Last Watched Title, 사용자가 중단 한 등과 같은 사용자의 재생 설정을 저장합니다.
Firestore 가격 책정 모델은 읽기, 쓰기 및 삭제 수를 기반으로합니다. 자주 업데이트되지 않은 엔티티에게는 좋은 선택입니다. 이런 이유로 나는이를 사용하여 저장, 시청, 등급, 좋아하는 타이틀 등과 같은 주요 데이터를 저장합니다.
또한 Dexie를 사용하여 브라우저의 IndexedDB에 데이터를 저장합니다. 이를 통해 My 프록시 서버의 부하를 줄이고 응용 프로그램로드 시간을 일반적으로 속도를 높이기 위해 클라이언트 측의 응답을 캐시 할 수 있습니다. 24 시간마다 캐시를 무효화합니다. 이것은 데이터가 구식 (새 에피소드가 릴리스 될 때 등)이 구식 상황을 피하기 위해 수행됩니다.
내 자신의 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. 이 프로젝트는 안전상의 이유로 공개하지 않을 하나의 특정 웹 사이트와 함께 작동하도록 설계되었습니다. 유사한 데이터를 제공하는 다른 사이트를 사용할 수 있습니다 (그렇지 않으면 모든 타이핑을 변경하고 직접 조정해야합니다). api/ajax.ts , api/parser.ts )에서 사이트에서 데이터를 긁는 코드도 변경해야합니다.
VITE_PROXY_URL 프록시 서버의 URL. 이 서버는 브라우저의 CORS 제한을 우회하는 데 사용됩니다. 이를 위해 내 프로젝트 -Cors Proxy를 사용할 수 있습니다.
나는 내 분야에서 전문가로서의 기술을 훈련하고 시연하기 위해이 응용 프로그램을 범주 적으로 만들었습니다. 저작권이있는 비디오 컨텐츠의 배포 또는 판매 목적을 추구하지 않습니다. 나는 어떤 파일도 호스팅하지 않고 단지 타사 서비스와 연결됩니다. 파일 호스트 및 제공 업체와 함께 법적 문제를 해결해야합니다. 비디오 제공 업체가 표시 한 미디어 파일에 대해서는 책임이 없습니다.
내 응용 프로그램에 대한 액세스는 매우 제한되어 있으며 읽기 전용 모드 에서만 사용할 수 있습니다. 아무도 내 허락없이 저작권이있는 비디오 컨텐츠에 액세스 할 수 없습니다. 사이트에 대한 액세스 권한이 부여 되더라도 순전히 실증적 인 목적을위한 것이며 그 직후에 액세스가 취소됩니다. 내 서버에 저작권이있는 데이터를 저장하지 않으며 콘텐츠에 대한 다운로드/스트리밍 링크를 공개적으로 제공하지 않습니다.
웹 스크래핑을 사용하여 공개 소스에서 가져온 모든 자료 및 데이터. 귀하가 저작권 보유자이고 앱에서 컨텐츠를 제거하려면 사이트에서 데이터를 제공해야합니다 (여기에서 찾을 수있는 공급자 링크). 나는 다른 사람들의 지적 재산을 존중합니다. 귀하의 작업이 저작권 침해를 구성하는 방식으로 복사되었다고 생각되면 내 웹 사이트의 링크를 사용하여 편리한 방식으로 저에게 연락하십시오.
MIT 라이센스
저작권 (c) 2024 Kurbanali ruslan [email protected]
이에 따라이 소프트웨어 및 관련 문서 파일 ( "소프트웨어")의 사본을 얻는 사람에게 허가는 제한없이 소프트웨어를 처리 할 수있는 사람에게 무료로 제공됩니다. , 소프트웨어의 사본을 게시, 배포, 서브 리센스 및/또는 판매하고, 소프트웨어가 제공하도록하는 사람을 다음과 같은 조건에 따라 할 수 있도록합니다.
위의 저작권 통지 및이 권한 통지는 소프트웨어의 모든 사본 또는 실질적인 부분에 포함되어야합니다.
이 소프트웨어는 상업성, 특정 목적에 대한 적합성 및 비 침해에 대한 보증을 포함하여 명시 적 또는 묵시적 보증없이 "그대로"제공됩니다. 어떠한 경우에도 저자 또는 저작권 보유자는 계약, 불법 행위 또는 기타, 소프트웨어 또는 사용 또는 기타 거래와 관련하여 계약, 불법 행위 또는 기타의 행동에 관계없이 청구, 손해 또는 기타 책임에 대해 책임을지지 않아야합니다. 소프트웨어.
