Fce 2893 by Magmusacy · Pull Request #491 · fishjam-cloud/web-client-sdk

Magmusacy · 2026-03-11T13:59:23Z

Description

Configure eslint and prettier to work with mobile examples as well

Motivation and Context

Since we copied eslint and prettier config from mobile sdk it didn't work properly here and we had to change eslint version to be < 9 to easily inherit configuration from root

Documentation impact

Documentation update required
Documentation updated in another PR
No documentation update required

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to
not work as expected)

linear · 2026-03-11T13:59:27Z

FCE-2893 Fix prettier config

Copilot

Pull request overview

Updates linting/formatting setup for the mobile example apps so they can reuse the repo’s root ESLint/Prettier tooling (notably by moving examples off ESLint v9-local installs), and aligns example source files with the new formatting expectations.

Changes:

Switch mobile examples to run eslint . and use legacy .eslintrc.js configs extending the repo root.
Add a shared Prettier config for mobile examples and reference it from each example app.
Refactor/format mobile example code (imports/typing tweaks) and extract parsePeersToTracks into a shared util for fishjam-chat.

Reviewed changes

Copilot reviewed 53 out of 54 changed files in this pull request and generated 15 comments.

Show a summary per file

File	Description
yarn.lock	Updates dependency graph to support the ESLint/Expo config changes.
packages/mobile-client/src/index.ts	Export formatting cleanup.
examples/mobile-client/video-player/prettier.config.js	Adds Prettier config hook-up for the example.
examples/mobile-client/video-player/package.json	Uses `eslint .` and removes local ESLint dependency.
examples/mobile-client/video-player/eslint.config.js	Removes Expo flat-config ESLint setup.
examples/mobile-client/video-player/components/FishjamPlayerViewer.tsx	Import reordering/format changes.
examples/mobile-client/video-player/components/FishjamPlayerStreamer.tsx	Import reordering/format changes.
examples/mobile-client/video-player/App.tsx	Import reordering/format changes.
examples/mobile-client/video-player/.eslintrc.js	Adds legacy ESLint config extending root.
examples/mobile-client/text-chat/screens/home/index.tsx	Formatting/import ordering updates.
examples/mobile-client/text-chat/screens/chat/index.tsx	Formatting/import ordering/type-import updates.
examples/mobile-client/text-chat/prettier.config.js	Points example at shared Prettier config.
examples/mobile-client/text-chat/package.json	Adds `lint` script and adjusts lint deps.
examples/mobile-client/text-chat/navigation/RootNavigation.tsx	Import ordering + `import type` cleanup.
examples/mobile-client/text-chat/index.ts	Formatting updates.
examples/mobile-client/text-chat/hooks/useConnectFishjam.ts	Formatting/import ordering updates.
examples/mobile-client/text-chat/eslint.config.js	Removes Expo flat-config ESLint setup.
examples/mobile-client/text-chat/App.tsx	Formatting/import ordering updates.
examples/mobile-client/text-chat/.prettierrc	Removes per-app Prettier config file.
examples/mobile-client/text-chat/.eslintrc.js	Adds legacy ESLint config (incl. Prettier plugin).
examples/mobile-client/minimal-react-native/utils/index.ts	Type-only import + formatting updates.
examples/mobile-client/minimal-react-native/types/index.ts	Type-only import update.
examples/mobile-client/minimal-react-native/screens/room/index.tsx	Import ordering + type-only import cleanup.
examples/mobile-client/minimal-react-native/screens/home/index.tsx	Import ordering + type-only import cleanup.
examples/mobile-client/minimal-react-native/prettier.config.js	Points example at shared Prettier config.
examples/mobile-client/minimal-react-native/package.json	Adds `lint` script and adjusts lint deps.
examples/mobile-client/minimal-react-native/navigation/RootNavigation.tsx	Import ordering + `import type` cleanup.
examples/mobile-client/minimal-react-native/hooks/useConnectFishjam.ts	Import ordering + type-only import cleanup.
examples/mobile-client/minimal-react-native/eslint.config.js	Removes prior ESLint config hook.
examples/mobile-client/minimal-react-native/components/VideosGridItem.tsx	Type-only import + import ordering updates.
examples/mobile-client/minimal-react-native/App.tsx	Import ordering updates.
examples/mobile-client/minimal-react-native/.eslintrc.js	Adds legacy ESLint config (incl. resolver settings).
examples/mobile-client/fishjam-chat/utils/tracks.ts	Extracts track parsing helpers into a util module.
examples/mobile-client/fishjam-chat/prettier.config.js	Points example at shared Prettier config.
examples/mobile-client/fishjam-chat/package.json	Uses `eslint .` and adjusts lint deps.
examples/mobile-client/fishjam-chat/hooks/useMediaPermissions.ts	Import ordering/format updates.
examples/mobile-client/fishjam-chat/eslint.config.js	Removes Expo flat-config ESLint setup.
examples/mobile-client/fishjam-chat/components/index.ts	Export ordering updates.
examples/mobile-client/fishjam-chat/components/VideosGrid.tsx	Imports track util; refactors list item props.
examples/mobile-client/fishjam-chat/components/TextInput.tsx	Import ordering updates.
examples/mobile-client/fishjam-chat/components/NoCameraView.tsx	Import ordering updates.
examples/mobile-client/fishjam-chat/components/DismissKeyboard.tsx	Import ordering updates.
examples/mobile-client/fishjam-chat/components/Button.tsx	Import ordering updates.
examples/mobile-client/fishjam-chat/app/room/preview.tsx	Import ordering/format updates.
examples/mobile-client/fishjam-chat/app/room/[roomName].tsx	Formatting/quote normalization + logging tweaks.
examples/mobile-client/fishjam-chat/app/livestream/viewer.tsx	Import ordering/format updates.
examples/mobile-client/fishjam-chat/app/livestream/streamer.tsx	Import ordering/format updates.
examples/mobile-client/fishjam-chat/app/livestream/screen-sharing.tsx	Formatting/quote normalization updates.
examples/mobile-client/fishjam-chat/app/(tabs)/room.tsx	Formatting/quote normalization updates.
examples/mobile-client/fishjam-chat/app/(tabs)/livestream.tsx	Formatting/quote normalization updates.
examples/mobile-client/fishjam-chat/app/(tabs)/_layout.tsx	Import ordering updates.
examples/mobile-client/fishjam-chat/.eslintrc.js	Adds legacy ESLint config extending root.
examples/mobile-client/common/prettier.config.js	Introduces shared Prettier settings for mobile examples.
.eslintrc.js	Adds ignorePatterns for config files.

Comments suppressed due to low confidence (2)

examples/mobile-client/fishjam-chat/components/TextInput.tsx:21

This file isn’t formatted according to the local Prettier config (uses double quotes for imports/default string values where singleQuote=true is expected). Please run Prettier so the file matches the shared examples formatting and passes format:check.

import React, { useState } from "react";
import { StyleSheet, TextInput as RNTextInput, View } from "react-native";

import { AdditionalColors, BrandColors, TextColors } from "../utils/Colors";
import { TextInputTextStyle } from "./Typo";

type TextInputProps = {
  placeholder?: string;
  value?: string;
  defaultValue?: string;
  editable?: boolean;
  onChangeText?: (text: string) => void;
};

export default function TextInput({
  placeholder = "",
  value,
  defaultValue,
  editable = true,
  onChangeText = () => {},
}: TextInputProps) {

examples/mobile-client/fishjam-chat/hooks/useMediaPermissions.ts:13

This file isn’t formatted according to the Prettier config (imports use double quotes; several multiline expressions are missing trailing commas that Prettier would add). Please run Prettier on this file to avoid failing the repo’s format:check CI step.

import {
  useCameraPermissions,
  useMicrophonePermissions,
} from "@fishjam-cloud/react-native-client";
import { useCallback, useEffect, useRef, useState } from "react";
import { AppState, Linking } from "react-native";

export function useMediaPermissions() {
  const [queryCamera, requestCamera] = useCameraPermissions();
  const [queryMicrophone, requestMicrophone] = useMicrophonePermissions();
  const [permissionsGranted, setPermissionsGranted] = useState<boolean | null>(
    null
  );

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

examples/mobile-client/text-chat/hooks/useConnectFishjam.ts

examples/mobile-client/fishjam-chat/components/VideosGrid.tsx

examples/mobile-client/video-player/components/FishjamPlayerViewer.tsx

examples/mobile-client/fishjam-chat/app/livestream/viewer.tsx

examples/mobile-client/fishjam-chat/components/VideosGrid.tsx

examples/mobile-client/fishjam-chat/components/Button.tsx

examples/mobile-client/fishjam-chat/components/index.ts

examples/mobile-client/video-player/prettier.config.js

examples/mobile-client/fishjam-chat/components/NoCameraView.tsx

examples/mobile-client/fishjam-chat/components/DismissKeyboard.tsx

Copilot

Pull request overview

Copilot reviewed 81 out of 84 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

examples/mobile-client/fishjam-chat/components/VideosGrid.tsx

Copilot

Pull request overview

Copilot reviewed 76 out of 78 changed files in this pull request and generated 3 comments.

Comments suppressed due to low confidence (1)

examples/mobile-client/fishjam-chat/components/VideosGrid.tsx:34

This refactor removed the isCamera boolean (previously derived from peer.track?.metadata?.type), but the component still uses isCamera later when rendering RTCView (for the mirror prop). This will break the build with an undefined identifier. Either re-introduce isCamera here or update the later mirror usage to rely on an existing boolean (e.g., isSelfVideo) as appropriate.

  const isSelfVideo = peer.isLocal && peer.track?.metadata?.type === 'camera';
  const mediaStream =
    peer.track?.stream && !peer.track?.metadata?.paused
      ? peer.track.stream
      : null;

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-11T16:03:12Z

examples/mobile-client/video-player/babel.config.js

+      [
+        'module-resolver',
+        {
+          alias: {
+            '@': './app',
+          },
+        },


module-resolver maps @ to ./app, but this example’s tsconfig.json maps @/* to ./* (project root) and the project doesn’t have an app/ folder. This will make @/... imports resolve differently between TypeScript and Metro/Babel. Either remove the alias, or update it (and TS paths) to point to the same base directory.

Copilot · 2026-03-11T16:03:13Z

examples/mobile-client/fishjam-chat/components/VideosGrid.tsx

+import type { ListRenderItemInfo } from 'react-native';
+import { FlatList, StyleSheet, Text, View } from 'react-native';
+
+import { parsePeersToTracks } from '@/utils/tracks';


parsePeersToTracks is imported from @/utils/tracks, but this project’s babel-plugin-module-resolver maps @ to ./app (see babel.config.js). Since utils/tracks.ts lives at the project root (./utils), Metro/Babel resolution will fail at runtime even though TypeScript may compile. Align the Babel alias with tsconfig.json (e.g., point @ at the project root) or move the utils folder under app and update tsconfig accordingly.

Suggested change

import { parsePeersToTracks } from '@/utils/tracks';

import { parsePeersToTracks } from '../utils/tracks';

Copilot · 2026-03-11T16:03:13Z

examples/mobile-client/fishjam-chat/babel.config.js

+        'module-resolver',
+        {
+          alias: {
+            '@': './app',


The Babel module-resolver alias maps @ to ./app, but tsconfig.json maps @/* to ./* (project root). This mismatch means TypeScript path resolution can succeed while Metro/Babel resolution fails. Update either the Babel alias or the TS paths so they point to the same base directory.

Suggested change

'@': './app',

'@': './',

Magmusacy added 6 commits March 11, 2026 10:06

Fix prettier config for mobile-client

c736de4

Move all mobile examples to eslint 8

e3e0da2

Apply fixes outlined by eslint to minimal-react-native

7f49789

Apply fixes outlined by eslint to fishjam-chat

d27dc4c

Apply fixes outlined by eslint to text-chat

e08d358

Apply fixes outline by eslint to video-player

a91fda6

Magmusacy requested a review from Copilot March 11, 2026 13:59

Copilot started reviewing on behalf of Magmusacy March 11, 2026 14:03 View session

Copilot AI reviewed Mar 11, 2026

View reviewed changes

Magmusacy force-pushed the FCE-2893 branch from 61c6feb to 86e5c01 Compare March 11, 2026 14:56

Magmusacy requested a review from Copilot March 11, 2026 14:58

Copilot started reviewing on behalf of Magmusacy March 11, 2026 14:59 View session

Copilot AI reviewed Mar 11, 2026

View reviewed changes

examples/mobile-client/fishjam-chat/components/VideosGrid.tsx Outdated Show resolved Hide resolved

Magmusacy added 3 commits March 11, 2026 16:37

Ignore protobufs from prettier

a0d459a

Run yarn format with protobufs ignored

8441807

Add babel config for path aliases

3d405bd

Magmusacy force-pushed the FCE-2893 branch from 66b2ddc to 3d405bd Compare March 11, 2026 15:55

Merge branch 'main' into FCE-2893

c689473

Magmusacy requested a review from Copilot March 11, 2026 15:56

Copilot started reviewing on behalf of Magmusacy March 11, 2026 15:56 View session

Copilot AI reviewed Mar 11, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fce 2893#491

Fce 2893#491
Magmusacy wants to merge 10 commits intomainfrom
FCE-2893

Magmusacy commented Mar 11, 2026

Uh oh!

linear bot commented Mar 11, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 11, 2026

Uh oh!

Copilot AI Mar 11, 2026

Uh oh!

Copilot AI Mar 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	import { parsePeersToTracks } from '@/utils/tracks';
	import { parsePeersToTracks } from '../utils/tracks';

Conversation

Magmusacy commented Mar 11, 2026

Description

Motivation and Context

Documentation impact

Types of changes

Uh oh!

linear bot commented Mar 11, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants