From e315fa6b4d2a30c9efbe1c2fe881a3c9dd43d585 Mon Sep 17 00:00:00 2001 From: Elias Nahum Date: Wed, 11 May 2022 10:00:30 -0400 Subject: [PATCH] [Gekidou] YouTube image size, style and play icon (#6259) --- .../post/body/content/youtube/index.tsx | 56 ++++++++++++------ .../post/body/content/youtube/youtube.svg | 4 ++ app/components/post_list/post_list.tsx | 4 +- .../base/images/icons/youtube-play-icon.png | Bin 1304 -> 0 bytes 4 files changed, 43 insertions(+), 21 deletions(-) create mode 100644 app/components/post_list/post/body/content/youtube/youtube.svg delete mode 100644 assets/base/images/icons/youtube-play-icon.png diff --git a/app/components/post_list/post/body/content/youtube/index.tsx b/app/components/post_list/post/body/content/youtube/index.tsx index cb208ed1a..9251fabb4 100644 --- a/app/components/post_list/post/body/content/youtube/index.tsx +++ b/app/components/post_list/post/body/content/youtube/index.tsx @@ -3,52 +3,71 @@ import React, {useCallback} from 'react'; import {useIntl} from 'react-intl'; -import {Alert, Image, StyleSheet, TouchableOpacity, View} from 'react-native'; +import {Alert, StyleSheet, TouchableOpacity, View} from 'react-native'; +import FastImage from 'react-native-fast-image'; -import ProgressiveImage from '@components/progressive_image'; +import {useTheme} from '@context/theme'; import {useIsTablet} from '@hooks/device'; import {emptyFunction} from '@utils/general'; import {calculateDimensions, getViewPortWidth} from '@utils/images'; +import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; import {getYouTubeVideoId, tryOpenURL} from '@utils/url'; +// @ts-expect-error import svg +import YouTubeLogo from './youtube.svg'; + type YouTubeProps = { isReplyPost: boolean; layoutWidth?: number; metadata: PostMetadata; } -const MAX_YOUTUBE_IMAGE_HEIGHT = 202; -const MAX_YOUTUBE_IMAGE_WIDTH = 360; +const MAX_YOUTUBE_IMAGE_HEIGHT = 280; +const MAX_YOUTUBE_IMAGE_WIDTH = 500; -const styles = StyleSheet.create({ +const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ imageContainer: { alignItems: 'flex-start', justifyContent: 'flex-start', + borderRadius: 4, marginBottom: 6, marginTop: 10, }, image: { alignItems: 'center', - borderRadius: 3, + borderRadius: 4, justifyContent: 'center', - marginVertical: 1, }, playButton: { flex: 1, alignItems: 'center', justifyContent: 'center', }, -}); + playContainer: { + ...StyleSheet.absoluteFillObject, + backgroundColor: changeOpacity('#000', 0.24), + borderColor: changeOpacity(theme.centerChannelColor, 0.08), + borderRadius: 4, + borderWidth: 1, + elevation: 3, + shadowColor: changeOpacity('#000', 0.08), + shadowOffset: {width: 0, height: 2}, + shadowOpacity: 1, + shadowRadius: 3, + }, +})); const YouTube = ({isReplyPost, layoutWidth, metadata}: YouTubeProps) => { const intl = useIntl(); const isTablet = useIsTablet(); + const theme = useTheme(); + const styles = getStyleSheet(theme); const link = metadata.embeds![0].url; const videoId = getYouTubeVideoId(link); const dimensions = calculateDimensions( MAX_YOUTUBE_IMAGE_HEIGHT, MAX_YOUTUBE_IMAGE_WIDTH, - layoutWidth || getViewPortWidth(isReplyPost, isTablet), + layoutWidth || (getViewPortWidth(isReplyPost, isTablet) - 15), ); const playYouTubeVideo = useCallback(() => { @@ -80,21 +99,20 @@ const YouTube = ({isReplyPost, layoutWidth, metadata}: YouTubeProps) => { return ( - + resizeMode='cover' + style={[styles.image, dimensions]} + source={{uri: imgUrl}} + /> + - + - + ); }; diff --git a/app/components/post_list/post/body/content/youtube/youtube.svg b/app/components/post_list/post/body/content/youtube/youtube.svg new file mode 100644 index 000000000..7ed67919d --- /dev/null +++ b/app/components/post_list/post/body/content/youtube/youtube.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/components/post_list/post_list.tsx b/app/components/post_list/post_list.tsx index d695ebeb4..b170092d9 100644 --- a/app/components/post_list/post_list.tsx +++ b/app/components/post_list/post_list.tsx @@ -117,8 +117,8 @@ const PostList = ({ useEffect(() => { const t = setTimeout(() => { - listRef.current?.scrollToOffset({offset: 0, animated: false}); - }, 200); + listRef.current?.scrollToOffset({offset: 0, animated: true}); + }, 300); return () => clearTimeout(t); }, [channelId, rootId]); diff --git a/assets/base/images/icons/youtube-play-icon.png b/assets/base/images/icons/youtube-play-icon.png deleted file mode 100644 index 5aa70a6f1808ca582ae8922320224176e2cb598b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1304 zcmV+z1?T#SP)IcvI(m6`ou9bCF81 ze`=cOJV+BAIjYA|TvKKlUR7Z`OZEvjD}MJAx@dn@^Ef`MDYu37N_#c-TftN?2lp=q z%dx*2tOLNl2Ip4rYdD?@rhzsb*TO~=_P)eDZ>m1w8QJH)UG>_}Zz{|kU0rT3RlKeO z)#E%Iu)pI^CnUeKTV1L3=IRPtwd!?j#bCryz0Nookb`s1_<6<0&+~hd1~y#WHs4R! zxBYyckNN9;yFe?%KCFq>A%Ojs-yKXY=zS6%Y>VP|nRvJi0I{*5?mGc9NbG=NWe@5e zyotn{*{#7#j*cj#nsWQ+fN|p8yuOEe5tAhQ1rr0sUKu7(ZE3-kfHB_5erFKj zl)T}gZc>YLNE&oFspSQv`Gky#iHs;(5*$^20K%%cFA{AhP9~qM&VE#T!Ku`E@2w;c zK7yp2E)e6&T$qZMQh38&sf*?e#ReQg&9_`dvxuna^G~R1R2jv3>_ci%4rzWN&0evg zy16e$Xyu)U@@L9eXuzQ~@tO;Xw`HJX_8h8x;7*cryOIQvxF>DiQGE`os&Kr_8jJED zk^Sa{v|n=p8Ep$#2%19y(oPyfQt$l`e*M#uJN(&e%PcX556*`;VP449zY6)SpxNs; zQ07zLX5TnOrJP`v`f#XaGwJZa$R`tm<~5%W`SAA zWQK~>f@Dvt5TmUJ6My`cB3>7TyX+A!*?J0!0W{2E*qH?~BE)Db)~~0A`){W}zk?|T zbnY3isi;`Oc$aA*MqAY0O4`X|=*Pnu$&S7W?<5s&D;cKgtFtA9w;f={yRTEk+M9yC z_vhY8CU@2_bnCJy#Av&~v}Yb63Dr%lu>9X=Shw2<;cfnVuT#|0lhpF$gsjP?kX<{r z)BJZ{C8ac<{T*|vHWO}gs_3idsa0zLO7wJhJ5 zlB5hBKujxZ5ptfChPh1&IplZK_-(6J()6buL@DjX1)w7386HSEe4U}L)FQJc_mIn^ zp@KOf{SS`6dEVx{`~u1D!90<%9RvZtPvo@xkCa;8#xju0ix@L!tSE;XPd}O(P8uCA zrINEh=|hw7a?-!L!VP>)YY^u2IAOxrutJiAffUW}o&QdJBRAK*xSPXakeMOfVNL1WUmRunMdJ>k{z&)ro7% zz#=dY%tE|RLD6Z)egkY*VZ1Q5@9U!TDZSEpjqG#a!EHsF=;{vGU-1)Vgc7QqPR4Zr O0000