feat: add Flappy Bird game feature #22297
Conversation
|
@Devanshusharma2005 is attempting to deploy a commit to the cal Team on Vercel. A member of the Team first needs to authorize it. |
Graphite Automations"Add consumer team as reviewer" took an action on this PR • (07/07/25)1 reviewer was added to this PR based on Keith Williams's automation. "Add community label" took an action on this PR • (07/07/25)1 label was added to this PR based on Keith Williams's automation. |
There was a problem hiding this comment.
cubic found 4 issues across 12 files. Review them in cubic.dev
React with 👍 or 👎 to teach cubic. Tag @cubic-dev-ai to give specific feedback.
…anshusharma2005/cal into feat/flappy-bird-integration
There was a problem hiding this comment.
cubic found 2 issues across 12 files. Review them in cubic.dev
React with 👍 or 👎 to teach cubic. Tag @cubic-dev-ai to give specific feedback.
There was a problem hiding this comment.
cubic found 1 issue across 16 files. Review it in cubic.dev
React with 👍 or 👎 to teach cubic. Tag @cubic-dev-ai to give specific feedback.
WalkthroughThis change introduces a new optional boolean property, Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
packages/trpc/server/routers/viewer/eventTypes/update.handler.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-playwright". (The package "eslint-plugin-playwright" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-playwright" was referenced from the config file in ".eslintrc.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
…anshusharma2005/cal into feat/flappy-bird-integration
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (1)
packages/lib/server/repository/calVideoSettings.ts (1)
18-26: Inconsistency: createCalVideoSettings method missing enableFlappyBirdGame field.The
createCalVideoSettingsmethod doesn't include the newenableFlappyBirdGamefield in its input type, whilecreateOrUpdateCalVideoSettingsdoes. This inconsistency could lead to bugs if both methods are used interchangeably.Add the missing field to maintain consistency:
calVideoSettings: { disableRecordingForGuests?: boolean | null; disableRecordingForOrganizer?: boolean | null; enableAutomaticTranscription?: boolean | null; enableAutomaticRecordingForOrganizer?: boolean | null; disableTranscriptionForGuests?: boolean | null; disableTranscriptionForOrganizer?: boolean | null; redirectUrlOnExit?: string | null; + enableFlappyBirdGame?: boolean | null; };And update the create data:
return await prisma.calVideoSettings.create({ data: { disableRecordingForGuests: calVideoSettings.disableRecordingForGuests ?? false, disableRecordingForOrganizer: calVideoSettings.disableRecordingForOrganizer ?? false, enableAutomaticTranscription: calVideoSettings.enableAutomaticTranscription ?? false, enableAutomaticRecordingForOrganizer: calVideoSettings.enableAutomaticRecordingForOrganizer ?? false, disableTranscriptionForGuests: calVideoSettings.disableTranscriptionForGuests ?? false, disableTranscriptionForOrganizer: calVideoSettings.disableTranscriptionForOrganizer ?? false, redirectUrlOnExit: calVideoSettings.redirectUrlOnExit ?? null, + enableFlappyBirdGame: calVideoSettings.enableFlappyBirdGame ?? false, eventTypeId, }, });
♻️ Duplicate comments (2)
packages/features/games/FlappyBirdGame.tsx (2)
25-25: Hard-coded error message bypasses i18n system.The error message should use the translation system for consistency with the rest of the UI.
Use the translation key:
- showToast(t("game_load_error"), "error"); + showToast(t("game_load_error"), "error");And for the error display:
- <p className="text-center text-white">{t("game_load_error")}</p> + <p className="text-center text-white">{t("game_load_error")}</p>Note: The translation key
game_load_errorshould be added to the localization files.Also applies to: 74-74
11-11: Consider lazy loading for performance optimization.The component is eagerly imported, which means all video page visitors download the game code even when disabled, increasing bundle size.
Consider using dynamic import:
-import { FlappyBirdGame } from "@calcom/features/games/FlappyBirdGame"; +const FlappyBirdGame = React.lazy(() => import("@calcom/features/games/FlappyBirdGame").then(m => ({ default: m.FlappyBirdGame })));And wrap the usage with Suspense:
{meetingState === "joined-meeting" && showFlappyBird && ( + <React.Suspense fallback={<div>Loading game...</div>}> <FlappyBirdGame onClose={() => setShowFlappyBird(false)} /> + </React.Suspense> )}
🧹 Nitpick comments (3)
packages/trpc/server/routers/viewer/eventTypes/update.handler.ts (1)
603-614: Missing runtime validation for the new flag on paid plans.The repository call blindly forwards
calVideoSettings—includingenableFlappyBirdGame—when the user has a Team plan.
If this flag should be restricted (e.g., EE-only, beta feature), add an explicit gate here; otherwise remove this note.- await CalVideoSettingsRepository.createOrUpdateCalVideoSettings({ - eventTypeId: id, - calVideoSettings, - }); + // Only allow the game toggle for orgs with the "fun-games" feature flag + if (calVideoSettings.enableFlappyBirdGame && !featureFlags.has("fun-games")) { + throw new TRPCError({ code: "FORBIDDEN" }); + } + await CalVideoSettingsRepository.createOrUpdateCalVideoSettings({ + eventTypeId: id, + calVideoSettings, + });packages/prisma/schema.prisma (1)
71-84: Ensure index coverage if the flag will be queried frequently.If the waiting-room UI filters by
enableFlappyBirdGame, consider a partial index for faster look-ups:CREATE INDEX CONCURRENTLY IF NOT EXISTS calvideosettings_flappy_enabled_idx ON "CalVideoSettings" ("enableFlappyBirdGame") WHERE enableFlappyBirdGame = true;apps/web/public/static/locales/en/common.json (1)
3374-3379: Clarify & contextualize the error string
"game_load_error"is very generic. Consider something like"flappy_bird_game_load_error": "Failed to load Flappy Bird game"so:
- The key is namespaced with the feature, preventing collisions with future, unrelated game/error strings.
- The value tells the user which game failed to load.
-"game_load_error": "Failed to load the game", +"flappy_bird_game_load_error": "Failed to load Flappy Bird game",
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
apps/web/lib/video/[uid]/getServerSideProps.ts(1 hunks)apps/web/modules/videos/views/videos-single-view.tsx(4 hunks)apps/web/public/static/locales/en/common.json(1 hunks)packages/features/eventtypes/components/Locations.tsx(1 hunks)packages/features/eventtypes/lib/types.ts(1 hunks)packages/features/games/FlappyBirdGame.tsx(1 hunks)packages/lib/server/repository/booking.ts(1 hunks)packages/lib/server/repository/calVideoSettings.ts(4 hunks)packages/lib/server/repository/eventType.ts(1 hunks)packages/platform/atoms/event-types/hooks/useEventTypeForm.ts(1 hunks)packages/platform/types/event-types/event-types_2024_06_14/inputs/create-event-type.input.ts(1 hunks)packages/prisma/migrations/20250523155739_add_flappy_bird_game/migration.sql(1 hunks)packages/prisma/schema.prisma(1 hunks)packages/prisma/zod/custom/eventtype.ts(1 hunks)packages/trpc/server/routers/viewer/eventTypes/types.ts(1 hunks)packages/trpc/server/routers/viewer/eventTypes/update.handler.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (6)
packages/prisma/migrations/20250523155739_add_flappy_bird_game/migration.sql (1)
Learnt from: vijayraghav-io
PR: calcom/cal.com#16579
File: packages/prisma/schema.prisma:149-153
Timestamp: 2025-07-16T07:14:49.225Z
Learning: In Cal.com's schema design, the team prefers to keep Boolean fields nullable (Boolean?) with defaults rather than making them non-nullable (Boolean) to avoid expensive database migrations that would update existing rows.
packages/prisma/schema.prisma (1)
Learnt from: vijayraghav-io
PR: calcom/cal.com#16579
File: packages/prisma/schema.prisma:149-153
Timestamp: 2025-07-16T07:14:49.225Z
Learning: In Cal.com's schema design, the team prefers to keep Boolean fields nullable (Boolean?) with defaults rather than making them non-nullable (Boolean) to avoid expensive database migrations that would update existing rows.
packages/features/eventtypes/components/Locations.tsx (1)
Learnt from: alishaz-polymath
PR: calcom/cal.com#22304
File: packages/features/eventtypes/components/MultiplePrivateLinksController.tsx:92-94
Timestamp: 2025-07-16T06:42:27.001Z
Learning: In the MultiplePrivateLinksController component (packages/features/eventtypes/components/MultiplePrivateLinksController.tsx), the `currentLink.maxUsageCount ?? 1` fallback in the openSettingsDialog function is intentional. Missing maxUsageCount values indicate old/legacy private links that existed before the expiration feature was added, and they should default to single-use behavior (1) for backward compatibility.
packages/prisma/zod/custom/eventtype.ts (1)
Learnt from: vijayraghav-io
PR: calcom/cal.com#16579
File: packages/prisma/schema.prisma:149-153
Timestamp: 2025-07-16T07:14:49.225Z
Learning: In Cal.com's schema design, the team prefers to keep Boolean fields nullable (Boolean?) with defaults rather than making them non-nullable (Boolean) to avoid expensive database migrations that would update existing rows.
apps/web/public/static/locales/en/common.json (1)
undefined
<retrieved_learning>
Learnt from: bandhan-majumder
PR: #22359
File: packages/lib/server/locales/en/common.json:1336-1339
Timestamp: 2025-07-14T16:31:45.201Z
Learning: When making localization changes for new features, it's often safer to add new strings rather than modify existing ones to avoid breaking existing functionality that depends on the original strings. This approach allows for feature-specific customization while maintaining backward compatibility.
</retrieved_learning>
packages/platform/types/event-types/event-types_2024_06_14/inputs/create-event-type.input.ts (1)
Learnt from: hariombalhara
PR: calcom/cal.com#22547
File: packages/embeds/embed-core/src/lib/eventHandlers/scrollByDistanceEventHandler.ts:11-14
Timestamp: 2025-07-16T11:46:28.738Z
Learning: In Cal.com's embed system, internal events like "__scrollByDistance" are fired by Cal.com's own code, so runtime validation of event data structure is unnecessary since TypeScript type system guarantees type safety for internal events.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Install dependencies / Yarn install & cache
- GitHub Check: Security Check
🔇 Additional comments (26)
packages/trpc/server/routers/viewer/eventTypes/update.handler.ts (1)
129-140: LGTM – field added to the selection set.The new
enableFlappyBirdGameflag is now loaded together with the other Cal Video flags; no functional issues spotted here.apps/web/lib/video/[uid]/getServerSideProps.ts (1)
29-31: LGTM! Clean type extension for Flappy Bird game feature.The addition of
enableFlappyBirdGameboolean property to theCalVideoSettingstype is well-structured and aligns with the PR's goal of introducing the Flappy Bird game feature to the video waiting room.packages/features/eventtypes/lib/types.ts (1)
166-166: LGTM! Consistent type extension for form values.The addition of the optional
enableFlappyBirdGameproperty to thecalVideoSettingsobject follows the established pattern of other video settings and maintains backward compatibility.packages/trpc/server/routers/viewer/eventTypes/types.ts (1)
37-37: LGTM! Proper schema validation for the new game feature.The
enableFlappyBirdGamefield is correctly defined withz.boolean().optional().nullable(), which provides the necessary flexibility for handling the field in different states (present, undefined, or null) and is consistent with other video settings in the schema.packages/platform/atoms/event-types/hooks/useEventTypeForm.ts (1)
183-183: LGTM! Consistent form validation schema extension.The addition of
enableFlappyBirdGame: z.boolean().nullable()to thecalVideoSettingsschema is appropriate for form validation and follows the same pattern as other video settings fields.apps/web/public/static/locales/en/common.json (1)
3374-3379: Remember the other locale filesGood job adding English strings right above the sentinel comment.
Don’t forget to add equivalent keys to every supported locale (de,es, etc.) so runtimet()look-ups don’t fall back to the keys themselves.packages/lib/server/repository/eventType.ts (1)
663-674: LGTM! Properly integrated the new video setting field.The addition of
enableFlappyBirdGame: trueto thecalVideoSettingsselection is consistent with the existing pattern and correctly placed within the video settings group.packages/features/eventtypes/components/Locations.tsx (1)
399-413: LGTM! Well-implemented settings toggle.The implementation follows the established pattern for video settings toggles, properly handles optional chaining for the default value, and uses localized strings appropriately.
packages/lib/server/repository/booking.ts (1)
405-405: LGTM! Correctly added the new field to booking data selection.The addition of
enableFlappyBirdGame: trueto thecalVideoSettingsselect object ensures the feature flag is available when fetching booking data for meeting pages.packages/prisma/zod/custom/eventtype.ts (1)
10-19: LGTM! Schema updates are well-structured.The migration from
.optional().nullable()to.nullish()improves code readability while maintaining the same functionality. The newenableFlappyBirdGamefield is correctly typed asz.boolean().nullish(), consistent with other boolean video settings.packages/platform/types/event-types/event-types_2024_06_14/inputs/create-event-type.input.ts (1)
149-161: LGTM! Properly implemented API type definitions.The new properties
enableFlappyBirdGameandenableAutomaticTranscriptionare correctly implemented with appropriate validation decorators and clear API documentation. The implementation follows the established patterns for optional boolean properties in the CalVideoSettings class.packages/lib/server/repository/calVideoSettings.ts (3)
7-9: Good addition of explicit select clause.The addition of an explicit select clause in the delete operation improves security by preventing unnecessary data exposure.
55-55: Consistent implementation of enableFlappyBirdGame field.The new field is properly handled in both update and create branches with appropriate fallback to
false.Also applies to: 68-68, 79-79
82-93: Good addition of explicit select clause addressing past review comment.The explicit select clause improves security by preventing unnecessary data exposure and addresses the previous review concern about missing select clause.
packages/features/games/FlappyBirdGame.tsx (5)
8-10: Clean and focused component interface.The component has a simple, well-defined interface with a single callback prop.
19-34: Good timeout-based error detection mechanism.The component uses a timeout to detect loading failures since iframe onError is unreliable. The cleanup logic properly handles the timeout reference.
43-57: Effective iframe reload mechanism.The retry mechanism properly reloads the iframe by clearing and resetting the src attribute with a small delay.
84-84: Title attribute uses proper localization.The title attribute correctly uses the translation system for accessibility.
86-87: Appropriate iframe security restrictions.The iframe includes proper sandbox restrictions and allow policies that balance security with functionality.
apps/web/modules/videos/views/videos-single-view.tsx (7)
5-5: Good addition of DailyMeetingState type import.The type import enables proper typing for the meeting state variable.
47-48: Proper state management for game visibility.The component correctly manages both meeting state and game visibility with separate state variables.
107-107: Proper Daily call setup and join sequence.The call frame is properly set and joined after event listeners are attached, addressing the previous review comment about missing join() call.
Also applies to: 127-127
109-126: Well-implemented meeting state tracking.The event listeners properly track meeting state changes and manage game visibility based on meeting events and participant activity.
129-133: Proper cleanup in useEffect.The cleanup function properly destroys the call frame to prevent memory leaks.
137-146: Complete dependency array for useEffect.The dependency array includes all relevant props that affect call setup and game enablement.
160-162: Proper conditional rendering of FlappyBirdGame.The game is correctly rendered only when the user has joined the meeting and the game is enabled, with proper close handler.
packages/prisma/migrations/20250523155739_add_flappy_bird_game/migration.sql
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/api/v2/swagger/documentation.json(1 hunks)packages/platform/types/event-types/event-types_2024_06_14/inputs/create-event-type.input.ts(1 hunks)packages/trpc/server/routers/viewer/eventTypes/create.handler.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/platform/types/event-types/event-types_2024_06_14/inputs/create-event-type.input.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Install dependencies / Yarn install & cache
- GitHub Check: Security Check
|
This PR is being marked as stale due to inactivity. |
What does this PR do?
Added flappy bird game feature to cal video.
Added a new enableFlappyBirdGame field to the CalVideoSettings schema and model
Created a database migration for the new field
Added the toggle to enable/disable the game in the event type setup page
Created a new FlappyBirdGame component with minimize and close functionality
Integrated the game into the video waiting room component
Added translations for the new feature
Added automatic hiding of the game when participants join the meeting
Visual Demo (For contributors especially)
A visual demonstration is strongly recommended, for both the original and new change (video / image - any one).
Video Demo (if applicable):
Image Demo (if applicable):
Mandatory Tasks (DO NOT REMOVE)
How should this be tested?
Checklist
Summary by cubic
Added a Flappy Bird game to the video waiting room, with an option to enable or disable it in event settings.