movie web app

tv.kurr.dev

Aplicativo da web de filmes all-in-one com experiência de jogador semelhante ao YouTube

Visão geral

Este projeto é um aplicativo da Web que permite assistir a filmes, programas de TV, anime em um só lugar. Ele foi projetado para ser uma plataforma simples e fácil de usar que oferece uma experiência de jogador semelhante ao YouTube. O aplicativo funciona exibindo arquivos de vídeo de provedores de terceiros dentro de uma interface de usuário intuitiva e estética. O conteúdo é buscado em terceiros e a raspagem é totalmente feita no cliente. Isso significa que o hoster não tem arquivos ou mídia em seu servidor. Todos os arquivos são transmitidos diretamente dos terceiros.

Você pode encontrar a versão ao vivo do aplicativo em tv.kurr.dev.

Características

• Experiência em jogadores semelhantes ao YouTube- atalhos de teclado na área de trabalho, controles baseados em gestos no modo móvel, imagens em picturas, em tela cheia, modo de teatro, busca de cronogramas, controles de volume, visualização de miniaturas, legendas, faixas de áudio localizadas, etc.

• Progresso - O aplicativo acompanha seu progresso nas séries e filmes que você assiste. Você sempre pode continuar assistindo de onde parou.

• Play contínua - O aplicativo é reproduzido automaticamente o próximo episódio / próximo filme no universo cinematográfico da série.

• Explore - Descubra novos títulos por gênero, ano, classificação, coleções, universos cinematográficos, etc.

• Compartilhe - Envie a hora exata do vídeo para seus amigos.

• Perfil - Salvar títulos no seu favorito, assistir, assistir listas com classificação.

Pilha de tecnologia

O Projeto é criado com: TypeScript, React, RTK, Firebase (Auth, Firestore, Realtime Dabase), Shadcn/UI, React-Player, Dexie, CORS Proxy e muito mais.

O principal objetivo por trás dessas decisões é criar um aplicativo da Web de filmes sem despesas.

Firebase

Para meus propósitos, o Firebase fornece uma camada gratuita que é suficiente para minhas necessidades. Mas você pode perguntar "Por que o Firestore e o banco de dados em tempo real?" Pergunta justa.

O modelo de precificação de banco de dados em tempo real é baseado na quantidade de dados armazenados e na quantidade de dados baixados. É uma boa escolha para entidades que são atualizadas com frequência e não muito grandes. Por esse motivo, eu o uso para armazenar configurações de reprodução do usuário, como o último título assistido, de onde o usuário parou, etc.

O modelo de precificação da Firestore é baseado no número de leituras, gravações e exclusão. É uma boa escolha para entidades que não são atualizadas com frequência. Por esse motivo, eu o uso para armazenar os principais dados, como usuários salvos, assistidos, classificados, títulos favoritos, etc.

Dexie

Eu também uso Dexie para armazenar dados no IndexedDB do navegador. Isso me permite armazenar em cache as respostas no lado do cliente, a fim de reduzir a carga no servidor My Proxy e acelerar o tempo de carregamento do aplicativo em geral. Eu invalidei o cache a cada 24 horas. Isso é feito para evitar a situação quando os dados estão desatualizados (no caso de novo episódio ser lançado, etc.).

CORS Proxy

Eu uso meu próprio servidor CORS proxy para ignorar as restrições do CORS do navegador. Isso é necessário porque raspo dados de um site que não fornece uma API e não possui cabeçalhos CORS configurados. Você pode encontrar mais informações sobre o servidor no Repositório de Proxy do CORS.

Começando

Instalação

 # 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

Configuração

Primeiro, você precisa criar um arquivo .env.development.local na raiz do projeto. Este arquivo conterá todas as variáveis ​​de ambiente necessárias para que o aplicativo funcione. Você pode usar o arquivo .env.example como um modelo.

 ...

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_* - Para definir essas configurações, você precisa estar familiarizado com o FireBase e seus serviços. Você pode encontrar mais informações sobre o Firebase na documentação oficial. Todas as variáveis ​​podem ser encontradas no console do Firebase nas configurações do seu projeto.

• VITE_PROVIDER_URL - URL do site fornece os dados. Este projeto foi projetado para funcionar com um site específico que não divulgarei por motivos de segurança. Você pode usar qualquer outro site que forneça dados semelhantes (caso contrário, precisará alterar todas as tímidas e ajustá -los por si mesmo). Lembre -se de que você também precisa alterar o código que elimina os dados do site nos seguintes arquivos: api/ajax.ts , api/parser.ts .

• VITE_PROXY_URL - URL do servidor proxy. Este servidor é usado para ignorar as restrições do CORS do navegador. Para esses fins, você pode usar meu projeto - CORS Proxy.

Violação de direitos autorais

Criei esse aplicativo categoricamente com o objetivo de treinamento e demonstrar minhas habilidades como profissional em meu campo. Não busco o objetivo de distribuição ou venda de conteúdo de vídeo com direitos autorais. Eu não hospedar nenhum arquivo, ele apenas vincula a serviços de terceiros. Questões legais devem ser adotadas com os hosts e provedores de arquivos. Não sou responsável por nenhum arquivo de mídia mostrado pelos provedores de vídeo.

O acesso ao meu aplicativo é altamente restrito e está disponível apenas no modo somente leitura . Ninguém pode acessar o conteúdo de vídeo com direitos autorais sem minha permissão. Mesmo quando o acesso ao site é concedido, é para fins puramente demonstrativos, e o acesso será revogado logo depois disso. Não armazenei dados protegidos por direitos autorais no meu servidor e não forneço publicamente links de download/streaming para o conteúdo.

Todos os materiais e dados que retiro de fontes públicas usando raspagem na web. Se você é um detentor de direitos autorais e deseja remover o conteúdo do aplicativo, você deve fazê -lo no site, fornecendo os dados (link para o provedor que você pode encontrar aqui). Eu respeito a propriedade intelectual de outros. Se você acredita que seu trabalho foi copiado de uma maneira que constitua violação de direitos autorais, entre em contato comigo de uma maneira que seja conveniente para você usar os links no meu site.

Licença

A licença do MIT

Copyright (C) 2024 Kurbanali Ruslan [email protected]

É concedida permissão, gratuitamente, a qualquer pessoa que obtenha uma cópia deste software e arquivos de documentação associados (o "software"), para lidar com o software sem restrição, incluindo, sem limitação, os direitos de uso, copiar, modificar, mesclar .

O aviso de direitos autorais acima e este aviso de permissão devem ser incluídos em todas as cópias ou em partes substanciais do software.

O software é fornecido "como está", sem garantia de qualquer tipo, expresso ou implícito, incluindo, entre outros, as garantias de comercialização, aptidão para uma finalidade específica e não innoculação. Em nenhum caso os autores ou detentores de direitos autorais serão responsabilizados por qualquer reclamação, danos ou outro passivo, seja em uma ação de contrato, delito ou não, decorrente de, fora ou em conexão com o software ou o uso ou outras negociações nos Software.