movie web app
1.0.0
Application Web de film tout-en-un avec une expérience de joueur de type YouTube
Ce projet est une application Web qui vous permet de regarder des films, des émissions de télévision, des anime en un seul endroit. Il est conçu pour être une plate-forme simple et facile à utiliser qui offre une expérience de joueur de type YouTube. L'application fonctionne en affichant des fichiers vidéo à partir de fournisseurs tiers à l'intérieur d'une interface utilisateur intuitive et esthétique. Le contenu est récupéré à partir de tiers et le grattage est entièrement effectué sur le client. Cela signifie que l'Hoster n'a ni fichiers ni supports sur leur serveur. Tous les fichiers sont diffusés directement à partir des tiers.
Vous pouvez trouver la version en direct de l'application sur tv.kurr.dev.
Expérience de joueur de type YouTube - Raccourcis au clavier sur le bureau, commandes basées sur les gestes sur mobile, image dans l'image, mode plein écran, mode théâtre, recherche de chronologie, commandes de volume, présentations miniatures, sous-titres, pistes audio localisées, etc.
Progrès - L'application garde une trace de vos progrès dans la série et les films que vous regardez. Vous pouvez toujours continuer à regarder là où vous vous êtes arrêté.
Play continu - L'application joue automatiquement le prochain épisode / prochain film dans Cinematic Universe dans la série.
Explorer - Découvrez de nouveaux titres par genre, année, note, collections, univers cinématographiques, etc.
Partager - Envoyez le temps exact de la vidéo à vos amis.
Profil - Enregistrez les titres sur vos listes préférées, regarde, regardée et notée.
Le projet est créé avec: TypeScript, React, RTK, Firebase (Auth, Firestore, RealTime Database), Shadcn / UI, React-Player, Dexie, CORS Proxy et plus encore.
L'objectif principal derrière ces décisions est de créer une application Web de film sans aucune dépense.
Pour mes besoins, Firebase fournit un niveau gratuit qui suffit à mes besoins. Mais vous pouvez demander "Pourquoi Firestore et la base de données en temps réel?" Juste question.
Le modèle de tarification de la base de données en temps réel est basé sur la quantité de données stockées et la quantité de données téléchargées. C'est un bon choix pour les entités qui sont mises à jour fréquemment et pas trop grandes. Pour cette raison, je l'utilise pour stocker les paramètres de lecture de l'utilisateur tels que le dernier titre regardé, où l'utilisateur s'est arrêté, etc.
Le modèle de tarification de Firestore est basé sur le nombre de lectures, d'écrits et de suppression. C'est un bon choix pour les entités qui ne sont pas mises à jour fréquemment. Pour cette raison, je l'utilise pour stocker les principales données telles que les utilisateurs enregistrés, regardés, classés, titres préférés, etc.
J'utilise également Dexie pour stocker des données dans IndededDB d'un navigateur. Cela me permet de mettre en cache les réponses du côté client afin de réduire la charge sur le serveur mon proxy et d'accélérer le temps de chargement de l'application en général. J'invalide le cache toutes les 24 heures. Ceci est fait pour éviter la situation lorsque les données sont dépassées (dans le cas où un nouvel épisode est libéré, etc.).
J'utilise mon propre serveur proxy CORS pour contourner les restrictions CORS du navigateur. Ceci est nécessaire car je gratte les données d'un site qui ne fournit pas une API et n'a pas la configuration des en-têtes CORS. Vous pouvez trouver plus d'informations sur le serveur dans le référentiel 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 Tout d'abord, vous devez créer un fichier .env.development.local à la racine du projet. Ce fichier contiendra toutes les variables d'environnement requises pour que l'application fonctionne. Vous pouvez utiliser le fichier .env.example comme modèle.
...
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_* - Pour configurer ces paramètres, vous devez vous familiariser avec Firebase et ses services. Vous pouvez trouver plus d'informations sur Firebase dans la documentation officielle. Toutes les variables peuvent être trouvées dans la console Firebase dans les paramètres de votre projet.
VITE_PROVIDER_URL - URL du site fournissant les données. Ce projet est conçu pour fonctionner avec un site Web spécifique que je ne divulguerai pas pour des raisons de sécurité. Vous pouvez utiliser n'importe quel autre site qui fournit des données similaires (sinon vous devez modifier toutes les typons et les ajuster par vous-même). Gardez à l'esprit que vous devez également modifier le code qui gratte les données du site dans les fichiers suivants: api/ajax.ts , api/parser.ts .
VITE_PROXY_URL - URL du serveur proxy. Ce serveur est utilisé pour contourner les restrictions CORS du navigateur. À ces fins, vous pouvez utiliser mon projet - CORS Proxy.
J'ai créé cette application catégoriquement à des fins de formation et de démonstration de mes compétences en tant que professionnel dans mon domaine. Je ne poursuis pas le but de la distribution ou de la vente de contenu vidéo protégé par le droit d'auteur. Je n'organise aucun fichier, il est simplement lié aux services tiers. Les problèmes juridiques doivent être abordés avec les hôtes et fournisseurs de dossiers. Je ne suis pas responsable des fichiers multimédias affichés par les fournisseurs de vidéos.
L'accès à mon application est très restreint et n'est disponible qu'en mode en lecture seule . Personne ne peut accéder au contenu vidéo protégé par le droit d'auteur sans ma permission. Même lorsque l'accès au site est accordé, il est à des fins purement démonstratives et que l'accès sera révoqué peu de temps après. Je ne stocke pas de données protégées par le droit d'auteur sur mon serveur et je ne fournit publiquement aucun lien de téléchargement / streaming vers le contenu.
Tous les documents et données que je tire à partir de sources publiques à l'aide de grattage Web. Si vous êtes un titulaire du droit d'auteur et que vous souhaitez supprimer le contenu de l'application, vous devez le faire sur le site en fournissant les données (lien pour le fournisseur que vous pouvez trouver ici). Je respecte la propriété intellectuelle des autres. Si vous pensez que votre travail a été copié d'une manière qui constitue une violation du droit d'auteur, veuillez contacter avec moi d'une manière qui vous convient à l'aide des liens sur mon site Web.
La licence MIT
Copyright (C) 2024 Kurbanali Ruslan [email protected]
L'autorisation est accordée gratuitement par la présente à toute personne qui obtient une copie de ce logiciel et des fichiers de documentation associés (le "logiciel"), pour traiter le logiciel sans restriction, y compris sans limiter les droits d'utilisation, de copier, de modifier, de fusionner , publier, distribuer, sous-licencier et / ou vendre des copies du logiciel, et pour permettre aux personnes à qui le logiciel est fourni pour le faire, sous réserve des conditions suivantes:
L'avis de droit d'auteur ci-dessus et le présent avis d'autorisation sont inclus dans toutes les copies ou des parties substantielles du logiciel.
Le logiciel est fourni "tel quel", sans garantie d'aucune sorte, express ou implicite, y compris, mais sans s'y limiter, les garanties de qualité marchande, d'adéquation à un usage particulier et de non-contrefaçon. En aucun cas, les auteurs ou les titulaires de droits d'auteur ne seront pas responsables de toute réclamation, dommage ou autre responsabilité, que ce soit dans une action de contrat, de délit ou autre, découlant de, hors du logiciel ou de l'utilisation ou d'autres transactions dans le LOGICIEL.
