css & other qol fixes (#1485)

api/src/controllers/shows/shows.ts

@@ -106,6 +106,9 @@ export const showsH = new Elysia({ prefix: "/shows", tags: ["shows"] })
 			jwt: { sub, settings },
 		}) => {
 			const langs = processLanguages(languages);
+
+			if (query) ignoreInCollection = false;
+
 			const items = await getShows({
 				limit,
 				after,

api/src/websockets.ts

@@ -92,7 +92,12 @@ export const appWs = baseWs.ws("/ws", {
 		const handler = actionMap[action as keyof typeof actionMap];
 		for (const perm of handler.permissions ?? []) {
 			if (!ws.data.jwt.permissions.includes(perm)) {
-				return ws.close(3000, `Missing permission: '${perm}'.`);
+				ws.send({
+					action: action,
+					status: 403,
+					message: `Missing permission: '${perm}'.`,
+				});
+				return;
 			}
 		}
 		await handler.message(ws as any, body as any);

front/src/primitives/input.tsx

@@ -31,7 +31,7 @@ export const Input = ({
 				// @ts-expect-error not yet in typescript i think
 				includeFontPadding={false}
 				className={cn(
-					"min-h-6 flex-1 font-sans text-base text-slate-600 outline-0 dark:text-slate-400",
+					"min-h-6 min-w-0 flex-1 font-sans text-base text-slate-600 outline-0 dark:text-slate-400",
 					className,
 				)}
 				{...props}

front/src/ui/browse/header.tsx

@@ -198,8 +198,8 @@ export const BrowseSettings = ({
 
 	return (
 		<View>
-			<View className="mx-8 my-2 flex-1 flex-row flex-wrap items-center justify-between">
-				<View className="flex-row gap-3">
+			<View className="my-2 flex-1 flex-row flex-wrap items-center justify-between sm:mx-8">
+				<View className="flex-1 flex-row flex-wrap gap-3">
 					<Menu
 						Trigger={MediaTypeTrigger}
 						mediaType={mediaType as keyof typeof MediaTypeIcons}
@@ -359,7 +359,7 @@ export const BrowseSettings = ({
 				excludedGenres.length > 0 ||
 				studioSlugs.length > 0 ||
 				staffSlugs.length > 0) && (
-				<View className="mx-8 mb-2 flex-row flex-wrap gap-2">
+				<View className="mx-8 mb-2 flex-1 flex-row flex-wrap gap-2">
 					{mediaType !== "all" && (
 						<FilterChip
 							label={t(

front/src/ui/login/form.tsx

@@ -38,7 +38,7 @@ export const FormPage = ({
 	return (
 		<ImageBackground
 			source={{ uri: `${apiUrl ?? defaultApiUrl}/api/shows/random/thumbnail` }}
-			className="flex-1 flex-row bg-dark"
+			className="h-lvw w-lvw flex-1 flex-row overflow-x-hidden bg-popover"
 		>
 			<SvgBlob className="absolute top-0 left-0" />
 			<ScrollView className="pr-6">

front/src/ui/navbar.tsx

@@ -104,9 +104,9 @@ const NavbarLink = <AsProps = ComponentProps<typeof A>>({
 		>
 			<Icon
 				icon={icon}
-				className="fill-slate-200 sm:hidden dark:fill-slate-200"
+				className="fill-slate-200 md:hidden dark:fill-slate-200"
 			/>
-			<Text className="font-headers text-lg text-slate-200 uppercase max-sm:hidden dark:text-slate-200">
+			<Text className="font-headers text-lg text-slate-200 uppercase max-md:hidden dark:text-slate-200">
 				{label}
 			</Text>
 		</As>
@@ -141,6 +141,7 @@ export const NavbarRight = () => {
 		<View className="shrink flex-row items-center">
 			<SearchBar
 				key={path}
+				overlayOnSmallScreen
 				value={path === "/browse" ? q : undefined}
 				onChangeText={(query) => {
 					if (path === "/browse") {
@@ -168,8 +169,13 @@ export const SearchBar = ({
 	className,
 	containerClassName,
 	forceExpand,
+	overlayOnSmallScreen,
 	...props
-}: TextInputProps & { forceExpand?: boolean; containerClassName?: string }) => {
+}: TextInputProps & {
+	forceExpand?: boolean;
+	containerClassName?: string;
+	overlayOnSmallScreen?: boolean;
+}) => {
 	const { t } = useTranslation();
 	const [_expanded, setExpanded] = useState(!!value);
 	const inputRef = useRef<TextInput>(null);
@@ -181,6 +187,10 @@ export const SearchBar = ({
 			className={cn(
 				"mr-2 flex-row items-center overflow-hidden rounded-full p-0 pl-4",
 				expanded ? "bg-slate-100 dark:bg-slate-800" : "bg-transparent",
+				Platform.OS === "web" &&
+					overlayOnSmallScreen &&
+					expanded &&
+					"max-sm:fixed max-sm:top-2 max-sm:right-1 max-sm:left-1 max-sm:z-50 max-sm:mr-0",
 				containerClassName,
 			)}
 			style={[
@@ -207,7 +217,7 @@ export const SearchBar = ({
 				placeholder={t("navbar.search")}
 				textAlignVertical="center"
 				className={cn(
-					"h-full flex-1 font-sans text-base outline-0",
+					"h-full min-w-0 flex-1 font-sans text-base outline-0",
 					"align-middle text-slate-600 dark:text-slate-200",
 					!expanded && "w-0 grow-0",
 					className,
@@ -225,7 +235,6 @@ export const SearchBar = ({
 				//  https://github.com/react-navigation/react-navigation/issues/12274
 				//  https://github.com/react-navigation/react-navigation/issues/12667
 				onPressIn={() => {
-					console.log(expanded);
 					if (expanded) {
 						inputRef.current?.blur();
 						inputRef.current?.clear();
@@ -234,7 +243,7 @@ export const SearchBar = ({
 					} else {
 						setExpanded(true);
 						// Small delay to allow animation to start before focusing
-						setTimeout(() => inputRef.current?.focus(), 100);
+						setTimeout(() => inputRef.current?.focus(), 200);
 					}
 				}}
 				iconClassName={cn(

front/src/ui/player/language-preference.ts

@@ -17,7 +17,7 @@ export const useLanguagePreference = (player: VideoPlayer, slug: string) => {
 	useEvent(player, "onAudioTrackChange", () => {
 		if (!audios?.length) return;
 		const selected =
-			audios?.[player.getAvailableTextTracks().findIndex((x) => x.selected)];
+			audios?.[player.getAvailableAudioTracks().findIndex((x) => x.selected)];
 		if (!selected) return;
 		aud.current = { idx: selected.index, lang: selected.language };
 	});

transcoder/src/chapters.go

@@ -156,6 +156,13 @@ func mergeChapters(info *MediaInfo, candidates []Chapter) []Chapter {
 				merged = true
 				break
 			}
+
+			if cand.StartTime-MergeWindowSec < chapters[i].StartTime &&
+				cand.EndTime+MergeWindowSec > chapters[i].EndTime &&
+				cand.Type == chapters[i].Type {
+				// prefer the existing match instead of splitting it into two.
+				merged = true
+			}
 		}
 
 		if !merged {