Issue 456 auto play multi image #568

coryzoon · 2024-04-26T14:01:58Z

Description of changes in order of the files listed below:

Added react-native-modal library for modal.
Pulls background from projects in order to display in classifier header.
Update the full screen media component to match designs.
Updated all classifier screens and any components that are part of the screens to match updated designs.
Remove different styling when in museum mode (should always be the same regardless of mode).
Updated animations to useNativeDrive: false, to remove warnings.
Added an auto play functionality for multi image classifications. Allows auto play, press and hold to pause, tap to pause, and updated pagination dots.
Created new components for buttons to support new designs.
Updated ClassificationPanel.js with the new tabs to match designs.
Updated Field Guide and Help modals to match new designs.
Updated styling for Tutorials to match new designs.
Fixed bug in SizedMarkdown.js where it would sometimes attempt to replace text when there is no text (very rare but worth fixing).
Updated SafeAreaContainer.js which is a container for the entire app that provides a safe area view with a background color. To match the designs I need to apply logic that would apply different backgrounds depending on if the screen was a classifier screen or not. Preview projects would still have the red background.
Added ClassifierHeader component for the new headers that would display the blurred project background image. Updated RootNavigator.js to not show the default header so that the custom header could be shown instead.

…multi image functionality.

… from projects fetch.

hound · 2024-04-26T14:02:13Z

src/components/Markings/DrawingModeButton.js

@@ -0,0 +1,51 @@
+import React from 'react';


Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

hound · 2024-04-26T14:02:13Z

src/components/Markings/ToolNameDrawCount.js

@@ -0,0 +1,58 @@
+import React from 'react';


Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

hound · 2024-04-26T14:02:13Z

src/components/classifier/AutoPlayMultiImage.js

@@ -0,0 +1,181 @@
+import React, { useState, useEffect, useRef } from 'react'; // Import useRef


Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

hound · 2024-04-26T14:02:13Z

src/components/classifier/ButtonAnswer.js

@@ -0,0 +1,66 @@
+import React from 'react';


Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

hound · 2024-04-26T14:02:13Z

src/components/classifier/ButtonLarge.js

@@ -0,0 +1,58 @@
+import React from 'react';


Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

hound · 2024-04-26T14:02:14Z

src/components/classifier/ButtonsDrawing.js

@@ -0,0 +1,142 @@
+import React, { useState } from 'react';


Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

hound · 2024-04-26T14:02:14Z

src/components/classifier/ButtonsDrawingModal.js

@@ -0,0 +1,68 @@
+import React from 'react';


Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

hound · 2024-04-26T14:02:14Z

src/components/classifier/ExpandImageIcon.js

@@ -0,0 +1,15 @@
+import React from 'react';


Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

hound · 2024-04-26T14:02:14Z

src/components/classifier/FieldGuideBtn.js

@@ -0,0 +1,59 @@
+import React from 'react';


Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

…when they have images included.

hound · 2024-05-01T10:54:13Z

src/components/classifier/PaginateDot.js

@@ -0,0 +1,54 @@
+import React from 'react';


Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

hound · 2024-05-01T10:54:13Z

src/components/classifier/SwipeSingleImage.js

@@ -0,0 +1,46 @@
+import React from 'react';


Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

…lashing bug.

…ix spacing for Need Help text when there is no field guide.

…and the gesture issues.

…tom spacing issue in field guide.

…awing classifier.

hound · 2024-05-08T12:45:46Z

src/navigation/ClassifierHeader.js

@@ -0,0 +1,131 @@
+import React from 'react';


Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

…height for field guide to add more space. Add height to field guide item for items with no image. Replace expand icon with new icon for Android video expansion. Adjust help modal to only take up as much space as it needs rather than a full sized modal. Adjust text for the first time tutorial view to remove title and adjust styles.

…parent. Make markdown question centered when text doesn't take up fulls screen.

…dscape side menu stuck, text cutoff.

…o show.

mcbouslog

Great job on a lot of work! I've left some comments but I don't think there's anything that's blocking. The newer (functional) components are excellent, the older legacy components could use some clean up, but I think that's out of scope.

mcbouslog · 2024-06-18T20:22:05Z

src/navigation/ClassifierHeader.js

+          style={styles.zoonIconContainer}
+        >
+          <Image
+            source={require('../../images/zooni-nav-logo.png')}


Not causing an issue, but typically see image imports as static at the top of a file, not sure if this could be.

mcbouslog · 2024-06-18T20:29:13Z

src/containers/SafeAreaContainer.js

@@ -3,16 +3,25 @@ import {
    SafeAreaView,
    View
 } from 'react-native'
-import { connect }  from 'react-redux'
+import { connect, useSelector }  from 'react-redux'


If it'd take more than a minute don't bother, but if the mapStateToProps could be refactored/replaced with useSelector I think it would be preferable/consistent with newer react-redux.

mcbouslog · 2024-06-18T20:37:51Z

src/components/Markings/DrawingClassifier.js

+import ButtonLarge from '../classifier/ButtonLarge'
+import FieldGuideBtn from '../classifier/FieldGuideBtn'
+import DrawingModeButton from './DrawingModeButton'
+import ToolNameDrawCount from './ToolNameDrawCount'


Unrelated to these changes, but we've added an eventListener on line 68 and I don't think it's removed, for consideration remove the eventListener in componentWillUnmount.

mcbouslog · 2024-06-18T23:24:07Z

src/components/Markings/DrawingClassifier.js

-                <TouchableOpacity disabled={DeviceInfo.isTablet()} onPress={() => this.setState({isModalVisible: true})}
-                                  style={styles.subjectDisplayContainer}>
+                <TouchableOpacity
+                    onPress={() => this.setState({ isModalVisible: true })}


Consider creating dedicated function similar to setQuestionVisibility to move out of render method.

Disregard the moving state setting out of render comments, I think that's in a lot of the legacy code.

src/components/Markings/DrawingClassifier.js

mcbouslog · 2024-06-19T22:07:36Z

src/components/classifier/FieldGuide.js

 import PropTypes from 'prop-types';
-import {addIndex, isEmpty, map} from 'ramda'
+import {isEmpty} from 'ramda'


Not sure if ramda use can be replaced with lodash (added in PR 572)

I see now that ramda is used in a lot of different places in a handful of different ways and replacing ramda with lodash or vice versa is not trivial. Disregard related comments, but maybe add to a someday to look into (if there's overlap between the packages, replacing one with the other).

mcbouslog · 2024-06-19T22:42:39Z

src/components/classifier/SwipeSingleImage.js

+
+SwipeSingleImage.propTypes = {
+  uri: PropTypes.string,
+  onExpandButtonPressed: PropTypes.bool,


Suggested change

onExpandButtonPressed: PropTypes.bool,

onExpandButtonPressed: PropTypes.func,

mcbouslog · 2024-06-19T22:46:00Z

src/components/classifier/SwipeableSubject.js

-    View,
-    Platform
-} from 'react-native';
+import { View, Platform, TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
 import PropTypes from 'prop-types';
 import R from 'ramda';


Can just import isEmpty, or refactor with lodash

mcbouslog · 2024-06-19T22:46:23Z

src/components/classifier/SwipeableSubject.js

+  onDisplayImageChange: PropTypes.func,
+  swiping: PropTypes.bool,
+  currentCard: PropTypes.bool,
+  onExpandButtonPressed: PropTypes.bool,


Suggested change

onExpandButtonPressed: PropTypes.bool,

onExpandButtonPressed: PropTypes.func,

mcbouslog · 2024-06-19T22:47:10Z

src/components/classifier/SwipeableSubject.js

-        }
+  handleDimensionsChange() {
+    if (this.pager) {
+      setTimeout(() => this.pager.scrollTo({ y: 0 }), 300);


Not sure if needs to be cleared in componentWillUnmount?

coryzoon added 2 commits April 26, 2024 09:07

Updated classifier styling to match updated designs. Added auto play …

8ecd8e3

…multi image functionality.

Remove unneeded library, remove unneeded logo, comments, remove param…

2804176

… from projects fetch.

hound bot reviewed Apr 26, 2024

View reviewed changes

coryzoon assigned mcbouslog Apr 29, 2024

coryzoon added 3 commits April 30, 2024 07:25

Add background to params when getting projects.

8dbbbbf

Use SizedMarkdown component for answer buttons to handle the buttons …

020b157

…when they have images included.

Update color for task tab.

503bf01

hound bot reviewed May 1, 2024

View reviewed changes

coryzoon added 7 commits May 1, 2024 08:21

Applied styling fixes after testing.

ef955ea

Update markdown buttons and update autoplay multi-image for android f…

268c0c6

…lashing bug.

Add shadow to paginated dot for android. Add shadow to expand icon. F…

79d942a

…ix spacing for Need Help text when there is no field guide.

Readjusted how android handles the autoplay to fix both the flashing …

4ec15f9

…and the gesture issues.

Fix spacing issues on QuestionClassifier.

7607d2c

Handle tutorial paginated dots when count is greater than 10. Fix bot…

dd113c3

…tom spacing issue in field guide.

Remove key for auto play images, add margin above submit button on dr…

a3c9657

…awing classifier.

hound bot reviewed May 8, 2024

View reviewed changes

coryzoon added 7 commits May 9, 2024 08:50

Apply red header when project is preview. Make swipe background trans…

6a6f0e1

…parent. Make markdown question centered when text doesn't take up fulls screen.

Bug fixes. Museum mode crash, hiding need help when no text, ipad lan…

373090a

…dscape side menu stuck, text cutoff.

Add TouchableWithoutFeedback around the video to allow for controls t…

992b753

…o show.

Fixed bugs with autoplay images.

df9b9e6

Fix bug with swiping images being blurred.

cbc6fdb

Blurred image fix.

8c23a1b

coryzoon requested a review from mcbouslog June 11, 2024 10:31

mcbouslog approved these changes Jun 19, 2024

View reviewed changes

mcbouslog mentioned this pull request Jun 20, 2024

Add feedback #572

Merged

coryzoon merged commit 7111172 into master Jun 26, 2024
1 check passed

coryzoon mentioned this pull request Aug 11, 2024

useCallback on function, clearTimeout, updated propTypes, add arrow f… #618

Merged

coryzoon deleted the issue-456-auto-play-multi-image branch September 3, 2024 10:36

lcjohnso mentioned this pull request Sep 27, 2024

Enhancement: support animation (auto-play) of multi-image subjects #456

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue 456 auto play multi image #568

Issue 456 auto play multi image #568

coryzoon commented Apr 26, 2024

hound bot Apr 26, 2024

hound bot Apr 26, 2024

hound bot Apr 26, 2024

hound bot Apr 26, 2024

hound bot Apr 26, 2024

hound bot Apr 26, 2024

hound bot Apr 26, 2024

hound bot Apr 26, 2024

hound bot Apr 26, 2024

hound bot May 1, 2024

hound bot May 1, 2024

hound bot May 8, 2024

mcbouslog left a comment

mcbouslog Jun 18, 2024

mcbouslog Jun 18, 2024

mcbouslog Jun 18, 2024

mcbouslog Jun 18, 2024

mcbouslog Jun 19, 2024

mcbouslog Jun 19, 2024

mcbouslog Jun 20, 2024

mcbouslog Jun 19, 2024

mcbouslog Jun 19, 2024

mcbouslog Jun 19, 2024

mcbouslog Jun 19, 2024

		@@ -0,0 +1,181 @@
		import React, { useState, useEffect, useRef } from 'react'; // Import useRef

	onExpandButtonPressed: PropTypes.bool,
	onExpandButtonPressed: PropTypes.func,

Issue 456 auto play multi image #568

Issue 456 auto play multi image #568

Conversation

coryzoon commented Apr 26, 2024

hound bot Apr 26, 2024

Choose a reason for hiding this comment

hound bot Apr 26, 2024

Choose a reason for hiding this comment

hound bot Apr 26, 2024

Choose a reason for hiding this comment

hound bot Apr 26, 2024

Choose a reason for hiding this comment

hound bot Apr 26, 2024

Choose a reason for hiding this comment

hound bot Apr 26, 2024

Choose a reason for hiding this comment

hound bot Apr 26, 2024

Choose a reason for hiding this comment

hound bot Apr 26, 2024

Choose a reason for hiding this comment

hound bot Apr 26, 2024

Choose a reason for hiding this comment

hound bot May 1, 2024

Choose a reason for hiding this comment

hound bot May 1, 2024

Choose a reason for hiding this comment

hound bot May 8, 2024

Choose a reason for hiding this comment

mcbouslog left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment