fix(rerendering): reduce the re-rendering of the viewport grid

[sedghi]

Context

There were unnecessary re-renderings through out the app

1. In the viewport because of the useViewportGrid context, everytime the active viewport index was changing it was causing a re-render. Looking deeper it is needed for cine player so refactored the cine player to reduce re re-render
2. split button was always listenning on the click where it should listen if opens

Testing

Use react profiler and you will see these re-renders

Checklist

PR

• [] My Pull Request title is descriptive, accurate and follows the
  semantic-release format and guidelines.

Code

• [] My code has been well-documented (function documentation, inline comments,
  etc.)

Public Documentation Updates

• [] The documentation page has been updated as necessary for any public API
  additions or removals.

Tested Environment

• [] OS:
• [] Node version:
• [] Browser:

[netlify]

✅ Deploy Preview for ohif-platform-docs ready!

Name	Link
🔨 Latest commit	24d64a0
🔍 Latest deploy log	https://app.netlify.com/sites/ohif-platform-docs/deploys/64c1298a0cc84e00084047bf
😎 Deploy Preview	https://deploy-preview-3558--ohif-platform-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for ohif-dev canceled.

Name	Link
🔨 Latest commit	24d64a0
🔍 Latest deploy log	https://app.netlify.com/sites/ohif-dev/deploys/64c1298af67e2b0007d97f52

[codecov]

Codecov Report

Merging #3558 (24d64a0) into master (1efe2db) will not change coverage.
Report is 2 commits behind head on master.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #3558   +/-   ##
=======================================
  Coverage   42.93%   42.93%           
=======================================
  Files          80       80           
  Lines        1444     1444           
  Branches      338      338           
=======================================
  Hits          620      620           
  Misses        661      661           
  Partials      163      163           

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update cab8d32...24d64a0. Read the comment docs.

[cypress]

Passing run #3389 ↗︎

0

36

0

0

0

Details:

apply review comments
Project: Viewers	Commit: 24d64a06a1
Status: Passed	Duration: 02:53 💡
Started: Jul 26, 2023 3:29 PM	Ended: Jul 26, 2023 3:32 PM

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[wayfarer3130]

I really like this setup with just instantiating the component rather than passing all sorts of extra services in.

[wayfarer3130]

Could you consider getting the customization service here and if the customization service defines a cine player, then returning that CINE player instead of this one? That way the user can replace the CINE player entirely should the mode decide they want to do that. I've seen several implementations of different CINE players, so it is clearly something that people want to customize in the mode.

[wayfarer3130]

Would like to see the disabled use on the tree rather than the remove/add of the entire outside click handler.