(app) add iframe page for debugging [DA-401]#327
Conversation
|
Task linked: DA-401 Add iframe player to app for debugging |
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
danmaku-anywhere-web | 9390120 | Commit Preview URL Branch Preview URL |
Mar 17 2026, 01:28 AM |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces a dedicated iframe debug page to the application, enhancing development and testing capabilities. It establishes a new route and component for this feature, along with a corresponding sidebar navigation link. Additionally, minor layout adjustments were made to ensure proper height rendering for content within the Highlights
Changelog
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request adds a new debug page for iframes, which is a helpful addition for development. The related changes to routing, layout, and the sidebar are all appropriate. I've provided one suggestion on the new IframeDebugPageComponent to improve its robustness and platform-agnosticism by safely accessing the window object. Overall, this is a good change.
| export class IframeDebugPageComponent { | ||
| private readonly domSanitizer = inject(DomSanitizer) | ||
| protected readonly iframeSrc = | ||
| this.domSanitizer.bypassSecurityTrustResourceUrl(window.location.origin) |
There was a problem hiding this comment.
Directly accessing the global window object is discouraged as it can cause issues with server-side rendering (SSR) where window is not defined. You can use globalThis along with optional chaining (?.) and nullish coalescing (??) to safely access window.location.origin only when it's available, providing an empty string as a fallback. This makes the code more robust and platform-independent.
| this.domSanitizer.bypassSecurityTrustResourceUrl(window.location.origin) | |
| this.domSanitizer.bypassSecurityTrustResourceUrl(globalThis.window?.location.origin ?? '') |
There was a problem hiding this comment.
Pull request overview
Adds a new development-only “iframe debug” page to the Angular web app and updates layout styling to better support full-height debug views.
Changes:
- Add
/debug/iframeroute (guarded bydevelopmentOnly) that lazy-loads a new iframe debug component. - Expose the new debug page in the sidebar’s Debug navigation section.
- Adjust
KazumiLayoutcontainer/host classes to occupy full height.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| app/web/src/app/layout/components/sidebar/sidebar.component.ts | Adds a new “iframe Debug” entry under the Debug sidebar section. |
| app/web/src/app/features/kazumi/layout/kazumi-layout.ts | Updates layout/host classes to be full-height. |
| app/web/src/app/features/debug/iframe-debug-page.component.ts | Introduces a new debug page component rendering an iframe. |
| app/web/src/app/app.routes.ts | Registers the new /debug/iframe development-only route. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| export class IframeDebugPageComponent { | ||
| private readonly domSanitizer = inject(DomSanitizer) | ||
| protected readonly iframeSrc = | ||
| this.domSanitizer.bypassSecurityTrustResourceUrl(window.location.origin) | ||
| } |
| <div class="size-full border-1"> | ||
| <iframe | ||
| [src]="iframeSrc" | ||
| class="size-full" |
| selector: 'da-iframe-debug-page', | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| template: ` | ||
| <div class="size-full border-1"> |
| }, | ||
| { | ||
| path: '/debug/iframe', | ||
| label: 'iframe Debug', |
| (m) => m.IframeDebugPageComponent | ||
| ), | ||
| canActivate: [developmentOnly], | ||
| title: `Debug iframe | ${PAGE_TITLE}`, |
No description provided.