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

✨(front) turn on camera when applying effects #334

Merged
merged 3 commits into from
Feb 5, 2025

Conversation

NathanVss
Copy link
Contributor

@NathanVss NathanVss commented Feb 4, 2025

Enable camera when applying effects

Enregistrement.de.l.ecran.2025-02-04.a.16.35.59.mov

Show loader if it takes times

useSyncAfterDelay allows to enable loading indicators only if the loading takes more than a specific time. It prevent blinking effect when the loading time is nearly instant.

Loading effects:

  • Loader on video
  • Disable effect on effects buttons

Please see below

Mon.film.2.mp4

@NathanVss NathanVss force-pushed the fix/enable-cam-effects branch from 0694320 to 5e78ed5 Compare February 4, 2025 16:53
@NathanVss NathanVss marked this pull request as ready for review February 4, 2025 16:59
@NathanVss NathanVss force-pushed the fix/enable-cam-effects branch 2 times, most recently from 45b4f1b to e51ad4d Compare February 4, 2025 17:04
Comment on lines +3 to +45
const loader = cva({
base: {
borderRadius: '50%',
position: 'relative',
animation: 'rotate 1s linear infinite',
'&:before, &:after': {
content: '""',
boxSizing: 'border-box',
position: 'absolute',
inset: '0',
borderRadius: '50%',
borderStyle: 'solid',
borderColor: 'white',
},
_before: {
animation: 'prixClipFix 2s linear infinite',
},
_after: {
borderColor: 'white',
animation:
'prixClipFix 2s linear infinite, rotate 0.5s linear infinite reverse',
inset: 6,
},
},
variants: {
size: {
small: {
width: '24px',
height: '24px',
'&:before, &:after': {
borderWidth: '2px',
},
},
},
},
defaultVariants: {
size: 'small',
},
})

export const Loader = () => {
return <div className={loader()}></div>
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

you could use the same approach of the checkbox.ts, using styled

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yep, but I don't understand why we is cva and styled used here and there and not only one of those? Maybe I'm missing something ofc

@NathanVss NathanVss force-pushed the fix/enable-cam-effects branch from e51ad4d to 33080cf Compare February 5, 2025 09:26
This component will be used for various purpose.
useSyncAfterDelay allows to enable loading indicators only if the
loading takes more than a specific time. It prevent blinking
effect when the loading time is nearly instant.
We want to automatically turn on the camera if its off when
enabling a new effect.
@NathanVss NathanVss force-pushed the fix/enable-cam-effects branch from 33080cf to d492b6e Compare February 5, 2025 10:41
@NathanVss NathanVss merged commit 07a44da into main Feb 5, 2025
9 of 10 checks passed
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.

2 participants