Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(components/atom/videoPlayer): add factory hook #2524

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

andresin87
Copy link
Member

Atom/VideoPlayer

❓ Ask

TASK:

Description, Motivation and Context

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)
  • 🧾 Documentation
  • 📷 Demo
  • 🧪 Test
  • 🧠 Refactor
  • 💄 Styles
  • 🛠️ Tool

Screenshots - Animations

@github-actions
Copy link

STATEMENTS BRANCHES FUNCTIONS LINES
≍ 0.03↓ ≍ 0.05↓ ≍ 0= ≍ 0=
% 75.67 63.15 64.85 77.41
ABS 3002 / 3967 1762 / 2790 572 / 882 2889 / 3732

@andresin87
Copy link
Member Author

STATEMENTS BRANCHES FUNCTIONS LINES
≍ 0.03↓ ≍ 0.05↓ ≍ 0= ≍ 0=
% 75.67 63.15 64.85 77.41
ABS 3002 / 3967 1762 / 2790 572 / 882 2889 / 3732
FROM:ABS 3007 / 3972 1764 / 2791 572 / 882 2894 / 3737

Despite of reducing the relative coverage, it is better not increasing (reduces) in production the number of code lines, functions and statements

@SUI-Components SUI-Components deleted a comment from github-actions bot Apr 24, 2023
@andresin87
Copy link
Member Author

Adds polymorphism and fwdRef

Comment on lines +7 to +34
const useVideoPlayer = ({
as: As = 'div',
children = 'Not supported media type',
className,
src = '',
...props
} = {}) => {
if (matcher([YOUTUBE.VIDEO_TYPE, YOUTUBE.SHORT_URL], src)) {
return [
YouTubePlayer,
{
className: [BASE_CLASS, `${BASE_CLASS}-youtubePlayer`].join(' '),
src,
...props
}
]
} else if (matcher([VIMEO.VIDEO_TYPE], src)) {
return [
VimeoPlayer,
{
className: [BASE_CLASS, `${BASE_CLASS}-vimeoPlayer`].join(' '),
src,
...props
}
]
}
return ['h1', {className: BASE_CLASS, children, ...props}]
}
Copy link
Collaborator

@oegea oegea Apr 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your proposal.

I'm wondering if this is an agreement of how to create these kind of structures in Sui.

Probably I'm missing the benefit or architectural pattern behind this change, but IMO this is making the same effect than the already existing code, but in a less obvious way, delegating some representation responsibilities to the useVideoPlayer hook.

All of this is still entirely my opinion, but without knowing the benefits of applying this alternative approach, it's more difficult in my opinion to read the code and follow the logic flow. For example is less obvious were the vimeoPlayer style class is used. In the already existing approach, the Vimeo player component self-contains both all the needed logic and css class references, and the switch mechanism has a very specific and limited responsibility.

Maybe we can have a discussion about this when you have a moment for us!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reduces the VDOM tree reconciliation. Take a look on react-dev-tools, there is non Switcher component

export default function AtomVideoPlayer({src = ''}) {
import useVideoPlayer from './hooks/useVideoPlayer.js'

const AtomVideoPlayer = forwardRef((props, forwardedRef) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you, we totally forgot about forwarding ref.

Copy link
Collaborator

@oegea oegea left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll appreciate if we can discuss these changes sometime during the following days.

This is one of our main sprint goals, so we'll be working on it during the following days.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants