From 00c5efc5d76f7888b57c4323740d793d2cddcf8f Mon Sep 17 00:00:00 2001
From: smelaa <aleksandra.smela@gmail.com>
Date: Fri, 23 Feb 2024 09:54:12 +0100
Subject: [PATCH 01/20] PlaybackContext migrated to ts

---
 ...PlaybackContext.js => PlaybackContext.tsx} | 56 ++++++++++---------
 src/components/VideoPlayerContexts/types.ts   | 17 ++++++
 2 files changed, 47 insertions(+), 26 deletions(-)
 rename src/components/VideoPlayerContexts/{PlaybackContext.js => PlaybackContext.tsx} (63%)
 create mode 100644 src/components/VideoPlayerContexts/types.ts

diff --git a/src/components/VideoPlayerContexts/PlaybackContext.js b/src/components/VideoPlayerContexts/PlaybackContext.tsx
similarity index 63%
rename from src/components/VideoPlayerContexts/PlaybackContext.js
rename to src/components/VideoPlayerContexts/PlaybackContext.tsx
index b77068f3aea2..d931296831c7 100644
--- a/src/components/VideoPlayerContexts/PlaybackContext.js
+++ b/src/components/VideoPlayerContexts/PlaybackContext.tsx
@@ -1,52 +1,53 @@
+import type {Video} from 'expo-av';
 import PropTypes from 'prop-types';
+import type {ReactNode} from 'react';
 import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import type {View} from 'react-native';
 import useCurrentReportID from '@hooks/useCurrentReportID';
+import type PlaybackContext from './types';
 
-const PlaybackContext = React.createContext(null);
+const Context = React.createContext<PlaybackContext | null>(null);
 
-function PlaybackContextProvider({children}) {
-    const [currentlyPlayingURL, setCurrentlyPlayingURL] = useState(null);
-    const [sharedElement, setSharedElement] = useState(null);
-    const [originalParent, setOriginalParent] = useState(null);
-    const currentVideoPlayerRef = useRef(null);
-    const {currentReportID} = useCurrentReportID();
+function PlaybackContextProvider({children}: {children: ReactNode}) {
+    const [currentlyPlayingURL, setCurrentlyPlayingURL] = useState<string | null>(null);
+    const [sharedElement, setSharedElement] = useState<View | null>(null);
+    const [originalParent, setOriginalParent] = useState<View | null>(null);
+    const currentVideoPlayerRef = useRef<Video | null>(null);
+    const {currentReportID} = useCurrentReportID() ?? {};
 
     const pauseVideo = useCallback(() => {
-        if (!(currentVideoPlayerRef && currentVideoPlayerRef.current && currentVideoPlayerRef.current.setStatusAsync)) {
-            return;
-        }
-        currentVideoPlayerRef.current.setStatusAsync({shouldPlay: false});
+        currentVideoPlayerRef.current?.setStatusAsync({shouldPlay: false});
     }, [currentVideoPlayerRef]);
 
     const stopVideo = useCallback(() => {
-        if (!(currentVideoPlayerRef && currentVideoPlayerRef.current && currentVideoPlayerRef.current.stopAsync)) {
+        if (!currentVideoPlayerRef?.current?.stopAsync) {
             return;
         }
-        currentVideoPlayerRef.current.stopAsync({shouldPlay: false});
+        currentVideoPlayerRef.current.stopAsync();
     }, [currentVideoPlayerRef]);
 
     const playVideo = useCallback(() => {
-        if (!(currentVideoPlayerRef && currentVideoPlayerRef.current && currentVideoPlayerRef.current.setStatusAsync)) {
+        if (!currentVideoPlayerRef?.current?.setStatusAsync) {
             return;
         }
         currentVideoPlayerRef.current.getStatusAsync().then((status) => {
-            const newStatus = {shouldPlay: true};
-            if (status.durationMillis === status.positionMillis) {
-                newStatus.positionMillis = 0;
+            if (status.isLoaded && status.durationMillis === status.positionMillis) {
+                currentVideoPlayerRef.current?.setStatusAsync({shouldPlay: true, positionMillis: 0});
+            } else {
+                currentVideoPlayerRef.current?.setStatusAsync({shouldPlay: true});
             }
-            currentVideoPlayerRef.current.setStatusAsync(newStatus);
         });
     }, [currentVideoPlayerRef]);
 
     const unloadVideo = useCallback(() => {
-        if (!(currentVideoPlayerRef && currentVideoPlayerRef.current && currentVideoPlayerRef.current.unloadAsync)) {
+        if (!currentVideoPlayerRef?.current?.unloadAsync) {
             return;
         }
         currentVideoPlayerRef.current.unloadAsync();
     }, [currentVideoPlayerRef]);
 
     const updateCurrentlyPlayingURL = useCallback(
-        (url) => {
+        (url: string) => {
             if (currentlyPlayingURL && url !== currentlyPlayingURL) {
                 pauseVideo();
             }
@@ -56,7 +57,7 @@ function PlaybackContextProvider({children}) {
     );
 
     const shareVideoPlayerElements = useCallback(
-        (ref, parent, child) => {
+        (ref: Video, parent: View, child: View) => {
             currentVideoPlayerRef.current = ref;
             setOriginalParent(parent);
             setSharedElement(child);
@@ -66,8 +67,11 @@ function PlaybackContextProvider({children}) {
     );
 
     const checkVideoPlaying = useCallback(
-        (statusCallback) => {
-            currentVideoPlayerRef.current.getStatusAsync().then((status) => {
+        (statusCallback: (isPlaying: boolean) => void) => {
+            currentVideoPlayerRef.current?.getStatusAsync().then((status) => {
+                if (!('isPlaying' in status)) {
+                    return;
+                }
                 statusCallback(status.isPlaying);
             });
         },
@@ -104,12 +108,12 @@ function PlaybackContextProvider({children}) {
         }),
         [updateCurrentlyPlayingURL, currentlyPlayingURL, originalParent, sharedElement, shareVideoPlayerElements, playVideo, pauseVideo, checkVideoPlaying],
     );
-    return <PlaybackContext.Provider value={contextValue}>{children}</PlaybackContext.Provider>;
+    return <Context.Provider value={contextValue}>{children}</Context.Provider>;
 }
 
 function usePlaybackContext() {
-    const context = useContext(PlaybackContext);
-    if (context === undefined) {
+    const context = useContext(Context);
+    if (!context) {
         throw new Error('usePlaybackContext must be used within a PlaybackContextProvider');
     }
     return context;
diff --git a/src/components/VideoPlayerContexts/types.ts b/src/components/VideoPlayerContexts/types.ts
new file mode 100644
index 000000000000..cd5b1d699dcb
--- /dev/null
+++ b/src/components/VideoPlayerContexts/types.ts
@@ -0,0 +1,17 @@
+import type {Video} from 'expo-av';
+import type {MutableRefObject} from 'react';
+import type {View} from 'react-native';
+
+type PlaybackContext = {
+    updateCurrentlyPlayingURL: (url: string) => void;
+    currentlyPlayingURL: string | null;
+    originalParent: View | null;
+    sharedElement: View | null;
+    currentVideoPlayerRef: MutableRefObject<Video | null>;
+    shareVideoPlayerElements: (ref: Video, parent: View, child: View) => void;
+    playVideo: () => void;
+    pauseVideo: () => void;
+    checkVideoPlaying: (statusCallback: (isPlaying: boolean) => void) => void;
+};
+
+export default PlaybackContext;

From 73707a82d8a832c1ea75445e624a1b51047d6df2 Mon Sep 17 00:00:00 2001
From: smelaa <aleksandra.smela@gmail.com>
Date: Fri, 23 Feb 2024 10:13:00 +0100
Subject: [PATCH 02/20] VolumeContext migreated to ts

---
 .../VideoPlayerContexts/PlaybackContext.tsx   |  8 +++----
 .../{VolumeContext.js => VolumeContext.tsx}   | 21 ++++++++-----------
 src/components/VideoPlayerContexts/types.ts   |  8 ++++++-
 3 files changed, 20 insertions(+), 17 deletions(-)
 rename src/components/VideoPlayerContexts/{VolumeContext.js => VolumeContext.tsx} (73%)

diff --git a/src/components/VideoPlayerContexts/PlaybackContext.tsx b/src/components/VideoPlayerContexts/PlaybackContext.tsx
index d931296831c7..5e73304a9316 100644
--- a/src/components/VideoPlayerContexts/PlaybackContext.tsx
+++ b/src/components/VideoPlayerContexts/PlaybackContext.tsx
@@ -4,7 +4,7 @@ import type {ReactNode} from 'react';
 import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import type {View} from 'react-native';
 import useCurrentReportID from '@hooks/useCurrentReportID';
-import type PlaybackContext from './types';
+import type {PlaybackContext} from './types';
 
 const Context = React.createContext<PlaybackContext | null>(null);
 
@@ -112,11 +112,11 @@ function PlaybackContextProvider({children}: {children: ReactNode}) {
 }
 
 function usePlaybackContext() {
-    const context = useContext(Context);
-    if (!context) {
+    const playbackContext = useContext(Context);
+    if (!playbackContext) {
         throw new Error('usePlaybackContext must be used within a PlaybackContextProvider');
     }
-    return context;
+    return playbackContext;
 }
 
 PlaybackContextProvider.displayName = 'PlaybackContextProvider';
diff --git a/src/components/VideoPlayerContexts/VolumeContext.js b/src/components/VideoPlayerContexts/VolumeContext.tsx
similarity index 73%
rename from src/components/VideoPlayerContexts/VolumeContext.js
rename to src/components/VideoPlayerContexts/VolumeContext.tsx
index 2df463654075..a43f6476da3e 100644
--- a/src/components/VideoPlayerContexts/VolumeContext.js
+++ b/src/components/VideoPlayerContexts/VolumeContext.tsx
@@ -1,16 +1,17 @@
-import PropTypes from 'prop-types';
 import React, {useCallback, useContext, useEffect, useMemo} from 'react';
+import type {ReactNode} from 'react';
 import {useSharedValue} from 'react-native-reanimated';
 import {usePlaybackContext} from './PlaybackContext';
+import type {VolumeContext} from './types';
 
-const VolumeContext = React.createContext(null);
+const Context = React.createContext<VolumeContext | null>(null);
 
-function VolumeContextProvider({children}) {
+function VolumeContextProvider({children}: {children: ReactNode}) {
     const {currentVideoPlayerRef, originalParent} = usePlaybackContext();
     const volume = useSharedValue(0);
 
     const updateVolume = useCallback(
-        (newVolume) => {
+        (newVolume: number) => {
             if (!currentVideoPlayerRef.current) {
                 return;
             }
@@ -30,21 +31,17 @@ function VolumeContextProvider({children}) {
     }, [originalParent, updateVolume, volume.value]);
 
     const contextValue = useMemo(() => ({updateVolume, volume}), [updateVolume, volume]);
-    return <VolumeContext.Provider value={contextValue}>{children}</VolumeContext.Provider>;
+    return <Context.Provider value={contextValue}>{children}</Context.Provider>;
 }
 
 function useVolumeContext() {
-    const context = useContext(VolumeContext);
-    if (context === undefined) {
+    const volumeContext = useContext(Context);
+    if (!volumeContext) {
         throw new Error('useVolumeContext must be used within a VolumeContextProvider');
     }
-    return context;
+    return volumeContext;
 }
 
 VolumeContextProvider.displayName = 'VolumeContextProvider';
-VolumeContextProvider.propTypes = {
-    /** Actual content wrapped by this component */
-    children: PropTypes.node.isRequired,
-};
 
 export {VolumeContextProvider, useVolumeContext};
diff --git a/src/components/VideoPlayerContexts/types.ts b/src/components/VideoPlayerContexts/types.ts
index cd5b1d699dcb..2d2f3176442d 100644
--- a/src/components/VideoPlayerContexts/types.ts
+++ b/src/components/VideoPlayerContexts/types.ts
@@ -1,6 +1,7 @@
 import type {Video} from 'expo-av';
 import type {MutableRefObject} from 'react';
 import type {View} from 'react-native';
+import type {SharedValue} from 'react-native-reanimated';
 
 type PlaybackContext = {
     updateCurrentlyPlayingURL: (url: string) => void;
@@ -14,4 +15,9 @@ type PlaybackContext = {
     checkVideoPlaying: (statusCallback: (isPlaying: boolean) => void) => void;
 };
 
-export default PlaybackContext;
+type VolumeContext = {
+    updateVolume: (newVolume: number) => void;
+    volume: SharedValue<number>;
+};
+
+export type {PlaybackContext, VolumeContext};

From 3873457d9c4f5f9888cfe21e7cae7f8563c71a35 Mon Sep 17 00:00:00 2001
From: smelaa <aleksandra.smela@gmail.com>
Date: Fri, 23 Feb 2024 12:32:50 +0100
Subject: [PATCH 03/20] VideoPopoverMenuContext migrated to ts

---
 ...Context.js => VideoPopoverMenuContext.tsx} | 60 +++++++++----------
 src/components/VideoPlayerContexts/types.ts   | 20 ++++++-
 src/libs/fileDownload/index.ts                |  2 +-
 src/libs/fileDownload/types.ts                |  2 +-
 4 files changed, 50 insertions(+), 34 deletions(-)
 rename src/components/VideoPlayerContexts/{VideoPopoverMenuContext.js => VideoPopoverMenuContext.tsx} (56%)

diff --git a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.js b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
similarity index 56%
rename from src/components/VideoPlayerContexts/VideoPopoverMenuContext.js
rename to src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
index 23d1aec1817c..a2e384c8596f 100644
--- a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.js
+++ b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
@@ -1,49 +1,52 @@
-import PropTypes from 'prop-types';
 import React, {useCallback, useContext, useMemo, useState} from 'react';
-import _ from 'underscore';
+import type {ReactNode} from 'react';
 import * as Expensicons from '@components/Icon/Expensicons';
 import useLocalize from '@hooks/useLocalize';
 import fileDownload from '@libs/fileDownload';
 import * as Url from '@libs/Url';
 import CONST from '@src/CONST';
 import {usePlaybackContext} from './PlaybackContext';
+import type {MenuItem, SingularMenuItem, VideoPopoverMenuContext} from './types';
 
-const VideoPopoverMenuContext = React.createContext(null);
+const Context = React.createContext<VideoPopoverMenuContext | null>(null);
 
-function VideoPopoverMenuContextProvider({children}) {
+function VideoPopoverMenuContextProvider({children}: {children: ReactNode}) {
     const {currentVideoPlayerRef} = usePlaybackContext();
     const {translate} = useLocalize();
-    const [currentPlaybackSpeed, setCurrentPlaybackSpeed] = useState(CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS[2]);
+    const [currentPlaybackSpeed, setCurrentPlaybackSpeed] = useState<number>(CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS[2]);
 
     const updatePlaybackSpeed = useCallback(
-        (speed) => {
+        (speed: number) => {
             setCurrentPlaybackSpeed(speed);
-            currentVideoPlayerRef.current.setStatusAsync({rate: speed});
+            currentVideoPlayerRef.current?.setStatusAsync({rate: speed});
         },
         [currentVideoPlayerRef],
     );
 
     const downloadAttachment = useCallback(() => {
-        currentVideoPlayerRef.current.getStatusAsync().then((status) => {
+        currentVideoPlayerRef.current?.getStatusAsync().then((status) => {
+            if (!('uri' in status)) {
+                return;
+            }
             const sourceURI = `/${Url.getPathFromURL(status.uri)}`;
             fileDownload(sourceURI);
         });
     }, [currentVideoPlayerRef]);
 
     const menuItems = useMemo(
-        () => [
-            {
-                icon: Expensicons.Download,
-                text: translate('common.download'),
-                onSelected: () => {
-                    downloadAttachment();
+        () =>
+            [
+                {
+                    icon: Expensicons.Download,
+                    text: translate('common.download'),
+                    onSelected: () => {
+                        downloadAttachment();
+                    },
                 },
-            },
-            {
-                icon: Expensicons.Meter,
-                text: translate('videoPlayer.playbackSpeed'),
-                subMenuItems: [
-                    ..._.map(CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS, (speed) => ({
+                {
+                    icon: Expensicons.Meter,
+                    text: translate('videoPlayer.playbackSpeed'),
+                    subMenuItems: CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS.map((speed) => ({
                         icon: currentPlaybackSpeed === speed ? Expensicons.Checkmark : null,
                         text: speed.toString(),
                         onSelected: () => {
@@ -51,28 +54,23 @@ function VideoPopoverMenuContextProvider({children}) {
                         },
                         shouldPutLeftPaddingWhenNoIcon: true,
                     })),
-                ],
-            },
-        ],
+                },
+            ] as [SingularMenuItem, MenuItem],
         [currentPlaybackSpeed, downloadAttachment, translate, updatePlaybackSpeed],
     );
 
     const contextValue = useMemo(() => ({menuItems, updatePlaybackSpeed}), [menuItems, updatePlaybackSpeed]);
-    return <VideoPopoverMenuContext.Provider value={contextValue}>{children}</VideoPopoverMenuContext.Provider>;
+    return <Context.Provider value={contextValue}>{children}</Context.Provider>;
 }
 
 function useVideoPopoverMenuContext() {
-    const context = useContext(VideoPopoverMenuContext);
-    if (context === undefined) {
+    const videoPopooverMenuContext = useContext(Context);
+    if (!videoPopooverMenuContext) {
         throw new Error('useVideoPopoverMenuContext must be used within a VideoPopoverMenuContext');
     }
-    return context;
+    return videoPopooverMenuContext;
 }
 
 VideoPopoverMenuContextProvider.displayName = 'VideoPopoverMenuContextProvider';
-VideoPopoverMenuContextProvider.propTypes = {
-    /** Actual content wrapped by this component */
-    children: PropTypes.node.isRequired,
-};
 
 export {VideoPopoverMenuContextProvider, useVideoPopoverMenuContext};
diff --git a/src/components/VideoPlayerContexts/types.ts b/src/components/VideoPlayerContexts/types.ts
index 2d2f3176442d..979c36ae9161 100644
--- a/src/components/VideoPlayerContexts/types.ts
+++ b/src/components/VideoPlayerContexts/types.ts
@@ -2,6 +2,7 @@ import type {Video} from 'expo-av';
 import type {MutableRefObject} from 'react';
 import type {View} from 'react-native';
 import type {SharedValue} from 'react-native-reanimated';
+import type IconAsset from '@src/types/utils/IconAsset';
 
 type PlaybackContext = {
     updateCurrentlyPlayingURL: (url: string) => void;
@@ -20,4 +21,21 @@ type VolumeContext = {
     volume: SharedValue<number>;
 };
 
-export type {PlaybackContext, VolumeContext};
+type SingularMenuItem = {
+    icon?: IconAsset;
+    text: string;
+    onSelected: () => void;
+};
+
+type MenuItem = {
+    icon: IconAsset;
+    text: string;
+    subMenuItems: SingularMenuItem[];
+};
+
+type VideoPopoverMenuContext = {
+    menuItems: [SingularMenuItem, MenuItem];
+    updatePlaybackSpeed: (speed: number) => void;
+};
+
+export type {PlaybackContext, VolumeContext, VideoPopoverMenuContext, MenuItem, SingularMenuItem};
diff --git a/src/libs/fileDownload/index.ts b/src/libs/fileDownload/index.ts
index 4f43b215925f..431abc49136d 100644
--- a/src/libs/fileDownload/index.ts
+++ b/src/libs/fileDownload/index.ts
@@ -29,7 +29,7 @@ const fileDownload: FileDownload = (url, fileName) => {
             // adding href to anchor
             link.href = href;
             link.style.display = 'none';
-            link.download = FileUtils.appendTimeToFileName(fileName || FileUtils.getFileName(url));
+            link.download = FileUtils.appendTimeToFileName(fileName ?? FileUtils.getFileName(url));
 
             // Append to html link element page
             document.body.appendChild(link);
diff --git a/src/libs/fileDownload/types.ts b/src/libs/fileDownload/types.ts
index 6d92bddd5816..37e0c52056ce 100644
--- a/src/libs/fileDownload/types.ts
+++ b/src/libs/fileDownload/types.ts
@@ -1,6 +1,6 @@
 import type {Asset} from 'react-native-image-picker';
 
-type FileDownload = (url: string, fileName: string, successMessage?: string) => Promise<void>;
+type FileDownload = (url: string, fileName?: string, successMessage?: string) => Promise<void>;
 
 type ImageResolution = {width: number; height: number};
 type GetImageResolution = (url: File | Asset) => Promise<ImageResolution>;

From 386d2b6adc34240fefb7249e24977a6778dc23be Mon Sep 17 00:00:00 2001
From: Aleksandra Smela <115273836+smelaa@users.noreply.github.com>
Date: Fri, 23 Feb 2024 13:21:10 +0100
Subject: [PATCH 04/20] Update
 src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Błażej Kustra <46095609+blazejkustra@users.noreply.github.com>
---
 .../VideoPlayerContexts/VideoPopoverMenuContext.tsx           | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
index a2e384c8596f..0b9eca322ced 100644
--- a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
+++ b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
@@ -39,9 +39,7 @@ function VideoPopoverMenuContextProvider({children}: {children: ReactNode}) {
                 {
                     icon: Expensicons.Download,
                     text: translate('common.download'),
-                    onSelected: () => {
-                        downloadAttachment();
-                    },
+                    onSelected: downloadAttachment,
                 },
                 {
                     icon: Expensicons.Meter,

From bbcfcb21a464b2473b9106313c2ec9238f1abe14 Mon Sep 17 00:00:00 2001
From: Aleksandra Smela <115273836+smelaa@users.noreply.github.com>
Date: Fri, 23 Feb 2024 13:21:53 +0100
Subject: [PATCH 05/20] Update
 src/components/VideoPlayerContexts/PlaybackContext.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Błażej Kustra <46095609+blazejkustra@users.noreply.github.com>
---
 src/components/VideoPlayerContexts/PlaybackContext.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/VideoPlayerContexts/PlaybackContext.tsx b/src/components/VideoPlayerContexts/PlaybackContext.tsx
index 5e73304a9316..92454266f1b1 100644
--- a/src/components/VideoPlayerContexts/PlaybackContext.tsx
+++ b/src/components/VideoPlayerContexts/PlaybackContext.tsx
@@ -69,10 +69,7 @@ function PlaybackContextProvider({children}: {children: ReactNode}) {
     const checkVideoPlaying = useCallback(
         (statusCallback: (isPlaying: boolean) => void) => {
             currentVideoPlayerRef.current?.getStatusAsync().then((status) => {
-                if (!('isPlaying' in status)) {
-                    return;
-                }
-                statusCallback(status.isPlaying);
+                statusCallback('isPlaying' in status && status.isPlaying);
             });
         },
         [currentVideoPlayerRef],

From 737a1fa7d062381e40bd53a08836bae26ae9a509 Mon Sep 17 00:00:00 2001
From: smelaa <aleksandra.smela@gmail.com>
Date: Fri, 23 Feb 2024 13:27:13 +0100
Subject: [PATCH 06/20] children type update

---
 ios/Podfile.lock                                              | 2 +-
 src/components/VideoPlayerContexts/PlaybackContext.tsx        | 4 ++--
 .../VideoPlayerContexts/VideoPopoverMenuContext.tsx           | 4 ++--
 src/components/VideoPlayerContexts/VolumeContext.tsx          | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 52c817c739b3..24a8d07b7d34 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -1999,7 +1999,7 @@ SPEC CHECKSUMS:
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Turf: 13d1a92d969ca0311bbc26e8356cca178ce95da2
   VisionCamera: 0a6794d1974aed5d653d0d0cb900493e2583e35a
-  Yoga: e64aa65de36c0832d04e8c7bd614396c77a80047
+  Yoga: 13c8ef87792450193e117976337b8527b49e8c03
 
 PODFILE CHECKSUM: 0ccbb4f2406893c6e9f266dc1e7470dcd72885d2
 
diff --git a/src/components/VideoPlayerContexts/PlaybackContext.tsx b/src/components/VideoPlayerContexts/PlaybackContext.tsx
index 92454266f1b1..c84651dc2e6c 100644
--- a/src/components/VideoPlayerContexts/PlaybackContext.tsx
+++ b/src/components/VideoPlayerContexts/PlaybackContext.tsx
@@ -1,14 +1,14 @@
 import type {Video} from 'expo-av';
 import PropTypes from 'prop-types';
-import type {ReactNode} from 'react';
 import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import type {View} from 'react-native';
 import useCurrentReportID from '@hooks/useCurrentReportID';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import type {PlaybackContext} from './types';
 
 const Context = React.createContext<PlaybackContext | null>(null);
 
-function PlaybackContextProvider({children}: {children: ReactNode}) {
+function PlaybackContextProvider({children}: ChildrenProps) {
     const [currentlyPlayingURL, setCurrentlyPlayingURL] = useState<string | null>(null);
     const [sharedElement, setSharedElement] = useState<View | null>(null);
     const [originalParent, setOriginalParent] = useState<View | null>(null);
diff --git a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
index 0b9eca322ced..52fb768d7af1 100644
--- a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
+++ b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
@@ -1,16 +1,16 @@
 import React, {useCallback, useContext, useMemo, useState} from 'react';
-import type {ReactNode} from 'react';
 import * as Expensicons from '@components/Icon/Expensicons';
 import useLocalize from '@hooks/useLocalize';
 import fileDownload from '@libs/fileDownload';
 import * as Url from '@libs/Url';
 import CONST from '@src/CONST';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import {usePlaybackContext} from './PlaybackContext';
 import type {MenuItem, SingularMenuItem, VideoPopoverMenuContext} from './types';
 
 const Context = React.createContext<VideoPopoverMenuContext | null>(null);
 
-function VideoPopoverMenuContextProvider({children}: {children: ReactNode}) {
+function VideoPopoverMenuContextProvider({children}: ChildrenProps) {
     const {currentVideoPlayerRef} = usePlaybackContext();
     const {translate} = useLocalize();
     const [currentPlaybackSpeed, setCurrentPlaybackSpeed] = useState<number>(CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS[2]);
diff --git a/src/components/VideoPlayerContexts/VolumeContext.tsx b/src/components/VideoPlayerContexts/VolumeContext.tsx
index a43f6476da3e..8637fc2ae407 100644
--- a/src/components/VideoPlayerContexts/VolumeContext.tsx
+++ b/src/components/VideoPlayerContexts/VolumeContext.tsx
@@ -1,12 +1,12 @@
 import React, {useCallback, useContext, useEffect, useMemo} from 'react';
-import type {ReactNode} from 'react';
 import {useSharedValue} from 'react-native-reanimated';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import {usePlaybackContext} from './PlaybackContext';
 import type {VolumeContext} from './types';
 
 const Context = React.createContext<VolumeContext | null>(null);
 
-function VolumeContextProvider({children}: {children: ReactNode}) {
+function VolumeContextProvider({children}: ChildrenProps) {
     const {currentVideoPlayerRef, originalParent} = usePlaybackContext();
     const volume = useSharedValue(0);
 

From 388c66545361e1a5f1d319c302026fd43c6edc8b Mon Sep 17 00:00:00 2001
From: Aleksandra Smela <115273836+smelaa@users.noreply.github.com>
Date: Fri, 23 Feb 2024 13:32:38 +0100
Subject: [PATCH 07/20] Update
 src/components/VideoPlayerContexts/PlaybackContext.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Błażej Kustra <46095609+blazejkustra@users.noreply.github.com>
---
 src/components/VideoPlayerContexts/PlaybackContext.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/VideoPlayerContexts/PlaybackContext.tsx b/src/components/VideoPlayerContexts/PlaybackContext.tsx
index c84651dc2e6c..06f786ca597c 100644
--- a/src/components/VideoPlayerContexts/PlaybackContext.tsx
+++ b/src/components/VideoPlayerContexts/PlaybackContext.tsx
@@ -31,10 +31,11 @@ function PlaybackContextProvider({children}: ChildrenProps) {
             return;
         }
         currentVideoPlayerRef.current.getStatusAsync().then((status) => {
-            if (status.isLoaded && status.durationMillis === status.positionMillis) {
+           if ('durationMillis' in status && status.durationMillis === status.positionMillis) {
                 currentVideoPlayerRef.current?.setStatusAsync({shouldPlay: true, positionMillis: 0});
-            } else {
-                currentVideoPlayerRef.current?.setStatusAsync({shouldPlay: true});
+            }
+
+            currentVideoPlayerRef.current?.setStatusAsync({shouldPlay: true});
             }
         });
     }, [currentVideoPlayerRef]);

From 3261c35f7189f57a73780b98dac26836df0a6f51 Mon Sep 17 00:00:00 2001
From: smelaa <aleksandra.smela@gmail.com>
Date: Fri, 23 Feb 2024 13:57:34 +0100
Subject: [PATCH 08/20] adding optional chaining & adding
 shouldPutLeftPaddingWhenNoIcon to SingularMenuItem type & adding menuItems
 type as generic argument

---
 .../VideoPlayerContexts/PlaybackContext.tsx   | 19 ++-------
 .../VideoPopoverMenuContext.tsx               | 41 +++++++++----------
 src/components/VideoPlayerContexts/types.ts   |  3 +-
 3 files changed, 26 insertions(+), 37 deletions(-)

diff --git a/src/components/VideoPlayerContexts/PlaybackContext.tsx b/src/components/VideoPlayerContexts/PlaybackContext.tsx
index 06f786ca597c..e70f45e88629 100644
--- a/src/components/VideoPlayerContexts/PlaybackContext.tsx
+++ b/src/components/VideoPlayerContexts/PlaybackContext.tsx
@@ -20,31 +20,20 @@ function PlaybackContextProvider({children}: ChildrenProps) {
     }, [currentVideoPlayerRef]);
 
     const stopVideo = useCallback(() => {
-        if (!currentVideoPlayerRef?.current?.stopAsync) {
-            return;
-        }
-        currentVideoPlayerRef.current.stopAsync();
+        currentVideoPlayerRef.current?.stopAsync?.();
     }, [currentVideoPlayerRef]);
 
     const playVideo = useCallback(() => {
-        if (!currentVideoPlayerRef?.current?.setStatusAsync) {
-            return;
-        }
-        currentVideoPlayerRef.current.getStatusAsync().then((status) => {
-           if ('durationMillis' in status && status.durationMillis === status.positionMillis) {
+        currentVideoPlayerRef.current?.getStatusAsync?.().then((status) => {
+            if ('durationMillis' in status && status.durationMillis === status.positionMillis) {
                 currentVideoPlayerRef.current?.setStatusAsync({shouldPlay: true, positionMillis: 0});
             }
-
             currentVideoPlayerRef.current?.setStatusAsync({shouldPlay: true});
-            }
         });
     }, [currentVideoPlayerRef]);
 
     const unloadVideo = useCallback(() => {
-        if (!currentVideoPlayerRef?.current?.unloadAsync) {
-            return;
-        }
-        currentVideoPlayerRef.current.unloadAsync();
+        currentVideoPlayerRef.current?.unloadAsync?.();
     }, [currentVideoPlayerRef]);
 
     const updateCurrentlyPlayingURL = useCallback(
diff --git a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
index 52fb768d7af1..78a7d1f7d94a 100644
--- a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
+++ b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
@@ -33,27 +33,26 @@ function VideoPopoverMenuContextProvider({children}: ChildrenProps) {
         });
     }, [currentVideoPlayerRef]);
 
-    const menuItems = useMemo(
-        () =>
-            [
-                {
-                    icon: Expensicons.Download,
-                    text: translate('common.download'),
-                    onSelected: downloadAttachment,
-                },
-                {
-                    icon: Expensicons.Meter,
-                    text: translate('videoPlayer.playbackSpeed'),
-                    subMenuItems: CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS.map((speed) => ({
-                        icon: currentPlaybackSpeed === speed ? Expensicons.Checkmark : null,
-                        text: speed.toString(),
-                        onSelected: () => {
-                            updatePlaybackSpeed(speed);
-                        },
-                        shouldPutLeftPaddingWhenNoIcon: true,
-                    })),
-                },
-            ] as [SingularMenuItem, MenuItem],
+    const menuItems = useMemo<[SingularMenuItem, MenuItem]>(
+        () => [
+            {
+                icon: Expensicons.Download,
+                text: translate('common.download'),
+                onSelected: downloadAttachment,
+            },
+            {
+                icon: Expensicons.Meter,
+                text: translate('videoPlayer.playbackSpeed'),
+                subMenuItems: CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS.map((speed) => ({
+                    icon: currentPlaybackSpeed === speed ? Expensicons.Checkmark : null,
+                    text: speed.toString(),
+                    onSelected: () => {
+                        updatePlaybackSpeed(speed);
+                    },
+                    shouldPutLeftPaddingWhenNoIcon: true,
+                })),
+            },
+        ],
         [currentPlaybackSpeed, downloadAttachment, translate, updatePlaybackSpeed],
     );
 
diff --git a/src/components/VideoPlayerContexts/types.ts b/src/components/VideoPlayerContexts/types.ts
index 979c36ae9161..a76c948802a9 100644
--- a/src/components/VideoPlayerContexts/types.ts
+++ b/src/components/VideoPlayerContexts/types.ts
@@ -22,9 +22,10 @@ type VolumeContext = {
 };
 
 type SingularMenuItem = {
-    icon?: IconAsset;
+    icon: IconAsset | null;
     text: string;
     onSelected: () => void;
+    shouldPutLeftPaddingWhenNoIcon?: boolean;
 };
 
 type MenuItem = {

From 09aaad54c0a6d71f5db1e16205b537b302deaf66 Mon Sep 17 00:00:00 2001
From: smelaa <aleksandra.smela@gmail.com>
Date: Fri, 23 Feb 2024 14:34:39 +0100
Subject: [PATCH 09/20] reverting || -> ?? change

---
 src/libs/fileDownload/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/fileDownload/index.ts b/src/libs/fileDownload/index.ts
index 431abc49136d..4f43b215925f 100644
--- a/src/libs/fileDownload/index.ts
+++ b/src/libs/fileDownload/index.ts
@@ -29,7 +29,7 @@ const fileDownload: FileDownload = (url, fileName) => {
             // adding href to anchor
             link.href = href;
             link.style.display = 'none';
-            link.download = FileUtils.appendTimeToFileName(fileName ?? FileUtils.getFileName(url));
+            link.download = FileUtils.appendTimeToFileName(fileName || FileUtils.getFileName(url));
 
             // Append to html link element page
             document.body.appendChild(link);

From c69e9f9d33050856c9592117565f4bff70edca9a Mon Sep 17 00:00:00 2001
From: smelaa <aleksandra.smela@gmail.com>
Date: Fri, 23 Feb 2024 15:33:00 +0100
Subject: [PATCH 10/20] eslint disable nullish coalescing

---
 src/libs/fileDownload/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/libs/fileDownload/index.ts b/src/libs/fileDownload/index.ts
index 4f43b215925f..ee54e7623a49 100644
--- a/src/libs/fileDownload/index.ts
+++ b/src/libs/fileDownload/index.ts
@@ -29,6 +29,7 @@ const fileDownload: FileDownload = (url, fileName) => {
             // adding href to anchor
             link.href = href;
             link.style.display = 'none';
+            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- nullish coalescing doesn't achieve the same result in this case
             link.download = FileUtils.appendTimeToFileName(fileName || FileUtils.getFileName(url));
 
             // Append to html link element page

From 5728c397cbb33500ff4e76da4f888a45d9d207bf Mon Sep 17 00:00:00 2001
From: smelaa <aleksandra.smela@gmail.com>
Date: Tue, 27 Feb 2024 16:23:45 +0100
Subject: [PATCH 11/20] Updateing types

---
 src/components/VideoPlayerContexts/types.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/VideoPlayerContexts/types.ts b/src/components/VideoPlayerContexts/types.ts
index a76c948802a9..1ac219874a56 100644
--- a/src/components/VideoPlayerContexts/types.ts
+++ b/src/components/VideoPlayerContexts/types.ts
@@ -10,7 +10,7 @@ type PlaybackContext = {
     originalParent: View | null;
     sharedElement: View | null;
     currentVideoPlayerRef: MutableRefObject<Video | null>;
-    shareVideoPlayerElements: (ref: Video, parent: View, child: View) => void;
+    shareVideoPlayerElements: (ref: Video, parent: View, child: View, isUploading: boolean) => void;
     playVideo: () => void;
     pauseVideo: () => void;
     checkVideoPlaying: (statusCallback: (isPlaying: boolean) => void) => void;
@@ -35,7 +35,7 @@ type MenuItem = {
 };
 
 type VideoPopoverMenuContext = {
-    menuItems: [SingularMenuItem, MenuItem];
+    menuItems: Array<SingularMenuItem | MenuItem>;
     updatePlaybackSpeed: (speed: number) => void;
 };
 

From 90affed1c848afd13eb018346afcd4a1ba33118f Mon Sep 17 00:00:00 2001
From: smelaa <aleksandra.smela@gmail.com>
Date: Tue, 27 Feb 2024 17:11:36 +0100
Subject: [PATCH 12/20] reverting podfile change

---
 ios/Podfile.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 70330abca57b..dc8eb94eeb3f 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -1997,7 +1997,7 @@ SPEC CHECKSUMS:
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Turf: 13d1a92d969ca0311bbc26e8356cca178ce95da2
   VisionCamera: 0a6794d1974aed5d653d0d0cb900493e2583e35a
-  Yoga: 13c8ef87792450193e117976337b8527b49e8c03
+  Yoga: e64aa65de36c0832d04e8c7bd614396c77a80047
 
 PODFILE CHECKSUM: 0ccbb4f2406893c6e9f266dc1e7470dcd72885d2
 

From 6f92384ba7d8b3fe2af1486a0b6b7ff2d8c75201 Mon Sep 17 00:00:00 2001
From: smelaa <aleksandra.smela@gmail.com>
Date: Wed, 28 Feb 2024 11:30:50 +0100
Subject: [PATCH 13/20] Addressing review comments

---
 .../VideoPlayerContexts/PlaybackContext.tsx       | 15 ++++++++-------
 .../VideoPopoverMenuContext.tsx                   | 10 ++++------
 src/components/VideoPlayerContexts/types.ts       |  9 +++++++--
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/VideoPlayerContexts/PlaybackContext.tsx b/src/components/VideoPlayerContexts/PlaybackContext.tsx
index 409c5eefae7a..d086cb7354cb 100644
--- a/src/components/VideoPlayerContexts/PlaybackContext.tsx
+++ b/src/components/VideoPlayerContexts/PlaybackContext.tsx
@@ -1,9 +1,9 @@
-import type {Video} from 'expo-av';
+import type {AVPlaybackStatusToSet, Video} from 'expo-av';
 import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import type {View} from 'react-native';
 import useCurrentReportID from '@hooks/useCurrentReportID';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
-import type {PlaybackContext} from './types';
+import type {PlaybackContext, StatusCallback} from './types';
 
 const Context = React.createContext<PlaybackContext | null>(null);
 
@@ -19,15 +19,16 @@ function PlaybackContextProvider({children}: ChildrenProps) {
     }, [currentVideoPlayerRef]);
 
     const stopVideo = useCallback(() => {
-        currentVideoPlayerRef.current?.stopAsync?.();
+        currentVideoPlayerRef.current?.stopAsync();
     }, [currentVideoPlayerRef]);
 
     const playVideo = useCallback(() => {
-        currentVideoPlayerRef.current?.getStatusAsync?.().then((status) => {
+        currentVideoPlayerRef.current?.getStatusAsync().then((status) => {
+            const newStatus: AVPlaybackStatusToSet = {shouldPlay: true};
             if ('durationMillis' in status && status.durationMillis === status.positionMillis) {
-                currentVideoPlayerRef.current?.setStatusAsync({shouldPlay: true, positionMillis: 0});
+                newStatus.positionMillis = 0;
             }
-            currentVideoPlayerRef.current?.setStatusAsync({shouldPlay: true});
+            currentVideoPlayerRef.current?.setStatusAsync(newStatus);
         });
     }, [currentVideoPlayerRef]);
 
@@ -59,7 +60,7 @@ function PlaybackContextProvider({children}: ChildrenProps) {
     );
 
     const checkVideoPlaying = useCallback(
-        (statusCallback: (isPlaying: boolean) => void) => {
+        (statusCallback: StatusCallback) => {
             currentVideoPlayerRef.current?.getStatusAsync().then((status) => {
                 statusCallback('isPlaying' in status && status.isPlaying);
             });
diff --git a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
index 99c8527225aa..27c4a0dae635 100644
--- a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
+++ b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
@@ -7,18 +7,18 @@ import fileDownload from '@libs/fileDownload';
 import CONST from '@src/CONST';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import {usePlaybackContext} from './PlaybackContext';
-import type {MenuItem, SingularMenuItem, VideoPopoverMenuContext} from './types';
+import type {MenuItem, PlaybackSpeed, SingularMenuItem, VideoPopoverMenuContext} from './types';
 
 const Context = React.createContext<VideoPopoverMenuContext | null>(null);
 
 function VideoPopoverMenuContextProvider({children}: ChildrenProps) {
     const {currentVideoPlayerRef, currentlyPlayingURL} = usePlaybackContext();
     const {translate} = useLocalize();
-    const [currentPlaybackSpeed, setCurrentPlaybackSpeed] = useState<number>(CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS[2]);
+    const [currentPlaybackSpeed, setCurrentPlaybackSpeed] = useState<PlaybackSpeed>(CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS[2]);
     const {isOffline} = useNetwork();
 
     const updatePlaybackSpeed = useCallback(
-        (speed: number) => {
+        (speed: PlaybackSpeed) => {
             setCurrentPlaybackSpeed(speed);
             currentVideoPlayerRef.current?.setStatusAsync({rate: speed});
         },
@@ -29,9 +29,7 @@ function VideoPopoverMenuContextProvider({children}: ChildrenProps) {
         if (currentlyPlayingURL === null) {
             return;
         }
-        const sourceURI =
-            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- nullish coalescing doesn't achieve the same result in this case
-            currentlyPlayingURL.startsWith('blob:') || currentlyPlayingURL.startsWith('file:') ? currentlyPlayingURL : addEncryptedAuthTokenToURL(currentlyPlayingURL);
+        const sourceURI = currentlyPlayingURL.startsWith('blob:') || currentlyPlayingURL.startsWith('file:') ? currentlyPlayingURL : addEncryptedAuthTokenToURL(currentlyPlayingURL);
         fileDownload(sourceURI);
     }, [currentlyPlayingURL]);
 
diff --git a/src/components/VideoPlayerContexts/types.ts b/src/components/VideoPlayerContexts/types.ts
index 1ac219874a56..8fb069a7ac09 100644
--- a/src/components/VideoPlayerContexts/types.ts
+++ b/src/components/VideoPlayerContexts/types.ts
@@ -2,6 +2,7 @@ import type {Video} from 'expo-av';
 import type {MutableRefObject} from 'react';
 import type {View} from 'react-native';
 import type {SharedValue} from 'react-native-reanimated';
+import type CONST from '@src/CONST';
 import type IconAsset from '@src/types/utils/IconAsset';
 
 type PlaybackContext = {
@@ -36,7 +37,11 @@ type MenuItem = {
 
 type VideoPopoverMenuContext = {
     menuItems: Array<SingularMenuItem | MenuItem>;
-    updatePlaybackSpeed: (speed: number) => void;
+    updatePlaybackSpeed: (speed: PlaybackSpeed) => void;
 };
 
-export type {PlaybackContext, VolumeContext, VideoPopoverMenuContext, MenuItem, SingularMenuItem};
+type StatusCallback = (isPlaying: boolean) => void;
+
+type PlaybackSpeed = (typeof CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS)[number];
+
+export type {PlaybackContext, VolumeContext, VideoPopoverMenuContext, MenuItem, SingularMenuItem, StatusCallback, PlaybackSpeed};

From 4108ff4230d477b4f37bc636bfa97f5d3877f14f Mon Sep 17 00:00:00 2001
From: smelaa <aleksandra.smela@gmail.com>
Date: Wed, 28 Feb 2024 11:36:19 +0100
Subject: [PATCH 14/20] Optional chaining removed

---
 src/components/VideoPlayerContexts/PlaybackContext.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VideoPlayerContexts/PlaybackContext.tsx b/src/components/VideoPlayerContexts/PlaybackContext.tsx
index d086cb7354cb..6ef1b9d187ba 100644
--- a/src/components/VideoPlayerContexts/PlaybackContext.tsx
+++ b/src/components/VideoPlayerContexts/PlaybackContext.tsx
@@ -33,7 +33,7 @@ function PlaybackContextProvider({children}: ChildrenProps) {
     }, [currentVideoPlayerRef]);
 
     const unloadVideo = useCallback(() => {
-        currentVideoPlayerRef.current?.unloadAsync?.();
+        currentVideoPlayerRef.current?.unloadAsync();
     }, [currentVideoPlayerRef]);
 
     const updateCurrentlyPlayingURL = useCallback(

From f15e17960b7df1efb546bf14631d91ca29240720 Mon Sep 17 00:00:00 2001
From: smelaa <aleksandra.smela@gmail.com>
Date: Wed, 28 Feb 2024 13:54:32 +0100
Subject: [PATCH 15/20] PopoverMenuItem reuse

---
 src/components/PopoverMenu.tsx                | 36 +++----------------
 .../VideoPopoverMenuContext.tsx               |  7 ++--
 src/components/VideoPlayerContexts/types.ts   | 19 ++--------
 3 files changed, 11 insertions(+), 51 deletions(-)

diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx
index a391ff061baa..4ee070e19893 100644
--- a/src/components/PopoverMenu.tsx
+++ b/src/components/PopoverMenu.tsx
@@ -1,4 +1,3 @@
-import type {ImageContentFit} from 'expo-image';
 import type {RefObject} from 'react';
 import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
@@ -10,48 +9,21 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import CONST from '@src/CONST';
 import type {AnchorPosition} from '@src/styles';
 import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
-import type IconAsset from '@src/types/utils/IconAsset';
 import * as Expensicons from './Icon/Expensicons';
+import type {MenuItemProps} from './MenuItem';
 import MenuItem from './MenuItem';
 import PopoverWithMeasuredContent from './PopoverWithMeasuredContent';
 import Text from './Text';
 
-type PopoverMenuItem = {
-    /** An icon element displayed on the left side */
-    icon: IconAsset;
-
+type PopoverMenuItem = MenuItemProps & {
     /** Text label */
     text: string;
 
     /** A callback triggered when this item is selected */
-    onSelected: () => void;
-
-    /** A description text to show under the title */
-    description?: string;
-
-    /** The fill color to pass into the icon. */
-    iconFill?: string;
-
-    /** Icon Width */
-    iconWidth?: number;
-
-    /** Icon Height */
-    iconHeight?: number;
-
-    /** Icon should be displayed in its own color */
-    displayInDefaultIconColor?: boolean;
-
-    /** Determines how the icon should be resized to fit its container */
-    contentFit?: ImageContentFit;
+    onSelected?: () => void;
 
     /** Sub menu items to be rendered after a menu item is selected */
     subMenuItems?: PopoverMenuItem[];
-
-    /** Determines whether an icon should be displayed on the right side of the menu item. */
-    shouldShowRightIcon?: boolean;
-
-    /** Adds padding to the left of the text when there is no icon. */
-    shouldPutLeftPaddingWhenNoIcon?: boolean;
 };
 
 type PopoverModalProps = Pick<ModalProps, 'animationIn' | 'animationOut' | 'animationInTiming'>;
@@ -181,7 +153,7 @@ function PopoverMenu({
     const onModalHide = () => {
         setFocusedIndex(-1);
         if (selectedItemIndex.current !== null) {
-            currentMenuItems[selectedItemIndex.current].onSelected();
+            currentMenuItems[selectedItemIndex.current].onSelected?.();
             selectedItemIndex.current = null;
         }
     };
diff --git a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
index 27c4a0dae635..b0f9a05bcf3a 100644
--- a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
+++ b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
@@ -1,5 +1,6 @@
 import React, {useCallback, useContext, useMemo, useState} from 'react';
 import * as Expensicons from '@components/Icon/Expensicons';
+import type {PopoverMenuItem} from '@components/PopoverMenu';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
@@ -7,7 +8,7 @@ import fileDownload from '@libs/fileDownload';
 import CONST from '@src/CONST';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import {usePlaybackContext} from './PlaybackContext';
-import type {MenuItem, PlaybackSpeed, SingularMenuItem, VideoPopoverMenuContext} from './types';
+import type {PlaybackSpeed, VideoPopoverMenuContext} from './types';
 
 const Context = React.createContext<VideoPopoverMenuContext | null>(null);
 
@@ -34,7 +35,7 @@ function VideoPopoverMenuContextProvider({children}: ChildrenProps) {
     }, [currentlyPlayingURL]);
 
     const menuItems = useMemo(() => {
-        const items: Array<SingularMenuItem | MenuItem> = [];
+        const items: PopoverMenuItem[] = [];
 
         if (!isOffline) {
             items.push({
@@ -50,7 +51,7 @@ function VideoPopoverMenuContextProvider({children}: ChildrenProps) {
             icon: Expensicons.Meter,
             text: translate('videoPlayer.playbackSpeed'),
             subMenuItems: CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS.map((speed) => ({
-                icon: currentPlaybackSpeed === speed ? Expensicons.Checkmark : null,
+                icon: currentPlaybackSpeed === speed ? Expensicons.Checkmark : undefined,
                 text: speed.toString(),
                 onSelected: () => {
                     updatePlaybackSpeed(speed);
diff --git a/src/components/VideoPlayerContexts/types.ts b/src/components/VideoPlayerContexts/types.ts
index 8fb069a7ac09..f81232216bfc 100644
--- a/src/components/VideoPlayerContexts/types.ts
+++ b/src/components/VideoPlayerContexts/types.ts
@@ -2,8 +2,8 @@ import type {Video} from 'expo-av';
 import type {MutableRefObject} from 'react';
 import type {View} from 'react-native';
 import type {SharedValue} from 'react-native-reanimated';
+import type {PopoverMenuItem} from '@components/PopoverMenu';
 import type CONST from '@src/CONST';
-import type IconAsset from '@src/types/utils/IconAsset';
 
 type PlaybackContext = {
     updateCurrentlyPlayingURL: (url: string) => void;
@@ -22,21 +22,8 @@ type VolumeContext = {
     volume: SharedValue<number>;
 };
 
-type SingularMenuItem = {
-    icon: IconAsset | null;
-    text: string;
-    onSelected: () => void;
-    shouldPutLeftPaddingWhenNoIcon?: boolean;
-};
-
-type MenuItem = {
-    icon: IconAsset;
-    text: string;
-    subMenuItems: SingularMenuItem[];
-};
-
 type VideoPopoverMenuContext = {
-    menuItems: Array<SingularMenuItem | MenuItem>;
+    menuItems: PopoverMenuItem[];
     updatePlaybackSpeed: (speed: PlaybackSpeed) => void;
 };
 
@@ -44,4 +31,4 @@ type StatusCallback = (isPlaying: boolean) => void;
 
 type PlaybackSpeed = (typeof CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS)[number];
 
-export type {PlaybackContext, VolumeContext, VideoPopoverMenuContext, MenuItem, SingularMenuItem, StatusCallback, PlaybackSpeed};
+export type {PlaybackContext, VolumeContext, VideoPopoverMenuContext, StatusCallback, PlaybackSpeed};

From ee6d152917e1d51647123d809c69b1c7bda8890c Mon Sep 17 00:00:00 2001
From: smelaa <aleksandra.smela@gmail.com>
Date: Wed, 28 Feb 2024 16:23:58 +0100
Subject: [PATCH 16/20] addressing reviewer suggestion

---
 src/components/VideoPlayerContexts/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VideoPlayerContexts/types.ts b/src/components/VideoPlayerContexts/types.ts
index f81232216bfc..4abaaf7debb9 100644
--- a/src/components/VideoPlayerContexts/types.ts
+++ b/src/components/VideoPlayerContexts/types.ts
@@ -14,7 +14,7 @@ type PlaybackContext = {
     shareVideoPlayerElements: (ref: Video, parent: View, child: View, isUploading: boolean) => void;
     playVideo: () => void;
     pauseVideo: () => void;
-    checkVideoPlaying: (statusCallback: (isPlaying: boolean) => void) => void;
+    checkVideoPlaying: (statusCallback: StatusCallback) => void;
 };
 
 type VolumeContext = {

From 6d9823a776828faa3cda5dad45e4897f114a74d9 Mon Sep 17 00:00:00 2001
From: smelaa <aleksandra.smela@gmail.com>
Date: Thu, 7 Mar 2024 10:24:07 +0100
Subject: [PATCH 17/20] Add comment to eslint-disable-next-line

---
 src/libs/fileDownload/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/fileDownload/index.ts b/src/libs/fileDownload/index.ts
index ee54e7623a49..c1d4d49b2d31 100644
--- a/src/libs/fileDownload/index.ts
+++ b/src/libs/fileDownload/index.ts
@@ -29,7 +29,7 @@ const fileDownload: FileDownload = (url, fileName) => {
             // adding href to anchor
             link.href = href;
             link.style.display = 'none';
-            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- nullish coalescing doesn't achieve the same result in this case
+            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- nullish coalescing doesn't achieve the same result in this case as fileName can be an emoty string
             link.download = FileUtils.appendTimeToFileName(fileName || FileUtils.getFileName(url));
 
             // Append to html link element page

From c35ac5d5247a8eb8d5ea4794bb49383f0dce048a Mon Sep 17 00:00:00 2001
From: smelaa <aleksandra.smela@gmail.com>
Date: Thu, 7 Mar 2024 17:07:50 +0100
Subject: [PATCH 18/20] Change eslint-disable-next-line comment

---
 src/libs/fileDownload/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/fileDownload/index.ts b/src/libs/fileDownload/index.ts
index c1d4d49b2d31..1e12a5ca321b 100644
--- a/src/libs/fileDownload/index.ts
+++ b/src/libs/fileDownload/index.ts
@@ -29,7 +29,7 @@ const fileDownload: FileDownload = (url, fileName) => {
             // adding href to anchor
             link.href = href;
             link.style.display = 'none';
-            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- nullish coalescing doesn't achieve the same result in this case as fileName can be an emoty string
+            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Disabling this line for safeness as nullish coalescing works only if the value is undefined or null, and since fileName can be an empty string we want to default to `FileUtils.getFileName(url)`
             link.download = FileUtils.appendTimeToFileName(fileName || FileUtils.getFileName(url));
 
             // Append to html link element page

From a7d0fb4c8c92e0fa9df7a92ff982ef4fb1414d9e Mon Sep 17 00:00:00 2001
From: Blazej Kustra <blazej.kustra@swmansion.com>
Date: Mon, 11 Mar 2024 22:41:40 +0100
Subject: [PATCH 19/20] Fix failing typecheck

---
 package-lock.json                      | 147 -------------------------
 src/libs/fileDownload/index.android.ts |   3 +-
 src/libs/fileDownload/index.ios.ts     |   1 +
 3 files changed, 3 insertions(+), 148 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 928938abc7ec..adc7dfc70cee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8045,153 +8045,6 @@
       "integrity": "sha512-C9Br1BQqm6io6lvYHptlLcOHbzlaqxp9tS35P8Qj3pdiiYRTzU3KPvZ61rQ+ZnZ4FOQ6MwPsKsmB8+6WHkAY6Q==",
       "license": "MIT"
     },
-    "node_modules/@onfido/active-video-capture": {
-      "version": "0.28.6",
-      "resolved": "https://registry.npmjs.org/@onfido/active-video-capture/-/active-video-capture-0.28.6.tgz",
-      "integrity": "sha512-RFUeKaOSjj/amPp6VzhVkq/7kIkutEnnttT9n5KDeD3Vx8a09KD3a/xvxdQppveHlDAYsdBP6LrJwSSpjXiprg==",
-      "dependencies": {
-        "@mediapipe/face_detection": "^0.4.1646425229",
-        "@mediapipe/face_mesh": "^0.4.1633559619",
-        "@onfido/castor": "^2.2.2",
-        "@onfido/castor-icons": "^2.12.0",
-        "@tensorflow-models/face-detection": "^1.0.1",
-        "@tensorflow-models/face-landmarks-detection": "^1.0.2",
-        "@tensorflow/tfjs-backend-wasm": "3.20.0",
-        "@tensorflow/tfjs-backend-webgl": "3.20.0",
-        "@tensorflow/tfjs-converter": "3.20.0",
-        "@tensorflow/tfjs-core": "3.20.0",
-        "preact": "10.11.3",
-        "react-webcam": "^7.2.0"
-      },
-      "engines": {
-        "node": ">=16"
-      }
-    },
-    "node_modules/@onfido/active-video-capture/node_modules/@tensorflow-models/face-landmarks-detection": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@tensorflow-models/face-landmarks-detection/-/face-landmarks-detection-1.0.5.tgz",
-      "integrity": "sha512-54XJPi8g29/MknJ33ZBrLsEzr9kw/dJtrJMMD3xrCrnRlfFQPIKQ5PI2Wml55Fz2p4U2hemzBB0/H+S94JddIQ==",
-      "dependencies": {
-        "rimraf": "^3.0.2"
-      },
-      "peerDependencies": {
-        "@mediapipe/face_mesh": "~0.4.0",
-        "@tensorflow-models/face-detection": "~1.0.0",
-        "@tensorflow/tfjs-backend-webgl": "^3.12.0",
-        "@tensorflow/tfjs-converter": "^3.12.0",
-        "@tensorflow/tfjs-core": "^3.12.0"
-      }
-    },
-    "node_modules/@onfido/active-video-capture/node_modules/@tensorflow/tfjs-backend-cpu": {
-      "version": "3.20.0",
-      "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-cpu/-/tfjs-backend-cpu-3.20.0.tgz",
-      "integrity": "sha512-gf075YaBLwSAAiUwa0D4GvYyUBhbJ1BVSivUNQmUfGKvIr2lIhF0qstBr033YTc3lhkbFSHEEPAHh/EfpqyjXQ==",
-      "dependencies": {
-        "@types/seedrandom": "^2.4.28",
-        "seedrandom": "^3.0.5"
-      },
-      "engines": {
-        "yarn": ">= 1.3.2"
-      },
-      "peerDependencies": {
-        "@tensorflow/tfjs-core": "3.20.0"
-      }
-    },
-    "node_modules/@onfido/active-video-capture/node_modules/@tensorflow/tfjs-backend-wasm": {
-      "version": "3.20.0",
-      "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-wasm/-/tfjs-backend-wasm-3.20.0.tgz",
-      "integrity": "sha512-k+sDcrcPtGToLjKRffgtSqlcN4MC6g4hXWRarZfgvvyvFqpxVfVqrGYHGTirXdN47sKYhmcTSMvbM2quGaaQnA==",
-      "dependencies": {
-        "@tensorflow/tfjs-backend-cpu": "3.20.0",
-        "@types/emscripten": "~0.0.34"
-      },
-      "peerDependencies": {
-        "@tensorflow/tfjs-core": "3.20.0"
-      }
-    },
-    "node_modules/@onfido/active-video-capture/node_modules/@tensorflow/tfjs-backend-webgl": {
-      "version": "3.20.0",
-      "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-webgl/-/tfjs-backend-webgl-3.20.0.tgz",
-      "integrity": "sha512-SucbyQ08re3HvRgVfarRtKFIjNM4JvIAzcXmw4vaE/HrCtPEePkGO1VrmfQoN470EdUmGiwgqAjoyBvM2VOlVg==",
-      "dependencies": {
-        "@tensorflow/tfjs-backend-cpu": "3.20.0",
-        "@types/offscreencanvas": "~2019.3.0",
-        "@types/seedrandom": "^2.4.28",
-        "@types/webgl-ext": "0.0.30",
-        "@types/webgl2": "0.0.6",
-        "seedrandom": "^3.0.5"
-      },
-      "engines": {
-        "yarn": ">= 1.3.2"
-      },
-      "peerDependencies": {
-        "@tensorflow/tfjs-core": "3.20.0"
-      }
-    },
-    "node_modules/@onfido/active-video-capture/node_modules/@tensorflow/tfjs-converter": {
-      "version": "3.20.0",
-      "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-converter/-/tfjs-converter-3.20.0.tgz",
-      "integrity": "sha512-8EIYqtQwvSYw9GFNW2OFU8Qnl/FQF/kKAsQJoORYaZ419WJo+FIZWbAWDtCpJSAgkgoHH1jYWgV9H313cVmqxg==",
-      "peerDependencies": {
-        "@tensorflow/tfjs-core": "3.20.0"
-      }
-    },
-    "node_modules/@onfido/active-video-capture/node_modules/@tensorflow/tfjs-core": {
-      "version": "3.20.0",
-      "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-core/-/tfjs-core-3.20.0.tgz",
-      "integrity": "sha512-L16JyVA4a8jFJXFgB9/oYZxcGq/GfLypt5dMVTyedznARZZ9SiY/UMMbo3IKl9ZylG1dOVVTpjzV3EvBYfeJXw==",
-      "dependencies": {
-        "@types/long": "^4.0.1",
-        "@types/offscreencanvas": "~2019.3.0",
-        "@types/seedrandom": "^2.4.28",
-        "@types/webgl-ext": "0.0.30",
-        "@webgpu/types": "0.1.16",
-        "long": "4.0.0",
-        "node-fetch": "~2.6.1",
-        "seedrandom": "^3.0.5"
-      },
-      "engines": {
-        "yarn": ">= 1.3.2"
-      }
-    },
-    "node_modules/@onfido/active-video-capture/node_modules/@webgpu/types": {
-      "version": "0.1.16",
-      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.16.tgz",
-      "integrity": "sha512-9E61voMP4+Rze02jlTXud++Htpjyyk8vw5Hyw9FGRrmhHQg2GqbuOfwf5Klrb8vTxc2XWI3EfO7RUHMpxTj26A=="
-    },
-    "node_modules/@onfido/castor": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@onfido/castor/-/castor-2.3.0.tgz",
-      "integrity": "sha512-FkydkjedS6b2g3SqgZMYnVRZvUs/MkaEuXXJWG9+LNc7DMFT1K8smOnNuHzkiM3cJhXL6yAADdKE0mg+ZIrucQ==",
-      "dependencies": {
-        "@onfido/castor-tokens": "^1.0.0-beta.6",
-        "csstype": "^3.1.1"
-      },
-      "peerDependencies": {
-        "@onfido/castor-icons": ">=1.0.0"
-      }
-    },
-    "node_modules/@onfido/castor-icons": {
-      "version": "2.22.0",
-      "resolved": "https://registry.npmjs.org/@onfido/castor-icons/-/castor-icons-2.22.0.tgz",
-      "integrity": "sha512-7OnCvu5xqVWcBLqovZyb99NP0oHw7sjkVYXZhi438i0U6Pgecrhu/14Gc/IN/kvgDxWj9qmiYdd0qdjNaVckrQ==",
-      "peerDependencies": {
-        "react": ">=17 || ^16.14 || ^15.7 || ^0.14.10"
-      }
-    },
-    "node_modules/@onfido/castor-tokens": {
-      "version": "1.0.0-beta.6",
-      "resolved": "https://registry.npmjs.org/@onfido/castor-tokens/-/castor-tokens-1.0.0-beta.6.tgz",
-      "integrity": "sha512-MfwuSlNdM0Ay0cI3LLyqZGsHW0e1Y1R/0IdQKVU575PdWQx1Q/538aOZMo/a3/oSW0pMEgfOm+mNqPx057cvWA=="
-    },
-    "node_modules/@onfido/opencv": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@onfido/opencv/-/opencv-2.1.1.tgz",
-      "integrity": "sha512-Bwo0YsZrrdm+p5hpNFZ7yrqNVWJxOUbQW9aWDEUtkDWUL+nX2RHIR6F4lBGVmbqnG24anadS/+nEvy80SwD3tQ==",
-      "dependencies": {
-        "mirada": "^0.0.15"
-      }
-    },
     "node_modules/@onfido/react-native-sdk": {
       "version": "10.6.0",
       "resolved": "https://registry.npmjs.org/@onfido/react-native-sdk/-/react-native-sdk-10.6.0.tgz",
diff --git a/src/libs/fileDownload/index.android.ts b/src/libs/fileDownload/index.android.ts
index 7c9d3caf6865..abd116565922 100644
--- a/src/libs/fileDownload/index.android.ts
+++ b/src/libs/fileDownload/index.android.ts
@@ -33,12 +33,13 @@ function hasAndroidPermission(): Promise<boolean> {
 /**
  * Handling the download
  */
-function handleDownload(url: string, fileName: string, successMessage?: string): Promise<void> {
+function handleDownload(url: string, fileName?: string, successMessage?: string): Promise<void> {
     return new Promise((resolve) => {
         const dirs = RNFetchBlob.fs.dirs;
 
         // Android files will download to Download directory
         const path = dirs.DownloadDir;
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Disabling this line for safeness as nullish coalescing works only if the value is undefined or null, and since fileName can be an empty string we want to default to `FileUtils.getFileName(url)`
         const attachmentName = FileUtils.appendTimeToFileName(fileName || FileUtils.getFileName(url));
 
         const isLocalFile = url.startsWith('file://');
diff --git a/src/libs/fileDownload/index.ios.ts b/src/libs/fileDownload/index.ios.ts
index 7960f6c9e4ba..45e6a5027994 100644
--- a/src/libs/fileDownload/index.ios.ts
+++ b/src/libs/fileDownload/index.ios.ts
@@ -71,6 +71,7 @@ const fileDownload: FileDownload = (fileUrl, fileName, successMessage) =>
     new Promise((resolve) => {
         let fileDownloadPromise;
         const fileType = FileUtils.getFileType(fileUrl);
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Disabling this line for safeness as nullish coalescing works only if the value is undefined or null, and since fileName can be an empty string we want to default to `FileUtils.getFileName(url)`
         const attachmentName = FileUtils.appendTimeToFileName(fileName || FileUtils.getFileName(fileUrl));
 
         switch (fileType) {

From 4c579d91c71b3f5e5dbd223d52527584f122e55e Mon Sep 17 00:00:00 2001
From: smelaa <aleksandra.smela@gmail.com>
Date: Wed, 13 Mar 2024 09:31:04 +0100
Subject: [PATCH 20/20] Solving conflict

---
 src/components/PopoverMenu.tsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx
index 7f49cdade859..4ee070e19893 100644
--- a/src/components/PopoverMenu.tsx
+++ b/src/components/PopoverMenu.tsx
@@ -15,14 +15,7 @@ import MenuItem from './MenuItem';
 import PopoverWithMeasuredContent from './PopoverWithMeasuredContent';
 import Text from './Text';
 
-<<<<<<< HEAD
 type PopoverMenuItem = MenuItemProps & {
-=======
-type PopoverMenuItem = {
-    /** An icon element displayed on the left side */
-    icon?: IconAsset;
-
->>>>>>> main
     /** Text label */
     text: string;