Add pirate english and fix some react warnings

src/assets/languages.ts

@@ -4,6 +4,7 @@ import en from "@/assets/locales/en.json";
 import fr from "@/assets/locales/fr.json";
 import it from "@/assets/locales/it.json";
 import nl from "@/assets/locales/nl.json";
+import pirate from "@/assets/locales/pirate.json";
 import pl from "@/assets/locales/pl.json";
 import tr from "@/assets/locales/tr.json";
 import vi from "@/assets/locales/vi.json";
@@ -20,4 +21,5 @@ export const locales = {
   tr,
   vi,
   zh,
+  pirate,
 };

src/assets/locales/pirate.json

@@ -0,0 +1,391 @@
+{
+  "auth": {
+    "deviceNameLabel": "Ship name",
+    "deviceNamePlaceholder": "Muad'Dib's Pirate Ship",
+    "register": {
+      "information": {
+        "title": "Pirate Account information",
+        "color1": "First Mate color",
+        "color2": "Second Mate color",
+        "icon": "Pirate icon",
+        "header": "Enter a moniker for yer ship and choose a pirate icon and colors, arrr!"
+      }
+    },
+    "login": {
+      "title": "Hoist the Jolly Roger",
+      "description": "Arr, ye be askin' for the key to me top-secret lair, also known as The Fortress of Wordsmithery, accessed only by recitin' the sacred incantation of the 12-word passphrase!",
+      "validationError": "Arr, invalid or incomplete passphrase",
+      "submit": "Hoist Anchor",
+      "passphraseLabel": "12-Word Passphrase",
+      "passphrasePlaceholder": "Passphrase"
+    },
+    "generate": {
+      "title": "Yer Passphrase",
+      "description": "If ye lose this, ye be a silly goose and will be posted on the wall of shame™️"
+    },
+    "trust": {
+      "title": "Do ye trust this ship?",
+      "host": "Do ye trust <0>{{hostname}}</0>?",
+      "failed": {
+        "title": "Failed to reach the backend",
+        "text": "Did ye configure it correctly?"
+      },
+      "yes": "Trust",
+      "no": "Abandon Ship"
+    },
+    "verify": {
+      "title": "Enter yer passphrase",
+      "description": "If ye already lost it, how will ye ever be able to take care of a wee buccaneer?",
+      "invalidData": "Data be not valid",
+      "noMatch": "Passphrase doesn't match",
+      "recaptchaFailed": "ReCaptcha validation failed",
+      "passphraseLabel": "Yer passphrase",
+      "register": "Register"
+    }
+  },
+  "errors": {
+    "details": "Error details",
+    "reloadPage": "Reload the page",
+    "badge": "Shiver me timbers",
+    "title": "That be an error, Captain"
+  },
+  "notFound": {
+    "badge": "Not found",
+    "title": "Couldn't find that treasure map",
+    "message": "We looked everywhere: under the bins, in the closet, behind the proxy but ultimately couldn't find the treasure map ye be lookin' for.",
+    "goHome": "Back to home port"
+  },
+  "global": {
+    "name": "movie-web",
+    "pages": {
+      "pagetitle": "{{title}} - movie-web",
+      "dmca": "DMCA",
+      "settings": "Settings",
+      "about": "About",
+      "login": "Login",
+      "register": "Register"
+    }
+  },
+  "media": {
+    "types": {
+      "movie": "Film",
+      "show": "Show"
+    },
+    "episodeDisplay": "S{{season}} E{{episode}}"
+  },
+  "player": {
+    "scraping": {
+      "notFound": {
+        "badge": "Not found",
+        "title": "Goo goo gaa gaa",
+        "text": "Oh, me apologies, sweetie! The itty-bitty movie-web did its utmost bestest, but alas, no wucky videos to be spotted anywhere (´⊙ω⊙`) Please don't be angwy, wittle movie-web ish twying so hard. Can ye find it in yer heart to forgive? UwU 💖",
+        "homeButton": "Go home port"
+      },
+      "items": {
+        "pending": "Checkin' for videos...",
+        "notFound": "Doesn't have the video",
+        "failure": "Error occurred"
+      }
+    },
+    "playbackError": {
+      "badge": "Not found",
+      "title": "Whoops, it broke!",
+      "text": "Oh, me apologies, sweetie! The itty-bitty movie-web did its utmost bestest, but alas, no wucky videos to be spotted anywhere (´⊙ω⊙`) Please don't be angwy, wittle movie-web ish twying so hard. Can ye find it in yer heart to forgive? UwU 💖",
+      "homeButton": "Go home port",
+      "errors": {
+        "errorAborted": "The fetchin' of the associated resource was aborted by the user's request.",
+        "errorNetwork": "Some kind of network error occurred which prevented the media from bein' successfully fetched, despite havin' previously been available.",
+        "errorDecode": "Despite havin' previously been determined to be usable, an error occurred while tryin' to decode the media resource, resultin' in an error.",
+        "errorNotSupported": "The associated resource or media provider object has been found to be unsuitable.",
+        "errorGenericMedia": "Unknown media error occurred"
+      }
+    },
+    "metadata": {
+      "notFound": {
+        "badge": "Not found",
+        "title": "Couldn't find that media.",
+        "text": "We couldn't find the media ye requested. Either it's been removed or ye tampered with the URL.",
+        "homeButton": "Back to home port"
+      },
+      "failed": {
+        "badge": "Failed",
+        "title": "Failed to load meta data",
+        "text": "Oh, me apologies, sweetie! The itty-bitty movie-web did its utmost bestest, but alas, no wucky videos to be spotted anywhere (´⊙ω⊙`) Please don't be angwy, wittle movie-web ish twying so hard. Can ye find it in yer heart to forgive? UwU 💖",
+        "homeButton": "Go home port"
+      }
+    },
+    "back": {
+      "default": "Back to home port",
+      "short": "Back"
+    },
+    "time": {
+      "regular": "{{timeWatched}} / {{duration}}",
+      "shortRegular": "{{timeWatched}}",
+      "remaining": "{{timeLeft}} left • Finish at {{timeFinished, datetime}}",
+      "shortRemaining": "-{{timeLeft}}"
+    },
+    "nextEpisode": {
+      "next": "Next episode",
+      "cancel": "Cancel"
+    },
+    "menus": {
+      "settings": {
+        "videoSection": "Video settings",
+        "experienceSection": "Viewing Experience",
+        "enableCaptions": "Enable Sea Shanties",
+        "captionItem": "Sea Shanty settings",
+        "sourceItem": "Video sources",
+        "playbackItem": "Playback settings",
+        "downloadItem": "Buried Treasure",
+        "qualityItem": "Quality"
+      },
+      "episodes": {
+        "button": "Episodes",
+        "loadingTitle": "Loading...",
+        "loadingList": "Loading...",
+        "loadingError": "Error loadin' season",
+        "emptyState": "There be no episodes in this season, check back later!",
+        "episodeBadge": "E{{episode}}"
+      },
+      "sources": {
+        "title": "Sources",
+        "unknownOption": "Unknown",
+        "noStream": {
+          "title": "No stream",
+          "text": "This source has no streams for this film or show."
+        },
+        "noEmbeds": {
+          "title": "No embeds found",
+          "text": "We were unable to find any embeds for this source, please try another."
+        },
+        "failed": {
+          "title": "Failed to scrape",
+          "text": "We were unable to find any videos for this source. Don't come bitchin' to us about it, just try another source."
+        }
+      },
+      "captions": {
+        "title": "Sea Shanties",
+        "customizeLabel": "Customize",
+        "settings": {
+          "fixCapitals": "Fix capitalization",
+          "delay": "Shanty delay"
+        },
+        "customChoice": "Upload sea shanties",
+        "offChoice": "Off",
+        "unknownLanguage": "Unknown"
+      },
+      "downloads": {
+        "title": "Buried Treasure",
+        "disclaimer": "Downloads be taken directly from the provider. movie-web does not have control over how the downloads be provided.",
+        "hlsExplanation": "Insert explanation for why ye can't download HLS here",
+        "downloadVideo": "Download film",
+        "downloadCaption": "Download current sea shanty",
+        "onPc": {
+          "1": "On PC, right click the film and select <bold>Save film as</bold>",
+          "title": "Downloadin' on PC",
+          "shortTitle": "Download / PC"
+        },
+        "onAndroid": {
+          "1": "To download on Android, <bold>tap and hold</bold> on the film, then select <bold>save</bold>.",
+          "title": "Downloadin' on Android",
+          "shortTitle": "Download / Android"
+        },
+        "onIos": {
+          "1": "To download on iOS, click <bold><ios_share /></bold>, then <bold>Save to Files <ios_files /></bold>. All that's left to do now be to pick a nice and cozy chest for yer film!",
+          "title": "Downloadin' on iOS",
+          "shortTitle": "Download / iOS"
+        }
+      },
+      "playback": {
+        "title": "Playback settings",
+        "speedLabel": "Playback speed"
+      },
+      "quality": {
+        "title": "Quality",
+        "automaticLabel": "Automatic quality",
+        "hint": "Ye can try <0>switchin' source</0> to get different quality options.",
+        "iosNoQuality": "Due to Apple-defined limitations, quality selection be not available on iOS for this source. Ye can try <0>switchin' to another source</0> to get different quality options."
+      }
+    }
+  },
+  "home": {
+    "mediaList": {
+      "stopEditing": "Stop editin'"
+    },
+    "titles": {
+      "morning": ["Morning title"],
+      "day": ["Day title"],
+      "night": ["Night title"]
+    },
+    "search": {
+      "loading": "Loading...",
+      "sectionTitle": "Searchin' results",
+      "allResults": "That's all we have, me heartie!",
+      "noResults": "We couldn't find anythin', arrr!",
+      "failed": "Failed to find media, try again!",
+      "placeholder": "What do ye want to watch?"
+    },
+    "continueWatching": {
+      "sectionTitle": "Continue Watchin'"
+    },
+    "bookmarks": {
+      "sectionTitle": "Bookmarks"
+    }
+  },
+  "overlays": {
+    "close": "Close"
+  },
+  "screens": {
+    "loadingUser": "Loadin' yer pirate profile",
+    "loadingApp": "Loadin' application",
+    "loadingUserError": {
+      "text": "Failed to load yer pirate profile",
+      "textWithReset": "Failed to load yer pirate profile from yer custom ship, want to reset back to default?",
+      "reset": "Reset custom ship"
+    },
+    "migration": {
+      "failed": "Failed to migrate yer booty.",
+      "inProgress": "Please hold, we be migratin' yer booty. This shouldn't take long."
+    },
+    "dmca": {
+      "title": "DMCA",
+      "text": "In an effort to address the copyright concerns associated with the website known as \"movie-web,\" the DMCA, or Digital Jolly Roger Copyright Act, has been initiated to safeguard the intellectual property rights of content creators by reportin' infringements on this platform, thereby adherin' to legal protocols for takedown requests, which, like, ye know, it's all about, like, maintainin' the integrity of intellectual property, and, um, makin' sure, like, creators get their fair share, but then, it's, like, this intricate dance of digital legalities, where ye have to, uh, like, navigate this labyrinth of code and bytes and, uh, send, ye know, these, like, electronic documents that, um, point out the, uh, alleged infringement, and it's, like, this whole, like, teeter-totter of legality, where ye're, like, balancin', um, the rights of the, ye know, creators and the, um, operation of this, like, online, uh, entity, and, like, the DMCA, it's, like, this, um, powerful tool, but, uh, it's also, like, this, um, complex puzzle, where, ye know, ye're, like, seekin' justice in the digital wilderness, and, uh, strivin' for harmony amidst the chaos of the internet, and, um, yeah, that's, like, the whole, like, DMCA-ing thing with movie-web, ye know?"
+    }
+  },
+  "navigation": {
+    "banner": {
+      "offline": "Check yer internet connection"
+    },
+    "menu": {
+      "register": "Sync to the cloud",
+      "settings": "Settings",
+      "about": "About us",
+      "support": "Support",
+      "logout": "Abandon ship"
+    }
+  },
+  "actions": {
+    "copy": "Copy",
+    "copied": "Copied",
+    "next": "Next"
+  },
+  "settings": {
+    "unsaved": "Ye have unsaved changes",
+    "reset": "Reset",
+    "save": "Save",
+    "sidebar": {
+      "info": {
+        "title": "App information",
+        "hostname": "Ship name",
+        "backendUrl": "Backend URL",
+        "userId": "Pirate ID",
+        "notLoggedIn": "Not logged in",
+        "appVersion": "App version",
+        "backendVersion": "Backend version",
+        "unknownVersion": "Unknown",
+        "secure": "Secure",
+        "insecure": "Insecure"
+      }
+    },
+    "appearance": {
+      "title": "Appearance",
+      "activeTheme": "Active",
+      "themes": {
+        "default": "Default",
+        "blue": "Blue",
+        "teal": "Teal",
+        "red": "Red",
+        "gray": "Gray"
+      }
+    },
+    "account": {
+      "title": "Treasure Chest",
+      "register": {
+        "title": "Sync to the Cloud",
+        "text": "Instantly share yer watch progress between devices and keep 'em synced.",
+        "cta": "Get started"
+      },
+      "profile": {
+        "title": "Edit Pirate Portrait",
+        "firstColor": "First color",
+        "secondColor": "Second color",
+        "userIcon": "Pirate icon",
+        "finish": "Finish editing"
+      },
+      "devices": {
+        "title": "Shipmates",
+        "failed": "Failed to load sessions",
+        "deviceNameLabel": "Ship name",
+        "removeDevice": "Abandon ship"
+      },
+      "accountDetails": {
+        "editProfile": "Edit",
+        "deviceNameLabel": "Ship name",
+        "deviceNamePlaceholder": "Fremen tablet",
+        "logoutButton": "Abandon ship"
+      },
+      "actions": {
+        "title": "Actions",
+        "delete": {
+          "title": "Abandon Account",
+          "text": "This action be irreversible. All booty will be deleted and nothin' can be recovered.",
+          "button": "Abandon Account",
+          "confirmTitle": "Arrr ye sure?",
+          "confirmDescription": "Arrr ye sure ye want to abandon yer account? All yer booty will be lost!",
+          "confirmButton": "Abandon Account"
+        }
+      }
+    },
+    "locale": {
+      "title": "Locale",
+      "language": "Application language",
+      "languageDescription": "Language applied to the entire application."
+    },
+    "captions": {
+      "title": "Captions",
+      "previewQuote": "I must not fear. Fear be the mind-killer.",
+      "backgroundLabel": "Background opacity",
+      "textSizeLabel": "Text size",
+      "colorLabel": "Color"
+    },
+    "connections": {
+      "title": "Connections",
+      "workers": {
+        "label": "Use custom proxy sailors",
+        "description": "To make the application function, all traffic be routed through proxies. Enable this if ye want to bring yer own sailors.",
+        "urlLabel": "Sailor URLs",
+        "emptyState": "No sailors yet, add one below",
+        "urlPlaceholder": "https://",
+        "addButton": "Recruit new sailor"
+      },
+      "server": {
+        "label": "Custom ship",
+        "description": "To make the application function, all traffic be routed through proxies. Enable this if ye want to bring yer own sailors.",
+        "urlLabel": "Custom ship URL"
+      }
+    }
+  },
+  "faq": {
+    "title": "About us",
+    "q1": {
+      "title": "1",
+      "body": "Body of 1"
+    },
+    "how": {
+      "title": "1",
+      "body": "Body of 1"
+    }
+  },
+  "footer": {
+    "tagline": "Watch yer favorite shows and movies with this open source streaming ship.",
+    "links": {
+      "github": "GitHub",
+      "dmca": "DMCA",
+      "discord": "Discord"
+    },
+    "legal": {
+      "disclaimer": "Disclaimer",
+      "disclaimerText": "movie-web does not host any files, it merely links to 3rd party services. Legal issues should be taken up with the file hosts and providers. movie-web be not responsible for any media files shown by the video providers."
+    }
+  }
+}

src/pages/parts/settings/SidebarPart.tsx

@@ -75,7 +75,7 @@ export function SidebarPart() {
     function recheck() {
       const windowHeight =
         window.innerHeight || document.documentElement.clientHeight;
-      const middle = windowHeight / 2;
+      const centerTarget = windowHeight / 4;
 
       const viewList = settingLinks
         .map((link) => {
@@ -83,15 +83,15 @@ export function SidebarPart() {
           if (!el) return { distance: Infinity, link: link.id };
           const rect = el.getBoundingClientRect();
 
-          const distanceTop = Math.abs(middle - rect.top);
+          const distanceTop = Math.abs(centerTarget - rect.top);
-          const distanceBottom = Math.abs(middle - rect.bottom);
+          const distanceBottom = Math.abs(centerTarget - rect.bottom);
 
           const distance = Math.min(distanceBottom, distanceTop);
           return { distance, link: link.id };
         })
         .sort((a, b) => a.distance - b.distance);
 
-      // shortest distance to middle of screen is the active link
+      // shortest distance to the part of the screen we want is the active link
       setActiveLink(viewList[0]?.link ?? "");
     }
     document.addEventListener("scroll", recheck);
@@ -151,10 +151,10 @@ export function SidebarPart() {
 
             {/* Backend URL */}
             <div className="col-span-2 space-y-1">
-              <p className="text-type-dimmed font-medium flex items-center">
+              <div className="text-type-dimmed font-medium flex items-center">
-                {t("settings.sidebar.info.backendUrl")}
+                <p>{t("settings.sidebar.info.backendUrl")}</p>
                 <SecureBadge url={backendUrl} />
-              </p>
+              </div>
               <p className="text-white">
                 {backendUrl.replace(/https?:\/\//, "")}
               </p>
@@ -193,7 +193,7 @@ export function SidebarPart() {
                   />
                 ) : null}
                 {backendMeta.loading ? (
-                  <div className="h-4 w-12 bg-type-dimmed/20 rounded" />
+                  <span className="block h-4 w-12 bg-type-dimmed/20 rounded" />
                 ) : (
                   backendMeta?.value?.version ||
                   t("settings.sidebar.info.unknownVersion")

src/setup/i18n.ts

@@ -18,6 +18,13 @@ i18n.use(initReactI18next).init({
 });
 
 export const appLanguageOptions = langCodes.map((lang) => {
+  if (lang === "pirate") {
+    return {
+      code: "pirate",
+      name: "Pirate",
+      nativeName: "Pirate Tongue",
+    };
+  }
   const [langObj] = ISO6391.getLanguages([lang]);
   if (!langObj)
     throw new Error(`Language with code ${lang} cannot be found in database`);