diff --git a/shared/chat/conversation/messages/attachment/video/videoimpl.shared.tsx b/shared/chat/conversation/messages/attachment/video/videoimpl.shared.tsx index 20e58705321e..1db34229fde3 100644 --- a/shared/chat/conversation/messages/attachment/video/videoimpl.shared.tsx +++ b/shared/chat/conversation/messages/attachment/video/videoimpl.shared.tsx @@ -1,4 +1,6 @@ import type * as T from '@/constants/types' +import * as Kb from '@/common-adapters' +import * as React from 'react' export type Props = { openFullscreen?: () => void @@ -6,3 +8,40 @@ export type Props = { allowPlay: boolean message: T.Chat.MessageAttachment } + +export const usePosterState = (url: string) => { + const [showPoster, setShowPoster] = React.useState(true) + const [lastUrl, setLastUrl] = React.useState(url) + if (lastUrl !== url) { + setLastUrl(url) + setShowPoster(true) + } + return {showPoster, reveal: () => setShowPoster(false)} +} + +export const sharedStyles = Kb.Styles.styleSheetCreate( + () => + ({ + durationContainer: { + alignSelf: 'flex-end', + backgroundColor: Kb.Styles.globalColors.black_50, + borderRadius: 2, + bottom: Kb.Styles.globalMargins.tiny, + padding: 1, + position: 'absolute', + right: Kb.Styles.globalMargins.tiny, + }, + durationText: { + color: Kb.Styles.globalColors.white, + paddingLeft: 3, + paddingRight: 3, + }, + playButton: { + left: '50%', + marginLeft: -32, + marginTop: -32, + position: 'absolute', + top: '50%', + }, + }) as const +) diff --git a/shared/chat/conversation/messages/attachment/video/videoimpl.tsx b/shared/chat/conversation/messages/attachment/video/videoimpl.tsx index 48129b238e9c..52207a2b4b42 100644 --- a/shared/chat/conversation/messages/attachment/video/videoimpl.tsx +++ b/shared/chat/conversation/messages/attachment/video/videoimpl.tsx @@ -1,6 +1,7 @@ import * as Kb from '@/common-adapters' import * as React from 'react' import type {Props} from './videoimpl.shared' +import {usePosterState, sharedStyles} from './videoimpl.shared' import {getAttachmentPreviewSize, ShowToastAfterSaving, maxHeight, maxWidth} from '../shared' import {useVideoPlayer, VideoView} from 'expo-video' import {useEventListener} from 'expo' @@ -15,31 +16,20 @@ const DesktopVideoImpl = (p: Props) => { const {allowPlay, message, openFullscreen} = p const {fileURL: url, videoDuration} = message const {previewURL, height, width} = getAttachmentPreviewSize(message) - const [showPoster, setShowPoster] = React.useState(true) - const [lastUrl, setLastUrl] = React.useState(url) - - if (lastUrl !== url) { - setLastUrl(url) - setShowPoster(true) - } - - const onPress = () => { - setShowPoster(false) - } + const {showPoster, reveal} = usePosterState(url) + const ref = React.useRef(null) const onDoubleClick = () => { ref.current?.pause() openFullscreen?.() } - const ref = React.useRef(null) - return showPoster ? ( -
+
- {allowPlay ? : null} - - + {allowPlay ? : null} + + {videoDuration} @@ -67,22 +57,15 @@ const NativeVideoImpl = (p: Props) => { const {allowPlay, message, showPopup} = p const {fileURL: url, transferState, videoDuration} = message const {previewURL, height, width} = getAttachmentPreviewSize(message) + const {showPoster, reveal} = usePosterState(url) const sourceUri = `${url}&contentforce=true` const player = useVideoPlayer(sourceUri, pl => { pl.loop = false }) - const [showPoster, setShowPoster] = React.useState(true) - const [lastUrl, setLastUrl] = React.useState(url) - - if (lastUrl !== url) { - setLastUrl(url) - setShowPoster(true) - } - const onPress = () => { - setShowPoster(false) + reveal() player.play() } @@ -100,9 +83,9 @@ const NativeVideoImpl = (p: Props) => { style={Kb.Styles.collapseStyles([nativeStyles.posterContainer, {height, width}])} > - {allowPlay ? : null} - - + {allowPlay ? : null} + + {videoDuration} @@ -123,27 +106,6 @@ const NativeVideoImpl = (p: Props) => { const desktopStyles = Kb.Styles.styleSheetCreate( () => ({ - durationContainer: { - alignSelf: 'flex-end', - backgroundColor: Kb.Styles.globalColors.black_50, - borderRadius: 2, - bottom: Kb.Styles.globalMargins.tiny, - padding: 1, - position: 'absolute', - right: Kb.Styles.globalMargins.tiny, - }, - durationText: { - color: Kb.Styles.globalColors.white, - paddingLeft: 3, - paddingRight: 3, - }, - playButton: { - left: '50%', - marginLeft: -32, - marginTop: -32, - position: 'absolute', - top: '50%', - }, posterContainer: { display: 'flex', flexShrink: 1, @@ -163,27 +125,6 @@ const desktopStyles = Kb.Styles.styleSheetCreate( const nativeStyles = Kb.Styles.styleSheetCreate( () => ({ - durationContainer: { - alignSelf: 'flex-end', - backgroundColor: Kb.Styles.globalColors.black_50, - borderRadius: 2, - bottom: Kb.Styles.globalMargins.tiny, - padding: 1, - position: 'absolute', - right: Kb.Styles.globalMargins.tiny, - }, - durationText: { - color: Kb.Styles.globalColors.white, - paddingLeft: 3, - paddingRight: 3, - }, - playButton: { - left: '50%', - marginLeft: -32, - marginTop: -32, - position: 'absolute', - top: '50%', - }, poster: { backgroundColor: Kb.Styles.globalColors.black_05_on_white, opacity: 1, diff --git a/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.shared.tsx b/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.shared.tsx index 3917b659dd22..28e4c752e4ef 100644 --- a/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.shared.tsx +++ b/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.shared.tsx @@ -1,3 +1,6 @@ +import * as Kb from '@/common-adapters' +import * as React from 'react' + export type Props = { autoPlay: boolean height: number @@ -6,3 +9,37 @@ export type Props = { url: string width: number } + +export const usePlayState = (url: string, autoPlay: boolean) => { + const [playing, setPlaying] = React.useState(autoPlay) + const [lastAutoPlay, setLastAutoPlay] = React.useState(autoPlay) + const [lastUrl, setLastUrl] = React.useState(url) + if (lastAutoPlay !== autoPlay || lastUrl !== url) { + setLastAutoPlay(autoPlay) + setLastUrl(url) + setPlaying(autoPlay) + } + return {playing, setPlaying} +} + +export const sharedStyles = Kb.Styles.styleSheetCreate( + () => + ({ + absoluteContainer: { + left: 0, + position: 'absolute', + top: 0, + }, + playButton: { + bottom: '50%', + left: '50%', + marginBottom: -32, + marginLeft: -32, + marginRight: -32, + marginTop: -32, + position: 'absolute', + right: '50%', + top: '50%', + }, + }) as const +) diff --git a/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.tsx b/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.tsx index f4d6117ec619..cc0ef41e7069 100644 --- a/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.tsx +++ b/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.tsx @@ -1,6 +1,7 @@ import * as Kb from '@/common-adapters/index' import * as React from 'react' import type {Props} from './video.shared' +import {usePlayState, sharedStyles} from './video.shared' import logger from '@/logger' import {useVideoPlayer, VideoView} from 'expo-video' @@ -13,15 +14,7 @@ type VideoElementRef = { const DesktopVideo = (p: Props) => { const {autoPlay, onClick, height, width, style, url} = p const videoRef = React.useRef(null) - const [playing, setPlaying] = React.useState(autoPlay) - const [lastAutoPlay, setLastAutoPlay] = React.useState(autoPlay) - const [lastUrl, setLastUrl] = React.useState(url) - - if (lastAutoPlay !== autoPlay || lastUrl !== url) { - setLastAutoPlay(autoPlay) - setLastUrl(url) - setPlaying(autoPlay) - } + const {playing, setPlaying} = usePlayState(url, autoPlay) const _onClick = () => { if (onClick) { @@ -44,8 +37,8 @@ const DesktopVideo = (p: Props) => { return ( - - {!playing && } + + {!playing && }