Portrait & landscape mode of player
Introduction
Players should render in portrait and landscape mode both and this functionality should be able to verify in web portal.
https://project-sunbird.atlassian.net/browse/SB-30126
Background:
Currently we are verifying this portrait and landscape mode in mobile devices only. There is no such functionality available where - we can verify the player in portrait and landscape mode in web.
Problem Statement:
To show the v1 and v2 players in portrait mode, we will face some in rendering and aspect ratio issue for contents
Key Design Problems:
What should be the Player behaviour in portrait/Landscape mode change?
Where to show the portrait and landscape mode buttons?
How player v1 should also support the portrait mode in all stages?
How to maintain the content state?
Is the player can support this behaviour?
Design:
Solution 1 :
Portrait and landscape mode button should be part of the Portal
To achieve this, player will rendered in full screen and will change the height and width of the player to show the player in portrait mode.
There is no config changes in player side.
Sample code
<sunbird-epub-player [ngClass]="{'player-oriendation': landscape/portrait}">&.player-oriendation-portraite {
width: 28%;
height: calc(100vh - 50px) !important;
position:fixed;
top:calculateRem(50px);
left:35%;
bottom:0;
right:0
}
&.player-fullscreen iframe {
width: 100%;
height: calc(100vh - 50px) !important;
}showPortrait() {
// Load player in fullscreen
// Reduce height and width of the Iframe
}
showLandscape() {
// Disable full screen mode
}Pros:
No changes in player required as we are implementing this from portal side.
Cons:
Aspect ratio can be vary.
For PDF, Epub and video player alignment of the controls may needed.
V1 player contents will looks in small size in portrait mode.
No config to restrict the player to load in different orientation.
Solution 2 :
Portrait and landscape button should be part of the player
The portrait and Landscape button will be appear as a part of the menu config. This config can be change from the sidebar configurations.
Config:
Changes required in V1 player:
Need to reduce the canvas height and width
reduce the frame height and width
Overlay navigation height and width need to adjust
Pros:
Config driven implementation to enable disable the portrait/landscape mode orientation
Work for V1 player and assessments.
Cons:
Expect player content area, other area will show in a black as a background. Which will not look good.
Conclusion:
In portrait mode PDF, Epub, Video and interactive content will not suite for portrait screen
Sample screens of portrait mode of PDF, EPub, video and interactive contents
In PDF and EPub player, font size will show in small. If we increase the font size - horizontal scroll will come, which looks uncomfortable to the reader to scroll horizontally.
V1 and V2 Players supports portrait mode with the above limitations. This can be achieve using the solution 1 which is not depend on player.
cc- @Vinu Kumar @Harish Kumar Gangula