From 8664929b055e888b5e49e99f4202603c64abf65e Mon Sep 17 00:00:00 2001 From: William Oldham Date: Sat, 9 Dec 2023 14:22:50 +0000 Subject: [PATCH 1/8] Fix spelling mistakes in en.json --- src/assets/locales/en.json | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json index 4d098125..9e923ee0 100644 --- a/src/assets/locales/en.json +++ b/src/assets/locales/en.json @@ -3,7 +3,7 @@ "deviceNameLabel": "Device name", "deviceNamePlaceholder": "Personal phone", "hasAccount": "Already have an account? <0>Login here.", - "createAccount": "Dont have an account yet? <0>Create an account.", + "createAccount": "Don't have an account yet? <0>Create an account.", "register": { "information": { "title": "Account information", @@ -26,7 +26,7 @@ "generate": { "title": "Your passphrase", "next": "I have saved my passphrase", - "description": "Your passphase acts as your username and password. Make sure to keep it safe as you will need to enter it to login to your account" + "description": "Your passphrase acts as your username and password. Make sure to keep it safe as you will need to enter it to login to your account" }, "trust": { "title": "Do you trust this server?", @@ -91,7 +91,7 @@ "items": { "pending": "Checking for videos...", "notFound": "Doesn't have the video", - "failure": "Error occured" + "failure": "Error occurred" } }, "playbackError": { @@ -104,7 +104,7 @@ "errorNetwork": "Some kind of network error occurred which prevented the media from being successfully fetched, despite having previously been available.", "errorDecode": "Despite having previously been determined to be usable, an error occurred while trying to decode the media resource, resulting in an error.", "errorNotSupported": "The media or media provider object is not supported.", - "errorGenericMedia": "Unknown media error occured." + "errorGenericMedia": "Unknown media error occurred." } }, "metadata": { @@ -230,7 +230,7 @@ }, "night": { "default": "What would you like to watch tonight?", - "extra": ["Tired? I hear The Excorcist is good."] + "extra": ["Tired? I hear The Exorcist is good."] } }, "search": { @@ -276,6 +276,7 @@ "register": "Sync to cloud", "settings": "Settings", "about": "About us", + "donation": "Donate", "support": "Support", "logout": "Log out" } @@ -398,7 +399,7 @@ } }, "footer": { - "tagline": "Watch your favorite shows and movies with this open source streaming app.", + "tagline": "Watch your favourite shows and movies with this open source streaming app.", "links": { "github": "GitHub", "dmca": "DMCA", From fc89a5c6b508397e381141b2e69e3222c0923200 Mon Sep 17 00:00:00 2001 From: William Oldham Date: Sat, 9 Dec 2023 14:23:19 +0000 Subject: [PATCH 2/8] Add additional donation link and change donation icon --- src/components/Icon.tsx | 2 ++ src/components/LinksDropdown.tsx | 5 ++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index babdd327..6c548d86 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -59,6 +59,7 @@ export enum Icons { MENU = "menu", LOCK = "lock", UNLOCK = "unlock", + DONATION = "donation", } export interface IconProps { @@ -125,6 +126,7 @@ const iconList: Record = { menu: ``, lock: ``, unlock: ``, + donation: ``, }; function ChromeCastButton() { diff --git a/src/components/LinksDropdown.tsx b/src/components/LinksDropdown.tsx index 3063ddb4..d42e8788 100644 --- a/src/components/LinksDropdown.tsx +++ b/src/components/LinksDropdown.tsx @@ -142,6 +142,9 @@ export function LinksDropdown(props: { children: React.ReactNode }) { {t("navigation.menu.about")} + + {t("navigation.menu.donation")} + {deviceName ? ( From 99de885216182b76e9725ee4d52f3acfbc99ea67 Mon Sep 17 00:00:00 2001 From: William Oldham Date: Sat, 9 Dec 2023 14:23:40 +0000 Subject: [PATCH 3/8] Change about me icon to circle question icon --- src/components/Icon.tsx | 2 ++ src/components/LinksDropdown.tsx | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 6c548d86..71e6b556 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -60,6 +60,7 @@ export enum Icons { LOCK = "lock", UNLOCK = "unlock", DONATION = "donation", + CIRCLE_QUESTION = "circle_question", } export interface IconProps { @@ -127,6 +128,7 @@ const iconList: Record = { lock: ``, unlock: ``, donation: ``, + circle_question: ``, }; function ChromeCastButton() { diff --git a/src/components/LinksDropdown.tsx b/src/components/LinksDropdown.tsx index d42e8788..24115d21 100644 --- a/src/components/LinksDropdown.tsx +++ b/src/components/LinksDropdown.tsx @@ -139,7 +139,7 @@ export function LinksDropdown(props: { children: React.ReactNode }) { {t("navigation.menu.settings")} - + {t("navigation.menu.about")} From c4c09b8ddbc810af134d063622a72d89fdb58aed Mon Sep 17 00:00:00 2001 From: William Oldham Date: Sat, 9 Dec 2023 14:24:01 +0000 Subject: [PATCH 4/8] Remove PWA Orientation option and fix env for PWA enabledness --- vite.config.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/vite.config.ts b/vite.config.ts index 4fbb2776..f8934b21 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -39,7 +39,7 @@ export default defineConfig(({ mode }) => { } }), VitePWA({ - disable: process.env.VITE_PWA_ENABLED !== "yes", + disable: env.VITE_PWA_ENABLED !== "yes", registerType: "autoUpdate", workbox: { maximumFileSizeToCacheInBytes: 4000000, // 4mb @@ -57,7 +57,6 @@ export default defineConfig(({ mode }) => { theme_color: "#120f1d", background_color: "#120f1d", display: "standalone", - orientation: "portrait-primary", start_url: "/", icons: [ { From 1b1770ace825282e8032f9aab6be5363d77a327d Mon Sep 17 00:00:00 2001 From: William Oldham Date: Sat, 9 Dec 2023 14:24:25 +0000 Subject: [PATCH 5/8] Dynamically change search bar sticky offset depending on window width --- src/pages/parts/home/HeroPart.tsx | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/src/pages/parts/home/HeroPart.tsx b/src/pages/parts/home/HeroPart.tsx index e40a1aa0..d62549de 100644 --- a/src/pages/parts/home/HeroPart.tsx +++ b/src/pages/parts/home/HeroPart.tsx @@ -1,11 +1,13 @@ -import { useCallback, useRef, useState } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import Sticky from "react-sticky-el"; +import { useWindowSize } from "react-use"; import { SearchBarInput } from "@/components/form/SearchBar"; import { ThinContainer } from "@/components/layout/ThinContainer"; import { useSlashFocus } from "@/components/player/hooks/useSlashFocus"; import { HeroTitle } from "@/components/text/HeroTitle"; +import { useIsMobile } from "@/hooks/useIsMobile"; import { useRandomTranslation } from "@/hooks/useRandomTranslation"; import { useSearchQuery } from "@/hooks/useSearchQuery"; import { useBannerSize } from "@/stores/banner"; @@ -29,6 +31,20 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) { [setShowBg, setIsSticky] ); + const { width: windowWidth } = useWindowSize(); + + const topSpacing = 16; + const [stickyOffset, setStickyOffset] = useState(topSpacing); + useEffect(() => { + if (windowWidth > 1200) { + // On large screens the bar goes inline with the nav elements + setStickyOffset(topSpacing); + } else { + // On smaller screens the bar goes below the nav elements + setStickyOffset(topSpacing + 60); + } + }, [windowWidth]); + let time = "night"; const hour = new Date().getHours(); if (hour < 12) time = "morning"; @@ -47,9 +63,9 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
From 9fb12e7e343bbba97a04b38782cbd9f5922205a9 Mon Sep 17 00:00:00 2001 From: William Oldham Date: Sat, 9 Dec 2023 14:24:46 +0000 Subject: [PATCH 6/8] Fix DMCA Footer link --- package.json | 2 +- pnpm-lock.yaml | 8 +++---- src/components/layout/Footer.tsx | 39 ++++++++++++++++++++++---------- 3 files changed, 32 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index d1b8aecc..add69b46 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "node-forge": "^1.3.1", "ofetch": "^1.0.0", "react": "^17.0.2", + "type-fest": "^4.3.3", "react-dom": "^17.0.2", "react-ga4": "^2.0.0", "react-google-recaptcha-v3": "^1.10.1", @@ -103,7 +104,6 @@ "tailwind-scrollbar": "^2.0.1", "tailwindcss": "^3.2.4", "tailwindcss-themer": "^3.1.0", - "type-fest": "^4.3.3", "typescript": "^4.6.4", "vite": "^4.4.12", "vite-plugin-checker": "^0.5.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ffe23820..924ee5d0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -110,6 +110,9 @@ dependencies: subsrt-ts: specifier: ^2.1.1 version: 2.1.1 + type-fest: + specifier: ^4.3.3 + version: 4.3.3 zustand: specifier: ^4.3.9 version: 4.4.1(@types/react@17.0.65)(immer@10.0.2)(react@17.0.2) @@ -238,9 +241,6 @@ devDependencies: tailwindcss-themer: specifier: ^3.1.0 version: 3.1.0(tailwindcss@3.3.3) - type-fest: - specifier: ^4.3.3 - version: 4.3.3 typescript: specifier: ^4.6.4 version: 4.9.5 @@ -6056,7 +6056,7 @@ packages: /type-fest@4.3.3: resolution: {integrity: sha512-bxhiFii6BBv6UiSDq7uKTMyADT9unXEl3ydGefndVLxFeB44LRbT4K7OJGDYSyDrKnklCC1Pre68qT2wbUl2Aw==} engines: {node: '>=16'} - dev: true + dev: false /typed-array-buffer@1.0.0: resolution: {integrity: sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==} diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx index ec4951a6..0f80d7a0 100644 --- a/src/components/layout/Footer.tsx +++ b/src/components/layout/Footer.tsx @@ -1,5 +1,7 @@ +import { useCallback } from "react"; import { useTranslation } from "react-i18next"; import { useHistory } from "react-router-dom"; +import { RequireExactlyOne } from "type-fest"; import { Icon, Icons } from "@/components/Icon"; import { BrandPill } from "@/components/layout/BrandPill"; @@ -7,19 +9,33 @@ import { WideContainer } from "@/components/layout/WideContainer"; import { shouldHaveDmcaPage } from "@/pages/Dmca"; import { conf } from "@/setup/config"; -function FooterLink(props: { - href?: string; - onClick?: () => void; - children: React.ReactNode; - icon: Icons; -}) { +// to and href are mutually exclusive +type FooterLinkProps = RequireExactlyOne< + { + children: React.ReactNode; + icon: Icons; + to: string; + href: string; + }, + "to" | "href" +>; + +function FooterLink(props: FooterLinkProps) { + const history = useHistory(); + + const navigateTo = useCallback(() => { + if (!props.to) return; + + history.push(props.to); + }, [history, props.to]); + return ( {props.children} @@ -29,12 +45,11 @@ function FooterLink(props: { function Dmca() { const { t } = useTranslation(); - const history = useHistory(); if (!shouldHaveDmcaPage()) return null; return ( - history.push("/dmca")}> + {t("footer.links.dmca")} ); From a837894f6d5276badfb235cd658524ff53ecea8e Mon Sep 17 00:00:00 2001 From: William Oldham Date: Sat, 9 Dec 2023 15:37:37 +0000 Subject: [PATCH 7/8] Move type-fest to a dev dependency and update import to import type --- package.json | 2 +- pnpm-lock.yaml | 8 ++++---- src/components/layout/Footer.tsx | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index add69b46..c3b3b910 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,6 @@ "node-forge": "^1.3.1", "ofetch": "^1.0.0", "react": "^17.0.2", - "type-fest": "^4.3.3", "react-dom": "^17.0.2", "react-ga4": "^2.0.0", "react-google-recaptcha-v3": "^1.10.1", @@ -84,6 +83,7 @@ "@typescript-eslint/eslint-plugin": "^5.13.0", "@typescript-eslint/parser": "^5.13.0", "@vitejs/plugin-react": "^3.1.0", + "type-fest": "^4.3.3", "autoprefixer": "^10.4.13", "cross-env": "^7.0.3", "eslint": "^8.10.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 924ee5d0..ffe23820 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -110,9 +110,6 @@ dependencies: subsrt-ts: specifier: ^2.1.1 version: 2.1.1 - type-fest: - specifier: ^4.3.3 - version: 4.3.3 zustand: specifier: ^4.3.9 version: 4.4.1(@types/react@17.0.65)(immer@10.0.2)(react@17.0.2) @@ -241,6 +238,9 @@ devDependencies: tailwindcss-themer: specifier: ^3.1.0 version: 3.1.0(tailwindcss@3.3.3) + type-fest: + specifier: ^4.3.3 + version: 4.3.3 typescript: specifier: ^4.6.4 version: 4.9.5 @@ -6056,7 +6056,7 @@ packages: /type-fest@4.3.3: resolution: {integrity: sha512-bxhiFii6BBv6UiSDq7uKTMyADT9unXEl3ydGefndVLxFeB44LRbT4K7OJGDYSyDrKnklCC1Pre68qT2wbUl2Aw==} engines: {node: '>=16'} - dev: false + dev: true /typed-array-buffer@1.0.0: resolution: {integrity: sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==} diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx index 0f80d7a0..e51c08cf 100644 --- a/src/components/layout/Footer.tsx +++ b/src/components/layout/Footer.tsx @@ -1,7 +1,7 @@ import { useCallback } from "react"; import { useTranslation } from "react-i18next"; import { useHistory } from "react-router-dom"; -import { RequireExactlyOne } from "type-fest"; +import type { RequireExactlyOne } from "type-fest"; import { Icon, Icons } from "@/components/Icon"; import { BrandPill } from "@/components/layout/BrandPill"; From 3fc03f5cfc7fef56396ac590b7858d0571c7d494 Mon Sep 17 00:00:00 2001 From: William Oldham Date: Sat, 9 Dec 2023 16:04:30 +0000 Subject: [PATCH 8/8] Fix linting --- src/pages/parts/home/HeroPart.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/parts/home/HeroPart.tsx b/src/pages/parts/home/HeroPart.tsx index d62549de..17a1172c 100644 --- a/src/pages/parts/home/HeroPart.tsx +++ b/src/pages/parts/home/HeroPart.tsx @@ -7,7 +7,6 @@ import { SearchBarInput } from "@/components/form/SearchBar"; import { ThinContainer } from "@/components/layout/ThinContainer"; import { useSlashFocus } from "@/components/player/hooks/useSlashFocus"; import { HeroTitle } from "@/components/text/HeroTitle"; -import { useIsMobile } from "@/hooks/useIsMobile"; import { useRandomTranslation } from "@/hooks/useRandomTranslation"; import { useSearchQuery } from "@/hooks/useSearchQuery"; import { useBannerSize } from "@/stores/banner";