search

skyra-project / discord-components

Discord Webcomponents for real looking messages on the web
MIT License
244 stars 31 forks source link

request: play the play/pause pop icon animation in the video player #414

Open favna opened 2 weeks ago

favna commented 2 weeks ago

Is there an existing issue or pull request for this?

Feature description

For #410 video attachments were added in #413. One feature that was not fully implemented in that PR is the CSS-based animation that should play when playing/pausing the video. This is because I simply do not know how to properly trigger CSS animations. This issue is an open ticket to the community of this library for anyone who does have the know-how about CSS animations to implement this last feature.

Desired solution

The animation as defined by these keyframes and class should be implemented:

https://github.com/skyra-project/discord-components/blob/b3085802bc7407403bdec707266ea2a239eacfbc/packages/core/src/components/discord-video-attachment/DiscordVideoAttachment.ts#L228-L239

There is this method that should probably trigger it:

https://github.com/skyra-project/discord-components/blob/b3085802bc7407403bdec707266ea2a239eacfbc/packages/core/src/components/discord-video-attachment/DiscordVideoAttachment.ts#L275-L285

Which is bound to the video element:

https://github.com/skyra-project/discord-components/blob/b3085802bc7407403bdec707266ea2a239eacfbc/packages/core/src/components/discord-video-attachment/DiscordVideoAttachment.ts#L299-L311

And the HTML code where the animation would be is:

https://github.com/skyra-project/discord-components/blob/b3085802bc7407403bdec707266ea2a239eacfbc/packages/core/src/components/discord-video-attachment/DiscordVideoAttachment.ts#L417-L420

There is one more SVG currently not imported but available which is VideoPlayPopIcon which is the SVG of the Play icon. The implemented code for that SVG is:

${VideoPlayPopIcon({ class: 'discord-video-attachment-play-pause-pop-icon' })}

When going from pause to play the SVG should change from VideoPausePopIcon to VideoPlayPopIcon When going from play to pause the SVG should change from VideoPlayPopIcon to VideoPausePopIcon

Alternatives considered

The alternative is what is currently on the main branch, no animation at all. This is fine for functionality but does not match Discord exactly.

Additional context

No response