Merge pull request #537 from movie-web/mobile-fixes

Several fixes
This commit is contained in:
mrjvs 2023-12-16 15:00:00 +01:00 committed by GitHub
commit 7537b8c198
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 111 additions and 44 deletions

View File

@ -66,7 +66,9 @@ export function UserAvatar(props: {
<>
<Avatar
profile={auth.account.profile}
sizeClass={props.sizeClass ?? "w-[2rem] h-[2rem]"}
sizeClass={
props.sizeClass ?? "w-[1.5rem] h-[1.5rem] ssm:w-[2rem] ssm:h-[2rem]"
}
iconClass={props.iconClass}
bottom={props.bottom}
/>
@ -84,7 +86,10 @@ export function UserAvatar(props: {
export function NoUserAvatar(props: { iconClass?: string }) {
return (
<div className="relative inline-block p-1 text-type-dimmed">
<Icon className={props.iconClass ?? "text-xl"} icon={Icons.MENU} />
<Icon
className={props.iconClass ?? "text-base ssm:text-xl"}
icon={Icons.MENU}
/>
</div>
);
}

View File

@ -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<Icons, string> = {
search: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/></svg>`,
bookmark: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M384 48V512l-192-112L0 512V48C0 21.5 21.5 0 48 0h288C362.5 0 384 21.5 384 48z"/></svg>`,
clock: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512zM232 256C232 264 236 271.5 242.7 275.1L338.7 339.1C349.7 347.3 364.6 344.3 371.1 333.3C379.3 322.3 376.3 307.4 365.3 300L280 243.2V120C280 106.7 269.3 96 255.1 96C242.7 96 231.1 106.7 231.1 120L232 256z"/></svg>`,
eye: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>`,
eyeSlash: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M150.7 92.77C195 58.27 251.8 32 320 32C400.8 32 465.5 68.84 512.6 112.6C559.4 156 590.7 207.1 605.5 243.7C608.8 251.6 608.8 260.4 605.5 268.3C592.1 300.6 565.2 346.1 525.6 386.7L630.8 469.1C641.2 477.3 643.1 492.4 634.9 502.8C626.7 513.2 611.6 515.1 601.2 506.9L9.196 42.89C-1.236 34.71-3.065 19.63 5.112 9.196C13.29-1.236 28.37-3.065 38.81 5.112L150.7 92.77zM223.1 149.5L313.4 220.3C317.6 211.8 320 202.2 320 191.1C320 180.5 316.1 169.7 311.6 160.4C314.4 160.1 317.2 159.1 320 159.1C373 159.1 416 202.1 416 255.1C416 269.7 413.1 282.7 407.1 294.5L446.6 324.7C457.7 304.3 464 280.9 464 255.1C464 176.5 399.5 111.1 320 111.1C282.7 111.1 248.6 126.2 223.1 149.5zM320 480C239.2 480 174.5 443.2 127.4 399.4C80.62 355.1 49.34 304 34.46 268.3C31.18 260.4 31.18 251.6 34.46 243.7C44 220.8 60.29 191.2 83.09 161.5L177.4 235.8C176.5 242.4 176 249.1 176 255.1C176 335.5 240.5 400 320 400C338.7 400 356.6 396.4 373 389.9L446.2 447.5C409.9 467.1 367.8 480 320 480H320z"/></svg>`,
arrowLeft: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>`,
chevronDown: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>`,

View File

@ -38,10 +38,10 @@ export function PassphraseDisplay(props: { mnemonic: string }) {
<span className="text-sm">{t("actions.copy")}</span>
</button>
</div>
<div className="px-4 py-4 grid grid-cols-4 gap-2">
<div className="px-4 py-4 grid grid-cols-3 text-sm sm:text-base sm:grid-cols-4 gap-2">
{individualWords.map((word, i) => (
<div
className="px-4 rounded-md py-2 bg-authentication-wordBackground text-white font-medium text-center"
className="rounded-md py-2 bg-authentication-wordBackground text-white font-medium text-center"
// this doesn't get rerendered nor does it have state so its fine
// eslint-disable-next-line react/no-array-index-key
key={i}

View File

@ -79,8 +79,11 @@ export function Navigation(props: NavigationProps) {
>
<div className={classNames("fixed left-0 right-0 flex items-center")}>
<div className="px-7 py-5 relative z-[60] flex flex-1 items-center justify-between">
<div className="flex items-center space-x-3 pointer-events-auto">
<Link className="block tabbable rounded-full" to="/">
<div className="flex items-center space-x-1.5 ssm:space-x-3 pointer-events-auto">
<Link
className="block tabbable rounded-full text-xs ssm:text-base"
to="/"
>
<BrandPill clickable />
</Link>
<a

View File

@ -18,8 +18,8 @@ export function useModal(id: string) {
export function ModalCard(props: { children?: ReactNode }) {
return (
<div className="w-[30rem] max-w-full">
<div className="w-full bg-dropdown-background rounded-xl p-8 m-4 pointer-events-auto">
<div className="w-full max-w-[30rem] m-4">
<div className="w-full bg-dropdown-background rounded-xl p-8 pointer-events-auto">
{props.children}
</div>
</div>

View File

@ -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 (
<>

View File

@ -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,
};
}

View File

@ -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]);
}

View File

@ -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 <VideoElement />;

View File

@ -7,6 +7,7 @@ export function AuthInputBox(props: {
autoComplete?: string;
placeholder?: string;
onChange?: (data: string) => void;
passwordToggleable?: boolean;
}) {
return (
<div className="space-y-3">
@ -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"
/>
</div>

View File

@ -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 = (
<input
type="text"
ref={ref}
className={className}
placeholder={placeholder}
onChange={(e) => 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
}
/>
<div className="relative">
<input
type={inputType}
ref={ref}
className={classNames(className, passwordToggleable && "pr-12")}
placeholder={placeholder}
onChange={(e) => 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 ? (
<button
type="button"
className="absolute top-1/2 -translate-y-1/2 right-1 text-xl p-3"
onClick={() => setShowPassword(!showPassword)}
>
<Icon icon={showPassword ? Icons.EYE : Icons.EYE_SLASH} />
</button>
) : null}
</div>
);
if (label) {

View File

@ -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 (
<PlayerPart backUrl={backUrl} onMetaChange={metaChange}>
{status === playerStatus.IDLE ? (

View File

@ -74,6 +74,7 @@ export function LoginFormPart(props: LoginFormPartProps) {
name="username"
onChange={setMnemonic}
placeholder={t("auth.login.passphrasePlaceholder") ?? undefined}
passwordToggleable
/>
<AuthInputBox
label={t("auth.deviceNameLabel") ?? undefined}

View File

@ -98,6 +98,7 @@ export function VerifyPassphrase(props: VerifyPassphraseProps) {
name="username"
value={mnemonic}
onChange={setMnemonic}
passwordToggleable
/>
{result.error ? (
<p className="mt-3 text-authentication-errorText">

View File

@ -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;
}

View File

@ -1,5 +1,5 @@
import { allThemes, defaultTheme, safeThemeList } from "./themes";
import type { Config } from "tailwindcss"
import type { Config } from "tailwindcss";
const themer = require("tailwindcss-themer");
@ -8,20 +8,25 @@ const config: Config = {
safelist: safeThemeList,
theme: {
extend: {
/* breakpoints */
screens: {
ssm: "400px",
},
/* fonts */
fontFamily: {
"open-sans": "'Open Sans'"
"open-sans": "'Open Sans'",
},
/* animations */
keyframes: {
"loading-pin": {
"0%, 40%, 100%": { height: "0.5em", "background-color": "#282336" },
"20%": { height: "1em", "background-color": "white" }
}
"20%": { height: "1em", "background-color": "white" },
},
},
animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" }
}
animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" },
},
},
plugins: [
require("tailwind-scrollbar"),
@ -33,9 +38,10 @@ const config: Config = {
selectors: [".theme-default"],
...defaultTheme,
},
...allThemes]
})
]
...allThemes,
],
}),
],
};
export default config;