Merge branch 'main' of github.com:Expensify/App into jsenyitko-suggested-search

Author: JS00001

Mobile-Expensify

@@ -114,8 +114,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1009015306
-        versionName "9.1.53-6"
+        versionCode 1009015402
+        versionName "9.1.54-2"
         // Supported language variants must be declared here to avoid from being removed during the compilation.
         // This also helps us to not include unnecessary language variants in the APK.
         resConfigs "en", "es"

android/app/build.gradle

@@ -11,13 +11,27 @@ const ReactCompilerConfig = {
     sources: (filename) => !filename.includes('tests/') && !filename.includes('node_modules/'),
 };
 
+/**
+ * Custom plugin that prints a file name when it's being processed by babel.
+ * Disabled by default. To enable, set DEBUG_BABEL_TRACE=true in the environment.
+ */
+function traceTransformer() {
+    return {
+        visitor: {
+            Program(path, state) {
+                console.log('🔧 Transforming file:', state.filename);
+            },
+        },
+    };
+}
+
 /**
  * Setting targets to node 20 to reduce JS bundle size
  * It is also recommended by babel:
  * https://babeljs.io/docs/options#no-targets
  */
-const defaultPresets = ['@babel/preset-react', ['@babel/preset-env', {targets: {node: 20}}], '@babel/preset-flow', '@babel/preset-typescript'];
-const defaultPlugins = [
+const defaultPresetsForWebpack = ['@babel/preset-react', ['@babel/preset-env', {targets: {node: 20}}], '@babel/preset-flow', '@babel/preset-typescript'];
+const defaultPluginsForWebpack = [
     ['babel-plugin-react-compiler', ReactCompilerConfig], // must run first!
     // Adding the commonjs: true option to react-native-web plugin can cause styling conflicts
     ['react-native-web'],
@@ -38,7 +52,7 @@ const defaultPlugins = [
 // ignore it for desktop builds.
 if (!process.env.ELECTRON_ENV && process.env.npm_lifecycle_event !== 'desktop') {
     console.debug('This is not a desktop build, adding babel-plugin-annotate-react');
-    defaultPlugins.push([
+    defaultPluginsForWebpack.push([
         '@fullstory/babel-plugin-annotate-react',
         {
             'react-native-web': true,
@@ -47,9 +61,13 @@ if (!process.env.ELECTRON_ENV && process.env.npm_lifecycle_event !== 'desktop')
     ]);
 }
 
+if (process.env.DEBUG_BABEL_TRACE) {
+    defaultPluginsForWebpack.push(traceTransformer);
+}
+
 const webpack = {
-    presets: defaultPresets,
-    plugins: defaultPlugins,
+    presets: defaultPresetsForWebpack,
+    plugins: defaultPluginsForWebpack,
 };
 
 const metro = {
@@ -123,6 +141,10 @@ const metro = {
     },
 };
 
+if (process.env.DEBUG_BABEL_TRACE) {
+    metro.plugins.push(traceTransformer);
+}
+
 /*
  * We use <React.Profiler> and react-native-performance to capture/monitor stats
  * By default <React.Profiler> is disabled in production as it adds small overhead

assets/images/fast-track-cover.png

@@ -236,6 +236,15 @@ const getCommonConfiguration = ({file = '.env', platform = 'web'}: Environment):
                 test: /\.lottie$/,
                 type: 'asset/resource',
             },
+            // This prevents import error coming from react-native-tab-view/lib/module/TabView.js
+            // where Pager is imported without extension due to having platform-specific implementations
+            {
+                test: /\.js$/,
+                resolve: {
+                    fullySpecified: false,
+                },
+                include: [path.resolve(__dirname, '../../node_modules/react-native-tab-view/lib/module/TabView.js')],
+            },
         ],
     },
     resolve: {

babel.config.js

@@ -66,6 +66,19 @@ const getConfiguration = (environment: Environment): Promise<Configuration> =>
                 }),
                 new ReactRefreshWebpackPlugin({overlay: {sockProtocol: 'wss'}}),
             ],
+            // This prevents import error coming from react-native-tab-view/lib/module/TabView.js
+            // where Pager is imported without extension due to having platform-specific implementations
+            module: {
+                rules: [
+                    {
+                        test: /\.js$/,
+                        resolve: {
+                            fullySpecified: false,
+                        },
+                        include: [path.resolve(__dirname, '../../node_modules/react-native-tab-view/lib/module/TabView.js')],
+                    },
+                ],
+            },
             cache: {
                 type: 'filesystem',
                 name: environment.platform ?? 'default',

config/webpack/webpack.common.ts

@@ -168,6 +168,23 @@ The sections of the article will be filled and nested automatically in the LHN,
 
 If you're unfamiliar with github branches, PRs and confused how to add images and article in the same PR, head to this [slack thread 🧵](https://expensify.slack.com/archives/C02QSAC6BJ8/p1699632298177679?thread_ts=1699576284.768909&cid=C02QSAC6BJ8) in `#expensifyhelp`.
 
+## Add videos
+1. Upload your video to cloudflare.
+2. Import the video in an article. You can do that by pasting the below snippet.
+3. Replace `src` with the public URL for the video. **It should be cloudflarestream.com url**.
+4. Make sure to remove `/manifest/video.x` from the url.
+
+
+Without a custom thumbnail
+```
+{% include video.html src="https://customer-dtm7nf3ai7b93j1q.cloudflarestream.com/b81eabafe1391ab06901ddc19dcda161" %}
+```
+
+Optional: Add a custom thumbnail for the video. Replace `your-image.png` with a **16x9 aspect ratio image** from the `assets/images` directory.
+```
+{% include video.html thumbnail="assets/images/your-image.png" src="https://customer-dtm7nf3ai7b93j1q.cloudflarestream.com/b81eabafe1391ab06901ddc19dcda161" %}
+```
+
 ## Add meta-description tags for SEO
 
 At the top of template file we're going to find a few variables that will help us to define the meta-description of the article for SEO:

config/webpack/webpack.dev.ts

@@ -0,0 +1,34 @@
+<div class="video-container">
+    <video
+        class="video-js vjs-big-play-centered vjs-theme-fantasy"
+        controls
+        preload="auto"
+        {%
+        if
+        include.thumbnail
+        %}
+        poster="{{ site.url }}/{{ include.thumbnail }}"
+        {%
+        endif
+        %}
+        data-setup='{"autoplay": false, "controls": true, "aspectRatio": "16:9", "fluid": true}'
+    >
+        <source
+            src="{{ include.src }}/manifest/video.m3u8"
+            type="application/x-mpegURL"
+        />
+        <source
+            src="{{ include.src }}/manifest/video.mpd"
+            type="application/dash+xml"
+        />
+        <p class="vjs-no-js">
+            To view this video please enable JavaScript, and consider upgrading to a web browser that
+            <a
+                href="https://videojs.com/html5-video-support/"
+                target="_blank"
+            >
+                supports HTML5 video
+            </a>
+        </p>
+    </video>
+</div>

docs/README.md

@@ -2,15 +2,18 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <meta http-equiv="Content-Security-Policy" content="script-src https://kit.fontawesome.com https://cdnjs.cloudflare.com https://www.google.com https://www.gstatic.com/ https://cse.google.com http://cse.google.com https://partner.googleadservices.com/ https://cdnjs.cloudflare.com/ajax/libs/tocbot/ https://www.googletagmanager.com 'self' 'unsafe-eval' 'unsafe-inline'; style-src cdnjs.cloudflare.com cse.google.com www.google.com ka-f.fontawesome.com fonts.googleapis.com 'self' 'unsafe-inline'" >
+    <meta http-equiv="Content-Security-Policy" content="script-src https://kit.fontawesome.com https://cdnjs.cloudflare.com https://vjs.zencdn.net https://unpkg.com https://www.google.com https://www.gstatic.com/ https://cse.google.com http://cse.google.com https://partner.googleadservices.com/ https://cdnjs.cloudflare.com/ajax/libs/tocbot/ https://www.googletagmanager.com 'self' 'unsafe-eval' 'unsafe-inline'; style-src cdnjs.cloudflare.com vjs.zencdn.net unpkg.com cse.google.com www.google.com ka-f.fontawesome.com fonts.googleapis.com 'self' 'unsafe-inline'; worker-src blob: 'self';" >
     <title>Expensify Help</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
     <link rel="icon" type="image/png" href="{{ '/assets/images/expensify-logo-round.png' | cache_bust }}">
     <link rel="stylesheet" href="{{ site.main_style | cache_bust}}">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.0/tocbot.css">
+    <link rel="stylesheet" href="https://vjs.zencdn.net/8.5.2/video-js.css" />
+    <link rel="stylesheet" href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" />
 
     <script src="https://kit.fontawesome.com/263e5e8608.js" crossorigin="anonymous"></script>
     <script defer src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.0/tocbot.js"></script>
+    <script defer src="https://vjs.zencdn.net/8.5.2/video.min.js"></script>
     <script defer src="{{ '/assets/js/main.js' | cache_bust }}"></script>
     <script defer src="{{ '/assets/js/platform-tabs.js' | cache_bust }}"></script>
     <script defer src="{{ '/assets/js/selector.js' | cache_bust }}"></script>

docs/_includes/video.html

@@ -16,6 +16,8 @@
     --color-button-success-background: #03d47c;
     --color-button-success-background-hover: #00a862;
     --color-overlay: rgba(235, 230, 223, 0.72);
+    --color-white: #ffffff;
+    --color-transparent-white: #ffffff51;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -37,5 +39,7 @@
         --color-button-success-background: #03d47c;
         --color-button-success-background-hover: #00a862;
         --color-overlay: rgba(26, 61, 50, 0.72);
+        --color-white: #ffffff;
+        --color-transparent-white: #ffffff51;
     }
 }