npm - @planningcenter/chat-react-native - Versions diffs - 3.4.1-rc.1 → 3.4.1-rc.11 - Mend

@planningcenter/chat-react-native 3.4.1-rc.1 → 3.4.1-rc.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (178) hide show

package/build/components/conversation/attachments/audio_attachment.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import React from 'react';
 import { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource';
-export declare function AudioAttachment({ attachment, }: {
+export declare function AudioAttachment({ attachment, onAttachmentLongPress, }: {
     attachment: DenormalizedMessageAttachmentResource;
+    onAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void;
 }): React.JSX.Element;
 //# sourceMappingURL=audio_attachment.d.ts.map

package/build/components/conversation/attachments/audio_attachment.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"audio_attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/audio_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,qCAAqC,EAAE,MAAM,2DAA2D,CAAA;~~AAOjH~~,wBAAgB,eAAe,CAAC,EAC9B,UAAU,~~GACX~~,EAAE;IACD,UAAU,EAAE,qCAAqC,CAAA;~~CAClD~~,~~qBA6CA~~"}
1	+ {"version":3,"file":"audio_attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/audio_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,qCAAqC,EAAE,MAAM,2DAA2D,CAAA;AAQjH,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,qBAAqB,GACtB,EAAE;IACD,UAAU,EAAE,qCAAqC,CAAA;IACjD,qBAAqB,EAAE,CAAC,UAAU,EAAE,qCAAqC,KAAK,IAAI,CAAA;CACnF,qBAkDA"}

package/build/components/conversation/attachments/audio_attachment.js CHANGED Viewed

@@ -5,7 +5,8 @@ import { AttachmentCard, AttachmentCardTitle } from './attachment_card';
 import { tokens } from '../../../vendor/tapestry/tokens';
 import { useTheme } from '../../../hooks';
 import { Audio } from '../../../utils/native_adapters';
-export function AudioAttachment({ attachment, }) {
+import { PlatformPressable } from '@react-navigation/elements';
+export function AudioAttachment({ attachment, onAttachmentLongPress, }) {
     const styles = useStyles();
     const { attributes } = attachment;
     const { url, filename } = attributes;
@@ -27,18 +28,20 @@ export function AudioAttachment({ attachment, }) {
             return 'Loading...';
         }
     }
-    return (<AttachmentCard>
-      <View style={styles.container}>
-        <IconButton name={sound.isPlaying ? 'services.pause' : 'services.play'} size="md" accessibilityLabel={sound.isPlaying ? 'Pause' : 'Play'} onPress={toggleAudio} disabled={!sound} style={styles.button}/>
-        <View style={styles.details}>
-          <AttachmentCardTitle>{filename}</AttachmentCardTitle>
-          <View style={styles.progressContainer}>
-            <View style={[styles.progressBar, { width: `${progress * 100}%` }]}/>
+    return (<PlatformPressable onLongPress={() => onAttachmentLongPress(attachment)} accessibilityHint="Long press for more options">
+      <AttachmentCard>
+        <View style={styles.container}>
+          <IconButton name={sound.isPlaying ? 'services.pause' : 'services.play'} size="md" accessibilityLabel={sound.isPlaying ? 'Pause' : 'Play'} onPress={toggleAudio} disabled={!sound} style={styles.button}/>
+          <View style={styles.details}>
+            <AttachmentCardTitle>{filename}</AttachmentCardTitle>
+            <View style={styles.progressContainer}>
+              <View style={[styles.progressBar, { width: `${progress * 100}%` }]}/>
+            </View>
+            <Text style={styles.durationText}>{durationText()}</Text>
           </View>
-          <Text style={styles.durationText}>{durationText()}</Text>
         </View>
-      </View>
-    </AttachmentCard>);
+      </AttachmentCard>
+    </PlatformPressable>);
 }
 const useStyles = () => {
     const { colors } = useTheme();

package/build/components/conversation/attachments/audio_attachment.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"audio_attachment.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/audio_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,gCAAgC,CAAA;~~AAEtD~~,MAAM,UAAU,eAAe,CAAC,EAC9B,UAAU,~~GAGX~~;IACC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAA;IACjC,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAA;IACpC,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAA;IAEjC,SAAS,WAAW;QAClB,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;YACrB,KAAK,CAAC,IAAI,EAAE,CAAA;QACd,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,KAAK,EAAE,CAAA;QACf,CAAC;IACH,CAAC;IAED,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;IAEzE,SAAS,YAAY;QACnB,IAAI,KAAK,CAAC,QAAQ,GAAG,CAAC,EAAE,CAAC;YACvB,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAA;QACxF,CAAC;aAAM,CAAC;YACN,OAAO,YAAY,CAAA;QACrB,CAAC;IACH,CAAC;IAED,OAAO,CACL,CAAC,cAAc,CACb;~~MAAA~~,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;~~QAAA~~,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAC3D,IAAI,CAAC,IAAI,CACT,kBAAkB,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CACvD,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CACjB,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EAEvB;~~QAAA~~,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAC1B;~~UAAA~~,CAAC,mBAAmB,CAAC,CAAC,QAAQ,CAAC,EAAE,mBAAmB,CACpD;~~UAAA~~,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CACpC;~~YAAA~~,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,GAAG,QAAQ,GAAG,GAAG,GAAG,EAAE,CAAC,CAAC,EACrE;~~UAAA~~,EAAE,IAAI,CACN;~~UAAA~~,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,EAAE,IAAI,CAC1D;~~QAAA~~,EAAE,IAAI,CACR;~~MAAA~~,EAAE,IAAI,CACR;~~IAAA~~,EAAE,cAAc,CAAC,~~CAClB~~,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,aAAa,EAAE,KAAK;SACrB;QACD,MAAM,EAAE;YACN,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,YAAY,EAAE,EAAE;YAChB,eAAe,EAAE,MAAM;YACvB,WAAW,EAAE,MAAM;YACnB,WAAW,EAAE,CAAC;SACf;QACD,UAAU,EAAE;YACV,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;SACf;QACD,OAAO,EAAE;YACP,IAAI,EAAE,CAAC;YACP,UAAU,EAAE,EAAE;YACd,GAAG,EAAE,CAAC;SACP;QACD,iBAAiB,EAAE;YACjB,MAAM,EAAE,CAAC;YACT,eAAe,EAAE,MAAM;YACvB,YAAY,EAAE,GAAG;YACjB,QAAQ,EAAE,QAAQ;SACnB;QACD,WAAW,EAAE;YACX,MAAM,EAAE,MAAM;YACd,eAAe,EAAE,MAAM;SACxB;QACD,YAAY,EAAE;YACZ,QAAQ,EAAE,MAAM,CAAC,UAAU;YAC3B,KAAK,EAAE,MAAM,CAAC,yBAAyB;SACxC;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { View, Text, StyleSheet } from 'react-native'\nimport { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'\nimport { IconButton } from '../../display'\nimport { AttachmentCard, AttachmentCardTitle } from './attachment_card'\nimport { tokens } from '../../../vendor/tapestry/tokens'\nimport { useTheme } from '../../../hooks'\nimport { Audio } from '../../../utils/native_adapters'\n\nexport function AudioAttachment({\n attachment,\n}: {\n attachment: DenormalizedMessageAttachmentResource\n}) {\n const styles = useStyles()\n const { attributes } = attachment\n const { url, filename } = attributes\n const sound = Audio.useAudio(url)\n\n function toggleAudio() {\n if (!sound.isPlaying) {\n sound.play()\n } else {\n sound.pause()\n }\n }\n\n const progress = sound.duration > 0 ? sound.position / sound.duration : 0\n\n function durationText() {\n if (sound.duration > 0) {\n return `${Math.floor(sound.position / 1000)}s / ${Math.floor(sound.duration / 1000)}s`\n } else {\n return 'Loading...'\n }\n }\n\n return (\n <~~AttachmentCard~~>\n <View style={styles.container}>\n <IconButton\n name={sound.isPlaying ? 'services.pause' : 'services.play'}\n size=\"md\"\n accessibilityLabel={sound.isPlaying ? 'Pause' : 'Play'}\n onPress={toggleAudio}\n disabled={!sound}\n style={styles.button}\n />\n <View style={styles.details}>\n <AttachmentCardTitle>{filename}</AttachmentCardTitle>\n <View style={styles.progressContainer}>\n <View style={[styles.progressBar, { width: `${progress * 100}%` }]} />\n </View>\n <Text style={styles.durationText}>{durationText()}</Text>\n </View>\n </~~View~~>\n </~~AttachmentCard~~>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n container: {\n flexDirection: 'row',\n },\n button: {\n width: 42,\n height: 42,\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: 25,\n backgroundColor: '#eee',\n borderColor: '#aaa',\n borderWidth: 1,\n },\n buttonText: {\n fontSize: 32,\n lineHeight: 32,\n },\n details: {\n flex: 1,\n marginLeft: 10,\n gap: 5,\n },\n progressContainer: {\n height: 5,\n backgroundColor: '#ccc',\n borderRadius: 2.5,\n overflow: 'hidden',\n },\n progressBar: {\n height: '100%',\n backgroundColor: 'blue',\n },\n durationText: {\n fontSize: tokens.fontSizeXs,\n color: colors.textColorDefaultSecondary,\n },\n })\n}\n"]}
1	+ {"version":3,"file":"audio_attachment.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/audio_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,gCAAgC,CAAA;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAE9D,MAAM,UAAU,eAAe,CAAC,EAC9B,UAAU,EACV,qBAAqB,GAItB;IACC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAA;IACjC,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAA;IACpC,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAA;IAEjC,SAAS,WAAW;QAClB,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;YACrB,KAAK,CAAC,IAAI,EAAE,CAAA;QACd,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,KAAK,EAAE,CAAA;QACf,CAAC;IACH,CAAC;IAED,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;IAEzE,SAAS,YAAY;QACnB,IAAI,KAAK,CAAC,QAAQ,GAAG,CAAC,EAAE,CAAC;YACvB,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAA;QACxF,CAAC;aAAM,CAAC;YACN,OAAO,YAAY,CAAA;QACrB,CAAC;IACH,CAAC;IAED,OAAO,CACL,CAAC,iBAAiB,CAChB,WAAW,CAAC,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,CACrD,iBAAiB,CAAC,6BAA6B,CAE/C;MAAA,CAAC,cAAc,CACb;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;UAAA,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAC3D,IAAI,CAAC,IAAI,CACT,kBAAkB,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CACvD,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CACjB,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EAEvB;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAC1B;YAAA,CAAC,mBAAmB,CAAC,CAAC,QAAQ,CAAC,EAAE,mBAAmB,CACpD;YAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CACpC;cAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,GAAG,QAAQ,GAAG,GAAG,GAAG,EAAE,CAAC,CAAC,EACrE;YAAA,EAAE,IAAI,CACN;YAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,EAAE,IAAI,CAC1D;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,cAAc,CAClB;IAAA,EAAE,iBAAiB,CAAC,CACrB,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,aAAa,EAAE,KAAK;SACrB;QACD,MAAM,EAAE;YACN,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,YAAY,EAAE,EAAE;YAChB,eAAe,EAAE,MAAM;YACvB,WAAW,EAAE,MAAM;YACnB,WAAW,EAAE,CAAC;SACf;QACD,UAAU,EAAE;YACV,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;SACf;QACD,OAAO,EAAE;YACP,IAAI,EAAE,CAAC;YACP,UAAU,EAAE,EAAE;YACd,GAAG,EAAE,CAAC;SACP;QACD,iBAAiB,EAAE;YACjB,MAAM,EAAE,CAAC;YACT,eAAe,EAAE,MAAM;YACvB,YAAY,EAAE,GAAG;YACjB,QAAQ,EAAE,QAAQ;SACnB;QACD,WAAW,EAAE;YACX,MAAM,EAAE,MAAM;YACd,eAAe,EAAE,MAAM;SACxB;QACD,YAAY,EAAE;YACZ,QAAQ,EAAE,MAAM,CAAC,UAAU;YAC3B,KAAK,EAAE,MAAM,CAAC,yBAAyB;SACxC;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { View, Text, StyleSheet } from 'react-native'\nimport { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'\nimport { IconButton } from '../../display'\nimport { AttachmentCard, AttachmentCardTitle } from './attachment_card'\nimport { tokens } from '../../../vendor/tapestry/tokens'\nimport { useTheme } from '../../../hooks'\nimport { Audio } from '../../../utils/native_adapters'\nimport { PlatformPressable } from '@react-navigation/elements'\n\nexport function AudioAttachment({\n attachment,\n onAttachmentLongPress,\n}: {\n attachment: DenormalizedMessageAttachmentResource\n onAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void\n}) {\n const styles = useStyles()\n const { attributes } = attachment\n const { url, filename } = attributes\n const sound = Audio.useAudio(url)\n\n function toggleAudio() {\n if (!sound.isPlaying) {\n sound.play()\n } else {\n sound.pause()\n }\n }\n\n const progress = sound.duration > 0 ? sound.position / sound.duration : 0\n\n function durationText() {\n if (sound.duration > 0) {\n return `${Math.floor(sound.position / 1000)}s / ${Math.floor(sound.duration / 1000)}s`\n } else {\n return 'Loading...'\n }\n }\n\n return (\n <PlatformPressable\n onLongPress={() => onAttachmentLongPress(attachment)}\n accessibilityHint=\"Long press for more options\"\n >\n <AttachmentCard>\n <View style={styles.container}>\n <IconButton\n name={sound.isPlaying ? 'services.pause' : 'services.play'}\n size=\"md\"\n accessibilityLabel={sound.isPlaying ? 'Pause' : 'Play'}\n onPress={toggleAudio}\n disabled={!sound}\n style={styles.button}\n />\n <View style={styles.details}>\n <AttachmentCardTitle>{filename}</AttachmentCardTitle>\n <View style={styles.progressContainer}>\n <View style={[styles.progressBar, { width: `${progress * 100}%` }]} />\n </View>\n <Text style={styles.durationText}>{durationText()}</Text>\n </View>\n </View>\n </AttachmentCard>\n </PlatformPressable>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n container: {\n flexDirection: 'row',\n },\n button: {\n width: 42,\n height: 42,\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: 25,\n backgroundColor: '#eee',\n borderColor: '#aaa',\n borderWidth: 1,\n },\n buttonText: {\n fontSize: 32,\n lineHeight: 32,\n },\n details: {\n flex: 1,\n marginLeft: 10,\n gap: 5,\n },\n progressContainer: {\n height: 5,\n backgroundColor: '#ccc',\n borderRadius: 2.5,\n overflow: 'hidden',\n },\n progressBar: {\n height: '100%',\n backgroundColor: 'blue',\n },\n durationText: {\n fontSize: tokens.fontSizeXs,\n color: colors.textColorDefaultSecondary,\n },\n })\n}\n"]}

package/build/components/conversation/attachments/expanded_link.d.ts CHANGED Viewed

@@ -1,5 +1,7 @@
 import React from 'react';
-export declare function ExpandedLink({ attachment }: {
-    attachment: any;
+import { DenormalizedExpandedLinkAttachmentResource } from '../../../types/resources/denormalized_attachment_resource';
+export declare function ExpandedLink({ attachment, onAttachmentLongPress, }: {
+    attachment: DenormalizedExpandedLinkAttachmentResource;
+    onAttachmentLongPress: (attachment: DenormalizedExpandedLinkAttachmentResource) => void;
 }): React.JSX.Element;
 //# sourceMappingURL=expanded_link.d.ts.map

package/build/components/conversation/attachments/expanded_link.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"expanded_link.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/expanded_link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;~~AAKzB~~,wBAAgB,YAAY,CAAC,EAAE,UAAU,EAAE,~~EAAE~~;~~IAAE~~,UAAU,EAAE,~~GAAG~~,CAAA;~~CAAE~~,~~qBAwB/D~~"}
1	+ {"version":3,"file":"expanded_link.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/expanded_link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,EAAE,0CAA0C,EAAE,MAAM,2DAA2D,CAAA;AAGtH,wBAAgB,YAAY,CAAC,EAC3B,UAAU,EACV,qBAAqB,GACtB,EAAE;IACD,UAAU,EAAE,0CAA0C,CAAA;IACtD,qBAAqB,EAAE,CAAC,UAAU,EAAE,0CAA0C,KAAK,IAAI,CAAA;CACxF,qBA6BA"}

package/build/components/conversation/attachments/expanded_link.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import React from 'react';
-import { Image, Linking, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Image, Linking, StyleSheet, Text, View } from 'react-native';
 import { useTheme } from '../../../hooks';
 import { tokens } from '../../../vendor/tapestry/tokens';
-export function ExpandedLink({ attachment }) {
+import { PlatformPressable } from '@react-navigation/elements';
+export function ExpandedLink({ attachment, onAttachmentLongPress, }) {
     const styles = useStyles();
     const { attributes } = attachment;
     const { url, title, description, imageUrl, imageHeight, imageWidth } = attributes;
@@ -11,13 +12,13 @@ export function ExpandedLink({ attachment }) {
         if (url)
             Linking.openURL(url);
     }
-    return (<Pressable style={styles.container} onPress={openUrl}>
+    return (<PlatformPressable style={styles.container} onPress={openUrl} onLongPress={() => onAttachmentLongPress(attachment)} accessibilityHint="Long press for more options">
       {imageUrl && (<Image source={{ uri: imageUrl }} style={[styles.image, { aspectRatio }]} alt={title}/>)}
       {(title || description) && (<View style={styles.textWrapper}>
           {title && <Text style={styles.title}>{title}</Text>}
           {description && <Text style={styles.description}>{description}</Text>}
         </View>)}
-    </Pressable>);
+    </PlatformPressable>);
 }
 const useStyles = () => {
     const { colors } = useTheme();

package/build/components/conversation/attachments/expanded_link.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"expanded_link.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/expanded_link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,~~SAAS,EAAE,~~UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;~~AAChF~~,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAA;AAExD,MAAM,UAAU,YAAY,CAAC,~~EAAE~~,UAAU,~~EAAuB~~;~~IAC9D~~,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAA;IACjC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,UAAU,CAAA;IAEjF,MAAM,WAAW,GAAG,UAAU,IAAI,WAAW,CAAC,CAAC,CAAC,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA;IAE5E,KAAK,UAAU,OAAO;QACpB,IAAI,GAAG;YAAE,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;IAC/B,CAAC;IAED,OAAO,CACL,CAAC,~~SAAS~~,~~CAAC~~,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,~~CAAC~~,OAAO,CAAC,CAAC,OAAO,CAAC,~~CACnD~~;MAAA,CAAC,QAAQ,IAAI,CACX,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,EAAG,CACzF,CACD;MAAA,CAAC,CAAC,KAAK,IAAI,WAAW,CAAC,IAAI,CACzB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAC9B;UAAA,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CACnD;UAAA,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CACvE;QAAA,EAAE,IAAI,CAAC,CACR,CACH;IAAA,EAAE,~~SAAS~~,CAAC,~~CACb~~,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE,EAAE;QACb,KAAK,EAAE;YACL,YAAY,EAAE,CAAC;SAChB;QACD,WAAW,EAAE;YACX,GAAG,EAAE,CAAC;YACN,OAAO,EAAE,CAAC;SACX;QACD,KAAK,EAAE;YACL,QAAQ,EAAE,MAAM,CAAC,UAAU;YAC3B,UAAU,EAAE,MAAM,CAAC,gBAAgB;YACnC,KAAK,EAAE,MAAM,CAAC,uBAAuB;SACtC;QACD,WAAW,EAAE;YACX,QAAQ,EAAE,MAAM,CAAC,UAAU;YAC3B,KAAK,EAAE,MAAM,CAAC,uBAAuB;SACtC;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { Image, Linking, ~~Pressable,~~ StyleSheet, Text, View } from 'react-native'\nimport { useTheme } from '../../../hooks'\nimport { tokens } from '../../../vendor/tapestry/tokens'\n\nexport function ExpandedLink({ attachment }: { attachment: ~~any~~ }) {\n const styles = useStyles()\n const { attributes } = attachment\n const { url, title, description, imageUrl, imageHeight, imageWidth } = attributes\n\n const aspectRatio = imageWidth && imageHeight ? imageWidth / imageHeight : 1\n\n async function openUrl() {\n if (url) Linking.openURL(url)\n }\n\n return (\n <~~Pressable~~ style={styles.container} onPress={openUrl}>\n {imageUrl && (\n <Image source={{ uri: imageUrl }} style={[styles.image, { aspectRatio }]} alt={title} />\n )}\n {(title \|\| description) && (\n <View style={styles.textWrapper}>\n {title && <Text style={styles.title}>{title}</Text>}\n {description && <Text style={styles.description}>{description}</Text>}\n </View>\n )}\n </~~Pressable~~>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n container: {},\n image: {\n borderRadius: 8,\n },\n textWrapper: {\n gap: 4,\n padding: 8,\n },\n title: {\n fontSize: tokens.fontSizeSm,\n fontWeight: tokens.fontWeightMedium,\n color: colors.textColorDefaultPrimary,\n },\n description: {\n fontSize: tokens.fontSizeXs,\n color: colors.textColorDefaultPrimary,\n },\n })\n}\n"]}
1	+ {"version":3,"file":"expanded_link.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/expanded_link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAA;AAExD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAE9D,MAAM,UAAU,YAAY,CAAC,EAC3B,UAAU,EACV,qBAAqB,GAItB;IACC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAA;IACjC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,UAAU,CAAA;IAEjF,MAAM,WAAW,GAAG,UAAU,IAAI,WAAW,CAAC,CAAC,CAAC,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA;IAE5E,KAAK,UAAU,OAAO;QACpB,IAAI,GAAG;YAAE,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;IAC/B,CAAC;IAED,OAAO,CACL,CAAC,iBAAiB,CAChB,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CACxB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,WAAW,CAAC,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,CACrD,iBAAiB,CAAC,6BAA6B,CAE/C;MAAA,CAAC,QAAQ,IAAI,CACX,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,EAAG,CACzF,CACD;MAAA,CAAC,CAAC,KAAK,IAAI,WAAW,CAAC,IAAI,CACzB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAC9B;UAAA,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CACnD;UAAA,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CACvE;QAAA,EAAE,IAAI,CAAC,CACR,CACH;IAAA,EAAE,iBAAiB,CAAC,CACrB,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE,EAAE;QACb,KAAK,EAAE;YACL,YAAY,EAAE,CAAC;SAChB;QACD,WAAW,EAAE;YACX,GAAG,EAAE,CAAC;YACN,OAAO,EAAE,CAAC;SACX;QACD,KAAK,EAAE;YACL,QAAQ,EAAE,MAAM,CAAC,UAAU;YAC3B,UAAU,EAAE,MAAM,CAAC,gBAAgB;YACnC,KAAK,EAAE,MAAM,CAAC,uBAAuB;SACtC;QACD,WAAW,EAAE;YACX,QAAQ,EAAE,MAAM,CAAC,UAAU;YAC3B,KAAK,EAAE,MAAM,CAAC,uBAAuB;SACtC;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { Image, Linking, StyleSheet, Text, View } from 'react-native'\nimport { useTheme } from '../../../hooks'\nimport { tokens } from '../../../vendor/tapestry/tokens'\nimport { DenormalizedExpandedLinkAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'\nimport { PlatformPressable } from '@react-navigation/elements'\n\nexport function ExpandedLink({\n attachment,\n onAttachmentLongPress,\n}: {\n attachment: DenormalizedExpandedLinkAttachmentResource\n onAttachmentLongPress: (attachment: DenormalizedExpandedLinkAttachmentResource) => void\n}) {\n const styles = useStyles()\n const { attributes } = attachment\n const { url, title, description, imageUrl, imageHeight, imageWidth } = attributes\n\n const aspectRatio = imageWidth && imageHeight ? imageWidth / imageHeight : 1\n\n async function openUrl() {\n if (url) Linking.openURL(url)\n }\n\n return (\n <PlatformPressable\n style={styles.container}\n onPress={openUrl}\n onLongPress={() => onAttachmentLongPress(attachment)}\n accessibilityHint=\"Long press for more options\"\n >\n {imageUrl && (\n <Image source={{ uri: imageUrl }} style={[styles.image, { aspectRatio }]} alt={title} />\n )}\n {(title \|\| description) && (\n <View style={styles.textWrapper}>\n {title && <Text style={styles.title}>{title}</Text>}\n {description && <Text style={styles.description}>{description}</Text>}\n </View>\n )}\n </PlatformPressable>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n container: {},\n image: {\n borderRadius: 8,\n },\n textWrapper: {\n gap: 4,\n padding: 8,\n },\n title: {\n fontSize: tokens.fontSizeSm,\n fontWeight: tokens.fontWeightMedium,\n color: colors.textColorDefaultPrimary,\n },\n description: {\n fontSize: tokens.fontSizeXs,\n color: colors.textColorDefaultPrimary,\n },\n })\n}\n"]}

package/build/components/conversation/attachments/generic_file_attachment.d.ts CHANGED Viewed

@@ -1,7 +1,8 @@
 import React from 'react';
 import { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource';
-export declare function GenericFileAttachment({ attachment, }: {
+export declare function GenericFileAttachment({ attachment, onAttachmentLongPress, }: {
     attachment: DenormalizedMessageAttachmentResource;
+    onAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void;
 }): React.JSX.Element;
 export declare function getAttachmentIconName(type: string): "general.outlinedImageFile" | "general.outlinedVideoFile" | "general.outlinedMusicFile" | "general.outlinedPdfFile" | "general.outlinedGenericFile";
 //# sourceMappingURL=generic_file_attachment.d.ts.map

package/build/components/conversation/attachments/generic_file_attachment.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"generic_file_attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/generic_file_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,qCAAqC,EAAE,MAAM,2DAA2D,CAAA;~~AAMjH~~,wBAAgB,qBAAqB,CAAC,EACpC,UAAU,~~GACX~~,EAAE;IACD,UAAU,EAAE,qCAAqC,CAAA;~~CAClD~~,~~qBAuBA~~;AA4BD,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,uJAWjD"}
1	+ {"version":3,"file":"generic_file_attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/generic_file_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,qCAAqC,EAAE,MAAM,2DAA2D,CAAA;AAOjH,wBAAgB,qBAAqB,CAAC,EACpC,UAAU,EACV,qBAAqB,GACtB,EAAE;IACD,UAAU,EAAE,qCAAqC,CAAA;IACjD,qBAAqB,EAAE,CAAC,UAAU,EAAE,qCAAqC,KAAK,IAAI,CAAA;CACnF,qBA0BA;AA4BD,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,uJAWjD"}

package/build/components/conversation/attachments/generic_file_attachment.js CHANGED Viewed

@@ -1,15 +1,16 @@
 import React from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { AttachmentCard, AttachmentCardTitle } from './attachment_card';
 import { Icon } from '../../display';
 import { DownloadAttachmentButton } from './download_attachment_button';
 import { useTheme } from '../../../hooks';
-export function GenericFileAttachment({ attachment, }) {
+import { PlatformPressable } from '@react-navigation/elements';
+export function GenericFileAttachment({ attachment, onAttachmentLongPress, }) {
     const styles = useStyles();
     const { url, filename, contentType } = attachment.attributes;
     const iconName = getAttachmentIconName(contentType);
     const fileTypeLabel = contentType === 'application/pdf' ? 'PDF' : 'file';
-    return (<Pressable>
+    return (<PlatformPressable onLongPress={() => onAttachmentLongPress(attachment)} accessibilityHint="Long press for more options">
       <AttachmentCard>
         <View style={styles.container}>
           <View style={styles.stack}>
@@ -19,7 +20,7 @@ export function GenericFileAttachment({ attachment, }) {
           <DownloadAttachmentButton to={url} filename={filename} title={`Download ${fileTypeLabel}`}/>
         </View>
       </AttachmentCard>
-    </Pressable>);
+    </PlatformPressable>);
 }
 const useStyles = () => {
     const { colors } = useTheme();

package/build/components/conversation/attachments/generic_file_attachment.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"generic_file_attachment.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/generic_file_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,~~SAAS,EAAE,~~UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;~~AAE1D~~,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AACvE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;~~AAEzC~~,MAAM,UAAU,qBAAqB,CAAC,EACpC,UAAU,~~GAGX~~;IACC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,UAAU,CAAA;IAC5D,MAAM,QAAQ,GAAG,qBAAqB,CAAC,WAAW,CAAC,CAAA;IACnD,MAAM,aAAa,GAAG,WAAW,KAAK,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAA;IAExE,OAAO,CACL,CAAC,~~SAAS~~,~~CACR~~;MAAA,CAAC,cAAc,CACb;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACxB;YAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,EACrB;YAAA,CAAC,mBAAmB,CAAC,CAAC,QAAQ,CAAC,EAAE,mBAAmB,CACtD;UAAA,EAAE,IAAI,CACN;UAAA,CAAC,wBAAwB,CACvB,EAAE,CAAC,CAAC,GAAG,CAAC,CACR,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,KAAK,CAAC,CAAC,YAAY,aAAa,EAAE,CAAC,EAEvC;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,cAAc,CAClB;IAAA,EAAE,~~SAAS~~,CAAC,~~CACb~~,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,OAAO,EAAE,CAAC;YACV,GAAG,EAAE,CAAC;YACN,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,eAAe;YAC/B,SAAS,EAAE,EAAE;SACd;QACD,KAAK,EAAE;YACL,GAAG,EAAE,CAAC;YACN,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,QAAQ,EAAE,KAAK;SAChB;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,MAAM,CAAC,uBAAuB;YACrC,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;SACX;KACF,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,UAAU,qBAAqB,CAAC,IAAY;IAChD,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAA;IACzC,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAA;IACzC,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAA;IACzC,MAAM,KAAK,GAAG,IAAI,KAAK,iBAAiB,CAAA;IAExC,IAAI,OAAO;QAAE,OAAO,2BAA2B,CAAA;IAC/C,IAAI,OAAO;QAAE,OAAO,2BAA2B,CAAA;IAC/C,IAAI,OAAO;QAAE,OAAO,2BAA2B,CAAA;IAC/C,IAAI,KAAK;QAAE,OAAO,yBAAyB,CAAA;IAC3C,OAAO,6BAA6B,CAAA;AACtC,CAAC","sourcesContent":["import React from 'react'\nimport { ~~Pressable,~~ StyleSheet, View } from 'react-native'\nimport { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'\nimport { AttachmentCard, AttachmentCardTitle } from './attachment_card'\nimport { Icon } from '../../display'\nimport { DownloadAttachmentButton } from './download_attachment_button'\nimport { useTheme } from '../../../hooks'\n\nexport function GenericFileAttachment({\n attachment,\n}: {\n attachment: DenormalizedMessageAttachmentResource\n}) {\n const styles = useStyles()\n const { url, filename, contentType } = attachment.attributes\n const iconName = getAttachmentIconName(contentType)\n const fileTypeLabel = contentType === 'application/pdf' ? 'PDF' : 'file'\n\n return (\n <~~Pressable~~>\n <AttachmentCard>\n <View style={styles.container}>\n <View style={styles.stack}>\n <Icon name={iconName} />\n <AttachmentCardTitle>{filename}</AttachmentCardTitle>\n </View>\n <DownloadAttachmentButton\n to={url}\n filename={filename}\n title={`Download ${fileTypeLabel}`}\n />\n </View>\n </AttachmentCard>\n </~~Pressable~~>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n container: {\n padding: 8,\n gap: 4,\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'space-between',\n minHeight: 48,\n },\n stack: {\n gap: 4,\n flexDirection: 'row',\n alignItems: 'center',\n maxWidth: '70%',\n },\n icon: {\n color: colors.textColorDefaultPrimary,\n width: 24,\n height: 24,\n },\n })\n}\n\nexport function getAttachmentIconName(type: string) {\n const isImage = type.startsWith('image/')\n const isVideo = type.startsWith('video/')\n const isAudio = type.startsWith('audio/')\n const isPdf = type === 'application/pdf'\n\n if (isImage) return 'general.outlinedImageFile'\n if (isVideo) return 'general.outlinedVideoFile'\n if (isAudio) return 'general.outlinedMusicFile'\n if (isPdf) return 'general.outlinedPdfFile'\n return 'general.outlinedGenericFile'\n}\n"]}
1	+ {"version":3,"file":"generic_file_attachment.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/generic_file_attachment.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'\nimport { AttachmentCard, AttachmentCardTitle } from './attachment_card'\nimport { Icon } from '../../display'\nimport { DownloadAttachmentButton } from './download_attachment_button'\nimport { useTheme } from '../../../hooks'\nimport { PlatformPressable } from '@react-navigation/elements'\n\nexport function GenericFileAttachment({\n attachment,\n onAttachmentLongPress,\n}: {\n attachment: DenormalizedMessageAttachmentResource\n onAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void\n}) {\n const styles = useStyles()\n const { url, filename, contentType } = attachment.attributes\n const iconName = getAttachmentIconName(contentType)\n const fileTypeLabel = contentType === 'application/pdf' ? 'PDF' : 'file'\n\n return (\n <PlatformPressable\n onLongPress={() => onAttachmentLongPress(attachment)}\n accessibilityHint=\"Long press for more options\"\n >\n <AttachmentCard>\n <View style={styles.container}>\n <View style={styles.stack}>\n <Icon name={iconName} />\n <AttachmentCardTitle>{filename}</AttachmentCardTitle>\n </View>\n <DownloadAttachmentButton\n to={url}\n filename={filename}\n title={`Download ${fileTypeLabel}`}\n />\n </View>\n </AttachmentCard>\n </PlatformPressable>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n container: {\n padding: 8,\n gap: 4,\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'space-between',\n minHeight: 48,\n },\n stack: {\n gap: 4,\n flexDirection: 'row',\n alignItems: 'center',\n maxWidth: '70%',\n },\n icon: {\n color: colors.textColorDefaultPrimary,\n width: 24,\n height: 24,\n },\n })\n}\n\nexport function getAttachmentIconName(type: string) {\n const isImage = type.startsWith('image/')\n const isVideo = type.startsWith('video/')\n const isAudio = type.startsWith('audio/')\n const isPdf = type === 'application/pdf'\n\n if (isImage) return 'general.outlinedImageFile'\n if (isVideo) return 'general.outlinedVideoFile'\n if (isAudio) return 'general.outlinedMusicFile'\n if (isPdf) return 'general.outlinedPdfFile'\n return 'general.outlinedGenericFile'\n}\n"]}

package/build/components/conversation/attachments/giphy_attachment.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import React from 'react';
 import { DenormalizedGiphyAttachmentResource } from '../../../types/resources/denormalized_attachment_resource';
-export declare function GiphyAttachment({ attachment, }: {
+export declare function GiphyAttachment({ attachment, onAttachmentLongPress, }: {
     attachment: DenormalizedGiphyAttachmentResource;
+    onAttachmentLongPress: (attachment: DenormalizedGiphyAttachmentResource) => void;
 }): React.JSX.Element;
 //# sourceMappingURL=giphy_attachment.d.ts.map

package/build/components/conversation/attachments/giphy_attachment.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"giphy_attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/giphy_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,EAAE,mCAAmC,EAAE,MAAM,2DAA2D,CAAA;AAE/G,wBAAgB,eAAe,CAAC,EAC9B,UAAU,~~GACX~~,EAAE;IACD,UAAU,EAAE,mCAAmC,CAAA;~~CAChD~~,~~qBAwBA~~"}
1	+ {"version":3,"file":"giphy_attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/giphy_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,EAAE,mCAAmC,EAAE,MAAM,2DAA2D,CAAA;AAE/G,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,qBAAqB,GACtB,EAAE;IACD,UAAU,EAAE,mCAAmC,CAAA;IAC/C,qBAAqB,EAAE,CAAC,UAAU,EAAE,mCAAmC,KAAK,IAAI,CAAA;CACjF,qBA6BA"}

package/build/components/conversation/attachments/giphy_attachment.js CHANGED Viewed

@@ -2,7 +2,7 @@ import React from 'react';
 import { Text, Image, StyleSheet, Linking, Pressable } from 'react-native';
 import { tokens } from '../../../vendor/tapestry/tokens';
 import { useTheme } from '../../../hooks';
-export function GiphyAttachment({ attachment, }) {
+export function GiphyAttachment({ attachment, onAttachmentLongPress, }) {
     const styles = useStyles();
     const { title, titleLink, giphy } = attachment;
     const { url, width, height } = giphy.fixedWidth;
@@ -12,7 +12,7 @@ export function GiphyAttachment({ attachment, }) {
             Linking.openURL(titleLink);
         }
     }
-    return (<Pressable onPress={handlePress} style={styles.container}>
+    return (<Pressable onPress={handlePress} style={styles.container} onLongPress={() => onAttachmentLongPress(attachment)} accessibilityHint="Long press for more options">
       <Image source={{ uri: url }} style={[styles.image, { width, height }]} accessibilityLabel={title}/>
       <Text style={styles.link}>
         <Text style={styles.tag}>/giphy</Text> {title}

package/build/components/conversation/attachments/giphy_attachment.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"giphy_attachment.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/giphy_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGzC,MAAM,UAAU,eAAe,CAAC,EAC9B,UAAU,~~GAGX~~;IACC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,UAAU,CAAA;IAC9C,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,UAAU,CAAA;IAE/C,SAAS,WAAW;QAClB,IAAI,SAAS,EAAE,CAAC;YACd,6CAA6C;YAC7C,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAA;QAC5B,CAAC;IACH,CAAC;IAED,OAAO,CACL,CAAC,SAAS,~~CAAC~~,OAAO,CAAC,CAAC,WAAW,CAAC,~~CAAC~~,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,~~CACvD~~;MAAA,CAAC,KAAK,CACJ,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CACrB,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CACzC,kBAAkB,CAAC,CAAC,KAAK,CAAC,EAE5B;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CACvB;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,IAAI,CAAE,CAAA,CAAC,KAAK,CAC/C;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,SAAS,CAAC,CACb,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,GAAG,EAAE,CAAC;SACP;QACD,KAAK,EAAE;YACL,YAAY,EAAE,CAAC;SAChB;QACD,IAAI,EAAE;YACJ,QAAQ,EAAE,MAAM,CAAC,UAAU;YAC3B,KAAK,EAAE,MAAM,CAAC,2BAA2B;YACzC,iBAAiB,EAAE,CAAC;YACpB,eAAe,EAAE,CAAC;SACnB;QACD,GAAG,EAAE;YACH,UAAU,EAAE,MAAM;SACnB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { Text, Image, StyleSheet, Linking, Pressable } from 'react-native'\nimport { tokens } from '../../../vendor/tapestry/tokens'\nimport { useTheme } from '../../../hooks'\nimport { DenormalizedGiphyAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'\n\nexport function GiphyAttachment({\n attachment,\n}: {\n attachment: DenormalizedGiphyAttachmentResource\n}) {\n const styles = useStyles()\n const { title, titleLink, giphy } = attachment\n const { url, width, height } = giphy.fixedWidth\n\n function handlePress() {\n if (titleLink) {\n // Open Giphy link in the default web browser\n Linking.openURL(titleLink)\n }\n }\n\n return (\n <Pressable onPress={handlePress} style={styles.container}>\n <Image\n source={{ uri: url }}\n style={[styles.image, { width, height }]}\n accessibilityLabel={title}\n />\n <Text style={styles.link}>\n <Text style={styles.tag}>/giphy</Text> {title}\n </Text>\n </Pressable>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n return StyleSheet.create({\n container: {\n gap: 4,\n },\n image: {\n borderRadius: 8,\n },\n link: {\n fontSize: tokens.fontSizeSm,\n color: colors.fillColorInteractionDefault,\n paddingHorizontal: 8,\n paddingVertical: 6,\n },\n tag: {\n fontWeight: 'bold',\n },\n })\n}\n"]}
1	+ {"version":3,"file":"giphy_attachment.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/giphy_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGzC,MAAM,UAAU,eAAe,CAAC,EAC9B,UAAU,EACV,qBAAqB,GAItB;IACC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,UAAU,CAAA;IAC9C,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,UAAU,CAAA;IAE/C,SAAS,WAAW;QAClB,IAAI,SAAS,EAAE,CAAC;YACd,6CAA6C;YAC7C,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAA;QAC5B,CAAC;IACH,CAAC;IAED,OAAO,CACL,CAAC,SAAS,CACR,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CACxB,WAAW,CAAC,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,CACrD,iBAAiB,CAAC,6BAA6B,CAE/C;MAAA,CAAC,KAAK,CACJ,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CACrB,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CACzC,kBAAkB,CAAC,CAAC,KAAK,CAAC,EAE5B;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CACvB;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,IAAI,CAAE,CAAA,CAAC,KAAK,CAC/C;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,SAAS,CAAC,CACb,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,GAAG,EAAE,CAAC;SACP;QACD,KAAK,EAAE;YACL,YAAY,EAAE,CAAC;SAChB;QACD,IAAI,EAAE;YACJ,QAAQ,EAAE,MAAM,CAAC,UAAU;YAC3B,KAAK,EAAE,MAAM,CAAC,2BAA2B;YACzC,iBAAiB,EAAE,CAAC;YACpB,eAAe,EAAE,CAAC;SACnB;QACD,GAAG,EAAE;YACH,UAAU,EAAE,MAAM;SACnB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { Text, Image, StyleSheet, Linking, Pressable } from 'react-native'\nimport { tokens } from '../../../vendor/tapestry/tokens'\nimport { useTheme } from '../../../hooks'\nimport { DenormalizedGiphyAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'\n\nexport function GiphyAttachment({\n attachment,\n onAttachmentLongPress,\n}: {\n attachment: DenormalizedGiphyAttachmentResource\n onAttachmentLongPress: (attachment: DenormalizedGiphyAttachmentResource) => void\n}) {\n const styles = useStyles()\n const { title, titleLink, giphy } = attachment\n const { url, width, height } = giphy.fixedWidth\n\n function handlePress() {\n if (titleLink) {\n // Open Giphy link in the default web browser\n Linking.openURL(titleLink)\n }\n }\n\n return (\n <Pressable\n onPress={handlePress}\n style={styles.container}\n onLongPress={() => onAttachmentLongPress(attachment)}\n accessibilityHint=\"Long press for more options\"\n >\n <Image\n source={{ uri: url }}\n style={[styles.image, { width, height }]}\n accessibilityLabel={title}\n />\n <Text style={styles.link}>\n <Text style={styles.tag}>/giphy</Text> {title}\n </Text>\n </Pressable>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n return StyleSheet.create({\n container: {\n gap: 4,\n },\n image: {\n borderRadius: 8,\n },\n link: {\n fontSize: tokens.fontSizeSm,\n color: colors.fillColorInteractionDefault,\n paddingHorizontal: 8,\n paddingVertical: 6,\n },\n tag: {\n fontWeight: 'bold',\n },\n })\n}\n"]}

package/build/components/conversation/attachments/image_attachment.d.ts CHANGED Viewed

@@ -1,5 +1,12 @@
 import React from 'react';
-export declare function ImageAttachment({ attachment }: {
-    attachment: any;
+import { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource';
+export type MetaProps = {
+    authorName: string;
+    createdAt: string;
+};
+export declare function ImageAttachment({ attachment, metaProps, onAttachmentLongPress, }: {
+    attachment: DenormalizedMessageAttachmentResource;
+    metaProps: MetaProps;
+    onAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void;
 }): React.JSX.Element;
 //# sourceMappingURL=image_attachment.d.ts.map

package/build/components/conversation/attachments/image_attachment.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"image_attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/image_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,~~KAAK~~,MAAM,OAAO,CAAA;~~AAGzB~~,wBAAgB,eAAe,CAAC,EAAE,UAAU,EAAE,EAAE;~~IAAE~~,UAAU,EAAE,~~GAAG~~,CAAA;~~CAAE~~,~~qBAelE~~"}
1	+ {"version":3,"file":"image_attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/image_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAA;AA2B7D,OAAO,EAAE,qCAAqC,EAAE,MAAM,2DAA2D,CAAA;AAKjH,MAAM,MAAM,SAAS,GAAG;IACtB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,SAAS,EACT,qBAAqB,GACtB,EAAE;IACD,UAAU,EAAE,qCAAqC,CAAA;IACjD,SAAS,EAAE,SAAS,CAAA;IACpB,qBAAqB,EAAE,CAAC,UAAU,EAAE,qCAAqC,KAAK,IAAI,CAAA;CACnF,qBA4DA"}

package/build/components/conversation/attachments/image_attachment.js CHANGED Viewed

@@ -1,23 +1,138 @@
-import React from 'react';
-import { View, Image, StyleSheet } from 'react-native';
-export function ImageAttachment({ attachment }) {
-    const styles = useStyles();
+import React, { useCallback, useMemo, useState } from 'react';
+import { StyleSheet, Modal, useWindowDimensions, SafeAreaView, View, Linking, } from 'react-native';
+import { Gesture, GestureDetector, GestureHandlerRootView, } from 'react-native-gesture-handler';
+import { runOnJS, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { tokens } from '../../../vendor/tapestry/tokens';
+import { IconButton, Image, Heading, Text } from '../../display';
+import colorFunction from 'color';
+import { formatDatePreview } from '../../../utils/date';
+import { PlatformPressable } from '@react-navigation/elements';
+const PAN_THRESHOLD_PX = 300;
+export function ImageAttachment({ attachment, metaProps, onAttachmentLongPress, }) {
     const { attributes } = attachment;
     const { url, urlMedium, filename, metadata = {} } = attributes;
-    const width = metadata.width || 100;
-    const height = metadata.height || 100;
-    return (<View style={styles.container}>
-      <Image source={{ uri: urlMedium || url }} style={[styles.image, { aspectRatio: width / height }]} accessibilityLabel={filename}/>
-    </View>);
+    const styles = useStyles({ imageWidth: metadata.width, imageHeight: metadata.height });
+    const [visible, setVisible] = useState(false);
+    // shared values run on the native UI thread and prevents clogging up the JS thread
+    const dismissY = useSharedValue(0);
+    const opacity = useSharedValue(1);
+    const resetAnimations = useCallback(() => {
+        dismissY.value = withTiming(0);
+        opacity.value = withTiming(1);
+    }, [dismissY, opacity]);
+    const handleCloseModal = useCallback(() => {
+        setVisible(false);
+        resetAnimations();
+    }, [setVisible, resetAnimations]);
+    const panGesture = Gesture.Pan()
+        .onUpdate(e => {
+        dismissY.value = e.translationY;
+        opacity.value = 1 - Math.abs(e.translationY) / PAN_THRESHOLD_PX;
+    })
+        .onEnd(() => {
+        runOnJS(handleCloseModal)(); // Ensures we can call a JS function
+    });
+    const animatedImageStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: dismissY.value }],
+        opacity: opacity.value,
+    }));
+    return (<>
+      <PlatformPressable style={styles.container} onPress={() => setVisible(true)} onLongPress={() => onAttachmentLongPress(attachment)} accessibilityHint="Long press for more options">
+        <Image source={{ uri: urlMedium || url }} style={{ borderRadius: 8 }} wrapperStyle={styles.imageWrapper} alt={filename}/>
+      </PlatformPressable>
+      <LightboxModal visible={visible} handleCloseModal={handleCloseModal} uri={urlMedium || url} metaProps={metaProps} panGesture={panGesture} animatedImageStyle={animatedImageStyle}/>
+    </>);
 }
-const useStyles = () => {
+const LightboxModal = ({ uri, visible, handleCloseModal, metaProps, panGesture, animatedImageStyle, }) => {
+    const styles = useStyles();
+    const { authorName, createdAt } = metaProps;
+    const handleOpenInBrowser = () => {
+        Linking.openURL(uri);
+    };
+    return (<Modal visible={visible} transparent animationType="fade" onRequestClose={handleCloseModal}>
+      <SafeAreaView style={styles.modal}>
+        <GestureHandlerRootView>
+          <GestureDetector gesture={panGesture}>
+            <Image source={{ uri }} loadingBackgroundStyles={styles.lightboxImageLoading} style={styles.lightboxImage} animatedImageStyle={animatedImageStyle} resizeMode="contain" animated={true} alt=""/>
+          </GestureDetector>
+          <View style={styles.actionToolbar} accessibilityRole="toolbar">
+            <View style={styles.actionToolbarTextMeta}>
+              <Heading variant="h3" style={styles.actionToolbarTitle} numberOfLines={1}>
+                {authorName}
+              </Heading>
+              <Text variant="tertiary" style={styles.actionToolbarSubtitle}>
+                {formatDatePreview(createdAt)}
+              </Text>
+            </View>
+            <IconButton onPress={handleOpenInBrowser} name="general.newWindow" accessibilityRole="link" accessibilityLabel="Open image in browser" accessibilityHint="Image can be downloaded and shared through the browser." style={styles.actionButton} iconStyle={styles.actionButtonIcon} size="lg"/>
+            <IconButton onPress={handleCloseModal} name="general.x" accessibilityLabel="Close image" style={styles.actionButton} iconStyle={styles.actionButtonIcon}/>
+          </View>
+        </GestureHandlerRootView>
+      </SafeAreaView>
+    </Modal>);
+};
+const useStyles = ({ imageWidth = 100, imageHeight = 100 } = {}) => {
+    const { width: windowWidth } = useWindowDimensions();
+    const backgroundColor = tokens.colorNeutral7;
+    const transparentBackgroundColor = useMemo(() => colorFunction(backgroundColor).alpha(0.8).toString(), [backgroundColor]);
     return StyleSheet.create({
         container: {
             maxWidth: '100%',
         },
+        imageWrapper: {
+            minWidth: 200,
+            aspectRatio: imageWidth / imageHeight,
+        },
         image: {
             borderRadius: 8,
-            minWidth: 200,
+        },
+        modal: {
+            flex: 1,
+            backgroundColor,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        lightboxImage: {
+            height: '100%',
+            width: windowWidth,
+            backgroundColor,
+        },
+        lightboxImageLoading: {
+            backgroundColor,
+        },
+        actionToolbar: {
+            width: '100%',
+            position: 'absolute',
+            top: 0,
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 20,
+            paddingHorizontal: 16,
+            paddingTop: 16,
+            paddingBottom: 8,
+            backgroundColor: transparentBackgroundColor,
+        },
+        actionToolbarTextMeta: {
+            flex: 1,
+        },
+        actionToolbarTitle: {
+            marginRight: 'auto',
+            flexShrink: 1,
+            color: tokens.colorNeutral88,
+        },
+        actionToolbarSubtitle: {
+            color: tokens.colorNeutral68,
+        },
+        actionButton: {
+            backgroundColor,
+            height: 40,
+            width: 40,
+            borderRadius: 50,
+            borderWidth: 1,
+            borderColor: tokens.colorNeutral24,
+        },
+        actionButtonIcon: {
+            color: tokens.colorNeutral88,
         },
     });
 };

package/build/components/conversation/attachments/image_attachment.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"image_attachment.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/image_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEtD,MAAM,UAAU,eAAe,CAAC,EAAE,UAAU,EAAuB;IACjE,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAA;IACjC,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAG,EAAE,EAAE,GAAG,UAAU,CAAA;IAC9D,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,IAAI,GAAG,CAAA;IACnC,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,IAAI,GAAG,CAAA;IACrC,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,KAAK,CACJ,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,SAAS,IAAI,GAAG,EAAE,CAAC,CAClC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,GAAG,MAAM,EAAE,CAAC,CAAC,CACvD,kBAAkB,CAAC,CAAC,QAAQ,CAAC,EAEjC;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,QAAQ,EAAE,MAAM;SACjB;QACD,KAAK,EAAE;YACL,YAAY,EAAE,CAAC;YACf,QAAQ,EAAE,GAAG;SACd;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { View, Image, StyleSheet } from 'react-native'\n\nexport function ImageAttachment({ attachment }: { attachment: any }) {\n const styles = useStyles()\n const { attributes } = attachment\n const { url, urlMedium, filename, metadata = {} } = attributes\n const width = metadata.width \|\| 100\n const height = metadata.height \|\| 100\n return (\n <View style={styles.container}>\n <Image\n source={{ uri: urlMedium \|\| url }}\n style={[styles.image, { aspectRatio: width / height }]}\n accessibilityLabel={filename}\n />\n </View>\n )\n}\n\nconst useStyles = () => {\n return StyleSheet.create({\n container: {\n maxWidth: '100%',\n },\n image: {\n borderRadius: 8,\n minWidth: 200,\n },\n })\n}\n"]}
1	+ {"version":3,"file":"image_attachment.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/image_attachment.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useMemo, useState } from 'react'\nimport {\n StyleSheet,\n Modal,\n useWindowDimensions,\n SafeAreaView,\n View,\n Linking,\n ImageStyle,\n} from 'react-native'\nimport {\n Gesture,\n GestureDetector,\n GestureHandlerRootView,\n type PanGesture,\n} from 'react-native-gesture-handler'\nimport {\n runOnJS,\n useAnimatedStyle,\n useSharedValue,\n withTiming,\n type AnimatedStyle,\n} from 'react-native-reanimated'\nimport { tokens } from '../../../vendor/tapestry/tokens'\nimport { IconButton, Image, Heading, Text } from '../../display'\nimport colorFunction from 'color'\nimport { formatDatePreview } from '../../../utils/date'\nimport { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'\nimport { PlatformPressable } from '@react-navigation/elements'\n\nconst PAN_THRESHOLD_PX = 300\n\nexport type MetaProps = {\n authorName: string\n createdAt: string\n}\n\nexport function ImageAttachment({\n attachment,\n metaProps,\n onAttachmentLongPress,\n}: {\n attachment: DenormalizedMessageAttachmentResource\n metaProps: MetaProps\n onAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void\n}) {\n const { attributes } = attachment\n const { url, urlMedium, filename, metadata = {} } = attributes\n\n const styles = useStyles({ imageWidth: metadata.width, imageHeight: metadata.height })\n const [visible, setVisible] = useState(false)\n\n // shared values run on the native UI thread and prevents clogging up the JS thread\n const dismissY = useSharedValue(0)\n const opacity = useSharedValue(1)\n\n const resetAnimations = useCallback(() => {\n dismissY.value = withTiming(0)\n opacity.value = withTiming(1)\n }, [dismissY, opacity])\n\n const handleCloseModal = useCallback(() => {\n setVisible(false)\n resetAnimations()\n }, [setVisible, resetAnimations])\n\n const panGesture = Gesture.Pan()\n .onUpdate(e => {\n dismissY.value = e.translationY\n opacity.value = 1 - Math.abs(e.translationY) / PAN_THRESHOLD_PX\n })\n .onEnd(() => {\n runOnJS(handleCloseModal)() // Ensures we can call a JS function\n })\n\n const animatedImageStyle = useAnimatedStyle(() => ({\n transform: [{ translateY: dismissY.value }],\n opacity: opacity.value,\n }))\n\n return (\n <>\n <PlatformPressable\n style={styles.container}\n onPress={() => setVisible(true)}\n onLongPress={() => onAttachmentLongPress(attachment)}\n accessibilityHint=\"Long press for more options\"\n >\n <Image\n source={{ uri: urlMedium \|\| url }}\n style={{ borderRadius: 8 }}\n wrapperStyle={styles.imageWrapper}\n alt={filename}\n />\n </PlatformPressable>\n <LightboxModal\n visible={visible}\n handleCloseModal={handleCloseModal}\n uri={urlMedium \|\| url}\n metaProps={metaProps}\n panGesture={panGesture}\n animatedImageStyle={animatedImageStyle}\n />\n </>\n )\n}\n\ninterface LightboxModalProps {\n visible: boolean\n handleCloseModal: () => void\n uri: string\n metaProps: MetaProps\n panGesture: PanGesture\n animatedImageStyle: AnimatedStyle<ImageStyle>\n}\n\nconst LightboxModal = ({\n uri,\n visible,\n handleCloseModal,\n metaProps,\n panGesture,\n animatedImageStyle,\n}: LightboxModalProps) => {\n const styles = useStyles()\n\n const { authorName, createdAt } = metaProps\n\n const handleOpenInBrowser = () => {\n Linking.openURL(uri)\n }\n\n return (\n <Modal visible={visible} transparent animationType=\"fade\" onRequestClose={handleCloseModal}>\n <SafeAreaView style={styles.modal}>\n <GestureHandlerRootView>\n <GestureDetector gesture={panGesture}>\n <Image\n source={{ uri }}\n loadingBackgroundStyles={styles.lightboxImageLoading}\n style={styles.lightboxImage}\n animatedImageStyle={animatedImageStyle}\n resizeMode=\"contain\"\n animated={true}\n alt=\"\"\n />\n </GestureDetector>\n <View style={styles.actionToolbar} accessibilityRole=\"toolbar\">\n <View style={styles.actionToolbarTextMeta}>\n <Heading variant=\"h3\" style={styles.actionToolbarTitle} numberOfLines={1}>\n {authorName}\n </Heading>\n <Text variant=\"tertiary\" style={styles.actionToolbarSubtitle}>\n {formatDatePreview(createdAt)}\n </Text>\n </View>\n <IconButton\n onPress={handleOpenInBrowser}\n name=\"general.newWindow\"\n accessibilityRole=\"link\"\n accessibilityLabel=\"Open image in browser\"\n accessibilityHint=\"Image can be downloaded and shared through the browser.\"\n style={styles.actionButton}\n iconStyle={styles.actionButtonIcon}\n size=\"lg\"\n />\n <IconButton\n onPress={handleCloseModal}\n name=\"general.x\"\n accessibilityLabel=\"Close image\"\n style={styles.actionButton}\n iconStyle={styles.actionButtonIcon}\n />\n </View>\n </GestureHandlerRootView>\n </SafeAreaView>\n </Modal>\n )\n}\n\ninterface UseStylesProps {\n imageWidth?: number\n imageHeight?: number\n}\n\nconst useStyles = ({ imageWidth = 100, imageHeight = 100 }: UseStylesProps = {}) => {\n const { width: windowWidth } = useWindowDimensions()\n const backgroundColor = tokens.colorNeutral7\n const transparentBackgroundColor = useMemo(\n () => colorFunction(backgroundColor).alpha(0.8).toString(),\n [backgroundColor]\n )\n\n return StyleSheet.create({\n container: {\n maxWidth: '100%',\n },\n imageWrapper: {\n minWidth: 200,\n aspectRatio: imageWidth / imageHeight,\n },\n image: {\n borderRadius: 8,\n },\n modal: {\n flex: 1,\n backgroundColor,\n justifyContent: 'center',\n alignItems: 'center',\n },\n lightboxImage: {\n height: '100%',\n width: windowWidth,\n backgroundColor,\n },\n lightboxImageLoading: {\n backgroundColor,\n },\n actionToolbar: {\n width: '100%',\n position: 'absolute',\n top: 0,\n flexDirection: 'row',\n alignItems: 'center',\n gap: 20,\n paddingHorizontal: 16,\n paddingTop: 16,\n paddingBottom: 8,\n backgroundColor: transparentBackgroundColor,\n },\n actionToolbarTextMeta: {\n flex: 1,\n },\n actionToolbarTitle: {\n marginRight: 'auto',\n flexShrink: 1,\n color: tokens.colorNeutral88,\n },\n actionToolbarSubtitle: {\n color: tokens.colorNeutral68,\n },\n actionButton: {\n backgroundColor,\n height: 40,\n width: 40,\n borderRadius: 50,\n borderWidth: 1,\n borderColor: tokens.colorNeutral24,\n },\n actionButtonIcon: {\n color: tokens.colorNeutral88,\n },\n })\n}\n"]}

package/build/components/conversation/attachments/video_attachment.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import React from 'react';
 import { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource';
-export declare function VideoAttachment({ attachment, }: {
+export declare function VideoAttachment({ attachment, onAttachmentLongPress, }: {
     attachment: DenormalizedMessageAttachmentResource;
+    onAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void;
 }): React.JSX.Element;
 //# sourceMappingURL=video_attachment.d.ts.map

package/build/components/conversation/attachments/video_attachment.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"video_attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/video_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAE/C,OAAO,EAAE,qCAAqC,EAAE,MAAM,2DAA2D,CAAA;~~AAKjH~~,wBAAgB,eAAe,CAAC,EAC9B,UAAU,~~GACX~~,EAAE;IACD,UAAU,EAAE,qCAAqC,CAAA;~~CAClD~~,~~qBAgDA~~"}
1	+ {"version":3,"file":"video_attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/video_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAE/C,OAAO,EAAE,qCAAqC,EAAE,MAAM,2DAA2D,CAAA;AAMjH,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,qBAAqB,GACtB,EAAE;IACD,UAAU,EAAE,qCAAqC,CAAA;IACjD,qBAAqB,EAAE,CAAC,UAAU,EAAE,qCAAqC,KAAK,IAAI,CAAA;CACnF,qBAmDA"}

package/build/components/conversation/attachments/video_attachment.js CHANGED Viewed

@@ -1,9 +1,10 @@
 import React, { useRef, useState } from 'react';
-import { View, StyleSheet, Pressable } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { MESSAGE_ATTACHMENT_WIDTH_SINGLE } from './constants';
 import { IconButton } from '../../display';
 import { Video } from '../../../utils/native_adapters';
-export function VideoAttachment({ attachment, }) {
+import { PlatformPressable } from '@react-navigation/elements';
+export function VideoAttachment({ attachment, onAttachmentLongPress, }) {
     const { attributes } = attachment;
     const { width = MESSAGE_ATTACHMENT_WIDTH_SINGLE, height = MESSAGE_ATTACHMENT_WIDTH_SINGLE } = attributes.metadata || {};
     const { url } = attributes;
@@ -22,12 +23,12 @@ export function VideoAttachment({ attachment, }) {
     }
     const viewRef = useRef(null);
     return (<View style={styles.container} ref={viewRef}>
-      <Pressable onPress={openVideo}>
+      <PlatformPressable onLongPress={() => onAttachmentLongPress(attachment)} accessibilityHint="Long press for more options">
         <Video.Player ref={videoRef} source={{ uri: url }} aspectRatio={width / height} style={styles.video} onFullscreenPlayerWillDismiss={onFullscreenPlayerWillDismiss}/>
         {!isOpen && (<View style={styles.playButtonWrapper}>
             <IconButton name="services.play" size="md" accessibilityLabel="Play Video" onPress={openVideo} style={styles.button}/>
           </View>)}
-      </Pressable>
+      </PlatformPressable>
     </View>);
 }
 const styles = StyleSheet.create({

package/build/components/conversation/attachments/video_attachment.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"video_attachment.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/video_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,~~SAAS,EAAE,~~MAAM,cAAc,CAAA;~~AAE1D~~,OAAO,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAA;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAqB,MAAM,gCAAgC,CAAA;~~AAEzE~~,MAAM,UAAU,eAAe,CAAC,EAC9B,UAAU,~~GAGX~~;IACC,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAA;IACjC,MAAM,EAAE,KAAK,GAAG,+BAA+B,EAAE,MAAM,GAAG,+BAA+B,EAAE,GACzF,UAAU,CAAC,QAAQ,IAAI,EAAE,CAAA;IAC3B,MAAM,EAAE,GAAG,EAAE,GAAG,UAAU,CAAA;IAE1B,MAAM,QAAQ,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IAChD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE3C,SAAS,SAAS;QAChB,IAAI,CAAC,MAAM,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YAChC,QAAQ,CAAC,OAAO,CAAC,uBAAuB,EAAE,CAAA;YAC1C,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,CAAA;YACvB,SAAS,CAAC,IAAI,CAAC,CAAA;QACjB,CAAC;IACH,CAAC;IAED,SAAS,6BAA6B;QACpC,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAA;QACzB,SAAS,CAAC,KAAK,CAAC,CAAA;IAClB,CAAC;IAED,MAAM,OAAO,GAAG,MAAM,CAAO,IAAI,CAAC,CAAA;IAElC,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAC1C;MAAA,CAAC,~~SAAS~~,CAAC,~~OAAO~~,CAAC,CAAC,~~SAAS~~,CAAC,~~CAC5B~~;QAAA,CAAC,KAAK,CAAC,MAAM,CACX,GAAG,CAAC,CAAC,QAAQ,CAAC,CACd,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CACrB,WAAW,CAAC,CAAC,KAAK,GAAG,MAAM,CAAC,CAC5B,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACpB,6BAA6B,CAAC,CAAC,6BAA6B,CAAC,EAE/D;QAAA,CAAC,CAAC,MAAM,IAAI,CACV,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CACpC;YAAA,CAAC,UAAU,CACT,IAAI,CAAC,eAAe,CACpB,IAAI,CAAC,IAAI,CACT,kBAAkB,CAAC,YAAY,CAC/B,OAAO,CAAC,CAAC,SAAS,CAAC,CACnB,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EAEzB;UAAA,EAAE,IAAI,CAAC,CACR,CACH;MAAA,EAAE,~~SAAS~~,~~CACb~~;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,QAAQ,EAAE,GAAG;QACb,SAAS,EAAE,GAAG;KACf;IACD,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,eAAe,EAAE,OAAO;QACxB,YAAY,EAAE,CAAC;KAChB;IACD,iBAAiB,EAAE;QACjB,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;KACrB;IACD,MAAM,EAAE;QACN,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,YAAY,EAAE,EAAE;QAChB,eAAe,EAAE,MAAM;QACvB,WAAW,EAAE,MAAM;QACnB,WAAW,EAAE,CAAC;KACf;CACF,CAAC,CAAA","sourcesContent":["import React, { useRef, useState } from 'react'\nimport { View, StyleSheet, ~~Pressable~~ } from 'react-native'\nimport { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'\nimport { MESSAGE_ATTACHMENT_WIDTH_SINGLE } from './constants'\nimport { IconButton } from '../../display'\nimport { Video, VideoPlayerHandle } from '../../../utils/native_adapters'\n\nexport function VideoAttachment({\n attachment,\n}: {\n attachment: DenormalizedMessageAttachmentResource\n}) {\n const { attributes } = attachment\n const { width = MESSAGE_ATTACHMENT_WIDTH_SINGLE, height = MESSAGE_ATTACHMENT_WIDTH_SINGLE } =\n attributes.metadata \|\| {}\n const { url } = attributes\n\n const videoRef = useRef<VideoPlayerHandle>(null)\n const [isOpen, setIsOpen] = useState(false)\n\n function openVideo() {\n if (!isOpen && videoRef.current) {\n videoRef.current.presentFullscreenPlayer()\n videoRef.current.play()\n setIsOpen(true)\n }\n }\n\n function onFullscreenPlayerWillDismiss() {\n videoRef.current?.pause()\n setIsOpen(false)\n }\n\n const viewRef = useRef<View>(null)\n\n return (\n <View style={styles.container} ref={viewRef}>\n <~~Pressable onPress~~={~~openVideo~~}>\n <Video.Player\n ref={videoRef}\n source={{ uri: url }}\n aspectRatio={width / height}\n style={styles.video}\n onFullscreenPlayerWillDismiss={onFullscreenPlayerWillDismiss}\n />\n {!isOpen && (\n <View style={styles.playButtonWrapper}>\n <IconButton\n name=\"services.play\"\n size=\"md\"\n accessibilityLabel=\"Play Video\"\n onPress={openVideo}\n style={styles.button}\n />\n </View>\n )}\n </~~Pressable~~>\n </View>\n )\n}\n\nconst styles = StyleSheet.create({\n container: {\n maxWidth: 320,\n maxHeight: 320,\n },\n video: {\n width: '100%',\n height: 'auto',\n backgroundColor: 'black',\n borderRadius: 8,\n },\n playButtonWrapper: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n justifyContent: 'center',\n alignItems: 'center',\n },\n button: {\n width: 42,\n height: 42,\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: 25,\n backgroundColor: '#eee',\n borderColor: '#aaa',\n borderWidth: 1,\n },\n})\n"]}
1	+ {"version":3,"file":"video_attachment.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/video_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE/C,OAAO,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAA;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAqB,MAAM,gCAAgC,CAAA;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAE9D,MAAM,UAAU,eAAe,CAAC,EAC9B,UAAU,EACV,qBAAqB,GAItB;IACC,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAA;IACjC,MAAM,EAAE,KAAK,GAAG,+BAA+B,EAAE,MAAM,GAAG,+BAA+B,EAAE,GACzF,UAAU,CAAC,QAAQ,IAAI,EAAE,CAAA;IAC3B,MAAM,EAAE,GAAG,EAAE,GAAG,UAAU,CAAA;IAE1B,MAAM,QAAQ,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IAChD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE3C,SAAS,SAAS;QAChB,IAAI,CAAC,MAAM,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YAChC,QAAQ,CAAC,OAAO,CAAC,uBAAuB,EAAE,CAAA;YAC1C,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,CAAA;YACvB,SAAS,CAAC,IAAI,CAAC,CAAA;QACjB,CAAC;IACH,CAAC;IAED,SAAS,6BAA6B;QACpC,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAA;QACzB,SAAS,CAAC,KAAK,CAAC,CAAA;IAClB,CAAC;IAED,MAAM,OAAO,GAAG,MAAM,CAAO,IAAI,CAAC,CAAA;IAElC,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAC1C;MAAA,CAAC,iBAAiB,CAChB,WAAW,CAAC,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,CACrD,iBAAiB,CAAC,6BAA6B,CAE/C;QAAA,CAAC,KAAK,CAAC,MAAM,CACX,GAAG,CAAC,CAAC,QAAQ,CAAC,CACd,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CACrB,WAAW,CAAC,CAAC,KAAK,GAAG,MAAM,CAAC,CAC5B,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACpB,6BAA6B,CAAC,CAAC,6BAA6B,CAAC,EAE/D;QAAA,CAAC,CAAC,MAAM,IAAI,CACV,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CACpC;YAAA,CAAC,UAAU,CACT,IAAI,CAAC,eAAe,CACpB,IAAI,CAAC,IAAI,CACT,kBAAkB,CAAC,YAAY,CAC/B,OAAO,CAAC,CAAC,SAAS,CAAC,CACnB,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EAEzB;UAAA,EAAE,IAAI,CAAC,CACR,CACH;MAAA,EAAE,iBAAiB,CACrB;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,QAAQ,EAAE,GAAG;QACb,SAAS,EAAE,GAAG;KACf;IACD,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,eAAe,EAAE,OAAO;QACxB,YAAY,EAAE,CAAC;KAChB;IACD,iBAAiB,EAAE;QACjB,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;KACrB;IACD,MAAM,EAAE;QACN,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,YAAY,EAAE,EAAE;QAChB,eAAe,EAAE,MAAM;QACvB,WAAW,EAAE,MAAM;QACnB,WAAW,EAAE,CAAC;KACf;CACF,CAAC,CAAA","sourcesContent":["import React, { useRef, useState } from 'react'\nimport { View, StyleSheet } from 'react-native'\nimport { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'\nimport { MESSAGE_ATTACHMENT_WIDTH_SINGLE } from './constants'\nimport { IconButton } from '../../display'\nimport { Video, VideoPlayerHandle } from '../../../utils/native_adapters'\nimport { PlatformPressable } from '@react-navigation/elements'\n\nexport function VideoAttachment({\n attachment,\n onAttachmentLongPress,\n}: {\n attachment: DenormalizedMessageAttachmentResource\n onAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void\n}) {\n const { attributes } = attachment\n const { width = MESSAGE_ATTACHMENT_WIDTH_SINGLE, height = MESSAGE_ATTACHMENT_WIDTH_SINGLE } =\n attributes.metadata \|\| {}\n const { url } = attributes\n\n const videoRef = useRef<VideoPlayerHandle>(null)\n const [isOpen, setIsOpen] = useState(false)\n\n function openVideo() {\n if (!isOpen && videoRef.current) {\n videoRef.current.presentFullscreenPlayer()\n videoRef.current.play()\n setIsOpen(true)\n }\n }\n\n function onFullscreenPlayerWillDismiss() {\n videoRef.current?.pause()\n setIsOpen(false)\n }\n\n const viewRef = useRef<View>(null)\n\n return (\n <View style={styles.container} ref={viewRef}>\n <PlatformPressable\n onLongPress={() => onAttachmentLongPress(attachment)}\n accessibilityHint=\"Long press for more options\"\n >\n <Video.Player\n ref={videoRef}\n source={{ uri: url }}\n aspectRatio={width / height}\n style={styles.video}\n onFullscreenPlayerWillDismiss={onFullscreenPlayerWillDismiss}\n />\n {!isOpen && (\n <View style={styles.playButtonWrapper}>\n <IconButton\n name=\"services.play\"\n size=\"md\"\n accessibilityLabel=\"Play Video\"\n onPress={openVideo}\n style={styles.button}\n />\n </View>\n )}\n </PlatformPressable>\n </View>\n )\n}\n\nconst styles = StyleSheet.create({\n container: {\n maxWidth: 320,\n maxHeight: 320,\n },\n video: {\n width: '100%',\n height: 'auto',\n backgroundColor: 'black',\n borderRadius: 8,\n },\n playButtonWrapper: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n justifyContent: 'center',\n alignItems: 'center',\n },\n button: {\n width: 42,\n height: 42,\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: 25,\n backgroundColor: '#eee',\n borderColor: '#aaa',\n borderWidth: 1,\n },\n})\n"]}

package/build/components/conversation/disabled_replies_banners.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export declare const LeaderDisabledRepliesBanner: () => import("react").JSX.Element;
+export declare const MemberDisabledRepliesBanner: () => import("react").JSX.Element;
+//# sourceMappingURL=disabled_replies_banners.d.ts.map

package/build/components/conversation/disabled_replies_banners.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"disabled_replies_banners.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/disabled_replies_banners.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,2BAA2B,mCAEvC,CAAA;AAED,eAAO,MAAM,2BAA2B,mCAQvC,CAAA"}