movie web app
1.0.0
All-in-One Movie Web App mit YouTube-ähnlicher Player-Erfahrung
Dieses Projekt ist eine Webanwendung, mit der Sie Filme, Fernsehsendungen und Anime an einem Ort ansehen können. Es ist eine einfache und benutzerfreundliche Plattform, die ein YouTube-ähnliches Spielererlebnis bietet. App funktioniert, indem sie Videodateien von Drittanbietern in einer intuitiven und ästhetischen Benutzeroberfläche anzeigen. Der Inhalt wird von Dritten abgerufen und das Abkratzen des Clients wird vollständig erledigt. Dies bedeutet, dass der Hero keine Dateien oder Medien auf seinem Server hat. Alle Dateien werden direkt von den Dritten gestreamt.
Sie finden die Live -Version der Anwendung bei TV.Kurr.dev.
YouTube-ähnliche Spielererfahrung -Tastaturverknüpfungen auf Desktop, gestikbasierte Steuerelemente auf mobilen, Bild-in-Bild, Vollbildmodus, Theatermodus, Timeline-Suche, Lautstärkeregler, Vorschau, Untertitel, lokalisierte Audio-Tracks usw.
Fortschritt - Die App verfolgt Ihre Fortschritte in der Serie und Filmen, die Sie sehen. Sie können immer weiter zuschauen, wo Sie aufgehört haben.
Continuous Play - Die App spielt automatisch die nächste Folge / den nächsten Film im Cinematic Universe in der Serie.
Explore - Entdecken Sie neue Titel nach Genre, Jahr, Bewertung, Sammlungen, filmischen Universen usw.
Teilen - Senden Sie genau die Zeit des Videos an Ihre Freunde.
Profil - Sparen Sie Titel in Ihrem Favoriten, sehen Sie sich an, bewerteten Listen.
Das Projekt wird erstellt mit: TypeScript, React, RTK, Firebase (Auth, Firestore, Echtzeitdatenbank), Shadcn/UI, React-Player, Dexie, CORS-Proxy und mehr.
Das Hauptziel dieser Entscheidungen ist es, die Film -Web -App ohne Ausgaben zu erstellen.
Für meine Zwecke bietet FireBase eine kostenlose Stufe, die für meine Bedürfnisse ausreicht. Aber Sie können fragen "Warum Firestore und Echtzeitdatenbank?" Faire Frage.
Das Realtime -Datenbankpreismodell basiert auf der gespeicherten Datenmenge und der heruntergeladenen Datenmenge. Es ist eine gute Wahl für Unternehmen, die häufig und nicht zu groß aktualisiert werden. Aus diesem Grund verwende ich es, um die Wiedergabeeinstellungen des Benutzers wie den letzten Titel zu speichern, bei dem der Benutzer aufgehört hat, usw.
Das Firestore -Preismodell basiert auf der Anzahl der Lesevorgänge, Schreibvorgänge und Löschungen. Es ist eine gute Wahl für Unternehmen, die nicht häufig aktualisiert werden. Aus diesem Grund benutze ich es, um die Hauptdaten wie die gespeicherten, beobachteten, bewerteten Titel von Benutzern, bevorzugte Titel usw. zu speichern.
Ich verwende auch Dexie, um Daten in einem Browser indexierten DB zu speichern. Auf diese Weise kann ich Antworten auf der Client -Seite zwischenspeichern, um die Last auf dem My Proxy -Server zu reduzieren und die Anwendungslastzeit im Allgemeinen zu beschleunigen. Ich habe den Cache alle 24 Stunden ungültig. Dies geschieht, um die Situation zu vermeiden, wenn die Daten veraltet sind (falls eine neue Episode veröffentlicht wird, usw.).
Ich benutze meinen eigenen CORS -Proxy -Server, um CORS -Beschränkungen des Browsers zu umgehen. Dies ist notwendig, da ich Daten von einer Site abschließe, die keine API bereitstellt und keine CORS -Headers eingerichtet ist. Weitere Informationen zum Server finden Sie im CORS -Proxy -Repository.
# 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 Zunächst müssen Sie eine .env.development.local -Datei im Root des Projekts erstellen. Diese Datei enthält alle Umgebungsvariablen, die für die Arbeit der Anwendung erforderlich sind. Sie können die Datei .env.example als Vorlage verwenden.
...
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_* - Um diese Einstellungen zu konfigurieren, müssen Sie mit Firebase und seinen Diensten vertraut sein. Weitere Informationen zu Firebase finden Sie in der offiziellen Dokumentation. Alle Variablen finden Sie in der Firebase -Konsole in Ihren Projekteinstellungen.
VITE_PROVIDER_URL - URL der Site, die die Daten bereitstellt. Dieses Projekt soll mit einer bestimmten Website zusammenarbeiten, die ich aus Sicherheitsgründen nicht offenlegen werde. Sie können jede andere Site verwenden, die ähnliche Daten liefert (ansonsten müssen Sie alle Typierungen ändern und sie für sich selbst anpassen). Beachten Sie, dass Sie auch den Code ändern müssen, der die Daten von der Website in folgenden Dateien abkratzt: api/ajax.ts , api/parser.ts .
VITE_PROXY_URL - URL des Proxy -Servers. Dieser Server wird verwendet, um die CORS -Beschränkungen des Browsers zu umgehen. Für diese Zwecke können Sie mein Projekt - CORS Proxy verwenden.
Ich habe diese Anwendung kategorisch für den Zweck der Schulung und demonstrierten, meine Fähigkeiten als Profi in meinem Gebiet auszubilden und zu demonstrieren. Ich verfolge den Zweck des Vertriebs oder des Verkaufs von urheberrechtlich geschützten Videoinhalten nicht. Ich hoste keine Dateien, sondern links zu Diensten von Drittanbietern. Rechtsfragen sollten mit den Aktenhosts und Anbietern aufgenommen werden. Ich bin nicht verantwortlich für Mediendateien, die von den Videoanbietern gezeigt werden.
Der Zugriff auf meine Anwendung ist stark eingeschränkt und ist nur im schreibgeschützten Modus verfügbar. Niemand kann ohne meine Erlaubnis auf den urheberrechtlich geschützten Video -Inhalt zugreifen. Selbst wenn der Zugriff auf die Website gewährt wird, dient es zu rein demonstrativen Zwecken, und der Zugang wird kurz danach widerrufen. Ich speichere keine urheberrechtlich geschützten Daten auf meinem Server und stelle keine öffentlichen Download-/Streaming -Links zum Inhalt an.
Alle Materialien und Daten, die ich mit Web -Scraping aus öffentlichen Quellen nehme. Wenn Sie ein Urheberrechtsinhaber sind und Inhalte aus der App entfernen möchten, müssen Sie dies auf der Website tun, die die Daten angeben (Link für den Anbieter, den Sie hier finden können). Ich respektiere das geistige Eigentum anderer. Wenn Sie der Meinung sind, dass Ihre Arbeit auf eine Weise kopiert wurde, die eine Urheberrechtsverletzung ausmacht, wenden Sie sich bitte an mich auf eine Weise, die für Sie die Links auf meiner Website bequem ist.
Die MIT -Lizenz
Copyright (C) 2024 Muurbanali Ruslan [email protected]
Die Erlaubnis wird hiermit kostenlos an eine Person erteilt, die eine Kopie dieser Software und zugehörigen Dokumentationsdateien ("Software") erhält, um die Software ohne Einschränkung zu behandeln, einschließlich ohne Einschränkung der Rechte zu verwenden, zu kopieren, zu modifizieren, zu verschmelzen, verschmelzen , veröffentlichen, vertreiben, unterlizenzieren und/oder Kopien der Software verkaufen und Personen, denen die Software dazu bereitgestellt wird, unter den folgenden Bedingungen ermöglicht:
Die oben genannte Copyright -Mitteilung und diese Erlaubnisbekanntmachung müssen in alle Kopien oder wesentlichen Teile der Software enthalten sein.
Die Software wird "wie es ist" ohne Garantie jeglicher Art, ausdrücklich oder stillschweigend bereitgestellt, einschließlich, aber nicht beschränkt auf die Gewährleistung der Handelsfähigkeit, die Eignung für einen bestimmten Zweck und die Nichtverletzung. In keinem Fall haftet die Autoren oder Urheberrechtsinhaber für Ansprüche, Schäden oder andere Haftungen, sei es in Vertragsmaßnahmen, unerlaubter Handlung oder anderweitig, aus oder im Zusammenhang mit der Software oder anderen Geschäften in der SOFTWARE.
