feat: refactoring hang-ui folder #841
Conversation
WalkthroughThe PR reorganizes js/hang-ui into componentized subdirectories and adds a "Project Structure" section to the README. Package exports and Vite library entries were updated to point to new index entry points for publish, watch, and stats. Internal import paths across publish, watch, and shared components, CSS imports, tests, and hook/context locations were adjusted to match the new layout; no runtime logic changes were made. 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used🪛 markdownlint-cli2 (0.18.1)js/hang-ui/README.md74-74: Hard tabs (MD010, no-hard-tabs) 75-75: Hard tabs (MD010, no-hard-tabs) 76-76: Hard tabs (MD010, no-hard-tabs) ⏰ 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). (1)
✏️ Tip: You can disable this entire section by setting Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In @js/hang-ui/README.md:
- Around line 40-48: The snippet for <hang-publish-ui> uses hard tabs for
indentation while the earlier <hang-watch-ui> example uses spaces; update the
snippet so all indentation is spaces (matching the style used in
<hang-watch-ui>), replacing each leading tab with the repository's configured
number of spaces (e.g., 2 or 4) so the entire block (<hang-publish-ui>,
<hang-publish>, and <video> lines) uses consistent space indentation.
- Around line 58-66: Update the README text to remove the React reference and
use Solid-specific wording: find and replace the string "Custom React/Solid
hooks" with "Custom Solid hooks" in the README entries under the publish and
watch sections (look for the lines describing the hooks directories and the
exact phrase "Custom React/Solid hooks" to update).
- Around line 54-87: The fenced ASCII tree in README.md is missing a language
specifier; update the opening fence from ``` to ```text (or ```plaintext) for
the directory tree block so the ASCII directory structure renders correctly;
locate the block starting with the src/ tree (the triple-backtick fenced code
block) and change its opening fence to include the specifier.
🧹 Nitpick comments (1)
js/hang-ui/src/publish/index.tsx (1)
5-5: Consider removing the explicit.tsxextension for consistency.Other imports in this PR don't include file extensions (e.g.,
"./context","../hooks/use-watch-ui"). For consistency, consider using"./element"instead.Suggested change
-import { PublishUI } from "./element.tsx"; +import { PublishUI } from "./element";
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (20)
js/hang-ui/src/shared/components/icon/arrow-down.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/arrow-up.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/audio.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/ban.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/buffer.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/camera.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/file.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/fullscreen-enter.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/fullscreen-exit.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/microphone.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/mute.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/network.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/pause.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/play.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/screen.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/stats.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/video.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/volume-high.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/volume-low.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/volume-medium.svgis excluded by!**/*.svg
📒 Files selected for processing (59)
js/hang-ui/README.mdjs/hang-ui/package.jsonjs/hang-ui/src/publish/components/CameraSourceButton.tsxjs/hang-ui/src/publish/components/FileSourceButton.tsxjs/hang-ui/src/publish/components/MediaSourceSelector.tsxjs/hang-ui/src/publish/components/MicrophoneSourceButton.tsxjs/hang-ui/src/publish/components/NothingSourceButton.tsxjs/hang-ui/src/publish/components/PublishControls.tsxjs/hang-ui/src/publish/components/PublishStatusIndicator.tsxjs/hang-ui/src/publish/components/ScreenSourceButton.tsxjs/hang-ui/src/publish/context.tsxjs/hang-ui/src/publish/element.tsxjs/hang-ui/src/publish/hooks/use-publish-ui.tsjs/hang-ui/src/publish/index.tsxjs/hang-ui/src/publish/styles/index.cssjs/hang-ui/src/shared/components/button/button.cssjs/hang-ui/src/shared/components/button/button.tsxjs/hang-ui/src/shared/components/icon/icon.tsxjs/hang-ui/src/shared/flex.cssjs/hang-ui/src/shared/variables.cssjs/hang-ui/src/stats.tsxjs/hang-ui/src/stats/README.mdjs/hang-ui/src/stats/__tests__/Stats.test.tsxjs/hang-ui/src/stats/__tests__/components/StatsItem.test.tsxjs/hang-ui/src/stats/__tests__/components/StatsPanel.test.tsxjs/hang-ui/src/stats/__tests__/providers/audio.test.tsjs/hang-ui/src/stats/__tests__/providers/base.test.tsjs/hang-ui/src/stats/__tests__/providers/buffer.test.tsjs/hang-ui/src/stats/__tests__/providers/network.test.tsjs/hang-ui/src/stats/__tests__/providers/registry.test.tsjs/hang-ui/src/stats/__tests__/providers/video.test.tsjs/hang-ui/src/stats/__tests__/utils.tsjs/hang-ui/src/stats/components/StatsItem.tsxjs/hang-ui/src/stats/components/StatsPanel.tsxjs/hang-ui/src/stats/index.tsxjs/hang-ui/src/stats/providers/audio.tsjs/hang-ui/src/stats/providers/base.tsjs/hang-ui/src/stats/providers/buffer.tsjs/hang-ui/src/stats/providers/index.tsjs/hang-ui/src/stats/providers/network.tsjs/hang-ui/src/stats/providers/registry.tsjs/hang-ui/src/stats/providers/video.tsjs/hang-ui/src/stats/styles/index.cssjs/hang-ui/src/stats/types.tsjs/hang-ui/src/watch/components/BufferingIndicator.tsxjs/hang-ui/src/watch/components/FullscreenButton.tsxjs/hang-ui/src/watch/components/LatencySlider.tsxjs/hang-ui/src/watch/components/PlayPauseButton.tsxjs/hang-ui/src/watch/components/QualitySelector.tsxjs/hang-ui/src/watch/components/StatsButton.tsxjs/hang-ui/src/watch/components/VolumeSlider.tsxjs/hang-ui/src/watch/components/WatchControls.tsxjs/hang-ui/src/watch/components/WatchStatusIndicator.tsxjs/hang-ui/src/watch/context.tsxjs/hang-ui/src/watch/element.tsxjs/hang-ui/src/watch/hooks/use-watch-ui.tsjs/hang-ui/src/watch/index.tsxjs/hang-ui/src/watch/styles/index.cssjs/hang-ui/vite.config.ts
💤 Files with no reviewable changes (1)
- js/hang-ui/src/stats.tsx
🧰 Additional context used
📓 Path-based instructions (1)
js/**/*.{ts,tsx,js,jsx,json}
📄 CodeRabbit inference engine (CLAUDE.md)
Use
bunfor all TypeScript/JavaScript package management and script execution (not npm, yarn, or pnpm)
Files:
js/hang-ui/src/stats/components/StatsPanel.tsxjs/hang-ui/src/publish/hooks/use-publish-ui.tsjs/hang-ui/src/watch/components/QualitySelector.tsxjs/hang-ui/src/publish/components/MicrophoneSourceButton.tsxjs/hang-ui/src/watch/components/PlayPauseButton.tsxjs/hang-ui/src/watch/components/LatencySlider.tsxjs/hang-ui/src/publish/components/ScreenSourceButton.tsxjs/hang-ui/src/publish/components/PublishStatusIndicator.tsxjs/hang-ui/src/watch/element.tsxjs/hang-ui/package.jsonjs/hang-ui/src/publish/components/MediaSourceSelector.tsxjs/hang-ui/src/watch/hooks/use-watch-ui.tsjs/hang-ui/src/watch/index.tsxjs/hang-ui/src/publish/components/CameraSourceButton.tsxjs/hang-ui/src/stats/__tests__/components/StatsItem.test.tsxjs/hang-ui/src/watch/components/VolumeSlider.tsxjs/hang-ui/src/publish/components/FileSourceButton.tsxjs/hang-ui/src/watch/components/WatchStatusIndicator.tsxjs/hang-ui/src/publish/element.tsxjs/hang-ui/src/watch/components/FullscreenButton.tsxjs/hang-ui/src/watch/components/BufferingIndicator.tsxjs/hang-ui/src/watch/components/StatsButton.tsxjs/hang-ui/src/publish/index.tsxjs/hang-ui/src/publish/components/NothingSourceButton.tsxjs/hang-ui/vite.config.ts
🧠 Learnings (1)
📚 Learning: 2026-01-11T03:47:52.766Z
Learnt from: CR
Repo: moq-dev/moq PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-11T03:47:52.766Z
Learning: Applies to js/**/*.{ts,tsx,js,jsx,json} : Use `bun` for all TypeScript/JavaScript package management and script execution (not npm, yarn, or pnpm)
Applied to files:
js/hang-ui/package.jsonjs/hang-ui/vite.config.ts
🪛 markdownlint-cli2 (0.18.1)
js/hang-ui/README.md
41-41: Hard tabs
Column: 1
(MD010, no-hard-tabs)
42-42: Hard tabs
Column: 1
(MD010, no-hard-tabs)
43-43: Hard tabs
Column: 1
(MD010, no-hard-tabs)
44-44: Hard tabs
Column: 1
(MD010, no-hard-tabs)
45-45: Hard tabs
Column: 1
(MD010, no-hard-tabs)
46-46: Hard tabs
Column: 1
(MD010, no-hard-tabs)
47-47: Hard tabs
Column: 1
(MD010, no-hard-tabs)
54-54: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
⏰ 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). (1)
- GitHub Check: Check
🔇 Additional comments (26)
js/hang-ui/src/watch/components/WatchStatusIndicator.tsx (1)
1-20: LGTM!The import path update correctly reflects the new modular structure. The path
../hooks/use-watch-uiproperly resolves fromwatch/components/towatch/hooks/use-watch-ui.ts.js/hang-ui/src/watch/hooks/use-watch-ui.ts (1)
1-12: LGTM!The import path update to
../contextcorrectly points to the consolidated context module. The hook implementation properly validates context availability with a descriptive error message.js/hang-ui/src/watch/components/LatencySlider.tsx (1)
1-33: LGTM!The import path update is consistent with other watch components using the same
../hooks/use-watch-uipattern.js/hang-ui/src/watch/components/VolumeSlider.tsx (1)
1-42: LGTM!All import path updates are correct:
- Shared components (Button, Icon) now use the deeper
../../shared/components/...structure- Hook import is consistent with other watch components
js/hang-ui/src/stats/components/StatsPanel.tsx (1)
1-53: LGTM!The Icon import path update to
../../shared/components/icon/iconis consistent with the same pattern used in watch components (e.g., VolumeSlider.tsx), maintaining uniformity across the codebase.js/hang-ui/src/stats/__tests__/components/StatsItem.test.tsx (1)
4-4: LGTM!The import path update correctly reflects the new modular structure where the Icon component has been moved to
shared/components/icon/icon.js/hang-ui/src/watch/components/FullscreenButton.tsx (1)
2-4: LGTM!The import path updates correctly reflect the new modular structure:
- Button and Icon components moved under
shared/components/- Hook relocated to
watch/hooks/js/hang-ui/src/watch/components/BufferingIndicator.tsx (1)
2-2: LGTM!The import path correctly points to the new hook location under
watch/hooks/.js/hang-ui/src/publish/styles/index.css (1)
1-3: LGTM!The CSS import paths correctly reflect the reorganized structure:
- Shared CSS files remain at
shared/level- Button CSS moved to componentized location under
shared/components/button/js/hang-ui/src/watch/index.tsx (1)
4-4: LGTM!The import path update correctly reflects the flattened module structure, moving the main UI component to
element.tsxat the module root level.js/hang-ui/src/publish/hooks/use-publish-ui.ts (1)
1-12: LGTM!The import path update correctly references the new
../contextlocation from the hooks directory. The hook implementation remains unchanged and follows best practices with proper null-check error handling.js/hang-ui/src/publish/components/PublishStatusIndicator.tsx (1)
1-20: LGTM!The import path update correctly references
../hooks/use-publish-uifrom the components directory. The component logic is clean and unchanged.js/hang-ui/src/publish/components/MicrophoneSourceButton.tsx (1)
1-44: LGTM!The import path updates are consistent with the new folder structure:
- Button and Icon components correctly reference the shared components directory
- The hook import follows the same pattern as other publish components
Component logic remains unchanged.
js/hang-ui/src/publish/components/NothingSourceButton.tsx (1)
1-24: LGTM!Import paths are consistent with the pattern established in other publish components. The component logic is unchanged and straightforward.
js/hang-ui/src/watch/components/StatsButton.tsx (1)
1-20: LGTM!Import paths follow the same consistent pattern used in the publish module:
- Shared components referenced via
../../shared/components/- Module-specific hooks referenced via
../hooks/The component logic is clean and unchanged.
js/hang-ui/src/watch/components/QualitySelector.tsx (1)
1-5: LGTM!The import path update correctly reflects the new directory structure. The relative path
../hooks/use-watch-uiproperly navigates from thecomponents/directory to thehooks/directory.js/hang-ui/src/watch/components/PlayPauseButton.tsx (1)
1-4: LGTM!Import paths are correctly updated to reflect the new directory structure:
- Shared components properly referenced via
../../shared/components/- Hook correctly referenced via
../hooks/js/hang-ui/src/publish/element.tsx (1)
1-4: LGTM!Import paths correctly updated to the new modular structure with
components/,context/, andstyles/subdirectories.js/hang-ui/src/watch/element.tsx (1)
1-9: LGTM!Import paths correctly updated to the new modular structure. The organization into
components/,context/, andstyles/subdirectories is consistent with thepublish/module refactoring.js/hang-ui/src/publish/components/CameraSourceButton.tsx (1)
1-5: LGTM!The updated import paths correctly reflect the new folder structure:
- Shared components accessed via
../../shared/components/- Hook accessed via
../hooks/- Co-located
MediaSourceSelectorcorrectly kept as relative./js/hang-ui/src/watch/styles/index.css (1)
1-4: LGTM!The CSS import paths are correctly adjusted for the new folder structure. Path calculations are accurate:
../../shared/for shared CSS files../../shared/components/button/for component-specific styles../../stats/styles/for cross-module style importsjs/hang-ui/src/publish/components/FileSourceButton.tsx (1)
1-4: LGTM!Import paths are consistent with the pattern established in
CameraSourceButton.tsxand align with the folder restructuring.js/hang-ui/src/publish/components/MediaSourceSelector.tsx (1)
1-3: LGTM!Import paths for
ButtonandIconare consistent with the other publish components.js/hang-ui/src/publish/components/ScreenSourceButton.tsx (1)
1-3: LGTM!Import paths follow the consistent pattern established across all publish components in this PR. The folder restructuring maintains uniform import conventions.
js/hang-ui/package.json (1)
8-17: LGTM! Exports and sideEffects paths are consistent.The export mappings and sideEffects entries are correctly updated to point to the new
index.tsxentry points within each module directory. The structure is consistent across all three modules (publish, watch, stats).js/hang-ui/vite.config.ts (1)
9-13: LGTM! Entry points align with package.json exports.The library entry points correctly resolve to the new
index.tsxfiles within each module directory, maintaining consistency with theexportsfield inpackage.json.
jdreetz
left a comment
jdreetz
left a comment
There was a problem hiding this comment.
Looks great! One question: why is Stats outside of the Watch UI?
js/hang-ui/README.md
Outdated
| - **BufferingIndicator**: Visual feedback during buffering | ||
| - **StatsButton**: Toggle statistics panel | ||
|
|
||
| #### **stats/** |
There was a problem hiding this comment.
Stats is only used by the Watch UI, right? Why isn't it a component of watch?
There was a problem hiding this comment.
Hey @jdreetz! Thank you for your feedback! The Stats component is currently used only by the Watch UI. I was thinking we could also use it for real-time stats in the Publish UI later. Do you think it makes sense to move it to the shared folder? If not, no worries, I can just keep it under the Watch UI. Let me know. Thanks!
There was a problem hiding this comment.
If you think we'd use it elsewhere, then yea, I'd move it to shared components.
pzanella
force-pushed
the
feat/refactoring-hang-ui
branch
from
985f7eb to
0566ea4
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@js/hang-ui/README.md`:
- Around line 72-79: Fix the malformed tree entry for the stats folder: replace
the hard tab with spaces, remove the stray pipe character, and align the
indentation and tree characters to match the other entries (use two spaces
before └── and one space after it) so the line reads consistently like "└──
stats/ # Statistics and monitoring components"; update the "components"
subtree entry that contains "button", "icon", and "stats" to use the same
spacing pattern and no tabs.
In
`@js/hang-ui/src/shared/components/stats/__tests__/components/StatsItem.test.tsx`:
- Line 4: The import in StatsItem.test.tsx incorrectly points to
"../../../shared/components/icon/icon" causing a doubled path; update the import
to the correct relative module used by sibling files — replace that import with
"../../icon/icon" (i.e., import * as Icon from "../../icon/icon") so the test
resolves the existing icon module.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (20)
js/hang-ui/src/shared/components/icon/arrow-down.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/arrow-up.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/audio.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/ban.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/buffer.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/camera.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/file.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/fullscreen-enter.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/fullscreen-exit.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/microphone.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/mute.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/network.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/pause.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/play.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/screen.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/stats.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/video.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/volume-high.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/volume-low.svgis excluded by!**/*.svgjs/hang-ui/src/shared/components/icon/volume-medium.svgis excluded by!**/*.svg
📒 Files selected for processing (59)
js/hang-ui/README.mdjs/hang-ui/package.jsonjs/hang-ui/src/publish/components/CameraSourceButton.tsxjs/hang-ui/src/publish/components/FileSourceButton.tsxjs/hang-ui/src/publish/components/MediaSourceSelector.tsxjs/hang-ui/src/publish/components/MicrophoneSourceButton.tsxjs/hang-ui/src/publish/components/NothingSourceButton.tsxjs/hang-ui/src/publish/components/PublishControls.tsxjs/hang-ui/src/publish/components/PublishStatusIndicator.tsxjs/hang-ui/src/publish/components/ScreenSourceButton.tsxjs/hang-ui/src/publish/context.tsxjs/hang-ui/src/publish/element.tsxjs/hang-ui/src/publish/hooks/use-publish-ui.tsjs/hang-ui/src/publish/index.tsxjs/hang-ui/src/publish/styles/index.cssjs/hang-ui/src/shared/components/button/button.cssjs/hang-ui/src/shared/components/button/button.tsxjs/hang-ui/src/shared/components/icon/icon.tsxjs/hang-ui/src/shared/components/stats/README.mdjs/hang-ui/src/shared/components/stats/__tests__/Stats.test.tsxjs/hang-ui/src/shared/components/stats/__tests__/components/StatsItem.test.tsxjs/hang-ui/src/shared/components/stats/__tests__/components/StatsPanel.test.tsxjs/hang-ui/src/shared/components/stats/__tests__/providers/audio.test.tsjs/hang-ui/src/shared/components/stats/__tests__/providers/base.test.tsjs/hang-ui/src/shared/components/stats/__tests__/providers/buffer.test.tsjs/hang-ui/src/shared/components/stats/__tests__/providers/network.test.tsjs/hang-ui/src/shared/components/stats/__tests__/providers/registry.test.tsjs/hang-ui/src/shared/components/stats/__tests__/providers/video.test.tsjs/hang-ui/src/shared/components/stats/__tests__/utils.tsjs/hang-ui/src/shared/components/stats/components/StatsItem.tsxjs/hang-ui/src/shared/components/stats/components/StatsPanel.tsxjs/hang-ui/src/shared/components/stats/index.tsxjs/hang-ui/src/shared/components/stats/providers/audio.tsjs/hang-ui/src/shared/components/stats/providers/base.tsjs/hang-ui/src/shared/components/stats/providers/buffer.tsjs/hang-ui/src/shared/components/stats/providers/index.tsjs/hang-ui/src/shared/components/stats/providers/network.tsjs/hang-ui/src/shared/components/stats/providers/registry.tsjs/hang-ui/src/shared/components/stats/providers/video.tsjs/hang-ui/src/shared/components/stats/styles/index.cssjs/hang-ui/src/shared/components/stats/types.tsjs/hang-ui/src/shared/flex.cssjs/hang-ui/src/shared/variables.cssjs/hang-ui/src/stats.tsxjs/hang-ui/src/watch/components/BufferingIndicator.tsxjs/hang-ui/src/watch/components/FullscreenButton.tsxjs/hang-ui/src/watch/components/LatencySlider.tsxjs/hang-ui/src/watch/components/PlayPauseButton.tsxjs/hang-ui/src/watch/components/QualitySelector.tsxjs/hang-ui/src/watch/components/StatsButton.tsxjs/hang-ui/src/watch/components/VolumeSlider.tsxjs/hang-ui/src/watch/components/WatchControls.tsxjs/hang-ui/src/watch/components/WatchStatusIndicator.tsxjs/hang-ui/src/watch/context.tsxjs/hang-ui/src/watch/element.tsxjs/hang-ui/src/watch/hooks/use-watch-ui.tsjs/hang-ui/src/watch/index.tsxjs/hang-ui/src/watch/styles/index.cssjs/hang-ui/vite.config.ts
💤 Files with no reviewable changes (1)
- js/hang-ui/src/stats.tsx
🚧 Files skipped from review as they are similar to previous changes (15)
- js/hang-ui/src/publish/components/PublishStatusIndicator.tsx
- js/hang-ui/src/watch/components/FullscreenButton.tsx
- js/hang-ui/src/watch/components/WatchStatusIndicator.tsx
- js/hang-ui/src/watch/element.tsx
- js/hang-ui/src/watch/components/BufferingIndicator.tsx
- js/hang-ui/src/publish/components/MediaSourceSelector.tsx
- js/hang-ui/src/publish/components/FileSourceButton.tsx
- js/hang-ui/vite.config.ts
- js/hang-ui/src/publish/index.tsx
- js/hang-ui/src/publish/hooks/use-publish-ui.ts
- js/hang-ui/src/publish/element.tsx
- js/hang-ui/src/publish/components/CameraSourceButton.tsx
- js/hang-ui/src/watch/index.tsx
- js/hang-ui/src/watch/components/QualitySelector.tsx
- js/hang-ui/src/publish/components/ScreenSourceButton.tsx
🧰 Additional context used
📓 Path-based instructions (1)
js/**/*.{ts,tsx,js,jsx,json}
📄 CodeRabbit inference engine (CLAUDE.md)
Use
bunfor all TypeScript/JavaScript package management and script execution (not npm, yarn, or pnpm)
Files:
js/hang-ui/src/watch/hooks/use-watch-ui.tsjs/hang-ui/src/shared/components/stats/__tests__/components/StatsItem.test.tsxjs/hang-ui/src/publish/components/MicrophoneSourceButton.tsxjs/hang-ui/src/watch/components/VolumeSlider.tsxjs/hang-ui/src/watch/components/PlayPauseButton.tsxjs/hang-ui/src/watch/components/StatsButton.tsxjs/hang-ui/src/watch/components/LatencySlider.tsxjs/hang-ui/src/shared/components/stats/components/StatsPanel.tsxjs/hang-ui/src/publish/components/NothingSourceButton.tsxjs/hang-ui/package.json
🧠 Learnings (1)
📚 Learning: 2026-01-11T03:47:52.766Z
Learnt from: CR
Repo: moq-dev/moq PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-11T03:47:52.766Z
Learning: Applies to js/**/*.{ts,tsx,js,jsx,json} : Use `bun` for all TypeScript/JavaScript package management and script execution (not npm, yarn, or pnpm)
Applied to files:
js/hang-ui/package.json
🪛 markdownlint-cli2 (0.18.1)
js/hang-ui/README.md
76-76: Hard tabs
Column: 1
(MD010, no-hard-tabs)
76-76: Hard tabs
Column: 3
(MD010, no-hard-tabs)
76-76: Hard tabs
Column: 14
(MD010, no-hard-tabs)
⏰ 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). (1)
- GitHub Check: Check
🔇 Additional comments (12)
js/hang-ui/src/publish/components/NothingSourceButton.tsx (1)
1-3: LGTM!The import path updates align with the new module structure. The changes are consistent with the broader refactoring applied across other publish components (CameraSourceButton, ScreenSourceButton, PublishStatusIndicator, etc. as noted in the PR context). The component logic remains unchanged.
js/hang-ui/src/watch/styles/index.css (1)
1-4: Import path updates are correct for the folder restructuring.All four imported CSS files exist at their new paths:
../../shared/variables.css✓../../shared/flex.css✓../../shared/components/button/button.css✓../../shared/components/stats/styles/index.css✓The paths correctly reflect that this file moved from
watch/towatch/styles/and that button and stats components are now organized undershared/components/.js/hang-ui/src/shared/components/stats/components/StatsPanel.tsx (1)
2-2: LGTM!The import path update aligns with the folder structure reorganization. The icon module exists at the new location with all required exports (Network, Video, Audio, Buffer), and the namespace import pattern is preserved, keeping all
Icon.*usages valid.js/hang-ui/src/watch/components/LatencySlider.tsx (1)
1-1: LGTM!The import path update to
../hooks/use-watch-uialigns with the new folder structure and is consistent with the pattern used across other watch components in this refactor.js/hang-ui/src/watch/hooks/use-watch-ui.ts (1)
2-2: LGTM!The import path update to
../contextaligns with the refactored folder structure where context modules are consolidated under a dedicated directory with an index barrel export.js/hang-ui/src/watch/components/VolumeSlider.tsx (1)
2-4: LGTM!Import paths correctly updated to align with the new folder structure:
- Shared components now under
../../shared/components/button/buttonand../../shared/components/icon/icon- Hook import from
../hooks/use-watch-uiThese paths are consistent with the pattern used across other watch components in this refactor.
js/hang-ui/src/watch/components/StatsButton.tsx (1)
1-3: LGTM!Import paths correctly updated to the new shared component and hook locations, consistent with the refactoring pattern applied across all watch components.
js/hang-ui/src/watch/components/PlayPauseButton.tsx (1)
2-4: LGTM!Import paths correctly updated to align with the new folder structure, consistent with the pattern applied to all other watch components in this refactor. All three imports resolve correctly and are actively used in the component:
Buttonfrom../../shared/components/button/buttonIconfrom../../shared/components/icon/iconuseWatchUIContextfrom../hooks/use-watch-uijs/hang-ui/src/publish/components/MicrophoneSourceButton.tsx (1)
2-4: LGTM!The import paths have been correctly updated to reflect the new folder structure. The paths to
Button,Icon, andusePublishUIContextare consistent with the modular organization described in the PR.js/hang-ui/src/publish/styles/index.css (1)
1-3: LGTM!The CSS import paths are correctly updated to account for the new directory depth and the reorganized component structure.
js/hang-ui/README.md (1)
51-110: Good documentation addition.The new Project Structure section provides clear documentation of the modular organization. This will help developers navigate the codebase after the refactoring.
js/hang-ui/package.json (1)
8-17: The exports and sideEffects entries reference a missing file.The
./statsexport points to./src/stats/index.tsx, but this file does not exist. Either:
- Create the missing
src/stats/index.tsxfile, or- Remove the
./statsexport and corresponding sideEffect entry if it's not needed.Currently, importing
./statsfrom this package will fail at runtime.⛔ Skipped due to learnings
Learnt from: CR Repo: moq-dev/moq PR: 0 File: CLAUDE.md:0-0 Timestamp: 2026-01-11T03:47:52.766Z Learning: Applies to js/**/*.{ts,tsx,js,jsx,json} : Use `bun` for all TypeScript/JavaScript package management and script execution (not npm, yarn, or pnpm)
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
js/hang-ui/src/shared/components/stats/__tests__/components/StatsItem.test.tsx
Outdated
Show resolved
Hide resolved
| "license": "(MIT OR Apache-2.0)", | ||
| "repository": "github:moq-dev/moq", | ||
| "exports": { | ||
| "./publish": "./src/publish.tsx", |
There was a problem hiding this comment.
I don't think this will work unfortunately. vite build dumps each entrypoint into the root. There might be a work-around but I couldn't figure one out.
I would have left a comment but JSON is a terrible format.
| "./stats": "./src/stats.tsx" | ||
| "./publish": "./src/publish/index.tsx", | ||
| "./watch": "./src/watch/index.tsx", | ||
| "./stats": "./src/shared/components/stats/index.tsx" |
There was a problem hiding this comment.
Do we even need stats as an entrypoint..?
| publish: resolve(__dirname, "src/publish.tsx"), | ||
| watch: resolve(__dirname, "src/watch.tsx"), | ||
| stats: resolve(__dirname, "src/stats.tsx"), | ||
| publish: resolve(__dirname, "src/publish/index.tsx"), |
There was a problem hiding this comment.
publish: results in dist/publish.js. Maybe "publish/index" might work but I haven't tried it.
3 participants
Reorganized the
hang-uisource folder structure.