From 4f2140875c8bc96f389ddfa18f7f971a2eabb13b Mon Sep 17 00:00:00 2001
From: ElenaDiachenko <diachenkoelena2@gmail.com>
Date: Thu, 11 Jul 2024 17:19:10 +0300
Subject: [PATCH 1/3] add test case

---
 packages/app-harness/package.json             |  3 +-
 packages/app-harness/src/app/index.tsx        |  4 ++
 .../src/components/Player/index.tsx           |  5 ++
 .../src/components/Player/index.web.tsx       | 13 +++++
 packages/app-harness/webpack.config.js        |  3 +
 yarn.lock                                     | 56 +++++++++++++++++--
 6 files changed, 78 insertions(+), 6 deletions(-)
 create mode 100644 packages/app-harness/src/components/Player/index.tsx
 create mode 100644 packages/app-harness/src/components/Player/index.web.tsx

diff --git a/packages/app-harness/package.json b/packages/app-harness/package.json
index d45544033..e4f8552b9 100644
--- a/packages/app-harness/package.json
+++ b/packages/app-harness/package.json
@@ -83,7 +83,8 @@
         "@types/react-native": "0.72.2",
         "babel-jest": "29.6.3",
         "babel-loader": "9.1.3",
-        "detox": "18.20.2"
+        "detox": "18.20.2",
+        "react-player": "2.16.0"
     },
     "private": true,
     "browserslist": [
diff --git a/packages/app-harness/src/app/index.tsx b/packages/app-harness/src/app/index.tsx
index 3d846517b..43d1a4210 100644
--- a/packages/app-harness/src/app/index.tsx
+++ b/packages/app-harness/src/app/index.tsx
@@ -15,6 +15,7 @@ import { LoggerProvider, useLoggerContext } from '../context';
 import { NotificationCallback } from '../components/types';
 import { SafeAreaProvider } from '../components/SafeArea';
 import { PhotoEditorButton } from '../components/PhotoEditor';
+import { Player } from '../components/Player';
 
 // import { observe as observeLogBoxLogs, symbolicateLogNow } from 'react-native/Libraries/LogBox/Data/LogBoxData';
 
@@ -250,6 +251,9 @@ const AppContent = () => {
                             ]}
                         />
                     </TestCase>
+                    <TestCase id={9} title="Player">
+                        <Player />
+                    </TestCase>
                 </ScrollView>
             </View>
             <ScrollView
diff --git a/packages/app-harness/src/components/Player/index.tsx b/packages/app-harness/src/components/Player/index.tsx
new file mode 100644
index 000000000..8f6c63601
--- /dev/null
+++ b/packages/app-harness/src/components/Player/index.tsx
@@ -0,0 +1,5 @@
+import { Text } from 'react-native';
+
+export const Player = () => {
+    return <Text style={{ color: 'black' }}>Not supported</Text>;
+};
diff --git a/packages/app-harness/src/components/Player/index.web.tsx b/packages/app-harness/src/components/Player/index.web.tsx
new file mode 100644
index 000000000..be034c511
--- /dev/null
+++ b/packages/app-harness/src/components/Player/index.web.tsx
@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react';
+import { View } from 'react-native';
+import ReactPlayer from 'react-player';
+
+export const Player = () => {
+    const [isClient, setIsClient] = useState(false);
+
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+
+    return <View>{isClient ? <ReactPlayer url="https://www.youtube.com/watch?v=LXb3EKWsInQ" /> : null}</View>;
+};
diff --git a/packages/app-harness/webpack.config.js b/packages/app-harness/webpack.config.js
index 843184970..6546146f0 100644
--- a/packages/app-harness/webpack.config.js
+++ b/packages/app-harness/webpack.config.js
@@ -3,6 +3,9 @@ const webpack = require('webpack'); //to access built-in plugins
 const { withRNVWebpack } = require('@rnv/adapter');
 
 module.exports = withRNVWebpack({
+    output: {
+        chunkFormat: false,
+    },
     resolve: {
         alias: {
             'my-module': 'some_path',
diff --git a/yarn.lock b/yarn.lock
index f9a5759b0..e4ab81ae6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9131,7 +9131,7 @@ deepmerge@3.2.0:
   resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-3.2.0.tgz#58ef463a57c08d376547f8869fdc5bcee957f44e"
   integrity sha512-6+LuZGU7QCNUnAJyX8cIrlzoEgggTM6B7mm+znKOX4t5ltluT9KLjN6g61ECMS0LTsLW7yDpNoxhix5FZcrIow==
 
-deepmerge@^4.2.2, deepmerge@^4.3.0:
+deepmerge@^4.0.0, deepmerge@^4.2.2, deepmerge@^4.3.0:
   version "4.3.1"
   resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
@@ -14117,6 +14117,11 @@ load-json-file@^4.0.0:
     pify "^3.0.0"
     strip-bom "^3.0.0"
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==
+
 loader-runner@^4.2.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
@@ -14631,7 +14636,7 @@ memfs@^3.1.2, memfs@^3.4.3:
   dependencies:
     fs-monkey "^1.0.4"
 
-memoize-one@^5.0.0:
+memoize-one@^5.0.0, memoize-one@^5.1.1:
   version "5.2.1"
   resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
   integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
@@ -18097,6 +18102,11 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-fast-compare@^3.0.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
 "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
@@ -18317,6 +18327,17 @@ react-native@0.73.4:
     ws "^6.2.2"
     yargs "^17.6.2"
 
+react-player@2.16.0:
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.16.0.tgz#89070700b03f5a5ded9f0b3165d4717390796481"
+  integrity sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==
+  dependencies:
+    deepmerge "^4.0.0"
+    load-script "^1.0.0"
+    memoize-one "^5.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.0.1"
+
 react-popper@^1.3.4:
   version "1.3.11"
   resolved "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz#a2cc3f0a67b75b66cfa62d2c409f9dd1fcc71ffd"
@@ -20027,7 +20048,16 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -20119,7 +20149,7 @@ stringify-object@^3.2.1, stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -20133,6 +20163,13 @@ strip-ansi@^5.0.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -22175,7 +22212,16 @@ workerpool@6.2.1:
   resolved "https://registry.npmjs.org/workerpool/-/workerpool-6.2.1.tgz#46fc150c17d826b86a008e5a4508656777e9c343"
   integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@7.0.0, wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@7.0.0, wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==

From 7439ca2b0bd5cdca090b11ba1c20400f43c42ea7 Mon Sep 17 00:00:00 2001
From: ElenaDiachenko <diachenkoelena2@gmail.com>
Date: Fri, 12 Jul 2024 13:18:29 +0300
Subject: [PATCH 2/3] configure webpack for single bundle.js file

---
 packages/app-harness/package.json             |  3 +--
 packages/app-harness/src/app/index.tsx        |  4 ---
 .../src/components/Player/index.tsx           |  5 ----
 .../src/components/Player/index.web.tsx       | 13 ----------
 packages/app-harness/webpack.config.js        |  4 ++-
 packages/template-starter/webpack.config.js   |  8 +++++-
 yarn.lock                                     | 25 ++-----------------
 7 files changed, 13 insertions(+), 49 deletions(-)
 delete mode 100644 packages/app-harness/src/components/Player/index.tsx
 delete mode 100644 packages/app-harness/src/components/Player/index.web.tsx

diff --git a/packages/app-harness/package.json b/packages/app-harness/package.json
index e4f8552b9..d45544033 100644
--- a/packages/app-harness/package.json
+++ b/packages/app-harness/package.json
@@ -83,8 +83,7 @@
         "@types/react-native": "0.72.2",
         "babel-jest": "29.6.3",
         "babel-loader": "9.1.3",
-        "detox": "18.20.2",
-        "react-player": "2.16.0"
+        "detox": "18.20.2"
     },
     "private": true,
     "browserslist": [
diff --git a/packages/app-harness/src/app/index.tsx b/packages/app-harness/src/app/index.tsx
index 43d1a4210..3d846517b 100644
--- a/packages/app-harness/src/app/index.tsx
+++ b/packages/app-harness/src/app/index.tsx
@@ -15,7 +15,6 @@ import { LoggerProvider, useLoggerContext } from '../context';
 import { NotificationCallback } from '../components/types';
 import { SafeAreaProvider } from '../components/SafeArea';
 import { PhotoEditorButton } from '../components/PhotoEditor';
-import { Player } from '../components/Player';
 
 // import { observe as observeLogBoxLogs, symbolicateLogNow } from 'react-native/Libraries/LogBox/Data/LogBoxData';
 
@@ -251,9 +250,6 @@ const AppContent = () => {
                             ]}
                         />
                     </TestCase>
-                    <TestCase id={9} title="Player">
-                        <Player />
-                    </TestCase>
                 </ScrollView>
             </View>
             <ScrollView
diff --git a/packages/app-harness/src/components/Player/index.tsx b/packages/app-harness/src/components/Player/index.tsx
deleted file mode 100644
index 8f6c63601..000000000
--- a/packages/app-harness/src/components/Player/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Text } from 'react-native';
-
-export const Player = () => {
-    return <Text style={{ color: 'black' }}>Not supported</Text>;
-};
diff --git a/packages/app-harness/src/components/Player/index.web.tsx b/packages/app-harness/src/components/Player/index.web.tsx
deleted file mode 100644
index be034c511..000000000
--- a/packages/app-harness/src/components/Player/index.web.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { useEffect, useState } from 'react';
-import { View } from 'react-native';
-import ReactPlayer from 'react-player';
-
-export const Player = () => {
-    const [isClient, setIsClient] = useState(false);
-
-    useEffect(() => {
-        setIsClient(true);
-    }, []);
-
-    return <View>{isClient ? <ReactPlayer url="https://www.youtube.com/watch?v=LXb3EKWsInQ" /> : null}</View>;
-};
diff --git a/packages/app-harness/webpack.config.js b/packages/app-harness/webpack.config.js
index 6546146f0..2f60bcd37 100644
--- a/packages/app-harness/webpack.config.js
+++ b/packages/app-harness/webpack.config.js
@@ -4,7 +4,9 @@ const { withRNVWebpack } = require('@rnv/adapter');
 
 module.exports = withRNVWebpack({
     output: {
-        chunkFormat: false,
+        //This allows to build and output a single JS file
+        //https://github.com/flexn-io/renative/issues/1353
+        // chunkFormat: false,
     },
     resolve: {
         alias: {
diff --git a/packages/template-starter/webpack.config.js b/packages/template-starter/webpack.config.js
index b92580850..a87cb1040 100644
--- a/packages/template-starter/webpack.config.js
+++ b/packages/template-starter/webpack.config.js
@@ -1,3 +1,9 @@
 const { withRNVWebpack } = require('@rnv/adapter');
 
-module.exports = withRNVWebpack({});
+module.exports = withRNVWebpack({
+    output: {
+        //This allows to build and output a single bundle.js file
+        //https://github.com/flexn-io/renative/issues/1353
+        // chunkFormat: false,
+    },
+});
diff --git a/yarn.lock b/yarn.lock
index e4ab81ae6..747df7ba5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9131,7 +9131,7 @@ deepmerge@3.2.0:
   resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-3.2.0.tgz#58ef463a57c08d376547f8869fdc5bcee957f44e"
   integrity sha512-6+LuZGU7QCNUnAJyX8cIrlzoEgggTM6B7mm+znKOX4t5ltluT9KLjN6g61ECMS0LTsLW7yDpNoxhix5FZcrIow==
 
-deepmerge@^4.0.0, deepmerge@^4.2.2, deepmerge@^4.3.0:
+deepmerge@^4.2.2, deepmerge@^4.3.0:
   version "4.3.1"
   resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
@@ -14117,11 +14117,6 @@ load-json-file@^4.0.0:
     pify "^3.0.0"
     strip-bom "^3.0.0"
 
-load-script@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
-  integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==
-
 loader-runner@^4.2.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
@@ -14636,7 +14631,7 @@ memfs@^3.1.2, memfs@^3.4.3:
   dependencies:
     fs-monkey "^1.0.4"
 
-memoize-one@^5.0.0, memoize-one@^5.1.1:
+memoize-one@^5.0.0:
   version "5.2.1"
   resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
   integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
@@ -18102,11 +18097,6 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
-react-fast-compare@^3.0.1:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
-  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
-
 "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
@@ -18327,17 +18317,6 @@ react-native@0.73.4:
     ws "^6.2.2"
     yargs "^17.6.2"
 
-react-player@2.16.0:
-  version "2.16.0"
-  resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.16.0.tgz#89070700b03f5a5ded9f0b3165d4717390796481"
-  integrity sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==
-  dependencies:
-    deepmerge "^4.0.0"
-    load-script "^1.0.0"
-    memoize-one "^5.1.1"
-    prop-types "^15.7.2"
-    react-fast-compare "^3.0.1"
-
 react-popper@^1.3.4:
   version "1.3.11"
   resolved "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz#a2cc3f0a67b75b66cfa62d2c409f9dd1fcc71ffd"

From 6801c1cb4c3f0e42eafe78352a35dc3b55fedad3 Mon Sep 17 00:00:00 2001
From: ElenaDiachenko <diachenkoelena2@gmail.com>
Date: Thu, 18 Jul 2024 13:36:44 +0300
Subject: [PATCH 3/3] bring back Player component for testing

---
 packages/app-harness/package.json             |   3 ++-
 .../app-harness/public/images/favicon.ico     | Bin 0 -> 15406 bytes
 packages/app-harness/src/app/index.tsx        |   4 +++
 .../src/components/Player/index.tsx           |   5 ++++
 .../src/components/Player/index.web.tsx       |  13 +++++++++
 yarn.lock                                     |  25 ++++++++++++++++--
 6 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 packages/app-harness/public/images/favicon.ico
 create mode 100644 packages/app-harness/src/components/Player/index.tsx
 create mode 100644 packages/app-harness/src/components/Player/index.web.tsx

diff --git a/packages/app-harness/package.json b/packages/app-harness/package.json
index d45544033..e4f8552b9 100644
--- a/packages/app-harness/package.json
+++ b/packages/app-harness/package.json
@@ -83,7 +83,8 @@
         "@types/react-native": "0.72.2",
         "babel-jest": "29.6.3",
         "babel-loader": "9.1.3",
-        "detox": "18.20.2"
+        "detox": "18.20.2",
+        "react-player": "2.16.0"
     },
     "private": true,
     "browserslist": [
diff --git a/packages/app-harness/public/images/favicon.ico b/packages/app-harness/public/images/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..3d62b31cc538de8996cafe225d8fd60eff14fa70
GIT binary patch
literal 15406
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

literal 0
HcmV?d00001

diff --git a/packages/app-harness/src/app/index.tsx b/packages/app-harness/src/app/index.tsx
index 3d846517b..43d1a4210 100644
--- a/packages/app-harness/src/app/index.tsx
+++ b/packages/app-harness/src/app/index.tsx
@@ -15,6 +15,7 @@ import { LoggerProvider, useLoggerContext } from '../context';
 import { NotificationCallback } from '../components/types';
 import { SafeAreaProvider } from '../components/SafeArea';
 import { PhotoEditorButton } from '../components/PhotoEditor';
+import { Player } from '../components/Player';
 
 // import { observe as observeLogBoxLogs, symbolicateLogNow } from 'react-native/Libraries/LogBox/Data/LogBoxData';
 
@@ -250,6 +251,9 @@ const AppContent = () => {
                             ]}
                         />
                     </TestCase>
+                    <TestCase id={9} title="Player">
+                        <Player />
+                    </TestCase>
                 </ScrollView>
             </View>
             <ScrollView
diff --git a/packages/app-harness/src/components/Player/index.tsx b/packages/app-harness/src/components/Player/index.tsx
new file mode 100644
index 000000000..8f6c63601
--- /dev/null
+++ b/packages/app-harness/src/components/Player/index.tsx
@@ -0,0 +1,5 @@
+import { Text } from 'react-native';
+
+export const Player = () => {
+    return <Text style={{ color: 'black' }}>Not supported</Text>;
+};
diff --git a/packages/app-harness/src/components/Player/index.web.tsx b/packages/app-harness/src/components/Player/index.web.tsx
new file mode 100644
index 000000000..be034c511
--- /dev/null
+++ b/packages/app-harness/src/components/Player/index.web.tsx
@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react';
+import { View } from 'react-native';
+import ReactPlayer from 'react-player';
+
+export const Player = () => {
+    const [isClient, setIsClient] = useState(false);
+
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+
+    return <View>{isClient ? <ReactPlayer url="https://www.youtube.com/watch?v=LXb3EKWsInQ" /> : null}</View>;
+};
diff --git a/yarn.lock b/yarn.lock
index 747df7ba5..e4ab81ae6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9131,7 +9131,7 @@ deepmerge@3.2.0:
   resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-3.2.0.tgz#58ef463a57c08d376547f8869fdc5bcee957f44e"
   integrity sha512-6+LuZGU7QCNUnAJyX8cIrlzoEgggTM6B7mm+znKOX4t5ltluT9KLjN6g61ECMS0LTsLW7yDpNoxhix5FZcrIow==
 
-deepmerge@^4.2.2, deepmerge@^4.3.0:
+deepmerge@^4.0.0, deepmerge@^4.2.2, deepmerge@^4.3.0:
   version "4.3.1"
   resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
@@ -14117,6 +14117,11 @@ load-json-file@^4.0.0:
     pify "^3.0.0"
     strip-bom "^3.0.0"
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==
+
 loader-runner@^4.2.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
@@ -14631,7 +14636,7 @@ memfs@^3.1.2, memfs@^3.4.3:
   dependencies:
     fs-monkey "^1.0.4"
 
-memoize-one@^5.0.0:
+memoize-one@^5.0.0, memoize-one@^5.1.1:
   version "5.2.1"
   resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
   integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
@@ -18097,6 +18102,11 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-fast-compare@^3.0.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
 "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
@@ -18317,6 +18327,17 @@ react-native@0.73.4:
     ws "^6.2.2"
     yargs "^17.6.2"
 
+react-player@2.16.0:
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.16.0.tgz#89070700b03f5a5ded9f0b3165d4717390796481"
+  integrity sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==
+  dependencies:
+    deepmerge "^4.0.0"
+    load-script "^1.0.0"
+    memoize-one "^5.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.0.1"
+
 react-popper@^1.3.4:
   version "1.3.11"
   resolved "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz#a2cc3f0a67b75b66cfa62d2c409f9dd1fcc71ffd"