diff --git a/src/app/components/message/content/VideoContent.tsx b/src/app/components/message/content/VideoContent.tsx index b33ec2720f..bfc1a4ced1 100644 --- a/src/app/components/message/content/VideoContent.tsx +++ b/src/app/components/message/content/VideoContent.tsx @@ -130,17 +130,15 @@ export const VideoContent = as<'div', VideoContentProps>( )} {!autoPlay && !blurred && srcState.status === AsyncStatus.Idle && ( - - + +
+ +
)} {srcState.status === AsyncStatus.Success && ( diff --git a/src/app/components/message/content/style.css.ts b/src/app/components/message/content/style.css.ts index bb5d8484f4..97fe57f8c4 100644 --- a/src/app/components/message/content/style.css.ts +++ b/src/app/components/message/content/style.css.ts @@ -38,3 +38,26 @@ export const Blur = style([ filter: 'blur(44px)', }, ]); + +export const MediaBackdrop = style([ + AbsoluteContainer, + { + cursor: 'pointer', + }, +]); + +export const WatchButton = style({ + width: '4rem', + height: '4rem', + color: 'white', + opacity: 0.6, + transition: 'opacity 0.25s', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + selectors: { + [`${MediaBackdrop}:hover &`]: { + opacity: 0.8, + }, + }, +});