From c2656459eaa591c7359b68ef55e516e7837afd52 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com> Date: Mon, 22 Jan 2024 18:39:01 -0300 Subject: [PATCH] feat: add a focus state to audio player (#5491) * feat: add a focus state to audio player * update the rcactivity indicator --------- Co-authored-by: Gleidson Daniel Silva --- .../__snapshots__/Message.stories.storyshot | 2 +- app/containers/AudioPlayer/PlayButton.tsx | 2 +- app/containers/AudioPlayer/PlaybackSpeed.tsx | 4 +--- app/containers/AudioPlayer/index.tsx | 15 +++++++++++++-- app/lib/methods/audioPlayer.ts | 6 ++++++ app/lib/methods/helpers/events.ts | 3 ++- 6 files changed, 24 insertions(+), 8 deletions(-) diff --git a/__tests__/containers/message/__snapshots__/Message.stories.storyshot b/__tests__/containers/message/__snapshots__/Message.stories.storyshot index 254796645..509ce989e 100644 --- a/__tests__/containers/message/__snapshots__/Message.stories.storyshot +++ b/__tests__/containers/message/__snapshots__/Message.stories.storyshot @@ -74,7 +74,7 @@ exports[`Storyshots Message URL Image Preview 1`] = `"{\\"type\\":\\"RCTScrollVi exports[`Storyshots Message With Alias 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginTop\\":4}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=72\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},{\\"marginLeft\\":10}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"space-between\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"flexShrink\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"lineHeight\\":22,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Diego Mello\\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\" @\\",\\"diego.mello\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":13,\\"marginLeft\\":8,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Message\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"Message\\"]}]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginTop\\":4}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.?format=png&size=72\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},{\\"marginLeft\\":10}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"space-between\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"flexShrink\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"lineHeight\\":22,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Diego Mello\\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\" @\\",\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":13,\\"marginLeft\\":8,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Message\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"Message\\"]}]}]}]}]}]}]}]}]}]}"`; -exports[`Storyshots Message With Audio 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginTop\\":4}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=72\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},{\\"marginLeft\\":10}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"space-between\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"flexShrink\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"lineHeight\\":22,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"diego.mello\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":13,\\"marginLeft\\":8,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"This is a description \\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"This is a description \\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},[{\\"width\\":20,\\"height\\":20}]]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/emoji-custom/nyan_rocket.png\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"height\\":56,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"marginBottom\\":8},{\\"backgroundColor\\":\\"#F7F8FA\\",\\"borderColor\\":\\"#EBECEF\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"hitSlop\\":{\\"top\\":8,\\"right\\":8,\\"bottom\\":8,\\"left\\":8},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"alignItems\\":\\"center\\",\\"marginLeft\\":16,\\"height\\":32,\\"width\\":32,\\"borderRadius\\":4,\\"justifyContent\\":\\"center\\",\\"backgroundColor\\":\\"#156FF5\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null],\\"color\\":\\"#9ca2a8\\"},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"flex\\":1,\\"alignItems\\":\\"center\\",\\"height\\":\\"100%\\"},\\"accessible\\":true,\\"focusable\\":false},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"defaultValue\\":\\"00:00\\",\\"editable\\":false,\\"style\\":[{\\"marginHorizontal\\":12,\\"fontVariant\\":[\\"tabular-nums\\"],\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2F343D\\"}],\\"animatedProps\\":{\\"text\\":\\"00:00\\"}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginRight\\":12,\\"height\\":\\"100%\\",\\"justifyContent\\":\\"center\\",\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":4,\\"borderRadius\\":2,\\"width\\":\\"100%\\"},{\\"backgroundColor\\":\\"#CBCED1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":4,\\"borderRadius\\":2,\\"width\\":\\"100%\\"},{\\"width\\":0},{\\"backgroundColor\\":\\"#156FF5\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"hitSlop\\":{\\"top\\":12,\\"right\\":8,\\"bottom\\":12,\\"left\\":8},\\"style\\":[{\\"height\\":12,\\"width\\":12,\\"borderRadius\\":6,\\"position\\":\\"absolute\\"},{\\"backgroundColor\\":\\"#88B4F5\\"},{\\"transform\\":[{\\"translateX\\":-6},{\\"scale\\":1}]}]},\\"children\\":null}]}]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},false]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"First message\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"First message\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":null}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},false]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"This is a description\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"This is a description\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"height\\":56,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"marginBottom\\":8},{\\"backgroundColor\\":\\"#F7F8FA\\",\\"borderColor\\":\\"#EBECEF\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"hitSlop\\":{\\"top\\":8,\\"right\\":8,\\"bottom\\":8,\\"left\\":8},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"alignItems\\":\\"center\\",\\"marginLeft\\":16,\\"height\\":32,\\"width\\":32,\\"borderRadius\\":4,\\"justifyContent\\":\\"center\\",\\"backgroundColor\\":\\"#156FF5\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null],\\"color\\":\\"#9ca2a8\\"},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"flex\\":1,\\"alignItems\\":\\"center\\",\\"height\\":\\"100%\\"},\\"accessible\\":true,\\"focusable\\":false},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"defaultValue\\":\\"00:00\\",\\"editable\\":false,\\"style\\":[{\\"marginHorizontal\\":12,\\"fontVariant\\":[\\"tabular-nums\\"],\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2F343D\\"}],\\"animatedProps\\":{\\"text\\":\\"00:00\\"}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginRight\\":12,\\"height\\":\\"100%\\",\\"justifyContent\\":\\"center\\",\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":4,\\"borderRadius\\":2,\\"width\\":\\"100%\\"},{\\"backgroundColor\\":\\"#CBCED1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":4,\\"borderRadius\\":2,\\"width\\":\\"100%\\"},{\\"width\\":0},{\\"backgroundColor\\":\\"#156FF5\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"hitSlop\\":{\\"top\\":12,\\"right\\":8,\\"bottom\\":12,\\"left\\":8},\\"style\\":[{\\"height\\":12,\\"width\\":12,\\"borderRadius\\":6,\\"position\\":\\"absolute\\"},{\\"backgroundColor\\":\\"#88B4F5\\"},{\\"transform\\":[{\\"translateX\\":-6},{\\"scale\\":1}]}]},\\"children\\":null}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":null}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},false]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"height\\":56,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"marginBottom\\":8},{\\"backgroundColor\\":\\"#F7F8FA\\",\\"borderColor\\":\\"#EBECEF\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"hitSlop\\":{\\"top\\":8,\\"right\\":8,\\"bottom\\":8,\\"left\\":8},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"alignItems\\":\\"center\\",\\"marginLeft\\":16,\\"height\\":32,\\"width\\":32,\\"borderRadius\\":4,\\"justifyContent\\":\\"center\\",\\"backgroundColor\\":\\"#156FF5\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null],\\"color\\":\\"#9ca2a8\\"},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"flex\\":1,\\"alignItems\\":\\"center\\",\\"height\\":\\"100%\\"},\\"accessible\\":true,\\"focusable\\":false},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"defaultValue\\":\\"00:00\\",\\"editable\\":false,\\"style\\":[{\\"marginHorizontal\\":12,\\"fontVariant\\":[\\"tabular-nums\\"],\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2F343D\\"}],\\"animatedProps\\":{\\"text\\":\\"00:00\\"}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginRight\\":12,\\"height\\":\\"100%\\",\\"justifyContent\\":\\"center\\",\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":4,\\"borderRadius\\":2,\\"width\\":\\"100%\\"},{\\"backgroundColor\\":\\"#CBCED1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":4,\\"borderRadius\\":2,\\"width\\":\\"100%\\"},{\\"width\\":0},{\\"backgroundColor\\":\\"#156FF5\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"hitSlop\\":{\\"top\\":12,\\"right\\":8,\\"bottom\\":12,\\"left\\":8},\\"style\\":[{\\"height\\":12,\\"width\\":12,\\"borderRadius\\":6,\\"position\\":\\"absolute\\"},{\\"backgroundColor\\":\\"#88B4F5\\"},{\\"transform\\":[{\\"translateX\\":-6},{\\"scale\\":1}]}]},\\"children\\":null}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":null}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},false]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"height\\":56,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"marginBottom\\":8},{\\"backgroundColor\\":\\"#F7F8FA\\",\\"borderColor\\":\\"#EBECEF\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"hitSlop\\":{\\"top\\":8,\\"right\\":8,\\"bottom\\":8,\\"left\\":8},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"alignItems\\":\\"center\\",\\"marginLeft\\":16,\\"height\\":32,\\"width\\":32,\\"borderRadius\\":4,\\"justifyContent\\":\\"center\\",\\"backgroundColor\\":\\"#156FF5\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null],\\"color\\":\\"#9ca2a8\\"},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"flex\\":1,\\"alignItems\\":\\"center\\",\\"height\\":\\"100%\\"},\\"accessible\\":true,\\"focusable\\":false},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"defaultValue\\":\\"00:00\\",\\"editable\\":false,\\"style\\":[{\\"marginHorizontal\\":12,\\"fontVariant\\":[\\"tabular-nums\\"],\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2F343D\\"}],\\"animatedProps\\":{\\"text\\":\\"00:00\\"}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginRight\\":12,\\"height\\":\\"100%\\",\\"justifyContent\\":\\"center\\",\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":4,\\"borderRadius\\":2,\\"width\\":\\"100%\\"},{\\"backgroundColor\\":\\"#CBCED1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":4,\\"borderRadius\\":2,\\"width\\":\\"100%\\"},{\\"width\\":0},{\\"backgroundColor\\":\\"#156FF5\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"hitSlop\\":{\\"top\\":12,\\"right\\":8,\\"bottom\\":12,\\"left\\":8},\\"style\\":[{\\"height\\":12,\\"width\\":12,\\"borderRadius\\":6,\\"position\\":\\"absolute\\"},{\\"backgroundColor\\":\\"#88B4F5\\"},{\\"transform\\":[{\\"translateX\\":-6},{\\"scale\\":1}]}]},\\"children\\":null}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":null}]}]}]}]}]}]}"`; +exports[`Storyshots Message With Audio 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginTop\\":4}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=72\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},{\\"marginLeft\\":10}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"space-between\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"flexShrink\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"lineHeight\\":22,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"diego.mello\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":13,\\"marginLeft\\":8,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"This is a description \\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"This is a description \\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},[{\\"width\\":20,\\"height\\":20}]]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/emoji-custom/nyan_rocket.png\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"height\\":56,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"marginBottom\\":8},{\\"backgroundColor\\":\\"#F7F8FA\\",\\"borderColor\\":\\"#EBECEF\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"hitSlop\\":{\\"top\\":8,\\"right\\":8,\\"bottom\\":8,\\"left\\":8},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"alignItems\\":\\"center\\",\\"marginLeft\\":16,\\"height\\":32,\\"width\\":32,\\"borderRadius\\":4,\\"justifyContent\\":\\"center\\",\\"backgroundColor\\":\\"#156FF5\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null],\\"color\\":\\"#FFFFFF\\",\\"size\\":24},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"flex\\":1,\\"alignItems\\":\\"center\\",\\"height\\":\\"100%\\"},\\"accessible\\":true,\\"focusable\\":false},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"defaultValue\\":\\"00:00\\",\\"editable\\":false,\\"style\\":[{\\"marginHorizontal\\":12,\\"fontVariant\\":[\\"tabular-nums\\"],\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2F343D\\"}],\\"animatedProps\\":{\\"text\\":\\"00:00\\"}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginRight\\":12,\\"height\\":\\"100%\\",\\"justifyContent\\":\\"center\\",\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":4,\\"borderRadius\\":2,\\"width\\":\\"100%\\"},{\\"backgroundColor\\":\\"#CBCED1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":4,\\"borderRadius\\":2,\\"width\\":\\"100%\\"},{\\"width\\":0},{\\"backgroundColor\\":\\"#156FF5\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"hitSlop\\":{\\"top\\":12,\\"right\\":8,\\"bottom\\":12,\\"left\\":8},\\"style\\":[{\\"height\\":12,\\"width\\":12,\\"borderRadius\\":6,\\"position\\":\\"absolute\\"},{\\"backgroundColor\\":\\"#88B4F5\\"},{\\"transform\\":[{\\"translateX\\":-6},{\\"scale\\":1}]}]},\\"children\\":null}]}]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},false]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"First message\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"First message\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":null}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},false]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"This is a description\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"This is a description\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"height\\":56,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"marginBottom\\":8},{\\"backgroundColor\\":\\"#F7F8FA\\",\\"borderColor\\":\\"#EBECEF\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"hitSlop\\":{\\"top\\":8,\\"right\\":8,\\"bottom\\":8,\\"left\\":8},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"alignItems\\":\\"center\\",\\"marginLeft\\":16,\\"height\\":32,\\"width\\":32,\\"borderRadius\\":4,\\"justifyContent\\":\\"center\\",\\"backgroundColor\\":\\"#156FF5\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null],\\"color\\":\\"#FFFFFF\\",\\"size\\":24},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"flex\\":1,\\"alignItems\\":\\"center\\",\\"height\\":\\"100%\\"},\\"accessible\\":true,\\"focusable\\":false},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"defaultValue\\":\\"00:00\\",\\"editable\\":false,\\"style\\":[{\\"marginHorizontal\\":12,\\"fontVariant\\":[\\"tabular-nums\\"],\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2F343D\\"}],\\"animatedProps\\":{\\"text\\":\\"00:00\\"}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginRight\\":12,\\"height\\":\\"100%\\",\\"justifyContent\\":\\"center\\",\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":4,\\"borderRadius\\":2,\\"width\\":\\"100%\\"},{\\"backgroundColor\\":\\"#CBCED1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":4,\\"borderRadius\\":2,\\"width\\":\\"100%\\"},{\\"width\\":0},{\\"backgroundColor\\":\\"#156FF5\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"hitSlop\\":{\\"top\\":12,\\"right\\":8,\\"bottom\\":12,\\"left\\":8},\\"style\\":[{\\"height\\":12,\\"width\\":12,\\"borderRadius\\":6,\\"position\\":\\"absolute\\"},{\\"backgroundColor\\":\\"#88B4F5\\"},{\\"transform\\":[{\\"translateX\\":-6},{\\"scale\\":1}]}]},\\"children\\":null}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":null}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},false]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"height\\":56,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"marginBottom\\":8},{\\"backgroundColor\\":\\"#F7F8FA\\",\\"borderColor\\":\\"#EBECEF\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"hitSlop\\":{\\"top\\":8,\\"right\\":8,\\"bottom\\":8,\\"left\\":8},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"alignItems\\":\\"center\\",\\"marginLeft\\":16,\\"height\\":32,\\"width\\":32,\\"borderRadius\\":4,\\"justifyContent\\":\\"center\\",\\"backgroundColor\\":\\"#156FF5\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null],\\"color\\":\\"#FFFFFF\\",\\"size\\":24},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"flex\\":1,\\"alignItems\\":\\"center\\",\\"height\\":\\"100%\\"},\\"accessible\\":true,\\"focusable\\":false},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"defaultValue\\":\\"00:00\\",\\"editable\\":false,\\"style\\":[{\\"marginHorizontal\\":12,\\"fontVariant\\":[\\"tabular-nums\\"],\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2F343D\\"}],\\"animatedProps\\":{\\"text\\":\\"00:00\\"}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginRight\\":12,\\"height\\":\\"100%\\",\\"justifyContent\\":\\"center\\",\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":4,\\"borderRadius\\":2,\\"width\\":\\"100%\\"},{\\"backgroundColor\\":\\"#CBCED1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":4,\\"borderRadius\\":2,\\"width\\":\\"100%\\"},{\\"width\\":0},{\\"backgroundColor\\":\\"#156FF5\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"hitSlop\\":{\\"top\\":12,\\"right\\":8,\\"bottom\\":12,\\"left\\":8},\\"style\\":[{\\"height\\":12,\\"width\\":12,\\"borderRadius\\":6,\\"position\\":\\"absolute\\"},{\\"backgroundColor\\":\\"#88B4F5\\"},{\\"transform\\":[{\\"translateX\\":-6},{\\"scale\\":1}]}]},\\"children\\":null}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":null}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},false]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"height\\":56,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"marginBottom\\":8},{\\"backgroundColor\\":\\"#F7F8FA\\",\\"borderColor\\":\\"#EBECEF\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"hitSlop\\":{\\"top\\":8,\\"right\\":8,\\"bottom\\":8,\\"left\\":8},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"alignItems\\":\\"center\\",\\"marginLeft\\":16,\\"height\\":32,\\"width\\":32,\\"borderRadius\\":4,\\"justifyContent\\":\\"center\\",\\"backgroundColor\\":\\"#156FF5\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null],\\"color\\":\\"#FFFFFF\\",\\"size\\":24},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"flex\\":1,\\"alignItems\\":\\"center\\",\\"height\\":\\"100%\\"},\\"accessible\\":true,\\"focusable\\":false},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"defaultValue\\":\\"00:00\\",\\"editable\\":false,\\"style\\":[{\\"marginHorizontal\\":12,\\"fontVariant\\":[\\"tabular-nums\\"],\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2F343D\\"}],\\"animatedProps\\":{\\"text\\":\\"00:00\\"}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginRight\\":12,\\"height\\":\\"100%\\",\\"justifyContent\\":\\"center\\",\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":4,\\"borderRadius\\":2,\\"width\\":\\"100%\\"},{\\"backgroundColor\\":\\"#CBCED1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":4,\\"borderRadius\\":2,\\"width\\":\\"100%\\"},{\\"width\\":0},{\\"backgroundColor\\":\\"#156FF5\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"hitSlop\\":{\\"top\\":12,\\"right\\":8,\\"bottom\\":12,\\"left\\":8},\\"style\\":[{\\"height\\":12,\\"width\\":12,\\"borderRadius\\":6,\\"position\\":\\"absolute\\"},{\\"backgroundColor\\":\\"#88B4F5\\"},{\\"transform\\":[{\\"translateX\\":-6},{\\"scale\\":1}]}]},\\"children\\":null}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":null}]}]}]}]}]}]}"`; exports[`Storyshots Message With File 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginTop\\":4}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=72\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},{\\"marginLeft\\":10}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"space-between\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"flexShrink\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"lineHeight\\":22,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"diego.mello\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":13,\\"marginLeft\\":8,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"testID\\":\\"reply-undefined-File.pdf\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginVertical\\":4,\\"alignSelf\\":\\"flex-start\\",\\"borderLeftWidth\\":2,\\"marginBottom\\":4,\\"borderColor\\":\\"#e1e5e8\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"borderRadius\\":4,\\"flexDirection\\":\\"column\\",\\"paddingVertical\\":4,\\"paddingLeft\\":8}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginBottom\\":8}},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"},{\\"color\\":\\"#6C727A\\",\\"fontSize\\":14}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"File.pdf\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"File.pdf\\"]}]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"This is a description \\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"This is a description \\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},[{\\"width\\":20,\\"height\\":20}]]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/emoji-custom/nyan_rocket.png\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},false]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"testID\\":\\"reply-undefined-File.pdf\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginVertical\\":4,\\"alignSelf\\":\\"flex-start\\",\\"borderLeftWidth\\":2,\\"marginBottom\\":4,\\"borderColor\\":\\"#e1e5e8\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"borderRadius\\":4,\\"flexDirection\\":\\"column\\",\\"paddingVertical\\":4,\\"paddingLeft\\":8}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginBottom\\":8}},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"},{\\"color\\":\\"#6C727A\\",\\"fontSize\\":14}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"File.pdf\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"File.pdf\\"]}]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"This is a description \\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"This is a description \\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},[{\\"width\\":20,\\"height\\":20}]]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/emoji-custom/nyan_rocket.png\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":null}]}]}]}]}]}]}"`; diff --git a/app/containers/AudioPlayer/PlayButton.tsx b/app/containers/AudioPlayer/PlayButton.tsx index 25b7c7172..82ddd0902 100644 --- a/app/containers/AudioPlayer/PlayButton.tsx +++ b/app/containers/AudioPlayer/PlayButton.tsx @@ -20,7 +20,7 @@ const Icon = ({ audioState, disabled }: { audioState: TAudioState; disabled: boo const { colors } = useTheme(); if (audioState === 'loading') { - return ; + return ; } let customIconName: TCustomIconName = 'arrow-down'; diff --git a/app/containers/AudioPlayer/PlaybackSpeed.tsx b/app/containers/AudioPlayer/PlaybackSpeed.tsx index 0672e6c04..4df4164c4 100644 --- a/app/containers/AudioPlayer/PlaybackSpeed.tsx +++ b/app/containers/AudioPlayer/PlaybackSpeed.tsx @@ -4,11 +4,10 @@ import { Text } from 'react-native'; import styles from './styles'; import { useTheme } from '../../theme'; import { AUDIO_PLAYBACK_SPEED, AVAILABLE_SPEEDS } from './constants'; -import { TAudioState } from './types'; import { useUserPreferences } from '../../lib/methods'; import NativeButton from '../NativeButton'; -const PlaybackSpeed = ({ audioState }: { audioState: TAudioState }) => { +const PlaybackSpeed = () => { const [playbackSpeed, setPlaybackSpeed] = useUserPreferences(AUDIO_PLAYBACK_SPEED, AVAILABLE_SPEEDS[1]); const { colors } = useTheme(); @@ -20,7 +19,6 @@ const PlaybackSpeed = ({ audioState }: { audioState: TAudioState }) => { return ( diff --git a/app/containers/AudioPlayer/index.tsx b/app/containers/AudioPlayer/index.tsx index c23d89684..52609fc3f 100644 --- a/app/containers/AudioPlayer/index.tsx +++ b/app/containers/AudioPlayer/index.tsx @@ -10,7 +10,8 @@ import styles from './styles'; import Seek from './Seek'; import PlaybackSpeed from './PlaybackSpeed'; import PlayButton from './PlayButton'; -import audioPlayer from '../../lib/methods/audioPlayer'; +import EventEmitter from '../../lib/methods/helpers/events'; +import audioPlayer, { AUDIO_FOCUSED } from '../../lib/methods/audioPlayer'; import { AUDIO_PLAYBACK_SPEED, AVAILABLE_SPEEDS } from './constants'; import { TDownloadState } from '../../lib/methods/handleMediaDownload'; import { TAudioState } from './types'; @@ -39,6 +40,7 @@ const AudioPlayer = ({ const [playbackSpeed] = useUserPreferences(AUDIO_PLAYBACK_SPEED, AVAILABLE_SPEEDS[1]); const [paused, setPaused] = useState(true); + const [focused, setFocused] = useState(false); const duration = useSharedValue(0); const currentTime = useSharedValue(0); const { colors } = useTheme(); @@ -139,6 +141,15 @@ const AudioPlayer = ({ }; }, [navigation]); + useEffect(() => { + const listener = EventEmitter.addEventListener(AUDIO_FOCUSED, ({ audioFocused }: { audioFocused: string }) => { + setFocused(audioFocused === audioUri.current); + }); + return () => { + EventEmitter.removeListener(AUDIO_FOCUSED, listener); + }; + }, []); + let audioState: TAudioState = 'to-download'; if (isLoading) { audioState = 'loading'; @@ -154,7 +165,7 @@ const AudioPlayer = ({ - {audioState === 'playing' ? : null} + {audioState === 'playing' || focused ? : null} ); }; diff --git a/app/lib/methods/audioPlayer.ts b/app/lib/methods/audioPlayer.ts index a0c3cdd72..4bf3816f1 100644 --- a/app/lib/methods/audioPlayer.ts +++ b/app/lib/methods/audioPlayer.ts @@ -1,5 +1,9 @@ import { AVPlaybackStatus, Audio, InterruptionModeAndroid, InterruptionModeIOS } from 'expo-av'; +import EventEmitter from './helpers/events'; + +export const AUDIO_FOCUSED = 'AUDIO_FOCUSED'; + const AUDIO_MODE = { allowsRecordingIOS: false, playsInSilentModeIOS: true, @@ -42,6 +46,7 @@ class AudioPlayer { try { await this.audioQueue[audioKey]?.stopAsync(); this.audioPlaying = ''; + EventEmitter.emit(AUDIO_FOCUSED, { audioFocused: '' }); } catch { // do nothing } @@ -62,6 +67,7 @@ class AudioPlayer { await Audio.setAudioModeAsync(AUDIO_MODE); await this.audioQueue[audioKey]?.playAsync(); this.audioPlaying = audioKey; + EventEmitter.emit(AUDIO_FOCUSED, { audioFocused: audioKey }); } async pauseAudio(audioKey: string) { diff --git a/app/lib/methods/helpers/events.ts b/app/lib/methods/helpers/events.ts index 66fe3d762..ff3ff3e65 100644 --- a/app/lib/methods/helpers/events.ts +++ b/app/lib/methods/helpers/events.ts @@ -12,7 +12,8 @@ type TEventEmitterEmmitArgs = | { visible: boolean; onCancel?: null | Function } | { cancel: () => void } | { submit: (param: string) => void } - | IEmitUserInteraction; + | IEmitUserInteraction + | { audioFocused: string }; class EventEmitter { private events: { [key: string]: any };