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

[favna]

Is there an existing issue or pull request for this?

• I have searched the existing issues and pull requests

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:

discord-components/packages/core/src/components/discord-video-attachment/DiscordVideoAttachment.ts

Lines 228 to 239 in b308580

	@keyframes playPausePopIconKeyframes {
	0% {
	opacity: 0;
	}
	100% {
	opacity: 0;
	}
	}
	.discord-video-attachment-overlay-content-hidden {
	animation: playPausePopIconKeyframes 0.2s ease-in-out infinite;
	}

There is this method that should probably trigger it:

discord-components/packages/core/src/components/discord-video-attachment/DiscordVideoAttachment.ts

Lines 275 to 285 in b308580

	private handleHasStartedPlayingOrHasPaused() {
	if (this.playPausePopAnimationContainerRef.value) {
	this.playPausePopAnimationContainerRef.value.classList.add('discord-video-attachment-overlay-content-hidden');
	}
	setTimeout(() => {
	if (this.playPausePopAnimationContainerRef.value) {
	this.playPausePopAnimationContainerRef.value.classList.remove('discord-video-attachment-overlay-content-hidden');
	}
	}, 200);
	}

Which is bound to the video element:

discord-components/packages/core/src/components/discord-video-attachment/DiscordVideoAttachment.ts

Lines 299 to 311 in b308580

	<video
	${ref(this.mediaComponentRef)}
	class="discord-video-attachment-video-container"
	playsinline
	height="315"
	preload="metadata"
	width="550"
	poster=${ifDefined(this.poster)}
	@play=${this.handleHasStartedPlayingOrHasPaused}
	@pause=${this.handleHasStartedPlayingOrHasPaused}
	@progress=${this.displayBufferedAmount}
	@click=${this.handleClickPlayPauseIcon}
	>

And the HTML code where the animation would be is:

discord-components/packages/core/src/components/discord-video-attachment/DiscordVideoAttachment.ts

Lines 417 to 420 in b308580

	<div class="discord-video-attachment-play-pause-pop">
	${VideoPausePopIcon({ class: 'discord-video-attachment-play-pause-pop-icon' })}
	</div>
	<div ${ref(this.playPausePopAnimationContainerRef)}></div>

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