upgrade tips page to expo-video

app/src/app/explore/tips.tsx

@@ -1,8 +1,16 @@
-import React, { useState } from 'react';
-import { ActivityIndicator, Image, ImageSourcePropType, Platform, Share, StyleSheet, TouchableOpacity, View } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import {
+    ActivityIndicator,
+    Image,
+    ImageSourcePropType,
+    Platform,
+    Share,
+    StyleSheet,
+    TouchableOpacity,
+    View,
+} from 'react-native';
 import { useAppTheme } from '../../theming';
 import { MyText } from '@app/view/components/my-text';
-import { ResizeMode, Video } from 'expo-av';
 import { Building, iconHeight, iconWidth, Tech, Unit } from '@nex/data';
 import { FontAwesome5 } from '@expo/vector-icons';
 import { AVPlaybackSource } from 'expo-av/build/AV';
@@ -12,6 +20,7 @@ import { getTranslation } from '../../helper/translate';
 import { openLink } from '../../helper/url';
 import { Stack } from 'expo-router';
 import { ScrollView } from '@app/components/scroll-view';
+import { useVideoPlayer, VideoPlayer, VideoView } from 'expo-video';
 
 interface ITip {
     title: string;
@@ -27,15 +36,16 @@ interface ITip {
     icon?: string;
 }
 
-const videoBaseUrl = 'https://firebasestorage.googleapis.com/v0/b/aoe2companion.appspot.com/o/tips%2Fvideo%2F';
-const imageBaseUrl = 'https://firebasestorage.googleapis.com/v0/b/aoe2companion.appspot.com/o/tips%2Fimage%2F';
+const videoBaseUrl = 'https://pub-a991fc2193ea4fcabbd20a360421353c.r2.dev/public/aoe2/de/tips/video/';
+// const videoBaseUrl = 'https://frontend.cdn.aoe2companion.com/public/aoe2/de/tips/video/';
+const imageBaseUrl = 'https://frontend.cdn.aoe2companion.com/public/aoe2/de/tips/image/';
 
 function getImageSource(name: string) {
-    return { uri: imageBaseUrl + name + '?alt=media' };
+    return { uri: imageBaseUrl + name };
 }
 
 function getVideoSource(name: string) {
-    return { uri: videoBaseUrl + name + '?alt=media' };
+    return { uri: videoBaseUrl + name };
 }
 
 const tips: ITip[] = [
@@ -86,7 +96,7 @@ const tips: ITip[] = [
     {
         title: getTranslation('tips.item.heading.farmingefficiently'),
         description: getTranslation('tips.item.note.farmingefficiently'),
-        image: getImageSource('aoe-farm.png'),
+        image: getImageSource('aoe-farm.webp'),
         building: 'Farm',
     },
 
@@ -100,7 +110,7 @@ const tips: ITip[] = [
     {
         title: getTranslation('tips.item.heading.zetnusimprovedgridmod'),
         description: getTranslation('tips.item.note.zetnusimprovedgridmod'),
-        image: getImageSource('aoe-grid.png'),
+        image: getImageSource('aoe-grid.webp'),
         url: 'https://www.ageofempires.com/mods/details/812',
         imageIcon: require('../../../assets/tips/icon/aoe-grid.png'),
     },
@@ -114,7 +124,7 @@ const tips: ITip[] = [
     {
         title: getTranslation('tips.item.heading.idlevillagerhighlightbyarrow'),
         description: getTranslation('tips.item.note.idlevillagerhighlightbyarrow'),
-        image: getImageSource('aoe-idle-villager-arrow.png'),
+        image: getImageSource('aoe-idle-villager-arrow.webp'),
         url: 'https://www.ageofempires.com/mods/details/3789',
         imageIcon: require('../../../assets/tips/icon/aoe-idle-villager-arrow.png'),
     },
@@ -180,40 +190,120 @@ const tips: ITip[] = [
 //     );
 // }
 
+function MyVid(props: any) {
+    const { player } = props;
+    const styles = useStyles();
+    return   <VideoView
+
+        nativeControls={false}
+        player={player}
+        style={[
+            styles.showcase,
+            {
+                width: '100%',
+                aspectRatio: 16 / 9,
+                //opacity: loading ? 0.5 : 1,
+                height: Platform.OS === 'web' ? 252 : undefined,
+            },
+        ]}
+    />;
+}
+
 export default function TipsPage() {
     const styles = useStyles();
     const theme = useAppTheme();
     const [currentTip, setCurrentTip] = useState(tips[0]);
     const [loading, setLoading] = useState(true);
+    const [currentPlayer, setCurrentPlayer] = useState<VideoPlayer>(null);
     const [videoPosition, setVideoPosition] = useState(0);
 
-    const onShare = async (tip: any) => {
-        try {
-            const result = await Share.share(
-                {
-                    message: tip.url, // android
-                    url: tip.url, // ios
-                    // title: tip.title,
-                },
-                {
-                    subject: tip.title,
-                    // dialogTitle: tip.title,
-                }
-            );
-            if (result.action === Share.sharedAction) {
-                if (result.activityType) {
-                    // shared with activity type of result.activityType
-                } else {
-                    // shared
-                }
-            } else if (result.action === Share.dismissedAction) {
-                // dismissed
-            }
-        } catch (error: any) {
-            alert(error.message);
-        }
+    // video: getVideoSource('aoe-sheep.mp4'),
+    // video: getVideoSource('aoe-boar.mp4'),
+    // video: getVideoSource('aoe-auto-scout.mp4'),
+    // video: getVideoSource('aoe-auto-seed.mp4'),
+    // video: getVideoSource('aoe-gate.mp4'),
+    // video: getVideoSource('aoe-task-queue.mp4'),
+    // video: getVideoSource('aoe-small-trees.mp4'),
+    // video: getVideoSource('aoe-idle-villager-pointer.mp4'),
+
+    // const player = useVideoPlayer(null, player => {
+    //     console.log('player', player);
+    //     player.muted = true;
+    //     player.allowsExternalPlayback = false;
+    //     player.loop = true;
+    //     player.addListener('statusChange', (status) => {
+    //         console.log(status.status);
+    //         // setLoading(status.status === 'loading');
+    //     });
+    // });
+
+    const setup = (player: VideoPlayer) => {
+        console.log('player', player);
+        player.muted = true;
+        player.allowsExternalPlayback = false;
+        player.loop = true;
+        player.currentTime = 20;
+        // player.addListener('statusChange', (status) => {
+        //     console.log(status.status);
+        //     setLoading(val => val[player.st]);
+        // });
     };
 
+    const player1 = useVideoPlayer(getVideoSource('aoe-sheep.mp4'), setup);
+    const player2 = useVideoPlayer(getVideoSource('aoe-boar.mp4'), setup);
+
+    const playerDict = {
+        [getVideoSource('aoe-sheep.mp4').uri]: player1,
+        [getVideoSource('aoe-boar.mp4').uri]: player2,
+    };
+
+    useEffect(() => {
+        console.log('replace');
+        // player.replace(currentTip.video);
+        // player.play();
+
+        console.log(playerDict[currentTip.video.uri]);
+
+        setCurrentPlayer(playerDict[currentTip.video.uri]);
+
+    }, [currentTip.video]);
+
+    useEffect(() => {
+        if (currentPlayer?.status === 'loading') {
+            setLoading(true);
+        } else {
+            setLoading(false);
+        }
+        currentPlayer?.play();
+    }, [currentPlayer]);
+
+    // const onShare = async (tip: any) => {
+    //     try {
+    //         const result = await Share.share(
+    //             {
+    //                 message: tip.url, // android
+    //                 url: tip.url, // ios
+    //                 // title: tip.title,
+    //             },
+    //             {
+    //                 subject: tip.title,
+    //                 // dialogTitle: tip.title,
+    //             },
+    //         );
+    //         if (result.action === Share.sharedAction) {
+    //             if (result.activityType) {
+    //                 // shared with activity type of result.activityType
+    //             } else {
+    //                 // shared
+    //             }
+    //         } else if (result.action === Share.dismissedAction) {
+    //             // dismissed
+    //         }
+    //     } catch (error: any) {
+    //         alert(error.message);
+    //     }
+    // };
+
     const onOpen = async (tip: any) => {
         await openLink(tip.url);
     };
@@ -233,37 +323,48 @@ export default function TipsPage() {
                             <ActivityIndicator size="large" />
                         </View>
                     )}
-                    {!currentTip.video && !currentTip.image && (
-                        <View style={[styles.showcase, { width: '100%', aspectRatio: 16 / 9, opacity: loading ? 0.5 : 1 }]}>
-                            <MyText>No Preview</MyText>
-                        </View>
-                    )}
+                    {/*{!currentTip.video && !currentTip.image && (*/}
+                    {/*    <View style={[styles.showcase, {*/}
+                    {/*        width: '100%',*/}
+                    {/*        aspectRatio: 16 / 9,*/}
+                    {/*        opacity: loading ? 0.5 : 1,*/}
+                    {/*    }]}>*/}
+                    {/*        <MyText>No Preview</MyText>*/}
+                    {/*    </View>*/}
+                    {/*)}*/}
                     {currentTip.video && (
-                        <Video
-                            source={currentTip.video}
-                            posterSource={currentTip.videoPoster}
-                            usePoster={true}
-                            // source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
-                            isMuted={true}
-                            resizeMode={ResizeMode.COVER}
-                            shouldPlay={true}
-                            // shouldPlay={false}
-                            positionMillis={videoPosition}
-                            isLooping
-                            onLoad={() => setLoading(false)}
-                            onLoadStart={() => setLoading(true)}
-                            style={[
-                                styles.showcase,
-                                { width: '100%', aspectRatio: 16 / 9, opacity: loading ? 0.5 : 1, height: Platform.OS === 'web' ? 252 : undefined },
-                            ]}
-                        />
-                    )}
-                    {currentTip.image && (
-                        <Image
-                            source={currentTip.image}
-                            style={[styles.showcase, { width: '100%', aspectRatio: 16 / 9, opacity: loading ? 0.5 : 1 }]}
-                        />
+
+                        <MyVid player={currentPlayer} />
+
+                        // <Video
+                        //     source={currentTip.video}
+                        //     posterSource={currentTip.videoPoster}
+                        //     usePoster={true}
+                        //     // source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
+                        //     isMuted={true}
+                        //     resizeMode={ResizeMode.COVER}
+                        //     shouldPlay={true}
+                        //     // shouldPlay={false}
+                        //     positionMillis={videoPosition}
+                        //     isLooping
+                        //     onLoad={() => setLoading(false)}
+                        //     onLoadStart={() => setLoading(true)}
+                        //     style={[
+                        //         styles.showcase,
+                        //         { width: '100%', aspectRatio: 16 / 9, opacity: loading ? 0.5 : 1, height: Platform.OS === 'web' ? 252 : undefined },
+                        //     ]}
+                        // />
                     )}
+                    {/*{currentTip.image && (*/}
+                    {/*    <Image*/}
+                    {/*        source={currentTip.image}*/}
+                    {/*        style={[styles.showcase, {*/}
+                    {/*            width: '100%',*/}
+                    {/*            aspectRatio: 16 / 9,*/}
+                    {/*            opacity: loading ? 0.5 : 1,*/}
+                    {/*        }]}*/}
+                    {/*    />*/}
+                    {/*)}*/}
                 </View>
             </View>
             <ScrollView style={styles.container} contentContainerStyle="pb-4">
@@ -276,9 +377,11 @@ export default function TipsPage() {
                                         <FontAwesome5 name="video" size={14} color={theme.textNoteColor} />
                                     </View>
                                 )}
-                                {!tip.icon && <Image style={styles.unitIconBig} source={tip.imageIcon ? tip.imageIcon : getAbilityIcon(tip)} />}
+                                {!tip.icon && <Image style={styles.unitIconBig}
+                                                     source={tip.imageIcon ? tip.imageIcon : getAbilityIcon(tip)} />}
                                 <View style={styles.textContainer}>
-                                    <MyText style={[styles.title, { fontWeight: currentTip.title == tip.title ? 'bold' : 'normal' }]}>
+                                    <MyText
+                                        style={[styles.title, { fontWeight: currentTip.title == tip.title ? 'bold' : 'normal' }]}>
                                         {tip.title}
                                     </MyText>
                                     <MyText style={styles.description}>{tip.description}</MyText>
@@ -356,5 +459,5 @@ const useStyles = createStylesheet((theme) =>
             lineHeight: 16,
             fontSize: 12,
         },
-    })
+    } as const),
 );

app2.config.ts

@@ -105,13 +105,6 @@ export default {
                     "icon": "./app/assets/notification.png"
                 }
             ],
-            // Needed since SDK 50. But it should not be needed because this is the default value.
-            [
-                "expo-av",
-                {
-                    "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone."
-                }
-            ],
             ...sentryConfigPlugins,
             [
                 "./app.plugin.js",

app4.config.ts

@@ -88,13 +88,6 @@ export default {
                     "icon": "./app4/assets/notification.png"
                 }
             ],
-            // Needed since SDK 50. But it should not be needed because this is the default value.
-            [
-                "expo-av",
-                {
-                    "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone."
-                }
-            ],
             ...sentryConfigPlugins,
             [
                 "expo-build-properties",

package.json

@@ -60,27 +60,27 @@
     "cross-env": "^7.0.3",
     "date-fns": "^2.14.0",
     "dotenv": "10.0.0",
-    "expo": "^52.0.4",
+    "expo": "^52.0.6",
     "expo-app-update": "^51.0.6",
     "expo-application": "~6.0.1",
-    "expo-av": "~15.0.1",
     "expo-build-properties": "~0.13.1",
     "expo-dev-client": "~5.0.1",
     "expo-device": "~7.0.1",
-    "expo-file-system": "~18.0.2",
+    "expo-file-system": "~18.0.3",
     "expo-image": "~2.0.0",
     "expo-keep-awake": "~14.0.1",
     "expo-linear-gradient": "~14.0.1",
     "expo-linking": "~7.0.2",
     "expo-localization": "~16.0.0",
-    "expo-notifications": "~0.29.6",
-    "expo-router": "~4.0.2",
-    "expo-splash-screen": "~0.29.7",
+    "expo-notifications": "~0.29.7",
+    "expo-router": "~4.0.5",
+    "expo-splash-screen": "~0.29.9",
     "expo-status-bar": "~2.0.0",
     "expo-system-ui": "~4.0.2",
-    "expo-task-manager": "~12.0.2",
-    "expo-updates": "~0.26.5",
-    "expo-web-browser": "~14.0.0",
+    "expo-task-manager": "~12.0.3",
+    "expo-updates": "~0.26.7",
+    "expo-video": "^2.0.0",
+    "expo-web-browser": "~14.0.1",
     "html-entities": "^2.4.0",
     "humps": "^2.0.1",
     "immer": "^7.0.0",