diff --git a/docs/stremio/addons/stremio-gdrive.mdx b/docs/stremio/addons/stremio-gdrive.mdx
index f6a6ab0..6d9662b 100644
--- a/docs/stremio/addons/stremio-gdrive.mdx
+++ b/docs/stremio/addons/stremio-gdrive.mdx
@@ -1,14 +1,19 @@
---
-title: Stremio Gdrive
+title: Stremio GDrive
description: Stremio addon for fetching videos from your google drive.
keywords: [stremio, addons, http, google drive, guide, setup, configuration, install, link]
tags: [stremio-addon, stremio-addon:http-streams]
+toc_max_heading_level: 2
---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import Details from '@theme/Details';
+
```mdx-code-block
import StremioAddonButtons from '@site/src/components/StremioAddonButtons';
-
+
```
Description
@@ -18,8 +23,193 @@ Stremio-gdrive is a self-hosted Stremio addon that allows you to view files from
For it to work, you will need to join some team drives. You can find some [here](https://t.me/s/teamdrives).
Configuration
+
+I will go through the steps to set up this addon through a Cloudflare Worker.
-As mentioned earlier, this addon needs to be self-hosted.
+:::tip
+**This guide should be followed on its [dedicated page](/stremio/addons/stremio-gdrive), not from the setup page.**
+
+:::
+
+
Setting up our Google App
+
+1. Go to the [Google Cloud Console](https://console.cloud.google.com/).
+
+ If this is your first time using Google Cloud, you will be prompted to agree to the terms of service:
+
+ 
+
+2. Create a new project and select it:
+
+
+ 1. Click on `Select a project` in the top left:
+
+ 
+
+ 2. Click on `New Project`:
+
+ 
+
+ 3. Enter a project name and click on `Create`:
+
+ 
+
+ - The project name can be anything you want, e.g., `Stremio-Gdrive`. Leave the `Organization` field blank.
+
+ 4. Once the project has been created, you will get a notification:
+
+ 
+
+ - Click `Select Project`.
+
+ :::note
+ You may also use the same dropdown from step i to select the project.
+ :::
+
+3. Setup our Google Auth Platform
+
+ 1. Go to the [Google Cloud Console](https://console.cloud.google.com/).
+ 2. In the search bar at the top, search for `Google Auth Platform` and click on the result:
+
+ 
+
+ 3. You should be met with a message telling you that `Google Auth Platform not configured yet`, click on `Get Started`:
+
+ 
+
+ 4. Fill in the form:
+
+ 
+
+ 1. `App Information`:
+ - Set `App Name` to `Stremio GDrive`.
+ - Set `User Support Email` to your email. It should appear in the dropdown.
+ 2. `Audience`:
+ - Set `User Type` to `External`.
+ 3. `Contact Information`
+ - Add any email address, you can use the same one you used earlier for `User Support Email`.
+ 4. `Finish`
+ - Check the box to agree to the `Google API Services: User Data Policy`
+
+
+ 5. Once you have filled in the form, click on `Create`
+
+4. Enable the Google Drive API.
+
+ 1. Go to the [Google Cloud Console](https://console.cloud.google.com/).
+ 2. In the search bar at the top, search for `Google Drive API` and click on the result:
+
+ 
+
+ 3. Click on `Enable`:
+
+ 
+
+5. Create an OAuth client.
+
+ 1. Go back to the `Google Auth Platform` page.
+ 2. Click on `Clients` in the sidebar and then click on `+ Create Client`:
+
+ 
+
+ 3. Fill in the form:
+
+ 
+
+ - `Application Type`: Set this to `Desktop app`.
+ - `Name`: You can set this to anything such as `Stremio GDrive`.
+
+
+ 4. Click on `Create`.
+
+6. Publish the app.
+
+ 1. Go back to the `Google Auth Platform` page.
+ 2. Click on `Audience` in the sidebar and then click on `Publish`:
+
+ 
+
+
+
Setting up the Cloudflare Worker
+
+1. Go to the [Cloudflare Workers](https://workers.cloudflare.com/) page and click `Log In` or `Sign Up` if you don't have an account.
+
+2. Once logged in, you should be taken to the Cloudflare Workers & Pages dashboard. Click on `Create`:
+
+ 
+
+3. Once on the create page, make sure you're on the `Workers` tab and click `Create Worker`:
+
+ 
+
+4. You'll be asked to give a name to your worker. You can name it anything, this will be the URL you enter into Stremio to access your addon. Click `Deploy` once named.
+
+ 
+
+5. Once its done being deployed, you should be shown a success message. Click the `Edit code` button:
+
+ 
+
+6. You should be taken to the Cloudflare Worker editor:
+
+ 
+
+7. Now, we will paste the Cloudflare Worker script from the [Stremio GDrive GitHub](https://github.com/Viren070/stremio-gdrive) into the editor.
+
+ 1. Go to the [worker.js file](https://github.com/Viren070/stremio-gdrive-addon/blob/main/worker.js)
+ 2. Click the Copy icon
+ 3. Go back to the Cloudflare Worker editor and paste the script in the editor.
+
+
+
+
+8. Now, we need to add our Google OAuth credentials to the script.
+
+ To do this, we need to go back to the Google Cloud Console and get our `Client ID` and `Client Secret`.
+
+ 1. Go to the [Google Cloud Console](https://console.cloud.google.com/).
+ 2. In the search bar at the top, search for `Google Auth Platform` and click on the result:
+
+ 
+
+ 3. Click on `Clients` and click on the download icon for the client you created earlier:
+
+ 
+
+ 4. A pop-up will appear with your `Client ID` and `Client Secret`. Copy these values into the inputs below at [Google OAuth Tool](#OAuth Tool).
+
+ 
+
+ 5. Click the `Get Authorisation Code` button below to get the Authorisation code.
+ :::tip
+ You will be redirected to a Google OAuth page where you will need to sign in and allow the app to access your Google Drive.
+ You may encounter a warning page, click on `Advanced` and then `Go to... (unsafe)`.
+ :::
+
+ 6. Once you have allowed the app, you will be redirected back to this page with the Authorisation code filled in.
+ Click the `Get Credentials` button to get the credentials.
+
+ 7. You will be shown a success message and a block of code will appear. Copy this code into the Cloudflare Worker script.
+
+ 8. Once you have added your credentials, your script should look something like this:
+
+ 
+
+9. Click `Deploy` in the top right to save your changes and deploy the worker.
+
+11. Once deployed, you should see a green success message at the bottom. Click `Visit` next to the deploy button to go to the addon URL.
+
+12. You should be redirected to the /manifest.json. if not, append `/manifest.json` to the URL.
+
+13. Copy the URL and [add it to Stremio](/stremio/faq#how-do-i-install-an-addon-manually).
+
+
+
+
+### OAuth Tool
+
+import GoogleOAuth from '@site/src/components/GoogleOAuth';
+
+
-You can use [this GitHub repository](https://github.com/ShuvamJaswal/Gdrive-Stremio-Update) to set it up.
diff --git a/docs/stremio/addons/stremio-gdrive/callback.mdx b/docs/stremio/addons/stremio-gdrive/callback.mdx
new file mode 100644
index 0000000..f9ecb20
--- /dev/null
+++ b/docs/stremio/addons/stremio-gdrive/callback.mdx
@@ -0,0 +1,7 @@
+import Callback from '@site/src/components/GoogleOAuth/Callback';
+
+
+
+# Google Drive Callback
+
+You will automatically be redirected back to the addon guide after you have authenticated with Google.
\ No newline at end of file
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 40a66ec..deffa35 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -23,7 +23,7 @@ const config: Config = {
// may want to replace "en" with "zh-Hans".
i18n: {
defaultLocale: 'en-GB',
- locales: ['en-GB', 'es'],
+ locales: ['en-GB'],
},
future: {
diff --git a/src/components/GoogleOAuth/Callback.tsx b/src/components/GoogleOAuth/Callback.tsx
new file mode 100644
index 0000000..7d74f96
--- /dev/null
+++ b/src/components/GoogleOAuth/Callback.tsx
@@ -0,0 +1,28 @@
+// this component is used to catch responses from google OAuth. Upon load, we check if the
+// Url contains the code parameter. if it does we extract the code, and open
+// the /stremio/addons/stremio-gdrive/ page with the code as a query parameter.
+
+import React from "react";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import { sessionKeys } from ".";
+import { showToast } from "../Toasts";
+
+export default function Catcher(): JSX.Element {
+ const redirectUrl = useBaseUrl('/stremio/addons/stremio-gdrive#oauth-tool');
+ React.useEffect(() => {
+ const url = new URL(window.location.href);
+ const code = url.searchParams.get("code");
+ if (code) {
+ sessionStorage.setItem(sessionKeys.authorisationCode, code);
+ window.location.href = redirectUrl;
+ }
+ const error = url.searchParams.get("error");
+ if (error) {
+ console.error("Google OAuth Error: ", error);
+ sessionStorage.setItem(sessionKeys.oauthError, error);
+ window.location.href = redirectUrl;
+ }
+ }, []);
+
+ return <>;
+}
\ No newline at end of file
diff --git a/src/components/GoogleOAuth/index.tsx b/src/components/GoogleOAuth/index.tsx
new file mode 100644
index 0000000..49ea294
--- /dev/null
+++ b/src/components/GoogleOAuth/index.tsx
@@ -0,0 +1,199 @@
+import React, { useState } from "react";
+import CodeBlock from "@theme/CodeBlock";
+import { showToast } from "../Toasts";
+import './styles.css';
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+const scopes = ['https://www.googleapis.com/auth/drive'];
+const oauthUrl = "https://accounts.google.com/o/oauth2/v2/auth";
+const tokenUrl = "https://oauth2.googleapis.com/token";
+
+export const sessionKeys = {
+ clientId: "Viren070Guides_OAuthTool_clientId",
+ clientSecret: "Viren070Guides_OAuthTool_clientSecret",
+ authorisationCode: "Viren070Guides_OAuthTool_authorisationCode",
+ oauthError: "Viren070Guides_OAuthTool_oauthError"
+};
+
+// Function to obtain the refresh token
+const openAuthorisationUrl = (clientId: string, redirectUrl: string) => {
+
+ if (clientId.length === 0) {
+ showToast("Client ID is required", "error");
+ return;
+ }
+
+ const url = new URL(oauthUrl);
+ url.searchParams.append("client_id", clientId);
+ url.searchParams.append("redirect_uri", redirectUrl);
+ url.searchParams.append("response_type", "code");
+ url.searchParams.append("scope", scopes.join(" "));
+ url.searchParams.append("prompt", "consent");
+
+ // open the url in current tab
+
+ window.open(url.toString(), "_self");
+
+};
+
+
+
+export default function CodeGenerator(): JSX.Element {
+ const [clientId, setClientId] = useState("");
+ const [clientSecret, setClientSecret] = useState("");
+ const [authorisationCode, setAuthorisationCode] = useState("");
+ const [refreshToken, setRefreshToken] = useState("");
+ const [redirectUrl, setRedirectUrl] = useState("");
+
+ const callbackPath = useBaseUrl('/stremio/addons/stremio-gdrive/callback');
+
+ React.useEffect(() => {
+ // set the redirect url to the current page
+ setRedirectUrl(window.location.origin + callbackPath);
+ // load the stored values from session storage if they exist
+
+ const storedClientId = sessionStorage.getItem(sessionKeys.clientId);
+ const storedClientSecret = sessionStorage.getItem(sessionKeys.clientSecret);
+ const storedAuthorisationCode = sessionStorage.getItem(sessionKeys.authorisationCode);
+ const storedOauthError = sessionStorage.getItem(sessionKeys.oauthError);
+ if (storedOauthError) {
+ showToast(`Google OAuth Error: ${storedOauthError}`, "error");
+ sessionStorage.removeItem(sessionKeys.oauthError);
+ }
+ if (storedClientId) {
+ setClientId(storedClientId);
+ }
+ if (storedClientSecret) {
+ setClientSecret(storedClientSecret);
+ }
+ if (storedAuthorisationCode) {
+ setAuthorisationCode(storedAuthorisationCode);
+ sessionStorage.removeItem(sessionKeys.authorisationCode);
+ showToast("Authorisation code obtained successfully. Click `Get Credentials` to complete the process", "success");
+ }
+ }, []);
+
+ const handleClientIdChange = (e: React.ChangeEvent) => {
+ const value = e.target.value;
+ setClientId(value);
+ sessionStorage.setItem(sessionKeys.clientId, value);
+ // reset the authorisation code since its no longer valid with different client id
+ setAuthorisationCode("");
+ sessionStorage.removeItem(sessionKeys.authorisationCode);
+ };
+
+ const handleClientSecretChange = (e: React.ChangeEvent) => {
+ const value = e.target.value;
+ setClientSecret(value);
+ sessionStorage.setItem(sessionKeys.clientSecret, value);
+ // reset the authorisation code since its no longer valid with different client secret
+ setAuthorisationCode("");
+ sessionStorage.removeItem(sessionKeys.authorisationCode);
+ };
+
+ const getRefreshCode = () => {
+ if (!clientId || clientId.length === 0) {
+ showToast("Client ID is required", "error");
+ return;
+ }
+
+ if (!clientSecret || clientSecret.length === 0) {
+ showToast("Client Secret is required", "error");
+ return;
+ }
+
+ if (!authorisationCode || authorisationCode.length === 0) {
+ showToast("Authorisation Code is required", "error");
+ return;
+ }
+
+ const data = new URLSearchParams({
+ client_id: clientId,
+ client_secret: clientSecret,
+ code: authorisationCode,
+ grant_type: "authorization_code",
+ redirect_uri: redirectUrl
+ });
+
+ const response = fetch(tokenUrl, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/x-www-form-urlencoded"
+ },
+ body: data.toString()
+ });
+
+ response.then(handleResponse);
+ }
+
+ const handleResponse = (res: Response) => {
+ if (res.ok) {
+ res.json().then((data) => {
+ showToast("Refresh token obtained successfully. Copy the code and paste it into your script.", "success");
+ setRefreshToken(data.refresh_token);
+ // reset the authorisation code as it can no longer be used
+ setAuthorisationCode("");
+ sessionStorage.removeItem(sessionKeys.authorisationCode);
+ });
+ } else {
+ let text = res.text();
+ text.then((data) => {
+ showToast(`Error getting the refresh token:${data}`, "error");
+ });
+ // reset any previously obtained refresh token
+ setRefreshToken("");
+ }
+ };
+
+ const getCodeBlock = () => {
+ return (
+
+{
+`var credentials = {
+ "client_id": "${clientId}",
+ "client_secret": "${clientSecret}",
+ "refresh_token": "${refreshToken}"
+};`
+}
+
+ );
+ };
+
+
+ return (
+
+