[Gekidou] YouTube image size, style and play icon (#6259)

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 (
         <TouchableOpacity
-            style={[styles.imageContainer, {height: dimensions.height}]}
+            style={[styles.imageContainer, {height: dimensions.height, width: dimensions.width}]}
             onPress={playYouTubeVideo}
         >
-            <ProgressiveImage
-                id={imgUrl}
-                isBackgroundImage={true}
-                imageUri={imgUrl}
-                style={[styles.image, dimensions]}
-                resizeMode='cover'
+            <FastImage
                 onError={emptyFunction}
-            >
+                resizeMode='cover'
+                style={[styles.image, dimensions]}
+                source={{uri: imgUrl}}
+            />
+            <View style={styles.playContainer}>
                 <View style={styles.playButton}>
-                    <Image source={require('@assets/images/icons/youtube-play-icon.png')}/>
+                    <YouTubeLogo/>
                 </View>
-            </ProgressiveImage>
+            </View>
         </TouchableOpacity>
     );
 };

app/components/post_list/post/body/content/youtube/youtube.svg

@@ -0,0 +1,4 @@
+<svg width="69" height="48" viewBox="0 0 69 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.9" d="M67.1402 7.49577C66.35 4.54374 64.0301 2.22389 61.0781 1.43368C55.7272 0 34.2841 0 34.2841 0C34.2841 0 12.841 0 7.49577 1.43368C4.54374 2.22389 2.22389 4.54374 1.43368 7.49577C0 12.841 0 24 0 24C0 24 0 35.159 1.43368 40.5042C2.22389 43.4563 4.54374 45.7761 7.49577 46.5663C12.841 48 34.2841 48 34.2841 48C34.2841 48 55.7272 48 61.0724 46.5663C64.0245 45.7761 66.3443 43.4563 67.1345 40.5042C68.5682 35.159 68.5682 24 68.5682 24C68.5682 24 68.5682 12.841 67.1345 7.49577H67.1402Z" fill="#FF0000"/>
+<path d="M27.4261 34.2841L45.2455 24L27.4261 13.7159V34.2841Z" fill="white"/>
+</svg>

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]);