martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-11 19:19:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

switching carousel module

Browse Source
This commit is contained in:
balzack 2023-03-02 08:18:38 -08:00
parent 803f6b84c3
commit f1df322523
7 changed files with 37 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/mobile/package.json
View File

@ -30,6 +30,7 @@
"react-native-gesture-handler": "^2.9.0",
"react-native-image-crop-picker": "^0.39.0",
"react-native-reanimated": "^2.14.4",
"react-native-reanimated-carousel": "^3.3.0",
"react-native-rsa-native": "^2.0.5",
"react-native-safe-area-context": "^4.5.0",
"react-native-screens": "^3.20.0",

1
app/mobile/src/context/useAppContext.hook.js
View File

@ -156,6 +156,7 @@ export function useAppContext() {
const setWebsocket = (session) => {
ws.current = createWebsocket(`wss://${session.server}/status`);
ws.current.onmessage = (ev) => {
console.log("ON MESSAGE!");
try {
delay.current = 0;
const rev = JSON.parse(ev.data);

4
app/mobile/src/context/useConversationContext.hook.js
View File

@ -34,6 +34,7 @@ export function useConversationContext() {
const sync = async () => {
console.log("SYNCING!");
if (!syncing.current && (reset.current || update.current || force.current || more.current)) {
const loadMore = more.current;
const ignoreRevision = force.current;
@ -92,16 +93,19 @@ export function useConversationContext() {
if (ignoreRevision || curRevision !== setRevision) {
try {
if (!marker) {
console.log("FIRST GET");
const delta = await getTopicDelta(cardId, channelId, null, COUNT, null, null);
await setTopicDelta(cardId, channelId, delta.topics);
await setMarkerAndSync(cardId, channelId, delta.marker, curRevision);
}
if (loadMore && marker) {
console.log("MORE GET");
const delta = await getTopicDelta(cardId, channelId, null, COUNT, null, marker);
await setTopicDelta(cardId, channelId, delta.topics);
await setTopicMarker(cardId, channelId, delta.marker);
}
if (ignoreRevision || curRevision !== setRevision) {
console.log("UPDATE");
const delta = await getTopicDelta(cardId, channelId, setRevision, null, marker, null);
await setTopicDelta(cardId, channelId, delta.topics);
await setSyncRevision(cardId, channelId, curRevision);

20
app/mobile/src/session/conversation/topicItem/TopicItem.jsx
View File

@ -12,6 +12,7 @@ import { ImageThumb } from './imageThumb/ImageThumb';
import { ImageAsset } from './imageAsset/ImageAsset';
import { AudioAsset } from './audioAsset/AudioAsset';
import { VideoAsset } from './videoAsset/VideoAsset';
import Carousel from 'react-native-reanimated-carousel';
export function TopicItem({ item, focused, focus, hosting, sealed, sealKey, remove, update, block, report }) {
@ -207,6 +208,25 @@ export function TopicItem({ item, focused, focus, hosting, sealed, sealKey, remo
onRequestClose={actions.hideCarousel}
>
<View style={styles.modal}>
<Carousel
loop
width={state.width}
autoPlay={false}
data={state.assets}
scrollAnimationDuration={1000}
renderItem={({ index }) => (
<View style={styles.frame}>
{ state.assets[index].image && (
<ImageAsset topicId={item.topicId} asset={state.assets[index].image} dismiss={actions.hideCarousel} />
)}
{ state.assets[index].video && (
<VideoAsset topicId={item.topicId} asset={state.assets[index].video} dismiss={actions.hideCarousel} />
)}
{ state.assets[index].audio && (
<AudioAsset topicId={item.topicId} asset={state.assets[index].audio} dismiss={actions.hideCarousel} />
)}
</View>
)} />
</View>
</Modal>
</View>

2
app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
View File

@ -7,7 +7,7 @@ export function ImageAsset({ topicId, asset, dismiss }) {
const { state, actions } = useImageAsset(topicId, asset);
return (
<TouchableOpacity style={styles.container} activeOpacity={1} onPress={dismiss}>
<TouchableOpacity style={styles.container} activeOpacity={1}>
<Image source={{ uri: state.url }} onLoad={actions.loaded} onError={actions.failed}
style={{ borderRadius: 4, width: state.imageWidth, height: state.imageHeight }} resizeMode={'cover'} />
{ state.failed && (

8
app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
View File

@ -12,9 +12,11 @@ export function VideoAsset({ topicId, asset, dismiss }) {
return (
<View style={styles.container}>
<TouchableOpacity activeOpacity={1} style={styles.container} onPress={actions.showControls}>
<Video source={{ uri: state.url }} style={{ width: state.width, height: state.height }} resizeMode={'cover'}
onReadyForDisplay={(e) => actions.setResolution(e.naturalSize.width, e.naturalSize.height)}
onLoad={actions.loaded} isLooping={true} shouldPlay={state.playing} resizeMode="contain" />
{ state.url && (
<Video source={{ uri: state.url }} style={{ width: state.width, height: state.height }} resizeMode={'cover'}
onReadyForDisplay={(e) => { console.log(e) }}
onLoad={actions.loaded} isLooping={true} paused={!state.playing} resizeMode="contain" />
)}
{ (!state.playing || state.controls) && (
<View style={{ ...styles.overlay, width: state.width, height: state.height }} />
)}

5
app/mobile/yarn.lock
View File

@ -6274,6 +6274,11 @@ react-native-image-crop-picker@^0.39.0:
resolved "https://registry.yarnpkg.com/react-native-image-crop-picker/-/react-native-image-crop-picker-0.39.0.tgz#9cb8e8ffb0e8ab06f7b3227cadf077169e225eba"
integrity sha512-4aANbQMrmU6zN/4b0rVBA7SbaZ3aa5JESm3Xk751sINybZMt1yz/9h95LkO7U0pbslHDo3ofXjG75PmQRP6a/w==
react-native-reanimated-carousel@^3.3.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/react-native-reanimated-carousel/-/react-native-reanimated-carousel-3.3.0.tgz#e71e9441ee6aaae401c5a023b27bf48a54565d16"
integrity sha512-rprUl+LqWoXyH/8OvHv+m9Kol2YORHEnz7tvRum+o4ciCUCcYnafQBbSqG44RMllOCqm3WOAcuEX5p8a7W3ZZw==
react-native-reanimated@^2.14.4:
version "2.14.4"
resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.14.4.tgz#3fa3da4e7b99f5dfb28f86bcf24d9d1024d38836"