mirror of
https://github.com/movie-web/docs.git
synced 2025-09-13 07:53:27 +00:00
Initial draft
This commit is contained in:
qtchaos
@@ -1,16 +1,17 @@
|
||||
---
|
||||
title: 'Introduction'
|
||||
---
|
||||
|
||||
# Introduction to the client
|
||||
|
||||
The client is what the main part of the application, it houses the interface and all of the scraping logic.
|
||||
The client is what users sees when navigating to your domain, it's the main part of the application and houses the interface and all of the scraping logic.
|
||||
|
||||
## PWA
|
||||
## Progressive Web App
|
||||
|
||||
The client can be optionally ran as a PWA. This can be hard to do correctly and really hard to reverse, so it's generally not recommended to do so if you don't have experience hosting PWA's.
|
||||
|
||||
You can read more about it [here](../1.self-hosting/3.about-pwa.md).
|
||||
The client can be optionally ran as a [PWA](https://web.dev/explore/progressive-web-apps), which allows it to be installed on a mobile device. This can be hard to do correctly and really hard to reverse, so it's generally not recommended to do so if you don't have experience hosting PWAs. If you understand the risks and still want to continue, then read more about it [here](../1.self-hosting/3.about-pwa.md).
|
||||
|
||||
## Configuration
|
||||
|
||||
The client has a decent amount of configuration options. You can view them all [here](./3.configuration.md).
|
||||
The client features various configuration options, some of which are required for the client to function. [If you are using Vercel to host the client](1.deploy.md#method-1-vercel-recommended), then the required variables are a necessary part of creating the site, if you're using another host, or hosting it for yourself, you'll need to set them up yourself.
|
||||
|
||||
You can view all of the configuration options on the [configurations page](3.configuration.md).
|
||||
|
||||
@@ -1,37 +1,45 @@
|
||||
---
|
||||
title: 'Deploy'
|
||||
---
|
||||
|
||||
# Deploying the client
|
||||
|
||||
## Method 1 - Vercel - Recommended
|
||||
|
||||
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fmovie-web%2Fmovie-web%2Ftree%2Fmaster&env=VITE_CORS_PROXY_URL,VITE_TMDB_READ_API_KEY)
|
||||
|
||||
1. Click the Deploy button.
|
||||
1. Sign in using either a GitHub, GitLab, or Bitbucket.
|
||||
1. Follow the instructions to create a repository for movie-web.
|
||||
1. Configure the environment variables:
|
||||
|
||||
- `VITE_CORS_PROXY_URL`: Enter your proxy URL here. Make sure to not have a slash at the end of your URL.
|
||||
|
||||
|
||||
Example (THIS IS AN EXAMPLE, IT WON'T WORK FOR YOU): `https://test-proxy.test.workers.dev`
|
||||
|
||||
- `VITE_TMDB_READ_API_KEY`: Enter your TMDB Read Access Token here. Please read [the TMDB page](2.tmdb.md) on how to get an API key.
|
||||
|
||||
- `VITE_BACKEND_URL`: Only set if you have a self-hosted backend. Put in your backend URL. Check out [configuration reference](../4.client/2.configuration.md) for details. Make sure to not have a slash at the end of the URL.
|
||||
|
||||
1. Click "Deploy"
|
||||
1. Congrats! You have your own version of movie-web hosted.
|
||||
1. You may wish to configure a custom domain - Please consult [the Vercel docs for how to do this](https://vercel.com/docs/getting-started-with-vercel/domains).
|
||||
|
||||
## Method 2 - Static Web Host
|
||||
|
||||
1. Download the file `movie-web.zip` from the latest release: https://github.com/movie-web/movie-web/releases/latest.
|
||||
2. Extract the ZIP file so you can edit the files.
|
||||
3. Open `config.js` in an editor such as Notepad, Visual Studio Code or similar.
|
||||
4. Put your proxy URL in-between the double quotes of `VITE_CORS_PROXY_URL: ""`. Make sure to not have a slash at the end of your URL.
|
||||
|
||||
Example (THIS IS AN EXAMPLE, IT WON'T WORK FOR YOU): `VITE_CORS_PROXY_URL: "https://test-proxy.test.workers.dev"`
|
||||
|
||||
5. Put your TMDB Read Access Token inside the quotes of `VITE_TMDB_READ_API_KEY: ""`. Please read [the TMDB page](2.tmdb.md) on how to get an API key.
|
||||
6. If you have a self-hosted backend server, enter your URL in the `VITE_BACKEND_URL` variable. Check out [configuration reference](../4.client/2.configuration.md) for details. Make sure to not have a slash at the end of the URL.
|
||||
6. Save the file.
|
||||
7. Upload **all** of the files to a static website hosting such as:
|
||||
7. Save the file.
|
||||
8. Upload **all** of the files to a static website hosting such as:
|
||||
- GitHub Pages
|
||||
- Netlify
|
||||
- Vercel
|
||||
- Etc, there are lots - Google it if the ones above don't work for you.
|
||||
1. Congrats! You have your own version of movie-web hosted.
|
||||
- Etc, [there are lots of options](https://www.staticwebsitehosting.org/){target="\_blank"}.
|
||||
9. Congrats! You have your own version of movie-web hosted.
|
||||
|
||||
@@ -3,6 +3,7 @@ title: 'TMDB API Key'
|
||||
---
|
||||
|
||||
## Getting an API Key
|
||||
|
||||
In order to search for movies and TV shows, we use an API called "The Movie Database" (TMDB). In order for your client to be able to search, you need to generate an API key.
|
||||
|
||||
::alert{type="info"}
|
||||
@@ -14,6 +15,6 @@ The API key is **free**, you just need to create an account.
|
||||
1. Go to https://www.themoviedb.org/settings/api/request to create a developer account.
|
||||
1. Read the terms and conditions and accept them.
|
||||
1. Fill out your details:
|
||||
- Select "Website" as type of use.
|
||||
- For the other details can put any values; they are not important.
|
||||
1. Copy the "API Read Access Token" - **DO NOT COPY THE API Key - IT WILL NOT WORK**
|
||||
- Select "Website" as type of use.
|
||||
- For the other details can put any values; they are not important.
|
||||
1. Copy the "API Read Access Token" - **DO NOT COPY THE API Key - IT WILL NOT WORK**
|
||||
|
||||
@@ -1,23 +1,28 @@
|
||||
---
|
||||
title: 'Configuration'
|
||||
---
|
||||
|
||||
# Client Config Reference
|
||||
|
||||
The config for the movie-web can be provided in 2 different ways, depending on how you are hosting movie-web:
|
||||
- If you are using a static web hoster (Such as Vercel, Netlify or Cloudflare pages), you can use [environment variables](#method-1-environment-variables).
|
||||
- If you are hosting movie-web using shared hosting (Such as cPanel or FTP), please use [the config file](#method-2-config-file).
|
||||
|
||||
- If you are using a static web hoster (such as Vercel, Netlify or Cloudflare Pages), you can use [environment variables](#method-1-environment-variables).
|
||||
- If you are hosting movie-web using shared hosting (such as cPanel or FTP), please use [the config file](#method-2-config-file).
|
||||
|
||||
Both methods can specify any of the keys listed in the [Shared Config](#config-reference-shared-config) section.
|
||||
|
||||
## Method 1 - Environment Variables
|
||||
|
||||
The movie-web client can be configured using environment variables **at build time**. You cannot use this method if hosting the pre-built `movie-web.zip` files!
|
||||
|
||||
Using environment variables to configure movie-web also allows configuration of some [environment variable specific keys](#config-reference-environment-variables-only).
|
||||
|
||||
## Method 2 - Config File
|
||||
When using the pre-built `movie-web.zip`, you can set the configuration in the `config.js` file.
|
||||
|
||||
When using the pre-built `movie-web.zip`, you can set the configuration in the `config.js` file.
|
||||
|
||||
The `config.js` file contains a JavaScript object which must be set to the correct values:
|
||||
|
||||
```js
|
||||
window.__CONFIG__ = {
|
||||
// ... Config variables go here ...
|
||||
@@ -26,121 +31,132 @@ window.__CONFIG__ = {
|
||||
|
||||
## Config Reference - Shared Config
|
||||
|
||||
### `VITE_TMDB_READ_API_KEY` - REQUIRED
|
||||
### `VITE_TMDB_READ_API_KEY` ⚠
|
||||
|
||||
This is the **read** API key from TMDB to allow movie-web to search for media. [Get one by following our guide](/self-hosting/client#tmdb-api-key).
|
||||
This is the **read** API key from TMDB to allow movie-web to search for media. [Get one by following our guide](../3.client/2.tmdb.md#getting-an-api-key).
|
||||
|
||||
::alert{type="warning"}
|
||||
:icon{name="material-symbols:warning-rounded"} The example will not work for you, get your own
|
||||
::alert{type="danger"}
|
||||
**Required. The client will not work properly if this is not configured.**
|
||||
::
|
||||
Example: <code style="overflow-wrap: anywhere">VITE_TMDB_READ_API_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c</code>
|
||||
|
||||
### `VITE_CORS_PROXY_URL` - REQUIRED
|
||||
Example: `get-your-own-api-key`
|
||||
|
||||
This is where you put proxy URLS, you must have at least one. [Get one by following our guide](/self-hosting/proxy#cloudflare-workers).
|
||||
Default: N/A
|
||||
|
||||
You can add multiple workers by separating them by a comma, they will be load balanced using round robin method on the client.
|
||||
### `VITE_CORS_PROXY_URL` ⚠
|
||||
|
||||
Worker url entries must **not** end with a slash.
|
||||
This is where you put proxy URLS, you must have at least one. [Get one by following our guide](../2.proxy/1.deploy.md#method-1---cloudflare-easy).
|
||||
|
||||
::alert{type="warning"}
|
||||
:icon{name="material-symbols:warning-rounded"} The example will not work for you, get your own
|
||||
You can add multiple Workers by separating them with a comma, they will be load balanced using round robin method on the client.
|
||||
**Worker URL entries must not end with a slash.**
|
||||
|
||||
::alert{type="danger"}
|
||||
**Required. The client will not work properly if this is not configured.**
|
||||
::
|
||||
Example: `VITE_CORS_PROXY_URL=https://worker1.workers.dev,https://worker2.workers.dev`
|
||||
|
||||
Example: `"https://example1.example.com,https://example2.example.com"`
|
||||
|
||||
Default: N/A
|
||||
|
||||
### `VITE_DMCA_EMAIL`
|
||||
|
||||
This is the DMCA email for on the DMCA page. If this config value is present, a new page will be made and linked in the footer, where it will mention how to handle dmca take-down requests. If the configuration value left empty, the page will not exist.
|
||||
This is the DMCA email for on the DMCA page. If this config value is present, a new page will be made and linked in the footer, where it will mention how to handle DMCA take-down requests. If the configuration value is left empty, the page will not exist.
|
||||
|
||||
Example: `VITE_DMCA_EMAIL=dmca@example.com`
|
||||
Example: `"dmca@example.com"`
|
||||
|
||||
Default: `""`
|
||||
|
||||
### `VITE_NORMAL_ROUTER`
|
||||
|
||||
The application has two routing modes: hash-router and history-router.
|
||||
Hash router is that every page is linked in the hash like so: `https://example.com/#/browse`.
|
||||
Hash router means that every page is linked with a hash like so: `https://example.com/#/browse`.
|
||||
|
||||
History router does routing without a hash like so: `https://example.com/browse`, this looks a lot nicer, but it requires that your hosting environment supports Single-Page-Application (SPA) redirects. If you don't know what that means, don't enable this.
|
||||
History router does routing without a hash like so: `https://example.com/browse`, this looks a lot nicer, but it requires that your hosting environment supports Single-Page-Application (SPA) redirects (Vercel supports this feature). If you don't know what that means, don't enable this.
|
||||
|
||||
Setting this configuration value to `true` will enable the history-router.
|
||||
|
||||
Example: `VITE_NORMAL_ROUTER=true`
|
||||
Example: `true`
|
||||
|
||||
Default: `false`
|
||||
|
||||
### `VITE_BACKEND_URL`
|
||||
|
||||
- Type: `string`
|
||||
- Default: `"https://backend.movie-web.app"`
|
||||
- Example: `"https://backend.example.com"`
|
||||
|
||||
This is the URL for the movie-web backend server which handles cross-device syncing.
|
||||
|
||||
The backend server can be found at https://github.com/movie-web/backend and is offered as a [Docker](https://docs.docker.com/get-started/overview/) image for deployment.
|
||||
The backend server can be found at https://github.com/movie-web/backend and is offered as a [Docker](https://docs.docker.com/get-started/overview/){target="\_blank"} image for deployment.
|
||||
|
||||
Backend url must **not** end with a slash.
|
||||
|
||||
Example: `VITE_BACKEND_URL=https://backend.example.com`
|
||||
|
||||
Default: `https://backend.movie-web.app`
|
||||
Backend URL must **not** end with a slash.
|
||||
|
||||
### `VITE_DISALLOWED_IDS`
|
||||
|
||||
In the unfortunate event that you're been sent a DMCA take down notice. You will need to somehow disable some pages. This configuration key will allow you to disable specific ids.
|
||||
- Type: `string`
|
||||
- Default: `""`
|
||||
- Example: `"series-123,movie-456"`
|
||||
|
||||
In the unfortunate event that you've been sent a DMCA take down notice, you'll need to disable some pages. This configuration key will allow you to disable specific ids.
|
||||
|
||||
For shows, it needs to be in this format: `series-<TMDB_ID>`. For movies the format is this: `movie-<TMDB_ID>`.
|
||||
|
||||
The list is comma separated, you can add as many as needed.
|
||||
|
||||
Example: `VITE_DISALLOWED_IDS=series-123,movie-456`
|
||||
|
||||
Default: `""`
|
||||
|
||||
### `VITE_CDN_REPLACEMENTS`
|
||||
|
||||
Sometimes you want to proxy a CDN. This is how you can easily replace a cdn url with your own.
|
||||
- Type: `string`
|
||||
- Default: `""`
|
||||
- Example: `"google.com:exampe.com,123movies.com:flixhq.to"`
|
||||
|
||||
Sometimes you want to proxy a CDN. This is how you can easily replace a CDN URL with your own.
|
||||
|
||||
The format is `<beforeA>:<afterA>,<beforeB>:<afterB>,...`
|
||||
|
||||
Example: `VITE_CDN_REPLACEMENTS=google.com:exampe.com,123movies.com:flixhq.to`
|
||||
|
||||
Default: `""`
|
||||
|
||||
### `VITE_TURNSTILE_KEY`
|
||||
|
||||
The turnstile key for cloudflare captchas. It's used to authenticate request to proxy workers (or providers api).
|
||||
- Type: `string`
|
||||
- Default: `""`
|
||||
|
||||
The proxy workers will need to be configured to accept these captcha tokens, otherwise it has no effect for security.
|
||||
The [Turnstile key](https://dash.cloudflare.com/sign-up?to=/:account/turnstile){target="\_blank"} for Cloudflare captchas. It's used to authenticate requests to proxy workers (or providers API).
|
||||
|
||||
Example: `""`
|
||||
[The proxy workers will need to be configured to accept these captcha tokens](../2.proxy/2.configuration.md#turnstile_secret), otherwise it has no effect for security.
|
||||
|
||||
## Config reference - Environment Variables Only
|
||||
|
||||
::alert{type="danger"}
|
||||
:icon{name="material-symbols:warning-rounded"} These configuration keys are specific to environment variables, they **only** work as environment variables **set at build time**.
|
||||
::
|
||||
|
||||
|
||||
### `VITE_PWA_ENABLED`
|
||||
**This key can only be configured through environment variables.**
|
||||
|
||||
- Type: `boolean`
|
||||
- Default: `false`
|
||||
|
||||
Set to `true` if you want to output a PWA application. Set to `false` or omit to get a normal web application.
|
||||
A PWA web application can be installed as an application to your phone or desktop computer, but can be tricky to manage and comes with a few footguns.
|
||||
Make sure you know what you're doing before enabling this, it **cannot be disabled** after you've set it up once.
|
||||
|
||||
Example: `VITE_PWA_ENABLED=no`
|
||||
::alert{type="warning"}
|
||||
Make sure you know what you're doing before enabling this, it **cannot be disabled** after you've set it up once.
|
||||
::
|
||||
|
||||
### `VITE_APP_DOMAIN`
|
||||
**This key can only be configured through environment variables.**
|
||||
|
||||
The domain where the app lives. Only required when having OpenSearch enabled.
|
||||
- Type: `string`
|
||||
- Default: `""`
|
||||
- Example: `"https://movie-web.app"`
|
||||
|
||||
The value must include the protocol (http/https) but must **not** end with a slash.
|
||||
The domain where the app lives. Only required when having the [`VITE_OPENSEARCH_ENABLED`](#vite_opensearch_enabled) option enabled.
|
||||
|
||||
Example: `VITE_APP_DOMAIN=https://movie-web.app`
|
||||
The value must include the protocol (HTTP/HTTPS) but must **not** end with a slash.
|
||||
|
||||
### `VITE_OPENSEARCH_ENABLED`
|
||||
**This key can only be configured through environment variables.**
|
||||
|
||||
Whether to enable OpenSearch. (the feature that allows a user to add a search engine to their browser). A
|
||||
when enabling you **must** also set `VITE_APP_DOMAIN`.
|
||||
- Type: `boolean`
|
||||
- Default: `false`
|
||||
|
||||
`VITE_OPENSEARCH_ENABLED` must be set to `true` to be enabled. Anything else will be treated as turned off, it's case sensitive so `True` will also be disabled.
|
||||
|
||||
Example: `VITE_OPENSEARCH_ENABLED=true`
|
||||
Whether to enable [OpenSearch](https://developer.mozilla.org/en-US/docs/Web/OpenSearch){target="\_blank"}, this allows a user to add a search engine to their browser. When enabling you **must** also set [`VITE_APP_DOMAIN`](#vite_app_domain).
|
||||
|
||||
::alert{type="warning"}
|
||||
:icon{name="material-symbols:warning-rounded"} This field is case sensitive, make sure you use the correct casing.
|
||||
::
|
||||
|
||||
@@ -3,43 +3,48 @@ title: 'Changelog'
|
||||
---
|
||||
|
||||
# Version 4.1.3
|
||||
- Add support for downloading HLS playlists
|
||||
- Added cdn replacements configuration option
|
||||
- new translations: estonian, toki pona, spanish
|
||||
- Translation improvements: german, turkish, nepali, chinese
|
||||
|
||||
- Add support for downloading HLS playlists
|
||||
- Added cdn replacements configuration option
|
||||
- new translations: estonian, toki pona, spanish
|
||||
- Translation improvements: german, turkish, nepali, chinese
|
||||
|
||||
# Version 4.1.2
|
||||
- Improve bundle chunking
|
||||
- Add millionjs for faster react
|
||||
- Update all dependency versions
|
||||
- Translation improvements: czech, hebrew, german
|
||||
- Fix mobile controls not going away after some time
|
||||
- Improve poster quality
|
||||
- Fix "media not found" error not being shown
|
||||
- Add more information to the error details modal
|
||||
|
||||
- Improve bundle chunking
|
||||
- Add millionjs for faster react
|
||||
- Update all dependency versions
|
||||
- Translation improvements: czech, hebrew, german
|
||||
- Fix mobile controls not going away after some time
|
||||
- Improve poster quality
|
||||
- Fix "media not found" error not being shown
|
||||
- Add more information to the error details modal
|
||||
|
||||
# Version 4.1.1
|
||||
- Fixed bug where settings toggles sometimes weren't usuable
|
||||
- Fixed bug where captions were permanently enabled
|
||||
- Fixed some missing translations
|
||||
- Translation improvements: arabic, french, nepali, chinese
|
||||
|
||||
- Fixed bug where settings toggles sometimes weren't usuable
|
||||
- Fixed bug where captions were permanently enabled
|
||||
- Fixed some missing translations
|
||||
- Translation improvements: arabic, french, nepali, chinese
|
||||
|
||||
# Version 4.1.0
|
||||
- Added new translations: arabic, chinese, latvian, thai, nepali, dutch
|
||||
- Translation improvements: turkish, hebrew
|
||||
- Fixed text directions for captions
|
||||
- Anti-tamper script has been removed and replaced with turnstile (this is the devtools blocked, you can use devtools again)
|
||||
- Added way to add the providers-api instead of proxies
|
||||
|
||||
- Added new translations: arabic, chinese, latvian, thai, nepali, dutch
|
||||
- Translation improvements: turkish, hebrew
|
||||
- Fixed text directions for captions
|
||||
- Anti-tamper script has been removed and replaced with turnstile (this is the devtools blocked, you can use devtools again)
|
||||
- Added way to add the providers-api instead of proxies
|
||||
|
||||
# Version 4.0.2
|
||||
- Added new translations: Hebrew, French, German, Swedish, Turkish.
|
||||
- Added minion joke language. Blame @jip_.
|
||||
- Thumbnail preview no longer goes under the next episode button.
|
||||
- Passphrase inputs are now actual password fields, so they may act nicer with password managers.
|
||||
- The player now remembers what your subtitle settings were, so no longer you need to keep selecting english everytime you watch.
|
||||
- Fix home link not working with /s/:term shortcut.
|
||||
- Swedish flag is now an actual Swedish flag.
|
||||
- Fix for various layout issues with small width mobile screens.
|
||||
|
||||
- Added new translations: Hebrew, French, German, Swedish, Turkish.
|
||||
- Added minion joke language. Blame @jip\_.
|
||||
- Thumbnail preview no longer goes under the next episode button.
|
||||
- Passphrase inputs are now actual password fields, so they may act nicer with password managers.
|
||||
- The player now remembers what your subtitle settings were, so no longer you need to keep selecting english everytime you watch.
|
||||
- Fix home link not working with /s/:term shortcut.
|
||||
- Swedish flag is now an actual Swedish flag.
|
||||
- Fix for various layout issues with small width mobile screens.
|
||||
|
||||
# Version 4.0.0
|
||||
|
||||
@@ -48,11 +53,13 @@ If you are upgrading from a previous version, make sure to read [the upgrade gui
|
||||
::
|
||||
|
||||
### Bug fixes
|
||||
|
||||
- Fixed bug where video player overlays the controls on IOS.
|
||||
- Fixed bug where you are kicked out of the fullscreen when switching episode.
|
||||
- Fixed bug where you cannot select a different episode if first episode fails to load.
|
||||
|
||||
### Enhancements
|
||||
|
||||
- Completely redesigned look and feel for the entire website.
|
||||
- Added FAQ and DMCA pages.
|
||||
- Source loading page is more detailed.
|
||||
@@ -65,6 +72,7 @@ If you are upgrading from a previous version, make sure to read [the upgrade gui
|
||||
- Chromecasting now supports HLS
|
||||
|
||||
### New features
|
||||
|
||||
- Quality selector! You can now switch qualities.
|
||||
- Search bar no longer requires you to choose between shows or movies.
|
||||
- Visit `/s/:term` to quickly watch something. For example `https://movie-web.app/s/hamilton`.
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: 'Upgrade guide'
|
||||
---
|
||||
|
||||
# Upgrade guide
|
||||
|
||||
## From `3.X` to `4.X`
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
title: 'Client'
|
||||
icon: mdi:server-network
|
||||
icon: mdi:monitor
|
||||
navigation.redirect: /client/introduction
|
||||
|
||||
Reference in New Issue
Block a user