movie web app
1.0.0
Aplicación web de películas todo en uno con experiencia de reproductor similar a YouTube
Este proyecto es una aplicación web que le permite ver películas, programas de televisión, anime en un solo lugar. Está diseñado para ser una plataforma simple y fácil de usar que proporciona una experiencia de reproductor similar a YouTube. La aplicación funciona mostrando archivos de video de proveedores de terceros dentro de una interfaz de usuario intuitiva y estética. El contenido se obtiene de terceros y el raspado se realiza completamente en el cliente. Esto significa que el Hoster no tiene archivos ni medios en su servidor. Todos los archivos se transmiten directamente de los terceros.
Puede encontrar la versión en vivo de la aplicación en tv.kurr.dev.
Experiencia de reproductor tipo YouTube : atajos de teclado en escritorio, controles basados en gestos en dispositivos móviles, imagen en foto, modo de pantalla completa, modo de teatro, búsqueda de línea de tiempo, controles de volumen, vista previa de miniaturas, subtítulos, pistas de audio localizadas, etc.
Progress : la aplicación realiza un seguimiento de su progreso en la serie y las películas que ves. Siempre puedes continuar mirando desde donde lo dejaste.
Reproducción continua : la aplicación reproduce automáticamente el próximo episodio / próxima película en el universo cinematográfico de la serie.
Explore : descubra nuevos títulos de género, año, calificación, colecciones, universos cinematográficos, etc.
Compartir : envíe la hora exacta del video a sus amigos.
Perfil : guarde títulos para sus listas favoritas, mira, observó, calificadas.
El proyecto se crea con: TypeScript, React, RTK, Firebase (Auth, Firestore, REAL TIEME DATABASE), SHADCN/UI, React-Player, Dexie, Cors proxy y más.
El objetivo principal detrás de estas decisiones es crear una aplicación web de películas sin ningún gasto.
Para mis propósitos, Firebase proporciona un nivel gratuito que es suficiente para mis necesidades. Pero puede preguntar "¿Por qué Firestore y la base de datos en tiempo real?" Pregunta justa.
El modelo de precios de la base de datos en tiempo real se basa en la cantidad de datos almacenados y la cantidad de datos descargados. Es una buena opción para las entidades que se actualizan con frecuencia y no demasiado grandes. Por esa razón, lo uso para almacenar la configuración de reproducción del usuario, como el último título, donde el usuario dejó, etc.
El modelo de precios de Firestore se basa en el número de lecturas, escrituras y eliminaciones. Es una buena opción para las entidades que no se actualizan con frecuencia. Por esa razón, lo uso para almacenar los datos principales, como los usuarios guardados, observados, calificados, títulos favoritos, etc.
También uso Dexie para almacenar datos en el índice de un navegador. Esto me permite almacenar respuestas en el lado del cliente para reducir la carga en el servidor My proxy y acelerar el tiempo de carga de la aplicación en general. Invalido el caché cada 24 horas. Esto se hace para evitar la situación cuando los datos están desactualizados (en caso de que se publique un nuevo episodio, etc.).
Utilizo mi propio servidor proxy CORS para evitar las restricciones CORS del navegador. Esto es necesario porque raspe los datos de un sitio que no proporciona una API y no tiene encabezados CORS configurados. Puede encontrar más información sobre el servidor en el repositorio de proxy 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 Primero, debe crear un archivo .env.development.local en la raíz del proyecto. Este archivo contendrá todas las variables de entorno necesarias para que funcione la aplicación. Puede usar el archivo .env.example como plantilla.
...
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 configurar estos ajustes, debe estar familiarizado con Firebase y sus servicios. Puede encontrar más información sobre Firebase en la documentación oficial. Todas las variables se pueden encontrar en la consola Firebase en la configuración de su proyecto.
VITE_PROVIDER_URL - URL del sitio que proporciona los datos. Este proyecto está diseñado para funcionar con un sitio web específico que no revelaré por razones de seguridad. Puede usar cualquier otro sitio que proporcione datos similares (de lo contrario, necesita cambiar todas las tipificaciones y ajustarlo por usted mismo). Tenga en cuenta que también necesita cambiar el código que raspa los datos del sitio en los siguientes archivos: api/ajax.ts , api/parser.ts .
VITE_PROXY_URL - URL del servidor proxy. Este servidor se utiliza para evitar las restricciones de CORS del navegador. Para esos fines, puede usar mi proyecto: Cors proxy.
Creé esta aplicación categóricamente con el propósito de capacitar y demostrar mis habilidades como profesional en mi campo. No busco el propósito de distribución o venta de contenido de video con derechos de autor. No alojo ningún archivo, simplemente se vincula a los servicios de terceros. Los problemas legales deben abordarse con los hosts y proveedores de archivos. No soy responsable de ningún archivo multimedia que se muestre los proveedores de video.
El acceso a mi aplicación está altamente restringido y solo está disponible en modo de solo lectura . Nadie puede acceder al contenido de video con derechos de autor sin mi permiso. Incluso cuando se otorga el acceso al sitio, es para fines puramente demostrativos, y el acceso se revocará poco después. No almaceno ningún datos con derechos de autor en mi servidor y no proporciono públicamente ningún enlace de descarga/transmisión al contenido.
Todos los materiales y datos que tomo de fuentes públicas utilizando raspado web. Si es un titular de los derechos de autor y desea eliminar el contenido de la aplicación, debe hacerlo en el sitio proporcionando los datos (enlace para el proveedor que puede encontrar aquí). Respeto la propiedad intelectual de los demás. Si cree que su trabajo se ha copiado de una manera que constituya una infracción de derechos de autor, contacte conmigo de una manera que sea conveniente para usted usando los enlaces en mi sitio web.
La licencia del MIT
Copyright (c) 2024 Kurbanali Ruslan [email protected]
El permiso se otorga, de forma gratuita, a cualquier persona que obtenga una copia de este software y archivos de documentación asociados (el "software"), para tratar el software sin restricción, incluidos los derechos de usar, copiar, modificar, modificar, modificar, fusionar , publique, distribuya, sublicence y venda copias del software, y para permitir a las personas a las que se proporciona el software para hacerlo, sujeto a las siguientes condiciones:
El aviso de derechos de autor anterior y este aviso de permiso se incluirán en todas las copias o porciones sustanciales del software.
El software se proporciona "tal cual", sin garantía de ningún tipo, expresa o implícita, incluidas, entre otros, las garantías de comerciabilidad, idoneidad para un propósito particular y no infracción. En ningún caso los autores o titulares de derechos de autor serán responsables de cualquier reclamo, daños u otra responsabilidad, ya sea en una acción de contrato, agravio o de otro tipo, derivado de o en relación con el software o el uso u otros tratos en el SOFTWARE.
