From 00e57a932ff71fed5a71f6eb870d10064f1da6be Mon Sep 17 00:00:00 2001 From: Jip Fr Date: Sat, 16 Dec 2023 13:46:04 +0100 Subject: [PATCH 1/8] Downscale navigation on very small screens --- src/components/Avatar.tsx | 4 +++- src/components/layout/Navigation.tsx | 7 +++++-- tailwind.config.ts | 24 +++++++++++++++--------- 3 files changed, 23 insertions(+), 12 deletions(-) diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index 7a7b4882..894e50d6 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -66,7 +66,9 @@ export function UserAvatar(props: { <> diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx index d7cec107..3f8eb08f 100644 --- a/src/components/layout/Navigation.tsx +++ b/src/components/layout/Navigation.tsx @@ -79,8 +79,11 @@ export function Navigation(props: NavigationProps) { >
-
- + -
+
{individualWords.map((word, i) => (
Date: Sat, 16 Dec 2023 13:51:33 +0100 Subject: [PATCH 3/8] Fix logged out font size in navigation --- src/components/Avatar.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index 894e50d6..41e1042a 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -86,7 +86,10 @@ export function UserAvatar(props: { export function NoUserAvatar(props: { iconClass?: string }) { return (
- +
); } From ed957f3872192857a4fe2297819f2b2112ce36f1 Mon Sep 17 00:00:00 2001 From: Jip Fr Date: Sat, 16 Dec 2023 14:16:48 +0100 Subject: [PATCH 4/8] Make passphrase input into toggleable password field Co-authored-by: mrjvs --- src/components/Icon.tsx | 2 + src/components/text-inputs/AuthInputBox.tsx | 2 + .../text-inputs/TextInputControl.tsx | 52 +++++++++++++------ src/pages/parts/auth/LoginFormPart.tsx | 1 + src/pages/parts/auth/VerifyPassphrasePart.tsx | 1 + 5 files changed, 42 insertions(+), 16 deletions(-) diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 6f5c676e..90e43d70 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -5,6 +5,7 @@ export enum Icons { BOOKMARK = "bookmark", BOOKMARK_OUTLINE = "bookmark_outline", CLOCK = "clock", + EYE = "eye", EYE_SLASH = "eyeSlash", ARROW_LEFT = "arrowLeft", ARROW_RIGHT = "arrowRight", @@ -73,6 +74,7 @@ const iconList: Record = { search: ``, bookmark: ``, clock: ``, + eye: ``, eyeSlash: ``, arrowLeft: ``, chevronDown: ``, diff --git a/src/components/text-inputs/AuthInputBox.tsx b/src/components/text-inputs/AuthInputBox.tsx index 8ff9553e..c79c079d 100644 --- a/src/components/text-inputs/AuthInputBox.tsx +++ b/src/components/text-inputs/AuthInputBox.tsx @@ -7,6 +7,7 @@ export function AuthInputBox(props: { autoComplete?: string; placeholder?: string; onChange?: (data: string) => void; + passwordToggleable?: boolean; }) { return (
@@ -19,6 +20,7 @@ export function AuthInputBox(props: { autoComplete={props.autoComplete} onChange={props.onChange} placeholder={props.placeholder} + passwordToggleable={props.passwordToggleable} className="w-full flex-1 bg-authentication-inputBg px-4 py-3 text-search-text focus:outline-none rounded-lg placeholder:text-gray-700" />
diff --git a/src/components/text-inputs/TextInputControl.tsx b/src/components/text-inputs/TextInputControl.tsx index b555c4f8..91d20c3a 100644 --- a/src/components/text-inputs/TextInputControl.tsx +++ b/src/components/text-inputs/TextInputControl.tsx @@ -1,4 +1,7 @@ -import { forwardRef } from "react"; +import classNames from "classnames"; +import { forwardRef, useState } from "react"; + +import { Icon, Icons } from "../Icon"; export interface TextInputControlPropsNoLabel { onChange?: (data: string) => void; @@ -9,6 +12,7 @@ export interface TextInputControlPropsNoLabel { autoComplete?: string; placeholder?: string; className?: string; + passwordToggleable?: boolean; } export interface TextInputControlProps extends TextInputControlPropsNoLabel { @@ -30,25 +34,41 @@ export const TextInputControl = forwardRef< className, placeholder, onFocus, + passwordToggleable, }, ref ) => { + let inputType = "text"; + const [showPassword, setShowPassword] = useState(true); + if (passwordToggleable) inputType = showPassword ? "password" : "text"; + const input = ( - onChange && onChange(e.target.value)} - value={value} - name={name} - autoComplete={autoComplete} - onBlur={() => onUnFocus && onUnFocus()} - onFocus={() => onFocus?.()} - onKeyDown={(e) => - e.key === "Enter" ? (e.target as HTMLInputElement).blur() : null - } - /> +
+ onChange && onChange(e.target.value)} + value={value} + name={name} + autoComplete={autoComplete} + onBlur={() => onUnFocus && onUnFocus()} + onFocus={() => onFocus?.()} + onKeyDown={(e) => + e.key === "Enter" ? (e.target as HTMLInputElement).blur() : null + } + /> + {passwordToggleable ? ( + + ) : null} +
); if (label) { diff --git a/src/pages/parts/auth/LoginFormPart.tsx b/src/pages/parts/auth/LoginFormPart.tsx index 1ff43422..39b81b96 100644 --- a/src/pages/parts/auth/LoginFormPart.tsx +++ b/src/pages/parts/auth/LoginFormPart.tsx @@ -74,6 +74,7 @@ export function LoginFormPart(props: LoginFormPartProps) { name="username" onChange={setMnemonic} placeholder={t("auth.login.passphrasePlaceholder") ?? undefined} + passwordToggleable /> {result.error ? (

From 6862255de9bd82548547c25ba907969a0ea3268e Mon Sep 17 00:00:00 2001 From: Jip Fr Date: Sat, 16 Dec 2023 14:37:12 +0100 Subject: [PATCH 5/8] Replace 1.25 playback speed with 1.5 Co-authored-by: mrjvs --- src/components/player/atoms/settings/PlaybackSettingsView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/player/atoms/settings/PlaybackSettingsView.tsx b/src/components/player/atoms/settings/PlaybackSettingsView.tsx index 23bec683..a734e810 100644 --- a/src/components/player/atoms/settings/PlaybackSettingsView.tsx +++ b/src/components/player/atoms/settings/PlaybackSettingsView.tsx @@ -47,7 +47,7 @@ export function PlaybackSettingsView({ id }: { id: string }) { [display] ); - const options = [0.25, 0.5, 1, 1.25, 2]; + const options = [0.25, 0.5, 1, 1.5, 2]; return ( <> From 179bdb07dd29f46ded16efc8fbe9f655f907eae9 Mon Sep 17 00:00:00 2001 From: Jip Fr Date: Sat, 16 Dec 2023 14:37:52 +0100 Subject: [PATCH 6/8] Re-add auto captions Co-authored-by: mrjvs --- src/components/player/hooks/useCaptions.ts | 5 +++++ .../player/hooks/useInitializePlayer.ts | 22 ++++++++++++++++++- .../player/internals/VideoContainer.tsx | 3 +++ src/pages/PlayerView.tsx | 7 ------ 4 files changed, 29 insertions(+), 8 deletions(-) diff --git a/src/components/player/hooks/useCaptions.ts b/src/components/player/hooks/useCaptions.ts index ec99c4fb..b646ee8a 100644 --- a/src/components/player/hooks/useCaptions.ts +++ b/src/components/player/hooks/useCaptions.ts @@ -46,10 +46,15 @@ export function useCaptions() { else await selectLastUsedLanguage(); }, [selectLastUsedLanguage, disable, enabled]); + const selectLastUsedLanguageIfEnabled = useCallback(async () => { + if (enabled) await selectLastUsedLanguage(); + }, [selectLastUsedLanguage, enabled]); + return { selectLanguage, disable, selectLastUsedLanguage, toggleLastUsed, + selectLastUsedLanguageIfEnabled, }; } diff --git a/src/components/player/hooks/useInitializePlayer.ts b/src/components/player/hooks/useInitializePlayer.ts index 378cdd5e..5964a359 100644 --- a/src/components/player/hooks/useInitializePlayer.ts +++ b/src/components/player/hooks/useInitializePlayer.ts @@ -1,8 +1,10 @@ -import { useCallback } from "react"; +import { useCallback, useEffect, useMemo, useRef } from "react"; import { usePlayerStore } from "@/stores/player/store"; import { useVolumeStore } from "@/stores/volume"; +import { useCaptions } from "./useCaptions"; + export function useInitializePlayer() { const display = usePlayerStore((s) => s.display); const volume = useVolumeStore((s) => s.volume); @@ -15,3 +17,21 @@ export function useInitializePlayer() { init, }; } + +export function useInitializeSource() { + const source = usePlayerStore((s) => s.source); + const sourceIdentifier = useMemo( + () => (source ? JSON.stringify(source) : null), + [source] + ); + const { selectLastUsedLanguageIfEnabled } = useCaptions(); + + const funRef = useRef(selectLastUsedLanguageIfEnabled); + useEffect(() => { + funRef.current = selectLastUsedLanguageIfEnabled; + }, [selectLastUsedLanguageIfEnabled]); + + useEffect(() => { + if (sourceIdentifier) funRef.current(); + }, [sourceIdentifier]); +} diff --git a/src/components/player/internals/VideoContainer.tsx b/src/components/player/internals/VideoContainer.tsx index 45476eab..b1282c34 100644 --- a/src/components/player/internals/VideoContainer.tsx +++ b/src/components/player/internals/VideoContainer.tsx @@ -5,6 +5,8 @@ import { convertSubtitlesToObjectUrl } from "@/components/player/utils/captions" import { playerStatus } from "@/stores/player/slices/source"; import { usePlayerStore } from "@/stores/player/store"; +import { useInitializeSource } from "../hooks/useInitializePlayer"; + // initialize display interface function useDisplayInterface() { const display = usePlayerStore((s) => s.display); @@ -112,6 +114,7 @@ function VideoElement() { export function VideoContainer() { const show = useShouldShowVideoElement(); useDisplayInterface(); + useInitializeSource(); if (!show) return null; return ; diff --git a/src/pages/PlayerView.tsx b/src/pages/PlayerView.tsx index 37784759..61077177 100644 --- a/src/pages/PlayerView.tsx +++ b/src/pages/PlayerView.tsx @@ -1,9 +1,7 @@ import { RunOutput } from "@movie-web/providers"; import { useCallback, useEffect, useState } from "react"; import { useHistory, useParams } from "react-router-dom"; -import { useEffectOnce } from "react-use"; -import { useCaptions } from "@/components/player/hooks/useCaptions"; import { usePlayer } from "@/components/player/hooks/usePlayer"; import { usePlayerMeta } from "@/components/player/hooks/usePlayerMeta"; import { convertProviderCaption } from "@/components/player/utils/captions"; @@ -41,7 +39,6 @@ export function PlayerView() { } = usePlayer(); const { setPlayerMeta, scrapeMedia } = usePlayerMeta(); const backUrl = useLastNonPlayerLink(); - const { disable } = useCaptions(); const paramsData = JSON.stringify({ media: params.media, @@ -86,10 +83,6 @@ export function PlayerView() { ] ); - useEffectOnce(() => { - disable(); - }); - return ( {status === playerStatus.IDLE ? ( From b91f0e4b3d92afcb89e32a2e3f85fe4548617ea6 Mon Sep 17 00:00:00 2001 From: Jip Fr Date: Sat, 16 Dec 2023 14:42:51 +0100 Subject: [PATCH 7/8] Fix modal offset Co-authored-by: mrjvs --- src/components/overlays/Modal.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/overlays/Modal.tsx b/src/components/overlays/Modal.tsx index d1534b42..fc2c97f4 100644 --- a/src/components/overlays/Modal.tsx +++ b/src/components/overlays/Modal.tsx @@ -18,8 +18,8 @@ export function useModal(id: string) { export function ModalCard(props: { children?: ReactNode }) { return ( -

-
+
+
{props.children}
From 15332c8fcefca5c0455e82b24007f6bf74008bee Mon Sep 17 00:00:00 2001 From: Jip Fr Date: Sat, 16 Dec 2023 14:46:46 +0100 Subject: [PATCH 8/8] Fix /s/ back to home Co-authored-by: mrjvs --- src/stores/history/index.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/stores/history/index.ts b/src/stores/history/index.ts index 572358cf..8a85f777 100644 --- a/src/stores/history/index.ts +++ b/src/stores/history/index.ts @@ -43,11 +43,17 @@ export function useHistoryListener() { export function useLastNonPlayerLink() { const routes = useHistoryStore((s) => s.routes); + const location = useLocation(); const lastNonPlayerLink = useMemo(() => { const reversedRoutes = [...routes]; reversedRoutes.reverse(); - const route = reversedRoutes.find((v) => !v.path.startsWith("/media")); + const route = reversedRoutes.find( + (v) => + !v.path.startsWith("/media") && // cannot be a player link + location.pathname !== v.path && // cannot be current link + !v.path.startsWith("/s/") // cannot be a quick search link + ); return route?.path ?? "/"; - }, [routes]); + }, [routes, location]); return lastNonPlayerLink; }