Added the necessary features for Play-Only-Mode

[justin212407]

Description:

This PR is in continuation to #4320. It adds the features to Play-Only-Mode that has previously been discussed on.

Changes Made:

This PR ensures that the only elements being rendered upon in play-only-mode are:

1. Change Theme Icon
2. Trash Icon
3. Language Selection Icon

This also ensures that the horizontal scrolling feature is activated as default in play-only-mode.

Screenshots:

Untitled.video.-.Made.with.Clipchamp.6.mp4

Checklist:

• The code has been tested in Play Only Mode.
• There are no breaking changes.
• My changes adhere to the project's contribution guidelines.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[justin212407]

@walterbender please review this.

[Ubayed-Bin-Sufian]

@justin212407 Could you please update the documentation/README.md with play only mode? We do not have it right now.

[justin212407]

Yes I'll update that accordingly @walterbender @pikurasa where would you want the documentation/Readme.md for the play-only-mode to be at specifically?

[walterbender]

The main README.md file is the right place to document this.

[walterbender]

Not sure if this is the expected behavior.

[justin212407]

It works fine on my device locally this is how it looks.Please change over to full screen to be sure that play-only-mode activates
This is how it looks when i change to full screen:

This is how it looks when in normal screen:

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[justin212407]

@walterbender I tested the same on Microsoft Edge too. This is how it looks:

Untitled.video.-.Made.with.Clipchamp.7.mp4

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[walterbender]

I am not sure what is going on, but I cannot reproduce the behavior you are seeing in either Firefox or Chromium.

[Karan-Palan]

Toolbaar does not work below 400px, otherwise works fine

Screencast.from.2025-03-15.08-17-09.webm

Tested on Firefox and Brave

[justin212407]

I am not sure what is going on, but I cannot reproduce the behavior you are seeing in either Firefox or Chromium.

@walterbender Did you go full screen? Play-only-mode only works in full screen. Also the screen width should definitely be below 768px it will work only then.

[justin212407]

Toolbaar does not work below 400px, otherwise works fine

Screencast.from.2025-03-15.08-17-09.webm
Tested on Firefox and Brave

@Karan-Palan might have gotten overlooked thanks for pointing it out I'll fix that and push the changes to this pr once walter can reproduce this locally.

[justin212407]

@walterbender since you are unable to reproduce the behavior should I close this pr and open a new one with with same changes?

[walterbender]

I don't know. Maybe @pikurasa can test?

[justin212407]

Sure we can definitely do that. I also asked @apsinghdev to check this out in the last meet if it's possible

[pikurasa]

I set up the following for testing on a phone: https://sandbox.musicblocks.net/test/pikurasa/

Currently it's on "HEAD is now at c8a1363 Merge branch 'master' of https://github.com/justin212407/musicblocks into play-only-mode-additions" (and it requires manual updates).

[pikurasa]

Here are the results of testing via Chromium on a Pixel 9 mobile phone:

Specifically, the improvements would be:

• Adjust the logo for the splashscreen to be visible during loading: https://github.com/user-attachments/assets/8d8b7624-fbb7-4610-a551-2b45d3aeae2f
• This is what help looks like, the first thing that loads after the splash screen. I think it's fine (but notice it's not automatically in full screen at this time): https://github.com/user-attachments/assets/8a2bc49a-f6e5-4fff-bcd4-d2581590c531
• Upon exiting the splashscreen, this is what the default project looks like. It's fine. (We're not in full screen): https://github.com/user-attachments/assets/5186f2de-7919-4108-854f-3d396d886c7c
• This is what the message at the bottom of the screen looks like. It's good. Note that I did put it into fullscreen manually. See: https://github.com/user-attachments/assets/d02aafaa-71c8-41b6-94f2-f5fac26618d2
• Notice that the messages that appear at the top of the screen do not fit well at the moment. This should be fixed before merging. (Also, taking these screenshots seems to kick me out of fullscreen, which defaults me out of play-only, so this screenshot is not in fullscreen although it was set prior to this.) See: https://github.com/user-attachments/assets/350a3848-6cff-4d8a-8576-f514af3e9ed9
• This is after opening a project from the planet. Notice that the top message doesn't fit within the screen (same issue as above). See: https://github.com/user-attachments/assets/61755897-4582-47d3-bc72-31a90b6b8488

So those are the results of my testing on a Pixel 9 mobile phone.

Based on this, the improvement areas are:

1. If possible, figure out a way to initiate play-only mode without the necessity of clicking fullscreen. This extra step is problematic. If this works, then you probably don't need the fullscreen button at all.
2. If it's not possible to initiate play-only mode without clicking fullscreen, please find a way to 1) make it discoverable to the user and 2) persistent even after a user leaves focus from the application and returns to it.
3. Put the messages printed at the top of the screen at the new play-only mode screen center, and readjust its width so that a user can read the message.
4. (Lowest priority) Adjust the location of the Sugar Labs logo for the splashscreen, so that it can be seen when opening the app. (This issue may be solved if you solve the fullscreen issue, but I'm not entirely sure.)

[apsinghdev]

play_mode.mp4

@justin212407 I am able to see the changes you mentioned but the UI is not responsive. What if we tackle the issue of responsiveness first and then circle back to it? (As this issue depends on the UI). Also, I agree with the improvements suggested by @pikurasa. Tackling these will lead to a really good outcome. Probably, you'll need to prioritize the improvements.

[justin212407]

@apsinghdev go into full screen mode then you won't face the responsiveness issue

[justin212407]

Here are the results of testing via Chromium on a Pixel 9 mobile phone:

Specifically, the improvements would be:

• Adjust the logo for the splashscreen to be visible during loading: https://github.com/user-attachments/assets/8d8b7624-fbb7-4610-a551-2b45d3aeae2f
• This is what help looks like, the first thing that loads after the splash screen. I think it's fine (but notice it's not automatically in full screen at this time): https://github.com/user-attachments/assets/8a2bc49a-f6e5-4fff-bcd4-d2581590c531
• Upon exiting the splashscreen, this is what the default project looks like. It's fine. (We're not in full screen): https://github.com/user-attachments/assets/5186f2de-7919-4108-854f-3d396d886c7c
• This is what the message at the bottom of the screen looks like. It's good. Note that I did put it into fullscreen manually. See: https://github.com/user-attachments/assets/d02aafaa-71c8-41b6-94f2-f5fac26618d2
• Notice that the messages that appear at the top of the screen do not fit well at the moment. This should be fixed before merging. (Also, taking these screenshots seems to kick me out of fullscreen, which defaults me out of play-only, so this screenshot is not in fullscreen although it was set prior to this.) See: https://github.com/user-attachments/assets/350a3848-6cff-4d8a-8576-f514af3e9ed9
• This is after opening a project from the planet. Notice that the top message doesn't fit within the screen (same issue as above). See: https://github.com/user-attachments/assets/61755897-4582-47d3-bc72-31a90b6b8488

So those are the results of my testing on a Pixel 9 mobile phone.

Based on this, the improvement areas are:

1. If possible, figure out a way to initiate play-only mode without the necessity of clicking fullscreen. This extra step is problematic. If this works, then you probably don't need the fullscreen button at all.
2. If it's not possible to initiate play-only mode without clicking fullscreen, please find a way to 1) make it discoverable to the user and 2) persistent even after a user leaves focus from the application and returns to it.
3. Put the messages printed at the top of the screen at the new play-only mode screen center, and readjust its width so that a user can read the message.
4. (Lowest priority) Adjust the location of the Sugar Labs logo for the splashscreen, so that it can be seen when opening the app. (This issue may be solved if you solve the fullscreen issue, but I'm not entirely sure.)

yes i will be trying to look into this as for the fullscreen mode I will probably have to dig deeper into how dpr works. For now i will implement points 2,3 and 4 as they are an urgent fix.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[pikurasa]

@justin212407 where are things at with this? I see a few new commits. Is it ready to test again?

[justin212407]

@pikurasa i did make some changes but as we talked about in the meet, we need to find out the root cause as to why this change has happened so as discussed in the meeting. I am checking out the prs which made changes to the index file. So that we can fix this change between FullScreen Mode and Normal Mode having the same changes reflect in both so that it is a permanent fix and not just a temporary one.
I will let you know as soon as this is done.
The investigation as to what caused this change between the modes is taking some time.

[pikurasa]

The investigation as to what caused this change between the modes is taking some time.

If you want to write up a blog about your investigation, that could be nice. It may even help you work through the problem.

[justin212407]

@pikurasa Sure i will definitely do that

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[walterbender]

@pikurasa is this ready to merge?

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[justin212407]

@walterbender @pikurasa this is almost done have brought this feature to normal screen too now the only thing left is having horizontal scroll

[github-actions]

This pull request has been open for more than 60 days without any activity. It will be closed in 3 days unless the stale label is removed or commented on.

[github-actions]

Closed pull request due to inactivity for more than 63 days.