ITEP-66906 Components refactoring

[ActiveChooN]

📝 Description

PR summary:

• Replaced IndicatorWrapper with inline component
• Moved video indicators closer to its' usage
• Moved PhotoPlaceholder to @geti/ui

JIRA: ITEP-66906

✨ Type of Change

Select the type of change your PR introduces:

• 🐞 Bug fix – Non-breaking change which fixes an issue
• 🚀 New feature – Non-breaking change which adds functionality
• 🔨 Refactor – Non-breaking change which refactors the code base
• 💥 Breaking change – Changes that break existing functionality
• 📚 Documentation update
• 🔒 Security update
• 🧪 Tests

🧪 Testing Scenarios

Describe how the changes were tested and how reviewers can test them too:

• ✅ Tested manually
• 🤖 Run automated end-to-end tests

✅ Checklist

Before submitting the PR, ensure the following:

• 🔍 PR title is clear and descriptive
• 📝 For internal contributors: If applicable, include the JIRA ticket number (e.g., ITEP-123456) in the PR title. Do not include full URLs
• 💬 I have commented my code, especially in hard-to-understand areas
• 📄 I have made corresponding changes to the documentation
• ✅ I have added tests that prove my fix is effective or my feature works

[Copilot]

Pull Request Overview

This PR refactors indicator components by inlining wrappers with Spectrum Views, relocates video indicators closer to their usage, and centralizes PhotoPlaceholder in the @geti/ui package.

• Replaced IndicatorWrapper usages with View from @geti/ui
• Moved VideoIndicator and VideoFrameNumberIndicator into the media-item-view folder
• Extracted PhotoPlaceholder into the shared UI library and updated imports

Reviewed Changes

Copilot reviewed 17 out of 19 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
shared/components/media-item-view/video-indicator.component.tsx	New inline VideoIndicator using View
shared/components/media-item-view/video-frame-number-indicator.component.tsx	New inline VideoFrameNumberIndicator
shared/components/indicator-wrapper/indicator-wrapper.component.tsx	Deleted legacy IndicatorWrapper
shared/components/indicator-wrapper/indicator-wrapper.module.scss	Removed unused styles
pages/**/user-photo-placeholder.component.tsx	Updated import to use centralized PhotoPlaceholder
packages/ui/src/photo-placeholder/utils.ts	Added color/contrast utilities
packages/ui/src/photo-placeholder/photo-placeholder.component.tsx	Implemented PhotoPlaceholder in UI package
packages/ui/index.ts	Exported PhotoPlaceholder

Comments suppressed due to low confidence (2)

web_ui/src/shared/components/media-item-view/video-frame-number-indicator.component.tsx:15

• [nitpick] The id is too generic and omits 'number'; consider renaming to 'video-frame-number-indicator-id' to align with the component name and avoid collisions.

            id={'video-frame-indicator-id'}

web_ui/src/shared/components/media-item-view/video-indicator.component.tsx:16

• New VideoIndicator and its variations lack unit tests. Adding tests to cover both duration-only and frames-plus-duration render paths will improve reliability.

export const VideoIndicator = ({ duration, frames }: VideoIndicatorProps): JSX.Element => {

[Copilot]

[nitpick] Instead of using UNSAFE_style for backgroundColor, consider leveraging the backgroundColor prop on View or a dedicated CSS class for consistency with Spectrum patterns.

Suggested change

	UNSAFE_style={{ backgroundColor: 'var(--spectrum-global-color-gray-50)' }}
	backgroundColor={'var(--spectrum-global-color-gray-50)'}

[jpggvilaca]

[Suggestion] Maybe we could move all of these styles to the class videoFrameText?

[ActiveChooN]

I agree that it's worth moving custom styles to classes. However, I'd rather keep property attributes if possible to maintain readability and consistency.