Fix:#4558 Optimize Camera Feed for Mobile Usage #7363

bishwas-10 · 2024-03-08T14:43:40Z

Proposed Changes

Fixes Optimize Camera Feed for Mobile Usage #4558
made camera feed responsive by positioning them

before

after

@coronasafe/care-fe-code-reviewers @coronasafe/code-reviewers

Merge Checklist

Add specs that demonstrate bug / test a new feature.
Update product documentation.
Ensure that UI text is kept in I18n files.
Prep screenshot or demo video for changelog entry, and attach it to issue.
Request for Peer Reviews
Completion of QA

vercel · 2024-03-08T14:43:45Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
care-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 13, 2024 0:53am

netlify · 2024-03-08T14:43:58Z

❌ Deploy Preview for care-egov-staging failed.

Name	Link
🔨 Latest commit	`d9f1321`
🔍 Latest deploy log	https://app.netlify.com/sites/care-egov-staging/deploys/661fe0e57dd5bc000898b65c

rithviknishad

Use aspect-ratio of tailwindcss instead of using js to handle this logic

https://tailwindcss.com/docs/aspect-ratio#setting-the-aspect-ratio

src/Components/Facility/Consultations/Feed.tsx

rithviknishad

The page is overflowing to the right. Can we do something about it?

rithviknishad · 2024-03-10T08:07:44Z

We could do something like the Live Feed page. https://care.ohc.network/facility/0c95c7f0-e1d2-4aff-83fa-933cef60d3a8/live-monitoring?location=09ab6e88-9132-434a-b8ab-b342b10e7bef&page=1&limit=4

bishwas-10 · 2024-03-10T08:38:23Z

@rithviknishad
i have added overflow-hidden here will it be okay if it doesnt cause any error?

rithviknishad · 2024-03-10T08:41:38Z

Can we also make the buttons of uniform height? The preset buttons looks broken with various when there are many presets

bishwas-10 · 2024-03-10T08:48:28Z

@rithviknishad these buttons?

rithviknishad · 2024-03-10T08:53:17Z

the preset buttons

bishwas-10 · 2024-03-10T08:57:59Z

@rithviknishad where exactly is this page located
i am working here

rithviknishad · 2024-03-10T08:59:21Z

https://care.ohc.network/facility/0c95c7f0-e1d2-4aff-83fa-933cef60d3a8/patient/7e8fc20f-02da-47f7-8c33-f2d8c7e52dd8/consultation/cb44a173-6fe2-452f-b2d1-6c6e2695411e/feed

bishwas-10 · 2024-03-10T09:01:47Z

@rithviknishad its says page not found

rithviknishad · 2024-03-10T09:08:46Z

Use dev district admin credentials as mentioned in the readme

rithviknishad · 2024-03-10T10:06:10Z

IMO this doesn't seem to be any better than before. We could have a select menu instead like how I've mentioned in #7363 (comment)

rithviknishad · 2024-03-10T11:28:50Z

src/Components/Facility/Consultations/Feed.tsx

+          <div className="flex flex-wrap items-center bg-gray-100">
+            <Popover className="relative">
+              <Popover.Button>
+                <ButtonV2 variant="secondary" border>
+                  <CareIcon className="care-l-setting text-lg" />
+                  Presets
+                </ButtonV2>
+              </Popover.Button>
+              <Transition
+                as={Fragment}
+                enter="transition ease-out duration-200"
+                enterFrom="opacity-0 translate-y-1"
+                enterTo="opacity-100 translate-y-0"
+                leave="transition ease-in duration-150"
+                leaveFrom="opacity-100 translate-y-0"
+                leaveTo="opacity-0 translate-y-1"
              >
-                {preset.meta.preset_name || `Preset ${index + 1}`}
-              </button>
-            ))}
+                <Popover.Panel className="absolute z-30 mt-1 h-60 w-60 -translate-x-1/3 overflow-y-scroll px-4 sm:px-0 md:w-96 md:-translate-x-1/2 lg:max-w-3xl">
+                  <div className="rounded-lg shadow-lg ring-1 ring-gray-400">
+                    <div className="rounded-t-lg bg-gray-100 px-6 py-4">
+                      <span className="block text-sm text-gray-800">
+                        Camera(s) preset
+                      </span>
+                    </div>
+                    <div className="flex flex-col">
+                      {bedPresets?.map((preset: any, index: number) => (
+                        <ButtonV2
+                          key={preset.id}
+                          variant={
+                            currentPreset === preset ? "primary" : "secondary"
+                          }
+                          onClick={() => {
+                            setLoading(CAMERA_STATES.MOVING.GENERIC);
+                            // gotoBedPreset(preset);
+                            absoluteMove(preset.meta.position, {
+                              onSuccess: () => {
+                                setLoading(CAMERA_STATES.IDLE);
+                                setCurrentPreset(preset);
+                                console.log(
+                                  "onSuccess: Set Preset to " +
+                                    preset?.meta?.preset_name
+                                );
+                                triggerGoal("Camera Preset Clicked", {
+                                  presetName: preset?.meta?.preset_name,
+                                  consultationId,
+                                  userId: authUser.id,
+                                  result: "success",
+                                });
+                              },
+                              onError: () => {
+                                setLoading(CAMERA_STATES.IDLE);
+                                setCurrentPreset(preset);
+                                console.log(
+                                  "onError: Set Preset to " +
+                                    preset?.meta?.preset_name
+                                );
+                                triggerGoal("Camera Preset Clicked", {
+                                  presetName: preset?.meta?.preset_name,
+                                  consultationId,
+                                  userId: authUser.id,
+                                  result: "error",
+                                });
+                              },
+                            });
+                            getCameraStatus({});
+                          }}
+                          className="w-full"
+                        >
+                          {preset.meta.preset_name || `Preset ${index + 1}`}
+                        </ButtonV2>
+                      ))}
+                    </div>
+                  </div>
+                </Popover.Panel>
+              </Transition>
+            </Popover>


We already have a reusable component called SelectMenuFormField. Use that instead of duplicating the logic here...

Also, this does not look nice in desktop view...

hmm ok Co-authored-by: Rithvik Nishad <[email protected]>

github-actions · 2024-04-24T07:18:18Z

👋 Hi, @bishwas-10,
Conflicts have been detected against the base branch. Please rebase your branch against the base branch.

This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there.

rithviknishad · 2024-04-24T12:08:30Z

Closing as stale + deploy failed not fixed + conflicts + solved in #7654

bishwas-10 requested a review from a team as a code owner March 8, 2024 14:43

vercel bot temporarily deployed to Preview March 8, 2024 14:44 Inactive

rithviknishad added the hold label Mar 10, 2024

rithviknishad requested changes Mar 10, 2024

View reviewed changes

rithviknishad added changes required and removed hold labels Mar 10, 2024

vercel bot temporarily deployed to Preview March 10, 2024 04:39 Inactive

bishwas-10 requested a review from rithviknishad March 10, 2024 04:40

rithviknishad requested changes Mar 10, 2024

View reviewed changes

src/Components/Facility/Consultations/Feed.tsx Outdated Show resolved Hide resolved

vercel bot temporarily deployed to Preview March 10, 2024 07:51 Inactive

bishwas-10 requested a review from rithviknishad March 10, 2024 07:52

rithviknishad requested changes Mar 10, 2024

View reviewed changes

bishwas-10 requested a review from rithviknishad March 10, 2024 08:40

vercel bot temporarily deployed to Preview March 10, 2024 08:40 Inactive

vercel bot temporarily deployed to Preview March 10, 2024 09:46 Inactive

vercel bot temporarily deployed to Preview March 10, 2024 11:05 Inactive

vercel bot temporarily deployed to Preview March 10, 2024 11:18 Inactive

rithviknishad requested changes Mar 10, 2024

View reviewed changes

bishwas-10 and others added 22 commits April 17, 2024 20:18

camera preset fixed i guess

4d9519b

removed console log

2198895

select server error and preset label fixed i guess

ac060e2

Update src/Components/Facility/Consultations/Feed.tsx

85aedc0

hmm ok Co-authored-by: Rithvik Nishad <[email protected]>

removed console log

1e2a546

merge fix

19c4ba6

dont know

b72a77f

removed other chnages

3600fb2

aspect-ration is used

5fa273a

overflow fixed

61487a4

hieght fixed

48b0165

camera preset redesigned

158074a

preset fixes

1630507

need help

f60e6dc

didn't work

e59c86b

camera preset fixed i guess

d55739e

select server error and preset label fixed i guess

c51d963

Update src/Components/Facility/Consultations/Feed.tsx

7cab94c

hmm ok Co-authored-by: Rithvik Nishad <[email protected]>

removed console log

def1b74

not working

f97bd0f

removed other chnages

b0444a8

i dont know but it works made a new CameraPresetSelect file

d9f1321

bishwas-10 force-pushed the fix/mobileCameraView branch 2 times, most recently from 0a85cc1 to d9f1321 Compare April 17, 2024 14:46

github-actions bot added merge conflict pull requests with merge conflict and removed merge conflict pull requests with merge conflict labels Apr 18, 2024

rithviknishad closed this Apr 24, 2024

bishwas-10 deleted the fix/mobileCameraView branch July 18, 2024 06:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix:#4558 Optimize Camera Feed for Mobile Usage #7363

Fix:#4558 Optimize Camera Feed for Mobile Usage #7363

bishwas-10 commented Mar 8, 2024

vercel bot commented Mar 8, 2024 •

edited

Loading

netlify bot commented Mar 8, 2024 •

edited

Loading

rithviknishad left a comment

rithviknishad left a comment •

edited

Loading

rithviknishad commented Mar 10, 2024

bishwas-10 commented Mar 10, 2024

rithviknishad commented Mar 10, 2024 •

edited

Loading

bishwas-10 commented Mar 10, 2024

rithviknishad commented Mar 10, 2024

bishwas-10 commented Mar 10, 2024

rithviknishad commented Mar 10, 2024

bishwas-10 commented Mar 10, 2024

rithviknishad commented Mar 10, 2024

rithviknishad commented Mar 10, 2024

rithviknishad Mar 10, 2024

github-actions bot commented Apr 24, 2024

rithviknishad commented Apr 24, 2024

Fix:#4558 Optimize Camera Feed for Mobile Usage #7363

Fix:#4558 Optimize Camera Feed for Mobile Usage #7363

Conversation

bishwas-10 commented Mar 8, 2024

Proposed Changes

Merge Checklist

vercel bot commented Mar 8, 2024 • edited Loading

netlify bot commented Mar 8, 2024 • edited Loading

❌ Deploy Preview for care-egov-staging failed.

rithviknishad left a comment

Choose a reason for hiding this comment

rithviknishad left a comment • edited Loading

Choose a reason for hiding this comment

rithviknishad commented Mar 10, 2024

bishwas-10 commented Mar 10, 2024

rithviknishad commented Mar 10, 2024 • edited Loading

bishwas-10 commented Mar 10, 2024

rithviknishad commented Mar 10, 2024

bishwas-10 commented Mar 10, 2024

rithviknishad commented Mar 10, 2024

bishwas-10 commented Mar 10, 2024

rithviknishad commented Mar 10, 2024

rithviknishad commented Mar 10, 2024

rithviknishad Mar 10, 2024

Choose a reason for hiding this comment

github-actions bot commented Apr 24, 2024

rithviknishad commented Apr 24, 2024

vercel bot commented Mar 8, 2024 •

edited

Loading

netlify bot commented Mar 8, 2024 •

edited

Loading

rithviknishad left a comment •

edited

Loading

rithviknishad commented Mar 10, 2024 •

edited

Loading